<!--单屏头部-->
<template>
  <div class="fixTopBox">
      <div class="topContaion">
        <div class="topBox">
          <!--时间控件-->
          <clock/>
          <div class="topCenter">
            <!--中间-->
            <div class="topTitle">
              <img :src="require(`@/assets/images/top-titleBg.png`)">
              <h1>携手创文创卫，共建美丽蓉江</h1>
              <img :src="require(`@/assets/images/top-titleBg.png`)">
            </div>
          </div>
          <!--天气控件-->
          <weather :city="city" :days="2"/>
        </div>
      </div>
  </div>
</template>

<script>
import Clock from '@/components/clock/Clock'
import Weather from '@/components/weather/weather'
export default {
  name: 'header2',
  components: {Weather, Clock},
  data () {
    return {
      city: '赣州市'
    }
  },
  created () {
  },
  mounted () {
  },
  filters: {
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .fixTopBox {
    width: 100%;
    height: .6rem;
    overflow: auto;
    font-size: .07rem;
    /*文字下的线*/
    .topContaion{
      width: 100%;
      min-width: 100%;
      height: 100%;
      padding-bottom: .12rem;
      overflow: hidden;
      background: url("../../assets/images/top-line2.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 .06rem;
    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: .20rem;
      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>