重置密码页面，标签换行

src/views/recompose/index.vue

@@ -1,76 +1,130 @@
 <template>
-  <div style="display: flex;justify-content: center">
-    <div style="width: 600px;text-align: center;border: 1px solid #e6e6e6;margin-top:40px;padding:10px;">
-      <div class="trial-myinfo-head" style="font-size: 30px;line-height: 120px;">
+  <div style="display: flex; justify-content: center">
+    <div
+      style="
+        width: 600px;
+        text-align: center;
+        border: 1px solid #e6e6e6;
+        margin-top: 40px;
+        padding: 10px;
+      "
+    >
+      <div
+        class="trial-myinfo-head"
+        style="font-size: 30px; line-height: 120px"
+      >
         <!-- 首次登录修改密码 -->
         {{ $t('recompose:title:init') }}
       </div>
-      <el-form ref="passwordForm" v-loading="loading" label-position="right" :model="password" :rules="passwordFormRules" label-width="120px">
+      <el-form
+        ref="passwordForm"
+        v-loading="loading"
+        label-position="right"
+        :model="password"
+        :rules="passwordFormRules"
+        :label-width="$i18n.locale === 'en' ? '180px' : '120px'"
+      >
         <!-- 用户名 -->
         <el-form-item :label="$t('recompose:form:userName')" prop="NewUserName">
           <el-input v-model="password.NewUserName" />
         </el-form-item>
         <!-- 旧密码 -->
-        <el-form-item :label="$t('recompose:form:oldPassword')" prop="OldPassWord">
-          <el-input v-model="password.OldPassWord" type="password" show-password auto-complete="new-password" />
+        <el-form-item
+          :label="$t('recompose:form:oldPassword')"
+          prop="OldPassWord"
+        >
+          <el-input
+            v-model="password.OldPassWord"
+            type="password"
+            show-password
+            auto-complete="new-password"
+          />
         </el-form-item>
         <!-- 新密码 -->
-        <el-form-item :label="$t('recompose:form:newPassword')" prop="NewPassWord">
-          <el-input v-model="password.NewPassWord" type="password" show-password auto-complete="new-password" />
+        <el-form-item
+          :label="$t('recompose:form:newPassword')"
+          prop="NewPassWord"
+        >
+          <el-input
+            v-model="password.NewPassWord"
+            type="password"
+            show-password
+            auto-complete="new-password"
+          />
         </el-form-item>
         <!-- 确认密码 -->
-        <el-form-item :label="$t('recompose:form:confirmPassword')" prop="ConfirmPassWord">
-          <el-input v-model="password.ConfirmPassWord" type="password" show-password auto-complete="new-password" />
+        <el-form-item
+          :label="$t('recompose:form:confirmPassword')"
+          prop="ConfirmPassWord"
+        >
+          <el-input
+            v-model="password.ConfirmPassWord"
+            type="password"
+            show-password
+            auto-complete="new-password"
+          />
         </el-form-item>
-        <el-form-item style="text-align:right">
+        <el-form-item style="text-align: right">
           <!-- 取消 -->
-          <el-button
-            size="small"
-            @click="cancel"
-          >
+          <el-button size="small" @click="cancel">
             {{ $t('recompose:button:cancel') }}
           </el-button>
           <!-- 保存 -->
-          <el-button
-            type="primary"
-            size="small"
-            @click="save"
-          >
+          <el-button type="primary" size="small" @click="save">
             {{ $t('recompose:button:save') }}
           </el-button>
         </el-form-item>
       </el-form>
-
     </div>
   </div>
 </template>
 <script>
 import { modifyPassword } from '@/api/admin.js'
 import md5 from 'js-md5'
