'首页样式'

pages/index/components/PodCatalog.vue

@@ -1,6 +1,7 @@
 <template>
-  <!-- 全球POD货盘 -->
+  <!-- 全球POD货盘 - Figma 1455:1462 -->
   <view class="pod-section">
+    <!-- 区块标题 - 居中 20px Heavy #1A1A1A -->
     <text class="section-title">全球POD货盘</text>
 
     <!-- 国家 tab 横向滚动 -->
@@ -12,9 +13,7 @@
           v-for="(item, index) in countries"
           :key="index"
           @tap="onCountryTap(item.id)"
-        >
-          {{ item.flag }} {{ item.name }}
-        </view>
+        >{{ item.name }}</view>
       </view>
     </scroll-view>
 
@@ -33,10 +32,10 @@
       </view>
     </view>
 
-    <!-- 更多产品 -->
+    <!-- 更多产品 - 按钮带箭头 -->
     <view class="more-products" @tap="onMoreTap">
       <text class="more-text">更多产品</text>
-      <text class="more-arrow">→</text>
+      <image class="more-arrow" src="/static/icons/home/arrow_more.svg" mode="aspectFit"></image>
     </view>
   </view>
 </template>
@@ -75,97 +74,118 @@ export default {
 </script>
 
 <style scoped>
+/* 区块 - 灰色背景 #F8F8F8 */
 .pod-section {
   width: 100%;
-  padding: 70rpx 0 0 0;
-  background: #ffffff;
+  padding: 96rpx 0 0 0;
+  background: #f8f8f8;
+  box-sizing: border-box;
 }
 
-/* 区块标题 - 设计稿 20px/400/#1a1a1a */
+/* 区块标题 - 20px Heavy #1A1A1A 居中 */
 .section-title {
   display: block;
-  padding: 0 32rpx;
-  font-size: 38rpx;
-  font-weight: 700;
+  text-align: center;
+  font-size: 40rpx;
+  font-weight: 900;
   color: #1a1a1a;
-  margin-bottom: 30rpx;
+  line-height: 1.45;
+  margin-bottom: 40rpx;
 }
 
-/* 国家 tab - 设计稿 13px/400, 选中 #ffffff 未选中 #000000 */
+/* 国家 tab - 13px Medium padding 6px 14px 圆角6px */
 .country-scroll {
   width: 100%;
   white-space: nowrap;
-  margin-bottom: 36rpx;
+  padding: 0 20rpx;
+  box-sizing: border-box;
+  margin-bottom: 40rpx;
 }
 .country-list {
   display: inline-flex;
-  gap: 16rpx;
-  padding: 0 32rpx;
+  gap: 20rpx;
 }
 .country-tab {
   flex-shrink: 0;
-  padding: 10rpx 24rpx;
-  background: #f5f5f5;
-  border-radius: 40rpx;
-  font-size: 25rpx;
-  color: #1a1a1a;
+  padding: 12rpx 28rpx;
+  background: #ffffff;
+  border-radius: 12rpx;
+  font-size: 26rpx;
+  font-weight: 500;
+  color: #000000;
+  line-height: 1.2;
 }
 .country-tab.active {
   background: #ff6800;
   color: #ffffff;
-  font-weight: 500;
 }
 
-/* 产品网格 - 2列 space-between 兼容小程序 */
+/* 产品网格 - 自适应2列(避免宽度+间距同时固定导致挤压) */
 .pod-grid {
-  padding: 0 32rpx;
+  padding: 0 20rpx;
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
+  gap: 20rpx;
 }
 .pod-card {
-  width: 330rpx;
-  background: #f8f8f8;
-  border-radius: 12rpx;
+  flex: 1 1 calc(50% - 10rpx);
+  min-width: 0;
+  background: #ffffff;
+  border-radius: 16rpx;
   margin-bottom: 20rpx;
   overflow: hidden;
-}
-.pod-img-wrap {
-  width: 100%;
-  height: 340rpx;
+  box-sizing: border-box;
+  padding: 16rpx;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #f0f0f0;
+  flex-direction: column;
+}
+/* 内层图片 - 1:1 正方形(用 padding-bottom 撑出比例,兼容小程序) */
+.pod-img-wrap {
+  position: relative;
+  width: 100%;
+  padding-bottom: 100%;
+  background: #f2f2f2;
+  border-radius: 8rpx;
+  overflow: hidden;
 }
 .pod-img {
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
 }
-/* 产品名 - 设计稿 16px/400/#000000 */
+/* 产品名 - 16px Medium #000000 居中 */
 .pod-name {
   display: block;
-  padding: 16rpx 20rpx 20rpx;
-  font-size: 26rpx;
-  color: #1a1a1a;
-  line-height: 1.4;
-  background: #ffffff;
+  text-align: center;
+  margin-top: 26rpx;
+  font-size: 32rpx;
+  font-weight: 500;
+  color: #000000;
+  line-height: 1.2;
 }
 
-/* 更多产品 - 设计稿 12px/400/#ff6800 居中 */
+/* 更多产品按钮 - padding 10px 30px 圆角8px */
 .more-products {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8rpx;
-  padding: 40rpx 0 20rpx;
+  margin: 24rpx auto 0;
+  padding: 20rpx 60rpx;
+  background: transparent;
+  border-radius: 16rpx;
+  width: fit-content;
 }
 .more-text {
   font-size: 24rpx;
+  font-weight: 500;
   color: #ff6800;
+  line-height: 1.2;
 }
 .more-arrow {
-  font-size: 24rpx;
-  color: #ff6800;
+  width: 24rpx;
+  height: 24rpx;
 }
 </style>