From 25b2ba1cf86bc3439e7ad2acf2cd4a9ea7e4b0ed Mon Sep 17 00:00:00 2001
From: dcc <dcc@163.com>
Date: Fri, 28 Jun 2024 09:28:04 +0800
Subject: [PATCH] 123
---
src/components/ex-tabs/index.vue | 150 ++++++++++++++++++++++++++------------------------
1 files changed, 78 insertions(+), 72 deletions(-)
diff --git a/src/components/ex-tabs/index.vue b/src/components/ex-tabs/index.vue
index 4356c5d..93126c2 100644
--- a/src/components/ex-tabs/index.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.3