<!--单屏头部-->
<template>
  <div class="fixTopBox">
      <div class="topContaion">
        <div class="topBox">
          <div class="topCenter">
            <!--中间-->
            <div class="topTitle">
              <h1>区智慧城市</h1>
              <img :src="require(`@/assets/images/top-titleBg.png`)">
            </div>
          </div>
          <!--天气控件-->
          <weather :city="city" :days="2"/>
        </div>
      </div>
  </div>
</template>

<script>
import Weather from '@/components/weather/weather'
export default {
  name: 'headerRight',
  components: {Weather},
  data () {
    return {
      city: '赣州市'
    }
  }
}
</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/topline-right.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: left;
        }
      }
    }
  }
  .topTitle{
    height: 100%;
    padding: 0 .06rem;
    padding-left:0px;
    display: flex;
    align-items: flex-end;
    /*text-align: center;*/
    position: relative;
    img{
      width: .5rem;
      height: .2rem;
      /*position: absolute;*/
      bottom: -.03rem;
    }
    img{
      right:0;
    }
    h1{
      font-size: .20rem;
      letter-spacing: .03rem;
      background: linear-gradient(to right, #00eaff, #01aaff);
      -webkit-background-clip: text;
      color: transparent;
    }
  }
</style>