完成样式重构

src/App.vue

@@ -12,4 +12,11 @@ onHide(() => {
 </script>
 <style lang="scss">
 @import '@/styles/index.scss';
+
+checkbox.agreement-checkbox[checked] .wx-checkbox-input,
+checkbox.agreement-checkbox[checked] .uni-checkbox-input {
+  background-color: var(--main-color);
+  border-color: var(--main-color);
+  color: #fff;
+}
 </style>

src/components/auth/AuthInputItem.vue

@@ -40,7 +40,7 @@
     </view>
 
     <!-- 错误提示 -->
-    <text v-if="error" class="error">
+    <text class="error-text" :class="{ visible: !!error }">
       {{ error }}
     </text>
   </view>
@@ -138,6 +138,7 @@ const togglePassword = () => {
   padding: 20rpx 0;
   box-sizing: border-box;
   border-bottom: 1rpx solid #e4e7ed;
+  position: relative;
 
   .form-label {
     margin-bottom: 8rpx;
@@ -181,11 +182,18 @@ const togglePassword = () => {
     }
   }
 
-  .error {
-    margin-top: 8rpx;
-    color: var(--form-error-font-color);
-    font-size: 24rpx;
-    line-height: 28rpx;
+  .error-text {
+    position: absolute;
+    left: 0;
+    bottom: 6rpx;
+    font-size: 20rpx;
+    line-height: 20rpx;
+    color: #ff4d4f;
+    opacity: 0;
+    pointer-events: none; // 不影响点击
+  }
+  .error-text.visible {
+    opacity: 1;
   }
 }
 </style>

src/pages/login/index.vue

@@ -132,6 +132,8 @@ const sendCodeImpl = async () => {
 const sendCode = debounce(sendCodeImpl)
 
 const submitImpl = async () => {
+  console.log('cc')
+
   if (!(await validate())) return
 
   const { code, data, msg } = await updUserPwdApi(form)

src/styles/modules/auth-page.scss

@@ -66,7 +66,7 @@
       }
 
       .agreement {
-        margin-top: 60rpx;
+        margin-top: 48rpx;
         display: flex;
         color: var(--font-color-666);
 
@@ -80,17 +80,6 @@
             margin-top: 0;
             transform: scale(0.75);
           }
-
-          /* 穿透 scoped，直接作用在 checkbox */
-          // :deep(checkbox.agreement-checkbox) {
-          //   --checkbox-border-color: #c0c4cc;
-          // }
-
-          // /* 选中状态 */
-          // :deep(checkbox.agreement-checkbox[checked]) {
-          //   --checkbox-checked-bg-color: var(--main-color);
-          //   --checkbox-border-color: var(--main-color);
-          // }
         }
 
         .txt text {
@@ -103,7 +92,7 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-top: 80rpx;
+        margin-top: 48rpx;
         width: 100%;
 
         .submit-btn {