修改ui
This commit is contained in:
parent
074432851c
commit
11387724de
@ -34,17 +34,13 @@ export default {
|
|||||||
changeColor(val) {
|
changeColor(val) {
|
||||||
if (val == true) {
|
if (val == true) {
|
||||||
let item = document.getElementsByClassName('el-breadcrumb__separator')
|
let item = document.getElementsByClassName('el-breadcrumb__separator')
|
||||||
// for (let i in item) {
|
// let item =document.getElementsByClassName('')
|
||||||
// console.log('item[i]',item, item[i])
|
item[0].classList.add("changeColor")
|
||||||
// if (item[i].style) {
|
item[1].classList.add("changeColor")
|
||||||
item[0].style.color = 'rgba(255, 255, 255, 0.45)'
|
|
||||||
item[1].style.color = 'rgba(255, 255, 255, 0.45)'
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
} else {
|
} else {
|
||||||
let item = document.getElementsByClassName('el-breadcrumb__separator')
|
let item = document.getElementsByClassName('el-breadcrumb__separator')
|
||||||
item[0].style.color = ''
|
item[0].classList.remove("changeColor")
|
||||||
item[1].style.color = ''
|
item[1].classList.remove("changeColor")
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
$route(route) {
|
$route(route) {
|
||||||
@ -102,9 +98,16 @@ export default {
|
|||||||
cursor: text;
|
cursor: text;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-breadcrumb .el-breadcrumb__inner a,
|
.app-breadcrumb .el-breadcrumb__inner a,
|
||||||
.el-breadcrumb__inner.is-link {
|
.el-breadcrumb__inner.is-link {
|
||||||
color:rgba(0, 0, 0, 0.65)
|
color:rgba(0, 0, 0, 0.65)
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<style lang="scss">
|
||||||
|
.changeColor {
|
||||||
|
--theme-color: rgba(255, 255, 255, 0.45);
|
||||||
|
}
|
||||||
|
.el-breadcrumb__separator {
|
||||||
|
color:var(--theme-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
@ -1,14 +1,16 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zhp
|
||||||
|
* @Date: 2024-06-03 15:38:31
|
||||||
|
* @LastEditTime: 2024-07-11 13:56:19
|
||||||
|
* @LastEditors: zhp
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div style="padding: 0 15px;" @click="toggleClick">
|
<div style="padding: 0 15px;" @click="toggleClick">
|
||||||
<svg
|
<svg :class="{'is-active':isActive}" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
|
||||||
:class="{'is-active':isActive}"
|
width="64" height="64" :fill="changeColor === true ? 'rgba(255, 255, 255, 1)' : '' ">
|
||||||
class="hamburger"
|
<path
|
||||||
viewBox="0 0 1024 1024"
|
d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="64"
|
|
||||||
height="64"
|
|
||||||
>
|
|
||||||
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
|
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -22,6 +24,15 @@ export default {
|
|||||||
default: false
|
default: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
changeColor() {
|
||||||
|
if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') {
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toggleClick() {
|
toggleClick() {
|
||||||
this.$emit('toggleClick')
|
this.$emit('toggleClick')
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div ref="navbar" class="navbar"
|
<div ref="navbar" class="navbar"
|
||||||
:style="changeColor ? 'background: rgba(0, 21, 41, 1);boxShadow:0px 1px 8px 0px rgba(0,131,255,0.35)' : ''">
|
:style="changeColor ? 'background: rgba(0, 21, 41, 1);boxShadow:0px 1px 8px 0px rgba(0,131,255,0.35)' : ''">
|
||||||
<hamburger id="hamburger-container" style="color: blue;" :is-active="sidebar.opened" class="hamburger-container"
|
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
|
||||||
@toggleClick="toggleSideBar" />
|
@toggleClick="toggleSideBar" />
|
||||||
|
|
||||||
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />
|
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />
|
||||||
@ -67,17 +67,21 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
changeColor(val) {
|
// changeColor: {
|
||||||
if (val == true) {
|
// handler(val){
|
||||||
let svg = document.getElementsByClassName('hamburger')
|
// if (val == true) {
|
||||||
console.log('svg',svg);
|
// let svg = document.getElementsByClassName('hamburger')
|
||||||
svg[0].setAttribute('fill', 'rgba(255, 255, 255, 1)')
|
// console.log('svg', svg)
|
||||||
} else {
|
// svg[0].style.color = 'rgba(255, 255, 255, 1)'
|
||||||
let svg = document.getElementsByClassName('hamburger')
|
// svg[0].setAttribute('fill', 'rgba(255, 255, 255, 1)')
|
||||||
console.log('svg', svg);
|
// } else {
|
||||||
svg[0].setAttribute('fill', '')
|
// let svg = document.getElementsByClassName('hamburger')
|
||||||
}
|
// console.log('svg', svg);
|
||||||
},
|
// svg[0].setAttribute('fill', '')
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// immediate: true, //立即执行
|
||||||
|
// }
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toggleSideBar() {
|
toggleSideBar() {
|
||||||
|
@ -192,15 +192,12 @@ export default {
|
|||||||
this.makeData();
|
this.makeData();
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
let button = document.getElementsByClassName('button-than')
|
let button = document.getElementsByClassName('button-than')
|
||||||
console.log(button);
|
|
||||||
button[0].children[0].style.borderRadius = '4px 0 0 4px'
|
button[0].children[0].style.borderRadius = '4px 0 0 4px'
|
||||||
button[0].children[1].style.borderRadius = '0px 4px 4px 0'
|
button[0].children[1].style.borderRadius = '0px 4px 4px 0'
|
||||||
console.log(button[0].children[0].style);
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
makeData() {
|
makeData() {
|
||||||
console.log('msgObj', this.msgObj);
|
|
||||||
this.msgObj.chip = {};
|
this.msgObj.chip = {};
|
||||||
this.msgObj.stand = {};
|
this.msgObj.stand = {};
|
||||||
this.msgObj.bipv = {};
|
this.msgObj.bipv = {};
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-06-20 16:13:52
|
* @Date: 2024-06-20 16:13:52
|
||||||
* @LastEditTime: 2024-07-09 16:14:43
|
* @LastEditTime: 2024-07-11 13:52:44
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -51,7 +51,6 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
console.log('params', params);
|
|
||||||
var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`;
|
var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`;
|
||||||
for (var i = 0, l = params.length; i < l; i++) {
|
for (var i = 0, l = params.length; i < l; i++) {
|
||||||
res +=
|
res +=
|
||||||
|
Loading…
Reference in New Issue
Block a user