<template>
    <div class="component__scroll">
        <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.p_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.p_url1" type="video/mp4" /> -->
                </video>
                <el-image  :src="pageData.p_url" class="video fillWidth" fit="cover" v-if="flag && pageData.p_url !== undefined"></el-image>
            </div>    
            <div class="title">{{ pageData.p_title }}</div>  
            <div class="subTitle" v-html="pageData.p_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.p_content" style="margin-bottom: 99px;"></div>
                        <!-- <div v-html="pageData.info.subTitle"></div> -->
                    </div>
                    <div class="info-img">
                        <el-image  fit="cover" :src="pageData.p_pic" alt=""  v-if="pageData.p_pic != undefind">
                        </el-image>
                        <img src="@/assets/images/common/img_top_bg.png" alt="" class="img_bg">
                    </div>
                </div>
                
            </div>
            <div class="list">
                <div v-for="(item,index) in pageList" :key="index" class="hflex acenter jbetween">
                    <div class="item_left vflex jcenter point" @click="jump(item.url)">
                        <div class="item_left_top">Product Services</div>
                        <div class="item_left_index">{{ index < 10 ? '0' + (index + 1) : index + 1 }}</div>
                    </div>
                    <div class="item_right hflex acenter jbetween point"  @click="jump(item.url)">
                        <div class=" vflex jbetween">
                            <a href="#" class="item_right_text">{{ item.title }}</a>
                            <a href="#" class="item_right_text2" v-html="item.content"></a>
                        </div>
                        <img src="@/assets/images/common/right2.png" alt="" class="icon_right" />
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <!-- <video muted   :autoplay="autoplay" loop :controls="false"playsinline preload="auto" crossorigin="anoymous" :src="pageData.video"></video> -->
            <el-image  fit="cover" :src="pageData.z_pic" alt="" class="img"  v-if="pageData.z_pic != undefind" />
            <div class="bottom_content">
                <div class="title">总结：</div>  
                <div class="subTitle" v-html="pageData.zongjie"></div>  
            </div>
        </div>
        <div class="topping hflex acenter jcenter point" v-if="scroll_top > 500" @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: 'Product',
    components: {
        Header,
        Footer
    },
    data() {
        return {
            pageData: {},
            pageList: [],
            num: 0,
            footer: {},
            scroll_top: 0,
            autoplay: true,
            flag: true
        }
    },
    created() {
        that = this
        that.getConfig()
        that.getData()
        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) => {
                // console.log('基础配置',res)
                if (res.data.code == 1) {
                    that.pageData = res.data.data
                    var temp = that.pageData.p_url.substr(that.pageData.p_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,
                    }
                }
            })
        },
        // 获取产品服务列表
        getData() {
            that.$http.getProductList().then((res) => {
                // console.log('产品服务列表',res);
                if(res.data.code == 1) {
                    that.pageList = res.data.data.list
                }
            })
        },
        // 查看产品详情
        jump(url) {
            window.location.href = url
        },
        // 监听页面滚动
        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%;
}
.list {
    padding: 150px 0 34px;
    width: 100%;
}
.list .item_left {
    width: 450px;
    height: 296px;
    /* padding: 60px 0; */
    border-top: 2px solid #191818;
    /* border-bottom: 2px solid #191818; */
}
.list div:nth-last-child(1) .item_left {
    border-bottom: 2px solid #191818;
}
.list .item_left .item_left_top {
    font-size: 42px;
    font-weight: 400;
    color: #666666;
}
.list .item_left .item_left_index {
    font-size: 140px;
    font-weight: bold;
    color: #333333;
    /* padding-top: 40px; */
}
.list .item_right {
    width: 992px;
    height: 296px;

    padding: 60px 0;
    border-top: 2px solid #191818;
}
.list div:nth-last-child(1) .item_right {
    border-bottom: 2px solid #191818;
}
.list .item_right .item_right_text,.item_right_text2 {
    font-size: 36px;
    font-weight: 500;
    color: transparent;
    max-width: 779px;
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
    line-clamp:2; 
    box-orient:vertical;
    padding: 10px 0;
   
    /* line-height: 48px; */
}
.list .item_right a {
    background-image: linear-gradient(to right , #fb3569 45%, #333 55%);
    background-position: 100%, 50%;
    background-size: 220% 100%;
    transition: 1s ease-out;
    -webkit-background-clip: text;

    background-clip: text;
    background-repeat: no-repeat;
}


.list .item_right:hover .item_right_text {
    /* color: #666; */
    background-position: 0% 50%;
}

.list .item_right:hover .item_right_text2 {
    /* color: #666; */
    background-position: 0% 50%;

}

.list .item_right .icon_right {
    width: 129px;
    height: 106px;
}
.list .item_right:hover .icon_right {
    animation: tran 0.2s linear;
    animation-iteration-count: 1
}
@keyframes tran {
    0% {
        transform: translate3d(-50px, 0 ,0);
        opacity: 0;
    }
    
    100% {
        transform: translate(0 ,0);
        opacity: 1;
    }
 }
.bottom {
    width: 100%;
    height: 100vh;
    position: relative;
    background: #fff;
    box-sizing: border-box;
    padding: 82px 200px;
}
.bottom .img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
}
.bottom .bottom_content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 180px 301px;
}
.bottom .bottom_content .title,.subTitle {
    font-size: 60px;
    font-weight: 600;
    color: #fff;
    line-height: 60px;
}
.bottom .bottom_content .title {
    padding-bottom: 44px;
}
.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;
}

