You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.4 KiB
67 lines
1.4 KiB
<template>
|
|
<div class="sm:w-[170px] sm:flex sm:mb-0 mb-5 justify-center w-full rounded-lg">
|
|
<el-menu
|
|
class="full-width-menu rounded-lg"
|
|
background-color="transparent"
|
|
text-color="#606266"
|
|
style="border: none; width: 100%"
|
|
:default-active="activeIndex"
|
|
@select="handleSelect"
|
|
>
|
|
<el-menu-item v-for="(item,index) in activities" :index="`${item.path}`" :key="index" class="custom-menu-item hover:rounded-lg sm:w-[170px] w-full">
|
|
<span class="text-center w-full" @click="navigateTo(item.path)">{{ item.name }}</span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {navigateTo} from "#imports";
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
layout?: any;
|
|
activeIndex?: string;
|
|
}>(),
|
|
{}
|
|
);
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'done', index: string): void;
|
|
(e: 'update:visible', visible: boolean): void;
|
|
}>();
|
|
|
|
const activities = [
|
|
{
|
|
name: '账号信息',
|
|
path: '/user'
|
|
},
|
|
{
|
|
name: '密码修改',
|
|
path: '/user/password'
|
|
},
|
|
{
|
|
name: '实名认证',
|
|
path: '/user/auth'
|
|
},
|
|
{
|
|
name: '订单列表',
|
|
path: '/user/order'
|
|
},
|
|
{
|
|
name: '退出登录',
|
|
path: '/user/logout'
|
|
},
|
|
]
|
|
|
|
|
|
const handleSelect = (index: string) => {
|
|
emit('done', index)
|
|
}
|
|
|
|
</script>
|
|
<style lang="scss">
|
|
.custom-menu-item:hover{
|
|
background-color: #dee3e8;
|
|
}
|
|
</style>
|