nazw/zyylgNew/src/views/layout/components/layoutHome.vue

<template>
    <div class="one">
        <!-- 首页 -->
        <video class="container" autoplay muted loop width="100%" height="100%">
            <source src="@/assets/img/pcImg/业.mp4" type="video/mp4" />
        </video>
        <div class="container" :style="{ height: bodyHeight }">
            <LayoutHeader></LayoutHeader>

            <div class="container_main">
                <img class="center_img" src="@/assets/img/pcImg/组47.png" alt="" />
                <span class="main_text first_text ellipsis"
                    >南岸区位于重庆市都市区、中心城区、两江四岸核心区，面积262平方公里，</span
                >
                <span class="main_text ellipsis">常住人口约120万，是最能体现重庆山水之城、美丽之地的区域。</span>
                <div class="main_texts ellipsis">面朝大江，波涛江畔的人文盛景</div>
            </div>
        </div>
    </div>
</template>

<script>
import LayoutHeader from '@/components/layoutHeader.vue';
import bodyHeightMixins from '@/mixins/bodyHeight';
export default {
    mixins: [bodyHeightMixins],
    components: {
        LayoutHeader
    },
    data() {
        return {
            activeName: 'first'
        };
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        }
    }
};
</script>

<style scoped lang="less">
.one{
  width: 100%;
  height: 100%;

}
.container {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    // background-image: url('~@/assets/img/pcImg/矩形1拷贝3.png');
    background-size: 100% 100%;

    flex-direction: column;
    z-index: -10;
    object-fit: fill;
}

.container_main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;

    // position: absolute;
    // left: 50%;
    // margin-top: 236px;
    // transform: translate(-50%, -50%);
    .center_img {
        width: 870px;
        height: 119px;
    }

    .main_text {
        font-size: 24px;
        color: #fff;
    }

    .first_text {
        margin: 32px 0 17px 0;
    }

    .main_texts {
        width: 462px;
        height: 66px;
        margin-top: 58px;
        overflow: hidden;
        font-size: 24px;
        line-height: 66px;
        color: #ffffff;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        background: #bfa254;
        border-radius: 6px;
    }
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* 非必须，只是为了制造一行放不下的效果 */
    // max-width: 375px;
}
</style>