'首页和商品详情页初稿'

2026-08-21 19:02:35 +08:00
parent 75135effde
commit d53bde57b6
29 changed files with 3694 additions and 3085 deletions
@@ -0,0 +1,171 @@
+<template>
+  <!-- 全球POD货盘 -->
+  <view class="pod-section">
+    <text class="section-title">全球POD货盘</text>
+
+    <!-- 国家 tab 横向滚动 -->
+    <scroll-view scroll-x class="country-scroll" show-scrollbar="false">
+      <view class="country-list">
+        <view
+          class="country-tab"
+          :class="{ active: activeCountry === item.id }"
+          v-for="(item, index) in countries"
+          :key="index"
+          @tap="onCountryTap(item.id)"
+        >
+          {{ item.flag }} {{ item.name }}
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 产品网格 2列 -->
+    <view class="pod-grid">
+      <view
+        class="pod-card"
+        v-for="(item, index) in products"
+        :key="index"
+        @tap="onProductTap(item)"
+      >
+        <view class="pod-img-wrap">
+          <image class="pod-img" :src="item.image" mode="aspectFit"></image>
+        </view>
+        <text class="pod-name">{{ item.name }}</text>
+      </view>
+    </view>
+
+    <!-- 更多产品 -->
+    <view class="more-products" @tap="onMoreTap">
+      <text class="more-text">更多产品</text>
+      <text class="more-arrow">→</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'PodCatalog',
+  props: {
+    countries: {
+      type: Array,
+      default: () => []
+    },
+    products: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      activeCountry: 'us'
+    }
+  },
+  methods: {
+    onCountryTap(id) {
+      this.activeCountry = id
+      this.$emit('countryChange', id)
+    },
+    onProductTap(item) {
+      this.$emit('productTap', item)
+    },
+    onMoreTap() {
+      this.$emit('moreTap')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pod-section {
+  width: 100%;
+  padding: 70rpx 0 0 0;
+  background: #ffffff;
+}
+
+/* 区块标题 - 设计稿 20px/400/#1a1a1a */
+.section-title {
+  display: block;
+  padding: 0 32rpx;
+  font-size: 38rpx;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin-bottom: 30rpx;
+}
+
+/* 国家 tab - 设计稿 13px/400, 选中 #ffffff 未选中 #000000 */
+.country-scroll {
+  width: 100%;
+  white-space: nowrap;
+  margin-bottom: 36rpx;
+}
+.country-list {
+  display: inline-flex;
+  gap: 16rpx;
+  padding: 0 32rpx;
+}
+.country-tab {
+  flex-shrink: 0;
+  padding: 10rpx 24rpx;
+  background: #f5f5f5;
+  border-radius: 40rpx;
+  font-size: 25rpx;
+  color: #1a1a1a;
+}
+.country-tab.active {
+  background: #ff6800;
+  color: #ffffff;
+  font-weight: 500;
+}
+
+/* 产品网格 - 2列 space-between 兼容小程序 */
+.pod-grid {
+  padding: 0 32rpx;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.pod-card {
+  width: 330rpx;
+  background: #f8f8f8;
+  border-radius: 12rpx;
+  margin-bottom: 20rpx;
+  overflow: hidden;
+}
+.pod-img-wrap {
+  width: 100%;
+  height: 340rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f0f0f0;
+}
+.pod-img {
+  width: 100%;
+  height: 100%;
+}
+/* 产品名 - 设计稿 16px/400/#000000 */
+.pod-name {
+  display: block;
+  padding: 16rpx 20rpx 20rpx;
+  font-size: 26rpx;
+  color: #1a1a1a;
+  line-height: 1.4;
+  background: #ffffff;
+}
+
+/* 更多产品 - 设计稿 12px/400/#ff6800 居中 */
+.more-products {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+  padding: 40rpx 0 20rpx;
+}
+.more-text {
+  font-size: 24rpx;
+  color: #ff6800;
+}
+.more-arrow {
+  font-size: 24rpx;
+  color: #ff6800;
+}
+</style>