二次验证弹框样式更改

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>
+</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>