machenlong/app-center
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改样式

Browse Source
This commit is contained in:
黑小马 2025-07-23 17:46:44 +08:00
parent 6547123a83
commit 9dc930acce
1 changed files with 87 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
web/src/views/components/layout.vue
View File

@ -4,15 +4,28 @@
<header class="bg-primary text-white shadow-md h-16 flex items-center justify-between px-6">
<!-- 左侧Logo和菜单按钮 -->
<div class="flex items-center">
<button @click="isCollapse = !isCollapse" class="mr-4 text-white focus:outline-none">
<el-icon><Fold /></el-icon>
</button>
<div class="flex items-center">
<el-icon><Platform /></el-icon>
<span class="ml-2 text-lg font-semibold hidden md:block">企业内网门户</span>
<div class="flex">
<button @click="isCollapse = !isCollapse" class="mr-4 text-white focus:outline-none">
<el-icon><Fold /></el-icon>
</button>
<div class="flex items-center">
<el-icon><Platform /></el-icon>
<span class="ml-2 text-lg font-semibold hidden md:block">企业内网门户</span>
</div>
</div>
<div class="top-header">
<el-menu
mode="horizontal"
:ellipsis="false"
>
<el-menu-item index="1">新闻中心</el-menu-item>
<el-menu-item index="2">公告</el-menu-item>
</el-menu>
</div>
</div>
<!-- 右侧用户信息 -->
<div class="flex items-center">
<div class="relative mr-6">
@ -50,32 +63,32 @@
<el-icon><IconMenu /></el-icon>
<template #title>应用中心</template>
</el-menu-item>
<el-sub-menu index="2">
<template #title>
<el-icon><Location /></el-icon>
<span>导航一</span>
</template>
<el-menu-item-group>
<template #title><span>分组一</span></template>
<el-menu-item index="1-1">菜单项一</el-menu-item>
<el-menu-item index="1-2">菜单项二</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组二">
<el-menu-item index="1-3">菜单项三</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title><span>菜单项四</span></template>
<el-menu-item index="1-4-1">子菜单项一</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="3" disabled>
<el-icon><Document /></el-icon>
<template #title>导航三</template>
</el-menu-item>
<el-menu-item index="4">
<el-icon><Setting /></el-icon>
<template #title>导航四</template>
</el-menu-item>
<!-- <el-sub-menu index="2">-->
<!-- <template #title>-->
<!-- <el-icon><Location /></el-icon>-->
<!-- <span>导航一</span>-->
<!-- </template>-->
<!-- <el-menu-item-group>-->
<!-- <template #title><span>分组一</span></template>-->
<!-- <el-menu-item index="1-1">菜单项一</el-menu-item>-->
<!-- <el-menu-item index="1-2">菜单项二</el-menu-item>-->
<!-- </el-menu-item-group>-->
<!-- <el-menu-item-group title="分组二">-->
<!-- <el-menu-item index="1-3">菜单项三</el-menu-item>-->
<!-- </el-menu-item-group>-->
<!-- <el-sub-menu index="1-4">-->
<!-- <template #title><span>菜单项四</span></template>-->
<!-- <el-menu-item index="1-4-1">子菜单项一</el-menu-item>-->
<!-- </el-sub-menu>-->
<!-- </el-sub-menu>-->
<!-- <el-menu-item index="3" disabled>-->
<!-- <el-icon><Document /></el-icon>-->
<!-- <template #title>导航三</template>-->
<!-- </el-menu-item>-->
<!-- <el-menu-item index="4">-->
<!-- <el-icon><Setting /></el-icon>-->
<!-- <template #title>导航四</template>-->
<!-- </el-menu-item>-->
</el-menu>
</aside>
@ -117,4 +130,46 @@ const handleClose = (key: string, keyPath: string[]) => {
width: 200px;
min-height: 400px;
}
.top-header{
border:none;
:deep(.el-menu-item){
background-color: #085ce6;
color: #fff !important;
border: none !important;
}
:deep(.el-menu-item):hover{
color: #ffffff !important;
background-color: #206ce8 !important;
border: none !important;
}
:deep(.el-menu-item):active{
color: #ffffff !important;
background-color: #085ce6 !important;
border: none !important;
}
:deep(.el-menu-item):focus{
color: #ffffff !important;
background-color: #206ce8 !important;
border: none !important;
}
margin-left: 20px;
}
:deep(.el-menu--horizontal.el-menu ){
border-bottom: none !important;
}
:deep(.el-menu) {
background-color: transparent !important;
}
</style>