You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
2.4 KiB
120 lines
2.4 KiB
2 years ago
|
<template>
|
||
|
|
<div id="screen-header"
|
||
|
|
class="m-header">
|
||
|
|
<div class="subtitle-left">
|
||
|
|
<img src="./../assets/icon/subtitle.png" />
|
||
|
|
<span class="subtitle-span">党建引领</span>
|
||
|
|
</div>
|
||
|
|
<div class="main-title">
|
||
|
|
|
||
|
|
<img class="title-img"
|
||
|
|
:src="titleImg" />
|
||
|
|
|
||
|
|
<span class="title-span">党建引领基层治理大数据</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="subtitle-right1">
|
||
|
|
<img src="./../assets/icon/subtitle.png" />
|
||
|
|
<span class="subtitle-span">基层治理</span>
|
||
|
|
</div>
|
||
|
|
<div class="subtitle-right2">
|
||
|
|
<img src="./../assets/icon/subtitle.png" />
|
||
|
|
<span class="subtitle-span">北尚诉办</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { debounce } from './../utils/common'
|
||
|
|
export default {
|
||
|
|
name: 'screen-header',
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
titleImg: require('./../assets/icon/title.png'),
|
||
|
|
imgWidth: 2110,
|
||
|
|
imgHeight: 120,
|
||
|
|
scale: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted () {
|
||
|
|
this.setScale()
|
||
|
|
window.addEventListener('resize', debounce(this.setScale))
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getScale () {
|
||
|
|
const oHeader = document.querySelector('#screen-header')
|
||
|
|
const vh = oHeader.clientHeight / this.imgHeight
|
||
|
|
const vw = oHeader.clientWidth / this.imgWidth
|
||
|
|
return vh < vw ? vw : vh
|
||
|
|
},
|
||
|
|
setScale () {
|
||
|
|
this.scale = this.getScale()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
.m-header {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.main-title {
|
||
|
|
margin-left: 499px;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.title-img {
|
||
|
|
width: 2110px;
|
||
|
|
height: 120px;
|
||
|
|
}
|
||
|
|
.title-span {
|
||
|
|
font-size: 46px;
|
||
|
|
font-family: "HYZongYiJ";
|
||
|
|
color: #ffffff;
|
||
|
|
letter-spacing: 8px;
|
||
|
|
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
top: 35%;
|
||
|
|
transform-origin: 0 0;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.subtitle-left,
|
||
|
|
.subtitle-right1,
|
||
|
|
.subtitle-right2 {
|
||
|
|
width: 788px;
|
||
|
|
height: 60px;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.subtitle-span {
|
||
|
|
font-size: 32px;
|
||
|
|
font-family: "Alibaba-PuHuiTi-Bold";
|
||
|
|
background: linear-gradient(0deg, #93c8ff 0%, #ffffff 77.4658203125%);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
top: 40%;
|
||
|
|
transform-origin: 0 0;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.subtitle-left {
|
||
|
|
margin-left: 565px;
|
||
|
|
}
|
||
|
|
.subtitle-right1 {
|
||
|
|
margin-left: 111px;
|
||
|
|
}
|
||
|
|
.subtitle-right2 {
|
||
|
|
margin-left: 176px;
|
||
|
|
}
|
||
|
|
</style>
|