<template>
  <div id="app">
    <div class="top">
      <div class="left">
        xxx电力可视化系统
      </div>
      <div class="middle">
        <div class="router" :class="{'active':routerActive==index}" v-for="(item,index) in routerTitle" @click="handleChange(index)" :key="index">{{item}}</div>
      </div>
      <div class="right">
        <div class="time">
          <span>11月30日 周一</span>
          <span style="font-size:24px;margin-top: 3px;">{{this.$moment().format("YYYY-MM-DD")}}</span>
        </div>
        <div class="weather" v-for="(item,index) in weatherArr" :key="index">
          <div class="pic">
            <img :src="item.pic" alt="">
          </div>
          <div class="date">
            <span>{{item.day}}</span>
            <span style="font-size:24px;margin-top: 3px;">{{item.temperature}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <router-view />
    </div>
  </div>
</template>
<script>
import MinxinItem from "./mixins"
export default {
  name: 'home',
  mixins:[MinxinItem],
  data(){
    return{
      routerTitle:['首页','20kv','35kv','站房智辅'],
      routerActive:0,
      weatherArr:[
        {day:'今天',temperature:'27℃-19℃',pic:require('./assets/images/sun.png')},
        {day:'12月01日',temperature:'27℃-19℃',pic:require('./assets/images/union.png')},
        {day:'12月02日',temperature:'27℃-19℃',pic:require('./assets/images/windy.png')}
      ]
    }
  },
  mounted(){
  },
  methods:{
    handleChange(index){
      let that = this;
      this.routerActive = index
      if (this.routerActive == 0) {
        that.$router.push({name:'home'})
      }else if (this.routerActive == 3) {
        that.$router.push({name:'stationBuilding'})
      }
    }
  }
}
</script>
<style>
@import "./assets/index.css";
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background: url('./assets/images/homePg.png') no-repeat;
  background-size: 100% 100%;
}

</style>
<style lang="less" scoped>
.top {
  width: 100%;
  height: 100px;
  /* background: rgba(147, 230, 244,0.6); */
  /* background-image: linear-gradient(90deg, rgba(147, 230, 244,0.6),rgba(147, 230, 244,0), rgba(147, 230, 244,0.6)); */
  background: url('./assets/images/topBg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  .left{
    width: 815px;
    height: 97px;
    background: url('./assets/images/titleBg1.png') no-repeat;
    background-size: 100% 100%;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: 22px;
    color: #ffffff;
    line-height: 97px;
    padding-left: 86px;
    text-align: left;
    box-sizing: border-box;
  }
  .middle{
    width: auto;
    height: 78px;
    display: flex;
    flex-flow: row nowrap;
    .router{
      width: 244px;
      height: 100%;
      line-height: 78px;
      color: rgb(41,114,124);
      font-size: 22px;
      cursor: pointer;
    }
    .active{
      color: #ffffff;
      background: url('./assets/images/routerActive.png') no-repeat;
      background-size: 100% 100%;
      
    }
  }
  .right{
    // width: 740px;
    height: 78px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding-right: 15px;
    .time{
      height: 100%;
      color: #ffffff;
      font-size: 18px;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      text-align: left;
    }
    .weather{
      display: flex;
      flex-flow: row nowrap;
      height: 100%;
      align-items: center;
      margin-left: 36px;
      .pic{
        width: 61px;
        height: 61px;
      }
      .date{
        height: 100%;
        color: #ffffff;
        font-size: 18px;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        margin-left: 19px;
        text-align: left;
      }
    }
  }
}
.content {
  width: 100%;
  height: calc(100% - 100px);
      display: flex;
    align-items: center;
    justify-content: space-around;
}
</style>
