aio-hl-new/src/components/header2.vue

<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>