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

<template>
    <div id="content"  class="vflex">
        <div class="js_snap js_intro is_top is_started" data-snap-needs-cancel="" data-enable-bit-scroll="" data-top="">
            <header id="header">
                <div class="inner">
                    <div class="btn menu fixed"> 
                        <button class="fit" @mouseover="mouseOver()" @mouseleave="mouseLeave()" :class="over?'over':''" @click="toshow()">
                            <ul class="absolute full__w" v-if="!show" style="left: 0">
                                <li class="absolute" :class="over?'absolute1':''"></li>
                                <li class="absolute" :class="over?'absolute2':''"></li>
                                <li class="absolute" :class="over?'absolute3':''"></li>
                            </ul>
                            <ul class="absolute full__w" v-if="show">
                                <li class="absolute_1" :class="over?'absolute_11':''"></li>
                                <li class="absolute_2"></li>
                                <li class="absolute_3" :class="over?'absolute_33':''"></li>
                            </ul>
                        </button>
                    </div>
                </div>
                <!-- 点击弹出的黑框 -->
                <div id="floating_menu" ref="floating_menu">
                    <div class="inner">
                        <div class="frame">
                            <div class="title1">绿巍仿真植物有限公司</div>
                            <div class="line"></div>
                            <div class="text_box point" @click="toDetail(1)">
                                <div class="text1">产品服务</div>
                                <div class="text2">Product Services</div>
                            </div>
                            <div class="text_box point" @click="toDetail(2)">
                                <div class="text1">新闻资讯</div>
                                <div class="text2">News</div>
                            </div>
                            <div class="text_box point" @click="toDetail(3)">
                                <div class="text1">跨境贸易</div>
                                <div class="text2">Cross-border Trade</div>
                            </div>
                            <div class="text_box point" @click="toDetail(4)">
                                <div class="text1">关于我们</div>
                                <div class="text2">About us</div>
                            </div>
                            <div class="text_box point" @click="toDetail(5)">
                                <div class="text1">联系我们</div>
                                <div class="text2">Contact us</div>
                            </div>
                            <div class="line"></div>
                        </div>
                    </div>
                </div>
            </header>
           
            
        </div>
        <div class="shua" :class="show_white?'shua_js':''"></div>
        
        <section class="one">
            <div class="videoContainer">
                <video id="back_video" :style="fixStyle" class="video fillWidth" muted autoplay loop playsinline preload="metadata" crossorigin="anoymous">
                    <source :src="background" type="video/mp4" />
                </video>
                
            </div>
            <div class="subTitle">
                <h2 v-html="pageData.subTitle"></h2>
            </div>
            <div class="title">
                <div v-show="scroll_top == 0">
                    <h1 :style="show_white?'color: #fff':''">{{pageData.title}}</h1>
                    <div class="line" :style="show_white?'background: rgba(255,255,255,.5)':''"></div>
                    <div class="hflex jbetween" v-show="show_white">
                        <div class="text point">{{pageData.date}}</div>
                        <div class="hflex point" @click="scorll_down(800)">
                            <img class="down" src="@/assets/images/common/fv-arrow-down.svg" alt="" />
                            <div class="text">向下滑动</div>
                        </div>
                    </div>
                </div>
                <div class="content" v-html="pageData.content"></div>

            </div>
            <div class="icon_down vflex acenter jbetween" v-show="scroll_top > 200 && scroll_top < 1500" @click="scorll_down2(-1)">
                <img src="@/assets/images/common/icon-down-1.png" alt="" />
                <img src="@/assets/images/common/icon-down-2.png" alt="" />
            </div>

        </section>
        <div v-for="(item,index) in pageData.list" :key="index" class="two">
            <div class="video_bg" :id="'video' + index">
                <video :src="item.background" muted autoplay loop playsinline preload="metadata" crossorigin="anymous"></video>
                <div class="content hflex jbetween">
                    <div class="content_left">
                        <div class="name">{{ item.name }}</div>
                        <div class="wenan" v-html="item.text"></div>
                    </div>
                    <div class="content_right vflex acenter jend">
                        <div class="vflex acenter">
                            <div v-for="(items,indexs) in pageData.list.length" :key="indexs">
                                <div class="circle point" :class="index == indexs?'circle_active':''" @click="jump(indexs)"></div>
                            </div>
                            <div class="icon_down2 point vflex acenter jbetween" @click="scorll_down2(index + 1)">
                                <img src="@/assets/images/common/icon-down-1.png" alt="" />
                                <img src="@/assets/images/common/icon-down-2.png" alt="" />
                            </div>
                        </div>
                        <div class="right_index">
                            <span class="indexs">{{ index < 10 ? '0' + (index + 1) : index + 1 }}</span>
                            <span>/{{ pageData.list.length < 10 ? '0' + pageData.list.length : pageData.list.length }}</span>
                        </div>
                    </div>
                </div>
            </div>
           
        </div>
        <div class="three">
            <div class="video_bg">
                <video id="videos" :src="pageData.background" muted autoplay loop playsinline preload="metadata" crossorigin="anymous"></video>
            </div>
            <div class="three_text" v-html="pageData.text"></div> 
        </div>
        <Footer></Footer>   
    </div>
