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

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>