FE_course_server/src/pages/dashboard.vue

<template>
    <div>
        <breadcrumb :data="'实验系统后台'"></breadcrumb>
        <ul class="list">
            <li :class="{active: active == 1}" @click="toSystem(1)">
                <img src="../assets/img/station1.png" alt="">
                <p class="name">运营与管理</p>
                <p class="text">电竞赛事运营与管理仿真实训系统</p>
            </li>
            <li :class="{active: active == 2}" @click="toSystem(2)">
                <img src="../assets/img/station2.png" alt="">
                <p class="name">编导</p>
                <p class="text">电竞赛事编导仿真实训系统</p>
            </li>
            <li :class="{active: active == 3}" @click="toSystem(3)">
                <img src="../assets/img/station3.png" alt="">
                <p class="name">主持与解说</p>
                <p class="text">电竞赛事主持与解说仿真实训系统</p>
            </li>
            <li :class="{active: active == 4}" @click="toSystem(4)">
                <img src="../assets/img/station4.png" alt="">
                <p class="name">数据分析</p>
                <p class="text">电竞数据分析仿真实训系统</p>
            </li>
            <li :class="{active: active == 5}" @click="toSystem(5)">
                <img src="../assets/img/station5.png" alt="">
                <p class="name">品牌与运营</p>
                <p class="text">电竞品牌运营与管理仿真实训系统</p>
            </li>
        </ul>
    </div>
</template>

<script>
import bus from '@/libs/bus'
import breadcrumb from '@/components/breadcrumb'
export default {
    name: 'dashboard',
    data() {
        return {
            active: 0
        };
    },
    components: {breadcrumb},
    mounted() {
        bus.$emit('setBg','backstage')
    },
    methods: {
        toSystem(index){
            
        }
    }
};
</script>

<style lang="scss" scoped>
    .list{
        display: flex;
        justify-content: center;
        align-items: center;
        height: calc(100vh - 165px);
        background-color: #fff;

        li{
            margin: 0 20px;
            cursor: pointer;
            &:nth-child(even){
                margin-top: 200px;
            }
            
            .name{
                margin: 10px 0 0;
                line-height: 1;
                font-size: 36px;
                color: #000;
                font-family: youshe;
            }
            .text{
                font-size: 14px;
                color: rgba(0, 0, 0, 0.65);
                transition: .2s;
            }
            img{
                max-width: 232px;
                border: 3px solid transparent;
                transition: .2s;
            }
            &:hover{
                img{
                    border-color: #CC221C;
                }
                .name,.text{
                    color: #CC221C;
                }
            }
        }
    }
    @media(max-width: 1630px){
        .list{
            li{
                margin: 0 10px;
                .name{
                    font-size: 30px;
                }
                .text{
                    font-size: 12px;
                }
                img{
                    max-width: 160px;
                }
            }
        }
    }
</style>