样式修改:侧边栏激活修改
42
src/App.vue
|
|
@ -25,7 +25,14 @@
|
|||
<nav class="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">
|
||||
<img
|
||||
src="./assets/images/titlelogo.png"
|
||||
|
|
@ -108,6 +115,11 @@ const isActive = (routePath) => {
|
|||
return route.path === routePath;
|
||||
};
|
||||
|
||||
// 判断父菜单是否有激活的子项
|
||||
const hasActiveChild = (item) => {
|
||||
return item.subItems.some(child => isActive(child.index));
|
||||
};
|
||||
|
||||
//处理跳转页面逻辑
|
||||
const jumpPage = (routePath) => {
|
||||
const activedPaths = [
|
||||
|
|
@ -208,8 +220,11 @@ const showToggleJianjie = ref(false);
|
|||
border-radius: 2px;
|
||||
margin-top: 16px;
|
||||
margin-left: 16px;
|
||||
background-image: linear-gradient(to right, #18395c, #3378c200);
|
||||
border-image: linear-gradient(to right, #225f9200, #3aa1f8) 1;
|
||||
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: 2px solid;
|
||||
border-image-source: linear-gradient(90deg, #3AA1F8 0%, rgba(58, 161, 248, 0.2) 100%);
|
||||
border-image-slice: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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%);
|
||||
}
|
||||
|
||||
.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 {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
|
|
@ -232,7 +266,7 @@ const showToggleJianjie = ref(false);
|
|||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
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",
|
||||
backgroundColor: "rgba(0,21,41,0.8)",
|
||||
borderColor: "#3a95ff",
|
||||
textStyle: { color: "#cbeaff" }
|
||||
textStyle: { color: "#cbeaff" },
|
||||
},
|
||||
grid: { left: "3%", right: "8%", bottom: "5%", top: "20%", containLabel: true },
|
||||
xAxis: {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<img src="@/assets/images/head/qiaoliang.png" alt="系统介绍" class="intruduction" />
|
||||
<img src="@/assets/images/head/leaderOptionText.png" alt="系统介绍" class="intruduction" />
|
||||
</div>
|
||||
|
||||
<div class="leader-containner1">
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
<div v-for="chart in chartData" :key="chart.id" class="chart-section">
|
||||
<!-- 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>
|
||||
</div>
|
||||
|
||||
|
|
@ -188,15 +188,13 @@ const chartData = ref([
|
|||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
color: #e0e0e0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.section-title .icon {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #3aa1f8;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chart-layout {
|
||||
|
|
@ -209,7 +207,7 @@ const chartData = ref([
|
|||
justify-content: space-around;
|
||||
padding-right: 15px;
|
||||
font-size: 14px;
|
||||
color: #a9c2e1;
|
||||
color: #94C1EC;
|
||||
text-align: right;
|
||||
height: 70px;
|
||||
flex-shrink: 0;
|
||||
|
|
|
|||