pbl_admin_table/src/components/schoolArea.vue

<template>
    <div class="schoolArea">
        <div class="allView" :class="{ active: activeSchool === 'allView' }">
            <div class="allView_icon"></div>
            <div>总览</div>
        </div>
        <div class="priSchBox">
            <div class="primarySch" :class="{ active: activeSchool === 'primarySch' }" >
                <img src="../assets/img/schlit.svg" style="margin-right: 8px;" alt="">
                <div>小学部</div>
            </div>
            <div class="priSchArea">
                <div class="schArea" v-for="(item, index) in priSchList" :key="index"
                    :class="{ active: activeSchool === item }" >{{ item }}
                </div>
            </div>
        </div>
        <div class="midSchBox">
            <div class="primarySch" :class="{ active: activeSchool === 'primarySch' }">
                <img src="../assets/img/star.svg" style="margin-right: 8px;" alt="">
                <div>初中部</div>
            </div>
            <div class="priSchArea">
                <div class="schArea" v-for="(item, index) in midList" :key="index"
                    :class="{ active: activeSchool === item }">{{ item }}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            activeSchool: '',
            priSchList: [
                "通新岭校区",
                "百花校区",
                "玮鹏校区",
                "众孚校区",
                "园岭校区",
            ],
            midList: [
                "笔架山学校",
                "笔架山学校",
                "笔架山学校",
                "笔架山学校",
                "笔架山学校",
                "笔架山学校",
                "笔架山学校",
            ]
        }
    },
    methods: {
        setActive(school) {
            this.activeSchool = school  // 切换高亮状态
        }

    }
}
</script>
<style scoped>
.schoolArea {
    /* max-width: 192px;
    min-width: 192px; */
    width: 267px;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 19px 13px;
    box-sizing: border-box;
    gap: 8px;
    background: #fff;
}
.allView{
    display: flex;
    width: 230px;
    height: 54px;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
}
.primarySch{
    display: flex;
    padding: 16px;
    padding-bottom: 4px;
}
.priSchArea{
    margin: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.schArea{
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    padding: 7px 16px;
    padding-left: 36px;
    box-sizing: border-box;
    font-size: 14px;
    cursor: pointer;
}
.allView_icon {
    background: url('../assets/img/zl.svg') no-repeat;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-size: contain;
    margin-right: 8px;
}


</style>