ui: change index page layout

web/src/views/Index.vue

@@ -1,26 +1,19 @@
 <template>
     <div class="container">
-        <div class="header">
+        <a-row>
-            <img src="../assets/logo.svg" style="width: 80px;height: 80px;filter: drop-shadow(2px 2px 6px #79bbff);" />
+            <a-col :span="14">
-            <span class="title">ZO<b style="color: #1283FF;">C</b>RM</span>
+                <div class="back"></div>
-        </div>
+            </a-col>
-        <div class="content">
+            <a-col :span="10">
-            <div class="main">
+                <div class="form">
                     <transition name="fade">
                         <router-view v-slot="{ Component }">
                             <component :is="Component" />
                         </router-view>
                     </transition>
                 </div>
-            <div class="footer">
+            </a-col>
-                <div class="links">
+        </a-row>
-                    <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>
     </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 {

web/src/views/Login.vue

@@ -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);
 }

web/src/views/Pass.vue

@@ -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="primary" html-type="submit" size="large" style="width: 100%;">确定</a-button>
-            <a-button type="link" style="width: 50%;" @click="onLogin">使用已有账户登录</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>

web/src/views/Register.vue

@@ -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="primary" html-type="submit" size="large" style="width: 100%;">注册</a-button>
-            <a-button type="link" style="width: 50%;" @click="onLogin">使用已有账户登录</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>