入库
This commit is contained in:
252
src/components/header2.vue
Normal file
252
src/components/header2.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<div class="header-time-wrap">
|
||||
<div class="header-time">
|
||||
<div class="date_week">
|
||||
<div class="xj_date">{{date}}</div>
|
||||
<div class="xj_week">{{week}}</div>
|
||||
</div>
|
||||
<div class="xj_time">{{time}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="header-center">{{ title }}</div> -->
|
||||
<div class="header_wrap_left">
|
||||
<div class="header-user-content">
|
||||
<div class="header-user-txt" @click="toSelect">
|
||||
<div class="span2">{{userName}}</div>
|
||||
<div class="span1"></div>
|
||||
</div>
|
||||
<div v-show="show" class="dropdown-wrap">
|
||||
<ul class="dropdown-list drift">
|
||||
<li class="dropdown-item__1" @click="exit">
|
||||
<i class="icon_exit"></i>
|
||||
<i class="exit_txt">退出</i>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="popper__arrow"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="drop-button-wraper">
|
||||
<div class="colors_3_wrap" @click="toSelectColor">
|
||||
<div class="color_item color_1"></div>
|
||||
<div class="color_item color_2"></div>
|
||||
<div class="color_item color_3"></div>
|
||||
</div>
|
||||
<div v-show="showColor" class="dropdown-wrap">
|
||||
<ul class="dropdown-list drift">
|
||||
<li class="dropdown-item color_button_wrap">
|
||||
<div class="color_button overall_orange" @click="switchColor(1)"></div>
|
||||
<div class="color_button overall_lightgreen" @click="switchColor(2)"></div>
|
||||
<div class="color_button overall_blue" @click="switchColor(3)"></div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="popper__arrow"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home_tip_wrap" @click="backHome">
|
||||
<div class="iconfont icon_home"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
userName: this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).person_name : 'admin',
|
||||
timer: null,
|
||||
time: '',
|
||||
date: '',
|
||||
week: '',
|
||||
show: false,
|
||||
showColor: false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
title: String
|
||||
},
|
||||
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) {
|
||||
this.$emit('switchColor', type)
|
||||
},
|
||||
backHome () {
|
||||
this.$router.push('/home')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin.styl'
|
||||
.header
|
||||
height 45px
|
||||
_fj()
|
||||
padding 0 15px
|
||||
// border-bottom 1px solid #2aa6f9
|
||||
// box-shadow 0 1px 2px 0 rgba(42,166,249,.4)
|
||||
.header_wrap_left
|
||||
_wh(35%,45px)
|
||||
_fj(flex-end)
|
||||
.header-center
|
||||
_wh(30%, 45px)
|
||||
_font(18px, 45px, #fff,,center)
|
||||
.header-user-content
|
||||
position relative
|
||||
height 45px
|
||||
_fj(flex-start)
|
||||
cursor pointer
|
||||
.header-user-txt
|
||||
_fj()
|
||||
.span1
|
||||
_wh(18px, 18px)
|
||||
background url(../images/user.png) center center / 100% 100% no-repeat
|
||||
margin-left 10px
|
||||
.span2
|
||||
_font(16px, 20px, #fff,,)
|
||||
margin-bottom -2px
|
||||
.drop-button-wraper
|
||||
position relative
|
||||
height 100%
|
||||
line-height 45px
|
||||
font-size 14px
|
||||
color #fff
|
||||
margin-left 15px
|
||||
vertical-align middle
|
||||
_fj(center)
|
||||
.dropdown-wrap
|
||||
position absolute
|
||||
min-width 75px
|
||||
top 35px
|
||||
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
|
||||
height 34px
|
||||
_font(14px, 34px, #606266,,center)
|
||||
padding 0 10px
|
||||
&:hover
|
||||
background-color $gray2
|
||||
.dropdown-item__1
|
||||
height 34px
|
||||
_font(14px, 34px, #606266,,center)
|
||||
padding 0 10px
|
||||
_fj(center)
|
||||
&:hover
|
||||
background-color $gray2
|
||||
.icon_exit
|
||||
_font(14px, 34px, #606266,,center)
|
||||
.exit_txt
|
||||
_font(14px, 34px, #606266,,center)
|
||||
font-style normal
|
||||
margin-left 5px
|
||||
.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 -5px
|
||||
right 2px
|
||||
border-top-width 0
|
||||
border-bottom-color #fff
|
||||
.header-time-wrap
|
||||
_wh(35%, 45px)
|
||||
.header-time
|
||||
height 45px
|
||||
_fj(flex-start)
|
||||
.xj_time
|
||||
_font(16px, 18px, #fff,,right)
|
||||
.date_week
|
||||
_fj()
|
||||
.xj_date
|
||||
_font(15px, 18px, #fff,,)
|
||||
.xj_week
|
||||
_font(15px, 18px, #fff,,)
|
||||
margin 0 5px 0 1px
|
||||
.drop-button-wraper
|
||||
.dropdown-list
|
||||
padding 0 10px
|
||||
.dropdown-item
|
||||
float left
|
||||
padding 0
|
||||
&:nth-child(2)
|
||||
padding 0 10px
|
||||
.home_tip_wrap
|
||||
_wh(18px, 45px)
|
||||
_fj(center)
|
||||
margin-left 15px
|
||||
.icon_home
|
||||
_font(18px, 45px, #fff,,center)
|
||||
.colors_3_wrap
|
||||
position relative
|
||||
_wh(18px, 18px)
|
||||
border 1px solid $gray3
|
||||
border-radius 50%
|
||||
overflow hidden
|
||||
>.color_item
|
||||
_wh(58%, 58%)
|
||||
position absolute
|
||||
top 50%
|
||||
left 50%
|
||||
transform-origin 0% 0%
|
||||
.color_1
|
||||
transform rotate(0deg) skewX(-30deg)
|
||||
background-color #ffa530
|
||||
.color_2
|
||||
transform rotate(120deg) skewX(-30deg)
|
||||
background-color #b7e15d
|
||||
.color_3
|
||||
transform rotate(240deg) skewX(-30deg)
|
||||
background-color #484cce
|
||||
.color_button_wrap
|
||||
display block
|
||||
_fj()
|
||||
.color_button
|
||||
_wh(30px, 30px)
|
||||
line-height 30px
|
||||
font-size 30px
|
||||
border-radius 50%
|
||||
overflow hidden
|
||||
&:nth-child(2)
|
||||
margin 0 5px
|
||||
</style>
|
||||
Reference in New Issue
Block a user