From 09634412352d1648f7c77a353cd8e98488f2d716 Mon Sep 17 00:00:00 2001
From: wangxiaoshuang <825034831@qq.com>
Date: Wed, 12 Jun 2024 14:50:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=8C=E6=AC=A1=E9=AA=8C=E8=AF=81=E5=BC=B9?=
 =?UTF-8?q?=E6=A1=86=E6=A0=B7=E5=BC=8F=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MFA/index.vue | 48 +++++++++++++++++++++++++++---------
 1 file changed, 37 insertions(+), 11 deletions(-)

diff --git a/src/components/MFA/index.vue b/src/components/MFA/index.vue
index b8089037..02a9edd7 100644
--- a/src/components/MFA/index.vue
+++ b/src/components/MFA/index.vue
@@ -6,6 +6,7 @@
     width="540px"
     :close-on-click-modal="false"
     append-to-body
+    center
     :show-close="status === 'login'"
     @close="cancel"
   >
@@ -17,21 +18,23 @@
       label-position="right"
       :model="form"
       :rules="rules"
-      label-width="120px"
+      label-width="100px"
     >
+      <!-- 邮箱 -->
+      <p class="tip">
+        <i class="el-icon-warning" style="color: #409eff"></i>
+        <span>{{ tip }}</span>
+      </p>
       <!-- 用户名 -->
       <el-form-item :label="$t('mfa:form:username')" prop="username">
-        <el-input v-model="form.username" disabled />
-      </el-form-item>
-      <!-- 邮箱 -->
-      <el-form-item :label="$t('mfa:form:email')" prop="EMail">
-        <el-input v-model="form.EMail" disabled />
+        <span>{{ form.username }}</span>
       </el-form-item>
       <!-- 验证码 -->
       <el-form-item :label="$t('mfa:form:MFACode')" prop="Code">
         <el-input
+          :placeholder="$t('mfa:form:input:placeholder:Codes')"
           v-model="form.Code"
-          style="width: 180px; margin-right: 10px"
+          style="width: 240px; margin-right: 10px"
         />
         <el-button
           type="primary"
@@ -44,11 +47,17 @@
     </el-form>
     <div slot="footer">
       <!-- 取消 -->
-      <el-button size="small" @click="cancel" v-if="status === 'login'">
+      <!-- <el-button size="small" @click="cancel" v-if="status === 'login'">
         {{ $t("mfa:button:cancel") }}
-      </el-button>
+      </el-button> -->
       <!-- 保存 -->
-      <el-button type="primary" size="small" @click="save" :loading="loading">
+      <el-button
+        type="primary"
+        size="small"
+        @click="save"
+        :loading="loading"
+        style="width: 80%"
+      >
         {{
           status === "login"
             ? $t("mfa:button:save")
@@ -65,6 +74,7 @@ export default {
   data() {
     return {
       status: "login", // lock
+      tip: null,
       visible: false,
       loading: false,
       timer: null,
@@ -110,6 +120,7 @@ export default {
       this.form.username = username;
       this.form.EMail = EMail;
       this.visible = true;
+      this.tip = this.$t("mfa:tip").replace("xx", EMail);
     },
     cancel() {
       this.visible = false;
@@ -169,4 +180,19 @@ export default {
     }
   },
 };
-</script>
\ No newline at end of file
+</script>
+<style lang="scss" scoped>
+.tip {
+  width: 86%;
+  margin: auto;
+  margin-bottom: 20px;
+  text-align: left;
+  padding: 0 10px;
+  line-height: 30px;
+  border-radius: 5px;
+  background-color: #eee;
+  i {
+    margin-right: 5px;
+  }
+}
+</style>
\ No newline at end of file