mt-fe-group/yudao-init
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修改ui

Browse Source
This commit is contained in:
‘937886381’
2024-07-08 13:25:28 +08:00
parent 689de3173f
commit f2d57a8ebb
14 changed files with 246 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/layout/components/Navbar.vue
View File

@@ -1,6 +1,7 @@
<template>
<div ref="navbar" class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
<div ref="navbar" class="navbar"
: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"
@toggleClick="toggleSideBar" />
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />
@@ -42,7 +43,7 @@ export default {
'device'
]),
changeColor() {
if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main') {
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
@@ -66,16 +67,17 @@ export default {
}
},
watch: {
// changeColor(val) {
// if (val == true) {
// // console.log('this.$refs.mainContainer', this.$refs.mainContainer);
// this.$refs.navbar.style.backgroundColor = 'rgba(0, 21, 41, 1)'
// this.$refs.navbar.style.boxShadow = '0px 1px 8px 0px rgba(0,131,255,0.35)'
// } else {
// this.$refs.navbar.style.backgroundColor = ''
// this.$refs.navbar.style.boxShadow = ''
// }
// },
changeColor(val) {
if (val == true) {
let svg = document.getElementsByClassName('hamburger')
console.log('svg',svg);
svg[0].setAttribute('fill', 'rgba(255, 255, 255, 1)')
} else {
let svg = document.getElementsByClassName('hamburger')
console.log('svg', svg);
svg[0].setAttribute('fill', '')
}
},
},
methods: {
toggleSideBar() {

31
src/layout/components/NavbarRight.vue
View File

@@ -1,25 +1,31 @@
<template>
<div class="right-msg" :style="blackTitle ? 'color: #000' : 'color: #fff'">
<div class="home-icon" v-if='blackTitle'>
<svg-icon icon-class="home" style="font-size: 24px; cursor: pointer;" @click="toHome" />
<svg-icon :icon-class="changeColor === true ? 'darkHome' : 'home'"
style="font-size: 24px; cursor: pointer;color: aqua;" @click="toHome" />
</div>
<div class="time-msg">
<div class="line1">{{ timeZone }}&nbsp;&nbsp;&nbsp;&nbsp;{{ topTime }}</div>
<div class="line2">{{ topDate }}</div>
<div class="line1" :style="changeColor === true ? 'color:rgba(255, 255, 255, 1)' : ''">{{ timeZone
}}&nbsp;&nbsp;&nbsp;&nbsp;{{ topTime }}</div>
<div :style="changeColor === true ? 'color:rgba(255, 255, 255, .65)' : ''" class="line2">{{ topDate }}</div>
</div>
<div class="base-msg">
<div class="avatar">
<el-dropdown>
<img :src="require(`../../assets/images/choicepart/avatar.png`)" alt="" width="32" height="32" />
<el-dropdown-menu slot="dropdown">
<el-dropdown-item><svg-icon icon-class="helpbtn" />帮助文档</el-dropdown-item>
<el-dropdown-item @click.native="logout"><svg-icon icon-class="exitbtn" />退出登录</el-dropdown-item>
<el-dropdown-item>
<svg-icon icon-class="helpbtn" />帮助文档
</el-dropdown-item>
<el-dropdown-item @click.native="logout">
<svg-icon icon-class="exitbtn" />退出登录
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="use-msg">
<div class="line1">{{ nickname }}</div>
<div class="line2">{{ dept }}</div>
<div :style="changeColor === true ? 'color:rgba(255, 255, 255, 1)' : ''" class="line1">{{ nickname }}</div>
<div :style="changeColor === true ? 'color:rgba(255, 255, 255, .65)' : ''" class="line2">{{ dept }}</div>
</div>
</div>
</div>
@@ -48,6 +54,15 @@ export default {
}
}
},
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
}
},
},
created() {
// this.getUserMsg()
this.getTime()
@@ -124,4 +139,4 @@ export default {
opacity: 0.65;
}
}
</style>
</style>

25
src/layout/components/TagsView/index.vue
View File

@@ -1,10 +1,11 @@
<template>
<div ref="tagsViewContainer" id="tags-view-container" class="tags-view-container">
<div ref="tagsViewContainer"
:style="changeColor === true ? 'background:rgba(0, 21, 41, 1);borderTop:0px solid #d8dce5' : ''" id="tags-view-container"
class="tags-view-container">
<scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
<router-link v-for="tag in visitedViews" ref="tag" :key="tag.path"
:class="isActive(tag) ? 'active' : ''" :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
tag="span" class="tags-view-item" :style="activeStyle(tag)"
@click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
<router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
:style="activeStyle(tag)" @click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent.native="openMenu(tag, $event)">
{{ tag.title }}
<span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
@@ -38,7 +39,7 @@ export default {
},
computed: {
changeColor() {
if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main') {
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
@@ -57,19 +58,19 @@ export default {
watch: {
changeColor(val) {
if (val == true) {
console.log('this.$refs.tagsViewContainer', this.$refs.tagsViewContainer);
this.$refs.tagsViewContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)'
this.$refs.tagsViewContainer.style.borderTop = '0px solid #d8dce5'
// console.log('this.$refs.tagsViewContainer', this.$refs.tagsViewContainer);
// this.$refs.tagsViewContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)'
// this.$refs.tagsViewContainer.style.borderTop = '0px solid #d8dce5'
var tag = document.getElementsByClassName("tags-view-item")
console.log('tag', tag)
for (let i in tag) {
tag[i].classList.add("changeColor")
// tag[i].classList.remove("default")
}
console.log('this.$refs.scrollContainer', this.$refs.tag);
// console.log('this.$refs.scrollContainer', this.$refs.tag);
} else {
this.$refs.tagsViewContainer.style.backgroundColor = ''
this.$refs.tagsViewContainer.style.borderTop = '1px solid #d8dce5'
// this.$refs.tagsViewContainer.style.backgroundColor = ''
// this.$refs.tagsViewContainer.style.borderTop = '1px solid #d8dce5'
var tag = document.getElementsByClassName("tags-view-item")
for (let i in tag) {
tag[i].classList.remove("changeColor")

21
src/layout/index.vue
View File

@@ -2,7 +2,8 @@
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
<div ref="mainContainer" :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
<div :style="changeColor ? 'background: rgba(0, 21, 41, 1)' : ''" ref="mainContainer"
:class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
<div :class="{ 'fixed-header': fixedHeader }">
<navbar />
<tags-view v-if="needTagsView" />
@@ -40,7 +41,7 @@ export default {
fixedHeader: state => state.settings.fixedHeader
}),
changeColor() {
if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main') {
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
@@ -59,14 +60,14 @@ export default {
}
},
watch: {
changeColor(val) {
if (val == true) {
console.log('this.$refs.mainContainer', this.$refs.mainContainer);
this.$refs.mainContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)'
} else {
this.$refs.mainContainer.style.backgroundColor = ''
}
},
// changeColor(val) {
// if (val == true) {
// // console.log('this.$refs.mainContainer', this.$refs.mainContainer);
// this.$refs.mainContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)'
// } else {
// this.$refs.mainContainer.style.backgroundColor = ''
// }
// },
},
methods: {
handleClickOutside() {