<!--单屏头部-->
<template>
  <div class="fixTopBox">
    <div class="topContainer">
      <div class="topBox">
        <div class="topCenter">
          <i class="el-icon-s-home back-button" title="返回系统" @click="backtoMain"/>
          <!--中间-->
          <div class="topTitle">
            <!--<img :src="require(`@/assets/overview/top-titleBg.png`)">-->
            <h1>崇仁智慧环卫</h1>
            <!--<img :src="require(`@/assets/overview/top-titleBg.png`)">-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Head2',
  // components: { Weather, Clock },
  data() {
    return {
      // city: '赣州市'
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    backtoMain() {
      this.$router.go(-1)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .fixTopBox {
    width: 100%;
    height: 4.2rem;
    overflow: auto;
    font-size: .7rem;
    /*文字下的线*/
    .topContainer{
      width: 100%;
      min-width: 100%;
      height: 100%;
      /*padding-bottom: 1.2rem;*/
      overflow: hidden;
      background: url("../../../assets/overview/titleBg.png") no-repeat;
      background-size: contain;
      background-position: top 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: -.3rem;
    }
    img:first-child{
      left: 0;
      transform: rotatey(-180deg);
    }
    img:last-child{
      right:0;
    }
    h1{
      font-size: 2rem;
      letter-spacing: .3rem;
      margin-top:0.4rem;
      background: #0072ff;
      /*background: linear-gradient(to right, #0072ff, #00eaff, #01aaff);*/
      -webkit-background-clip: text;
      color: transparent;
    }
  }
  .back-button{
    position:absolute;
    top:10px;
    left:20px;
    font-size:20px;
    color:#0072ff
  }
  .back-button:hover{
    color:#01aaff;
    cursor: pointer;
  }
</style>