<!--单屏头部-->
<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>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import Clock from '@/components/clock/Clock'
export default {
  name: 'headerLeft',
  components: {Clock}
}
</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-left.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{
          display:flex;
          justify-content: right;
        }
      }
    }
  }
  .topTitle{
    height: 100%;
    padding: 0 .06rem;
    padding-right:0px;
    display: flex;
    align-items: flex-end;
    /*text-align: center;*/
    position: relative;
    img{
      width: .5rem;
      height: .2rem;
      /*position: absolute;*/
      bottom: -.03rem;
    }
    img{
      transform: rotatey(-180deg);
    }
    h1{
      font-size: .20rem;
      letter-spacing: .03rem;
      background: linear-gradient(to right, #0072ff, #00eaff);
      -webkit-background-clip: text;
      color: transparent;
    }
  }
</style>