PC-xinxuan/xinxuan/src/view/contact.vue

<template>
    <div>
        <Header></Header>
        <div class="top">
            <div class="videoContainer">
                <!-- <video id="back_video" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
                    <source :src="pageData.video" type="video/mp4" />
                </video> -->
                <video id="back_video" :style="fixStyle" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous" v-if="pageData.type=='video'">
                    <source :src="pageData.l_pic" type="video/mp4" />
                </video>
                <el-image :src="pageData.l_pic" class="video fillWidth" fit="cover" v-if="pageData.type=='image'"></el-image>
            </div>    
            <div class="subTitle" v-html="pageData.l_content"></div>  
            <div class="text">电话：{{ pageData.l_phone }}</div>
            <div class="text">传真：{{ pageData.l_fax }}</div>
            <div class="text">地址：{{ pageData.l_address }}</div>
            <div class="line"></div> 
        </div>
        <Footer :footer="footer"></Footer>

    </div>
</template>
<script>
import Header from '@/components/header.vue'
import Footer from '@/components/footer.vue'
var that = ''
export default {
    name: 'Contact',
    components: {
        Header,
        Footer
    },
    data() {
        return {
            pageData: { },
            footer: {}
        }
    },
    created() {
        that = this
        that.getConfig()
    },
    mounted() {
    },
    methods: {
         // 获取基础配置信息
         getConfig() {
            that.$http.getConfig().then((res) => {
                if(res.data.code == 1) {
                    that.pageData = res.data.data
                    var temp = that.pageData.l_pic.substr(that.pageData.l_pic.length - 3,3)
                    var type = ''
                    if(temp == 'jpg' || temp == 'png' || temp == 'gif') {
                        type = 'image'
                    } else if(temp == 'mp4' || temp == 'avi') {
                        type = 'video'
                    }
                    that.$set(that.pageData,'type',type)
                    that.footer = {
                        company: that.pageData.company,
                        phone: that.pageData.phone,
                        address: that.pageData.address,
                    }
                }
            })
        }
        
    }
}
</script>
<style scoped> 
@media (max-width: 750px) {
    .top {
        padding: 60vh 151px 200px !important;
    }
}
.top {
    box-sizing: border-box;
    padding: 500px 100px 0;
    min-height: 100vh;
}
.top .title {
    font-size: 60px;
    font-weight: 500;
    color: #fff;
    padding-bottom: 200px;
    padding-left: 151px;
}
.top .subTitle {
    font-size: 60px;
    font-weight: 500;
    color: #fff;
    padding-left: 151px;
    padding-bottom: 113px;
    line-height: 90px;
}
.top .text {
    max-width: 100% !important;
    font-size: 36px;
    font-weight: 500;
    color: #fff;
    line-height: 50px;
    padding-left: 151px;
}
.top .line {
    width: 1720px;
    height: 4px;
    background: #FFFFFF;
    margin: 58px 0;
}
</style>