renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: layout组件样式优化

Browse Source
This commit is contained in:
rd
2025-07-01 16:00:35 +08:00
parent 57e45d991e
commit bc5aea9457
3 changed files with 135 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/components/_base/navbar/index.vue
View File

@ -80,27 +80,34 @@ const handleDopdownClick = (index: any, ind: any) => {
<template>
<div class="navbar">
<div class="left-side">
<a-space>
<a-space class="cursor-pointer" @click="router.push('/')">
<img src="@/assets/logo.svg" alt="" />
</a-space>
</div>
<div class="center-side">
<div class="menu-demo">
<div class="menu-demo h-100%">
<a-menu
mode="horizontal"
:selected-keys="selectedKey"
:default-selected-keys="[`${MENU_GROUP_IDS.WORK_BENCH_ID}`]"
>
<template #collapse-icon>
<icon-caret-down size="16" />
<icon-caret-up size="16" />
</template>
<a-menu-item :key="`${MENU_GROUP_IDS.WORK_BENCH_ID}`" @click="handleSelect(0)">
<view>工作台</view>
<span class="menu-item-text">工作台</span>
</a-menu-item>
<a-menu-item v-for="(item, index) in lists" :key="String(item.id)">
<a-dropdown :popup-max-height="false">
<a-button>{{ item.name }}<icon-caret-down /></a-button>
<a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
<a-button>
<span class="menu-item-text mr-2px"> {{ item.name }}</span>
<icon-caret-down size="16" />
</a-button>
<template #content>
<a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDopdownClick(index, ind)">{{
child.name
}}</a-doption>
<a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDopdownClick(index, ind)">
<span class="menu-item-text"> {{ child.name }}</span>
</a-doption>
</template>
</a-dropdown>
</a-menu-item>
@ -144,7 +151,7 @@ const handleDopdownClick = (index: any, ind: any) => {
</div>
</template>
<style scoped lang="less">
<style scoped lang="scss">
.navbar {
display: flex;
justify-content: space-between;
@ -163,6 +170,40 @@ const handleDopdownClick = (index: any, ind: any) => {
align-items: center;
margin-left: 40px;
.menu-item-text {
color: var(--Text-2, #3c4043);
font-family: 'PuHuiTi-Medium';
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
:deep(.arco-menu) {
height: 100%;
.arco-menu-inner {
padding: 0 20px;
}
.arco-menu-item {
padding: 0;
position: relative;
&.arco-menu-selected {
.menu-item-text,
.arco-menu-selected-label {
color: #6d4cfe;
}
.arco-menu-selected-label {
background: var(--Brand-Brand-6, #6d4cfe);
height: 4px;
border-radius: 4px;
width: 50%;
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
}
}
}
}
}
.cneter-tip {
font-size: 16px;
@ -192,3 +233,40 @@ const handleDopdownClick = (index: any, ind: any) => {
}
}
</style>
<style lang="scss">
.layout-menu-item-dropdown {
.arco-dropdown {
border-radius: 8px;
border: 1px solid var(--BG-300, #e6e6e8);
background: var(--BG-white, #fff);
padding: 12px 0px;
.arco-dropdown-option {
padding: 0 12px;
margin-bottom: 4px;
&-content {
display: flex;
height: 40px;
width: 100%;
padding: 10px 24px;
align-items: center;
.menu-item-text {
color: var(--Text-2, #3c4043);
font-family: 'PuHuiTi-Regular';
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 137.5% */
}
}
&:not(.arco-dropdown-option-disabled):hover {
background-color: transparent;
.arco-dropdown-option-content {
border-radius: 8px;
background: var(--BG-200, #f2f3f5);
}
}
}
}
}
</style>