256 lines
7.1 KiB
Vue
256 lines
7.1 KiB
Vue
<template>
|
||
<div class="content blue" ref="content">
|
||
<div class="header">
|
||
<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="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">
|
||
<div class="header-time">
|
||
<div class="xj_time">{{time}}</div>
|
||
<div class="date_week">
|
||
<div class="xj_date">{{date}}</div>
|
||
<div class="xj_week">{{week}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="body-container">
|
||
<div class="tabs_wrap">
|
||
<ul class="tabs">
|
||
<li v-for="i in menus" :key="i.index">
|
||
<router-link :to="i.router" :class="{'router-link-active': i.router === $route.path}">{{i.label}}</router-link>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="main-container">
|
||
<router-view></router-view>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
userName: this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).username : '',
|
||
timer: null,
|
||
time: '',
|
||
date: '',
|
||
week: '',
|
||
show: false,
|
||
showColor: false,
|
||
menus: [
|
||
{
|
||
label: '工单作业',
|
||
router: '/workorderassignment'
|
||
},
|
||
{
|
||
label: '报工查询',
|
||
router: '/workreportquery'
|
||
},
|
||
{
|
||
label: '工单查询',
|
||
router: '/workorderquery'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
mounted () {
|
||
this.timer = window.setInterval(this.updateTime, 1000)
|
||
},
|
||
methods: {
|
||
updateTime () {
|
||
let cd = new Date()
|
||
let year = cd.getFullYear()
|
||
let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
|
||
let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
|
||
let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
|
||
let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
|
||
let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
|
||
var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
||
let myddy = new Date().getDay()
|
||
let week = weekday[myddy]
|
||
this.time = `${hh}:${mm}:${ss}`
|
||
this.date = `${year}年${month}月${date}日`
|
||
this.week = `${week}`
|
||
},
|
||
toSelect () {
|
||
this.show = !this.show
|
||
},
|
||
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
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
@import '~@style/mixin.styl'
|
||
.content
|
||
_wh(100%, 100vh)
|
||
.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
|
||
.span1
|
||
_font(14px, 1, #fff,,)
|
||
vertical-align middle
|
||
.span2
|
||
_font(16px, 1, #fff,,)
|
||
vertical-align middle
|
||
.drop-button-wraper
|
||
height 100%
|
||
line-height 45px
|
||
font-size 14px
|
||
color #fff
|
||
margin-left 15px
|
||
vertical-align middle
|
||
.dropdown-wrap
|
||
position absolute
|
||
width 100%
|
||
top 39px
|
||
right 0
|
||
z-index 1
|
||
transform-origin center top
|
||
transition transform .3s ease-in-out
|
||
border 1px solid #e4e7ed
|
||
border-radius 4px
|
||
background-color #fff
|
||
box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
|
||
margin 5px 0
|
||
.dropdown-list
|
||
padding 0
|
||
.dropdown-item
|
||
_font(14px, 34px, #606266,,center)
|
||
padding 0 20px
|
||
.popper__arrow
|
||
position absolute
|
||
display block
|
||
width 0
|
||
height 0
|
||
border-color transparent
|
||
border-style solid
|
||
border-width 6px
|
||
filter drop-shadow(0 2px 12px rgba(0,0,0,.03))
|
||
top -6px
|
||
left 50%
|
||
transform translateX(-50%)
|
||
margin-right 3px
|
||
border-top-width 0
|
||
border-bottom-color #ebeef5
|
||
.header-time-wrap
|
||
height 45px
|
||
.header-time
|
||
height 45px
|
||
_fj(center,flex-end,column)
|
||
.xj_time
|
||
_font(14px, 18px, #fff,,right)
|
||
.date_week
|
||
_fj()
|
||
.xj_date
|
||
_font(12px, 18px, #fff,,)
|
||
.xj_week
|
||
_font(12px, 18px, #fff,,)
|
||
.body-container
|
||
_wh(calc(100% - 30px), calc(100% - 65px))
|
||
margin 0 auto 20px
|
||
padding 5px
|
||
border 1px solid #484cce
|
||
.tabs_wrap
|
||
height 34px
|
||
margin-bottom 10px
|
||
.tabs
|
||
height 34px
|
||
li
|
||
float left
|
||
line-height 32px
|
||
text-align center
|
||
padding-right 10px
|
||
a
|
||
display inline-block
|
||
color #fff
|
||
width 100%
|
||
padding 0 10px
|
||
font-size 14px
|
||
border-bottom 1px solid #2aa6f9
|
||
.router-link-active
|
||
background linear-gradient(#0de0ff 0%,#2aa6f9 100%)
|
||
border-top-left-radius 12px
|
||
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>
|