feat: 实现玻璃质感UI和瀑布流布局

- 实现左长右短左短右长交替瀑布流布局
- 商品卡片添加半透明毛玻璃效果和3D悬浮效果
- 将价格替换为货源情况、认证状态、议价状态标签
- 分类标签改为圆角矩形玻璃质感样式
- 搜索页面样式与首页保持一致
- 修复WXSS编译错误

pages/buyer/index.wxss

@@ -1,93 +1,100 @@
 /* pages/buyer/index.wxss */
+page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 50%, #e8e8e8 100%);
+  margin: 0;
+  padding: 0;
+}
+
 .container {
   min-height: 100vh;
-  background-color: #f5f5f5;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background-color: #f8f8f8;
+  padding: 0;
+  margin: 0;
 }
 
 /* 搜索框样式 */
 .search-bar {
-  position: fixed;
+  width: 100%;
-  top: 0;
+  margin: 20rpx;
-  left: 0;
+  flex: 0 1 auto;
-  right: 0;
-  padding: 20rpx;
-  background-color: transparent;
-  z-index: 100;
   box-sizing: border-box;
 }
 
 .search-container {
   display: flex;
   align-items: center;
-  border: 1rpx solid rgba(0, 0, 0, 0.08);
+  width: 100%;
-  border-radius: 40rpx;
+  border-radius: 50rpx;
-  background-color: white;
+  background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
-  padding: 0 30rpx;
+  padding: 6rpx;
-  margin: 0 auto;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
-  width: 90%;
-  height: 80rpx;
   box-sizing: border-box;
-  transition: all 0.3s ease;
+  border: 1rpx solid rgba(22, 119, 255, 0.2);
-}
-
-.search-container:focus-within {
-  border-color: #07c160;
-  background-color: white;
-  box-shadow: 0 0 0 4rpx rgba(7, 193, 96, 0.1);
 }
 
 .search-icon {
-  font-size: 30rpx;
+  margin: 0 15rpx;
+  font-size: 28rpx;
   color: #999;
-  margin-right: 20rpx;
 }
 
 .search-input {
   flex: 1;
-  font-size: 30rpx;
+  height: 70rpx;
+  font-size: 28rpx;
   color: #333;
-  background-color: transparent;
+  background: transparent;
   border: none;
   outline: none;
-  height: 60rpx;
-  line-height: 60rpx;
 }
 
 .search-input::placeholder {
   color: #999;
-  font-size: 30rpx;
+  font-size: 28rpx;
 }
 
 .clear-icon {
-  font-size: 45rpx;
+  font-size: 32rpx;
-  color: #26ba20ff;
+  color: #999;
-  padding: 8rpx;
+  padding: 10rpx 20rpx;
-  border-radius: 0;
-  background-color: transparent;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.clear-icon:hover {
-  background-color: transparent;
-  color: #666;
 }
 
-.title {
+/* 商品列表样式 */
-  font-size: 36rpx;
+.goods-list {
-  font-weight: bold;
+  flex: 1;
-  color: #333;
+  padding: 20rpx 32rpx;
-  margin-bottom: 20rpx;
+  overflow-y: auto;
-  width: 100%;
+  -webkit-overflow-scrolling: touch;
-  text-align: center;
 }
 
 .card {
-  background: white;
+  background: rgba(255, 255, 255, 0.82);
-  border-radius: 12rpx;
+  backdrop-filter: blur(10rpx);
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+  -webkit-backdrop-filter: blur(10rpx);
+  border-radius: 20rpx;
   overflow: hidden;
-  margin-bottom: 20rpx;
+  box-shadow: 
+    0 6rpx 24rpx rgba(0, 0, 0, 0.15),
+    0 0 0 1rpx rgba(0, 0, 0, 0.08),
+    inset 0 0 0 1rpx rgba(255, 255, 255, 0.95);
+  border: 2rpx solid rgba(200, 200, 200, 0.5);
+  margin-bottom: 16rpx;
+  transition: all 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-4rpx);
+  box-shadow: 
+    0 12rpx 32rpx rgba(0, 0, 0, 0.2),
+    0 0 0 2rpx rgba(0, 0, 0, 0.1),
+    inset 0 0 0 1rpx rgba(255, 255, 255, 1);
 }
 
 .image-swiper {
@@ -95,6 +102,175 @@
   height: 100%;
 }
 
+/* 商品卡片内部布局 */
+.goods-card-content {
+  display: flex;
+  width: 100%;
+  height: 200rpx;
+}
+
+.goods-image-section {
+  width: 40%;
+  position: relative;
+  height: 200rpx;
+}
+
+.goods-image {
+  width: 100%;
+  height: 100%;
+}
+
+.goods-image-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+  color: #999;
+  font-size: 24rpx;
+}
+
+.image-page-indicator {
+  position: absolute;
+  bottom: 10rpx;
+  right: 10rpx;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  padding: 4rpx 12rpx;
+  border-radius: 15rpx;
+  font-size: 20rpx;
+}
+
+.goods-info-section {
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(5rpx);
+  border-left: 1rpx solid rgba(240, 240, 240, 0.8);
+}
+
+.goods-info-top {
+  flex: 0.6;
+  padding: 16rpx 20rpx;
+  display: flex;
+  flex-direction: column;
+}
+
+.goods-name-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8rpx;
+  margin-bottom: 8rpx;
+}
+
+.supply-tag {
+  font-size: 20rpx;
+  padding: 4rpx 10rpx;
+  border-radius: 8rpx;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.supply-tag.spot {
+  background: rgba(82, 196, 26, 0.15);
+  color: #389e0d;
+  border: 1rpx solid rgba(82, 196, 26, 0.5);
+}
+
+.supply-tag.presale {
+  background: rgba(255, 154, 28, 0.15);
+  color: #d46b08;
+  border: 1rpx solid rgba(255, 154, 28, 0.5);
+}
+
+.auth-badge {
+  font-size: 20rpx;
+  padding: 4rpx 10rpx;
+  background: linear-gradient(135deg, #4a90e2 0%, #2b66f0 50%, #1a4bbd 100%);
+  color: white;
+  clip-path: polygon(50% 0%, 70% 10%, 100% 30%, 100% 70%, 70% 90%, 50% 100%, 30% 90%, 0% 70%, 0% 30%, 30% 10%);
+  font-weight: bold;
+}
+
+.goods-name {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.goods-spec {
+  font-size: 24rpx;
+  color: #888;
+  margin-top: 8rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.goods-info-bottom {
+  flex: 0.4;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20rpx;
+  border-top: 1rpx solid rgba(240, 240, 240, 0.5);
+}
+
+.favorite-count {
+  display: flex;
+  align-items: center;
+  font-size: 24rpx;
+  color: #999;
+}
+
+.favorite-count .count {
+  color: #d865d8;
+  font-weight: bold;
+  margin: 0 6rpx;
+}
+
+.favorite-button {
+  font-size: 22rpx;
+  font-weight: 600;
+  width: 120rpx;
+  height: 50rpx;
+  border-radius: 25rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  border: none;
+  transition: all 0.3s ease;
+}
+
+.favorite-button.add {
+  color: #1677ff;
+  background: rgba(22, 119, 255, 0.15);
+  border: 1rpx solid rgba(22, 119, 255, 0.3);
+}
+
+.favorite-button.add:hover {
+  background: rgba(22, 119, 255, 0.25);
+}
+
+.favorite-button.add:active {
+  transform: scale(0.95);
+}
+
+.favorite-button.canceled {
+  color: #ff6b6b;
+  background: rgba(255, 107, 107, 0.15);
+  border: 1rpx solid rgba(255, 107, 107, 0.3);
+}
+
 /* 弹窗样式 */
 .modal-overlay {
   position: fixed;
@@ -144,15 +320,15 @@
   padding: 0;
   border-radius: 20rpx 20rpx 0 0;
   width: 100%;
-  height: 100vh; /* 改为全屏高度 */
+  height: 100vh;
-  max-height: 100vh; /* 确保不超过屏幕高度 */
+  max-height: 100vh;
   overflow: hidden;
   box-shadow: 0 -8rpx 40rpx rgba(0, 0, 0, 0.15);
   display: flex;
   flex-direction: column;
-  margin-bottom: 0; /* 导航栏已隐藏，无需间距 */
+  margin-bottom: 0;
   z-index: 9999;
-  position: absolute; /* 确保弹窗位于遮罩层内 */
+  position: absolute;
   top: 0;
   left: 0;
 }
@@ -194,13 +370,13 @@
   padding: 40rpx;
   overflow-y: auto;
   flex: 1;
-  height: calc(100vh - 120rpx); /* 减去头部高度，实现全屏滚动 */
+  height: calc(100vh - 120rpx);
-  -webkit-overflow-scrolling: touch; /* 优化iOS滚动体验 */
+  -webkit-overflow-scrolling: touch;
-  width: 100%; /* 确保宽度100% */
+  width: 100%;
-  box-sizing: border-box; /* 确保padding不影响宽度计算 */
+  box-sizing: border-box;
 }
 
-.goods-image-section {
+.goods-image-section-detail {
   margin-bottom: 40rpx;
   border-radius: 12rpx;
   overflow: hidden;
@@ -217,17 +393,11 @@
   height: 100%;
 }
 
-.goods-image {
+.goods-info-section-detail {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-.goods-info-section {
   text-align: left;
 }
 
-.goods-name {
+.goods-name-detail {
   font-size: 36rpx;
   font-weight: 600;
   color: #2c3e50;
@@ -612,3 +782,16 @@ button:after {
   padding: 24rpx 0;
   border: 2rpx solid #e5e5e5;
 }
+
+/* 已加载全部提示 */
+.load-complete {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding-top: 20rpx;
+}
+
+.load-complete text {
+  color: #999;
+  font-size: 26rpx;
+}

pages/index/index.js

@@ -31,6 +31,9 @@ Page({
     // 商品相关
     goods: [],
     filteredGoods: [],
+    groupedGoods: [],
+    leftColumnGoods: [],
+    rightColumnGoods: [],
     selectedCategory: '全部',
     loadingMore: false,
     hasMoreData: true,
@@ -277,13 +280,14 @@ Page({
             (reservedCountValue !== undefined && reservedCountValue !== null ? reservedCountValue :
               (reservationCountValue || 0));
           
-          // 转换supplyStatus字段值
+          // 货源情况 - 直接显示数据库字段值
           let supplyStatusValue = product.supplyStatus || '';
-          if (['平台货源', '三方认证'].includes(supplyStatusValue)) {
+          
-            supplyStatusValue = '现货';
+          // 认证状态 - 直接显示数据库的sourceType字段值
-          } else if (supplyStatusValue === '三方未认证') {
+          let sourceTypeValue = product.sourceType || '';
-            supplyStatusValue = '预售';
+          
-          }
+          // 处理议价状态 - 全部显示可议价
+          let negotiateValue = '可议价';
           
           // 处理图片URL，确保imageUrls字段存在且为数组
           const imageUrls = product.imageUrls || product.images || [];
@@ -302,7 +306,8 @@ Page({
             product_contact: product.product_contact || '',
             contact_phone: product.contact_phone || '',
             supplyStatus: supplyStatusValue,
-            sourceType: product.sourceType || '',
+            sourceType: sourceTypeValue,
+            negotiateStatus: negotiateValue,
             isReserved: false,
             isFavorite: false,
             currentImageIndex: 0,
@@ -329,6 +334,8 @@ Page({
         
         // 应用筛选条件
         const filteredGoods = this.applyFilters(updatedGoods)
+        const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods)
+        const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods)
         
         // 计算是否还有更多数据
         const totalGoods = res.total || 0;
@@ -338,6 +345,9 @@ Page({
         this.setData({
           goods: updatedGoods,
           filteredGoods: filteredGoods,
+          groupedGoods: groupedGoods,
+          leftColumnGoods: leftColumnGoods,
+          rightColumnGoods: rightColumnGoods,
           loadingMore: false,
           page: currentPage + 1,
           hasMoreData: hasMoreData,
@@ -439,6 +449,75 @@ Page({
     return filtered
   },
   
+  // 分组商品用于交错布局（左长右短，左短右长交替）
+  groupGoodsForStaggeredLayout: function(goods) {
+    if (!goods || goods.length === 0) {
+      return []
+    }
+    
+    const grouped = []
+    const len = goods.length
+    
+    for (let i = 0; i < len; i += 2) {
+      const row = []
+      
+      // 第一个商品：如果是偶数行(index为偶数)，则是长商品；如果是奇数行，则是短商品
+      if (i < len) {
+        row.push({
+          ...goods[i],
+          isLong: i % 2 === 0 // 偶数索引为长商品
+        })
+      }
+      
+      // 第二个商品：与第一个相反
+      if (i + 1 < len) {
+        row.push({
+          ...goods[i + 1],
+          isLong: i % 2 !== 0 // 奇数索引为长商品
+        })
+      }
+      
+      grouped.push(row)
+    }
+    
+    return grouped
+  },
+  
+  // 瀑布流布局：将商品分配到左右两列
+  // 规则：左长右短 -> 左短右长 交替排列
+  // 偶数行(0,2,4...)：左长右短
+  // 奇数行(1,3,5...)：左短右长
+  distributeToColumns: function(goods) {
+    if (!goods || goods.length === 0) {
+      return { leftColumnGoods: [], rightColumnGoods: [] }
+    }
+    
+    const leftColumn = []
+    const rightColumn = []
+    const rowCount = Math.ceil(goods.length / 2)
+    
+    for (let i = 0; i < goods.length; i += 2) {
+      const currentRow = Math.floor(i / 2)
+      const isEvenRow = currentRow % 2 === 0
+      
+      if (i < goods.length) {
+        leftColumn.push({
+          ...goods[i],
+          isLong: isEvenRow // 偶数行左边为长，奇数行左边为短
+        })
+      }
+      
+      if (i + 1 < goods.length) {
+        rightColumn.push({
+          ...goods[i + 1],
+          isLong: !isEvenRow // 偶数行右边为短，奇数行右边为长
+        })
+      }
+    }
+    
+    return { leftColumnGoods: leftColumn, rightColumnGoods: rightColumn }
+  },
+  
   // 搜索输入
   onSearchInput: function(e) {
     this.setData({
@@ -455,8 +534,13 @@ Page({
     }
     
     const filteredGoods = this.applyFilters(this.data.goods)
+    const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods)
+    const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods)
     this.setData({
-      filteredGoods: filteredGoods
+      filteredGoods: filteredGoods,
+      groupedGoods: groupedGoods,
+      leftColumnGoods: leftColumnGoods,
+      rightColumnGoods: rightColumnGoods
     })
   },
   
@@ -484,8 +568,13 @@ Page({
     }
     
     const filteredGoods = this.applyFilters(this.data.goods)
+    const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods)
+    const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods)
     this.setData({
       filteredGoods: filteredGoods,
+      groupedGoods: groupedGoods,
+      leftColumnGoods: leftColumnGoods,
+      rightColumnGoods: rightColumnGoods,
       showRegionPicker: false
     })
   },
@@ -509,8 +598,13 @@ Page({
     })
     
     const filteredGoods = this.applyFilters(this.data.goods)
+    const groupedGoods = this.groupGoodsForStaggeredLayout(filteredGoods)
+    const { leftColumnGoods, rightColumnGoods } = this.distributeToColumns(filteredGoods)
     this.setData({
-      filteredGoods: filteredGoods
+      filteredGoods: filteredGoods,
+      groupedGoods: groupedGoods,
+      leftColumnGoods: leftColumnGoods,
+      rightColumnGoods: rightColumnGoods
     })
   },
   

pages/index/index.wxml

@@ -136,14 +136,16 @@
       style="height: calc(100% - 60rpx);"
     >
       <view class="goods-list-container">
+        <view class="waterfall-container">
+          <view class="waterfall-column left-column">
             <view 
-          wx:for="{{filteredGoods}}" 
+              class="goods-item {{item.isLong ? 'long-card' : 'short-card'}}" 
+              wx:for="{{leftColumnGoods}}" 
               wx:key="id" 
-          class="goods-item"
               data-item="{{item}}"
               bindtap="viewGoodsDetail"
             >
-          <!-- 商品图片 -->
+              <view class="goods-card">
                 <view class="goods-image-container">
                   <image 
                     class="goods-image" 
@@ -153,19 +155,64 @@
                     data-item="{{item}}"
                     data-index="0"
                   ></image>
-            <view class="goods-tag">{{item.supplyStatus || '现货'}}</view>
                 </view>
-          <!-- 商品信息 -->
                 <view class="goods-info">
                   <view class="goods-name">{{item.name}}</view>
                   <view class="goods-spec">{{item.specification || '无'}} | {{item.yolk || '无'}}</view>
-            <view class="goods-price">¥{{item.price}}</view>
+                  <view class="goods-status-row">
+                    <view class="status-tag supply-{{item.supplyStatus === '预售' ? 'presale' : 'spot'}}">{{item.supplyStatus || ''}}</view>
+                    <view class="status-tag source-{{item.sourceType ? 'yes' : 'no'}}">{{item.sourceType || ''}}</view>
+                    <view class="status-tag negotiate-{{item.negotiateStatus === '可议价' ? 'yes' : 'no'}}">{{item.negotiateStatus}}</view>
+                  </view>
+                  <view class="goods-footer">
+                    <view class="goods-region-bg">
+                      <view class="goods-region">{{item.region}}</view>
+                    </view>
+                    <view class="goods-reserved">已有{{item.reservedCount || 0}}人收藏</view>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+          
+          <view class="waterfall-column right-column">
+            <view 
+              class="goods-item {{item.isLong ? 'long-card' : 'short-card'}}" 
+              wx:for="{{rightColumnGoods}}" 
+              wx:key="id" 
+              data-item="{{item}}"
+              bindtap="viewGoodsDetail"
+            >
+              <view class="goods-card">
+                <view class="goods-image-container">
+                  <image 
+                    class="goods-image" 
+                    src="{{item.imageUrls && item.imageUrls.length > 0 ? item.imageUrls[0] : '/images/default-avatar.png'}}" 
+                    mode="aspectFill"
+                    bindtap="previewImage"
+                    data-item="{{item}}"
+                    data-index="0"
+                  ></image>
+                </view>
+                <view class="goods-info">
+                  <view class="goods-name">{{item.name}}</view>
+                  <view class="goods-spec">{{item.specification || '无'}} | {{item.yolk || '无'}}</view>
+                  <view class="goods-status-row">
+                    <view class="status-tag supply-{{item.supplyStatus === '预售' ? 'presale' : 'spot'}}">{{item.supplyStatus || ''}}</view>
+                    <view class="status-tag source-{{item.sourceType ? 'yes' : 'no'}}">{{item.sourceType || ''}}</view>
+                    <view class="status-tag negotiate-{{item.negotiateStatus === '可议价' ? 'yes' : 'no'}}">{{item.negotiateStatus}}</view>
+                  </view>
                   <view class="goods-footer">
+                    <view class="goods-region-bg">
                       <view class="goods-region">{{item.region}}</view>
+                    </view>
                     <view class="goods-reserved">已有{{item.reservedCount || 0}}人收藏</view>
                   </view>
                 </view>
               </view>
+            </view>
+          </view>
+        </view>
         
         <!-- 无商品时显示 -->
         <view wx:if="{{filteredGoods.length === 0}}" class="empty-goods">

pages/index/index.wxss

@@ -3,7 +3,7 @@ page {
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 50%, #e8e8e8 100%);
   margin: 0;
   padding: 0;
 }
@@ -16,7 +16,7 @@ page {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  background-color: #f5f7fa;
+  background-color: #f8f8f8;
 }
 
 /* 标题样式 */
@@ -192,70 +192,53 @@ page {
 
 .category-scroll {
   display: flex;
-  gap: 15rpx;
+  gap: 16rpx;
-  padding: 8rpx 15rpx;
+  padding: 12rpx 16rpx;
   white-space: nowrap;
   overflow-x: auto;
-  background-color: transparent;
+  background: rgba(255, 255, 255, 0.5);
-  border-radius: 10rpx;
+  backdrop-filter: blur(10rpx);
-  box-shadow: none;
+  -webkit-backdrop-filter: blur(10rpx);
+  border-radius: 40rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
+  border: 1rpx solid rgba(255, 255, 255, 0.5);
 }
 
-/* 蛋形样式 - 玻璃质感 */
 .egg-item {
   position: relative;
-  width: 80rpx;
+  padding: 16rpx 28rpx;
-  height: 100rpx;
+  background: rgba(255, 255, 255, 0.7);
-  background-color: rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(8rpx);
-  backdrop-filter: blur(10rpx);
+  -webkit-backdrop-filter: blur(8rpx);
-  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+  border-radius: 30rpx;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all 0.3s ease;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
-  border: 1rpx solid rgba(255, 255, 255, 0.5);
+  border: 1rpx solid rgba(200, 200, 200, 0.5);
   flex-shrink: 0;
 }
 
-/* 不同品种的颜色 */
-.egg-item:nth-child(2) { /* 粉壳 */
-  background-color: rgba(255, 182, 193, 0.3);
-  border-color: rgba(255, 182, 193, 0.7);
-}
-
-.egg-item:nth-child(3) { /* 红壳 */
-  background-color: rgba(255, 105, 180, 0.3);
-  border-color: rgba(255, 105, 180, 0.7);
-}
-
-.egg-item:nth-child(4) { /* 绿壳 */
-  background-color: rgba(144, 238, 144, 0.3);
-  border-color: rgba(144, 238, 144, 0.7);
-}
-
-.egg-item:nth-child(5) { /* 白壳 */
-  background-color: rgba(245, 245, 245, 0.5);
-  border-color: rgba(245, 245, 245, 0.8);
-}
-
 .egg-item.active {
-  background-color: rgba(22, 119, 255, 0.4);
+  background: linear-gradient(135deg, #1677ff 0%, #4096ff 100%);
-  border-color: rgba(22, 119, 255, 0.8);
+  color: white;
-  box-shadow: 0 4rpx 16rpx rgba(22, 119, 255, 0.3);
+  box-shadow: 0 4rpx 16rpx rgba(22, 119, 255, 0.35);
-  transform: scale(1.05);
+  border: 1rpx solid transparent;
+  transform: translateY(-2rpx);
 }
 
 .egg-inner {
-  font-size: 22rpx;
+  font-size: 26rpx;
-  color: #333;
+  color: #555;
-  font-weight: bold;
+  font-weight: 600;
   text-align: center;
+  white-space: nowrap;
 }
 
 .egg-item.active .egg-inner {
-  color: #1677ff;
+  color: #ffffff;
-  font-size: 24rpx;
+  font-size: 28rpx;
 }
 
 /* 侧边栏按钮样式 - 白色半透明毛玻璃质感 */
@@ -450,25 +433,105 @@ page {
 }
 
 .goods-list-container {
-  display: flex;
+  padding: 20rpx 24rpx;
-  flex-wrap: wrap;
-  gap: 20rpx;
-  justify-content: flex-start;
   padding-bottom: 20rpx;
 }
 
+.waterfall-container {
+  display: flex;
+  gap: 32rpx;
+  width: 100%;
+}
+
+.waterfall-column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.left-column {
+  align-items: flex-start;
+}
+
+.right-column {
+  align-items: flex-end;
+}
+
 .goods-item {
-  width: calc((100% - 20rpx) / 2);
+  width: 100%;
-  background-color: #f9f9f9;
+  border-radius: 24rpx;
-  border-radius: 10rpx;
   overflow: hidden;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-  transition: all 0.3s ease;
+  transform-style: preserve-3d;
+  perspective: 1000rpx;
+}
+
+.goods-card {
+  width: 100%;
+  border-radius: 20rpx;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.82);
+  backdrop-filter: blur(10rpx);
+  -webkit-backdrop-filter: blur(10rpx);
+  box-shadow: 
+    0 6rpx 24rpx rgba(0, 0, 0, 0.15),
+    0 0 0 1rpx rgba(0, 0, 0, 0.08),
+    inset 0 0 0 1rpx rgba(255, 255, 255, 0.95);
+  border: 2rpx solid rgba(200, 200, 200, 0.5);
+  display: flex;
+  flex-direction: column;
 }
 
 .goods-item:hover {
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
+  transform: translateY(-8rpx);
-  transform: translateY(-2rpx);
+  box-shadow: 
+    0 16rpx 40rpx rgba(0, 0, 0, 0.22),
+    0 0 0 2rpx rgba(0, 0, 0, 0.12),
+    inset 0 0 0 1rpx rgba(255, 255, 255, 1);
+}
+
+.goods-item:active {
+  transform: translateY(-4rpx);
+}
+
+.goods-item.long-card {
+  margin-bottom: 24rpx;
+}
+
+.goods-item.long-card .goods-info {
+  min-height: 200rpx;
+  padding: 24rpx;
+}
+
+.goods-item.short-card {
+  margin-bottom: 16rpx;
+}
+
+.goods-item.short-card .goods-info {
+  min-height: 140rpx;
+  padding: 16rpx;
+}
+
+.goods-item.short-card .goods-name {
+  -webkit-line-clamp: 1;
+  min-height: 40rpx;
+}
+
+.goods-item.short-card .goods-spec {
+  margin-bottom: 8rpx;
+}
+
+.goods-item.short-card .goods-price {
+  font-size: 32rpx;
+}
+
+.left-column .goods-item {
+  transform: translateZ(10rpx);
+}
+
+.right-column .goods-item {
+  transform: translateZ(-10rpx);
 }
 
 .goods-image-container {
@@ -476,6 +539,7 @@ page {
   width: 100%;
   padding-bottom: 100%;
   overflow: hidden;
+  background: rgba(0, 0, 0, 0.05);
 }
 
 .goods-image {
@@ -485,64 +549,159 @@ page {
   width: 100%;
   height: 100%;
   background-color: #eee;
+  transition: all 0.4s ease;
+}
+
+.goods-item:hover .goods-image {
+  transform: scale(1.05);
 }
 
 .goods-tag {
   position: absolute;
-  top: 10rpx;
+  top: 16rpx;
-  left: 10rpx;
+  left: 16rpx;
-  background-color: rgba(255, 90, 90, 0.8);
+  background: rgba(255, 90, 90, 0.85);
+  backdrop-filter: blur(8rpx);
   color: white;
-  font-size: 20rpx;
+  font-size: 22rpx;
-  padding: 5rpx 10rpx;
+  padding: 8rpx 16rpx;
-  border-radius: 15rpx;
+  border-radius: 20rpx;
   font-weight: bold;
+  box-shadow: 0 2rpx 8rpx rgba(255, 90, 90, 0.3);
+  border: 1rpx solid rgba(255, 255, 255, 0.3);
 }
 
 .goods-info {
-  padding: 15rpx;
+  padding: 20rpx;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(10rpx);
+  border-top: 1rpx solid rgba(255, 255, 255, 0.2);
 }
 
 .goods-name {
-  font-size: 26rpx;
+  font-size: 28rpx;
   font-weight: bold;
   color: #333;
-  margin-bottom: 10rpx;
+  margin-bottom: 12rpx;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   min-height: 60rpx;
+  line-height: 1.4;
+  text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
 }
 
 .goods-spec {
-  font-size: 22rpx;
+  font-size: 24rpx;
-  color: #999;
+  color: #666;
-  margin-bottom: 10rpx;
+  margin-bottom: 12rpx;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
 }
 
 .goods-price {
-  font-size: 32rpx;
+  font-size: 36rpx;
   font-weight: bold;
   color: #ff4d4f;
-  margin-bottom: 10rpx;
+  margin-bottom: 12rpx;
+  text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
+}
+
+.goods-status-row {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 8rpx;
+  margin-bottom: 12rpx;
+}
+
+.status-tag {
+  font-size: 20rpx;
+  padding: 4rpx 8rpx;
+  border-radius: 4rpx;
+  font-weight: 600;
+  display: inline-block;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.status-tag.supply-spot {
+  background: rgba(82, 196, 26, 0.15);
+  color: #389e0d;
+  border: 1rpx solid rgba(82, 196, 26, 0.5);
+}
+
+.status-tag.supply-presale {
+  background: rgba(255, 154, 28, 0.15);
+  color: #d46b08;
+  border: 1rpx solid rgba(255, 154, 28, 0.5);
+}
+
+.status-tag.auth-verified {
+  background: rgba(24, 144, 255, 0.15);
+  color: #096dd9;
+  border: 1rpx solid rgba(24, 144, 255, 0.5);
+}
+
+.status-tag.auth-unverified {
+  background: rgba(140, 140, 140, 0.15);
+  color: #595959;
+  border: 1rpx solid rgba(140, 140, 140, 0.5);
+}
+
+.status-tag.negotiate-yes {
+  background: rgba(114, 46, 209, 0.15);
+  color: #722ed1;
+  border: 1rpx solid rgba(114, 46, 209, 0.5);
+}
+
+.status-tag.source-yes {
+  background: rgba(24, 144, 255, 0.15);
+  color: #096dd9;
+  border: 1rpx solid rgba(24, 144, 255, 0.5);
+}
+
+.status-tag.negotiate-no {
+  background: rgba(180, 180, 180, 0.15);
+  color: #595959;
+  border: 1rpx solid rgba(180, 180, 180, 0.5);
 }
 
 .goods-footer {
   display: flex;
   justify-content: space-between;
-  font-size: 20rpx;
+  font-size: 22rpx;
-  color: #999;
+  color: #888;
+  margin-top: auto;
+  padding-top: 12rpx;
+  border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+  text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
+}
+
+.goods-region-bg {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(4rpx);
+  -webkit-backdrop-filter: blur(4rpx);
+  border-radius: 4rpx;
+  padding: 4rpx 12rpx;
+  border: 1.5rpx solid #1e3a6e;
+  box-shadow: 0 1rpx 3rpx rgba(30, 58, 110, 0.08);
 }
 
 .goods-region {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: #1e3a6e;
+  font-weight: 600;
+  font-size: 23rpx;
+  letter-spacing: 0.5rpx;
 }
 
 .goods-reserved {

project.private.config.json

@@ -1,6 +1,6 @@
 {
   "libVersion": "3.10.3",
-  "projectname": "New2",
+  "projectname": "Mini-New2",
   "setting": {
     "urlCheck": false,
     "coverView": true,