1264 lines
42 KiB
Vue
1264 lines
42 KiB
Vue
<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>
|