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

pages/records/r01-people-list.vue

@@ -211,7 +211,7 @@ onUnload(() => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 
 .people-page {
   display: flex;
@@ -228,7 +228,7 @@ onUnload(() => {
   padding: 22rpx 24rpx 100rpx;
 }
 .people-search {
-  @include adaptive.adaptive-records-field;
+  @include adaptive-records-field;
   display: grid;
   grid-template-columns: minmax(0, 1fr) 126rpx;
   width: 100%;
@@ -243,7 +243,7 @@ onUnload(() => {
   padding-left: 31rpx;
   box-sizing: border-box;
   color: $ink;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
 }
 .people-search__placeholder {
   color: #8a7965;
@@ -257,14 +257,14 @@ onUnload(() => {
   align-items: center;
   justify-content: center;
   color: $brand-red;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   font-weight: 700;
 }
 .people-list {
   margin-top: 12px;
 }
 .person-card {
-  @include adaptive.adaptive-records-person;
+  @include adaptive-records-person;
   display: flex;
   width: 100%;
   min-height: clamp(92px, 190rpx, 108px);
@@ -283,18 +283,18 @@ onUnload(() => {
 .person-card__name {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 31rpx;
+  font-size: clamp(17px, 31rpx, 22px);
   font-weight: 700;
 }
 .person-card__meta {
   margin-top: 7rpx;
   color: $ink-muted;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
 }
 .person-card__hint {
   margin-top: 8rpx;
   color: #806a51;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
 }
 .people-primary-action {
   margin: 22rpx auto 0;
@@ -322,14 +322,14 @@ onUnload(() => {
 .people-state-card text:first-child {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 31rpx;
+  font-size: clamp(17px, 31rpx, 22px);
   font-weight: 700;
 }
 .people-result-empty text:last-child,
 .people-state-card text:last-child {
   margin-top: 13rpx;
   color: $ink-muted;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
   line-height: 1.5;
 }
 .people-result-empty .app-button,

pages/records/r02-person-detail.vue

@@ -204,7 +204,7 @@ onUnload(() => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 
 .person-detail-page {
   display: flex;
@@ -224,7 +224,7 @@ onUnload(() => {
   padding: 18rpx 24rpx 72rpx;
 }
 .person-identity-card {
-  @include adaptive.adaptive-records-person;
+  @include adaptive-records-person;
   display: flex;
   min-height: 190rpx;
   padding: 30rpx 10%;
@@ -241,19 +241,19 @@ onUnload(() => {
 .person-identity-card__name {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 38rpx;
+  font-size: clamp(20px, 38rpx, 26px);
   font-weight: 700;
 }
 .person-identity-card__meta {
   margin-top: 8rpx;
   color: $ink-muted;
-  font-size: 25rpx;
+  font-size: clamp(15px, 25rpx, 18px);
   font-weight: 600;
 }
 .person-identity-card__hint {
   margin-top: 8rpx;
   color: #806a51;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
 }
 .person-archive-card {
   min-height: 154rpx;
@@ -263,20 +263,20 @@ onUnload(() => {
 }
 .person-archive-card,
 .person-state-card {
-  @include adaptive.adaptive-records-content;
+  @include adaptive-records-content;
 }
 .person-archive-card text {
   display: block;
 }
 .person-archive-card text:first-child {
   color: $brand-red;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   font-weight: 700;
 }
 .person-archive-card text:last-child {
   margin-top: 11rpx;
   color: $ink;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   line-height: 1.55;
 }
 .person-edit-action {
@@ -301,12 +301,12 @@ onUnload(() => {
   color: $ink-muted;
 }
 .person-related-unavailable text:first-child {
-  font-size: 25rpx;
+  font-size: clamp(15px, 25rpx, 18px);
   font-weight: 700;
 }
 .person-related-unavailable text:last-child {
   margin-top: 4rpx;
-  font-size: 20rpx;
+  font-size: clamp(13px, 20rpx, 16px);
 }
 .person-state-card {
   display: flex;
@@ -323,13 +323,13 @@ onUnload(() => {
 .person-state-card text:first-child {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 34rpx;
+  font-size: clamp(19px, 34rpx, 24px);
   font-weight: 700;
 }
 .person-state-card text:last-child {
   margin-top: 16rpx;
   color: $ink-muted;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   line-height: 1.6;
 }
 .person-state-action {
@@ -347,7 +347,7 @@ onUnload(() => {
     padding-left: 18rpx;
   }
   .person-identity-card__name {
-    font-size: 35rpx;
+    font-size: clamp(19px, 35rpx, 24px);
   }
 }
 </style>

pages/records/r03-gift-list.vue

@@ -117,7 +117,7 @@ onUnload(() => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 .gift-page {
   display: flex;
   min-height: 100vh;
@@ -133,7 +133,7 @@ onUnload(() => {
 }
 .state-card,
 .record-card {
-  @include adaptive.adaptive-records-content;
+  @include adaptive-records-content;
 }
 .state-card {
   display: flex;
@@ -144,7 +144,7 @@ onUnload(() => {
   padding: 42rpx;
   text-align: center;
   color: $ink;
-  font-size: 28rpx;
+  font-size: clamp(16px, 28rpx, 20px);
 }
 .state-card .app-button {
   width: 100%;
@@ -173,20 +173,20 @@ onUnload(() => {
 .record-card > view text:first-child {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 30rpx;
+  font-size: clamp(17px, 30rpx, 22px);
   font-weight: 700;
   overflow-wrap: anywhere;
 }
 .record-card > view text:not(:first-child) {
   margin-top: 7rpx;
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
   line-height: 1.45;
   overflow-wrap: anywhere;
 }
 .record-card > text {
   flex: 0 0 auto;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 </style>

pages/records/r04-gift-editor.vue

@@ -291,7 +291,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 .gift-editor-page {
   display: flex;
   min-height: 100vh;
@@ -309,20 +309,20 @@ onUnmounted(() => {
 .state-card {
   box-sizing: border-box;
   padding: 46rpx;
-  @include adaptive.adaptive-records-content;
+  @include adaptive-records-content;
 }
 .form-card > text:first-child,
 .state-card > text:first-child {
   display: block;
   color: $ink;
-  font-size: 34rpx;
+  font-size: clamp(19px, 34rpx, 24px);
   font-weight: 700;
 }
 .form-copy {
   display: block;
   margin-top: 12rpx;
   color: $ink-muted;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
   line-height: 1.55;
 }
 .field-row {
@@ -334,26 +334,26 @@ onUnmounted(() => {
   margin-top: 14rpx;
   padding: 14rpx 24rpx;
   box-sizing: border-box;
-  @include adaptive.adaptive-records-field;
+  @include adaptive-records-field;
 }
 .field-row > text,
 .upload-field > view > text:first-child {
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
   font-weight: 700;
 }
 .required-mark {
   display: inline-block;
   margin-right: 4rpx;
   color: $brand-red;
-  font-size: 26rpx;
+  font-size: clamp(16px, 26rpx, 20px);
   transform: translateY(-3rpx);
 }
 .field-row input,
 .field-row textarea {
   min-width: 0;
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
   text-align: right;
 }
 .field-row--textarea {
@@ -372,14 +372,14 @@ onUnmounted(() => {
   align-items: center;
   justify-content: flex-end;
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
 }
 .upload-field {
   display: grid;
   gap: 12rpx;
   margin-top: 14rpx;
   padding: 18rpx 24rpx;
-  @include adaptive.adaptive-records-field;
+  @include adaptive-records-field;
 }
 .upload-field > view > text {
   display: block;
@@ -387,7 +387,7 @@ onUnmounted(() => {
 .upload-field > view > text:last-child {
   margin-top: 6rpx;
   color: $ink-muted;
-  font-size: 20rpx;
+  font-size: clamp(13px, 20rpx, 16px);
   line-height: 1.45;
 }
 .upload-button {
@@ -399,18 +399,18 @@ onUnmounted(() => {
   border-radius: 8rpx;
   background: transparent;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .upload-field > text {
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
   overflow-wrap: anywhere;
 }
 .save-error {
   display: block;
   margin-top: 14rpx;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .form-card .app-button {
   margin-top: 18rpx;
@@ -424,7 +424,7 @@ onUnmounted(() => {
   display: block;
   margin-top: 18rpx;
   color: $ink-muted;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   line-height: 1.65;
 }
 .state-card .app-button {

pages/records/r05-ritual-list.vue

@@ -38,7 +38,7 @@
           ><view
             ><text>{{ item.title }}</text
             ><text>{{ item.type }}{{ item.time ? ` · ${item.time}` : "" }}</text
-            ><text v-if="item.description">{{ item.description }}</text></view
+            ><text v-if="item.description" class="ceremony-card__description">{{ item.description }}</text></view
           ><text>{{ item.giftCount }} 笔献礼</text></view
         ></view
       >
@@ -117,7 +117,7 @@ onUnload(() => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 .ritual-list-page {
   display: flex;
   min-height: 100vh;
@@ -133,7 +133,7 @@ onUnload(() => {
 }
 .state-card,
 .ceremony-card {
-  @include adaptive.adaptive-records-content;
+  @include adaptive-records-content;
 }
 .state-card {
   display: flex;
@@ -144,7 +144,7 @@ onUnload(() => {
   padding: 42rpx;
   text-align: center;
   color: $ink;
-  font-size: 28rpx;
+  font-size: clamp(16px, 28rpx, 20px);
 }
 .state-card .app-button {
   width: 100%;
@@ -173,20 +173,26 @@ onUnload(() => {
 .ceremony-card > view text:first-child {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 30rpx;
+  font-size: clamp(17px, 30rpx, 22px);
   font-weight: 700;
   overflow-wrap: anywhere;
 }
 .ceremony-card > view text:not(:first-child) {
   margin-top: 7rpx;
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
   line-height: 1.45;
   overflow-wrap: anywhere;
 }
+.ceremony-card__description {
+  display: -webkit-box !important;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
 .ceremony-card > text {
   flex: 0 0 auto;
   color: $brand-red;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
 }
 </style>

pages/records/r06-ritual-detail.vue

@@ -5,11 +5,13 @@
     ><view class="page-content"
       ><view v-if="!valid" class="state-card"
         ><text>礼仪入口无效</text
+        ><text>未获取到可查看的礼仪活动标识，请从活动列表重新进入。</text
         ><AppButton block label="返回上一页" @click="returnToList" /></view
       ><view v-else-if="state === 'loading'" class="state-card"
         ><AppLoading text="正在读取礼仪详情" /></view
       ><view v-else-if="state === 'error'" class="state-card"
         ><text>暂时无法读取礼仪详情</text
+        ><text>请检查网络后重新加载。</text
         ><AppButton
           block
           type="secondary"
@@ -97,7 +99,7 @@ const returnToList = () =>
     : goBack();
 </script>
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 .ritual-detail-page {
   display: flex;
   min-height: 100vh;
@@ -113,7 +115,7 @@ const returnToList = () =>
 }
 .state-card,
 .detail-card {
-  @include adaptive.adaptive-records-content;
+  @include adaptive-records-content;
 }
 .state-card {
   display: flex;
@@ -124,12 +126,21 @@ const returnToList = () =>
   padding: 42rpx;
   text-align: center;
   color: $ink;
-  font-size: 28rpx;
+  font-size: clamp(16px, 28rpx, 20px);
 }
 .state-card .app-button {
   width: 100%;
   margin-top: 24rpx;
 }
+.state-card text {
+  display: block;
+}
+.state-card text:nth-child(2) {
+  margin-top: 14rpx;
+  color: $ink-muted;
+  font-size: clamp(14px, 22rpx, 17px);
+  line-height: 1.55;
+}
 .detail-card {
   display: flex;
   min-height: 320rpx;
@@ -142,13 +153,13 @@ const returnToList = () =>
 .detail-card text:first-child {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 36rpx;
+  font-size: clamp(19px, 36rpx, 24px);
   font-weight: 700;
 }
 .detail-card text:not(:first-child) {
   margin-top: 14rpx;
   color: $ink-muted;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
   line-height: 1.6;
 }
 </style>

pages/records/r07-ritual-editor.vue

@@ -302,7 +302,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 .ritual-editor-page {
   display: flex;
   min-height: 100vh;
@@ -319,7 +319,7 @@ onUnmounted(() => {
 }
 .editor-card,
 .state-card {
-  @include adaptive.adaptive-records-content;
+  @include adaptive-records-content;
   box-sizing: border-box;
 }
 .editor-card {
@@ -335,13 +335,13 @@ onUnmounted(() => {
 .editor-card__title {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 38rpx;
+  font-size: clamp(20px, 38rpx, 26px);
   font-weight: 700;
 }
 .editor-card__note {
   margin-top: 10rpx;
   color: $ink-muted;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
   line-height: 1.55;
 }
 .field-row {
@@ -358,14 +358,14 @@ onUnmounted(() => {
   width: 150rpx;
   flex: 0 0 auto;
   color: $ink;
-  font-size: 26rpx;
+  font-size: clamp(16px, 26rpx, 20px);
   font-weight: 700;
 }
 .field-row input {
   min-width: 0;
   flex: 1;
   color: $ink;
-  font-size: 25rpx;
+  font-size: clamp(15px, 25rpx, 18px);
 }
 .field-row--picker picker {
   min-width: 0;
@@ -376,13 +376,13 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   color: $ink;
-  font-size: 25rpx;
+  font-size: clamp(15px, 25rpx, 18px);
 }
 .required-mark {
   display: inline-block;
   margin-right: 4rpx;
   color: $brand-red;
-  font-size: 26rpx;
+  font-size: clamp(16px, 26rpx, 20px);
   transform: translateY(-3rpx);
 }
 .placeholder {
@@ -399,7 +399,7 @@ onUnmounted(() => {
 .textarea-field__label,
 .cover-field__label {
   color: $ink;
-  font-size: 26rpx;
+  font-size: clamp(16px, 26rpx, 20px);
   font-weight: 700;
 }
 .textarea-field textarea {
@@ -408,7 +408,7 @@ onUnmounted(() => {
   min-height: 122rpx;
   margin-top: 12rpx;
   color: $ink;
-  font-size: 25rpx;
+  font-size: clamp(15px, 25rpx, 18px);
   line-height: 1.55;
 }
 .cover-field {
@@ -419,7 +419,7 @@ onUnmounted(() => {
   display: block;
   margin-top: 5rpx;
   color: $ink-muted;
-  font-size: 20rpx;
+  font-size: clamp(13px, 20rpx, 16px);
   line-height: 1.45;
 }
 .upload-button {
@@ -431,17 +431,17 @@ onUnmounted(() => {
   border-radius: 8rpx;
   background: transparent;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .upload-receipt {
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
   overflow-wrap: anywhere;
 }
 .form-error {
   margin-top: 10rpx;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
   line-height: 1.45;
 }
 .editor-card .app-button {
@@ -457,13 +457,13 @@ onUnmounted(() => {
 }
 .state-card text:first-child {
   color: $ink;
-  font-size: 35rpx;
+  font-size: clamp(19px, 35rpx, 24px);
   font-weight: 700;
 }
 .state-card text:nth-child(2) {
   margin-top: 18rpx;
   color: $ink-muted;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   line-height: 1.65;
 }
 .state-card .app-button {

pages/records/r08-growth-journal.vue

@@ -131,6 +131,7 @@
       </view>
       <view v-else-if="!valid" class="state-card"
         ><text>成长日志入口无效</text
+        ><text>未获取到可查看的家谱标识，请从家族页面重新进入。</text
         ><AppButton block label="返回上一页" @click="requestBack"
       /></view>
       <view v-else-if="listState === 'loading'" class="state-card"
@@ -138,6 +139,7 @@
       /></view>
       <view v-else-if="listState === 'error'" class="state-card"
         ><text>暂时无法读取成长记录</text
+        ><text>请检查网络后重新加载。</text
         ><AppButton
           block
           type="secondary"
@@ -399,7 +401,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 .record-page {
   display: flex;
   min-height: 100vh;
@@ -416,7 +418,7 @@ onUnmounted(() => {
 .form-card,
 .state-card,
 .record-card {
-  @include adaptive.adaptive-records-content;
+  @include adaptive-records-content;
 }
 .form-card {
   box-sizing: border-box;
@@ -425,14 +427,14 @@ onUnmounted(() => {
 .form-card > text:first-child {
   display: block;
   color: $ink;
-  font-size: 34rpx;
+  font-size: clamp(19px, 34rpx, 24px);
   font-weight: 700;
 }
 .form-copy {
   display: block;
   margin-top: 12rpx;
   color: $ink-muted;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
   line-height: 1.55;
 }
 .field {
@@ -442,26 +444,26 @@ onUnmounted(() => {
   display: block;
   margin: 0 8rpx 8rpx;
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
   font-weight: 700;
 }
 .required-mark {
   display: inline-block;
   margin-right: 4rpx;
   color: $brand-red;
-  font-size: 26rpx;
+  font-size: clamp(16px, 26rpx, 20px);
   transform: translateY(-3rpx);
 }
 .field input,
 .field textarea,
 .field--picker picker > view {
-  @include adaptive.adaptive-records-field;
+  @include adaptive-records-field;
   box-sizing: border-box;
   width: 100%;
   min-height: 76rpx;
   padding: 16rpx 22rpx;
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
 }
 .field textarea {
   min-height: 150rpx;
@@ -473,7 +475,7 @@ onUnmounted(() => {
   color: $ink-muted;
 }
 .field--context > view {
-  @include adaptive.adaptive-records-field;
+  @include adaptive-records-field;
   display: flex;
   min-height: 76rpx;
   align-items: center;
@@ -483,31 +485,31 @@ onUnmounted(() => {
 }
 .field--context > view > text:first-child {
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
 }
 .field--context > view > text:last-child {
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
 }
 .upload-field {
   display: grid;
   gap: 12rpx;
   margin-top: 16rpx;
   padding: 18rpx 22rpx;
-  @include adaptive.adaptive-records-field;
+  @include adaptive-records-field;
 }
 .upload-field > view > text {
   display: block;
 }
 .upload-field > view > text:first-child {
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
   font-weight: 700;
 }
 .upload-field > view > text:last-child {
   margin-top: 6rpx;
   color: $ink-muted;
-  font-size: 20rpx;
+  font-size: clamp(13px, 20rpx, 16px);
   line-height: 1.45;
 }
 .upload-button {
@@ -519,19 +521,19 @@ onUnmounted(() => {
   border-radius: 8rpx;
   background: transparent;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .upload-field > text,
 .error {
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
   overflow-wrap: anywhere;
 }
 .error {
   display: block;
   margin-top: 12rpx;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .form-actions {
   display: grid;
@@ -551,13 +553,22 @@ onUnmounted(() => {
   justify-content: center;
   padding: 42rpx;
   color: $ink;
-  font-size: 28rpx;
+  font-size: clamp(16px, 28rpx, 20px);
   text-align: center;
 }
 .state-card .app-button {
   width: 100%;
   margin-top: 24rpx;
 }
+.state-card text {
+  display: block;
+}
+.state-card text:nth-child(2) {
+  margin-top: 14rpx;
+  color: $ink-muted;
+  font-size: clamp(14px, 22rpx, 17px);
+  line-height: 1.55;
+}
 .record-list {
   display: flex;
   flex-direction: column;
@@ -566,7 +577,7 @@ onUnmounted(() => {
 .save-notice {
   display: block;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .record-card {
   min-height: 128rpx;
@@ -578,13 +589,13 @@ onUnmounted(() => {
 .record-card text:first-child {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 30rpx;
+  font-size: clamp(17px, 30rpx, 22px);
   font-weight: 700;
 }
 .record-card text:not(:first-child) {
   margin-top: 7rpx;
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
   line-height: 1.45;
   overflow-wrap: anywhere;
 }

pages/records/r09-life-events.vue

@@ -32,7 +32,7 @@ const returnToRecords = () =>
     : goBack();
 </script>
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 .life-page {
   display: flex;
   min-height: 100vh;
@@ -51,20 +51,20 @@ const returnToRecords = () =>
   min-height: 340rpx;
   padding: 78rpx 52rpx 50rpx;
   text-align: center;
-  @include adaptive.adaptive-records-content;
+  @include adaptive-records-content;
 }
 .state-card text {
   display: block;
 }
 .state-card text:first-child {
   color: $ink;
-  font-size: 35rpx;
+  font-size: clamp(19px, 35rpx, 24px);
   font-weight: 700;
 }
 .state-card text:nth-child(2) {
   margin-top: 18rpx;
   color: $ink-muted;
-  font-size: 24rpx;
+  font-size: clamp(15px, 24rpx, 18px);
   line-height: 1.65;
 }
 .state-card .app-button {

pages/records/r10-memo-list.vue

@@ -110,7 +110,7 @@
           ><view
             ><text>{{ item.title }}</text
             ><text v-if="item.remindTime">{{ item.remindTime }}</text
-            ><text v-if="item.content">{{ item.content }}</text></view
+            ><text v-if="item.content" class="memo-card__content">{{ item.content }}</text></view
           ></view
         >
       </view>
@@ -319,7 +319,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 .memo-page {
   display: flex;
   min-height: 100vh;
@@ -336,7 +336,7 @@ onUnmounted(() => {
 .form-card,
 .state-card,
 .memo-card {
-  @include adaptive.adaptive-records-content;
+  @include adaptive-records-content;
 }
 .form-card {
   box-sizing: border-box;
@@ -345,14 +345,14 @@ onUnmounted(() => {
 .form-card > text:first-child {
   display: block;
   color: $ink;
-  font-size: 34rpx;
+  font-size: clamp(19px, 34rpx, 24px);
   font-weight: 700;
 }
 .form-copy {
   display: block;
   margin-top: 12rpx;
   color: $ink-muted;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
   line-height: 1.55;
 }
 .field {
@@ -364,26 +364,26 @@ onUnmounted(() => {
   margin-top: 14rpx;
   padding: 14rpx 24rpx;
   box-sizing: border-box;
-  @include adaptive.adaptive-records-field;
+  @include adaptive-records-field;
 }
 .field > text,
 .upload-field > view > text:first-child {
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
   font-weight: 700;
 }
 .required-mark {
   display: inline-block;
   margin-right: 4rpx;
   color: $brand-red;
-  font-size: 26rpx;
+  font-size: clamp(16px, 26rpx, 20px);
   transform: translateY(-3rpx);
 }
 .field input,
 .field > text:last-child {
   min-width: 0;
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
   text-align: right;
 }
 .field--textarea {
@@ -392,7 +392,7 @@ onUnmounted(() => {
 .field textarea {
   min-height: 116rpx;
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
   line-height: 1.55;
 }
 .upload-field {
@@ -400,7 +400,7 @@ onUnmounted(() => {
   gap: 12rpx;
   margin-top: 14rpx;
   padding: 18rpx 24rpx;
-  @include adaptive.adaptive-records-field;
+  @include adaptive-records-field;
 }
 .upload-field > view > text {
   display: block;
@@ -408,7 +408,7 @@ onUnmounted(() => {
 .upload-field > view > text:last-child {
   margin-top: 6rpx;
   color: $ink-muted;
-  font-size: 20rpx;
+  font-size: clamp(13px, 20rpx, 16px);
   line-height: 1.45;
 }
 .upload-button {
@@ -420,18 +420,18 @@ onUnmounted(() => {
   border-radius: 8rpx;
   background: transparent;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .upload-field > text {
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
   overflow-wrap: anywhere;
 }
 .error {
   display: block;
   margin-top: 12rpx;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .form-actions {
   display: grid;
@@ -451,7 +451,7 @@ onUnmounted(() => {
   justify-content: center;
   padding: 42rpx;
   color: $ink;
-  font-size: 28rpx;
+  font-size: clamp(16px, 28rpx, 20px);
   text-align: center;
 }
 .state-card .app-button {
@@ -466,7 +466,7 @@ onUnmounted(() => {
 .save-notice {
   display: block;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .memo-card {
   min-height: 128rpx;
@@ -478,14 +478,20 @@ onUnmounted(() => {
 .memo-card text:first-child {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 30rpx;
+  font-size: clamp(17px, 30rpx, 22px);
   font-weight: 700;
 }
 .memo-card text:not(:first-child) {
   margin-top: 7rpx;
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
   line-height: 1.45;
   overflow-wrap: anywhere;
 }
+.memo-card__content {
+  display: -webkit-box !important;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
 </style>

pages/records/r11-merit-records.vue

@@ -333,7 +333,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped lang="scss">
-@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
+@import "../../styles/adaptive-frame-profiles.scss";
 .merit-page {
   display: flex;
   min-height: 100vh;
@@ -350,7 +350,7 @@ onUnmounted(() => {
 .form-card,
 .state-card,
 .merit-card {
-  @include adaptive.adaptive-records-content;
+  @include adaptive-records-content;
 }
 .form-card {
   box-sizing: border-box;
@@ -359,14 +359,14 @@ onUnmounted(() => {
 .form-card > text:first-child {
   display: block;
   color: $ink;
-  font-size: 34rpx;
+  font-size: clamp(19px, 34rpx, 24px);
   font-weight: 700;
 }
 .form-copy {
   display: block;
   margin-top: 12rpx;
   color: $ink-muted;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
   line-height: 1.55;
 }
 .field {
@@ -376,26 +376,26 @@ onUnmounted(() => {
   display: block;
   margin: 0 8rpx 8rpx;
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
   font-weight: 700;
 }
 .required-mark {
   display: inline-block;
   margin-right: 4rpx;
   color: $brand-red;
-  font-size: 26rpx;
+  font-size: clamp(16px, 26rpx, 20px);
   transform: translateY(-3rpx);
 }
 .field input,
 .field textarea,
 .field--picker picker > view {
-  @include adaptive.adaptive-records-field;
+  @include adaptive-records-field;
   box-sizing: border-box;
   width: 100%;
   min-height: 76rpx;
   padding: 16rpx 22rpx;
   color: $ink;
-  font-size: 23rpx;
+  font-size: clamp(14px, 23rpx, 17px);
 }
 .field textarea {
   min-height: 150rpx;
@@ -410,7 +410,7 @@ onUnmounted(() => {
   display: block;
   margin-top: 12rpx;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .form-actions {
   display: grid;
@@ -430,7 +430,7 @@ onUnmounted(() => {
   justify-content: center;
   padding: 42rpx;
   color: $ink;
-  font-size: 28rpx;
+  font-size: clamp(16px, 28rpx, 20px);
   text-align: center;
 }
 .state-card .app-button {
@@ -445,12 +445,12 @@ onUnmounted(() => {
 .save-notice {
   display: block;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .merit-summary {
   display: block;
   color: $ink-muted;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 .merit-card {
   display: flex;
@@ -470,20 +470,20 @@ onUnmounted(() => {
 .merit-card > view text:first-child {
   color: $ink;
   font-family: STKaiti, KaiTi, serif;
-  font-size: 30rpx;
+  font-size: clamp(17px, 30rpx, 22px);
   font-weight: 700;
   overflow-wrap: anywhere;
 }
 .merit-card > view text:not(:first-child) {
   margin-top: 7rpx;
   color: $ink-muted;
-  font-size: 21rpx;
+  font-size: clamp(13px, 21rpx, 16px);
   line-height: 1.45;
   overflow-wrap: anywhere;
 }
 .merit-card > text {
   flex: 0 0 auto;
   color: $brand-red;
-  font-size: 22rpx;
+  font-size: clamp(14px, 22rpx, 17px);
 }
 </style>