目录样式

src/App.vue

@@ -176,12 +176,14 @@ watch(
         <!-- 提取的顶部菜单栏与搜索功能 -->
         <div v-if="currentRoute === '/' && categoryLayers.length > 0" class="home-category-layer1-wrap">
           <div class="home-category-layer1-row">
-            <v-tabs :model-value="layerActiveValues[0]" class="home-tab-bar home-tab-bar--inline"  height="48"
-              @update:model-value="menuStore.onCategorySelect(0, $event)">
-              <v-tab v-for="item in categoryLayers[0]" :key="item.id" :value="item.id" :ripple="false" >
+            <div class="app-tab-bar" height="48" @update:model-value="menuStore.onCategorySelect(0, $event)">
+              <div v-for="item in categoryLayers[0]" class="app-tab-bar-item"
+                :class="{ 'app-tab-bar-item-active': item.id === layerActiveValues[0] }" :key="item.id"
+                :value="item.id"
+                @click="layerActiveValues[0] = item.id">
                 {{ item.label }}
-              </v-tab>
-            </v-tabs>
+              </div>
+            </div>
             <v-btn icon variant="text" class="home-search-btn" :aria-label="t('common.search')" @click="expandSearch">
               <v-icon size="24">mdi-magnify</v-icon>
             </v-btn>
@@ -356,7 +358,7 @@ watch(
   width: 100%;
 }
 
-.active {
+.login-active {
   font-weight: bold;
   text-decoration: underline;
 }
@@ -464,18 +466,20 @@ watch(
   align-items: center;
 }
 
-.home-tab-bar--inline {
+.app-tab-bar {
+  display: flex;
+  padding-left: 8px;
   flex: 1;
-  min-width: 0;
+  cursor: default;
+
+  .app-tab-bar-item {
+    padding: 0 8px;
+
   }
 
-.home-tab-bar--inline :deep(.v-tabs) {
-  height: 48px;
+  .app-tab-bar-item-active {
+    font-weight: bold;
   }
-
-.home-tab-bar--inline :deep(.v-tab) {
-  height: 48px;
-  padding: 0 8px 0 8px;
 }
 
 .home-category-layer1-actions {