From 6da262b134e5185e3af2969e1c9bee98f9ee3896 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=90=A6?= <liqiworkers@gmail.com>
Date: Fri, 5 Jun 2026 14:32:01 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=81=E7=A7=BB=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/goods/index.vue | 182 +++++++++++++++++++++++++++++-------------
 1 file changed, 125 insertions(+), 57 deletions(-)

diff --git a/pages/goods/index.vue b/pages/goods/index.vue
index 3d0e729..7feaa8a 100644
--- a/pages/goods/index.vue
+++ b/pages/goods/index.vue
@@ -1,9 +1,18 @@
 <template>
   <view class="container">
 
-    <!-- 轮播图优化 -->
-    <view class="hero-banner">
-      <swiper class="product-swiper" circular autoplay interval="5000" duration="800">
+    <!-- 优化2：轮播图 UI 升级，置于顶部 -->
+    <view class="hero-banner animate-fade-in-up">
+      <swiper
+          class="product-swiper"
+          circular
+          autoplay
+          interval="5000"
+          duration="800"
+          indicator-dots
+          indicator-color="rgba(255,255,255,0.4)"
+          indicator-active-color="#FFFFFF"
+      >
         <swiper-item v-for="(item, index) in carousel" :key="index" class="swiper-item-box">
           <view class="image-wrapper">
             <image :src="item.url" mode="aspectFill" class="swiper-image" />
@@ -13,7 +22,7 @@
       </swiper>
     </view>
 
-    <!-- Search Bar (悬浮毛玻璃风格) -->
+    <!-- 优化1：Search Bar 移动到轮播图下方，且上滑时具备吸顶效果 -->
     <view class="search-wrapper">
       <view class="search-box">
         <up-search
@@ -25,33 +34,41 @@
             :animation="true"
             actionText="搜索"
             :disabled="true"
-            bgColor="#f5f5f5"
+            bgColor="#FFFFFF"
+            searchIconColor="#B4854D"
             @search="handleSearch"
             @click="handleSearch"
         />
       </view>
     </view>
-    <!-- 分类展示优化 (回归三列布局) -->
+
+    <!-- 优化3：分类区块 UI 重构 -->
     <view class="category-wrapper">
-      <view class="section-header animate-fade-in-up">
-        <text class="title-en">CATEGORIES</text>
+      <!-- 全新的标题排版：居中对齐，中英文堆叠 -->
+      <view class="section-header animate-fade-in-up" style="animation-delay: 0.1s;">
+        <text class="title-en">- CATEGORIES -</text>
         <text class="title-cn">产品分类</text>
+        <text class="header-desc">探索您的理想生活方式</text>
       </view>
 
+      <!-- 保持 3 列布局，优化卡片细节质感 -->
       <view class="category-grid">
         <view
             v-for="(item, index) in categories"
             :key="index"
             class="category-card animate-fade-in-up"
-            :style="{ animationDelay: index * 0.05 + 's' }"
+            :style="{ animationDelay: (index * 0.08 + 0.2) + 's' }"
             @tap="navigateToList(item.id)"
         >
+          <!-- 画框式图片容器 -->
           <view class="category-image-box">
             <image :src="item.url" mode="aspectFill" class="cat-img"></image>
             <view class="cat-mask"></view>
           </view>
+          <!-- 更精致的文字区域 -->
           <view class="category-info">
             <text class="category-name">{{ item.name }}</text>
+            <view class="category-indicator"></view>
           </view>
         </view>
       </view>
@@ -60,6 +77,7 @@
 </template>
 
 <script>
+// JS 逻辑完全保留
 import {getCarouselApi, getCategoryListApi} from "@/api/page/home";
 import {getCache} from "@/utils/cache";
 