.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: 1080px;
}
.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%;
}
.list {
    padding: 150px 0 34px;
    width: 100%;
}
.list .item_left {
    width: 450px;
    height: 296px;
    /* padding: 60px 0; */
    border-top: 2px solid #191818;
    /* border-bottom: 2px solid #191818; */
}
.list div:nth-last-child(1) .item_left {
    border-bottom: 2px solid #191818;
}
.list .item_left .item_left_top {
    font-size: 42px;
    font-weight: 400;
    color: #666666;
}
.list .item_left .item_left_index {
    font-size: 140px;
    font-weight: bold;
    color: #333333;
    /* padding-top: 40px; */
}
.list .item_right {
    width: 992px;
    height: 296px;

    padding: 60px 0;
    border-top: 2px solid #191818;
}
.list div:nth-last-child(1) .item_right {
    border-bottom: 2px solid #191818;
}
.list .item_right .item_right_text,.item_right_text2 {
    font-size: 36px;
    font-weight: 500;
    color: transparent;
    max-width: 779px;
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
    line-clamp:2; 
    box-orient:vertical;
    padding: 10px 0 0;
   
    /* line-height: 48px; */
}
.list .item_right a {
    background-image: linear-gradient(to right , #fb3569 45%, #333 55%);
    background-position: 100%, 50%;
    background-size: 220% 100%;
    transition: 1s ease-out;
    -webkit-background-clip: text;
    width: 100%;
    background-clip: text;
    background-repeat: no-repeat;
}


.list .item_right:hover .item_right_text {
    /* color: #666; */
    background-position: 0% 50%;
}

.list .item_right:hover .item_right_text2 {
    /* color: #666; */
    background-position: 0% 50%;

}

.list .item_right .icon_right {
    width: 129px;
    height: 106px;
}
.list .item_right:hover .icon_right {
    animation: tran 0.2s linear;
    animation-iteration-count: 1
}
@keyframes tran {
    0% {
        transform: translate3d(-50px, 0 ,0);
        opacity: 0;
    }
    
    100% {
        transform: translate(0 ,0);
        opacity: 1;
    }
 }
.bottom {
    width: 100%;
    height: 1080px;
    position: relative;
    background: #fff;
    box-sizing: border-box;
    padding: 82px 200px;
}
.bottom .img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
}
.bottom .bottom_content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 180px 301px;
}
.bottom .bottom_content .title,.subTitle {
    font-size: 60px;
    font-weight: 600;
    color: #fff;
    line-height: 60px;
}
.bottom .bottom_content .title {
    padding-bottom: 44px;
}
.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;
}

}

</style>