inkreach-uni/pages/index/components/PodCatalog.vue

<template>
  <!-- 全球POD货盘 - Figma 1455:1462 -->
  <view class="pod-section">
    <!-- 区块标题 - 居中 20px Heavy #1A1A1A -->
    <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.name }}</view>
      </view>
    </scroll-view>

    <!-- 产品网格 2列 -->
    <view class="pod-grid" v-if="products.length > 0">
      <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="pod-empty" v-else>
      <text class="empty-icon">📦</text>
      <text class="empty-text">暂无商品</text>
    </view>

    <!-- 更多产品 - 按钮带箭头 -->
    <view class="more-products" @tap="onMoreTap">
      <text class="more-text">更多产品</text>
      <image class="more-arrow" src="/static/icons/home/arrow_more.svg" mode="aspectFit"></image>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PodCatalog',
  props: {
    countries: {
      type: Array,
      default: () => []
    },
    products: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeCountry: ''
    }
  },
  methods: {
    onCountryTap(id) {
      this.activeCountry = id
      this.$emit('countryChange', id)
    },
    onProductTap(item) {
      this.$emit('productTap', item)
    },
    onMoreTap() {
      this.$emit('moreTap')
    }
  }
}
</script>

<style scoped>
/* 区块 - 灰色背景 #F8F8F8
   上下留白对称：顶部标题距离区块上沿 96rpx，底部「更多产品」距离区块下沿也保持同区块背景延续
   因此这里统一用 padding: 96rpx 0 40rpx 0，让卡片底部→按钮→区块底部都在同一块灰色背景里 */
.pod-section {
  width: 100%;
  padding: 96rpx 0 40rpx 0;
  background: #f8f8f8;
  box-sizing: border-box;
}

/* 区块标题 - 20px Heavy #1A1A1A 居中 */
.section-title {
  display: block;
  text-align: center;
  font-size: 40rpx;
  font-weight: 900;
  color: #1a1a1a;
  line-height: 1.45;
  margin-bottom: 40rpx;
}

/* 国家 tab - 13px Medium padding 6px 14px 圆角6px */
.country-scroll {
  width: 100%;
  white-space: nowrap;
  padding: 0 20rpx;
  box-sizing: border-box;
  margin-bottom: 40rpx;
}
.country-list {
  display: inline-flex;
  gap: 20rpx;
}
.country-tab {
  flex-shrink: 0;
  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;
}

/* 产品网格 - 自适应2列(避免宽度+间距同时固定导致挤压) */
.pod-grid {
  padding: 0 20rpx;
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}
.pod-card {
  flex: 1 1 calc(50% - 10rpx);
  min-width: 0;
  background: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-sizing: border-box;
  padding: 16rpx;
  display: flex;
  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 Medium #000000 居中 */
.pod-name {
  display: block;
  text-align: center;
  margin-top: 26rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #000000;
  line-height: 1.2;
}

/* 更多产品按钮 - 与产品网格底部保持 20rpx，上方下方视觉对称
   按钮本身无背景，属于灰色 #F8F8F8 区块背景的一部分 */
.more-products {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  margin: 20rpx 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 {
  width: 24rpx;
  height: 24rpx;
}

/* 空状态 */
.pod-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 0;
}
.empty-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}
.empty-text {
  font-size: 26rpx;
  color: #999999;
}
</style>