-import {mapMutations} from "vuex";
+import { mapMutations } from 'vuex'
 export default {
   data() {
     return {
       password: {
-        NewUserName: null
+        NewUserName: null,
       },
       passwordFormRules: {
-        NewUserName: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' }],
-        OldPassWord: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' }],
+        NewUserName: [
+          {
+            required: true,
+            message: this.$t('common:ruleMessage:specify'),
+            trigger: 'blur',
+          },
+        ],
+        OldPassWord: [
+          {
+            required: true,
+            message: this.$t('common:ruleMessage:specify'),
+            trigger: 'blur',
+          },
+        ],
         NewPassWord: [
-          { required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' },
+          {
+            required: true,
+            message: this.$t('common:ruleMessage:specify'),
+            trigger: 'blur',
+          },
           {
             required: true,
             trigger: 'blur',
-            validator: this.$validatePassword
+            validator: this.$validatePassword,
           },
         ],
         ConfirmPassWord: [
-          { required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' },
-        ]
+          {
+            required: true,
+            message: this.$t('common:ruleMessage:specify'),
+            trigger: 'blur',
+          },
+        ],
       },
       userId: null,
-      loading: false
+      loading: false,
     }
   },
   mounted() {
@@ -78,7 +132,6 @@ export default {
     if (!this.password.NewUserName) {
       // 该页面只提供给首次进入系统的用户使用
       this.$alert(this.$t('recompose:message:warning'))
-
     }
   },
   methods: {
@@ -96,7 +149,7 @@ export default {
       this.$updateDictionary()
     },
     save() {
-      this.$refs.passwordForm.validate(valid => {
+      this.$refs.passwordForm.validate((valid) => {
         if (valid) {
           if (this.password.NewPassWord !== this.password.ConfirmPassWord) {
             // 两次密码输入不一致
@@ -106,58 +159,64 @@ export default {
           const param = {
             NewUserName: this.password.NewUserName,
             NewPassWord: md5(this.password.NewPassWord),
-            OldPassWord: md5(this.password.OldPassWord)
+            OldPassWord: md5(this.password.OldPassWord),
           }
           this.loading = true
-          modifyPassword(param).then(res => {
-            this.loading = false
-            if (res.IsSuccess) {
-              // 修改成功,请重新登录账号
-              this.$message.success(this.$t('recompose:message:updatedSuccessfully'))
-              setTimeout(() => {
-                this.logout()
-              }, 500)
-            }
-          }).catch(() => { this.loading = false })
+          modifyPassword(param)
+            .then((res) => {
+              this.loading = false
+              if (res.IsSuccess) {
+                // 修改成功,请重新登录账号
+                this.$message.success(
+                  this.$t('recompose:message:updatedSuccessfully')
+                )
+                setTimeout(() => {
+                  this.logout()
+                }, 500)
+              }
+            })
+            .catch(() => {
+              this.loading = false
+            })
         }
       })
     },
     cancel() {
       this.$refs['passwordForm'].resetFields()
-    }
-  }
+    },
+  },
 }
 </script>
 <style>
-  .reset-wrapper {
-    padding: 20px;
-  }
-  .reset-wrapper .el-page-header {
-    line-height: 50px;
-    border: 1px solid #ebeef5;
-    border-radius: 4px;
-    background-color: #fff;
-  }
-  .reset-wrapper .box-wrapper {
-    width: 60%;
-    margin: 20px auto;
-    padding: 10px;
-    color: #303133;
-  }
+.reset-wrapper {
+  padding: 20px;
+}
+.reset-wrapper .el-page-header {
+  line-height: 50px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  background-color: #fff;
+}
+.reset-wrapper .box-wrapper {
+  width: 60%;
+  margin: 20px auto;
+  padding: 10px;
+  color: #303133;
+}
 </style>
 <style scoped>
-::v-deep .is-error{
+::v-deep .is-error {
   margin-bottom: 40px;
 }
 input:-webkit-autofill {
   -webkit-text-fill-color: #ededed !important;
-  box-shadow: 0 0 0px 1000px transparent  inset !important;
-  background-color:transparent;
+  box-shadow: 0 0 0px 1000px transparent inset !important;
+  background-color: transparent;
   background-image: none;
   transition: background-color 50000s ease-in-out 0s;
 }
 input {
-  background-color:transparent;
+  background-color: transparent;
   caret-color: #fff;
 }
 </style>