sl-sfy-safety/src/views/datamanager/systemdata/PlatformData.vue

<template>
    <div style="width: 100%">
        <div>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="访问次数统计" name="count">
                    <Table />
                </el-tab-pane>
                <el-tab-pane label="积分统计" name="score">
                    <Score />
                </el-tab-pane>

            </el-tabs>
        </div>



    </div>
</template>


<script setup lang="ts">
import { ref } from 'vue';
import type { TabsPaneContext } from 'element-plus';
import Table from './Table.vue'
import Score from './Score.vue';



const activeName = ref('count');
export type LabelType = 'count' | 'score';
const currentLabel = ref<LabelType>('count');

const handleClick = (tab: TabsPaneContext) => {
    console.log(tab.paneName);
    if (tab.paneName === 'count') {
        currentLabel.value = 'count';
    } else {

        currentLabel.value = 'score';

    }
};
</script>

<style>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.el-tabs__item:hover {
    /* color: rgb(53, 120, 220); */
    background-color: rgb(53, 120, 220);
}

.el-tabs__item.is-active {
    /* color: rgb(221, 239, 255); */
    background-color: rgb(221, 239, 255);
    border: 3px solid #4693f1 !important
}
</style>