src/components/pages/changePswd/changePswd.vue

@@ -12,21 +12,33 @@
                             <span>
                                 账号
                             </span>
-                            <input v-model="account" type="text" placeholder="请输入新账户" class="input" />
+                            <input v-model="account" type="text" class="input" readonly />
                         </div>
                         <div class="dialog-content-item-content1">
                             <span>
                                 <img src="@/assets/startIcon.svg" alt="字符" class="search-icon2" />
                                 新密码
                             </span>
-                            <input v-model="password" type="password" placeholder="请输入新密码" class="input" />
+                            <div class="input-container">
+                                <input :type="showPassword ? 'text' : 'password'" v-model="password"
+                                    placeholder="请输入新密码" class="input" />
+                                <div class="toggle-password-icon">
+                                    <img @click="togglePassword" :src="showPassword ? eyeOpen : eyeClose" />
+                                </div>
+                            </div>
                         </div>
                         <div class="dialog-content-item-content1">
                             <span>
                                 <img src="@/assets/startIcon.svg" alt="字符" class="search-icon2" />
                                 新密码确认
                             </span>
-                            <input v-model="password1" type="password" placeholder="请输入新密码" class="input" />
+                            <div class="input-container">
+                                <input :type="showPassword1 ? 'text' : 'password'" v-model="password1"
+                                    placeholder="请输入新密码" class="input" />
+                                <div class="toggle-password-icon">
+                                    <img @click="togglePassword1" :src="showPassword1 ? eyeOpen : eyeClose" />
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -46,12 +58,22 @@ export default {
     data() {
         return {
             userid: this.$route.query.userid,
+            showPassword: false,
+            showPassword1: false,
+            eyeOpen: require('@/assets/eyeOpen.png'),
+            eyeClose: require('@/assets/eyeClose.png'),
             account: '',
             password: '',
             password1: ''
         }
     },
     methods: {
+        togglePassword() {
+            this.showPassword = !this.showPassword; // 切换密码显示状态
+        },
+        togglePassword1() {
+            this.showPassword1 = !this.showPassword1; // 切换密码显示状态
+        },
         getUser() {
             let params = {
                 userid: this.userid
@@ -99,6 +121,8 @@ export default {
                         this.$message.success("修改成功")
                         this.password = '';
                         this.password1 = '';
+                        this.showPassword = false;
+                        this.showPassword1 = false;
                         setTimeout(() => {
                             window.topU.U.UF.F.closeWindow(window.topU.U.UF.UI.form.allForm['updatePaDialog'].form)
                         }, 1000);
@@ -155,11 +179,6 @@ body {
 }
 
 
-.dialog-content-item-content {
-    font-size: 15px;
-    font-weight: 550;
-    margin-top: 20px;
-}
 
 /* input输入框样式 */
 .input {
@@ -169,10 +188,12 @@ body {
     border: 1px solid #ccc;
     border-radius: 4px;
     background-color: #f0f2f5;
-    height: 36px;
+    height: 50px;
     outline: none;
+    box-sizing: border-box;
 }
 
+
 .input>>>.el-input--suffix .el-input__inner {
     padding: 0
 }
@@ -207,4 +228,25 @@ body {
     width: 10px;
     height: 10px;
 }
+
+.input-container {
+    position: relative;
+    /* 使子元素绝对定位相对于此容器 */
+}
+
+.input-container img {
+    width: 19px;
+}
+
+.toggle-password-icon {
+    position: absolute;
+    right: 11px;
+    top: 62%;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+    cursor: pointer;
+    width: 32px;
+    background-color: #f0f2f5;
+    text-align: center;
+}
 </style>