90 lines
1.8 KiB
Plaintext
90 lines
1.8 KiB
Plaintext
<template>
|
|
<view
|
|
class="aside"
|
|
:style="{ width: asideWidth + 'px' }"
|
|
>
|
|
<view class="aside-header">
|
|
<view class="logo">
|
|
<text class="logo-text"> 商城后台</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="aside-menu">
|
|
<view
|
|
v-for="m in menuList"
|
|
:key="m.id"
|
|
class="aside-item"
|
|
:class="{ active: activeMenuId === m.id }"
|
|
@click="$emit('menu-click', m.id)"
|
|
>
|
|
<image class="aside-icon" :src="m.icon" mode="aspectFit" />
|
|
<text class="aside-title" v-if="!collapsed">{{ m.title }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import type { MenuItem } from '../types.uts'
|
|
|
|
defineProps<{
|
|
collapsed: boolean
|
|
menuList: MenuItem[]
|
|
activeMenuId: string
|
|
asideWidth:number
|
|
}>()
|
|
|
|
defineEmits<{
|
|
(e:'menu-click', menuId: string): void
|
|
}>()
|
|
</script>
|
|
|
|
<style>
|
|
.aside{
|
|
background: #1f2a37;
|
|
height: 100vh;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
display:flex;
|
|
flex-direction: column;
|
|
z-index: 1000;
|
|
}
|
|
.aside-header{
|
|
height: 56px;
|
|
display:flex;
|
|
flex-direction:row;
|
|
align-items:center;
|
|
justify-content: space-between;
|
|
padding: 0 12px;
|
|
border-bottom: 1px solid rgba(255,255,255,0.08);
|
|
}
|
|
.logo-text{
|
|
color:#fff;
|
|
font-size:20px;
|
|
font-weight:600;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
text-align:center;
|
|
}
|
|
.collapse-btn{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
|
|
.collapse-text{ color:rgba(255,255,255,0.7); }
|
|
|
|
.aside-menu{ padding: 8px 0; }
|
|
.aside-item{
|
|
height: 54px;
|
|
display:flex;
|
|
flex-direction: column;
|
|
align-items:center;
|
|
justify-content:center;
|
|
gap: 6px;
|
|
margin: 6px 10px;
|
|
border-radius: 8px;
|
|
}
|
|
.aside-item.active{ background:#1677ff; }
|
|
.aside-icon{ width:22px; height:22px; }
|
|
.aside-title{ color:#fff; font-size:12px; }
|
|
</style>
|