course_resource/src/components/admin/adminLeft.vue

<template>
    <div class="admin_left">
        <router-link to="/" class="admin_left_title">
            <img :src="Logo" alt="">
        </router-link>
        <ul>
            <li :class="selectValue == 0 ? 'li_active' : ''" @click="getSelectionValue(0)">
                <img :src="selectValue == 0 ? StudentImgSelect : StudentImg" alt="">
                <span>学生管理</span>
            </li>
            <li :class="selectValue == 1 ? 'li_active' : ''" @click="getSelectionValue(1)">
                <img :src="selectValue == 1 ? ClassImgSelect : ClassImg" alt="">
                <span>班级管理</span>
            </li>
            <li :class="selectValue == 2 ? 'li_active' : ''" @click="getSelectionValue(2)">
                <img :src="selectValue == 2 ? TeacherImgSelect : TeacherImg" alt="">
                <span>教师管理</span>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import Logo from '../../assets/img/admin_left_logo.png'
import StudentImg from '../../assets/img/student.png'
import ClassImg from '../../assets/img/banji.png'
import TeacherImg from '../../assets/img/jiaoshi.png'
import StudentImgSelect from '../../assets/img/studentSelect.png'
import ClassImgSelect from '../../assets/img/banjiSelect.png'
import TeacherImgSelect from '../../assets/img/jiaoshiSelect.png'

const selectValue = ref(0)
const getSelectionValue = val => {
    selectValue.value = val
    // U.MD.D.I.openApplication('studentStudy') 学习中心
    if(val == 0){
        top.U.MD.D.I.openApplication('student')
    }else if(val == 1){
        top.U.MD.D.I.openApplication('class')
    }else if(val == 2){
        top.U.MD.D.I.openInApplication('teacher') 
    }
}
</script>
<style lang="scss">
.admin_left {
    background: rgba(21, 35, 62);
    width: 235px;
    height: 100vh;
    color: #fff;

    .admin_left_title {
        padding: 14px 0;
        font-size: 20px;
        color: #fff;
        display: block;
        text-align: center;
    }

    ul {
        padding: 8px;

        li {
            padding: 7px 16px;
            border-radius: 3px;
            color: rgba(255, 255, 255, 0.55);
            display: flex;
            flex-direction: row;
            align-items: center;
            font-size: 14px;
            cursor: pointer;

            img {
                margin-right: 8px;
            }
        }

        .li_active {
            background: rgba(54, 129, 252, 1);
            color: #fff;

        }
    }
}
</style>