feat

lxf

2025-04-18 66a33e936d39ec4db7fdffed5d646e044ccc43e9

 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;
    }

}