翻译

lxf

2025-07-16 fcb00a66b4053550b473a29d7299c7a4737eea75

 src/components/ex-tabs/index.vue

@@ -1,124 +1,126 @@
<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' : ''">
            {{ item.name }}
         <div class="hx"></div>
        </div>
  <div class="ex-tabs flex">
    <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>

<script>
export default {
    props: {

    },
    components: {

    },
    data() {
        return {
            active: 0,
            listArr: [
                // {
                //     name: this.$t('热门')
                // },
                {
                    name: this.$t('涨幅榜')
                },
                {
                    name: this.$t('跌幅榜')
                },
                // {
                //     name: this.$t('24h成交额')
                // }
            ],
        }
    },
    methods: {
        changeTab(index) {
            this.active = index;
            this.$emit('tabs', index)
  props: {},
  components: {},
  data() {
    return {
      active: 0,
      listArr: [
        // {
        //     name: this.$t('热门')
        // },
        {
          name: this.$t("涨幅榜"),
        },
        {
          name: this.$t("跌幅榜"),
        },
        // {
        //     name: this.$t('24h成交额')
        // }
      ],
    };
  },
  methods: {
    changeTab(index) {
      this.active = index;
      this.$emit("tabs", index);
    },
    activated() {
        this.listArr = [
            // {
            //     name: this.$t('热门')
            // },
            {
                name: this.$t('涨幅榜')
            },
            {
                name: this.$t('跌幅榜')
            },
            // {
            //     name: this.$t('24h成交额')
            // }
        ]
    },
}
  },
  activated() {
    this.listArr = [
      // {
      //     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;
    padding-top: 22px;
    // justify-content: center;
    // align-items: center;
  font-size: 28px;
  display: flex;
  margin: 0 30px;
  //   border-bottom: 2px solid #f2f2f2 !important;
  padding-top: 22px;
  // justify-content: center;
  // align-items: center;

    .ex-tab {
        // 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;
  .ex-tab {
    // flex: 1;
    min-width: 150px;
    // 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;
    }
   .hx{
      width: 45px;
      height: 2px;
      position: absolute;
      background-color: #2B64FB;
      left: 35%;
      bottom: -8px;
   }
    @include themify() {
   // width: 20px;
      // height: 2px;
      // position: absolute;
      // background-color: #2B64FB;
        // border-bottom: 2px solid themed("color_main") !important;
    }

    // @include themify() {
    //   border-bottom: 2px solid transparent !important;
    // }
    // .hx{
    //    width: 20px;
    //    height: 2px;
    //    position: absolute;
    //    background-color: #2B64FB;
    // }
  }
}
</style>

.ex-tabs .active {
  min-width: 150px;
  //   margin-right: 35px;
  text-align: center;
  padding: 18px 0px;
  border-radius: 4px;
  //   color: #787e8c;
  position: relative;
  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;
    left: 35%;
    bottom: -8px;
  }
  //   @include themify() {
  // width: 20px;
  // height: 2px;
  // position: absolute;
  // background-color: #2B64FB;
  // border-bottom: 2px solid themed("color_main") !important;
  //   }
}
</style>