From 722dec025e7a71373eb4a3ad1d686d417cb6caea Mon Sep 17 00:00:00 2001 From: zoujing Date: Mon, 27 Apr 2026 15:48:11 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20tabs=20=E7=BB=93=E6=9E=84=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../images/selected_tabs_icon.png | Bin .../{FindTabs.vue => FindTabs/index.vue} | 73 +----------------- .../components/FindTabs/styles/index.scss | 69 +++++++++++++++++ src/pages/Discovery/index.vue | 2 +- 4 files changed, 72 insertions(+), 72 deletions(-) rename src/pages/Discovery/components/{ => FindTabs}/images/selected_tabs_icon.png (100%) rename src/pages/Discovery/components/{FindTabs.vue => FindTabs/index.vue} (56%) create mode 100644 src/pages/Discovery/components/FindTabs/styles/index.scss diff --git a/src/pages/Discovery/components/images/selected_tabs_icon.png b/src/pages/Discovery/components/FindTabs/images/selected_tabs_icon.png similarity index 100% rename from src/pages/Discovery/components/images/selected_tabs_icon.png rename to src/pages/Discovery/components/FindTabs/images/selected_tabs_icon.png diff --git a/src/pages/Discovery/components/FindTabs.vue b/src/pages/Discovery/components/FindTabs/index.vue similarity index 56% rename from src/pages/Discovery/components/FindTabs.vue rename to src/pages/Discovery/components/FindTabs/index.vue index 30d8476..5a724d5 100644 --- a/src/pages/Discovery/components/FindTabs.vue +++ b/src/pages/Discovery/components/FindTabs/index.vue @@ -48,75 +48,6 @@ const handleSwitch = (i) => { - diff --git a/src/pages/Discovery/components/FindTabs/styles/index.scss b/src/pages/Discovery/components/FindTabs/styles/index.scss new file mode 100644 index 0000000..31a33dc --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/pages/Discovery/index.vue b/src/pages/Discovery/index.vue index 479a46a..1ae6864 100644 --- a/src/pages/Discovery/index.vue +++ b/src/pages/Discovery/index.vue @@ -9,7 +9,7 @@