{"version":3,"file":"js/products.9436c500.js","mappings":"uZA0BA,MASMA,GAAkBC,EAAAA,EAAAA,IAAI,M,OAE5BC,EAAAA,EAAAA,KAAU,KACR,IAAIC,EAAAA,EAAOH,EAAgBI,MAAO,CAChCC,MAAM,EAKNC,qBAAqB,EACrBC,cAAe,EACfC,aAAc,GACdC,UAAU,EACVC,gBAAgB,EAChBC,sBAAsB,EACtBC,OAAQ,OAORC,WAAY,CAGV,GAEH,I,wRCxDH,MAAMC,GAA2B,OAAgB,EAAQ,CAAC,CAAC,YAAY,qBAEvE,Q,kyCCkOAC,EAAe,CACXC,IAAAA,GACI,MAAO,CACHC,WAAYC,EAAQ,MACpBC,WAAYD,EAAQ,MACpBE,WAAYF,EAAQ,KACpBG,YAAaH,EAAQ,MACrBI,YAAaJ,EAAQ,KACrBK,SAAU,OACVC,WAAY,IACZC,SAAU,QACVC,YAAY,OACZC,UAAU,QAGlB,EACAC,QAAS,CACLC,WAAAA,CAAYC,GACRC,QAAQC,IAAIF,GACZ,MAAMG,EAAMC,SAASC,eAAe,QACpCC,KAAKb,SAAWU,EAAII,aAAeJ,EAAIK,OAASL,EAAIM,YAEhDT,EAAEU,OAAS,IACXT,QAAQC,IAAII,KAAKb,UAEjBa,KAAKb,SAAY,GAAEa,KAAKb,SAAW,MAEnCQ,QAAQC,IAAII,KAAKb,UAIjBQ,QAAQC,IAAII,KAAKZ,YAEbY,KAAKb,SAAW,OAEhBa,KAAKZ,WAAY,IACjBY,KAAKV,YAAc,SAiB/B,I,+CAnIR,MAAMe,EAAe,WACjB,IAAItC,EAAAA,EAAO,OAAQ,CACfE,MAAM,EACNqC,SAAU,CACNC,MAAO,IACPC,sBAAsB,GAE1BtC,qBAAqB,EACrBC,cAAe,EACfC,aAAc,GACdC,UAAU,EACVC,gBAAgB,EAChBC,sBAAsB,EACtBC,OAAQ,OACRC,WAAY,CACRgC,OAAQ,gBACRC,OAAQ,mBAGZ,IAAI3C,EAAAA,EAAO,OAAQ,CACfE,MAAM,EACNqC,SAAU,CACNC,MAAO,IACPC,sBAAsB,GAE1BrC,cAAe,IACfC,aAAc,GACduC,eAAe,EACfC,YAAa,CAET,KAAM,CACFzC,cAAe,IACfC,aAAc,KAGtByC,WAAY,CACRC,GAAI,qBACJC,YAAa,aACbC,kBAAmB,oBACnBC,WAAW,GAGfxC,WAAY,CACRgC,OAAQ,sBAIxB,GAEqB5C,EAAAA,EAAAA,IAAI,CACrB,CACIqD,SAAUpC,EAAQ,MAClBqC,KAAM,oDAEV,CACID,SAAUpC,EAAQ,MAClBqC,KAAM,M,OAIdrD,EAAAA,EAAAA,KAAU,KACNuC,GAAc,I,y4CClNlB,MAAM,GAA2B,OAAgB,EAAQ,CAAC,CAAC,YAAY,qBAEvE,O","sources":["webpack://viewpt-member/./src/components/VptSwiper4.vue","webpack://viewpt-member/./src/components/VptSwiper4.vue?2f8f","webpack://viewpt-member/./src/views/index.vue","webpack://viewpt-member/./src/views/index.vue?fb31"],"sourcesContent":["<template>\n  <vpt-v-group :black-bg=\"blackBg\" >\n    <div class=\"swiper-container pw-24\" ref=\"swiperContainer\" :style=\"{\n      height: height,  \n    }\">\n      <div class=\"swiper-wrapper\">\n        <slot></slot>\n      </div>\n    </div>\n    <!--\n    <div class=\"my-swiper-pagination pw-24\" ref=\"swiperPagination\">\n    </div>\n    -->\n  </vpt-v-group>\n</template>\n\n<script setup>\n\nimport Swiper from 'swiper'\n\nimport { ref, onMounted } from 'vue'\n\nimport VptButton from './VptButton.vue';\nimport VptHGroup from './VptHGroup.vue';\nimport VptVGroup from './VptVGroup.vue';\n\nconst props = defineProps({\n  title: String,\n  height: String,\n  blackBg: Boolean,\n})\n\n//const swiperPagination = ref(null)\n//const nextEl = ref(null)\n\nconst swiperContainer = ref(null)\n\nonMounted(() => {\n  new Swiper(swiperContainer.value, {\n    loop: false,\n    //autoplay: {\n    //  delay: 3000,\n    //  disableOnInteraction: false\n    //},\n    updateOnImagesReady: true,\n    slidesPerView: 1,\n    spaceBetween: 20,\n    observer: true,\n    observeParents: true,\n    observeSlideChildren: true,\n    effect: 'fade',\n    //pagination: {\n    //  el: swiperPagination.value,\n    //  bulletClass: 'bullet',\n    //  bulletActiveClass: 'bullet-active',\n    //  clickable: true,\n    //},\n    navigation: {\n      //nextEl: nextEl.value.$el,\n      //nextEl: '.banner_tab_l',\n      //prevEl: '.banner_tab_r',\n    },\n })\n})\n\n</script>\n\n<style scoped lang=\"scss\">\n\n.my-swiper-pagination {\n  display: flex;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n  column-gap: 1.375rem;\n  background-color: rgb(255, 255, 255, 0.1);\n  height: 3.75rem;\n  border-radius: 1.75rem;\n  padding: 0 1.75rem;\n  :deep(.bullet) {\n    width: 0.5rem;\n    height: 0.5rem;\n    border-radius: 50%;\n    background: rgba(255, 255, 255, 0.3);\n    &.bullet-active {\n      width: 2.5rem;\n      height: 0.5rem;\n      border-radius: 1rem;\n      background: #FFFFFF;\n      transition: all 0.5s;\n    }\n  }\n}\n\n</style>","import script from \"./VptSwiper4.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./VptSwiper4.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./VptSwiper4.vue?vue&type=style&index=0&id=fe55da08&scoped=true&lang=scss\"\n\nimport exportComponent from \"../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-fe55da08\"]])\n\nexport default __exports__","<template>\r\n  <!-- banner -->\r\n  <vpt-swiper4 class=\"wow animate__animated animate__fadeInUp pw-24\">\r\n    <vpt-h-group size=\"large\" block :bg-src=\"require('../assets/img/banner/index_banner.jpg')\" radius slide class=\"vh-21 pw-24\">\r\n      <vpt-heading align-self=\"end\" align-left size=\"h2\" white class=\"pw-12 pw-s-24\">THE WORLD’S FIRST 4K VR 3D LIVE STREAMING CAMERA</vpt-heading>\r\n    </vpt-h-group>\r\n    <vpt-h-group size=\"large\" block :bg-src=\"require('../assets/img/index/index_first_down_l.jpg')\" radius slide class=\"vh-22 pw-24\">\r\n      <vpt-heading align-self=\"end\" align-left size=\"h2\" white class=\"pw-12 pw-s-24\"></vpt-heading>\r\n    </vpt-h-group>\r\n  </vpt-swiper4>\r\n  <!--\r\n  <div class=\"banner_viedo\">\r\n      <img class=\"banner_play_pic\" src=\"../assets/img/banner/banner_viedo.jpg\" alt=\"\">\r\n      <img class=\"banner_play\" src=\"../assets/img/banner/play.png\" alt=\"\">\r\n  </div>  \r\n  -->\r\n\r\n  <!-- 第一部分 -->\r\n         <!--\r\n\r\n  <div class=\"content wow animate__animated animate__fadeInUp\">\r\n      <div class=\"title center\">\r\n          <h1>Popular on the Viewpt Store.</h1>\r\n      </div>\r\n      <div class=\"index_first\">\r\n          <div class=\"index_first_up\">\r\n              <div class=\"title_box\">\r\n                  <div class=\"title_box_l\">\r\n                      <div class=\"title_box_l_main\">VIEWPT REALIA</div>\r\n                      <div class=\"title_box_l_num\">\r\n                          <span>Form</span>\r\n                          <span>$549</span>\r\n                          <s>$699</s>\r\n                      </div>\r\n                      <div class=\"title_box_l_num_red\">\r\n                          Save<span>$150</span>\r\n                      </div>\r\n                  </div>\r\n                  <div class=\"title_box_r\">\r\n                      <div class=\"title_box_l_video\">\r\n                          <div class=\"title_box_l_video_title\">Watch Video</div><i class=\"iconfont\">&#xe65c;</i>\r\n                      </div>\r\n                      <div class=\"title_box_l_buy\">Buy</div>\r\n                  </div>\r\n              </div>\r\n\r\n              <div class=\"swiper-container\" id=\"two\">\r\n                  <div class=\"swiper-wrapper\">\r\n                      <div class=\"swiper-slide index_first_up_swiper\">\r\n                          <div class=\"swiper_1\">\r\n                          </div>\r\n                      </div>\r\n                      <div class=\"swiper-slide index_first_up_swiper\">\r\n                          <div class=\"swiper_2\">\r\n                          </div>\r\n                      </div>\r\n                      <div class=\"swiper-slide index_first_up_swiper\">\r\n                          <div class=\"swiper_2\">\r\n                          </div>\r\n                      </div>\r\n                      <div class=\"swiper-slide index_first_up_swiper\">\r\n                          <div class=\"swiper_2\">\r\n                          </div>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n              <div class=\"swiper_kz_box\">\r\n                  <div class=\"swiper_kz\">\r\n                      <div class=\"swiper-pagination\">\r\n                          <span class=\"two-bullet\"></span>\r\n                      </div>\r\n                  </div>\r\n                  <div class=\"swiper_next\">\r\n                      <div class=\"banner_two_tab_r\">\r\n                          <i class=\"iconfont\">&#xea82;</i>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n          </div>\r\n          <div class=\"index_first_down wow animate__animated animate__fadeInUp\">\r\n              <div class=\"index_first_down_l\">\r\n                  <img :src=\"firstDownL\" alt=\"\">\r\n                  <div class=\"index_first_down_l_main\">\r\n                      <div class=\"index_first_down_l_title\">VIEWPT NEW PRODUCT</div>\r\n                      <div class=\"index_first_down_l_lest\">The World's First 4K VR 3D Live Streaming Camera</div>\r\n                      <div class=\"index_first_down_l_button\">Unlisted</div>\r\n                  </div>\r\n              </div>\r\n              <div class=\"index_first_down_r\">\r\n                  <img :src=\"firstDownR\" alt=\"\">\r\n                  <div class=\"index_first_down_r_main\">\r\n                      <div class=\"index_first_down_r_title\">VIEWPT VR180 NANO</div>\r\n                      <div class=\"index_first_down_r_lest\">The World’s First 4K VR 3D Live Streaming Camera</div>\r\n                  </div>\r\n              </div>\r\n          </div>\r\n      </div>\r\n  </div>\r\n-->\r\n\r\n  <!-- 第二部分 -->\r\n  <div class=\"content wow animate__animated animate__fadeInUp pw-24\">\r\n      <div class=\"title left\">\r\n          <h1>{{ $t('hotNews') }}</h1>\r\n      </div>\r\n      <div class=\"index_second\">\r\n          <div class=\"index_second_up\">\r\n              <div class=\"index_second_up_img\">\r\n                  <img :src=\"secondLeft\" alt=\"\">\r\n              </div>\r\n              <div class=\"index_second_up_text\">\r\n                  <div class=\"index_second_up_title\">THE WORLD’S FIRST 4K VR 3D LIVE STREAMING CAMERA</div>\r\n                  <div class=\"index_second_up_lest\">Live streaming or capture 4K@30FPS Video compatible with Google\r\n                      VR180 specification</div>\r\n                  <div class=\"index_second_up_button\">View</div>\r\n              </div>\r\n          </div>\r\n          <div class=\"index_second_down wow animate__animated animate__fadeInUp\">\r\n              <div class=\"index_second_down_l\">\r\n                  <img :src=\"secondDownL\" alt=\"\">\r\n                  <div class=\"index_second_down_l_main\">\r\n                      <div class=\"index_first_down_l_title\">THE WORLD'S FIRST 4K VR 3D LIVE STREAMING CAMERA</div>\r\n                  </div>\r\n              </div>\r\n              <div class=\"index_second_down_r\">\r\n                  <img :src=\"secondDownR\" alt=\"\">\r\n                  <div class=\"index_second_down_r_main\">\r\n                      <div class=\"index_first_down_r_title\">THE WORLD’S FIRST 4K VR 3D LIVE STREAMING CAMERA</div>\r\n                  </div>\r\n              </div>\r\n          </div>\r\n      </div>\r\n  </div>\r\n\r\n  <!-- 第三部分 -->\r\n\r\n  <div class=\"content wow animate__animated animate__fadeInUp\">\r\n      <div class=\"index_thirdly\">\r\n          \r\n          <div class=\"productDrawing\" @mousewheel=\"handerPictu\">\r\n              <div class=\"index_thirdly_title\">THE WORLD’S FIRST 4K VR 3D LIVE STREAMING CAMERA</div>\r\n              <div :style=\"{opacity: imgOpacity, display: imgblock }\" class=\"productBg\">\r\n                  <div  class=\"productDrawing_Img\">\r\n                      <img id=\"oImg\" :style=\"{  width: imgWidth + 'px'}\" src=\"../assets/img/index/LOGO.svg\" alt=\"\"/>\r\n                  </div>\r\n              </div>\r\n          </div>\r\n          <!-- <img src=\"../assets/img/index/logo_bg.png\" alt=\"\"> -->\r\n      </div>\r\n      <!-- <div class=\"index_thirdly\">\r\n          123\r\n      </div> -->\r\n  </div>\r\n</template>\r\n\r\n<script setup>\r\nconst bannerPoint1 = function () {\r\n    new Swiper(\"#one\", {\r\n        loop: true,\r\n        autoplay: {\r\n            delay: 3000,\r\n            disableOnInteraction: false\r\n        },\r\n        updateOnImagesReady: true,\r\n        slidesPerView: 1,\r\n        spaceBetween: 20,\r\n        observer: true,\r\n        observeParents: true,\r\n        observeSlideChildren: true,\r\n        effect: 'fade',\r\n        navigation: {\r\n            nextEl: '.banner_tab_l',\r\n            prevEl: '.banner_tab_r',\r\n        },\r\n    }),\r\n        new Swiper(\"#two\", {\r\n            loop: true,\r\n            autoplay: {\r\n                delay: 3000,\r\n                disableOnInteraction: false\r\n            },\r\n            slidesPerView: '1',\r\n            spaceBetween: 20,\r\n            simulateTouch: true,\r\n            breakpoints: {\r\n                //当宽度小于等于768时显示\r\n                1024: {\r\n                    slidesPerView: '2',\r\n                    spaceBetween: 20\r\n                },\r\n            },\r\n            pagination: {\r\n                el: \".swiper-pagination\",\r\n                bulletClass: 'two-bullet',\r\n                bulletActiveClass: 'two-bullet-active',\r\n                clickable: true,\r\n            },\r\n\r\n            navigation: {\r\n                nextEl: '.banner_two_tab_r',\r\n            },\r\n\r\n        })\r\n}\r\n\r\nconst pointImgList = ref([\r\n    {\r\n        imageUrl: require(\"../assets/img/banner/index_banner.jpg\"),\r\n        text: \"THE WORLD'S FIRST 4K VR 3D LIVE STREAMING CAMERA\",\r\n    },\r\n    {\r\n        imageUrl: require(\"../assets/img/index/index_first_down_l.jpg\"),\r\n        text: \"\",\r\n    }\r\n])\r\n\r\nonMounted(() => {\r\n    bannerPoint1()\r\n})\r\n\r\n</script>\r\n  \r\n<script>\r\n\r\nimport Swiper from 'swiper'\r\nimport { onMounted, ref } from 'vue';\r\n\r\nimport VptHeading from '@/components/VptHeading.vue'\r\nimport VptHGroup from '@/components/VptHGroup.vue'\r\nimport VptImage from '@/components/VptImage.vue'\r\nimport VptSwiper4 from '@/components/VptSwiper4.vue'\r\nimport VptText from '@/components/VptText.vue'\r\nimport VptVGroup from '@/components/VptVGroup.vue'\r\n\r\nexport default {\r\n    data() {\r\n        return {\r\n            firstDownL: require(\"../assets/img/index/index_first_down_l.jpg\"),\r\n            firstDownR: require(\"../assets/img/index/index_first_down_r.jpg\"),\r\n            secondLeft: require(\"../assets/img/index/index_second_up_l.jpg\"),\r\n            secondDownL: require(\"../assets/img/index/index_second_down_l.jpg\"),\r\n            secondDownR: require(\"../assets/img/index/index_second_down_r.jpg\"),\r\n            imgWidth: '1920',\r\n            imgOpacity: '1',\r\n            imgblock: 'block',\r\n            footerBlock:'none',\r\n            downBlock:'block',\r\n        }\r\n\r\n    },\r\n    methods: {\r\n        handerPictu(e) {\r\n            console.log(e)\r\n            const img = document.getElementById(\"oImg\");\r\n            this.imgWidth = img.offsetWidth || img.width || img.clientWidth;\r\n            // this.imgHeight = img.offsetHeight || img.height || img.clientHeight;\r\n            if (e.deltaY > 0) {\r\n                console.log(this.imgWidth);\r\n\r\n                this.imgWidth = `${this.imgWidth + 500}`;\r\n                \r\n                console.log(this.imgWidth);\r\n                // this.imgOpacity = this.imgOpacity - 0;\r\n                // this.imgOpacity = `${this.imgOpacity - 0.05}`;\r\n\r\n                console.log(this.imgOpacity);\r\n\r\n                if (this.imgWidth > 13000) {\r\n                    // this.imgblock = 'none';\r\n                    this.imgOpacity= '0'\r\n                    this.footerBlock = 'block';\r\n                };\r\n\r\n                // this.imgHeight = `${this.imgHeight - 10}`;\r\n            }\r\n            \r\n            // if(e.deltaY < 0){\r\n            //     this.imgOpacity= '1'\r\n            //     console.log(e.deltaY);\r\n            //     // this.imgblock = 'block';\r\n            //     this.imgWidth = `${this.imgWidth - 500}`;\r\n            //     console.log(this.imgWidth);\r\n            //     if(this.imgWidth < 3000){\r\n            //         this.footerBlock = 'none';\r\n            //         this.imgWidth = 2120\r\n            //     }\r\n            // }\r\n        },\r\n    },\r\n\r\n}\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.banner-box {\r\n    position: relative;\r\n\r\n    .banner_spwer {\r\n        height: 85vh;\r\n    }\r\n\r\n    .banner_text {\r\n        position: absolute;\r\n        z-index: 999;\r\n        bottom: 3rem;\r\n        left: 4rem;\r\n\r\n        .banner_title {\r\n            width: 70%;\r\n            font-size: 3rem;\r\n            color: #ffffff;\r\n        }\r\n\r\n        .banner_list {\r\n            background-color: rgba(255, 255, 255, 0.3);\r\n            height: 1px;\r\n            width: 85%;\r\n            margin: 3rem 0 6rem;\r\n        }\r\n\r\n        .banner_J {\r\n            color: rgba(255, 255, 255, 0.5);\r\n\r\n            a {\r\n                color: rgba(255, 255, 255, 0.5);\r\n            }\r\n\r\n            i {\r\n                font-size: 3rem;\r\n                margin-right: 2rem;\r\n            }\r\n        }\r\n    }\r\n\r\n    .top {}\r\n\r\n    img {\r\n        width: 100%;\r\n        margin-top: 1rem;\r\n        border-radius: 1.25rem;\r\n    }\r\n\r\n    .banner_viedo {\r\n        position: absolute;\r\n        z-index: 999;\r\n        bottom: 2rem;\r\n        right: 2rem;\r\n\r\n        .banner_play {\r\n            position: absolute;\r\n            left: 50%;\r\n            top: 50%;\r\n            transform: translate(-50%, -50%);\r\n            width: 10%;\r\n        }\r\n    }\r\n}\r\n\r\n.content {\r\n    .index_first {\r\n        .index_first_up {\r\n            width: 100%;\r\n            height: auto;\r\n            background-color: #000000;\r\n            border-radius: 1.25rem;\r\n            padding: 7rem 4rem;\r\n\r\n            .title_box {\r\n                display: flex;\r\n                color: #FFFFFF;\r\n                justify-content: space-between;\r\n                align-items: center;\r\n                margin-bottom: 5rem;\r\n\r\n                .title_box_l {\r\n                    display: flex;\r\n                    align-items: center;\r\n\r\n                    .title_box_l_main {\r\n                        font-size: 2.5rem;\r\n                        margin-right: 2.5rem;\r\n                    }\r\n\r\n                    .title_box_l_num {\r\n                        font-size: 1.25rem;\r\n\r\n                        span {\r\n                            margin: 0 0.25rem;\r\n                        }\r\n\r\n                        s {\r\n                            margin: 0 0.25rem;\r\n                        }\r\n                    }\r\n\r\n                    .title_box_l_num_red {\r\n                        color: #ff0000;\r\n                        font-size: 1.25rem;\r\n                        margin-left: 1rem;\r\n                    }\r\n                }\r\n\r\n                .title_box_r {\r\n                    display: flex;\r\n\r\n                    .title_box_l_video {\r\n                        display: flex;\r\n                        align-items: center;\r\n\r\n                        .title_box_l_video_title {\r\n                            font-size: 1.25rem;\r\n                            margin-right: 0.5rem;\r\n                        }\r\n\r\n                        i {\r\n                            font-size: 2rem;\r\n                        }\r\n                    }\r\n\r\n                    .title_box_l_buy {\r\n                        font-size: 1.25rem;\r\n                        border-radius: 0.75rem;\r\n                        border: 3px solid #ffffff;\r\n                        padding: 1.25rem 3.125rem;\r\n                        margin-left: 3.125rem;\r\n                    }\r\n\r\n                    .title_box_l_buy:hover {\r\n                        color: #000000;\r\n                        border: 3px solid #000000;\r\n                        background-color: #FFFFFF;\r\n                        transition: all 1s;\r\n                    }\r\n\r\n                    .title_box_l_buy:not(:hover) {\r\n                        color: #FFFFFF;\r\n                        border: 3px solid #FFFFFF;\r\n                        background-color: #000000;\r\n                        transition: all 1s;\r\n                    }\r\n\r\n                }\r\n            }\r\n\r\n            .index_first_up_swiper {\r\n                display: flex;\r\n\r\n                .swiper_1 {\r\n                    background-image: url(../assets/img/index/swiper_1.jpg);\r\n                    width: 100%;\r\n                    height: 50vh;\r\n                    background-position: right;\r\n                    background-repeat: no-repeat;\r\n                    // background-size: 100%;\r\n                    border-radius: 1.25rem;\r\n                }\r\n\r\n                .swiper_2 {\r\n                    background-image: url(../assets/img/index/swiper_2.jpg);\r\n                    width: 100%;\r\n                    height: 50vh;\r\n                    background-position: right;\r\n                    background-repeat: no-repeat;\r\n                    // background-size: 100% ;\r\n                    border-radius: 1.25rem;\r\n                }\r\n            }\r\n\r\n\r\n        }\r\n\r\n        .index_first_down {\r\n            display: flex;\r\n            margin-top: 1.25rem;\r\n\r\n            .index_first_down_l {\r\n                margin-right: 0.625rem;\r\n                position: relative;\r\n\r\n                img {\r\n                    width: 100%;\r\n                    border-radius: 1.25rem;\r\n                }\r\n\r\n                .index_first_down_l_main {\r\n                    position: absolute;\r\n                    top: 5rem;\r\n                    left: 4rem;\r\n\r\n                    .index_first_down_l_title {\r\n                        font-size: 2rem;\r\n                        font-weight: bold;\r\n                    }\r\n\r\n                    .index_first_down_l_lest {\r\n                        font-size: 1.25rem;\r\n                        margin-top: 1rem;\r\n                    }\r\n\r\n                    .index_first_down_l_button {\r\n                        font-weight: bold;\r\n                        margin-top: 3.75rem;\r\n                        width: 8.75rem;\r\n                        height: 3.125rem;\r\n                        text-align: center;\r\n                        line-height: 3rem;\r\n                        font-size: 1.5rem;\r\n                        border-radius: 0.75rem;\r\n                        border: 3px solid #000000;\r\n                    }\r\n\r\n                    .index_first_down_l_button:hover {\r\n                        background-color: #000000;\r\n                        color: #FFFFFF;\r\n                        transition: all 1s;\r\n                    }\r\n\r\n                    .index_first_down_l_button:not(:hover) {\r\n                        color: #000000;\r\n                        transition: all 1s;\r\n                    }\r\n                }\r\n            }\r\n\r\n            .index_first_down_r {\r\n                margin-left: 0.625rem;\r\n                position: relative;\r\n\r\n                img {\r\n                    width: 100%;\r\n                    border-radius: 1.25rem;\r\n                }\r\n\r\n                .index_first_down_r_main {\r\n                    width: 100%;\r\n                    position: absolute;\r\n                    top: 5rem;\r\n\r\n\r\n\r\n\r\n                    left: 50%;\r\n                    transform: translate(-50%);\r\n                    text-align: center;\r\n\r\n                    .index_first_down_r_title {\r\n                        font-size: 2rem;\r\n                        font-weight: bold;\r\n                    }\r\n\r\n                    .index_first_down_r_lest {\r\n                        font-size: 1.25rem;\r\n                        margin-top: 1rem;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    .index_second {\r\n\r\n        .index_second_up {\r\n            display: flex;\r\n            border-radius: 1.25rem;\r\n            background-image: url(../assets/img/index/index_second_up_bg.jpg);\r\n            background-repeat: no-repeat;\r\n\r\n            .index_second_up_img {\r\n                margin: 1.875rem;\r\n                width: 50%;\r\n\r\n                img {\r\n                    border-radius: 1.25rem;\r\n                    width: 100%;\r\n                }\r\n            }\r\n\r\n            .index_second_up_text {\r\n                color: #FFFFFF;\r\n                padding: 7.5rem 4.375rem;\r\n\r\n                .index_second_up_title {\r\n                    font-size: 2rem;\r\n                    font-weight: bold;\r\n                }\r\n\r\n                .index_second_up_lest {\r\n                    font-size: 1.25rem;\r\n                    margin-top: 1.875rem;\r\n                    font-weight: 100;\r\n                }\r\n\r\n                .index_second_up_button {\r\n                    width: 8.5rem;\r\n                    height: 3rem;\r\n                    text-align: center;\r\n                    line-height: 2.75rem;\r\n                    font-size: 1.5rem;\r\n                    margin-top: 4.375rem;\r\n                    border-radius: 0.75rem;\r\n                    border: 3px solid #FFFFFF;\r\n                }\r\n\r\n                .index_second_up_button:hover {\r\n                    background-color: #FFFFFF;\r\n                    border: 3px solid #000000;\r\n                    color: #000000;\r\n                    transition: all 1s;\r\n                }\r\n\r\n                .index_second_up_button:not(:hover) {\r\n                    background-color: #000000;\r\n                    border: 3px solid #FFFFFF;\r\n                    color: #FFFFFF;\r\n                    transition: all 1s;\r\n                }\r\n            }\r\n\r\n        }\r\n\r\n        .index_second_down {\r\n            display: flex;\r\n            margin-top: 1.25rem;\r\n\r\n            .index_second_down_l {\r\n                margin-right: 0.625rem;\r\n                position: relative;\r\n\r\n                img {\r\n                    width: 100%;\r\n                    border-radius: 1.25rem;\r\n                    \r\n                }\r\n\r\n                .index_second_down_l_main {\r\n                    position: absolute;\r\n                    top: 5rem;\r\n                    left: 4rem;\r\n\r\n                    .index_first_down_l_title {\r\n                        font-size: 2rem;\r\n                        font-weight: bold;\r\n                        width: 60%;\r\n                        line-height: 3rem;\r\n                        color: #FFFFFF;\r\n                    }\r\n                }\r\n\r\n            }\r\n\r\n            .index_second_down_r {\r\n                margin-left: 0.625rem;\r\n                position: relative;\r\n\r\n                img {\r\n                    width: 100%;\r\n                    border-radius: 1.25rem;\r\n                }\r\n\r\n                .index_second_down_r_main {\r\n                    position: absolute;\r\n                    top: 5rem;\r\n                    left: 4rem;\r\n\r\n                    .index_first_down_r_title {\r\n                        font-size: 2rem;\r\n                        font-weight: bold;\r\n                        width: 60%;\r\n                        line-height: 3rem;\r\n                        color: #FFFFFF;\r\n\r\n                    }\r\n                }\r\n\r\n            }\r\n        }\r\n\r\n    }\r\n\r\n    .index_thirdly {\r\n        margin-top: 14.375rem;\r\n        .productDrawing {\r\n            // width: 100%;\r\n\r\n            position: relative;\r\n            background-image: url(../assets/img/index/index_thirdly_bg.jpg);\r\n            background-position: bottom;\r\n            background-repeat: no-repeat;\r\n            // background-size: 100% 100%;\r\n            height: 85vh;\r\n            border-radius: 1.25rem;\r\n            overflow: hidden;\r\n            \r\n            .index_thirdly_title{\r\n                position: absolute;\r\n                bottom: 3rem;\r\n                left: 4rem;\r\n                width: 50%;\r\n                font-size: 3rem;\r\n                z-index: 8;\r\n                color: #ffffff;\r\n            }\r\n\r\n            .productBg {\r\n                position: absolute;\r\n                z-index: 999;\r\n                // background-color: #f4f4f4;\r\n                width: 100%;\r\n                height: 100%;\r\n            }\r\n\r\n            .productDrawing_Img {\r\n                position: absolute;\r\n                // background-color: #f4f4f4;\r\n                top: 50%;\r\n                left: 50%;\r\n                z-index: 999;\r\n                transform: translate(-50%, -50%);\r\n                overflow: hidden;\r\n                display: table-cell;\r\n                vertical-align: middle;\r\n                transition: 1s ease-out;\r\n\r\n                img {\r\n                    min-width: 1920;\r\n                }\r\n            }\r\n        }\r\n\r\n    }\r\n\r\n\r\n}\r\n\r\n.index_footer {\r\n    margin-top: -2rem;\r\n    position: relative;\r\n    \r\n    z-index: 9999;\r\n}\r\n\r\n@media only screen and (max-width:1680px) {}\r\n\r\n@media only screen and (max-width:1440px) {}\r\n\r\n@media only screen and (max-width:1280px) {}\r\n\r\n@media only screen and (max-width:1024px) {}\r\n\r\n@media only screen and (max-width:720px) {\r\n\r\n    .banner-box {\r\n        .banner_spwer {\r\n            width: 100%;\r\n            height: 80vh;\r\n            cursor: pointer;\r\n            object-fit: cover;\r\n        }\r\n\r\n\r\n        .banner_viedo {\r\n            right: 0;\r\n            left: 50%;\r\n\r\n            .banner_play_pic {\r\n                width: 95%;\r\n            }\r\n        }\r\n\r\n        .banner_text {\r\n            left: 1rem;\r\n            bottom: 15vh;\r\n\r\n            .banner_title {\r\n                width: 90%;\r\n                text-align: left;\r\n                font-size: 2rem;\r\n            }\r\n\r\n            .banner_list {\r\n                margin: 1rem 0;\r\n            }\r\n\r\n            .banner_J {\r\n                i {\r\n                    font-size: 2rem\r\n                }\r\n            }\r\n        }\r\n\r\n        .top {\r\n            bottom: 3vh;\r\n        }\r\n    }\r\n\r\n    .content {\r\n        .index_first {\r\n            .index_first_up {\r\n                padding: 2rem 1rem 1rem 1rem;\r\n\r\n                .title_box {\r\n                    display: block;\r\n                    margin-bottom: 2rem;\r\n\r\n                    .title_box_l {\r\n                        display: block;\r\n\r\n                        .title_box_l_main {\r\n                            font-size: 2rem;\r\n\r\n                        }\r\n\r\n                        .title_box_l_num {\r\n                            font-size: 1.5rem;\r\n\r\n                            span {\r\n                                font-size: 1.5rem;\r\n                                margin-left: 0;\r\n                            }\r\n\r\n                            s {\r\n                                font-size: 1.5rem;\r\n                                margin-left: 0;\r\n                            }\r\n                        }\r\n\r\n                        .title_box_l_num_red {\r\n                            font-size: 1.5rem;\r\n                            margin-left: 0;\r\n                        }\r\n                    }\r\n\r\n                    .title_box_r {\r\n                        display: block;\r\n\r\n                        .title_box_l_video {\r\n                            display: none;\r\n                        }\r\n\r\n                        .title_box_l_buy {\r\n                            margin-left: 0;\r\n                            margin-top: 1rem;\r\n                            width: 6rem;\r\n                            height: 2.5rem;\r\n                            text-align: center;\r\n                            line-height: 2rem;\r\n                            padding: 0;\r\n                            font-size: 1rem;\r\n                        }\r\n\r\n                        .title_box_l_video {\r\n                            margin-top: 1.5rem;\r\n                        }\r\n                    }\r\n                }\r\n\r\n                .index_first_up_swiper {\r\n                    display: block;\r\n\r\n                    .swiper_1 {\r\n                        width: 100%;\r\n                        height: 30vh;\r\n                        background-position: right;\r\n                        background-size: 100%;\r\n                        background-repeat: no-repeat;\r\n                    }\r\n\r\n                    .swiper_2 {\r\n                        width: 100%;\r\n                        height: 30vh;\r\n                        background-position: right;\r\n                        background-size: 100%;\r\n                        background-repeat: no-repeat;\r\n                    }\r\n                }\r\n\r\n                .swiper_kz_box {\r\n                    margin: 2.5rem auto 1.5rem;\r\n\r\n                }\r\n\r\n            }\r\n\r\n            .index_first_down {\r\n                display: block;\r\n\r\n                .index_first_down_l {\r\n                    margin-right: 0;\r\n\r\n                    img {\r\n                        width: 100%;\r\n                        height: 75vh;\r\n                        cursor: pointer;\r\n                        object-fit: cover;\r\n                    }\r\n\r\n                    .index_first_down_l_main {\r\n                        top: 2rem;\r\n                        left: 1rem;\r\n\r\n                        .index_first_down_l_title {\r\n                            font-size: 1.5rem;\r\n                        }\r\n\r\n                        .index_first_down_l_button {\r\n                            margin-top: 3rem;\r\n                            font-size: 1rem;\r\n                            width: 6rem;\r\n                            height: 2.5rem;\r\n                            line-height: 2rem;\r\n                        }\r\n                    }\r\n                }\r\n\r\n                .index_first_down_r {\r\n                    margin-left: 0;\r\n                    margin-top: 1.25rem;\r\n\r\n                    .index_first_down_r_main {\r\n                        text-align: left;\r\n                        top: 2rem;\r\n                        margin-left: 1rem;\r\n\r\n                        .index_first_down_r_title {\r\n                            font-size: 1.5rem;\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        .index_second {\r\n            .index_second_up {\r\n                display: block;\r\n\r\n                .index_second_up_img {\r\n                    margin: 1.5rem;\r\n\r\n                    img {\r\n                        width: 100%;\r\n                        margin-top: 2rem;\r\n                    }\r\n                }\r\n\r\n                .index_second_up_text {\r\n                    padding: 0 1.5rem 1.5rem 1.5rem;\r\n\r\n                    .index_second_up_title {\r\n                        font-size: 1.5rem;\r\n                    }\r\n\r\n                    .index_second_up_button {\r\n                        margin-top: 2rem;\r\n                        font-size: 1rem;\r\n                        line-height: 2rem;\r\n                        width: 6rem;\r\n                        height: 2.5rem;\r\n                    }\r\n\r\n                    .index_second_up_lest {\r\n                        margin-top: 1rem;\r\n                    }\r\n                }\r\n            }\r\n\r\n            .index_second_down {\r\n                display: block;\r\n\r\n                .index_second_down_l {\r\n                    margin-right: 0;\r\n\r\n                    .index_second_down_l_main {\r\n                        top: 3rem;\r\n                        left: 1rem;\r\n\r\n                        .index_first_down_l_title {\r\n                            font-size: 1.5rem;\r\n                            width: 100%;\r\n                        }\r\n                    }\r\n                }\r\n\r\n                .index_second_down_r {\r\n                    margin-left: 0;\r\n                    margin-top: 1.25rem;\r\n\r\n                    .index_second_down_r_main {\r\n                        top: 3rem;\r\n                        left: 1rem;\r\n\r\n                        .index_first_down_r_title {\r\n                            font-size: 1.5rem;\r\n                            width: 100%;\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        .index_thirdly {\r\n            \r\n            margin: 2rem 0 0;\r\n\r\n            img {\r\n                width: 90%;\r\n                margin: 1rem 0 2.5rem;\r\n            }\r\n        }\r\n    }\r\n\r\n    .index_footer{\r\n        display: block !important;\r\n    }\r\n\r\n}\r\n\r\n\r\n.title{\r\n  margin:  8.125rem 0 3.5rem 0;\r\n  font-family: 'MON';\r\n}\r\n\r\n.center{\r\n    text-align: center;\r\n}\r\n\r\n.left{\r\n    margin-left: 4rem;\r\n}\r\n\r\n</style>\r\n\r\n<style >\r\n.swiper_kz_box {\r\n    display: flex;\r\n    justify-content: center;\r\n    margin: 4.5rem auto 0;\r\n}\r\n\r\n.swiper_kz {\r\n    width: 13.75rem;\r\n    height: 3.75rem;\r\n    background-color: rgba(255, 255, 255, 0.1);\r\n    border-radius: 0.75rem;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n}\r\n\r\n.swiper_next {\r\n    width: 3.75rem;\r\n    height: 3.75rem;\r\n    background-color: rgba(255, 255, 255, 0.1);\r\n    border-radius: 0.75rem;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-left: 2rem;\r\n}\r\n\r\n\r\n\r\n.swiper-pagination {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.two-bullet {\r\n    width: 0.5rem;\r\n    height: 0.5rem;\r\n    border-radius: 50%;\r\n    margin-right: 1.375rem;\r\n    background: rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n.two-bullet-active {\r\n    width: 2.5rem;\r\n    height: 0.5rem;\r\n    border-radius: 1rem;\r\n    background: #FFFFFF;\r\n    transition: all 0.5s;\r\n}\r\n\r\n.banner_two_tab_r {\r\n    color: #FFFFFF;\r\n}\r\n\r\n</style>\r\n","import script from \"./index.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./index.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./index.vue?vue&type=style&index=0&id=24962be1&scoped=true&lang=scss\"\nimport \"./index.vue?vue&type=style&index=1&id=24962be1&lang=css\"\n\nimport exportComponent from \"../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-24962be1\"]])\n\nexport default __exports__"],"names":["swiperContainer","ref","onMounted","Swiper","value","loop","updateOnImagesReady","slidesPerView","spaceBetween","observer","observeParents","observeSlideChildren","effect","navigation","__exports__","__default__","data","firstDownL","require","firstDownR","secondLeft","secondDownL","secondDownR","imgWidth","imgOpacity","imgblock","footerBlock","downBlock","methods","handerPictu","e","console","log","img","document","getElementById","this","offsetWidth","width","clientWidth","deltaY","bannerPoint1","autoplay","delay","disableOnInteraction","nextEl","prevEl","simulateTouch","breakpoints","pagination","el","bulletClass","bulletActiveClass","clickable","imageUrl","text"],"sourceRoot":""}