123

dcc

2024-06-28 25b2ba1cf86bc3439e7ad2acf2cd4a9ea7e4b0ed

 src/components/ex-tabs/index.vue

@@ -1,93 +1,99 @@
<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>
  <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>
  </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;
    padding-top: 22px;
    justify-content: center;
    align-items: center;
  font-size: 28px;
  display: flex;
  //   padding-top: 22px;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f8;
  margin: 0 15px;
  margin-top: 48px;

    .ex-tab {
        flex: 1;
        text-align: center;
        padding: 18px 0px;
        border-radius: 4px;
        color: #787E8C;
  .ex-tab {
    flex: 1;
    text-align: center;
    margin: 4px 1px;
    padding: 18px 0px;
    border-radius: 4px;
    color: #9691fa;

        @include themify() {
            border-bottom: 2px solid transparent !important;
        }
    @include themify() {
      border-bottom: 2px solid transparent !important;
    }
  }
}

.ex-tabs .active {
    @include themify() {
        color: themed("text_color") !important;
    }
  @include themify() {
    color: #9691fa !important;
    // color: themed("text_color") !important;
  }

    @include themify() {
        border-bottom: 2px solid themed("color_main") !important;
    }

  @include themify() {
    background-color: #fff;
    // border-bottom: 2px solid themed("color_main") !important;
  }
}
</style>