Newer
Older
shipFront / src / views / header / header.vue
[wangxitong] on 15 Oct 2021 2 KB first commit
<!--四屏头部-->
<template>
  <div class="fixTopBox" style="background-color: #E6A23C">
    赣州蓉江新智慧云脑
      <!--<div class="topContaion">-->
        <!--<div class="topBox">-->
          <!--&lt;!&ndash;时间控件&ndash;&gt;-->
          <!--<clock/>-->
          <!--<div class="topCenter">-->
            <!--&lt;!&ndash;左边菜单&ndash;&gt;-->
            <!--&lt;!&ndash;中间&ndash;&gt;-->
            <!--<div class="topTitle">-->
              <!--<img :src="require(`@/assets/images/top-titleBg.png`)">-->
              <!--<h1>赣州蓉江新智慧云脑</h1>-->
              <!--<img :src="require(`@/assets/images/top-titleBg.png`)">-->
            <!--</div>-->
          <!--</div>-->

        <!--</div>-->
      <!--</div>-->
  </div>
</template>

<script>
import Clock from '@/components/clock/Clock'
export default {
  name: 'header',
  components: { Clock},
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
  },
  filters: {
  },
  destroyed () {
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .fixTopBox {
    width: 100%;
    height: 50px;
    overflow: auto;
    font-size: 16px;
    /*文字下的线*/
    .topContaion{
      width: 100%;
      min-width: 10px;
      height: 100%;
      overflow: hidden;
      background: url("../../assets/images/top-line.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%;
    display: flex;
    align-items: center;
    text-align: center;
    position: relative;
    img{
      width: 20px;
      height: 20px;
      position: absolute;
      bottom: 20px;
    }
    img:first-child{
      left: 0;
      transform: rotatey(-180deg);
    }
    img:last-child{
      right:0;
    }
    h1{
      font-size: .25rem;
      letter-spacing: 10px;
      background: linear-gradient(to right, #0072ff, #00eaff, #01aaff);
      -webkit-background-clip: text;
      color: transparent;
    }
  }

</style>