样式修改:侧边栏激活修改
42
src/App.vue
|
|
@ -25,7 +25,14 @@
|
||||||
<nav class="menu">
|
<nav class="menu">
|
||||||
<!-- 手动生成第一个菜单项 -->
|
<!-- 手动生成第一个菜单项 -->
|
||||||
<div v-for="item in menuItems" :key="item.index" class="el-sub-menu">
|
<div v-for="item in menuItems" :key="item.index" class="el-sub-menu">
|
||||||
<div class="menu-title">
|
<div class="menu-title" :class="{'active-parent': hasActiveChild(item)}">
|
||||||
|
<!-- 激活状态的左侧青色图片 -->
|
||||||
|
<img
|
||||||
|
v-if="hasActiveChild(item)"
|
||||||
|
src="./assets/images/titleActiveLeftRec.png"
|
||||||
|
alt=""
|
||||||
|
class="title-active-left"
|
||||||
|
/>
|
||||||
<div class="tltlemenu-left">
|
<div class="tltlemenu-left">
|
||||||
<img
|
<img
|
||||||
src="./assets/images/titlelogo.png"
|
src="./assets/images/titlelogo.png"
|
||||||
|
|
@ -108,6 +115,11 @@ const isActive = (routePath) => {
|
||||||
return route.path === routePath;
|
return route.path === routePath;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 判断父菜单是否有激活的子项
|
||||||
|
const hasActiveChild = (item) => {
|
||||||
|
return item.subItems.some(child => isActive(child.index));
|
||||||
|
};
|
||||||
|
|
||||||
//处理跳转页面逻辑
|
//处理跳转页面逻辑
|
||||||
const jumpPage = (routePath) => {
|
const jumpPage = (routePath) => {
|
||||||
const activedPaths = [
|
const activedPaths = [
|
||||||
|
|
@ -208,8 +220,11 @@ const showToggleJianjie = ref(false);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
margin-left: 16px;
|
margin-left: 16px;
|
||||||
background-image: linear-gradient(to right, #18395c, #3378c200);
|
background-image: linear-gradient(270deg, rgba(6, 61, 113, 0.2) 0%, rgba(8, 30, 56, 0.8) 100%);
|
||||||
border-image: linear-gradient(to right, #225f9200, #3aa1f8) 1;
|
/* border-image: linear-gradient(to right, #225f9200, #3aa1f8) 1; */
|
||||||
|
border: 2px solid;
|
||||||
|
border-image-source: linear-gradient(90deg, #3AA1F8 0%, rgba(58, 161, 248, 0.2) 100%);
|
||||||
|
border-image-slice: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
@ -220,6 +235,25 @@ const showToggleJianjie = ref(false);
|
||||||
background: linear-gradient(270deg, rgba(14, 167, 213, 0) 0%, rgba(8, 118, 190, 0.24) 100%);
|
background: linear-gradient(270deg, rgba(14, 167, 213, 0) 0%, rgba(8, 118, 190, 0.24) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.menu-title.active-parent {
|
||||||
|
/* 设置背景图片 */
|
||||||
|
background-image: url("./assets/images/titleActiveMaskGroup.png"), Linear-gradient(to right,#0876be,#0ea7d500);;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
position: relative;
|
||||||
|
border: none;
|
||||||
|
padding-left: 30px; /* 为左侧图片腾出空间 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-active-left {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 8%;
|
||||||
|
width: 3px; /* 根据实际图片大小调整 */
|
||||||
|
height: 88%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.el-menu-item {
|
.el-menu-item {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
|
|
@ -232,7 +266,7 @@ const showToggleJianjie = ref(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-menu-item.active {
|
.el-menu-item.active {
|
||||||
background-image: linear-gradient(to right, #0876be, #0ea7d500);
|
background-image: linear-gradient(270deg, rgba(14, 167, 213, 0) 0%, rgba(8, 118, 190, 0.24) 100%);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 20 KiB |
BIN
src/assets/images/head/leaderOptionText.png
Normal file
|
After Width: | Height: | Size: 558 KiB |
|
Before Width: | Height: | Size: 527 KiB After Width: | Height: | Size: 559 KiB |
BIN
src/assets/images/icon/qiaolianganalysisicon.png
Normal file
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/assets/images/titleActiveLeftRec.png
Normal file
|
After Width: | Height: | Size: 140 B |
BIN
src/assets/images/titleActiveMaskGroup.png
Normal file
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -103,7 +103,7 @@ const getChartOptions = (xAxisData, seriesData, yMax, rotate = 0) => ({
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
backgroundColor: "rgba(0,21,41,0.8)",
|
backgroundColor: "rgba(0,21,41,0.8)",
|
||||||
borderColor: "#3a95ff",
|
borderColor: "#3a95ff",
|
||||||
textStyle: { color: "#cbeaff" }
|
textStyle: { color: "#cbeaff" },
|
||||||
},
|
},
|
||||||
grid: { left: "3%", right: "8%", bottom: "5%", top: "20%", containLabel: true },
|
grid: { left: "3%", right: "8%", bottom: "5%", top: "20%", containLabel: true },
|
||||||
xAxis: {
|
xAxis: {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
<div>
|
||||||
<img src="@/assets/images/head/qiaoliang.png" alt="系统介绍" class="intruduction" />
|
<img src="@/assets/images/head/leaderOptionText.png" alt="系统介绍" class="intruduction" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="leader-containner1">
|
<div class="leader-containner1">
|
||||||
|
|
|
||||||
|
|
@ -58,7 +58,7 @@
|
||||||
<div v-for="chart in chartData" :key="chart.id" class="chart-section">
|
<div v-for="chart in chartData" :key="chart.id" class="chart-section">
|
||||||
<!-- Section Title -->
|
<!-- Section Title -->
|
||||||
<div class="section-title">
|
<div class="section-title">
|
||||||
<span class="icon"></span>
|
<img src="../../../assets/images/icon/qiaolianganalysisicon.png" alt="" style="" class="icon"/>
|
||||||
<span>{{ chart.title }}</span>
|
<span>{{ chart.title }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -188,15 +188,13 @@ const chartData = ref([
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #e0e0e0;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title .icon {
|
.section-title .icon {
|
||||||
width: 8px;
|
width: 18px;
|
||||||
height: 8px;
|
height: 18px;
|
||||||
background-color: #3aa1f8;
|
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-layout {
|
.chart-layout {
|
||||||
|
|
@ -209,7 +207,7 @@ const chartData = ref([
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
padding-right: 15px;
|
padding-right: 15px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #a9c2e1;
|
color: #94C1EC;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
height: 70px;
|
height: 70px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
|
||||||