screen-shibei-new/src/views/screenHeader.vue

<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: 16vw;

    margin-left: 12vw;
    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: 111px;
    margin-right: 195px;
}
</style>