样式修改

lxf

2025-05-19 45190f969dd8c7d3d2c6e366694f0dadc5ea07e8

 src/components/ex-tabs/index.vue

@@ -1,21 +1,22 @@
<template>
    <div class="ex-tabs flex">
        <div class="ex-tab" v-for="(item, index) in listArr" :key="index" @click="changeTab(index)"
            :class="active == index ? 'active' : ''">
    <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 class="hx"></div> -->
        </div>
    </div>
</template>

<script>
export default {
    props: {

    },
    components: {

    },
  props: {},
  components: {},
    data() {
        return {
            active: 0,
@@ -24,21 +25,21 @@
                //     name: this.$t('热门')
                // },
                {
                    name: this.$t('涨幅榜')
          name: this.$t("涨幅榜"),
                },
                {
                    name: this.$t('跌幅榜')
          name: this.$t("跌幅榜"),
                },
                // {
                //     name: this.$t('24h成交额')
                // }
            ],
        }
    };
    },
    methods: {
        changeTab(index) {
            this.active = index;
            this.$emit('tabs', index)
      this.$emit("tabs", index);
        },
    },
    activated() {
@@ -47,26 +48,25 @@
            //     name: this.$t('热门')
            // },
            {
                name: this.$t('涨幅榜')
        name: this.$t("涨幅榜"),
            },
            {
                name: this.$t('跌幅榜')
        name: this.$t("跌幅榜"),
            },
            // {
            //     name: this.$t('24h成交额')
            // }
        ]
    ];
    },
}
};
</script>

<style lang="scss" scoped>

.ex-tabs {
    font-size: 28px;
    display: flex;
   margin: 0 30px;
   border-bottom: 2px solid #F2F2F2 !important;
  //   border-bottom: 2px solid #f2f2f2 !important;
    padding-top: 22px;
    // justify-content: center;
    // align-items: center;
@@ -74,15 +74,15 @@
    .ex-tab {
        // flex: 1;
      min-width:150px;
      margin-right: 35px;
    // margin-right: 35px;
        text-align: center;
        padding: 18px 0px;
        border-radius: 4px;
        color: #787E8C;
    color: #787e8c;
      position: relative;
        @include themify() {
            border-bottom: 2px solid transparent !important;
        }
    // @include themify() {
    //   border-bottom: 2px solid transparent !important;
    // }
      // .hx{
      //    width: 20px;
      //    height: 2px;
@@ -94,31 +94,33 @@

.ex-tabs .active {
   min-width:150px;
    margin-right: 35px;
  //   margin-right: 35px;
    text-align: center;
    padding: 18px 0px;
    border-radius: 4px;
    color: #787E8C;
  //   color: #787e8c;
    position: relative;
    @include themify() {
        border-bottom: 2px solid transparent !important;
      color: themed("text_color") !important;
    }
  color: #f7b328 !important;
  font-size: 38px;
  font-weight: 700;
  //   @include themify() {
  // border-bottom: 2px solid transparent !important;
  // color: themed("text_color") !important;
  //   }
   .hx{
      width: 45px;
      height: 2px;
      position: absolute;
      background-color: #2B64FB;
    background-color: #2b64fb;
      left: 35%;
      bottom: -8px;
   }
    @include themify() {
  //   @include themify() {
   // width: 20px;
      // height: 2px;
      // position: absolute;
      // background-color: #2B64FB;
        // border-bottom: 2px solid themed("color_main") !important;
    }

  //   }
}
</style>