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

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

@ -4,6 +4,7 @@
<header class="bg-primary text-white shadow-md h-16 flex items-center justify-between px-6"> <header class="bg-primary text-white shadow-md h-16 flex items-center justify-between px-6">
<!-- 左侧Logo和菜单按钮 --> <!-- 左侧Logo和菜单按钮 -->
<div class="flex items-center"> <div class="flex items-center">
<div class="flex">
<button @click="isCollapse = !isCollapse" class="mr-4 text-white focus:outline-none"> <button @click="isCollapse = !isCollapse" class="mr-4 text-white focus:outline-none">
<el-icon><Fold /></el-icon> <el-icon><Fold /></el-icon>
</button> </button>
@ -12,6 +13,18 @@
<span class="ml-2 text-lg font-semibold hidden md:block">企业内网门户</span> <span class="ml-2 text-lg font-semibold hidden md:block">企业内网门户</span>
</div> </div>
</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="flex items-center">
@ -50,32 +63,32 @@
<el-icon><IconMenu /></el-icon> <el-icon><IconMenu /></el-icon>
<template #title>应用中心</template> <template #title>应用中心</template>
</el-menu-item> </el-menu-item>
<el-sub-menu index="2"> <!-- <el-sub-menu index="2">-->
<template #title> <!-- <template #title>-->
<el-icon><Location /></el-icon> <!-- <el-icon><Location /></el-icon>-->
<span>导航一</span> <!-- <span>导航一</span>-->
</template> <!-- </template>-->
<el-menu-item-group> <!-- <el-menu-item-group>-->
<template #title><span>分组一</span></template> <!-- <template #title><span>分组一</span></template>-->
<el-menu-item index="1-1">菜单项一</el-menu-item> <!-- <el-menu-item index="1-1">菜单项一</el-menu-item>-->
<el-menu-item index="1-2">菜单项二</el-menu-item> <!-- <el-menu-item index="1-2">菜单项二</el-menu-item>-->
</el-menu-item-group> <!-- </el-menu-item-group>-->
<el-menu-item-group title="分组二"> <!-- <el-menu-item-group title="分组二">-->
<el-menu-item index="1-3">菜单项三</el-menu-item> <!-- <el-menu-item index="1-3">菜单项三</el-menu-item>-->
</el-menu-item-group> <!-- </el-menu-item-group>-->
<el-sub-menu index="1-4"> <!-- <el-sub-menu index="1-4">-->
<template #title><span>菜单项四</span></template> <!-- <template #title><span>菜单项四</span></template>-->
<el-menu-item index="1-4-1">子菜单项一</el-menu-item> <!-- <el-menu-item index="1-4-1">子菜单项一</el-menu-item>-->
</el-sub-menu> <!-- </el-sub-menu>-->
</el-sub-menu> <!-- </el-sub-menu>-->
<el-menu-item index="3" disabled> <!-- <el-menu-item index="3" disabled>-->
<el-icon><Document /></el-icon> <!-- <el-icon><Document /></el-icon>-->
<template #title>导航三</template> <!-- <template #title>导航三</template>-->
</el-menu-item> <!-- </el-menu-item>-->
<el-menu-item index="4"> <!-- <el-menu-item index="4">-->
<el-icon><Setting /></el-icon> <!-- <el-icon><Setting /></el-icon>-->
<template #title>导航四</template> <!-- <template #title>导航四</template>-->
</el-menu-item> <!-- </el-menu-item>-->
</el-menu> </el-menu>
</aside> </aside>
@ -117,4 +130,46 @@ const handleClose = (key: string, keyPath: string[]) => {
width: 200px; width: 200px;
min-height: 400px; 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> </style>