FE_middlePlatform_server/src/views/data/Data.vue

<template>
    <div class="Achievement-container">
        <div class="tabs" v-if="showTabs">
            <a class="item" v-for="(item,index) in tabs" :key="index" :class="{active: index == active}" @click="tabChange(index)">{{item}}</a>
        </div>

        <div class="score-table" v-if="active == 'first'">
            <Product></Product>
        </div>
        <div class="score-table" v-else-if="active == 'second'">
            <Framework></Framework>
        </div>
        <div class="score-table" v-else>
            <Introduce></Introduce>
        </div>
    </div>
</template>

<script>
import Product from './Product.vue';
import Framework from './Framework.vue';
import Introduce from './Introduce.vue';
export default {
    data() {
        return {
            active: 'first',
            userId: this.$store.state.userId,
            tabs: {
                first: '产品管理',
                second: '数据架构',
                third: '数据简介',
            },
            showTabs: true
        };
    },
    components: {
        Product,
        Framework,
        Introduce
    },
    created() {
        
    },
    methods: {
        tabChange(index){
            this.active = index
        },
    }
};
</script>

<style lang="scss" scopted>
.Achievement-container {
    width: 100%;
    box-shadow: 0px 0px 21px 0px rgba(48, 115, 248, 0.1);
    text-align: center;
    overflow: hidden;
    .header {
        width: 97%;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        margin-top: 16px;
        p {
            margin-top: 14px;
            font-size: 20px;
            font-family: MicrosoftYaHeil;
            color: #333333;
        }
    }
    .score-table {
        margin: 0 auto;
        margin-top: 18px;
        position: relative;
        .block {
            position: absolute;
            right: 0px;
            bottom: -50px;
        }
    }
    .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #9278ff;
        color: #fff;
    }
}
.tabs{
    display: flex;
    align-items: center;
    padding: 20px 1.5% 20px;
    margin: 0;
    z-index: 999;
    background-color: #fff;
    .item{
        padding: 12px 20px;
        margin-right: 10px;
        color:#606266;
        line-height: 1;
        border-radius: 4px;
        background-color: #fff;
        border: 1px solid #dcdfe6;
        cursor: pointer;

        &.active{
            color: #fff;
            background-color: #9278ff;
            border-color: #9278ff;
        }
    }
}
</style>