refactor:登陆样式

src/icons/svg/logo.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#......" version="1.1" width="39" height="27" viewBox="0 0 39 27">
+<g style="mix-blend-mode:passthrough"><g>
+    <g style="mix-blend-mode:passthrough">
+        <path d="M16.6898,0.404005C10.2421,-1.28552,3.85953,2.35948,2.44299,10.6741C1.76728,14.5851,0.000672783,26.5487,0.000672783,26.5487C-0.00265092,26.6066,0.00636506,26.6645,0.0271694,26.719C0.0479738,26.7735,0.0801294,26.8233,0.121666,26.8654C0.163202,26.9075,0.213246,26.941,0.268733,26.9639C0.324219,26.9867,0.383979,26.9985,0.444358,26.9984C0.444358,26.9984,3.5176,26.9984,3.5176,26.9984C4.60586,27.028,5.66212,26.6428,6.45595,25.927C7.24978,25.2112,7.71677,24.2228,7.75502,23.1774C7.75502,23.1774,10.1973,8.6209,10.1973,8.6209C10.1973,8.53094,11.6261,3.50929,15.4524,3.14558C18.4971,2.85226,20.4754,8.02643,20.7848,8.53094C20.8192,8.59148,20.8686,8.64299,20.9285,8.68096C20.9885,8.71893,21.0572,8.74222,21.1287,8.74878C21.2002,8.75534,21.2722,8.74497,21.3386,8.71859C21.4049,8.69221,21.4636,8.65061,21.5093,8.59743C21.5093,8.59743,22.9259,7.37722,22.9259,7.37722C23.451,6.7984,21.1674,1.57729,16.6898,0.404005C16.6898,0.404005,16.6898,0.404005,16.6898,0.404005Z" fill="#......" /></g><g style="mix-blend-mode:passthrough"><path d="M38.9491,3.33903C38.7599,2.57391,38.3581,1.87459,37.788,1.31802C37.2179,0.761449,36.501599999999996,0.369203,35.7179,0.184443C33.718599999999995,-0.304518,31.2265,0.121351,28.447699999999998,2.15606C26.8321,3.33903,18.07555,11.2649,17.1385,11.2255C16.6619,11.2255,15.866217,10.6379,15.567331,10.6064C15.471319,10.5956,15.374132,10.6117,15.287141,10.6528C15.20015,10.6939,15.12695,10.7583,15.0761068,10.8386C15.0252633,10.9188,14.99887783,11.0116,15.0000365897,11.1059C15.00119535,11.2003,15.0298522,11.2924,15.082652,11.3714C15.405772,11.8525,15.833904,13.9936,16.34282,14.4905C17.10215,15.2318,18.61274,14.0962,18.62081,14.1198C18.62889,14.1435,29.3403,5.35402,30.4672,4.91632C32.4867,4.12767,32.0828,6.49361,31.6789,8.46522C31.6789,8.46522,28.851599999999998,26.5449,28.851599999999998,26.5449C28.848300000000002,26.6033,28.857300000000002,26.6618,28.8779,26.7167C28.8985,26.7716,28.9304,26.8218,28.9717,26.8643C29.012900000000002,26.9067,29.0625,26.9405,29.1176,26.9636C29.1726,26.9866,29.2319,26.9985,29.2919,26.9984C29.2919,26.9984,32.341300000000004,26.9984,32.341300000000004,26.9984C33.421099999999996,27.0282,34.4692,26.6399,35.2569,25.9182C36.0446,25.1964,36.5079,24.1999,36.5459,23.1459C36.5459,23.1459,39.4136,4.35638,38.9491,3.33903C38.9491,3.33903,38.9491,3.33903,38.9491,3.33903Z" fill="#......" />
+        </g>
+            <g style="mix-blend-mode:passthrough"><path d="M9.16075,1C5.8477,2.4841800000000003,3.25749,5.77196,2.41016,10.7387C1.74353,14.6342,0.000663741,26.5504,0.000663741,26.5504C-0.00261529,26.6081,0.00627952,26.6659,0.0268043,26.7201C0.0473291,26.7744,0.0790526,26.824,0.12003,26.8659C0.161008,26.9079,0.21038,26.9412,0.265121,26.964C0.319862,26.9868,0.378822,26.9985,0.43839,26.9984C0.43839,26.9984,3.47033,26.9984,3.47033,26.9984C4.54396,27.0279,5.58602,26.6442,6.36919,25.9313C7.15235,25.2183,7.61306,24.2338,7.6508,23.1925C7.6508,23.1925,10.0603,8.693570000000001,10.0603,8.693570000000001C10.2797,7.91803,10.5953,7.17114,11,6.46925C11,6.46925,9.16075,1,9.16075,1C9.16075,1,9.16075,1,9.16075,1Z" fill="#......"/>
+            </g>
+        </g>
+    </g>
+</svg>

