<template>
    <div>
        <Header></Header>
        <div class="top">
            <div class="videoContainer">
                <!-- <video id="back_video" class="video fillWidth" muted   :autoplay="autoplay" loop :controls="false"playsinline preload="auto" crossorigin="anoymous">
                    <source :src="pageData.video" type="video/mp4" />
                </video> -->
                <video id="back_video" class="video fillWidth"  :src="pageData.l_pic1" muted :autoplay="autoplay" loop :controls="false" :webkit-playsinline="true" playsinline x5-playsinline="true" x-webkit-airplay="true"  crossorigin="anoymous" v-if="!flag">
                    <!-- <source :src="pageData.l_pic1" type="video/mp4" /> -->
                </video>
                <el-image  :src="pageData.l_pic" class="video fillWidth" fit="cover" v-if="flag && pageData.l_pic !== undefined"></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: {},
            autoplay: true,
            flag: true
        }
    },
    created() {
        that = this
        that.getConfig()
        that.isBrow()
        let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
        that.flag = flag
    },
    mounted() {
    },
    methods: {
        isBrow() {
            var ua = navigator.userAgent.toLowerCase();
            if(ua.match(/MicroMessenger/i)=="micromessenger" || ua.match(/QQ/i) == "qq") {
                that.autoplay = false
            }
        },
         // 获取基础配置信息
         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 {
        box-sizing: border-box;
        min-height: 1080px !important;
        padding: 269px 151px 0 !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 0;
}
</style>