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

2026-08-21 19:02:35 +08:00
parent 75135effde
commit d53bde57b6
29 changed files with 3694 additions and 3085 deletions
@@ -0,0 +1,74 @@
+<template>
+  <!-- 国家选择条 - 横向滚动 -->
+  <scroll-view scroll-x class="country-bar" show-scrollbar="false">
+    <view class="country-inner">
+      <view
+        class="country-item"
+        :class="{ active: selectedId === item.id }"
+        v-for="(item, index) in list"
+        :key="index"
+        @tap="selectItem(item)"
+      >
+        <text class="country-flag">{{ item.flag }}</text>
+        <text class="country-name">{{ item.name }}</text>
+      </view>
+    </view>
+  </scroll-view>
+</template>
+
+<script>
+export default {
+  name: 'CountryBar',
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    },
+    selectedId: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  methods: {
+    selectItem(item) {
+      this.$emit('select', item.id)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.country-bar {
+  width: 100%;
+  white-space: nowrap;
+  background: #ffffff;
+  padding: 16rpx 0;
+  border-bottom: 2rpx solid #f5f5f5;
+}
+.country-inner {
+  display: inline-flex;
+  gap: 16rpx;
+  padding: 0 32rpx;
+}
+.country-item {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 10rpx;
+  padding: 12rpx 24rpx;
+  background: #f5f5f5;
+  border-radius: 30rpx;
+  font-size: 24rpx;
+  color: #666666;
+}
+.country-item.active {
+  background: #ff6800;
+  color: #ffffff;
+}
+.country-flag {
+  font-size: 28rpx;
+}
+.country-name {
+  font-size: 24rpx;
+}
+</style>