src/styles/globalVariables.module.less

@@ -1,8 +1,9 @@
 /* color */
 @color-black: #282c34;
+@color-gray: #999;
 @color-white: #fff;
-@color-white-dark: #f6f8f9;
-@color-primary: #409eff;
+@color-white-dark: #f8f8f8;
+@color-primary: #4481ff;
 @color-primary-white: #e8f4ff;
 
 @color-ghost-white: fade(@color-white, 10%);
@@ -22,10 +23,15 @@
 @layout-h3: 16px;
 @layout-h4: 14px;
 @layout-border-radius: 5px;
+@layout-border-radius-small: 3px;
+@layout-border-radius-large: 10px;
+@layout-border-radius-super: 15px;
+@layout-border-radius-max: 20px;
 @layout-space: 10px;
 @layout-space-small: 5px;
 @layout-space-large: 15px;
 @layout-space-super: 20px;
+@layout-space-max: 30px;
 @layout-shadow: fade(@color-black, 20%) 0px 0px 5px;
 
 @layout-aside-bgc: @color-black;

src/views/global/404.vue

@@ -2,73 +2,31 @@
     <div class="container">
         <div class="box">
             <h1 class="title">404</h1>
+            <h1 class="sub">Page Not Found</h1>
         </div>
     </div>
 </template>
 
-<script setup>
-    const { proxy } = getCurrentInstance();
-    const store = useStore();
-
-    const refsForm = ref(null);
-    const loading = ref(false);
-    const form = reactive({
-        phone: '',
-        password: '',
-        verifyCode: '',
-    });
-    const lastTime = computed(() => store.state.local.lastSendMessageTime);
-    const waitTime = ref(60);
-    const sendStep = ref(60);
-    const rules = reactive({
-        phone: [{ required: true, message: '请输入手机号码' }],
-        password: [{ required: true, message: '请输入登录密码' }],
-        verifyCode: [{ required: true, message: '请输入验证码' }],
-    });
-
-    waitTime.value = Math.max(0, unref(sendStep) - Math.ceil((new Date().getTime() - unref(lastTime)) / 1000));
-    setInterval(() => {
-        waitTime.value = Math.max(0, unref(sendStep) - Math.ceil((new Date().getTime() - unref(lastTime)) / 1000));
-    }, 1000);
-
-    const handleSms = async () => {
-        if (form.phone) {
-            loading.value = true;
-            await store.dispatch('auth/sms', { phone: form.phone, type: 1 });
-            loading.value = false;
-        } else {
-            proxy.$message.warning('请输入手机号码');
-        }
-    };
-    const handleLogin = async () => {
-        loading.value = true;
-        try {
-            await unref(refsForm).validate();
-            await store.dispatch('auth/login', form);
-        } catch (e) {
-            console.info('取消登录', e);
-        }
-        loading.value = false;
-    };
-</script>
+<script setup></script>
 
 <style lang="less" scoped>
     .container {
-        width: 100%;
-        height: 100%;
-        background: #000 url('~/global/login-bgp.png') center center / 100% 100% no-repeat;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: @color-white;
+        width: 100vw;
+        height: 100vh;
+        background: #000 url('~/layouts/login-bgp.png') center center / cover no-repeat;
+        position: relative;
         .box {
-            width: 420px;
-            padding: 30px;
-            background: #1a2229;
-            border-radius: 10px;
-            .title {
-                font-size: 48px;
+            position: absolute;
+            color: @color-white;
+            left: 60%;
+            bottom: 40%;
+            padding: 40px 50px;
+            border-radius: @layout-border-radius-super;
             text-align: center;
+            .title {
+                margin-bottom: @layout-space;
+                font-size: 256px;
+                font-weight: bolder;
             }
         }
     }

src/views/global/login.vue

@@ -1,23 +1,39 @@
 <template>
     <div class="mask">
         <div class="box">
-            <div class="title">登录</div>
+            <div class="logo">
+                <el-icon name="logo" svg color="#69ADE5" size="50"></el-icon>
+            </div>
+            <div class="title">马士兵严选管理平台</div>
+            <div class="sub">登录您的管理账号</div>
             <el-form ref="refsForm" class="content" :model="form" :rules="rules" size="large">
                 <el-form-item prop="phone">
-                    <el-input v-model="form.phone" class="ghost" placeholder="请输入手机号码" />
+                    <el-input v-model="form.phone" class="ghost" placeholder="请输入手机号码">
+                        <template #prefix>
+                            <el-icon class="el-input__icon" name="User"></el-icon>
+                        </template>
+                    </el-input>
                 </el-form-item>
                 <el-form-item prop="password">
-                    <el-input v-model="form.password" type="password" class="ghost" placeholder="请输入登录密码" />
+                    <el-input v-model="form.password" type="password" class="ghost" placeholder="请输入登录密码">
+                        <template #prefix>
+                            <el-icon class="el-input__icon" name="View"></el-icon>
+                        </template>
+                    </el-input>
                 </el-form-item>
                 <el-form-item prop="verifyCode">
                     <div class="flex">
-                        <el-input v-model="form.verifyCode" class="ghost" placeholder="请输入验证码" />
-                        <el-button class="ghost" :disabled="waitTime > 0" @click="handleSms" :loading="loading">
+                        <el-input v-model="form.verifyCode" class="ghost" placeholder="请输入验证码">
+                            <template #prefix>
+                                <el-icon class="el-input__icon" name="ChatSquare"></el-icon>
+                            </template>
+                        </el-input>
+                        <el-button class="ghost" :disabled="waitTime > 0" @click="handleSms" :loading="sending">
                             {{ waitTime ? waitTime + 'S' : '发送验证码' }}
                         </el-button>
                     </div>
                 </el-form-item>
-                <el-button class="block" @click="handleLogin" :loading="loading">立即登录</el-button>
+                <el-button class="block" @click="handleLogin" :loading="submitting">立即登录</el-button>
             </el-form>
         </div>
     </div>
@@ -28,7 +44,8 @@
     const store = useStore();
 
     const refsForm = ref(null);
-    const loading = ref(false);
+    const sending = ref(false);
+    const submitting = ref(false);
     const form = reactive({
         phone: '',
         password: '',
@@ -50,80 +67,96 @@
 
     const handleSms = async () => {
         if (form.phone) {
-            loading.value = true;
+            sending.value = true;
             await store.dispatch('auth/sms', { phone: form.phone, type: 1 });
-            loading.value = false;
+            sending.value = false;
         } else {
             proxy.$message.warning('请输入手机号码');
         }
     };
     const handleLogin = async () => {
-        loading.value = true;
+        submitting.value = true;
         try {
             await unref(refsForm).validate();
             await store.dispatch('auth/login', form);
         } catch (e) {
             console.info('取消登录', e);
         }
-        loading.value = false;
+        submitting.value = false;
     };
 </script>
 
 <style lang="less" scoped>
     .mask {
-        width: 100%;
+        width: 100vw;
         height: 100vh;
-        background: #000 url('~/global/login-bgp.png') center center / 100% 100% no-repeat;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: @color-white;
+        background: #000 url('~/layouts/login-bgp.png') center center / cover no-repeat;
+        position: relative;
         .box {
-            width: 420px;
-            padding: 30px;
-            background: #1a2229;
-            border-radius: @layout-border-radius;
-            .title {
+            position: absolute;
+            color: @color-black;
+            left: 60%;
+            bottom: 40%;
+            padding: 40px 50px;
+            background: @color-white;
+            border-radius: @layout-border-radius-super;
+            .logo {
+                text-align: center;
                 margin-bottom: @layout-space-super;
-                font-size: @layout-h1;
+            }
+            .title {
+                margin-bottom: @layout-space;
+                font-size: @layout-h2;
                 text-align: center;
+                font-weight: bolder;
+            }
+            .sub {
+                margin-bottom: @layout-space-max;
+                font-size: @layout-h3;
+                text-align: center;
+                color: @color-gray;
             }
             .content {
                 .flex {
                     width: 100%;
                     display: flex;
+                    align-items: center;
                     + .flex {
                         margin-top: @layout-space;
                     }
                     .el-button {
-                        width: 30%;
+                        width: 100px;
+                        flex-shrink: 0;
                         margin-left: @layout-space;
-                        color: #fff;
                     }
                 }
                 :deep(.el-input) {
                     input {
-                        color: #fff;
+                        color: @color-black;
+                        border-radius: @layout-border-radius;
                     }
                 }
                 :deep(.ghost) {
-                    background: none;
+                    background: @color-white-dark;
                     * {
                         background: none;
                     }
                 }
+                .el-button {
+                    color: @color-white;
+                    background: @color-primary;
+                    border-radius: @layout-border-radius-large;
+                    border: none;
+                    &:disabled {
+                        background: @color-primary-white;
+                        color: @color-black;
+                    }
+                }
                 .block {
+                    height: 44px;
+                    line-height: 44px;
                     font-size: 16px;
-                    font-weight: normal;
-                    color: #ffffff;
                     width: 100%;
-                    height: 40px;
-                    text-align: center;
-                    line-height: 40px;
-                    background: linear-gradient(0deg, #fb3a4e, #ff6272);
-                    border-radius: 4px;
-                    border: none;
-                    cursor: pointer;
                 }
             }
         }