</template>
<script>
import { getSlider } from '@/utils/common'
import Footer from '@/components/footer.vue'
var that = ''
export default {
    name: 'index',
    components: {
        Footer
    },
    data() {
        return {
            show: false,
            over: false,
            show_white: false,
            fixStyle: {},
            pageData: {
                title: '绿巍仿真植物有限公司',
                subTitle: '<p>加密仿真草坪	</p><br><p>加密仿真草坪环保易用	</p>',
                date: '2023.01.01',
                content: `<p>注塑仿真草坪和编织仿真草坪</p><br><p>注塑仿真草坪采用注塑工艺	</p><p>编织草坪以仿草叶状的合成纤维。</p>`,
                background: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
                list: [
                    {
                        background: require('@/assets/images/common/snsdyvideodownload.mp4'),
                        name: '加密仿真草坪	',
                        text: `<p>防火阻燃，为生活增添一份色彩</p></br><p>注塑仿真草坪和编织仿真草坪 </p><p>注塑仿真草坪采用注塑工艺 </p><p>编织草坪以仿草叶状的合成纤维。</p>`
                    },
                    {
                        background: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
                        name: '加密仿真草坪	',
                        text: `<p>防火阻燃，为生活增添一份色彩</p></br><p>注塑仿真草坪和编织仿真草坪 </p><p>注塑仿真草坪采用注塑工艺 </p><p>编织草坪以仿草叶状的合成纤维。</p>`
                    },
                    {
                        background: require('@/assets/images/common/snsdyvideodownload.mp4'),
                        name: '加密仿真草坪	',
                        text: `<p>防火阻燃，为生活增添一份色彩</p></br><p>注塑仿真草坪和编织仿真草坪 </p><p>注塑仿真草坪采用注塑工艺 </p><p>编织草坪以仿草叶状的合成纤维。</p>`
                    },
                    {
                        background: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
                        name: '加密仿真草坪	',
                        text: `<p>防火阻燃，为生活增添一份色彩</p></br><p>注塑仿真草坪和编织仿真草坪 </p><p>注塑仿真草坪采用注塑工艺 </p><p>编织草坪以仿草叶状的合成纤维。</p>`
                    },
                    {
                        background: require('@/assets/images/common/snsdyvideodownload.mp4'),
                        name: '加密仿真草坪	',
                        text: `<p>防火阻燃，为生活增添一份色彩</p></br><p>注塑仿真草坪和编织仿真草坪 </p><p>注塑仿真草坪采用注塑工艺 </p><p>编织草坪以仿草叶状的合成纤维。</p>`
                    }
                ],
                text: `<p>加密仿真草坪</p><p>防火阻燃，为生活增添一份色彩</p><p>注塑仿真草坪和编织仿真草坪</p><p>注塑仿真草坪采用注塑工艺</p><p>编织草坪以仿草叶状的合成纤维</p>`
            },
            background: require('@/assets/images/common/3085c90d70a1733d1bd67ee7f9f5a3e6.mp4'),
            scroll_top: 0,
            windowWidth: 0,
            windowHeight: 0,
            index: -1
        }
    },
    created() {
        that = this
        that.getData()
    },
    mounted() {
      this.getVideoStyle()
      window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
    },
    methods: {
        getData() {
            that = this
            console.log(this.show_white);
            that.background = that.pageData.background
            setTimeout(() => {
                this.show_white = true
            }, 1000);

        },
        async fetchData() {
            const data = {
                level: 1,
                hot: 1,
                name: ''
            }
            try {
                getSlider(data).then((res) => {
                    console.log(res)
                })
            } catch(error) {

            }
        },
        //监听屏幕大小实时给播放器设置宽高
        getVideoStyle() {
            window.onresize = () => {
            that.windowWidth = document.body.clientWidth
            that.windowHeight = document.body.clientHeight
            const windowAspectRatio = that.windowHeight / that.windowWidth
            // console.log(windowWidth, windowHeight, windowAspectRatio, '屏幕实时大小')
            let videoWidth
            let videoHeight
            if (windowAspectRatio < 0.5625) {
                videoWidth = that.windowWidth
                videoHeight = videoWidth * 0.5625
                this.fixStyle = {
                    height: that.windowWidth * 0.5625 + 'px',
                    width: that.windowWidth + 'px',
                    'margin-bottom': (that.windowHeight - videoHeight) / 2 + 'px',
                    'margin-left': 'initial'
                }
            } else {
                videoHeight = that.windowHeight
                videoWidth = videoHeight / 0.5625
                this.fixStyle = {
                    height: that.windowHeight + 'px',
                    width: that.windowHeight / 0.5625 + 'px',
                    'margin-left': (that.windowWidth - videoWidth) / 2 + 'px',
                    'margin-bottom': 'initial'
                }
            }
            }
            window.onresize()
        },
        toshow() {
            if(this.show) {
                this.$refs.floating_menu.style.display = 'none';
                this.show = false
            } else {
                this.$refs.floating_menu.style.display = 'block';
                this.show = true
            }
           
        },
        mouseOver() {
            this.over = true
        },
        mouseLeave() {
            this.over = false
        },
        toDetail(index) {
            if(index == '1') {
                that.$router.push('/product')
            } else if(index == '2') {
                that.$router.push('/news')
            } else if(index == '3') {
                that.$router.push('/trade')
            } else if(index == '4') {
                that.$router.push('/about')
            } else if(index == '5') {
                that.$router.push('/contact')
            }
        },
        handleScroll() {
            that = this
            
            this.scroll_top = document.documentElement.scrollTop
            const clientHeight = document.documentElement.clientHeight;
            
        },
        scorll_down(value) {
            console.log(value)
            document.documentElement.scrollTop = this.scroll_top + value
            this.scroll_top = document.documentElement.scrollTop
        },
        scorll_down2(index) {
            console.log(that.index)
            that.index = index
            if(that.index == 5) {
                document.querySelector('#videos').scrollIntoView({
                    block: 'start',
                    behavior: 'smooth'
                })
                return
            }
            if(that.index == -1) {
                that.index = 0
            }
            document.querySelector('#video' + that.index).scrollIntoView({
                block: 'start',
                behavior: 'smooth'
            })
        },
        jump(index) {
            that.index = index
            document.querySelector('#video' + that.index).scrollIntoView({
                block: 'start',
                behavior: 'smooth'
            })
        }
    }
}
</script>
<style scoped> 
@import '../assets/css/common.css';
@import '../assets/css/top.css';
@import '../assets/css/index.css';

</style>