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

<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.k_url1" 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.k_url1" type="video/mp4" /> -->
                </video>
                <el-image  :src="pageData.k_url" class="video fillWidth" fit="cover" v-if="flag && pageData.k_url !== undefined"></el-image>
            </div>    
            <div class="title">{{ pageData.k_title }}</div>  
            <div class="subTitle" v-html="pageData.x_subtitle"></div>  
            <div class="line"></div> 
        </div>
        <div class="center">
            <div class="info">
                <div class="info-h hflex acenter jbetween">
                    <div class="info-text">
                        <div v-html="pageData.k_content" style="margin-bottom: 99px;"></div>
                        <!-- <div v-html="pageData.info.subTitle"></div> -->
                    </div>
                    <div class="info-img">
                        <el-image  fit="cover" :src="pageData.k_pic" alt=""  v-if="pageData.k_pic !== undefind">
                        </el-image>
                        <img src="@/assets/images/common/img_top_bg.png" alt="" class="img_bg">
                    </div>
                </div>
                
            </div>
            <div class="list">
                <div class="line"></div>
                <div  class="hflex acenter fwrap imgs">
                    <div v-for="(item,index) in pageList" :key="index" class="list_item">
                        <el-image  fit="cover" :src="item.url" alt="" class="img"  v-if="item.url !== undefind"/>
                        <div class="text">{{ item.title }}</div>
                    </div> 
                </div>
                
            </div> 
        </div>
        <div class="topping hflex acenter jcenter point" v-if="scroll_top > 1000" @click="toTop">
            <img src="@/assets/images/common/topping.png" alt="">
        </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: 'Trade',
    components: {
        Header,
        Footer
    },
    data() {
        return {
            pageData: {},
            pageList: [],
            footer: {},
            scroll_top: 0,
            autoplay: true,
            flag: true
        }
    },
    created() {
        that = this
        that.getConfig()
        that.getList()
        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() {
        window.addEventListener('scroll', this.handleScroll) // 监听页面滚动

    },
    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.k_url.substr(that.pageData.k_url.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,
                    }
                }
            })
        },
        // 获取跨境贸易信息
        getList() {
            that.$http.getTradeList().then((res) => {
                // console.log('跨境贸易',res);
                if(res.data.code == 1) {
                    that.pageList = res.data.data.list
                }
            })
        },
        // 监听页面滚动
        handleScroll() {
            this.scroll_top = document.documentElement.scrollTop
        },
        // 返回顶部
        toTop() {
            document.body.scrollTop = 0
            document.documentElement.scrollTop = 0
            this.scroll_top = document.documentElement.scrollTop
        }
    }
}
</script>
<style scoped> 
.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;
    line-height: 90px;
}
.top .line {
    width: 1720px;
    height: 4px;
    background: #FFFFFF;
    margin: 58px 0;
}
.center {
    background: #fff;
    box-sizing: border-box;
    padding: 0 202px;
    min-height: 100vh;
}
.info {
    width: 100%;
    padding: 150px 0 75px;
    /* padding: 129px 0 0; */
}
.info-h {
    padding: 129px 0 0;
    border-top: 4px solid #ccc;
}
.info-h .info-text {
    font-size: 80px;
    font-weight: 500;
    color: #333333;
    margin-right: 38px;
}
.info-h .info-img {
    width: 1058px;
    height: 722px;
    position: relative;
}
/deep/ .info-h .info-img .el-image {
    width: 100%;
    height: 100%;
}
.info-h .info-img .img_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.center .list {
    width: 100%;
    padding: 150px 0 75px;
}
.center .list .line {
    width: 100%;
    height: 4px;
    background: #CCCCCC;
}
.center .list .imgs {
    margin: 66px 0 80px;
}
.center .list .list_item {
    width: 470px;
    height: 376px;
    background: #FFFFFF;
    margin: 0 30px 28px 0;
    position: relative;
}
.center .list .list_item .img {
    width: 100%;
    height: 100%;
    border-radius: 10px;

}
.center .list .list_item:nth-child(3n+3) {
    margin: 0 0 28px;
}
.center .list .list_item .text {
    width: 100%;
    text-align: center;
    max-width: 470px;
    height: 128px;
    line-height: 128px;
    color: #fff;
    background: rgba(0,0,0,.4);
    opacity: 0;
    border-radius: 0px 0px 10px 10px;
    position: absolute;
    bottom: 0;
    transition-delay: 500ms;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;

}
.center .list .list_item:hover .text {
    opacity: 1;
}
.topping {
    position: fixed;
    bottom: 100px;
    right: 45px;
    z-index: 999;
    width: 100px;
    height: 100px;
    background: #000000;
    opacity: 0.3;
    border-radius: 10px;
}
.topping img {
    width: 53px;
    height: 57px;
}
@media (max-width: 750px) {
    .top {
        box-sizing: border-box;
        padding: 464px 100px 0;
        min-height: 1080px !important;
    }

    .center {
        min-height: 1080px !important;
    }
    .top .title {
        padding: 0 151px 200px;
    }
    .center .list .list_item .text {
        opacity: 1 !important;
    }
}
</style>