root/aio-hl-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

交互 背景色

Browse Source
This commit is contained in:
caill
2023-05-26 19:12:08 +08:00
parent c091a2af83
commit 20135fc031
9 changed files with 223 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/pages/modules/workorder/index.vue
View File

@@ -1,17 +1,34 @@
<template>
<div class="content">
<div class="content blue" ref="content">
<div class="header">
<div class="header-user-content" @click="toSelect">
<div class="header-user-txt">
<span class="span1">登录人员：</span>
<span class="span2">admin{{userName}}</span>
<div class="header_wrap_left">
<div class="header-user-content" @click="toSelect">
<div class="header-user-txt">
<span class="span1">登录人员：</span>
<span class="span2">{{userName}}</span>
</div>
<div class="drop-button-wraper"><span class="icon_dropdown"></span></div>
<div v-show="show" class="dropdown-wrap">
<ul class="dropdown-list drift">
<li class="dropdown-item" @click="exit">退出</li>
</ul>
<div class="popper__arrow"></div>
</div>
</div>
<div class="drop-button-wraper"><span class="icon_dropdown"></span></div>
<div v-show="show" class="dropdown-wrap">
<ul class="dropdown-list drift">
<li class="dropdown-item" @click="exit">退出</li>
</ul>
<div class="popper__arrow"></div>
<div class="header-user-content set_color_wrap" @click="toSelectColor">
<div class="header-user-txt">
<span class="span1">背景颜色</span>
<span class="span2"></span>
</div>
<div class="drop-button-wraper"><span class="icon_dropdown"></span></div>
<div v-show="showColor" class="dropdown-wrap">
<ul class="dropdown-list drift">
<li class="dropdown-item" @click="switchColor(1)"><div class="color_button overall_orange"></div></li>
<li class="dropdown-item" @click="switchColor(2)"><div class="color_button overall_lightgreen"></div></li>
<li class="dropdown-item" @click="switchColor(3)"><div class="color_button overall_blue"></div></li>
</ul>
<div class="popper__arrow"></div>
</div>
</div>
</div>
<div class="header-time-wrap">
@@ -49,6 +66,7 @@ export default {
date: '',
week: '',
show: false,
showColor: false,
menus: [
{
label: '工单作业',
@@ -90,6 +108,22 @@ export default {
exit () {
this.$store.dispatch('delUserInfo')
this.$router.push('/login')
},
toSelectColor () {
this.showColor = !this.showColor
},
switchColor (type) {
switch (type) {
case 1:
this.$refs.content.classList.value = 'content overall_orange'
break
case 2:
this.$refs.content.classList.value = 'content overall_lightgreen'
break
case 3:
this.$refs.content.classList.value = 'content overall_blue'
break
}
}
}
}
@@ -99,16 +133,20 @@ export default {
@import '~@style/mixin.styl'
.content
_wh(100%, 100vh)
background linear-gradient(#031f6d 0%,#011a60 20%,#060346 100%)
.header
height 45px
_fj()
padding 0 15px
.header_wrap_left
height 45px
_fj(flex-start)
.header-user-content
position relative
height 45px
_fj(flex-start)
cursor pointer
.set_color_wrap
margin-left 20px
.header-user-txt
padding 14.5px 0
line-height 1
@@ -130,6 +168,7 @@ export default {
width 100%
top 39px
right 0
z-index 1
transform-origin center top
transition transform .3s ease-in-out
border 1px solid #e4e7ed
@@ -198,4 +237,19 @@ export default {
border-top-right-radius 12px
.main-container
_wh(100%, calc(100% - 44px))
.color_button
_wh(30px, 30px)
border-radius 50%
.set_color_wrap
.dropdown-wrap
width 132px
left 50%
transform translateX(-50%)
.dropdown-list
padding 0 10px
.dropdown-item
float left
padding 10px 0
&:nth-child(2)
padding 10px 10px
</style>