✨ feat(tag): 添加热销商品标签

src/components/hot-tags/hot-tags.vue

@@ -0,0 +1,58 @@
+<template>
+  <view class="hot-tags-container">
+    <view
+      class="hot-tag-item"
+      v-for="(tag, i) in tags"
+      :class="{ active: currentTag === i }"
+      @click="currentTag = i"
+      :key="tag"
+    >
+      {{ tag }}
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+  defineOptions({
+    name: 'HotTags',
+  })
+
+  const currentTag = defineModel<number>('currentTag')
+  const tags = ref<string[]>(['All', 'Shoes', 'Fast Food', 'Snack', 'Clothing'])
+</script>
+
+<style lang="scss" scoped>
+  .hot-tags-container {
+    display: flex;
+    width: 100%;
+    margin: 24rpx 0;
+    overflow-x: scroll;
+    overflow-y: hidden;
+
+    &::-webkit-scrollbar {
+      display: none; /* Chrome/Safari */
+    }
+
+    .hot-tag-item {
+      box-sizing: border-box;
+      height: 64rpx;
+      padding: 0 24rpx;
+      margin-right: 24rpx;
+      font-family: 'PingFang SC';
+      font-size: 28rpx;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 64rpx;
+      color: $shop-text-3;
+      white-space: nowrap;
+      border: 2rpx solid $shop-bg-line;
+      border-radius: 32rpx;
+
+      &.active {
+        color: $shop-white;
+        background-color: $shop-primary;
+        border: 2rpx solid $shop-primary;
+      }
+    }
+  }
+</style>

src/pages/index/index.vue

@@ -60,12 +60,16 @@
           <image class="w-9rpx" src="@/static/images/right.svg" mode="widthFix"></image>
         </view>
       </view>
+      <HotTags v-model:current-tag="currentTag"></HotTags>
+      <ProductList></ProductList>
     </view>
   </view>
   <tabbar />
 </template>
 
 <script lang="ts" setup>
+  import HotTags from '@/components/hot-tags/hot-tags.vue'
+  import ProductList from '@/components/product-list/product-list.vue'
   import { t } from '@/locale'
   import CateImg1 from '@/static/temp/cate-1.png'
   import CateImg2 from '@/static/temp/cate-2.png'
@@ -77,6 +81,7 @@
   })
 
   const current = ref(0)
+  const currentTag = ref(0)
 
   const swiperList = ref([
     'https://t.xiaoyaotravel.com/image/TourImComplait/messageContent/696b679508664bb4bceb6cc6b06d0cdc.png',