dyf/dyf-vue-ui
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

左侧菜单栏样式修改

Browse Source
This commit is contained in:
fengerli
2025-09-05 16:56:46 +08:00
parent a31318aa1a
commit c95c0e65d2
6 changed files with 78 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/controlCenter/controlPanel/types.ts
View File

@ -10,7 +10,7 @@ export interface deviceQuery {
communicationMode: string;
pageSize: Number;
deviceType: string;
content:string
content: string
}
export interface deviceVO {
@ -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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 408 B

46
src/assets/styles/sidebar.scss
View File

@ -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;
@ -312,7 +321,7 @@
}
.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;
@ -326,7 +335,7 @@
.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;
@ -362,7 +371,7 @@
// 激活的主菜单项（正确的渐变背景）
.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;
@ -381,7 +390,7 @@
// 子菜单背景色
.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;
}
// 子菜单项悬停效果
@ -399,7 +408,8 @@
// 全局菜单样式匹配设计UI
#app .sidebar-container {
// 确保背景色一致
background: #2c3e50 !important;
background: rgba(11, 24, 40, 1) !important;
//background: #2c3e50 !important;
// 菜单项基础样式
.el-menu-item,
@ -413,7 +423,7 @@
// 激活的主菜单项
.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;

6
src/assets/styles/variables.module.scss
View File

@ -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

24
src/views/controlCenter/6170/index.vue
View File

@ -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>

5
src/views/controlCenter/delivery/index.vue
View File

@ -15,8 +15,7 @@
<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" />
@ -109,7 +108,7 @@ const initData: PageData<'', deviceQuery> = {
deviceType: '',
startTime: '',
endTime: '',
content:""
content: ""
},
rules: undefined,
form: ''