商品浏览页构建前最后一次更新

dist/pages/index/index.wxss

@@ -20,7 +20,7 @@
 .header-title {
   font-size: 48rpx;
   font-weight: 800;
-  color: #5c3a3a;
+  color: var(--text-primary);
   letter-spacing: 4rpx;
 }
 
@@ -37,6 +37,7 @@
       -ms-flex-align: center;
           align-items: center;
   background: #f8f9fa;
+  border: 1rpx dashed rgba(0, 0, 0, 0.06);
   border-radius: 40rpx;
   padding: 16rpx 24rpx;
 }
@@ -46,51 +47,57 @@
   margin-right: 16rpx;
 }
 
+.search-icon-img {
+  width: 28rpx;
+  height: 28rpx;
+  margin-right: 16rpx;
+}
+
 .search-input {
   -webkit-flex: 1;
       -ms-flex: 1;
           flex: 1;
   font-size: 28rpx;
-  color: #5c3a3a;
+  color: var(--text-primary);
   background: transparent;
   border: none;
   outline: none;
 }
 
 .search-input::-webkit-input-placeholder {
-  color: #b08d8d;
+  color: var(--text-secondary);
   font-size: 26rpx;
 }
 
 .search-input::-moz-placeholder {
-  color: #b08d8d;
+  color: var(--text-secondary);
   font-size: 26rpx;
 }
 
 .search-input:-ms-input-placeholder {
-  color: #b08d8d;
+  color: var(--text-secondary);
   font-size: 26rpx;
 }
 
 .search-input::-ms-input-placeholder {
-  color: #b08d8d;
+  color: var(--text-secondary);
   font-size: 26rpx;
 }
 
 .search-input::placeholder {
-  color: #b08d8d;
+  color: var(--text-secondary);
   font-size: 26rpx;
 }
 
 .search-result-hint {
   margin-top: 16rpx;
   padding-top: 16rpx;
-  border-top: 2rpx dashed #eee;
+  border-top: 2rpx dashed var(--line-star);
 }
 
 .hint-text {
   font-size: 24rpx;
-  color: #b08d8d;
+  color: var(--text-secondary);
 }
 
 /* 成品展示轮播 */
@@ -99,7 +106,7 @@
 }
 
 .showcase-swiper {
-  height: 460rpx;
+  height: 520rpx;
 }
 
 .showcase-swiper-item {
@@ -120,26 +127,23 @@
 .showcase-swiper-card {
   width: 100%;
   height: 100%;
-  padding: 20rpx;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
-  position: relative;
+  border-radius: 24rpx;
+  overflow: hidden;
+  -webkit-box-shadow: var(--shadow-card);
+          box-shadow: var(--shadow-card);
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  overflow: hidden;
 }
 
 .showcase-image-wrapper {
   width: 100%;
-  height: 240rpx;
-  border-radius: 16rpx;
+  height: 320rpx;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
@@ -149,28 +153,53 @@
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
-  margin-bottom: 16rpx;
+  overflow: hidden;
+  -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
+  position: relative;
 }
 
-.showcase-emoji {
-  font-size: 80rpx;
+.showcase-real-img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
-.showcase-info {
+.showcase-text-area {
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   text-align: center;
+  background: var(--bg-card);
+  padding: 16rpx 20rpx;
+  position: relative;
 }
 
 .showcase-info .showcase-title {
   font-size: 32rpx;
   font-weight: 700;
-  color: #5c3a3a;
+  color: var(--text-primary);
   display: block;
   margin-bottom: 8rpx;
 }
 
 .showcase-info .showcase-desc {
   font-size: 24rpx;
-  color: #b08d8d;
+  color: var(--text-secondary);
   display: block;
 }
 
@@ -178,12 +207,13 @@
   position: absolute;
   top: 16rpx;
   right: 16rpx;
-  background: rgba(255, 154, 158, 0.15);
-  color: #ff6b81;
+  background: rgba(255, 154, 158, 0.9);
+  color: #ffffff;
   font-size: 20rpx;
   padding: 4rpx 16rpx;
   border-radius: 20rpx;
-  font-weight: 500;
+  font-weight: 600;
+  z-index: 2;
 }
 
 /* 热门品类 */
@@ -208,7 +238,8 @@
       -ms-flex-align: center;
           align-items: center;
   text-align: center;
-  padding: 32rpx 20rpx;
+  padding: 0 0 24rpx;
+  overflow: hidden;
   -webkit-transition: -webkit-transform 0.2s;
   transition: -webkit-transform 0.2s;
   transition: transform 0.2s;
@@ -221,29 +252,40 @@
           transform: scale(0.96);
 }
 
-.category-icon {
-  font-size: 56rpx;
-  margin-bottom: 12rpx;
+/* 品类顶部实物照片 */
+.category-img-wrapper {
+  width: 100%;
+  height: 180rpx;
+  overflow: hidden;
+  border-radius: 16rpx;
+  margin-bottom: 16rpx;
+  position: relative;
 }
 
-.category-icon-img {
-  width: 120rpx;
-  height: 120rpx;
-  -o-object-fit: contain;
-     object-fit: contain;
-  margin-bottom: 12rpx;
+.category-img-real {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
 .category-name {
   font-size: 28rpx;
   font-weight: 700;
-  color: #5c3a3a;
+  color: var(--text-primary);
   margin-bottom: 8rpx;
 }
 
 .category-desc {
   font-size: 22rpx;
-  color: #b08d8d;
+  color: var(--text-secondary);
+}
+
+.category-price {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: var(--accent-pink);
+  margin-top: 8rpx;
 }
 
 /* 空状态 */
@@ -261,21 +303,22 @@
   text-align: center;
 }
 
-.empty-icon {
-  font-size: 64rpx;
+.empty-icon-img {
+  width: 48rpx;
+  height: 48rpx;
   margin-bottom: 16rpx;
 }
 
 .empty-text {
   font-size: 30rpx;
   font-weight: 600;
-  color: #5c3a3a;
+  color: var(--text-primary);
   margin-bottom: 8rpx;
 }
 
 .empty-sub {
   font-size: 24rpx;
-  color: #b08d8d;
+  color: var(--text-secondary);
 }
 
 /* 底部安全区 */