wangpeng
/
integrated_traffic_vue
forked from integrated_whb/integrated_whb_vue
1
0
Fork 0
Code Pull Requests Activity

样式修改

pull/1/head
鲁洪霞 2024-01-25 11:23:48 +08:00
parent added38399
commit 919644d1dd
3 changed files with 14 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/css/element.scss
View File

@ -89,9 +89,8 @@
.el-menu-item { .el-menu-item {
&:hover, &.is-active { &:hover, &.is-active {
background-image: url("/src/assets/images/public/list_on.png"); //background: #1d3f77;
background-repeat: no-repeat; background-image: linear-gradient(to right, #1e499a, rgba(0,0,0,0));
background-size: 100% 100%;
} }
} }

46
src/layout/header/index.vue
View File

@ -5,15 +5,15 @@
<div class="menu"> <div class="menu">
<ul> <ul>
<li @click="router.push({ path: '/BI' })"> <li @click="router.push({ path: '/BI' })">
<div v-for="item1 in 4" :key="item1" :class="'horn' + item1" /> <!-- <div v-for="item1 in 4" :key="item1" :class="'horn' + item1" />-->
<div class="title">11111111</div> <div class="title">BI</div>
</li> </li>
<template v-for="(item, index) in MENU" :key="index"> <template v-for="(item, index) in MENU" :key="index">
<li <li
@click="switchMenu(item.model)" @click="switchMenu(item.model)"
:class="{ active: item.model === menuStore.getModel }" :class="{ active: item.model === menuStore.getModel }"
> >
<div v-for="item1 in 4" :key="item1" :class="'horn' + item1" /> <!-- <div v-for="item1 in 4" :key="item1" :class="'horn' + item1" />-->
<div class="title">{{ item.title }}</div> <div class="title">{{ item.title }}</div>
</li> </li>
</template> </template>
@ -180,51 +180,27 @@ const fnSignOut = async () => {
display: flex; display: flex;
li { li {
width: 120px;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
background-color: #051748; background-color: #051748;
clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 20% 100%);
position: relative; position: relative;
box-shadow: rgba(11, 62, 110, 0.7) 0 0 13px inset; box-shadow: rgba(23, 66, 130, 1) 0px 0px 30px inset;
color: #fff; color: #fff;
min-width: 100px;
border: 1px solid #283d6f;
list-style: none;
padding: 0 20px;
margin-right: 20px;
border-radius: 2px;
&.active { &.active {
background-image: url("/src/assets/images/public/tguang.png"); background-image: url("/src/assets/images/public/tguang.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
border: 1px solid #2870bb;
} }
@for $i from 1 through 4 {
.horn#{$i} {
width: 8px;
height: 8px;
background-image: url("/src/assets/images/public/menu_horn#{$i}.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
z-index: 2;
@if $i == 1 {
top: 0;
left: 2px;
}
@if $i == 2 {
top: 0;
right: 21px;
}
@if $i == 3 {
bottom: 0;
left: 21px;
}
@if $i == 4 {
bottom: 0;
right: 2px;
}
}
}
.title { .title {
padding-left: 3px; padding-left: 3px;
font-size: 14px; font-size: 14px;

2
src/views/BI/index.vue
View File

@ -6,7 +6,7 @@
leave-active-class="animate__animated animate__fadeOutUp" leave-active-class="animate__animated animate__fadeOutUp"
> >
<div class="header" :key="transitionKey"> <div class="header" :key="transitionKey">
<div class="back"> <div class="back" @click="this.$router.back()">
<img src="/src/assets/images/map/back.png" alt="" /> <img src="/src/assets/images/map/back.png" alt="" />
</div> </div>
<div class="light"></div> <div class="light"></div>