style: 调整菜单和卡片样式，优化界面一致性
- 更新菜单项和子菜单的文本颜色及背景色 - 调整卡片布局和阴影效果，提升视觉层次 - 统一待办事项和数据统计模块的样式
This commit is contained in:
dzq
parent
dc4d746412
commit
328158d829
|
|
@ -14,3 +14,6 @@ const currentLocale = computed(() => zhCn);
|
|||
<ReDialog />
|
||||
</ElConfigProvider>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,8 @@ nextTick(() => {
|
|||
<img src="/logo.png" alt="logo" />
|
||||
<span>{{ title }}</span>
|
||||
</div>
|
||||
<el-menu router ref="menuRef" mode="horizontal" class="horizontal-header-menu" :default-active="defaultActive">
|
||||
<el-menu router ref="menuRef" text-color="#606266" mode="horizontal" class="horizontal-header-menu"
|
||||
:default-active="defaultActive">
|
||||
<sidebar-item v-for="route in usePermissionStoreHook().wholeMenus" :key="route.path" :item="route"
|
||||
:base-path="route.path" />
|
||||
</el-menu>
|
||||
|
|
@ -76,7 +77,21 @@ nextTick(() => {
|
|||
:deep(.el-loading-mask) {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
:deep(.el-menu-item) {
|
||||
color: #606266!important;
|
||||
}
|
||||
:deep(.el-sub-menu.is-active) {
|
||||
background-color: #e6f7ff!important;
|
||||
}
|
||||
:deep(.el-sub-menu__title) {
|
||||
background: transparent!important;
|
||||
}
|
||||
:deep(.el-sub-menu .el-sub-menu__icon-arrow) {
|
||||
margin-left: 3px!important;
|
||||
}
|
||||
:deep(.el-menu--popup .el-menu-item) {
|
||||
color: #606266 !important;
|
||||
}
|
||||
/* :deep(.el-sub-menu.is-active .el-sub-menu__title) {
|
||||
border-bottom: 0;
|
||||
} */
|
||||
|
|
|
|||
|
|
@ -43,22 +43,23 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 4px 0 0 0;
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-primary);
|
||||
background: #fff;
|
||||
box-shadow: 0 0 1px #888;
|
||||
box-shadow: 0 -0.3px 0.5px #888;
|
||||
|
||||
.scroll-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 38px;
|
||||
padding: 2px 6px;
|
||||
margin-right: 4px;
|
||||
margin-right: 16px;
|
||||
line-height: 34px;
|
||||
cursor: pointer;
|
||||
border-color: transparent;
|
||||
border-radius: 6px 6px 0 0;
|
||||
/* box-shadow: 0 0 1px #888; */
|
||||
/* box-shadow: 0 -1px 1px #888; */
|
||||
transition: all 0.4s;
|
||||
|
||||
.el-icon-close {
|
||||
|
|
@ -195,7 +196,8 @@
|
|||
|
||||
.scroll-item.is-active {
|
||||
position: relative;
|
||||
background-color: #e6f7ff;
|
||||
/* background-color: #e6f7ff; */
|
||||
background-color: #f0f2f5;
|
||||
border-bottom: none;
|
||||
z-index: 1;
|
||||
|
||||
|
|
@ -212,13 +214,13 @@
|
|||
&::before {
|
||||
left: -18px;
|
||||
border-bottom-right-radius: 18px;
|
||||
box-shadow: 9px 0 0 0 #e6f7ff;
|
||||
box-shadow: 9px 0 0 0 #f0f2f5;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: -18px;
|
||||
border-bottom-left-radius: 18px;
|
||||
box-shadow: -9px 0 0 0 #e6f7ff;
|
||||
box-shadow: -9px 0 0 0 #f0f2f5;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const themeColors = {
|
|||
menuHover: "#e0ebf6",
|
||||
subMenuBg: "#fff",
|
||||
subMenuActiveBg: "#e0ebf6",
|
||||
menuText: "#7a80b4",
|
||||
menuText: "#606266",
|
||||
sidebarLogo: "#fff",
|
||||
menuTitleHover: "#000",
|
||||
menuActiveBefore: "#4091f7"
|
||||
|
|
@ -67,7 +67,7 @@ const themeColors = {
|
|||
menuHover: "#59bfc1",
|
||||
subMenuBg: "#000",
|
||||
subMenuActiveBg: "#59bfc1",
|
||||
menuText: "#7a80b4",
|
||||
menuText: "#606266",
|
||||
sidebarLogo: "#053434",
|
||||
menuTitleHover: "#fff",
|
||||
menuActiveBefore: "#59bfc1"
|
||||
|
|
@ -78,7 +78,7 @@ const themeColors = {
|
|||
menuHover: "#60ac80",
|
||||
subMenuBg: "#000",
|
||||
subMenuActiveBg: "#60ac80",
|
||||
menuText: "#7a80b4",
|
||||
menuText: "#606266",
|
||||
sidebarLogo: "#112f21",
|
||||
menuTitleHover: "#fff",
|
||||
menuActiveBefore: "#60ac80"
|
||||
|
|
@ -89,7 +89,7 @@ const themeColors = {
|
|||
menuHover: "#d84493",
|
||||
subMenuBg: "#000",
|
||||
subMenuActiveBg: "#d84493",
|
||||
menuText: "#7a80b4",
|
||||
menuText: "#606266",
|
||||
sidebarLogo: "#3f0d29",
|
||||
menuTitleHover: "#fff",
|
||||
menuActiveBefore: "#d84493"
|
||||
|
|
@ -100,7 +100,7 @@ const themeColors = {
|
|||
menuHover: "#693ac9",
|
||||
subMenuBg: "#000",
|
||||
subMenuActiveBg: "#693ac9",
|
||||
menuText: "#7a80b4",
|
||||
menuText: "#606266",
|
||||
sidebarLogo: "#1f0c38",
|
||||
menuTitleHover: "#fff",
|
||||
menuActiveBefore: "#693ac9"
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
/* $sideBarWidth: vertical 模式下主体内容距离网页文档左侧的距离 */
|
||||
@mixin merge-style($sideBarWidth) {
|
||||
$menuActiveText: #7a80b4;
|
||||
$menuActiveText: #606266;
|
||||
|
||||
@media screen and (width >= 150px) and (width <= 420px) {
|
||||
@media screen and (width >=150px) and (width <=420px) {
|
||||
.app-main-nofixed-header {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width >= 420px) {
|
||||
@media screen and (width >=420px) {
|
||||
.app-main-nofixed-header {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
.fixed-header {
|
||||
width: 100% !important;
|
||||
|
||||
+ .app-main {
|
||||
+.app-main {
|
||||
padding-top: 37px !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.is-active > .el-sub-menu__title,
|
||||
.is-active>.el-sub-menu__title,
|
||||
.is-active.submenu-title-noDropdown {
|
||||
color: $subMenuActiveText !important;
|
||||
|
||||
|
|
@ -167,7 +167,7 @@
|
|||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.el-menu-item.is-active.nest-menu > * {
|
||||
.el-menu-item.is-active.nest-menu>* {
|
||||
z-index: 1;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -190,9 +190,7 @@
|
|||
}
|
||||
|
||||
/* 有子集的激活菜单左侧小竖条 */
|
||||
.el-menu--collapse
|
||||
.is-active.outer-most.el-sub-menu
|
||||
> .el-sub-menu__title::before {
|
||||
.el-menu--collapse .is-active.outer-most.el-sub-menu>.el-sub-menu__title::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -205,7 +203,7 @@
|
|||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.el-menu--collapse .outer-most.el-sub-menu > .el-sub-menu__title::before {
|
||||
.el-menu--collapse .outer-most.el-sub-menu>.el-sub-menu__title::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: block;
|
||||
|
|
@ -216,7 +214,7 @@
|
|||
}
|
||||
|
||||
/* 无子集的激活菜单背景 */
|
||||
.is-active.submenu-title-noDropdown.outer-most > * {
|
||||
.is-active.submenu-title-noDropdown.outer-most>* {
|
||||
z-index: 1;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -244,13 +242,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
& > .el-menu {
|
||||
&>.el-menu {
|
||||
i {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active > .el-sub-menu__title,
|
||||
.is-active>.el-sub-menu__title,
|
||||
.is-active.submenu-title-noDropdown {
|
||||
color: $subMenuActiveText !important;
|
||||
|
||||
|
|
@ -283,7 +281,7 @@
|
|||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.el-menu-item.is-active.nest-menu > * {
|
||||
.el-menu-item.is-active.nest-menu>* {
|
||||
z-index: 1;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -312,7 +310,7 @@
|
|||
|
||||
/* horizontal 菜单 */
|
||||
.el-menu--horizontal {
|
||||
& > .el-sub-menu .el-sub-menu__icon-arrow {
|
||||
&>.el-sub-menu .el-sub-menu__icon-arrow {
|
||||
position: static !important;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -335,7 +333,7 @@
|
|||
}
|
||||
|
||||
/* 无子菜单时激活 border-bottom */
|
||||
.router-link-exact-active > .submenu-title-noDropdown {
|
||||
.router-link-exact-active>.submenu-title-noDropdown {
|
||||
height: 60px;
|
||||
border-bottom: 2px solid var(--el-menu-active-color);
|
||||
}
|
||||
|
|
@ -351,7 +349,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.is-active > .el-sub-menu__title,
|
||||
.is-active>.el-sub-menu__title,
|
||||
.is-active.submenu-title-noDropdown {
|
||||
color: $subMenuActiveText !important;
|
||||
|
||||
|
|
@ -360,7 +358,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
.nest-menu .el-sub-menu>.el-sub-menu__title,
|
||||
.el-menu-item {
|
||||
&:hover {
|
||||
color: $menuTitleHover !important;
|
||||
|
|
@ -372,7 +370,7 @@
|
|||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.el-menu-item.is-active.nest-menu > * {
|
||||
.el-menu-item.is-active.nest-menu>* {
|
||||
z-index: 1;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -505,7 +503,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.is-active > .el-sub-menu__title,
|
||||
.is-active>.el-sub-menu__title,
|
||||
.is-active.submenu-title-noDropdown {
|
||||
color: $subMenuActiveText !important;
|
||||
|
||||
|
|
@ -585,8 +583,8 @@ body[layout="vertical"] {
|
|||
/* 菜单折叠 */
|
||||
.el-menu--collapse {
|
||||
.el-sub-menu {
|
||||
& > .el-sub-menu__title {
|
||||
& > span {
|
||||
&>.el-sub-menu__title {
|
||||
&>span {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
|
|
@ -673,10 +671,10 @@ body[layout="mix"] {
|
|||
/* 菜单折叠 */
|
||||
.el-menu--collapse {
|
||||
.el-sub-menu {
|
||||
& > .el-sub-menu__title {
|
||||
&>.el-sub-menu__title {
|
||||
padding: 0;
|
||||
|
||||
& > span {
|
||||
&>span {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
|
|
@ -686,4 +684,4 @@ body[layout="mix"] {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,171 @@
|
|||
<script setup lang="ts">
|
||||
import { Clock, House, Lightning, Connection } from '@element-plus/icons-vue';
|
||||
|
||||
defineOptions({
|
||||
name: "Welcome"
|
||||
});
|
||||
|
||||
const todoItems = [
|
||||
{ name: '即将到期', icon: Clock, count: 5 },
|
||||
{ name: '空房管理', icon: House, count: 3 },
|
||||
{ name: '低电量锁', icon: Lightning, count: 2 },
|
||||
{ name: '电表离线', icon: Connection, count: 1 },
|
||||
{ name: '水表离线', icon: Connection, count: 4 }
|
||||
];
|
||||
|
||||
const shopData = [
|
||||
{ name: '商店数量', value: 12 },
|
||||
{ name: '商品数量', value: 356 },
|
||||
{ name: '订单数量', value: 89 }
|
||||
];
|
||||
|
||||
const deviceData = [
|
||||
{ name: '总柜子数量', value: 15 },
|
||||
{ name: '总格口数量', value: 240 },
|
||||
{ name: '已关联数量', value: 180 },
|
||||
{ name: '未关联数量', value: 60 },
|
||||
{ name: '网关数量', value: 8 }
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="welcome-container">
|
||||
<!-- 待办事项 -->
|
||||
<div class="section-container todo-container">
|
||||
<div class="section-title">
|
||||
<div class="title-bar"></div>
|
||||
<div class="title-text">待办事项</div>
|
||||
</div>
|
||||
<el-row :gutter="12" class="todo-section">
|
||||
<el-col :span="4" v-for="item in todoItems" :key="item.name">
|
||||
<el-card shadow="never" class="todo-card">
|
||||
<div class="todo-content">
|
||||
<el-icon :size="30" class="todo-icon">
|
||||
<component :is="item.icon" />
|
||||
</el-icon>
|
||||
<div class="todo-count">{{ item.count }}</div>
|
||||
<div class="todo-name">{{ item.name }}</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<el-row :gutter="12">
|
||||
<!-- 数据统计 -->
|
||||
<el-col :span="12">
|
||||
<div class="section-container shop-container">
|
||||
<div class="section-title">
|
||||
<div class="title-bar"></div>
|
||||
<div class="title-text">数据统计</div>
|
||||
</div>
|
||||
<el-row :gutter="12" class="data-section">
|
||||
<!-- 商店数据 -->
|
||||
<el-col :span="4" v-for="item in shopData" :key="item.name">
|
||||
<el-card shadow="never" class="todo-card">
|
||||
<div class="todo-content">
|
||||
<div class="todo-count">{{ item.value }}</div>
|
||||
<div class="todo-name">{{ item.name }}</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<!-- 智能设备 -->
|
||||
<el-col :span="12">
|
||||
<div class="section-container device-container">
|
||||
<div class="section-title">
|
||||
<div class="title-bar"></div>
|
||||
<div class="title-text">智能设备</div>
|
||||
</div>
|
||||
<el-row :gutter="12" class="data-section">
|
||||
<el-col :span="4" v-for="item in deviceData" :key="item.name">
|
||||
<el-card shadow="never" class="todo-card">
|
||||
<div class="todo-content">
|
||||
<div class="todo-count">{{ item.value }}</div>
|
||||
<div class="todo-name">{{ item.name }}</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-card) {
|
||||
border: none; // 移除卡片边框;
|
||||
}
|
||||
|
||||
.welcome-container {
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.title-bar {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background-color: var(--el-color-primary);
|
||||
margin-right: 8px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.section-container {
|
||||
margin-bottom: 12px;
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.todo-section {
|
||||
margin-bottom: 0;
|
||||
|
||||
.todo-card {
|
||||
height: 100%;
|
||||
border: none;
|
||||
|
||||
.todo-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
|
||||
.todo-icon {
|
||||
margin-bottom: 10px;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.todo-count {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.todo-name {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-secondary);
|
||||
text-align: center;
|
||||
}
|
||||
.data-section {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue