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%
+
+ 请及时充电
+
+