zx

src/components/index.js

@@ -11,6 +11,7 @@ import vLabelDivLight from "@/components/v-labelDivLight";
 import vModal from "@/components/v-modal";
 import vTable from "@/components/v-table";
 import vTabGroup from "@/components/v-tab-group";
+import vTabGroupLight from "@/components/v-tab-group-light";
 import vTabGroupControl from "@/components/v-tab-group-control";
 import vTabMode from "@/components/v-tab-mode";
 import vEcharts from "@/components/v-echars";
@@ -33,6 +34,7 @@ export default {
                 vModal,
                 vTable,
                 vTabGroup,
+                vTabGroupLight,
                 vTabGroupControl,
                 vTabMode,
                 vEcharts,

src/components/v-tab-group-light/index.vue

@@ -0,0 +1,101 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-08 19:06:37
+ * @LastEditTime: 2021-10-28 11:11:13
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /data-show/src/components/v-tab-group/index.vue
+-->
+<template>
+    <div v-if="!getIsLight" class="l-t-g-container" ref="l-t-g">
+        <template v-for="(item,index) in btns">
+            <span v-if="activeInex === index" class="v-g-item v-g-item-active" :key="index" @click="handlerClick(index)">{{item}}</span>
+            <span v-else class="v-g-item" :key="index" @click="handlerClick(index)">{{item}}</span>
+        </template>
+    </div>
+    <div v-else class="l-light-container" ref="l-l-g">
+        <template v-for="(item,index) in btns">
+            <span v-if="activeInex === index" class="v-g-item v-g-item-active" :key="index" @click="handlerClick(index)">{{item}}</span>
+            <span v-else class="v-g-item" :key="index" @click="handlerClick(index)">{{item}}</span>
+        </template>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "v-tab-group",
+    props: {
+        value: {
+            type: Number,
+            default: 0
+        },
+        btns: {
+            type: Array,
+            default: () => []
+        }, 
+    },
+    watch: {
+        value: {
+            handler(val) {
+                this.activeInex = val
+            },
+            immediate: true
+        }
+    },
+    data() {
+        return {
+            activeInex: 0
+        }
+    },
+    methods: {
+        handlerClick(n) {
+            this.activeInex = n;
+            // this.$emit('update:value', this.activeInex)
+            this.$emit('change', this.activeInex);
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.l-t-g-container {
+    display: inline-block;
+    background: #1B4163;
+    padding: 3px;
+    border-radius: 2px;
+    font-size: 14px;
+    .v-g-item {
+        display: inline-block;
+        padding: 2px 10px;
+        color: #63AECC;
+        text-align: center;
+        cursor: pointer;
+        border-radius: 2px;
+    }
+    .v-g-item-active {
+        background: linear-gradient(180deg, #00498C 0%, #002343 100%);
+        border: 1px solid #63AECC;
+    }
+}
+.l-light-container {
+    display: inline-block;
+    background: #FFF;
+    padding: 3px;
+    border-radius: 2px;
+    font-size: 14px;
+    border: 1px solid #1EC8FA;
+    .v-g-item {
+        display: inline-block;
+        padding: 2px 10px;
+        text-align: center;
+        color: #000;
+        cursor: pointer;
+        border-radius: 2px;
+    }
+    .v-g-item-active {
+        background: #E7F1FF;
+        border: 1px solid #63AECC;
+        color: #000
+    }
+}
+</style>

src/components/v-tab-group/index.vue

@@ -7,13 +7,7 @@
  * @FilePath: /data-show/src/components/v-tab-group/index.vue
 -->
 <template>
-    <div v-if="!getIsLight" class="v-t-g-container" ref="V-t-g">
+    <div class="v-t-g-container" ref="V-t-g">
-        <template v-for="(item,index) in btns">
-            <span v-if="activeInex === index" class="v-g-item v-g-item-active" :key="index" @click="handlerClick(index)">{{item}}</span>
-            <span v-else class="v-g-item" :key="index" @click="handlerClick(index)">{{item}}</span>
-        </template>
-    </div>
-    <div v-else class="v-light-container" ref="V-l-g">
         <template v-for="(item,index) in btns">
             <span v-if="activeInex === index" class="v-g-item v-g-item-active" :key="index" @click="handlerClick(index)">{{item}}</span>
             <span v-else class="v-g-item" :key="index" @click="handlerClick(index)">{{item}}</span>

src/views/SaleRank/MarketSaleChina/mscTotal/totalTop20/index.vue

@@ -4,7 +4,7 @@
             <v-tab-group :value="tValue" :style="{ background: 'transparent' }" :btns="btnTimes" @change="handlerType"></v-tab-group>
         </v-label-div>
         <v-label-div-light v-else title="品牌销量排行榜TOP20">
-            <v-tab-group :value="tValue" :style="{ background: 'transparent' }" :btns="btnTimes" @change="handlerType"></v-tab-group>
+            <v-tab-group-light :value="tValue" :style="{ background: 'transparent' }" :btns="btnTimes" @change="handlerType"></v-tab-group-light>
         </v-label-div-light>
         <div class="d2">
             <a-form-model :class="getIsLight?'lightSy':'dark'" layout="inline">