feat: 完成70%全局样式与可读性优化

pages/auth/a01-entry.vue

@@ -188,9 +188,10 @@
         </button>
       </view>
 
-      <view
-        class="agreement-area"
-        :class="{ 'agreement-area--error': agreementError }"
+			<view
+				:key="agreementShakeVersion"
+				class="agreement-area"
+				:class="{ 'agreement-area--error': agreementError }"
       >
         <view class="agreement-row">
           <button
@@ -289,6 +290,7 @@ const password = ref("");
 const verificationCode = ref("");
 const agreed = ref(false);
 const agreementError = ref(false);
+const agreementShakeVersion = ref(0);
 const tacVisible = ref(false);
 const tacContext = ref(null);
 const sendingCode = ref(false);
@@ -394,9 +396,10 @@ const validatePhone = () => {
 };
 
 const requireAgreement = () => {
-  if (agreed.value) return true;
-  agreementError.value = true;
-  return false;
+	if (agreed.value) return true;
+	agreementError.value = true;
+	agreementShakeVersion.value += 1;
+	return false;
 };
 
 const closeTac = () => {
@@ -696,7 +699,7 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
 
 .login-title {
   color: #9f170f;
-  font-size: 58rpx;
+  font-size: clamp(29px, 58rpx, 36px);
   font-weight: 700;
   letter-spacing: 5rpx;
   line-height: 1;
@@ -722,7 +725,7 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
   justify-content: center;
   min-height: 88rpx;
   color: #80684f;
-  font-size: 34rpx;
+  font-size: clamp(19px, 34rpx, 24px);
   letter-spacing: 2rpx;
 }
 
@@ -764,7 +767,7 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
   left: 0;
   content: "*";
   color: #b42318;
-  font-size: 26rpx;
+  font-size: clamp(16px, 26rpx, 20px);
   line-height: 1;
 }
 
@@ -785,7 +788,7 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
   min-width: 0;
   min-height: var(--app-touch-min);
   color: #493323;
-  font-size: 30rpx;
+  font-size: clamp(17px, 30rpx, 22px);
 }
 
 .input-placeholder {
@@ -816,7 +819,7 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
   padding: 0 8rpx;
   background: transparent !important;
   color: #a9160d;
-  font-size: 28rpx;
+  font-size: clamp(16px, 28rpx, 20px);
   white-space: nowrap;
 }
 
@@ -836,7 +839,7 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
   align-items: center;
   min-height: var(--app-touch-min);
   color: #a9160d;
-  font-size: 28rpx;
+  font-size: clamp(16px, 28rpx, 20px);
 }
 
 .login-submit {
@@ -860,7 +863,7 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
   z-index: 1;
   grid-area: 1 / 1;
   color: #fffaf1;
-  font-size: 36rpx;
+  font-size: clamp(19px, 36rpx, 24px);
   letter-spacing: 5rpx;
 }
 
@@ -870,7 +873,7 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
   justify-content: center;
   min-height: var(--app-touch-min);
   color: #493323;
-  font-size: 28rpx;
+  font-size: clamp(16px, 28rpx, 20px);
 }
 
 .register-link {
@@ -882,16 +885,19 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
 }
 
 .agreement-area {
+  position: relative;
+  margin-bottom: 48rpx;
   color: #58483c;
 }
 
 .agreement-row {
   display: flex;
   align-items: center;
+  flex-wrap: nowrap;
   justify-content: center;
   min-height: var(--app-touch-min);
-  font-size: 24rpx;
-  line-height: 32rpx;
+  font-size: clamp(12px, 22rpx, 14px);
+  line-height: 1.45;
 }
 
 .agreement-icon {
@@ -905,17 +911,22 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
-  width: var(--app-touch-min);
   min-width: var(--app-touch-min);
   min-height: var(--app-touch-min);
-  margin-right: 2rpx;
+  box-sizing: border-box;
+  margin: 0 -12rpx 0 0;
+  padding-top: 0;
 }
 
 .agreement-copy {
   display: flex;
-  flex: 0 1 auto;
+  flex: 0 0 auto;
   align-items: center;
   min-width: 0;
+  padding-top: 2rpx;
+}
+.agreement-copy text {
+  white-space: nowrap;
 }
 
 .agreement-link {
@@ -923,13 +934,18 @@ const prepareAgreement = () => showFeedback("协议页面准备中");
   align-items: center;
   min-height: var(--app-touch-min);
   color: #a9160d;
+  white-space: nowrap;
 }
 
 .agreement-error {
+  position: absolute;
+  top: calc(100% + 4rpx);
+  right: 0;
+  left: 0;
   display: block;
   color: #b42318;
-  font-size: 20rpx;
-  line-height: 30rpx;
+  font-size: clamp(13px, 20rpx, 16px);
+  line-height: max(1.35em, clamp(17px, 30rpx, 22px));
   text-align: center;
 }