pbl_admin_table/src/views/kanBan/components/AdataKanban.vue

<template>
    <div class="datakanban">
        <div class="barList">
            <div @click="cutPage(index)" :class="[pageEnd == index ? 'Selected' : '' ]" v-for="(i,index) in barList" :key="index">
                {{ i.name }}
            </div>
        </div>

        <div class="dataExponent">
            <div class="dataExponentCon" v-for="(i,index) in dataExponentList[pageEnd]" :key="index + 'p'">
                <div class="dataExponentConTit">
                    {{ i.name }}
                </div>
                <div class="dataExponentConNum">
                    {{ i.num }}
                </div>
            </div>
        </div>

        <div v-if="pageEnd == 0">
            <img style="width: 100%;" src="../../../assets/img/uuu4.svg" alt="">
            <!-- <div style="display: flex;flex-direction: column;">
                <div style="display: flex;justify-content: flex-end;">
                    <img src="../../../assets/img/cs1.svg" alt="">
                </div>
                <div style="display: flex;justify-content: space-between;">
                        <img style="width: 200px;" src="../../../assets/img/uuu4.svg" alt="">
                        <img style="width: 200px;" src="../../../assets/img/uuu5.svg" alt="">
                </div>
                <div style="display: flex;justify-content: space-between;">
                    <div> <img src="../../../assets/img/cs3.svg" alt=""></div>
                    <div> <img src="../../../assets/img/cs4.svg" alt=""></div>
                </div>
            </div> -->

        </div>
        <div style="display: flex;flex-direction: column;justify-content: center;" v-if="pageEnd == 1">
            <div style="display: flex;width: 100%;">
                <img style="transform: scale(1.05);" src="../../../assets/img/chart2.svg" alt="">
                <div>
                    <img src="../../../assets/img/chart3.svg" alt="">
                    <img src="../../../assets/img/chart5.svg" alt="">
                </div>
            </div>
            <img style="width: 100%;"  src="../../../assets/img/uuu5.svg" alt="">
        </div>
        <div v-if="pageEnd == 2">
            <div style="display: flex;width: 100%;">
                <img style="transform: scale(1.05);" src="../../../assets/img/chart6.svg" alt="">
                <div>
                    <img src="../../../assets/img/chart10.svg" alt="">
                    <img src="../../../assets/img/chart8.svg" alt="">
                </div>
            </div>
            <img style="width: 100%;"  src="../../../assets/img/chart7.svg" alt="">
            <img style="width: 100%;"  src="../../../assets/img/chart9.svg" alt="">
        </div>
        <div v-if="pageEnd == 3">
            <img style="width: 100%;"  src="../../../assets/img/chart11.svg" alt="">
            <div style="display: flex;width: 100%;">
                <div>
                    <img style="object-view-box: inset(4% 16% 3% 0%);" src="../../../assets/img/chart12.svg" alt="">
                    <img style="object-view-box: inset(3% 0% 6% 0%);" src="../../../assets/img/chart13.svg" alt="">
                </div>
                <img style="object-view-box: inset(5% 4% 4% 4%);" src="../../../assets/img/chart14.svg" alt="">
            </div>
        </div>


    </div>
</template>

<script>
    export default {
        data(){
            return{
                barList:[
                    {name:'基础数据',ind: 1},
                    {name:'AI应用',ind: 2},
                    {name:'常规教学',ind: 3},
                    {name:'教师管理',ind: 4},
                ],
                dataExponentList:[
                    [
                        {name:'教师总量',num:1254},
                        {name:'教师总量',num:3721},
                        {name:'月登录总数',num:4579},
                        {name:'月登录环比',num:'+15%'},
                    ],[
                        {name:'AI应用数量',num:1254},
                        {name:'今日用户数量',num:3721},
                        {name:'知识库数量',num:4579},
                        {name:'文件数量',num:'+15%'},
                    ],[
                        {name:'课程总量',num:1254},
                        {name:'本月新增课程',num:3721},
                        {name:'新增课程环比',num:4579},
                        {name:'AI应用嵌入数量',num:'272'},
                    ],[
                        {name:'表单总量',num:1254},
                        {name:'表单回收率',num:3721},
                        {name:'表单平均处理时长',num:4579},
                        {name:'智能问答次数',num:'272'},
                    ],
                ],
                pageEnd: 0,
            }
        },
        methods:{
            cutPage(val){
                this.pageEnd = val
            }
        }
    }
</script>

<style scoped>
.datakanban{
    width: 100%;
}
.barList{
    display: flex;
    gap: 42px;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    color: #969BA3;
    margin-bottom: 15px;
}
.barList > div{
    cursor: pointer;
    height: 23px;
    line-height: 23px;
}
.Selected{
    color: #0663FE;
    border-bottom: 2px solid #0663FE;
}
.dataExponent{
    width: 100%;
    height: 120px;
    display: grid;
    background: #fff;
    border-radius: 20px;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 15px;
    align-items: center;
    /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
}
.dataExponentCon{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 50%;
    border-right: 1px solid #D9D9D9;
}
.dataExponentCon:nth-child(4){
    border: none;
}
.dataExponentConTit{
    font-family: PingFang SC;
    font-size: 14px;
    line-height: 100%;
    color: #969BA3;
}
.dataExponentConNum{
    height: 45px;
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 32px;
    line-height: 45px
}
</style>