JT-CIM/src/views/Main/components/ZhHeader.vue

<template>
  <!--标题logo-->
  <div class="header">
    <div :class="[showTitle?'YztTitle':'YztWxzTitle']" @click="slideTitle"></div>
	<div class="SqTitle"></div>
	<div class="GgTitle"></div>
	<div class="YwTitle"></div>
  </div>
</template>

<script>
export default {
  name: "ZhHeader",
  data() {
  	return{
		slideTitle:true
	}
  }
}
</script>

<style lang="scss" scoped>
$fullsize: calc(100% - 0px);
.header {
  width: $fullsize;
  height: $fullsize;
  background: url(src/assets/images/logo2.png) no-repeat;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  z-index: 999;
}
.YztTitle{
  left:10%;
  top:4%;
  width: 246rem;
  height: 54rem;
  background: url(src/assets/images/yztTitie.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
}
.YztWxzTitle{
	left:10%;
	top:4%;
	width: 246rem;
	height: 54rem;
	background: url(src/assets/images/yztTitie.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
}
.SqTitle{
	left:23%;
	top:4%;
	width: 246rem;
	height: 54rem;
	background: url(src/assets/images/sqTitle.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
}
.GgTitle{
	left:67%;
	top:4%;
	width: 246rem;
	height: 54rem;
	background: url(src/assets/images/ggTitle.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
}
.YwTitle{
	left:80%;
	top:4%;
	width: 246rem;
	height: 54rem;
	background: url(src/assets/images/ywTitle.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
}
</style>