'货盘页'

pages/products/components/CountryBar.vue

@@ -1,6 +1,6 @@
 <template>
-  <!-- 国家选择条 - 横向滚动 -->
-  <scroll-view scroll-x class="country-bar" show-scrollbar="false">
+  <!-- 国家选择条 - 换行布局(对应 Figma 1511:195) -->
+  <view class="country-bar">
     <view class="country-inner">
       <view
         class="country-item"
@@ -13,7 +13,7 @@
         <text class="country-name">{{ item.name }}</text>
       </view>
     </view>
-  </scroll-view>
+  </view>
 </template>
 
 <script>
@@ -38,37 +38,44 @@ export default {
 </script>
 
 <style scoped>
+/* 国家筛选条 - 白底 + 底部 1px #EEEEEE 边框 */
 .country-bar {
   width: 100%;
-  white-space: nowrap;
   background: #ffffff;
-  padding: 16rpx 0;
-  border-bottom: 2rpx solid #f5f5f5;
+  border-bottom: 1rpx solid #eeeeee;
+  padding: 12rpx 20rpx;
+  box-sizing: border-box;
 }
+/* 换行布局(不用横向滚动) */
 .country-inner {
-  display: inline-flex;
-  gap: 16rpx;
-  padding: 0 32rpx;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20rpx;
 }
+/* 单个标签 - padding 4px 10px 圆角 60px */
 .country-item {
-  flex-shrink: 0;
   display: flex;
   align-items: center;
-  gap: 10rpx;
-  padding: 12rpx 24rpx;
-  background: #f5f5f5;
-  border-radius: 30rpx;
+  gap: 8rpx;
+  padding: 8rpx 20rpx;
+  background: #f7f7f7;
+  border-radius: 60rpx;
   font-size: 24rpx;
-  color: #666666;
+  color: #000000;
+  line-height: 1.2;
 }
+/* 选中态 - #FFF3EB 背景 + 0.5px 橙色边框 + 橙色文字 */
 .country-item.active {
-  background: #ff6800;
-  color: #ffffff;
+  background: #fff3eb;
+  border: 1rpx solid #ff6800;
+  color: #ff6800;
 }
 .country-flag {
-  font-size: 28rpx;
-}
-.country-name {
   font-size: 24rpx;
 }
+/* 文字 12px Medium */
+.country-name {
+  font-size: 24rpx;
+  font-weight: 500;
+}
 </style>