登录

src/views/Login/components/LoginForm.vue

@@ -16,43 +16,27 @@
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item prop="username">
           <el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')"
-            :prefix-icon="iconAvatar" />
+            :prefix-icon="iconAvatar" style="height: 42px;" />
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item prop="password">
           <el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')"
-            :prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" />
+            :prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" style="height: 42px;"/>
         </el-form-item>
       </el-col>
-   <!-- <el-col :span="24" style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px">
-          <el-form-item prop="code" v-if="captchaEnabled">
-            <div class="label">
-              <svg-icon icon-class="icon_safe" class="el-input__icon input-icon" />
-              <div>验证码</div>
-            </div>
-            <div>
-              <el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')"
-                :prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" />
-              <div class="login-code">
-                <img :src="codeUrl" @click="getCode" class="login-code-img" />
-              </div>
-            </div>
-          </el-form-item>
-        </el-col> -->
-
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
-          <el-form-item prop="code">
+        <el-form-item prop="code">
-            <div class="flex">
+          <div class="flex w-[100%]">
-   <el-input v-model="loginData.loginForm.code" placeholder="请输入验证码" style="width: 320px;"
+            <el-input v-model="loginData.loginForm.code"  placeholder="请输入验证码" style="width: 76%;margin-right: 10px;height: 42px;"
-                :prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()"/>
+              :prefix-icon="iconLock" @keyup.enter="getCode()" />
-                <div class="login-code flex-1">
+            <div class="login-code flex-1">
-                    <img :src="codeUrl" @click="getCode" class="login-code-img" />
+              <img :src="codeUrl" @click="getCode" class="login-code-img" />
-                  </div>
             </div>
-           
+          </div>
-          </el-form-item>
+
-        </el-col>
+        </el-form-item>
+      </el-col>
 
 
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px">
@@ -69,7 +53,7 @@
           </el-row>
         </el-form-item>
       </el-col>
-     
+
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
           <XButton :loading="loginLoading" :title="t('login.login')" class="w-[100%]" type="primary"
@@ -136,7 +120,8 @@ const loginData = reactive({
     password: 'admin123',
     captchaVerification: '',
     rememberMe: false,
-    code:''
+    code: '',
+    uuid: ''
   }
 })
 
@@ -163,7 +148,7 @@ function getCode() {
     captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
     if (captchaEnabled.value) {
       codeUrl.value = "data:image/gif;base64," + res.img;
-      loginForm.value.uuid = res.uuid;
+      loginData.loginForm.uuid = res.uuid;
     }
   });
 }
@@ -197,7 +182,6 @@ const handleLogin = async (params) => {
     if (!data) {
       return
     }
-    loginData.loginForm.captchaVerification = params.captchaVerification
     const res = await LoginApi.login(loginData.loginForm)
     if (!res) {
       return