'颜色尺码价格联动'

pages/products/components/CountryBar.vue

@@ -9,7 +9,8 @@
         :key="index"
         @tap="selectItem(item)"
       >
-        <text class="country-flag">{{ item.flag }}</text>
+        <!-- 国家图标(18x18 圆形,来自后端 countryIcon 拼接 BASE_URL) -->
+        <image class="country-icon" :src="item.icon" mode="aspectFill"></image>
         <text class="country-name">{{ item.name }}</text>
       </view>
     </view>
@@ -38,7 +39,8 @@ export default {
 </script>
 
 <style scoped>
-/* 国家筛选条 - 白底 + 底部 1px #EEEEEE 边框 */
+/* 国家筛选条 - 白底 + 底部 1px #EEEEEE 边框
+   Figma: Country Filter Bar 1511:195, y=6 起始, 行高约 31px(padding 6+6) */
 .country-bar {
   width: 100%;
   background: #ffffff;
@@ -46,36 +48,45 @@ export default {
   padding: 12rpx 20rpx;
   box-sizing: border-box;
 }
-/* 换行布局(不用横向滚动) */
+/* 换行布局 - 行间距 8px(未选中态 y=37-6=31px; 第二行 y=37) */
 .country-inner {
   display: flex;
   flex-wrap: wrap;
-  gap: 20rpx;
+  row-gap: 16rpx;
+  column-gap: 20rpx;
 }
-/* 单个标签 - padding 4px 10px 圆角 60px */
+/* 单个标签 - padding 4px 10px 圆角 60px gap 10px Figma */
 .country-item {
   display: flex;
   align-items: center;
-  gap: 8rpx;
-  padding: 8rpx 20rpx;
+  gap: 20rpx; /* 10px gap */
+  padding: 8rpx 20rpx; /* 4px 10px */
   background: #f7f7f7;
   border-radius: 60rpx;
-  font-size: 24rpx;
-  color: #000000;
   line-height: 1.2;
+  border: 1rpx solid transparent;
+  box-sizing: border-box;
 }
-/* 选中态 - #FFF3EB 背景 + 0.5px 橙色边框 + 橙色文字 */
+/* 选中态 - #FFF3EB 背景 + 0.5px 橙色边框 + 边框宽度 0.5px Figma */
 .country-item.active {
   background: #fff3eb;
-  border: 1rpx solid #ff6800;
+  border-color: #ff6800;
+}
+.country-item.active .country-name {
   color: #ff6800;
 }
-.country-flag {
-  font-size: 24rpx;
+/* 国家图标 - Figma 18x13 / 18x14 矩形, 圆角 2px,不是圆形 */
+.country-icon {
+  width: 36rpx;
+  height: 26rpx;
+  border-radius: 4rpx; /* 2px */
+  flex-shrink: 0;
+  display: block;
 }
 /* 文字 12px Medium */
 .country-name {
   font-size: 24rpx;
   font-weight: 500;
+  color: #000000;
 }
 </style>