<!--四屏头部--> <template> <div class="fixTopBox" style="background-color: #E6A23C"> 赣州蓉江新智慧云脑 <!--<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>--> <!--</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>