ui: change index page layout
This commit is contained in:
zchengo
+31
-16
@@ -1,26 +1,19 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<img src="../assets/logo.svg" style="width: 80px;height: 80px;filter: drop-shadow(2px 2px 6px #79bbff);" />
|
||||
<span class="title">ZO<b style="color: #1283FF;">C</b>RM</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="main">
|
||||
<a-row>
|
||||
<a-col :span="14">
|
||||
<div class="back"></div>
|
||||
</a-col>
|
||||
<a-col :span="10">
|
||||
<div class="form">
|
||||
<transition name="fade">
|
||||
<router-view v-slot="{ Component }">
|
||||
<component :is="Component" />
|
||||
</router-view>
|
||||
</transition>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="links">
|
||||
<a href="https://github.com/zchengo/crm">开源地址</a>
|
||||
<a href="https://github.com/zchengo/crm/blob/main/LICENSE">许可证</a>
|
||||
<a href="https://mail.qq.com/">企鹅邮箱</a>
|
||||
</div>
|
||||
<div class="copyright">Copyright © 2022 www.zocrm.cloud</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -32,7 +25,29 @@
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: #F0F2F5;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f9f9fb;
|
||||
background-image: url('../assets/back.png');
|
||||
background-size: 75% 75%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header {
|
||||
|
||||
+11
-1
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<a-form :model="formData" name="normal_login" class="login-form" @finish="onLogin" @finishFailed="onLoginFailed">
|
||||
<a-form :model="formData" @finish="onLogin" @finishFailed="onLoginFailed" style="width: 65%;">
|
||||
<a-form-item>
|
||||
<div class="title">账号登录</div>
|
||||
</a-form-item>
|
||||
<a-form-item name="email" :rules="[{ required: true, message: '请输入邮箱!' }]">
|
||||
<a-input v-model:value="formData.email" size="large" placeholder="邮箱">
|
||||
<template #prefix>
|
||||
@@ -98,6 +101,13 @@ const initSysData = () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
color: #303133;
|
||||
font-size: 30px;
|
||||
line-height: 65px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.site-form-item-icon {
|
||||
color: rgba(0, 0, 0, .45);
|
||||
}
|
||||
|
||||
+14
-4
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<a-form ref="passFormRef" :model="formData" layout="vertical" @finish="onSubmit" :rules="rules">
|
||||
<a-form ref="passFormRef" :model="formData" layout="vertical" style="width: 65%;" @finish="onSubmit" :rules="rules">
|
||||
<a-form-item>
|
||||
<div class="title">密码重置</div>
|
||||
</a-form-item>
|
||||
<a-form-item name="email">
|
||||
<a-input v-model:value="formData.email" size="large" placeholder="邮箱" />
|
||||
</a-form-item>
|
||||
@@ -16,8 +19,10 @@
|
||||
<a-input-password v-model:value="formData.password2" size="large" placeholder="确认密码" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit" size="large" style="width: 50%;">确定</a-button>
|
||||
<a-button type="link" style="width: 50%;" @click="onLogin">使用已有账户登录</a-button>
|
||||
<a-button type="primary" html-type="submit" size="large" style="width: 100%;">确定</a-button>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
已想起密码？<a @click="onLogin"> 直接登录</a>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
@@ -107,5 +112,10 @@ const onLogin = () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.title {
|
||||
color: #303133;
|
||||
font-size: 30px;
|
||||
line-height: 65px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,9 @@
|
||||
<template>
|
||||
<a-form ref="registerFormRef" :model="formData" layout="vertical" @finish="onRegister" :rules="rules">
|
||||
<a-form ref="registerFormRef" :model="formData" style="width: 65%;" layout="vertical" @finish="onRegister"
|
||||
:rules="rules">
|
||||
<a-form-item>
|
||||
<div class="title">账号注册</div>
|
||||
</a-form-item>
|
||||
<a-form-item name="email">
|
||||
<a-input v-model:value="formData.email" size="large" placeholder="邮箱" />
|
||||
</a-form-item>
|
||||
@@ -16,8 +20,10 @@
|
||||
<a-input-password v-model:value="formData.password2" size="large" placeholder="确认密码" />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button type="primary" html-type="submit" size="large" style="width: 50%;">注册</a-button>
|
||||
<a-button type="link" style="width: 50%;" @click="onLogin">使用已有账户登录</a-button>
|
||||
<a-button type="primary" html-type="submit" size="large" style="width: 100%;">注册</a-button>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
已有账号？<a @click="onLogin"> 直接登录</a>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
@@ -115,5 +121,10 @@ const onLogin = () => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.title {
|
||||
color: #303133;
|
||||
font-size: 30px;
|
||||
line-height: 65px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user