update at 2026-02-08 23:38:19

miniprogram/pages/index/index.wxss

@@ -34,17 +34,39 @@
   flex: 1;
   gap: 4rpx;  /* 改为 2rpx 的 gap，小程序 rpx = 物理像素*2 */
   padding: 0 12rpx;
+  height: 64rpx;
 }
 
 .font-size-icon {
   width: 24rpx;
   height: 24rpx;
   flex-shrink: 0;
+  display: block;
+}
+
+.font-slider-wrap {
+  flex: 1;
+  height: 64rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  position: relative;
+}
+
+.font-size-value {
+  font-size: 20rpx;
+  color: #4E5969;
+  line-height: 28rpx;
+  text-align: center;
+  margin-bottom: 4rpx;
 }
 
 .font-slider {
-  flex: 1;
-  height: 4rpx;
+  width: 100%;
+  height: 24rpx;
+  margin: 0;
+  padding: 0;
 }
 
 .color-picker-btn {
@@ -149,7 +171,14 @@
 .export-btns-inline {
   display: flex;
   align-items: center;
-  gap: 12rpx;
+  gap: 10rpx;
+}
+
+.download-icon {
+  width: 24rpx;
+  height: 24rpx;
+  flex-shrink: 0;
+  display: block;
 }
 
 .export-btn-sm {
@@ -163,11 +192,11 @@
 }
 
 .export-btn-sm.export-svg-btn {
-  background: #8552A1;
+  background: #E3D6EE;
 }
 
 .export-btn-sm.export-png-btn {
-  background: #2420A8;
+  background: #FFE4BA;
 }
 
 .export-icon-sm {
@@ -207,11 +236,12 @@
   min-height: 80rpx;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
 }
 
 .preview-image {
-  width: 100%;
+  display: block;
+  max-width: 100%;
 }
 
 .preview-loading {
@@ -259,14 +289,17 @@
   display: flex;
   align-items: center;
   gap: 8rpx;
-  padding: 4rpx 0;
-  height: 56rpx;
+  padding: 0;
+  height: 40rpx;
 }
 
 .selection-header .section-title {
   padding: 0;
-  height: auto;
-  line-height: 56rpx;
+  font-size: 28rpx;
+  line-height: 40rpx;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 
 .search-container {
@@ -278,6 +311,7 @@
   border-radius: 8rpx;
   padding: 4rpx 12rpx;
   height: 40rpx;
+  min-width: 0;
 }
 
 .search-icon {
@@ -311,6 +345,7 @@
 }
 
 .font-category {
+  position: relative;
   margin-bottom: 14rpx;
 }
 
@@ -322,8 +357,8 @@
 }
 
 .expand-icon {
-  width: 20rpx;
-  height: 20rpx;
+  width: 40rpx;
+  height: 40rpx;
   transition: transform 0.3s;
   flex-shrink: 0;
 }
@@ -340,6 +375,10 @@
   gap: 0;
 }
 
+.select-font-list {
+  position: relative;
+}
+
 .font-item {
   display: flex;
   align-items: center;
@@ -349,6 +388,29 @@
   margin-bottom: 9rpx;
 }
 
+.select-font-item {
+  position: relative;
+  padding-left: 28rpx;
+}
+
+.tree-vertical-line {
+  position: absolute;
+  left: 19rpx;
+  top: 42rpx;
+  bottom: 16rpx;
+  width: 1rpx;
+  background: #C9CDD4;
+}
+
+.tree-horizontal-line {
+  position: absolute;
+  left: 19rpx;
+  top: 18rpx;
+  width: 10rpx;
+  height: 1rpx;
+  background: #C9CDD4;
+}
+
 .font-item-icon {
   width: 18rpx;
   height: 18rpx;
@@ -357,19 +419,28 @@
 
 .font-item-name {
   flex: 1;
+  min-width: 0;
   font-size: 20rpx;
   color: #86909C;
+  line-height: 28rpx;
+  white-space: normal;
+  word-break: break-all;
 }
 
 .font-item-actions {
   display: flex;
   align-items: center;
   gap: 9rpx;
+  flex-shrink: 0;
 }
 
 .font-checkbox {
   width: 21rpx;
   height: 21rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
 .checkbox-icon-sm {
@@ -380,11 +451,24 @@
 .favorite-btn {
   width: 21rpx;
   height: 21rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
 .favorite-icon {
   width: 100%;
   height: 100%;
+  display: block;
+}
+
+.favorite-list {
+  padding-top: 8rpx;
+}
+
+.favorite-font-item {
+  padding-left: 0;
 }
 
 .empty-favorites {