@@ -118,9 +136,10 @@ export default {
 </script>
 
 <style lang="scss">
+/* --- 动画系统 --- */
 @keyframes fadeInUp {
-  from { opacity: 0; transform: translate3d(0, 40rpx, 0); }
-  to { opacity: 1; transform: translate3d(0, 0, 0); }
+  from { opacity: 0; transform: translateY(40rpx); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 .animate-fade-in-up {
@@ -128,38 +147,29 @@ export default {
   opacity: 0;
 }
 
+/* --- 全局容器 --- */
 .container {
   min-height: 100vh;
-  background-color: #F7F8FA;
-}
-
-.search-wrapper {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(10px);
-  padding: 20rpx 30rpx;
-  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
-}
-
-.search-box {
-  border-radius: 40rpx;
-  overflow: hidden;
+  /* 偏苹果风的高级灰背景色 */
+  background-color: #F5F5F7;
+  padding-bottom: 60rpx;
 }
 
+/* --- 轮播图 --- */
 .hero-banner {
   position: relative;
-  height: 400rpx;
-  margin-top: 20rpx;
-  padding: 0 20rpx;
+  height: 420rpx;
+  /* 顶部留白适配状态栏区域（可根据实际需求调整） */
+  padding: 20rpx 30rpx 0;
 }
 
 .product-swiper {
   height: 100%;
-  border-radius: 20rpx;
+  border-radius: 24rpx;
   overflow: hidden;
-  transform: translateZ(0);
+  /* 硬件加速，防止在 iOS 上出现圆角渲染 bug */
+  transform: translateY(0);
+  box-shadow: 0 12rpx 30rpx rgba(0, 0, 0, 0.08);
 }
 
 .image-wrapper {
@@ -171,6 +181,7 @@ export default {
 .swiper-image {
   width: 100%;
   height: 100%;
+  transition: transform 0.3s ease;
 }
 
 .swiper-overlay {
@@ -179,60 +190,100 @@ export default {
   left: 0;
   width: 100%;
   height: 100%;
-  background: linear-gradient(to bottom, rgba(0,0,0,0) 80%, rgba(0,0,0,0.3) 100%);
+  /* 优化后的高级渐变遮罩，增强内敛感 */
+  background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%);
 }
 
+/* --- 搜索栏 (毛玻璃悬浮) --- */
+.search-wrapper {
+  /* 设定为 sticky 吸顶，随页面滚动到顶部时自动固定 */
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: rgba(245, 245, 247, 0.85);
+  backdrop-filter: saturate(180%) blur(20px);
+  padding: 24rpx 30rpx 20rpx;
+}
+
+.search-box {
+  border-radius: 100rpx;
+  overflow: hidden;
+  /* 细微边框+阴影提升搜索框立体感 */
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
+}
+
+/* --- 分类模块 --- */
 .category-wrapper {
-  padding: 40rpx 20rpx;
+  padding: 30rpx 30rpx 50rpx;
 }
 
+/* --- 分类标题 (居中设计) --- */
 .section-header {
-  margin-bottom: 30rpx;
-  padding-left: 10rpx;
+  margin-bottom: 40rpx;
   display: flex;
   flex-direction: column;
+  align-items: center; /* 居中对齐 */
+  justify-content: center;
+  text-align: center;
 }
 
 .title-en {
   font-size: 20rpx;
   color: #B4854D;
-  letter-spacing: 4rpx;
-  font-weight: 700;
-  margin-bottom: 4rpx;
+  letter-spacing: 6rpx; /* 加宽字符间距 */
+  font-weight: 600;
+  margin-bottom: 12rpx;
   text-transform: uppercase;
 }
 
 .title-cn {
-  font-size: 36rpx;
-  color: #333;
+  font-size: 40rpx;
+  color: #1D1D1F;
   font-weight: 600;
+  letter-spacing: 4rpx;
+  margin-bottom: 8rpx;
+}
+
+.header-desc {
+  display: block;
+  font-size: 24rpx;
+  color: #86868B;
   letter-spacing: 2rpx;
 }
 
-/* 3列布局 */
+/* --- 3列布局分类卡片 --- */
 .category-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 20rpx;
+  gap: 24rpx 20rpx;
 }
 
 .category-card {
-  background: #fff;
-  border-radius: 16rpx;
-  overflow: hidden;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
-  position: relative;
-  transition: transform 0.2s;
+  background: #FFFFFF;
+  border-radius: 24rpx;
+  padding: 12rpx;
+  /* 优化细节：增加极细的高级感边框与柔和阴影 */
+  border: 1px solid rgba(200, 200, 205, 0.3);
+  box-shadow: 0 6rpx 20rpx rgba(149, 157, 165, 0.06);
+  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+  will-change: transform;
 }
 
+/* 点击/触摸时的弹性微交互 */
 .category-card:active {
-  transform: scale(0.97);
+  transform: scale(0.94);
+  box-shadow: 0 2rpx 8rpx rgba(149, 157, 165, 0.04);
+  border-color: rgba(180, 133, 77, 0.4); /* 点击时边框呼应主题色 */
 }
 
 .category-image-box {
-  height: 180rpx;
+  height: 160rpx;
   width: 100%;
   position: relative;
+  border-radius: 16rpx;
+  overflow: hidden;
+  background-color: #F9F9F9;
 }
 
 .cat-img {
@@ -243,22 +294,39 @@ export default {
 .cat-mask {
   position: absolute;
   inset: 0;
-  background: rgba(0,0,0,0.02);
+  background: rgba(0, 0, 0, 0.03);
+  mix-blend-mode: multiply;
 }
 
 .category-info {
-  padding: 16rpx 10rpx;
-  text-align: center;
-  background: #fff;
+  padding: 16rpx 4rpx 8rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .category-name {
   font-size: 26rpx;
-  color: #333;
+  color: #333333;
   font-weight: 500;
-  display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+/* 卡片文字下方的点缀，增加设计感 */
+.category-indicator {
+  width: 24rpx;
+  height: 4rpx;
+  background-color: #E5E5EA;
+  border-radius: 4rpx;
+  margin-top: 10rpx;
+  transition: background-color 0.3s;
+}
+
+.category-card:active .category-indicator {
+  background-color: #B4854D;
 }
 </style>
\ No newline at end of file