style(login): 优化密码显示图标布局和登录类型下划线样式

pages/login/login/index.vue

@@ -77,8 +77,18 @@
               @blur="validatePassword"
             />
             <view class="show-password-icon" @click="toggleShowPassword">
-              <u-icon v-show="!isShowPassword" name="eye-fill" color="#2979ff" size="32"></u-icon>
-              <u-icon v-show="isShowPassword" name="eye-off" color="#2979ff" size="32"></u-icon>
+              <u-icon
+                v-show="!isShowPassword"
+                name="eye-fill"
+                color="#2979ff"
+                size="32"
+              ></u-icon>
+              <u-icon
+                v-show="isShowPassword"
+                name="eye-off"
+                color="#2979ff"
+                size="32"
+              ></u-icon>
             </view>
           </view>
           <text v-if="errors.password" class="error-tip">{{
@@ -589,7 +599,9 @@ export default {
       color: #999999;
 
       .type-item {
-        padding: 0 20rpx;
+        // width: 160rpx;
+        text-align: center;
+        // padding: 0 20rpx;
         position: relative;
         font-family: PingFang SC;
 
@@ -605,12 +617,29 @@ export default {
             left: 50%;
             -webkit-transform: translateX(-50%);
             transform: translateX(-50%);
-            width: 76%;
+            // width: 100%;
             height: 0px;
             border-radius: 3px;
             box-shadow: 0px 0px 4px 2px rgba(79, 106, 255, 1);
           }
         }
+
+        // 分别设置两个 item 的下划线宽度
+        // 密码登录 (4字)
+        &:first-child.active::after {
+          width: 128rpx;
+        }
+        // 验证码登录 (5字)
+        &:last-child.active::after {
+          width: 160rpx;
+        }
+      }
+
+      .type-item:first-child {
+        width: 128rpx;
+      }
+      .type-item:last-child {
+        width: 160rpx;
       }
 
       .divider {