<!--四屏头部-->
<template>
  <div class="fixTopBox">
      <div class="topContaion">
        <div class="topBox">
          <!--时间控件-->
          <clock/>
          <div class="topCenter">
            <!--左边菜单-->
            <div class="topMenu menuLeft">
              <ul>
                <menu-item
                  v-for="(menu,index) in topMenuLeft"
                  :key="index"
                  :curStatus="$store.state.curStatus"
                  :menu="menu"
                  size="0.17"
                  @click="changeStatus">
                </menu-item>
              </ul>
            </div>
            <!--中间-->
            <div class="topTitle">
              <img :src="require(`@/assets/images/top-titleBg.png`)">
              <h1>赣州蓉江新区智慧云脑</h1>
              <img :src="require(`@/assets/images/top-titleBg.png`)">
            </div>
            <div class="topMenu menuRight">
              <ul>
                <menu-item
                  v-for="(menu,index) in topMenuRight"
                  :key="index"
                  :curStatus="$store.state.curStatus"
                  :menu="menu"
                  size="0.18"
                  @click="changeStatus">
                </menu-item>

              </ul>
            </div>
          </div>
          <!--天气控件-->
          <weather :city="city" :days="2"/>
        </div>
      </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import Clock from '@/components/clock/Clock'
import Weather from '@/components/weather/weather'
export default {
  name: 'header1',
  components: {Weather, Clock},
  data () {
    return {
      city: '赣州市',
      topMenuLeft: [
        { label: '规划建设', id: 2, component: 'cityConstruction' },
        { label: '城市治理', id: 1, component: 'cityManage' }
      ],
      topMenuRight: [
        { label: '社会民生', id: 3, component: 'socialLivelihood' },
        { label: '产业经济', id: 4, component: 'industrialEconomy' }
      ]
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    ...mapActions(['changeStatus'])
  },
  filters: {
  },
  destroyed () {
    // clearInterval(this.currentTime)
    // this.currentTime = null
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/scss" lang="scss" scoped>
  .fixTopBox {
    width: 100%;
    height: .6rem;
    overflow: auto;
    font-size: .07rem;
    /*文字下的线*/
    .topContaion{
      width: 100%;
      min-width: 17rem;
      height: 100%;
      padding-bottom: .12rem;
      overflow: hidden;
      background: url("../../assets/images/top-line.png") no-repeat;
      background-size: contain;
      background-position: bottom center;
      .topBox{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .topCenter{
          flex:1;
          display:flex;
          justify-content: center;
        }
      }
    }
  }
  .topTitle{
    height: 100%;
    padding: 0 .6rem;
    display: flex;
    align-items: center;
    text-align: center;
    position: relative;
    img{
      width: .5rem;
      height: .2rem;
      position: absolute;
      bottom: -.03rem;
    }
    img:first-child{
      left: 0;
      transform: rotatey(-180deg);
    }
    img:last-child{
      right:0;
    }
    h1{
      font-size: .25rem;
      letter-spacing: .03rem;
      background: linear-gradient(to right, #0072ff, #00eaff, #01aaff);
      -webkit-background-clip: text;
      color: transparent;
    }
  }
  .topMenu{
    flex: 1;
    margin: 0 3%;
    ul{
      display: flex;
    }
  }
  .menuLeft{
    ul{
      justify-content: flex-end;
      li{
        margin: 0.01rem 3%;
      }
    }
  }
  .menuRight{
    ul {
      justify-content: flex-start;
      li {
        margin: 0.01rem 3%;
      }
    }
  }
</style>