30 lines
1.3 KiB
Vue
30 lines
1.3 KiB
Vue
<template>
|
|
<div class="w-[80px] h-full box-border pt-[12px] pb-[12px] flex flex-col items-center justify-center">
|
|
<div :class="['flex flex-col gap-[16px]', {'mt-auto mb-[8px] shrink-1': item.id === 7}]" v-for="(item) in menus" :key="item.id">
|
|
<div :class="['cursor-pointer flex flex-col items-center justify-center']" @click="handleClick(item)">
|
|
<div :class="['box-border rounded-[16px] p-[8px]', {'bg-white': item.id === currentId}]">
|
|
<component :is="item.icon" :color="item.id === currentId ? item.activeColor : item.color" :class="['w-[32px] h-[32px]']" />
|
|
</div>
|
|
|
|
<div :class="['text-[14px] mt-[4px] mb-[8px]', item.id === currentId ? item.activeColor : item.color]">
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-[48px] h-[48px] rounded-full overflow-hidden">
|
|
<img class="w-full h-full object-cover" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {ref} from 'vue'
|
|
import { menus } from '@/constant/menus'
|
|
|
|
const currentId = ref(null)
|
|
const handleClick = (item: any) => {
|
|
currentId.value = item.id
|
|
}
|
|
</script>
|
|
|
|
<style></style> |