25 lines
931 B
Vue
25 lines
931 B
Vue
<template>
|
|
<div
|
|
class="w-[136px] h-full box-border border-r-[1px] border-r-[#E5E8EE] py-[12px] px-[8px] flex flex-col gap-[4px] select-none">
|
|
<div class="text-[12px] text-[#99A0AE] p-[4px]">系统设置</div>
|
|
|
|
<div
|
|
:class="['box-border flex items-center py-[10px] px-[12px] rounded-[6px] cursor-pointer', item.id === currentId ? 'bg-[#EFF6FF]' : '']"
|
|
v-for="item in systemMenus" :key="item.id" @click="handleClick(item)">
|
|
<component :is="item.icon" :color="item.id === currentId ? item.activeColor : item.color"
|
|
class="w-[20px] h-[20px]" />
|
|
<span class="box-border px-[8px] text-[14px] font-medium text-[#525866]">{{ item.name }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { systemMenus } from '@/constant/system-config'
|
|
|
|
const currentId = ref(1)
|
|
|
|
const handleClick = async (item: any) => {
|
|
currentId.value = item.id
|
|
}
|
|
</script> |