173 lines
4.1 KiB
Plaintext
173 lines
4.1 KiB
Plaintext
<!-- CSR 碳中和 -->
|
|
<script setup lang="tsx">
|
|
import { NMenu, NIcon, NEllipsis } from 'naive-ui'
|
|
import { ChevronDown } from '@vicons/ionicons5'
|
|
import Icon1 from './images/icon-1.png'
|
|
import Icon2 from './images/icon-2.png'
|
|
|
|
import type { MenuOption } from 'naive-ui'
|
|
|
|
const props = defineProps({
|
|
activeNav: {
|
|
type: String,
|
|
default: '1-1',
|
|
},
|
|
})
|
|
const emit = defineEmits(['undate:activeNav'])
|
|
|
|
const { activeNav } = useVModels(props, emit)
|
|
|
|
const menuOptions: MenuOption[] = [
|
|
{
|
|
label: '碳中和',
|
|
key: '1-1',
|
|
level: 1,
|
|
children: [
|
|
// { label: '碳中和', key: '1-1', level: 2 },
|
|
// { label: () => h(NEllipsis, null, { default: () => '购入原材料脱碳素活动' }), key: '1-2', level: 2 },
|
|
// { label: () => h(NEllipsis, null, { default: () => '供方加工能耗脱碳素活动' }), key: '1-3', level: 2 },
|
|
{ label: () => h(NEllipsis, null, { default: () => '部品碳足迹管理&空调节能solution活动' }), key: '1-4', level: 2 },
|
|
],
|
|
},
|
|
// {
|
|
// label: '人的研究',
|
|
// key: '2',
|
|
// level: 1,
|
|
// children: [
|
|
// { label: '人的研究活动', key: '2-1', level: 2 },
|
|
// { label: '组织/个人基础信息', key: '2-2', level: 2 },
|
|
// { label: '培训资料', key: '2-3', level: 2 },
|
|
// { label: '人才确保', key: '2-4', level: 2 },
|
|
// ],
|
|
// },
|
|
// {
|
|
// label: '工作模式变革',
|
|
// key: '3',
|
|
// level: 1,
|
|
// children: [
|
|
// { label: '整体活动概要', key: '3-1', level: 2 },
|
|
// { label: 'Layout变化图', key: '3-2', level: 2 },
|
|
// ],
|
|
// },
|
|
]
|
|
|
|
// const expandedKeys = ref<any[]>(['1'])
|
|
const expandedKeys = ref<any[]>(['1', '1-1'])
|
|
function handleExpandIcon(option: MenuOption) {
|
|
console.log( props.activeNav)
|
|
// if (option.level === 1) return h(NIcon, null, { default: () => h(ChevronDown) })
|
|
// console.log(option, expandedKeys, props.activeNav)
|
|
|
|
if (option.level === 1) {
|
|
if (unref(expandedKeys).includes(option.key)) {
|
|
return <img src={Icon2} class="w28px h28px" />
|
|
} else {
|
|
return <img src={Icon1} class="w28px h28px" />
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
function handleNodeProps(option: MenuOption) {
|
|
return { level: option.level as number }
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="box h-full relative flex flex-col py25px">
|
|
<NMenu
|
|
class="cus-menu"
|
|
accordion
|
|
:root-indent="32"
|
|
:indent="20"
|
|
:options="menuOptions"
|
|
v-model:value="activeNav"
|
|
v-model:expanded-keys="expandedKeys"
|
|
:node-props="handleNodeProps"
|
|
:expand-icon="handleExpandIcon"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.box {
|
|
background-image: url('./images/bg-side.svg');
|
|
background-position: -350px 540px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
:deep(.cus-menu.n-menu) {
|
|
@item: n-menu-item;
|
|
@content: n-menu-item-content;
|
|
@submenu: n-submenu;
|
|
|
|
.@{submenu} {
|
|
margin-top: 0;
|
|
}
|
|
.n-menu-item {
|
|
font-size: 18px;
|
|
margin-top: 0;
|
|
|
|
.@{content} {
|
|
height: 100%;
|
|
width: 100%;
|
|
&::before {
|
|
display: none;
|
|
}
|
|
|
|
.@{content}-header,
|
|
.@{content}__arrow {
|
|
color: #003db7;
|
|
}
|
|
|
|
.@{content}__arrow {
|
|
font-size: 28px;
|
|
}
|
|
}
|
|
|
|
&[level='1'] {
|
|
background: #417bef;
|
|
height: 60px;
|
|
margin-top: 10px;
|
|
.@{content}-header {
|
|
color: #fff;
|
|
}
|
|
&:has(.@{content}--child-active),
|
|
&:has(.@{content}--selected) {
|
|
background: #003db7;
|
|
}
|
|
}
|
|
&[level='2'] {
|
|
height: 80px;
|
|
background: #ebf1ff;
|
|
.@{content}-header {
|
|
color: #999999;
|
|
}
|
|
|
|
&:has(.@{content}--child-active),
|
|
&:has(.@{content}--selected) {
|
|
background: #bfd4ff;
|
|
.@{content}-header {
|
|
color: #032fa0;
|
|
}
|
|
}
|
|
}
|
|
&[level='3'] {
|
|
background: #ebf1ff;
|
|
height: 80px;
|
|
|
|
.@{content}-header,
|
|
.@{content}__arrow {
|
|
color: #999999;
|
|
}
|
|
|
|
&:has(.@{content}--selected) {
|
|
background-color: #e1eafc;
|
|
.@{content}-header,
|
|
.@{content}__arrow {
|
|
color: #142142;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|