diff --git a/src/api/controlCenter/controlPanel/types.ts b/src/api/controlCenter/controlPanel/types.ts index 1a1ca88..4d7b5d7 100644 --- a/src/api/controlCenter/controlPanel/types.ts +++ b/src/api/controlCenter/controlPanel/types.ts @@ -10,7 +10,7 @@ export interface deviceQuery { communicationMode: string; pageSize: Number; deviceType: string; - content:string + content: string } export interface deviceVO { @@ -20,7 +20,7 @@ export interface deviceVO { onlineStatus: 0 | 1; // 设备状态(0=失效/离线,1=正常/在线,对应子组件的device.status) lng?: number; // 经度(地图打点用) lat?: number; // 纬度(地图打点用 - + // 其他字段... } // 1. 定义设备详情的类型(根据接口返回字段调整!关键:和后端返回的字段名一致) @@ -42,7 +42,7 @@ export interface DeviceDetail { name: string; // 姓名 code: string; // ID(身份证/工号) }; - + chargeState: string } // 定义灯光模式的类型接口 export interface LightMode { diff --git a/src/assets/images/path.png b/src/assets/images/path.png new file mode 100644 index 0000000..78cdcda Binary files /dev/null and b/src/assets/images/path.png differ diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss index 43ff48c..194cb62 100644 --- a/src/assets/styles/sidebar.scss +++ b/src/assets/styles/sidebar.scss @@ -28,7 +28,7 @@ // 使用CSS变量定义边框样式,支持动态修改 border-right: var(--sidebarBorderWidth) var(--sidebarBorderStyle) var(--sidebarBorderColor); box-shadow: var(--sidebarBoxShadow); - + // 备用方案:如果CSS变量不支持,使用默认样式 @supports not (border-right: var(--sidebarBorderWidth) var(--sidebarBorderStyle) var(--sidebarBorderColor)) { border-right: none; @@ -81,11 +81,15 @@ width: 100% !important; } - .el-menu-item, + .el-sub-menu, .menu-title { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; + color: rgba(255, 255, 255, 0.87); + font-family: Microsoft YaHei; + font-size: 13px; + font-weight: 600; } .el-menu-item .el-menu-tooltip__trigger { @@ -100,6 +104,7 @@ transition: all 0.3s ease; } } + .sub-menu-title-noDropdown, .el-sub-menu__title { &:hover { @@ -108,7 +113,7 @@ } } - & .theme-dark .is-active > .el-sub-menu__title { + & .theme-dark .is-active>.el-sub-menu__title { color: #ffffff !important; background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色 border-radius: 4px; @@ -116,16 +121,17 @@ box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3); } - & .nest-menu .el-sub-menu > .el-sub-menu__title, + & .nest-menu .el-sub-menu>.el-sub-menu__title, & .el-sub-menu .el-menu-item { min-width: $base-sidebar-width !important; + &:hover { background-color: rgba(0, 0, 0, 0.1) !important; transition: all 0.3s ease; } } - & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title, + & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title, & .theme-dark .el-sub-menu .el-menu-item { background-color: $base-sub-menu-background !important; @@ -135,7 +141,7 @@ } } - & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title, + & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title, & .theme-dark .el-menu-item { &:hover { // you can use $sub-menuHover @@ -143,7 +149,8 @@ transition: all 0.3s ease; } } - & .nest-menu .el-sub-menu > .el-sub-menu__title, + + & .nest-menu .el-sub-menu>.el-sub-menu__title, & .el-menu-item { &:hover { // you can use $sub-menuHover @@ -178,7 +185,7 @@ .el-sub-menu { overflow: hidden; - & > .el-sub-menu__title { + &>.el-sub-menu__title { padding: 0 !important; .svg-icon { @@ -189,15 +196,16 @@ .el-menu--collapse { .el-sub-menu { - & > .el-sub-menu__title { - & > span { + &>.el-sub-menu__title { + &>span { height: 0; width: 0; overflow: hidden; visibility: hidden; display: inline-block; } - & > i { + + &>i { height: 0; width: 0; overflow: hidden; @@ -234,6 +242,7 @@ } .withoutAnimation { + .main-container, .sidebar-container { transition: none; @@ -243,7 +252,7 @@ // when menu collapsed .el-menu--vertical { - & > .el-menu { + &>.el-menu { .svg-icon { margin-right: 16px; } @@ -286,7 +295,7 @@ } // 子菜单激活状态 -.el-sub-menu.is-active > .el-sub-menu__title { +.el-sub-menu.is-active>.el-sub-menu__title { background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色 color: #ffffff !important; border-radius: 4px; @@ -299,7 +308,7 @@ .sidebar-container { // 确保背景色与图片一致 background: #2c3e50 !important; - + .el-menu-item { &.is-active { background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色 @@ -310,9 +319,9 @@ transition: all 0.3s ease; } } - + .el-sub-menu { - &.is-active > .el-sub-menu__title { + &.is-active>.el-sub-menu__title { background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色 color: #ffffff !important; border-radius: 4px; @@ -321,12 +330,12 @@ transition: all 0.3s ease; } } - + // 子菜单项激活状态(只有文字颜色变化,无背景) .el-sub-menu .el-menu-item { &.is-active { background: transparent !important; - color: #409eff !important; + color: rgba(1, 159, 228, 1) !important; border-radius: 0; margin: 0; box-shadow: none; @@ -341,35 +350,35 @@ box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1) !important; border-right: none !important; } - + .sidebar-logo-container { background: #2c3e50 !important; } - + .el-menu { background: #2c3e50 !important; } - + // 非激活菜单项样式 .el-menu-item, .el-sub-menu__title { color: #bfcbd9 !important; - + &:hover { background-color: rgba(0, 0, 0, 0.1) !important; } } - + // 激活的主菜单项(正确的渐变背景) .el-menu-item.is-active, - .el-sub-menu.is-active > .el-sub-menu__title { + .el-sub-menu.is-active>.el-sub-menu__title { background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色 color: #ffffff !important; border-radius: 4px; margin: 2px 8px; box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3); } - + // 激活的子菜单项(只有蓝色文字,无背景) .el-sub-menu .el-menu-item.is-active { background: transparent !important; @@ -378,17 +387,17 @@ margin: 0; box-shadow: none; } - + // 子菜单背景色 .el-sub-menu .el-menu { - background: #1f2d3d !important; + background: linear-gradient(0.00deg, rgba(0, 87, 159, 0.15), rgba(0, 87, 159, 0) 100%) !important; } - + // 子菜单项悬停效果 .el-sub-menu .el-menu-item:hover { background-color: rgba(0, 0, 0, 0.1) !important; } - + // 主菜单项悬停效果 .el-menu-item:hover, .el-sub-menu__title:hover { @@ -399,28 +408,29 @@ // 全局菜单样式匹配设计UI #app .sidebar-container { // 确保背景色一致 - background: #2c3e50 !important; - + background: rgba(11, 24, 40, 1) !important; + //background: #2c3e50 !important; + // 菜单项基础样式 .el-menu-item, .el-sub-menu__title { color: #bfcbd9 !important; - + &:hover { background-color: rgba(0, 0, 0, 0.1) !important; } } - + // 激活的主菜单项 .el-menu-item.is-active, - .el-sub-menu.is-active > .el-sub-menu__title { + .el-sub-menu.is-active>.el-sub-menu__title { background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色 color: #ffffff !important; border-radius: 4px; margin: 2px 8px; box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3); } - + // 激活的子菜单项 .el-sub-menu .el-menu-item.is-active { background: transparent !important; @@ -429,19 +439,19 @@ margin: 0; box-shadow: none; } - + // 子菜单背景 .el-sub-menu .el-menu { background: #1f2d3d !important; } - + // 图标颜色 .svg-icon { color: inherit !important; } - + // 箭头图标颜色 .el-sub-menu__icon-arrow { color: inherit !important; } -} +} \ No newline at end of file diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss index b06082e..faabc7c 100644 --- a/src/assets/styles/variables.module.scss +++ b/src/assets/styles/variables.module.scss @@ -1,6 +1,6 @@ // 全局SCSS变量 :root { - --menuBg: #2c3e50; // 精确匹配图片中的深色背景 + --menuBg: linear-gradient(0.00deg, rgba(0, 87, 159, 0.15),rgba(0, 87, 159, 0) 100%);; // 精确匹配图片中的深色背景 --menuColor: #bfcbd9; // 非激活菜单项的文字颜色 --menuActiveText: #ffffff; // 激活菜单项的文字颜色 --menuHover: #34495e; // 悬停时的背景色 @@ -11,7 +11,7 @@ --subMenuTitleHover: #293444; // 子菜单标题悬停背景色 // 激活菜单项的渐变颜色 - 根据设计UI调整 - --menuActiveGradient: linear-gradient(90deg, #0080EA 0%, #000F27 100%); + --menuActiveGradient:linear-gradient(90.00deg, rgba(0, 128, 234, 1),rgba(0, 15, 39, 0) 100%); --fixedHeaderBg: #ffffff; --tableHeaderBg: #f8f8f9; @@ -130,7 +130,7 @@ $--color-warning: #e6a23c; $--color-danger: #f56c6c; $--color-info: #909399; -$base-sidebar-width: 280px; +$base-sidebar-width: 250px; // the :export directive is the magic sauce for webpack // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass diff --git a/src/views/controlCenter/6170/index.vue b/src/views/controlCenter/6170/index.vue index 2769650..13f7a78 100644 --- a/src/views/controlCenter/6170/index.vue +++ b/src/views/controlCenter/6170/index.vue @@ -124,6 +124,16 @@ + + +
+

设备电量低于20%

+
+
请及时充电
+ + 确 定 + +