update

src/packages/pc/views/auth/components/layout/index.less

@@ -4,29 +4,27 @@
     justify-content: center;
     align-items: center;
     height: 100%;
-    background: url("~@pc/assets/images/login-bg.jpg") no-repeat center center;
-    background-size: cover;
+    background-color: #e4ecf6;
 
     &__wrapper {
-        display: flex;
-
-        .left {
-            display: flex;
-            flex-direction: column;
-            line-height: normal;
+        .header {
             color: #fff;
             font-size: 24px;
-            padding: 60px 80px;
-            background-color: rgba(0, 87, 124, .35);
-            backdrop-filter: blur(5px);
+            padding: 30px 80px;
+            background-color: #1f75fe;
+
+            &-version {
+                font-size: 12px;
+                margin-top: 5px;
+                color: rgba(255, 255, 255, .5);
+            }
         }
 
-        .right {
+        .body {
             display: flex;
-            flex-direction: column;
-            width: 420px;
+            justify-content: center;
             background-color: #fff;
-            padding: 60px 80px;
+            padding: 80px;
 
             &-logo {
                 text-align: center;
@@ -45,7 +43,7 @@
             }
 
             &-container {
-                flex: 1;
+                width: 300px;
 
                 .el-button.submit {
                     width: 100%;

src/packages/pc/views/auth/components/layout/index.vue

@@ -1,23 +1,17 @@
 <template>
   <div class="sign-layout">
     <div class="sign-layout__wrapper">
-      <div class="left">
-        <div>{{ t('app.left1') }}</div>
-        <div>{{ t('app.left2') }}</div>
+      <div class="header">
+        <div>{{ t('app.name') }}</div>
+        <div class="header-version">v1.0.{{ version }}</div>
       </div>
-      <div class="right">
-        <div class="right-logo">
-          <img src="@pc/assets/logo.png" title="logo" />
-        </div>
-        <div class="right-title">{{ title }}</div>
-        <div class="right-container">
+      <div class="body">
+        <div class="body-container">
+          <h1 class="body-title">{{ title }}</h1>
           <slot></slot>
         </div>
       </div>
     </div>
-    <div class="sign-layout__footer">
-      <span>v1.0.{{ version }}</span>
-    </div>
   </div>
 </template>
 

src/packages/pc/views/auth/login/index.less

@@ -1 +0,0 @@
-.user-login {}

src/packages/pc/views/auth/login/index.vue

@@ -2,28 +2,26 @@
   <sign-layout class="user-login" :title="t('auth.login.title')">
     <el-form ref="formRef" :model="formData" :rules="formRules">
       <el-form-item prop="accountCode">
-        <el-input :placeholder="t('auth.login.accountCode')" v-model="formData.accountCode"></el-input>
+        <el-input :placeholder="t('auth.login.accountCode')" v-model="formData.accountCode" size="large" />
       </el-form-item>
       <el-form-item prop="password">
-        <el-input type="password" :placeholder="t('auth.login.password')" v-model="formData.password">
-        </el-input>
+        <el-input type="password" :placeholder="t('auth.login.password')" v-model="formData.password" size="large" />
       </el-form-item>
       <el-form-item prop="verifyCode">
-        <el-input :placeholder="t('auth.login.verifyCode')" v-model="formData.verifyCode">
-          <template #append>
-            <img :src="verifyImage" />
-          </template>
-        </el-input>
+        <div class="el-form-item--col">
+          <el-input :placeholder="t('auth.login.verifyCode')" v-model="formData.verifyCode" size="large" />
+          <el-image :src="verifyImage" style="width: 180px; height: 38px; cursor: pointer;" @click="run()"
+            v-if="verifyImage" />
+        </div>
       </el-form-item>
       <!-- <el-form-item>
-        <el-checkbox label="记住账号" v-model="remember"></el-checkbox>
+        <el-checkbox label="记住密码" v-model="remember"></el-checkbox>
       </el-form-item> -->
       <el-form-item>
         <el-button class="submit" type="primary" :loading="loading" @click="formSubmit">
           <span v-if="loading">{{ t('auth.login.loading') }}</span>
           <span v-else>{{ t('operation.login') }}</span>
         </el-button>
-        <!-- <el-button>注册</el-button> -->
       </el-form-item>
     </el-form>
   </sign-layout>
@@ -33,6 +31,7 @@
 import { shallowRef } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, FormInstance, FormRules } from 'element-plus'
+import { useRequest } from '@/hooks/request'
 import { verifyCode } from '@/services/api/user'
 import { useLogin } from '@/business/login'
 import { useRouterStore, i18n } from '@/stores'
@@ -59,11 +58,19 @@ const formRules: FormRules = {
   ]
 }
 
+const { run } = useRequest(verifyCode, {
+  manual: true,
+  onSuccess: (res) => {
+    formData.key = res.data.key
+    verifyImage.value = res.data.img
+  }
+})
+
 const formSubmit = () => {
-  loading.value = true
   formRef.value?.validate(async (valid) => {
     if (valid) {
       try {
+        loading.value = true
         await userLogin()
         await menuStore.getUserRoutes()
         const redirect = route.query.redirect
@@ -80,14 +87,5 @@ const formSubmit = () => {
   })
 }
 
-service.onReady().then(() => {
-  verifyCode().then(({ data }) => {
-    formData.key = data.key
-    verifyImage.value = data.img
-  })
-})
-</script>
-
-<style lang="less" scoped>
-@import './index.less';
-</style>
+service.onReady().then(() => run())
+</script>