From 66a33e936d39ec4db7fdffed5d646e044ccc43e9 Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Fri, 18 Apr 2025 10:44:39 +0800
Subject: [PATCH] feat
---
src/components/ex-tabs/index.vue | 57 ++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 44 insertions(+), 13 deletions(-)
diff --git a/src/components/ex-tabs/index.vue b/src/components/ex-tabs/index.vue
index 4356c5d..46c450a 100644
--- a/src/components/ex-tabs/index.vue
+++ b/src/components/ex-tabs/index.vue
@@ -3,6 +3,7 @@
<div class="ex-tab" v-for="(item, index) in listArr" :key="index" @click="changeTab(index)"
:class="active == index ? 'active' : ''">
{{ item.name }}
+ <div class="hx"></div>
</div>
</div>
</template>
@@ -19,9 +20,9 @@
return {
active: 0,
listArr: [
- {
- name: this.$t('热门')
- },
+ // {
+ // name: this.$t('热门')
+ // },
{
name: this.$t('涨幅榜')
},
@@ -42,9 +43,9 @@
},
activated() {
this.listArr = [
- {
- name: this.$t('热门')
- },
+ // {
+ // name: this.$t('热门')
+ // },
{
name: this.$t('涨幅榜')
},
@@ -60,33 +61,63 @@
</script>
<style lang="scss" scoped>
+
.ex-tabs {
font-size: 28px;
display: flex;
+ margin: 0 30px;
+ border-bottom: 2px solid #F2F2F2 !important;
padding-top: 22px;
- justify-content: center;
- align-items: center;
+ // justify-content: center;
+ // align-items: center;
.ex-tab {
- flex: 1;
+ // flex: 1;
+ min-width:150px;
+ margin-right: 35px;
text-align: center;
padding: 18px 0px;
border-radius: 4px;
color: #787E8C;
-
+ position: relative;
@include themify() {
border-bottom: 2px solid transparent !important;
}
+ // .hx{
+ // width: 20px;
+ // height: 2px;
+ // position: absolute;
+ // background-color: #2B64FB;
+ // }
}
}
.ex-tabs .active {
+ min-width:150px;
+ margin-right: 35px;
+ text-align: center;
+ padding: 18px 0px;
+ border-radius: 4px;
+ color: #787E8C;
+ position: relative;
@include themify() {
- color: themed("text_color") !important;
+ border-bottom: 2px solid transparent !important;
+ color: themed("text_color") !important;
}
-
+ .hx{
+ width: 45px;
+ height: 2px;
+ position: absolute;
+ background-color: #2B64FB;
+ left: 35%;
+ bottom: -8px;
+ }
@include themify() {
- border-bottom: 2px solid themed("color_main") !important;
+ // width: 20px;
+ // height: 2px;
+ // position: absolute;
+ // background-color: #2B64FB;
+ // border-bottom: 2px solid themed("color_main") !important;
}
}
--
Gitblit v1.9.3