修改tab

package-lock.json

@@ -16,7 +16,7 @@
         "query-string": "^7.1.1",
         "querystring": "^0.2.1",
         "swiper": "^8.4.4",
-        "vant": "^3.6.5",
+        "vant": "^3.6.11",
         "vue": "^3.2.45",
         "vue-router": "^4.1.6"
       },
@@ -4418,9 +4418,9 @@
       }
     },
     "node_modules/vant": {
-      "version": "3.6.5",
-      "resolved": "https://registry.npmjs.org/vant/-/vant-3.6.5.tgz",
-      "integrity": "sha512-TVTs5impkF6qPvCn+qhpcuNyxy0rCRA161JYkK5rFpKhwWftq4TOSTZAHGCW2kVFtrwl0Zp715GXEed/hxivYw==",
+      "version": "3.6.11",
+      "resolved": "https://registry.npmmirror.com/vant/-/vant-3.6.11.tgz",
+      "integrity": "sha512-ueEu4rOePQUoeP6mjuVHogmg3t05yejrYkFCG/NMWY2haOscvQTFGDVuUazmNdjgizqL1D9rH6xV0qy2aRWF9Q==",
       "dependencies": {
         "@vant/icons": "^1.8.0",
         "@vant/popperjs": "^1.2.1",
@@ -7931,9 +7931,9 @@
       }
     },
     "vant": {
-      "version": "3.6.5",
-      "resolved": "https://registry.npmjs.org/vant/-/vant-3.6.5.tgz",
-      "integrity": "sha512-TVTs5impkF6qPvCn+qhpcuNyxy0rCRA161JYkK5rFpKhwWftq4TOSTZAHGCW2kVFtrwl0Zp715GXEed/hxivYw==",
+      "version": "3.6.11",
+      "resolved": "https://registry.npmmirror.com/vant/-/vant-3.6.11.tgz",
+      "integrity": "sha512-ueEu4rOePQUoeP6mjuVHogmg3t05yejrYkFCG/NMWY2haOscvQTFGDVuUazmNdjgizqL1D9rH6xV0qy2aRWF9Q==",
       "requires": {
         "@vant/icons": "^1.8.0",
         "@vant/popperjs": "^1.2.1",

package.json

@@ -23,7 +23,7 @@
     "query-string": "^7.1.1",
     "querystring": "^0.2.1",
     "swiper": "^8.4.4",
-    "vant": "^3.6.5",
+    "vant": "^3.6.11",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },

src/main.ts

@@ -8,9 +8,9 @@ import ElementPlus from 'element-plus'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import 'element-plus/dist/index.css'
 
-import { Overlay,ActionSheet} from 'vant';
+import { Overlay, ActionSheet, Tab, Tabs } from 'vant'
 // 2. 引入组件样式
-import 'vant/lib/index.css';
+import 'vant/lib/index.css'
 
 // 公共css
 import './assets/css/base.css'
@@ -19,10 +19,8 @@ import AppCard from '@/components/base/AppCard.vue'
 import AppContainer from '@/components/base/AppContainer.vue'
 
 import modules from './modules'
- 
-const app = createApp(App)
-
 
+const app = createApp(App)
 
 // 注册公共组件
 app.component('AppCard', AppCard).component('AppContainer', AppContainer)
@@ -31,6 +29,8 @@ app.component('AppCard', AppCard).component('AppContainer', AppContainer)
 modules({ router })
 app.use(Overlay)
 app.use(ActionSheet)
+app.use(Tab)
+app.use(Tabs)
 app.use(createPinia())
 app.use(router)
 app.use(ElementPlus, { locale: zhCn })

src/modules/shop/views/Index.vue

 <script lang="ts" setup>
 import CourseList from '../components/CourseList.vue'
 import { useShopStore } from '@/stores/shop'
+import { useDevice } from '@/composables/useDevice'
+const { mobile } = useDevice()
 const shopStore = useShopStore()
 const handleTabClick = (tab: any) => {
   if (tab.index === '4') {
@@ -11,7 +13,7 @@ const handleTabClick = (tab: any) => {
 </script>
 
 <template>
-  <div class="main_shop">
+  <div class="main_shop" v-if="!mobile">
     <img src="https://webapp-pub.ezijing.com/project_online/fi/shop_banner.jpg" class="shop_banner" />
     <div class="shop_con">
       <div class="con_tab">
@@ -26,6 +28,14 @@ const handleTabClick = (tab: any) => {
       </div>
     </div>
   </div>
+  <div class="main_shop" v-else>
+    <img src="https://webapp-pub.ezijing.com/project_online/fi/shop_banner.jpg" class="shop_banner" />
+    <van-tabs>
+      <van-tab :title="item.label" v-for="(item, index) in shopStore.filters" :key="index" lazy>
+        <CourseList :type="item.value" :courseList="shopStore.shopList" :key="index" />
+      </van-tab>
+    </van-tabs>
+  </div>
 </template>
 <style lang="scss" scoped>
 .is-pc {
@@ -109,12 +119,15 @@ const handleTabClick = (tab: any) => {
     font-weight: 500;
     line-height: 34px;
     color: #eda020;
-    padding: 0 0.1rem !important;
+    padding: 0 0.4rem !important;
     box-sizing: border-box;
   }
   :deep(.el-tabs__nav-scroll) {
     padding: 0 0.5rem;
   }
+  :deep(.van-tabs__nav--line) {
+    overflow-x: scroll;
+  }
 }
 
 :deep(.el-tabs__nav-scroll) {
@@ -142,17 +155,29 @@ const handleTabClick = (tab: any) => {
 }
 :deep(.van-tab--active) {
   .van-tab__text {
-    color: #c1ab85 !important;
+    color: #eda020 !important;
     font-size: 0.28rem;
   }
 }
 :deep(.van-tab) {
+  padding: 0 0.2rem;
+
   .van-tab__text {
     color: #333333;
     font-size: 0.28rem;
   }
+  .van-tabs__nav {
+    background: none;
+  }
 }
 :deep(.van-tabs__line) {
-  background: #c1ab85 !important;
+  background: #eda023 !important;
+}
+:deep(.van-tab__panel) {
+  margin-top: 0.3rem;
+}
+:deep(.van-tabs__nav--line) {
+  overflow: scroll;
+  white-space: nowrap;
 }
 </style>