<template> <div id="mobile" class="index" :class="showNav || showOrder ? 'hidden' : ''"> <HomeLoad v-show="showloading" :bg="'bg'" :loading="loading"></HomeLoad> <Nav v-if="showNav" @closeMobileNav="closeMobileNav" @toViewSwiper="toViewSwiper" ></Nav> <img v-show="!showNav" :src="require('@/assets/mobile/nav.png')" class="nav_btn" alt="" srcset="" @click="showNav = true" /> <div ref="mySwiper" class="swiper-container mySwiper"> <div v-show="!showloading" class="swiper-wrapper" style="height: 100vh;"> <div class="swiper-slide m-home"> <img :src="require('@/assets/partTwo/btn.png')" class="playBtn" alt="" srcset="" @click="showVideoBox = true" /> <img :src="require('@/assets/partOne/age.png')" class="ageTip" alt="" @click="openArgument('ageTips')" /> <!-- <div class="orderBox" @click="showOrder = true"></div> --> <div class="orderBox"> <div class="order_btn" @click="showOrder = true"></div> </div> <!-- <div class="req" @click="showLand = true"></div> --> </div> <div class="swiper-slide mobile_news"> <div :data-background="bg_two" class="innerBox swiper-lazy"> <NewList :news="newsList" :data="dataList"></NewList> </div> </div> <div class="swiper-slide mobile_world"> <div :data-background="world_bg" class="world_bg swiper-lazy"> <img :data-src="world_cloud" class="world_cloud swiper-lazy" alt="" /> <img :data-src="require('@/assets/mobile/story.png')" class="story swiper-lazy" alt="" /> <div class="content"> <img :data-src="require('@/assets/mobile/world_borderBottom.png')" class="world_borderBottom swiper-lazy" alt="" /> <img :data-src="require('@/assets/mobile/world_borderTop.png')" class="world_borderTop swiper-lazy" alt="" /> <div :class="activeIndex === 2 ? 'feedInOne' : ''"> <p> 曾经容纳世间无穷乐趣的梦乐园,因为真理之书的失 </p> <p> 窃散落而迅速衰败。 </p> </div> <p :class="activeIndex === 2 ? 'feedInTwo' : ''"> 前任乐园管理员用真理之书的残页,召唤出了—— </p> <div :class="activeIndex === 2 ? 'feedInThree' : ''"> <p>“从今天起,这座乐园就属于你了!”</p> <p>“?!”</p> <p>“赶紧想办法重建乐园!”</p> <p>“……”</p> </div> <div :class="activeIndex === 2 ? 'feedInFour' : ''"> <p>「虽然突兀,虽然荒诞,但也不妨试着感受一下,</p> <p>也许您会在将来体验到无与伦比的乐趣。</p> <p>这里是为疲劳之人准备的软椅,是为伤心之人建造的</p> <p>乐园。</p> </div> <div :class="activeIndex === 2 ? 'feedInFive' : ''"> <p>请睁开双眼,今夜的烟火只为特别的您所准备。</p> <p>就此离开,也许会有遗憾……」</p> <p>欢迎来到梦乐园,梦幻与魔法永不落幕!</p> </div> </div> </div> </div> <!-- <div class="swiper-slide mobile_characters"> <div class="content"> <img :data-src="swiper_bg" class="swiper_bg swiper-lazy" alt="" srcset="" /> <transition name="fade"> <div v-if="changeActive" class="bg" :style="{ backgroundImage: 'url(' + characterArr[2].bg + ')' }" ></div> </transition> <transition name="fade"> <img v-if="changeActive" :src="characterArr[2].dialogue_bg" class="dialogue_bg" alt="" /> </transition> <div class="desBox"> <div class="preview"> CHARACTER PREVIEW </div> <div class="introduce"> <div class="character_name"> {{ characterArr[2].name }} </div> <div class="cv_name"> <div v-if="characterArr[2].audio" class="changeBtn" @click="changeLan" > <div v-show="lan === 'jp'" class="lan">日</div> <div v-lazy:background-image=" require('../assets/mobile/changeBtn.png') " class="btn" ></div> <div v-show="lan === 'cn'" class="lan">中</div> </div> <a v-if="!characterArr[2].audio" class="text">敬请期待</a> <a v-if="characterArr[2].audio" class="text" >CV:{{ lan === "jp" ? characterArr[2].cv_name : characterArr[2].cv_name_cn }}</a > <a v-if="characterArr[2].audio" class="voice" @click="togglePlay" > <img :src=" play ? require('@/assets/partFour/vioce.gif') : require('@/assets/partFour/vioce.png') " alt="" /></a> </div> </div> <div class="dialogue"> <p class="text"> {{ characterArr[2].dialogue }} </p> </div> </div> <div :data-background="require('@/assets/mobile/swiper.png')" class="swiper swiper-lazy" > <div :data-background="require('@/assets/mobile/prev.png')" class="prev swiper-lazy" @click="prev()" ></div> <div :data-background="require('@/assets/mobile/next.png')" class="next swiper-lazy" @click="next()" ></div> <ul class="characterList"> <li v-for="(item, index) in activeArr" :key="index" class="character-item" > <img v-if="index == 2 && activeIndex >= 2" :src="require('@/assets/mobile/checked.png')" class="active_img" alt="" /> <img v-if="activeIndex >= 2" :src="item.miniPic" alt="" @click="changeCharacter(index)" /> </li> </ul> <img v-if="activeIndex >= 2" :src="characterArr[2].team_bg" alt="" class="teamPic" /> </div> </div> </div> --> <div class="swiper-slide mobile_characters"> <div id="swiper-container2" class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide contentBox"> <div class="content"> <img :data-src="swiper_bg" class="swiper_bg swiper-lazy" alt="" srcset="" /> <transition name="fade"> <div v-if="changeActive" class="bg" :style="{ backgroundImage: 'url(' + characterArr[2].bg + ')', }" ></div> </transition> <transition name="fade"> <img v-if="changeActive" :src="characterArr[2].dialogue_bg" class="dialogue_bg" alt="" /> </transition> <div class="desBox"> <div class="preview"> CHARACTER PREVIEW </div> <div class="introduce"> <div class="character_name"> {{ characterArr[2].name }} </div> <div class="cv_name"> <div v-if="characterArr[2].audio" class="changeBtn" @click="changeLan" > <div v-show="lan === 'jp'" class="lan">日</div> <div v-lazy:background-image=" require('../assets/mobile/changeBtn.png') " class="btn" ></div> <div v-show="lan === 'cn'" class="lan">中</div> </div> <a v-if="!characterArr[2].audio" class="text" >敬请期待</a > <a v-if="characterArr[2].audio" class="text" >CV:{{ lan === "jp" ? characterArr[2].cv_name : characterArr[2].cv_name_cn }}</a > <a v-if="characterArr[2].audio" class="voice" @click="togglePlay" > <img :src=" play ? require('@/assets/partFour/vioce.gif') : require('@/assets/partFour/vioce.png') " alt="" /></a> </div> </div> <div class="dialogue"> <p class="text"> {{ characterArr[2].dialogue }} </p> </div> </div> <div :data-background="require('@/assets/mobile/swiper.png')" class="swiper swiper-lazy" > <div :data-background="require('@/assets/mobile/prev.png')" class="prev swiper-lazy" @click="prev()" ></div> <div :data-background="require('@/assets/mobile/next.png')" class="next swiper-lazy" @click="next()" ></div> <ul class="characterList"> <li v-for="(item, index) in activeArr" :key="index" class="character-item" > <img v-if="index == 2 && activeIndex >= 2" :src="require('@/assets/mobile/checked.png')" class="active_img" alt="" /> <img v-if="activeIndex >= 2" :src="item.miniPic" alt="" @click="changeCharacter(index)" /> </li> </ul> <img v-if="activeIndex >= 2" :src="characterArr[2].team_bg" alt="" class="teamPic" /> </div> </div> <nuxt-link class="listItem" :to="{ name: 'terms' }" target="_blank" > <span>《用戶協議》及《用戶隱私條例》 </span> </nuxt-link> <img :data-src="require('@/assets/footer/starlinear.png')" class="starLine_logo swiper-lazy" alt="" /> <img :data-src="require('@/assets/footer/lunaring_logo.png')" class="lunaring_logo swiper-lazy" alt="" /> <img :data-src="require('@/assets/footer/fearless.png')" class="fearless_logo swiper-lazy" alt="" /> <!-- <img :data-src="require('@/assets/footer/fearless.png')" class="fearless_logo swiper-lazy" alt="" /> --> <p class="argularTxt small mt"> © STARLINEAR(HK) LTD. </p> <p class="argularTxt small"> © LUNARING CO., LTD. </p> </div> </div> <div class="swiper-scrollbar"> <div class="swiper-scrollbar-drag"></div> </div> <span class="swiper-notification" aria-live="assertive" aria-atomic="true" ></span> </div> </div> <!-- <div class="swiper-slide mobile_footer"> <div :data-background="require('@/assets/footer/pc_bg.jpg')" class="ulList swiper-lazy" > <p class="listTitle">关注官方账号,获取游戏最新资讯!</p> <ul class="list"> <li v-for="(item, index) in contactList" :key="index" class="item" > <a v-if="item.href" :href="item.href" target="_blank"> <img :data-src="item.src" alt="" class="swiper-lazy" /> </a> <div v-else :class="item.id"> <img :data-src="item.src" alt="" class="swiper-lazy" @click="enter(item.id)" /> <a v-if="showQQ && item.id == 'QQ'" href="https://jq.qq.com/?_wv=1027&k=BgdhvKj5" target="_blank" rel="noopener noreferrer" :style="{ backgroundImage: 'url(' + require('@/assets/footer/qq_bg.png') + ')', }" class="qqNum" @click="leaveFn(item.id)" >官方⑤群:819827942</a > <img v-if="showCode && item.id == 'wechat'" :src="require('@/assets/footer/code.png')" class="code" alt="" @click="leaveFn(item.id)" /> </div> </li> </ul> </div> <div :data-background="require('@/assets/footer/footer_bg1.jpg')" class="arguments swiper-lazy" > <ul class="argumentList"> <li v-for="(item, index) in argumentList" :key="index" class="item" > <p v-if="item.argumentTitle" class="txt" @click="openArgument(item.argumentTitle)" > {{ item.txt }} </p> <p v-else class="txt" @click="showContact = true"> {{ item.txt }} </p> </li> </ul> <div class="contentTxt"> <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" rel="noopener noreferrer" ><p class="boldTxt">沪ICP备20012597号-1</p></a > <p class="boldTxt mb"> 沪网文(2020) 2195-180号 </p> <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010402009137" target="_blank" rel="noopener noreferrer" > <p class="boldTxt">沪公网安备31010402009137号</p></a > <p class="boldTxt"> 增值电信业务许可证:沪B2-20200829 </p> <p class="argularTxt mt">国家反诈中心提示:接到“96110”来电,</p> <p class="argularTxt"> 意味着你可能正在遭受电信网络诈骗犯罪分子的侵害, </p> <p class="argularTxt mb"> 请立即接听! </p> </div> <div class="advice"> <p class="argularTxt"> 健康游戏忠告: </p> <p class="argularTxt">抵制不良游戏,拒绝盗版游戏。</p> <p class="argularTxt">注意自我保护,谨防受骗上当。</p> <p class="argularTxt">适度游戏益脑,沉迷游戏伤身。</p> <p class="argularTxt">合理安排时间,享受健康生活。</p> <p class="argularTxt mt">本游戏适合16岁或以上玩家。</p> </div> <p class="argularTxt small mt"> © STARLINEAR CO., LTD. ALL RIGHTS RESERVED </p> <p class="argularTxt small"> © LUNARING CO., LTD. ALL RIGHTS RESERVED </p> <img :data-src="require('@/assets/footer/starline.png')" class="starLine_logo swiper-lazy" alt="" /> <img :data-src="require('@/assets/footer/lunaring.png')" class="lunaring_logo swiper-lazy" alt="" /> </div> </div> --> </div> </div> <audio ref="myAudio" controls="controls" :src="lan === 'cn' ? characterArr[2].audio : characterArr[2].audio_jp" ></audio> <div v-show="activeIndex !== 4" class="swiper-button-next swiper_btn _mobile" ></div> <div v-show="activeIndex === 4" class="swiper-button-prev swiper_btn _mobile btn-hidden" ></div> <VideoBox v-if="showVideoBox" :bg="'bg'" @closeViedoBox="closeViedoBox" ></VideoBox> <Order v-if="showOrder" :bg="'bg'" @closeOrder="closeOrder"></Order> <Land v-if="showLand" :bg="'bg'" @closeLand="closeLand"></Land> <Contact v-if="showContact" :bg="'bg'" @closeContact="closeContact" ></Contact> <Argument v-if="showArgument" :bg="'bg'" :argument-title="argumentTitle" @closeArgument="closeArgument" ></Argument> </div> </template> <script> import Swiper from "swiper"; import { getIp, getData } from "@/api/data.js"; export default { name: "Mobile", components: { Nav: () => import("@/components/m-nav.vue"), HomeLoad: () => import("@/components/Home_load.vue"), Order: () => import("@/components/order.vue"), Land: () => import("@/components/land.vue"), VideoBox: () => import("@/components/VideoBox.vue"), NewList: () => import("../components/newsList.vue"), }, async asyncData({ req, store }) { const [d1, d2] = await Promise.all([getIp().then(), getData().then()]); store.commit("storageData/addHeaders", d1.data.ip); const newsList = { last: d2.data.news, notice: [], activity: [], trends: [], }; d2.data.news.forEach((element) => { // element.time = element.time.substring(0, 10); if (element.types === 1) { newsList.notice.push(element); } if (element.types === 2) { newsList.activity.push(element); } if (element.types === 3) { newsList.trends.push(element); } }); return { d1, dataList: d2.data, newsList }; // return { d1 }; }, data() { return { play: false, mySwiper: "", activeIndex: 0, active_character: 2, swiper_bg: "https://cdn.star-linear.com/resource/dream/m/swiper_bg.png", trailer_bg: "https://cdn.star-linear.com/resource/dream/m/trailer_bg.jpg", bg_two: require("@/assets/mobile/trailer_bg.png"), bg_two_light: "../assets/partTwo/bg_two_light.png", world_bg: "https://cdn.star-linear.com/resource/dream/m/world_bg.jpg", world_cloud: "https://cdn.star-linear.com/resource/dream/m/world_cloud.png", character_name: "", characterArr: [ { name: "贝汀那", cv_name: "高桥广树", cv_name_cn: "梁达伟", team_bg: require("@/assets/partFour/demian_team.png"), name_bg: require("@/assets/partFour/bethina_name.png"), miniPic: require("@/assets/partFour/bethina.png"), bg: "https://cdn.star-linear.com/resource/dream/m/bethina_bg.jpg", dialogue: "拂晓骑兵团成员之一,思维有些跳脱,让人捉摸不透。", dialogue_bg: require("@/assets/mobile/bethina_dialogue.png"), audio: "https://cdn.star-linear.com/voice/cv/Bethina_CN_202272517489.mp3", audio_jp: "https://cdn.star-linear.com/voice/cv/Bethina_JP_2022725174810.mp3", }, { name: "奇琪蒂", cv_name: "下野纮", team_bg: require("@/assets/partFour/demian_team.png"), name_bg: require("@/assets/partFour/kikidi_name.png"), miniPic: require("@/assets/partFour/kikidi.png"), bg: "https://cdn.star-linear.com/resource/dream/m/kikidi_bg.jpg", dialogue: "神秘的少年。看似友好的笑容下藏着什么呢?", dialogue_bg: require("@/assets/mobile/kikidi_dialogue.png"), audio: "", }, { name: "德米安", cv_name: "日野聪", cv_name_cn: "杨超然", team_bg: require("@/assets/partFour/demian_team.png"), name_bg: require("@/assets/partFour/demian_name.png"), miniPic: require("@/assets/partFour/demian.png"), bg: "https://cdn.star-linear.com/resource/dream/m/demian_bg.png", dialogue: "拂晓骑兵团的团长,同时也是洛维斯的王子。", dialogue_bg: require("@/assets/mobile/demian_dialogue.png"), audio: "https://cdn.star-linear.com/voice/cv/demian_CN_2022725174811.mp3", audio_jp: "https://cdn.star-linear.com/voice/cv/demian_JP.mp3", }, { name: "伊斯雷尔", cv_name: "佐藤拓也", team_bg: require("@/assets/partFour/isreall_team.png"), name_bg: require("@/assets/partFour/isreall_name.png"), miniPic: require("@/assets/mobile/isreall.png"), bg: "https://cdn.star-linear.com/resource/dream/m/isreall_bg.jpg", dialogue: "塔吉玛的掌管者。为人不苟言笑,做事雷厉风行。", dialogue_bg: require("@/assets/mobile/isreall_dialogue.png"), audio: "", }, { name: "瑟琉", cv_name: "福山润", team_bg: require("@/assets/partFour/selieu_team.png"), name_bg: require("@/assets/partFour/selieu_name.png"), miniPic: require("@/assets/partFour/selieu.png"), bg: "https://cdn.star-linear.com/resource/dream/m/selieu_bg.jpg", dialogue: "统治精灵的王,让精灵们彻底与外界隔开。讨厌争端。", dialogue_bg: require("@/assets/mobile/selieu_dialogue.png"), audio: "", }, { name: "奥菲利亚", cv_name: "中原麻衣", cv_name_cn: "魏欣琛", team_bg: require("@/assets/partFour/demian_team.png"), name_bg: require("@/assets/partFour/ophelia_name.png"), miniPic: require("@/assets/partFour/ophelia.png"), bg: "https://cdn.star-linear.com/resource/dream/m/ophelia_bg.jpg", dialogue: "拂晓骑兵团成员之一,骑术、剑术等均为顶尖水准。", dialogue_bg: require("@/assets/mobile/ophelia_dialogue.png"), audio: "https://cdn.star-linear.com/voice/cv/Ophelia_CN_2022725174811.mp3", audio_jp: "https://cdn.star-linear.com/voice/cv/Ophelia_JP.mp3", }, ], contactList: [ { src: require("@/assets/footer/sina.png"), href: "https://weibo.com/p/1006067514307100/", id: "sina", }, { src: require("@/assets/footer/wechat.png"), href: "", id: "wechat", }, { src: require("@/assets/footer/QQ.png"), href: "", id: "QQ", }, { src: require("@/assets/footer/bilibi.png"), href: "https://space.bilibili.com/1988649931/dynamic", id: "bilibi", }, ], argumentList: [ { txt: "用户协议", argumentTitle: "userAgreement", }, { txt: " 平台协议", argumentTitle: "platformAgreement", }, { txt: "隐私政策", argumentTitle: "privacyPolicy", }, { txt: "联系我们", href: "", }, ], activeArr: [], changeActive: true, showOrder: false, showLand: false, showNav: false, showVideoBox: false, showArgument: false, showContact: false, count: 0, loading: 0, precent: 0, imglength: 0, imgs: [ require("@/assets/mobile/loading.png"), require("@/assets/mobile/loading_line.png"), "https://cdn.star-linear.com/resource/dream/m/home_bg.jpg", "https://cdn.star-linear.com/resource/dream/order.png", "https://cdn.star-linear.com/resource/dream/m/trailer_bg.jpg", require("@/assets/mobile/scroll.png"), require("@/assets/partOne/age.png"), ], intervalId: null, showloading: true, height: 0, showCode: false, showQQ: false, ip: "", newsList: { last: [ { id: "e045okE2caPEhvWjUn01--8M9Rdb71bYimnXP7XGqQ", title: "雾境序列萤火虫动漫游戏嘉年华直参信息", type: 3, type_text: "动态", time: "2021-12-24 18:35", }, { id: "9e340zcgZHM91LWJ92mD-tsQ57mHgvDaDvkzJjMafQ", title: "【极羽号电台】#1 - “雾语者”测试Q&A", type: 3, type_text: "动态", time: "2021-10-21 20:21", }, { id: "7b19GsB-wK4SqYMjM595-qjLJ5PCIfeE6x_9ep5hqg", title: "「雾语者测试」官方测试交流群", type: 1, type_text: "公告", time: "2021-09-13 17:38", }, { id: "2f04BbZtroXNJPmrOUW5yeGsfLpPLpXvvSXWC72gNg", title: "“雾语者测试”激活&安装流程", type: 1, type_text: "公告", time: "2021-09-06 17:22", }, { id: "74549PFKN64ee74za-NVz3aalqwlKsploeHPOjDT3Q", title: "“雾语者测试”定档&招募截止预告", type: 1, type_text: "公告", time: "2021-08-30 16:25", }, { id: "83ceB4SZqDLa4p8hWt-uBpso3q3I_Eo0T6iMkjYj_Q", title: "“雾语者测试”招募", type: 1, type_text: "公告", time: "2021-07-21 20:09", }, { id: "3acbAIGSf8PgGuNfJUPVwOF2VN3HHItjDGmObXnUzQ", title: "实机玩法演示公开", type: 1, type_text: "公告", time: "2021-07-16 20:09", }, { id: "fba2pOxNyGkSs7hhqhkAS8NyIc49gP69J956iwTGiw", title: "官方预约开启", type: 1, type_text: "公告", time: "2021-07-16 20:04", }, { id: "9d158Ke6eepRMkE42XZbehfzPBr9gN9QqibeBC6tYQ", title: "《雾境序列》将于TapTap发布会亮相", type: 3, type_text: "动态", time: "2021-07-08 12:11", }, { id: "2c49amId60Ju8xV6GiMu5BSArPmVaE2GfVuWFuXquA", title: "雾境序列CP28直参信息", type: 3, type_text: "动态", time: "2021-06-08 19:42", }, ], notice: [ { id: "7b19GsB-wK4SqYMjM595-qjLJ5PCIfeE6x_9ep5hqg", title: "「雾语者测试」官方测试交流群", type: 1, type_text: "公告", time: "2021-09-13 17:38", }, { id: "2f04BbZtroXNJPmrOUW5yeGsfLpPLpXvvSXWC72gNg", title: "“雾语者测试”激活&安装流程", type: 1, type_text: "公告", time: "2021-09-06 17:22", }, { id: "74549PFKN64ee74za-NVz3aalqwlKsploeHPOjDT3Q", title: "“雾语者测试”定档&招募截止预告", type: 1, type_text: "公告", time: "2021-08-30 16:25", }, { id: "83ceB4SZqDLa4p8hWt-uBpso3q3I_Eo0T6iMkjYj_Q", title: "“雾语者测试”招募", type: 1, type_text: "公告", time: "2021-07-21 20:09", }, { id: "3acbAIGSf8PgGuNfJUPVwOF2VN3HHItjDGmObXnUzQ", title: "实机玩法演示公开", type: 1, type_text: "公告", time: "2021-07-16 20:09", }, { id: "fba2pOxNyGkSs7hhqhkAS8NyIc49gP69J956iwTGiw", title: "官方预约开启", type: 1, type_text: "公告", time: "2021-07-16 20:04", }, ], activity: [], trends: [ { id: "e045okE2caPEhvWjUn01--8M9Rdb71bYimnXP7XGqQ", title: "雾境序列萤火虫动漫游戏嘉年华直参信息", type: 3, type_text: "动态", time: "2021-12-24 18:35", }, { id: "9e340zcgZHM91LWJ92mD-tsQ57mHgvDaDvkzJjMafQ", title: "【极羽号电台】#1 - “雾语者”测试Q&A", type: 3, type_text: "动态", time: "2021-10-21 20:21", }, { id: "9d158Ke6eepRMkE42XZbehfzPBr9gN9QqibeBC6tYQ", title: "《雾境序列》将于TapTap发布会亮相", type: 3, type_text: "动态", time: "2021-07-08 12:11", }, { id: "2c49amId60Ju8xV6GiMu5BSArPmVaE2GfVuWFuXquA", title: "雾境序列CP28直参信息", type: 3, type_text: "动态", time: "2021-06-08 19:42", }, ], }, // dataList: { // banner: [ // { // id: 11, // img: // "https://cdn.star-linear.com/website/upload/banner/612ca2ab71ef6九宫格改尺寸.png", // jump_url: // "https://ms.star-linear.com/#/newsDetail?id=03f9DDrpEZezUEgNe2Tz6oVp-xYxFYOWZZg9Xvxtkw", // }, // { // id: 9, // img: // "https://cdn.star-linear.com/website/upload/banner/60f259f828575预约开启_974X660.png", // jump_url: // "https://ms.star-linear.com/#/newsDetail?id=c5d27C8ZhquZYeN5PBAr8m9KUWRCo-KQzLEa2XhlPg", // }, // ], // }, lan: "cn", }; }, computed: { swiper() { return this.$refs.mySwiper.$swiper; }, }, watch: { count(val) { if (val === this.imglength) { console.log("over"); // this.showloading = false; } }, }, mounted() { if ( !( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) ) ) { this.$router.push({ path: "/" }); } if (window.location.href.indexOf("#") > 0) { // window.location.href = window.location.href.split("#")[0]; history.pushState({}, "", window.location.href.split("#")[0]); } this.activeArr = this.characterArr.slice(0, 5); this.ip = this.$store.state.storageData.headers["x-real-ip"]; const mySwiper1 = new Swiper(".mySwiper", { initialSlide: this.activeIndex, notNextTick: true, direction: "vertical", setWrapperSize: true, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, // effect: "fade", mousewheel: true, mousewheelControl: true, slidesPerView: 1, resistanceRatio: 0, resizeObserver: true, height: document.documentElement.clientHeight, observer: true, observeParents: true, speed: 600, lazy: { loadPrevNext: true, loadPrevNextAmount: 1, loadOnTransitionStart: true, }, on: { slideChange: () => { const swiper = this.$refs.mySwiper.swiper; this.activeIndex = swiper.activeIndex; }, slideChangeTransitionStart: () => { // const swiper = this.$refs.mySwiper.swiper; // this.activeIndex = swiper.activeIndex; // this.mySwiper.lazy.loadInSlide(this.activeIndex); }, }, }); this.mySwiper = mySwiper1; const that = this; this.footerSwiper = new Swiper("#swiper-container2", { direction: "vertical", slidesPerView: "auto", // 设置slider容器能够同时显示的slides数量 freeMode: true, // 动量反弹。slides通过惯性滑动到边缘时,无法反弹。 mousewheel: true, nested: true, speed: 600, observeParents: true, observer: true, breakpoints: { 320: { // 当屏幕宽度大于等于320 freeMode: true, }, 768: { // 当屏幕宽度大于等于768 freeMode: true, }, 1280: { // 当屏幕宽度大于等于1280 freeMode: false, }, }, // 当在container2中滚到最下方,或者最上面的时候都会开启container1的鼠标滚轴控制 on: { reachEnd() { // 回调函数,当Swiper切换到最后一个Slide时执行(长页面滑动到底部的时候) // mySwiper1.mousewheel.enable(); // 开启container1的滚轴控制 }, progress(progress) { if (progress < 0.01) { that.mySwiper.mousewheel.enable(); } }, }, }); if (this.$route.params.id) { this.toViewSwiper(this.$route.params.id); } else { this.activeIndex = 0; } this.height = document.documentElement.clientHeight; window.addEventListener("resize", this.swiperInit); if (JSON.stringify(this.$route.params) !== "{}") { this.showloading = false; } else { this.preload(); // this.loadNumber(); } this.indexData(); }, destroyed() { window.removeEventListener("resize", this.swiperInit); }, methods: { indexData() { const source = this.$route.query.source; getData( { source, ip: this.ip, } // ,this.headers ).then((res) => { // this.orderSuccess = true; console.log(res); }); }, swiperInit() { this.height = document.documentElement.clientHeight; const that = this; that.mySwiper.destroy(); this.$nextTick(() => { const mySwiper1 = new Swiper(".mySwiper", { // eslint-disable-line no-unused-vars initialSlide: this.activeIndex, notNextTick: true, direction: "vertical", setWrapperSize: true, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, slidesPerView: 1, resistanceRatio: 0, resizeObserver: true, height: document.documentElement.clientHeight, observeParents: true, observer: true, mousewheel: true, mousewheelControl: true, speed: 600, lazy: { loadPrevNext: true, loadOnTransitionStart: true, loadPrevNextAmount: 1, }, on: { slideChange: () => { const swiper = this.$refs.mySwiper.swiper; that.activeIndex = swiper.activeIndex; }, }, }); that.mySwiper = mySwiper1; }); }, toViewSwiper(activeIndex) { this.mySwiper.lazy.loadInSlide(activeIndex); // const that = this; this.mySwiper.slideTo(activeIndex, 600, false); this.activeIndex = activeIndex; this.showNav = false; }, prev() { this.play = false; this.changeActive = false; const prev = this.characterArr.pop(); // 删除最后一个 添加到一个位置 this.characterArr.unshift(prev); this.activeArr = this.characterArr.slice(0, 5); setTimeout(() => { this.changeActive = true; }, 150); }, next() { this.changeActive = false; this.play = false; const next = this.characterArr.shift(); // 删除最后一个 添加到一个位置 this.characterArr.push(next); this.activeArr = this.characterArr.slice(0, 5); setTimeout(() => { this.changeActive = true; }, 150); }, changeCharacter(index) { this.play = false; this.changeActive = false; if (index < 2) { const sum = 2 - index; const prev = this.characterArr.splice(-sum); this.characterArr = prev.concat(this.characterArr); } else { const num = index - 2; const next = this.characterArr.splice(0, num); this.characterArr = this.characterArr.concat(next); } this.activeArr = this.characterArr.slice(0, 5); setTimeout(() => { this.changeActive = true; }, 150); }, closeMobileNav() { this.showNav = false; }, closeViedoBox() { this.showVideoBox = false; }, closeOrder() { this.showOrder = false; }, closeLand() { this.showLand = false; }, closeContact() { this.showContact = false; }, closeArgument() { this.showArgument = false; this.swiperInit(); }, openArgument(txt) { this.showArgument = true; this.argumentTitle = txt; this.mySwiper.detachEvents(); }, preload() { this.imglength = this.imgs.length; if (this.count === this.imglength) return; for (const img of this.imgs) { const image = new Image(); image.src = img; if (image.complete) { this.count++; const percentNum = Math.floor((this.count / this.imglength) * 100); this.percent = percentNum; // this.imgs.this.preload(); // console.log("complete", this.percent); continue; } image.onload = () => { this.count++; // 计算图片加载的百分数,绑定到percent变量 const percentNum = Math.floor((this.count / this.imglength) * 100); this.percent = percentNum; // console.log("onload", this.percent); }; } this.loadNumber(); }, loadNumber() { this.intervalId = setInterval(() => { if (this.percent > this.loading) { this.loading++; } else { setTimeout(() => { this.showloading = false; }, 200); window.clearInterval(this.intervalId); this.intervalId = null; } }, 20); }, enter(id) { if (id === "QQ") { this.showQQ = true; } else { this.showCode = true; } }, leaveFn(id) { console.log(id); if (id === "QQ") { this.showQQ = false; console.log(1111); } else { this.showCode = false; } }, togglePlay() { const audio = this.$refs.myAudio; if (this.play) { audio.pause(); this.play = false; return; } else { audio.play(); } const playPromiser = audio.play(); this.play = true; audio.onended = () => { console.log(playPromiser); // onended可以检测语音是否播完 // dosometing this.play = false; }; }, changeLan() { this.lan === "cn" ? (this.lan = "jp") : (this.lan = "cn"); if (this.play) { this.play = false; setTimeout(() => { this.togglePlay(); }, 0); } }, }, }; </script> <style lang="scss"> @import "@/assets/scss/mobile.scss"; </style>