左侧菜单栏样式修改
This commit is contained in:
fengerli
@ -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 {
|
||||
|
||||
BIN
src/assets/images/path.png
Normal file
BIN
src/assets/images/path.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 408 B |
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
|
||||
@ -124,6 +124,16 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<!-- ===========充电提示框====== -->
|
||||
<el-dialog title="充电提示" v-model="centerDialogVisible" width="15%">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h3 style="color: rgba(224, 52, 52, 1)">设备电量低于20%</h3>
|
||||
</div>
|
||||
<div>请及时充电</div>
|
||||
<span slot="footer" class="dialog-footer" style="text-align: right;display: block;">
|
||||
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="DeviceControl" lang="ts">
|
||||
@ -151,6 +161,7 @@ const fullscreenLoading = ref(false)
|
||||
const forceAlarmLoading = ref(false) //强制报警
|
||||
const sendTextLoading = ref(false)
|
||||
const lightModesLoading = ref(false)
|
||||
const centerDialogVisible = ref(false)
|
||||
const {
|
||||
connected,
|
||||
connect,
|
||||
@ -575,9 +586,8 @@ const handleDeviceMessage = (msg: any) => {
|
||||
deviceDetail.value.batteryPercentage = deviceState[3]; //电量
|
||||
deviceDetail.value.batteryRemainingTime = deviceState[5]; //续航时间
|
||||
// getList(); // 重新获取设备详情
|
||||
if (deviceDetail.value.batteryPercentage < 20) {
|
||||
ElMessage.closeAll();
|
||||
proxy?.$modal.msgWarning('电量低于20%，请及时充电');
|
||||
if (deviceDetail.value.batteryPercentage < 20 && deviceDetail.value.chargeState == 0) {
|
||||
centerDialogVisible.value=true
|
||||
}
|
||||
break;
|
||||
default:
|
||||
@ -663,7 +673,7 @@ onUnmounted(() => {
|
||||
background: white;
|
||||
padding: 0px 20px 50px;
|
||||
border: 1px solid #ebeef5;
|
||||
height: 250px;
|
||||
height: 289px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -736,6 +746,7 @@ onUnmounted(() => {
|
||||
|
||||
|
||||
}
|
||||
|
||||
.brightness-alarm {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -927,4 +938,9 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.path-img {
|
||||
width: 52px;
|
||||
height: 28px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,11 +15,10 @@
|
||||
<el-card>
|
||||
<!-- =========搜索按钮操作======= -->
|
||||
<div class="btn_search">
|
||||
<el-button type="primary" plain icon="Download"
|
||||
@click="handleExport">导出</el-button>
|
||||
<el-button type="primary" plain icon="Download" @click="handleExport">导出</el-button>
|
||||
<div style="position: absolute; right:30px; top:20px">
|
||||
<el-input v-model="queryParams.content" placeholder="MAC/IMEI" clearable
|
||||
style="width: 200px; margin-right: 20px;" @keyup.enter="handleQuery" @input="handleInput" />
|
||||
style="width: 200px; margin-right: 20px;" @keyup.enter="handleQuery" @input="handleInput" />
|
||||
<el-button type="primary" plain @click="toggleFilter">高级筛选</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@ -109,7 +108,7 @@ const initData: PageData<'', deviceQuery> = {
|
||||
deviceType: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
content:""
|
||||
content: ""
|
||||
},
|
||||
rules: undefined,
|
||||
form: ''
|
||||
|
||||
Reference in New Issue
Block a user