feat: tabs 结构调整

src/pages/Discovery/components/FindTabs/index.vue

@@ -48,75 +48,6 @@ const handleSwitch = (i) => {
 
 </script>
 
-<style scoped>
-.find-tabs-wrapper {
-  width: 100%;
-  background-color: transparent;
-}
-
-.tabs-scroll {
-  width: 100%;
-} 
-
-.tabs-list {
-  display: flex;
-  align-items: flex-end;
-  height: 50px;
-  gap: 16px;
-  flex-wrap: nowrap;
-  padding: 0 12px;
-}
-
-.tab-item {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 50px;
-  box-sizing: border-box;
-  flex: 0 0 auto;
-}
-
-.tab-item:last-child {
-  margin-right: 12px;
-}
-
-.tab-content {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 50px;
-}
-
-.tab-label {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.tab-text {
-  font-size: 20px;
-  color: rgba(128,140,153,0.9);
-  z-index: 5;
-  padding: 0 4px;
-  line-height: 1;
-}
-
-.tab-item.active .tab-text {
-  color: #0b0b0b;
-  font-weight: 800;
-}
-
-.tab-indicator {
-  position: absolute;
-  bottom: -6px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 56px;
-  height: auto;
-  z-index: 6;
-}
-
+<style lang="scss" scoped>
+@import "./styles/index.scss";
 </style>

src/pages/Discovery/components/FindTabs/styles/index.scss

@@ -0,0 +1,69 @@
+.find-tabs-wrapper {
+  width: 100%;
+  background-color: transparent;
+}
+
+.tabs-scroll {
+  width: 100%;
+}
+
+.tabs-list {
+  display: flex;
+  align-items: flex-end;
+  height: 50px;
+  gap: 16px;
+  flex-wrap: nowrap;
+  padding: 0 12px;
+}
+
+.tab-item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  box-sizing: border-box;
+  flex: 0 0 auto;
+}
+
+.tab-item:last-child {
+  margin-right: 12px;
+}
+
+.tab-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+}
+
+.tab-label {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tab-text {
+  font-size: 20px;
+  color: rgba(128, 140, 153, 0.9);
+  z-index: 5;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+.tab-item.active .tab-text {
+  color: #0b0b0b;
+  font-weight: 800;
+}
+
+.tab-indicator {
+  position: absolute;
+  bottom: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 56px;
+  height: auto;
+  z-index: 6;
+}

src/pages/Discovery/index.vue

@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from "vue";
-import FindTabs from "./components/FindTabs.vue";
+import FindTabs from "./components/FindTabs/index.vue";
 
 const activeIndex = ref(0);