rain/jiapuapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
rain
2026-07-31 11:27:15 +08:00
parent 96524e4d6c
commit 555aa00043
116 changed files with 1928 additions and 1169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/auth/a01-entry.vue
+37 -21
View File
@@ -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;
}
pages/auth/a04-register.vue
+31 -16
View File
@@ -141,7 +141,7 @@
:class="{ 'field-block--error': fieldErrors.password }"
>
<view class="input-row">
<label class="input-label" for="a04-password"
<label class="input-label input-label--password" for="a04-password"
><text class="required-mark">*</text>设置密码</label
>
<input
@@ -174,7 +174,7 @@
:class="{ 'field-block--error': fieldErrors.confirmPassword }"
>
<view class="input-row">
<label class="input-label" for="a04-confirm-password"
<label class="input-label input-label--password" for="a04-confirm-password"
><text class="required-mark">*</text>确认密码</label
>
<input
@@ -681,7 +681,7 @@ const submitRegister = async () => {
grid-column: 1;
grid-row: 1;
color: #9f170f;
font-size: 58rpx;
font-size: clamp(29px, 58rpx, 36px);
font-weight: 700;
letter-spacing: 7rpx;
}
@@ -691,7 +691,7 @@ const submitRegister = async () => {
grid-row: 2;
margin-top: 12rpx;
color: #806c58;
font-size: 25rpx;
font-size: clamp(15px, 25rpx, 18px);
letter-spacing: 2rpx;
}
@@ -721,14 +721,18 @@ const submitRegister = async () => {
.input-label {
flex: 0 0 152rpx;
color: #674b35;
font-size: 30rpx;
font-size: clamp(17px, 30rpx, 22px);
}
.input-label--password {
flex-basis: 220rpx;
white-space: nowrap;
}
.required-mark {
display: inline-block;
margin-right: 4rpx;
color: #b42318;
font-size: 26rpx;
font-size: clamp(16px, 26rpx, 20px);
line-height: 1;
transform: translateY(-3rpx);
}
@@ -738,7 +742,7 @@ const submitRegister = async () => {
min-width: 0;
min-height: var(--app-touch-min);
color: #493323;
font-size: 30rpx;
font-size: clamp(17px, 30rpx, 22px);
}
.get-code {
@@ -751,7 +755,7 @@ const submitRegister = async () => {
border-left: 1rpx solid #d7bd94;
background: transparent !important;
color: #a7160c;
font-size: 26rpx;
font-size: clamp(16px, 26rpx, 20px);
white-space: nowrap;
}
@@ -767,8 +771,8 @@ const submitRegister = async () => {
.agreement-error {
display: block;
color: #b42318;
font-size: 21rpx;
line-height: 32rpx;
font-size: clamp(13px, 21rpx, 16px);
line-height: max(1.35em, clamp(17px, 32rpx, 22px));
}
.field-error {
@@ -796,23 +800,25 @@ const submitRegister = async () => {
z-index: 1;
grid-area: 1 / 1;
color: #fffaf0;
font-size: 36rpx;
font-size: clamp(19px, 36rpx, 24px);
letter-spacing: 6rpx;
}
.agreement-area {
position: relative;
min-height: 118rpx;
margin-top: 18rpx;
color: #493323;
}
.agreement-row {
display: flex;
align-items: center;
flex-wrap: nowrap;
justify-content: center;
min-height: var(--app-touch-min);
color: #493323;
font-size: 24rpx;
line-height: 30rpx;
font-size: clamp(12px, 22rpx, 14px);
line-height: 1.45;
}
.agreement-icon {
@@ -829,12 +835,20 @@ const submitRegister = async () => {
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 0 auto;
align-items: center;
min-width: 0;
padding-top: 2rpx;
}
.agreement-copy text {
white-space: nowrap;
}
.agreement-link {
@@ -842,6 +856,7 @@ const submitRegister = async () => {
align-items: center;
min-height: var(--app-touch-min);
color: #a7160c;
white-space: nowrap;
}
.agreement-error {
text-align: center;
@@ -871,7 +886,7 @@ const submitRegister = async () => {
min-height: 82rpx;
margin-top: auto;
color: #493323;
font-size: 28rpx;
font-size: clamp(16px, 28rpx, 20px);
}
.login-entry__link {
pages/auth/a05-reset-password.vue
+16 -12
View File
@@ -153,7 +153,7 @@
:class="{ 'field-block--error': fieldErrors.confirmPassword }"
>
<view class="input-row">
<label class="input-label" for="a05-confirm-password"
<label class="input-label input-label--confirm" for="a05-confirm-password"
><text class="required-mark">*</text>确认新密码</label
>
<input
@@ -582,7 +582,7 @@ const submitReset = async () => {
grid-column: 1;
grid-row: 1;
color: #9f170f;
font-size: 58rpx;
font-size: clamp(29px, 58rpx, 36px);
font-weight: 700;
letter-spacing: 7rpx;
}
@@ -591,7 +591,7 @@ const submitReset = async () => {
grid-row: 2;
margin-top: 12rpx;
color: #806c58;
font-size: 25rpx;
font-size: clamp(15px, 25rpx, 18px);
letter-spacing: 1rpx;
}
.reset-divider {
@@ -619,13 +619,17 @@ const submitReset = async () => {
.input-label {
flex: 0 0 162rpx;
color: #674b35;
font-size: 30rpx;
font-size: clamp(17px, 30rpx, 22px);
}
.input-label--confirm {
flex-basis: 220rpx;
white-space: nowrap;
}
.required-mark {
display: inline-block;
margin-right: 4rpx;
color: #b42318;
font-size: 26rpx;
font-size: clamp(16px, 26rpx, 20px);
line-height: 1;
transform: translateY(-3rpx);
}
@@ -634,7 +638,7 @@ const submitReset = async () => {
min-width: 0;
min-height: var(--app-touch-min);
color: #493323;
font-size: 30rpx;
font-size: clamp(17px, 30rpx, 22px);
}
.placeholder {
color: #9f968d;
@@ -649,7 +653,7 @@ const submitReset = async () => {
border-left: 1rpx solid #d7bd94;
background: transparent !important;
color: #a7160c;
font-size: 26rpx;
font-size: clamp(16px, 26rpx, 20px);
white-space: nowrap;
}
.get-code--disabled {
@@ -659,8 +663,8 @@ const submitReset = async () => {
display: block;
padding-top: 4rpx;
color: #b42318;
font-size: 21rpx;
line-height: 28rpx;
font-size: clamp(13px, 21rpx, 16px);
line-height: max(1.35em, clamp(16px, 28rpx, 20px));
text-align: right;
}
.field-block--error .input-row {
@@ -683,14 +687,14 @@ const submitReset = async () => {
z-index: 1;
grid-area: 1 / 1;
color: #fffaf0;
font-size: 36rpx;
font-size: clamp(19px, 36rpx, 24px);
letter-spacing: 6rpx;
}
.reset-tip {
display: block;
margin-top: 22rpx;
color: #806c58;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
text-align: center;
}
.login-entry {
@@ -700,7 +704,7 @@ const submitReset = async () => {
min-height: var(--app-touch-min);
margin-top: auto;
color: #493323;
font-size: 28rpx;
font-size: clamp(16px, 28rpx, 20px);
}
.login-entry__link {
display: flex;
pages/auth/a06-auth-status.vue
+16 -16
View File
@@ -234,7 +234,7 @@ onBackPress((event) => handleBackPress(event, requestBack));
grid-column: 1;
grid-row: 1;
color: #9f170f;
font-size: 58rpx;
font-size: clamp(29px, 58rpx, 36px);
font-weight: 700;
letter-spacing: 7rpx;
}
@@ -243,7 +243,7 @@ onBackPress((event) => handleBackPress(event, requestBack));
grid-row: 2;
margin-top: 12rpx;
color: #806c58;
font-size: 25rpx;
font-size: clamp(15px, 25rpx, 18px);
letter-spacing: 1rpx;
}
.status-divider {
@@ -270,13 +270,13 @@ onBackPress((event) => handleBackPress(event, requestBack));
.status-eyebrow {
margin-top: 10rpx;
color: #a7160c;
font-size: 22rpx;
font-size: clamp(14px, 22rpx, 17px);
letter-spacing: 3rpx;
}
.status-title {
margin-top: 10rpx;
color: #3f2c1d;
font-size: 40rpx;
font-size: clamp(20px, 40rpx, 26px);
font-weight: 700;
letter-spacing: 3rpx;
}
@@ -285,7 +285,7 @@ onBackPress((event) => handleBackPress(event, requestBack));
width: 100%;
margin-top: 12rpx;
color: #786654;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
line-height: 1.65;
}
.status-details {
@@ -304,13 +304,13 @@ onBackPress((event) => handleBackPress(event, requestBack));
.status-detail__label {
flex: 0 0 116rpx;
color: #9f170f;
font-size: 23rpx;
font-size: clamp(14px, 23rpx, 17px);
}
.status-detail__value {
flex: 1;
color: #5f4a38;
font-size: 23rpx;
line-height: 34rpx;
font-size: clamp(14px, 23rpx, 17px);
line-height: max(1.35em, clamp(19px, 34rpx, 24px));
}
.status-primary {
@@ -329,7 +329,7 @@ onBackPress((event) => handleBackPress(event, requestBack));
z-index: 1;
grid-area: 1 / 1;
color: #fffaf0;
font-size: 38rpx;
font-size: clamp(20px, 38rpx, 26px);
letter-spacing: 5rpx;
}
.status-secondary {
@@ -338,7 +338,7 @@ onBackPress((event) => handleBackPress(event, requestBack));
justify-content: center;
min-height: var(--app-touch-min);
color: #a7160c;
font-size: 24rpx;
font-size: clamp(15px, 24rpx, 18px);
}
.recovery-layer {
@@ -377,21 +377,21 @@ onBackPress((event) => handleBackPress(event, requestBack));
}
.recovery-title {
color: #8f160f;
font-size: 42rpx;
font-size: clamp(22px, 42rpx, 28px);
font-weight: 700;
letter-spacing: 4rpx;
}
.recovery-copy {
margin-top: 20rpx;
color: #513a28;
font-size: 26rpx;
line-height: 40rpx;
font-size: clamp(16px, 26rpx, 20px);
line-height: max(1.35em, clamp(20px, 40rpx, 26px));
}
.recovery-note {
margin-top: 12rpx;
color: #8d7965;
font-size: 20rpx;
line-height: 31rpx;
font-size: clamp(13px, 20rpx, 16px);
line-height: max(1.35em, clamp(17px, 31rpx, 22px));
}
.recovery-action {
display: grid;
@@ -404,7 +404,7 @@ onBackPress((event) => handleBackPress(event, requestBack));
z-index: 1;
grid-area: 1 / 1;
color: #fffaf0;
font-size: 29rpx;
font-size: clamp(16px, 29rpx, 20px);
letter-spacing: 4rpx;
}
.tap-fade,