login

pages/login.vue

@@ -12,7 +12,10 @@
       </view>
       <view class="input-item flex align-center">
         <view class="iconfont icon-password icon"></view>
-        <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
+        <input v-model="loginForm.password" :type="passwordVisible ? 'text' : 'password'" class="input" placeholder="请输入密码" maxlength="20" />
+        <view class="password-eye" @click="togglePasswordVisible">
+          <uni-icons :type="passwordVisible ? 'eye-slash' : 'eye'" size="20" color="#999"></uni-icons>
+        </view>
       </view>
       <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
         <view class="iconfont icon-code icon"></view>
@@ -47,6 +50,9 @@
   const captchaEnabled = ref(true)
   // 用户注册开关
   const register = ref(false)
+  // 密码可见性
+  const passwordVisible = ref(false)
+  
   const loginForm = ref({
     username: "admin",
     password: "admin123",
@@ -54,6 +60,11 @@
     uuid: ""
   })
 
+  // 切换密码可见性
+  function togglePasswordVisible() {
+    passwordVisible.value = !passwordVisible.value
+  }
+
   // 用户注册
   function handleUserRegister() {
     proxy.$tab.redirectTo(`/pages/register`)
@@ -149,6 +160,7 @@
         background-color: #f5f6f7;
         height: 45px;
         border-radius: 20px;
+        position: relative;
 
         .icon {
           font-size: 38rpx;
@@ -162,8 +174,31 @@
           line-height: 20px;
           text-align: left;
           padding-left: 15px;
+          padding-right: 45px; /* 为眼睛图标留出更多空间 */
+        }
+        
+        .password-eye {
+          position: absolute;
+          right: 15px;
+          top: 50%;
+          transform: translateY(-50%);
+          z-index: 10;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 30px;
+          height: 30px;
+          
+          /* 增加点击区域 */
+          &::after {
+            content: '';
+            position: absolute;
+            top: -10px;
+            left: -10px;
+            right: -10px;
+            bottom: -10px;
+          }
         }
-
       }
 
       .login-btn {
@@ -193,4 +228,4 @@
       }
     }
   }
-</style>
+</style>