951 lines
32 KiB
Vue
951 lines
32 KiB
Vue
|
<template>
|
|||
|
|
<div class="outhome">
|
|||
|
|
<Nav
|
|||
|
|
v-show="activeIndex !== 4"
|
|||
|
|
:active-index="activeIndex"
|
|||
|
|
@toViewSwiper="toViewSwiper"
|
|||
|
|
@showLandBox="showLandBox"
|
|||
|
|
></Nav>
|
|||
|
|
<div ref="mySwiper" class="swiper-container mySwiper swiper-no-swiping">
|
|||
|
|
<div class="swiper-wrapper" style="height: 100vh;">
|
|||
|
|
<div class="swiper-slide home">
|
|||
|
|
<video
|
|||
|
|
preload="auto"
|
|||
|
|
autoplay="autoplay"
|
|||
|
|
muted="muted"
|
|||
|
|
loop="loop"
|
|||
|
|
class="title_bg_video"
|
|||
|
|
>
|
|||
|
|
<source
|
|||
|
|
src="https://cdn.star-linear.com/resource/dream/video_new.mp4"
|
|||
|
|
/>
|
|||
|
|
</video>
|
|||
|
|
<div
|
|||
|
|
:data-background="require('@/assets/partTwo/btn.png')"
|
|||
|
|
class="playBtn swiper-lazy"
|
|||
|
|
@click="showVideoBox = true"
|
|||
|
|
></div>
|
|||
|
|
<img
|
|||
|
|
class="ageTip swiper-lazy"
|
|||
|
|
:data-src="require('@/assets/partOne/age.png')"
|
|||
|
|
alt=""
|
|||
|
|
@click="openArgument('ageTips')"
|
|||
|
|
/>
|
|||
|
|
<ul class="concatList">
|
|||
|
|
<li class="concat-item" @mouseenter="qq_number = false">
|
|||
|
|
<a
|
|||
|
|
class="sina"
|
|||
|
|
href="https://weibo.com/p/1006067514307100/"
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
></a>
|
|||
|
|
</li>
|
|||
|
|
<li class="concat-item" @mouseenter="qq_number = false">
|
|||
|
|
<div class="wechat"></div>
|
|||
|
|
</li>
|
|||
|
|
<li class="concat-item qq_item">
|
|||
|
|
<div class="qq" @mouseenter="qq_number = true"></div>
|
|||
|
|
<div
|
|||
|
|
v-if="qq_number"
|
|||
|
|
:style="{
|
|||
|
|
backgroundImage:
|
|||
|
|
'url(' + require('@/assets/partOne/qq_bg.png') + ')',
|
|||
|
|
}"
|
|||
|
|
class="qq_number"
|
|||
|
|
@mouseleave="qq_number = false"
|
|||
|
|
>
|
|||
|
|
<a
|
|||
|
|
href="https://jq.qq.com/?_wv=1027&k=BgdhvKj5"
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
>官方⑤群：819827942</a
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="concat-item" @mouseenter="qq_number = false">
|
|||
|
|
<a
|
|||
|
|
class="blibli"
|
|||
|
|
href="https://space.bilibili.com/1988649931/dynamic"
|
|||
|
|
target="_blank"
|
|||
|
|
rel="noopener noreferrer"
|
|||
|
|
></a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<div class="orderBox">
|
|||
|
|
<div class="order_btn" @click="showOrder = true"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div :data-background="bg_two" class="swiper-slide trailer swiper-lazy">
|
|||
|
|
<div :data-background="gif" class="news swiper-lazy">
|
|||
|
|
<NewList :news="newsList" :data="dataList"></NewList>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div :data-background="png" class="swiper-slide world swiper-lazy">
|
|||
|
|
<img :data-src="bg1" class="world_bg swiper-lazy" alt="" />
|
|||
|
|
<div
|
|||
|
|
:data-background="require('@/assets/partThree/border.png')"
|
|||
|
|
class="story swiper-lazy"
|
|||
|
|
>
|
|||
|
|
<img
|
|||
|
|
:data-src="require('@/assets/partThree/story.png')"
|
|||
|
|
class="story_bg swiper-lazy"
|
|||
|
|
src=""
|
|||
|
|
alt=""
|
|||
|
|
/>
|
|||
|
|
<div class="content">
|
|||
|
|
<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>
|
|||
|
|
</div>
|
|||
|
|
<div :class="activeIndex === 2 ? 'feedInFive' : ''">
|
|||
|
|
<p>请睁开双眼，今夜的烟火只为特别的您所准备。</p>
|
|||
|
|
<p>就此离开，也许会有遗憾……」</p>
|
|||
|
|
<p>欢迎来到梦乐园，梦幻与魔法永不落幕！</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- <div class="swiper-slide characters">
|
|||
|
|
<div :data-background="gif" class="gif swiper-lazy"></div>
|
|||
|
|
<div class="content">
|
|||
|
|
<div :data-background="team_bg" class="team_bg swiper-lazy"></div>
|
|||
|
|
<transition name="fade">
|
|||
|
|
<div
|
|||
|
|
v-if="changeActive"
|
|||
|
|
:style="{ backgroundImage: 'url(' + characterArr[2].bg + ')' }"
|
|||
|
|
class="bg"
|
|||
|
|
></div>
|
|||
|
|
</transition>
|
|||
|
|
<div :data-background="swiper1" class="swiper swiper-lazy">
|
|||
|
|
<div class="desBox">
|
|||
|
|
<div class="preview">
|
|||
|
|
CHARACTER - PREVIEW -
|
|||
|
|
</div>
|
|||
|
|
<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
|
|||
|
|
>
|
|||
|
|
<div v-if="characterArr[2].audio" class="voice">
|
|||
|
|
<img
|
|||
|
|
:src="
|
|||
|
|
play
|
|||
|
|
? require('../assets/partFour/vioce.gif')
|
|||
|
|
: require('../assets/partFour/vioce.png')
|
|||
|
|
"
|
|||
|
|
alt=""
|
|||
|
|
@click="togglePlay"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="dialogue">
|
|||
|
|
<p
|
|||
|
|
v-for="item in characterArr[2].dialogue"
|
|||
|
|
:key="item"
|
|||
|
|
class="text"
|
|||
|
|
>
|
|||
|
|
{{ item }}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<img
|
|||
|
|
v-if="activeIndex >= 2"
|
|||
|
|
:src="characterArr[2].team_bg"
|
|||
|
|
alt=""
|
|||
|
|
class="teamPic"
|
|||
|
|
/>
|
|||
|
|
<img
|
|||
|
|
v-if="activeIndex >= 2"
|
|||
|
|
:src="characterArr[2].name_bg"
|
|||
|
|
alt=""
|
|||
|
|
class="namePic"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
:data-background="require('@/assets/partFour/prev.png')"
|
|||
|
|
class="prev swiper-lazy"
|
|||
|
|
@click="prev"
|
|||
|
|
></div>
|
|||
|
|
<div
|
|||
|
|
:data-background="require('@/assets/partFour/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/partFour/checked.png')"
|
|||
|
|
class="active"
|
|||
|
|
alt=""
|
|||
|
|
srcset=""
|
|||
|
|
/>
|
|||
|
|
<img
|
|||
|
|
v-if="activeIndex >= 1"
|
|||
|
|
:src="item.miniPic"
|
|||
|
|
class="minipic"
|
|||
|
|
alt=""
|
|||
|
|
@click="changeCharacter(index)"
|
|||
|
|
/>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div> -->
|
|||
|
|
|
|||
|
|
<div class="swiper-slide community slide swiper-lazy">
|
|||
|
|
<div id="swiper-container2" class="swiper-container">
|
|||
|
|
<div class="swiper-wrapper">
|
|||
|
|
<div class="swiper-slide contentBox">
|
|||
|
|
<div :data-background="gif" class="gif swiper-lazy"></div>
|
|||
|
|
<div class="content">
|
|||
|
|
<div
|
|||
|
|
:data-background="team_bg"
|
|||
|
|
class="team_bg swiper-lazy"
|
|||
|
|
></div>
|
|||
|
|
<transition name="fade">
|
|||
|
|
<div
|
|||
|
|
v-if="changeActive"
|
|||
|
|
:style="{
|
|||
|
|
backgroundImage: 'url(' + characterArr[2].bg + ')',
|
|||
|
|
}"
|
|||
|
|
class="bg"
|
|||
|
|
></div>
|
|||
|
|
</transition>
|
|||
|
|
<div :data-background="swiper1" class="swiper swiper-lazy">
|
|||
|
|
<div class="desBox">
|
|||
|
|
<div class="preview">
|
|||
|
|
CHARACTER - PREVIEW -
|
|||
|
|
</div>
|
|||
|
|
<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
|
|||
|
|
>
|
|||
|
|
<div v-if="characterArr[2].audio" class="voice">
|
|||
|
|
<img
|
|||
|
|
:src="
|
|||
|
|
play
|
|||
|
|
? require('../assets/partFour/vioce.gif')
|
|||
|
|
: require('../assets/partFour/vioce.png')
|
|||
|
|
"
|
|||
|
|
alt=""
|
|||
|
|
@click="togglePlay"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="dialogue">
|
|||
|
|
<p
|
|||
|
|
v-for="item in characterArr[2].dialogue"
|
|||
|
|
:key="item"
|
|||
|
|
class="text"
|
|||
|
|
>
|
|||
|
|
{{ item }}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<img
|
|||
|
|
v-if="activeIndex >= 2"
|
|||
|
|
:src="characterArr[2].team_bg"
|
|||
|
|
alt=""
|
|||
|
|
class="teamPic"
|
|||
|
|
/>
|
|||
|
|
<img
|
|||
|
|
v-if="activeIndex >= 2"
|
|||
|
|
:src="characterArr[2].name_bg"
|
|||
|
|
alt=""
|
|||
|
|
class="namePic"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
:data-background="require('@/assets/partFour/prev.png')"
|
|||
|
|
class="prev swiper-lazy"
|
|||
|
|
@click="prev"
|
|||
|
|
></div>
|
|||
|
|
<div
|
|||
|
|
:data-background="require('@/assets/partFour/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/partFour/checked.png')"
|
|||
|
|
class="active"
|
|||
|
|
alt=""
|
|||
|
|
srcset=""
|
|||
|
|
/>
|
|||
|
|
<img
|
|||
|
|
v-if="activeIndex >= 1"
|
|||
|
|
:src="item.miniPic"
|
|||
|
|
class="minipic"
|
|||
|
|
alt=""
|
|||
|
|
@click="changeCharacter(index)"
|
|||
|
|
/>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="footerBox">
|
|||
|
|
<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=""
|
|||
|
|
/>
|
|||
|
|
<nuxt-link
|
|||
|
|
class="listItem"
|
|||
|
|
:to="{ name: 'terms' }"
|
|||
|
|
target="_blank"
|
|||
|
|
>
|
|||
|
|
<span>《用戶協議》及《用戶隱私條例》 </span>
|
|||
|
|
</nuxt-link>
|
|||
|
|
<!-- <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>
|
|||
|
|
<div class="swiper-scrollbar">
|
|||
|
|
<div class="swiper-scrollbar-drag"></div>
|
|||
|
|
</div>
|
|||
|
|
<span
|
|||
|
|
class="swiper-notification"
|
|||
|
|
aria-live="assertive"
|
|||
|
|
aria-atomic="true"
|
|||
|
|
></span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<audio
|
|||
|
|
ref="myAudio"
|
|||
|
|
controls="controls"
|
|||
|
|
:src="lan === 'cn' ? characterArr[2].audio : characterArr[2].audio_jp"
|
|||
|
|
></audio>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div v-show="activeIndex !== 4" class="swiper-button-next swiper_btn"></div>
|
|||
|
|
<Order v-if="showOrder" @closeOrder="closeOrder"></Order>
|
|||
|
|
<Land v-if="showLand" @closeLand="closeLand"></Land>
|
|||
|
|
<Contact v-if="showContact" @closeContact="closeContact"></Contact>
|
|||
|
|
<!-- <Argument
|
|||
|
|
v-if="showArgument"
|
|||
|
|
:argument-title="argumentTitle"
|
|||
|
|
@closeArgument="closeArgument"
|
|||
|
|
></Argument> -->
|
|||
|
|
<VideoBox v-if="showVideoBox" @closeViedoBox="closeViedoBox"></VideoBox>
|
|||
|
|
<HomeLoad v-if="showloading" :loading="loading" :type="'pc'"></HomeLoad>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import Swiper from "swiper";
|
|||
|
|
import { getIp, getData } from "@/api/data.js";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
Nav: () => import("../components/nav.vue"),
|
|||
|
|
Order: () => import("../components/order.vue"),
|
|||
|
|
Land: () => import("../components/land.vue"),
|
|||
|
|
Contact: () => import("../components/contact.vue"),
|
|||
|
|
// Argument: () => import("../components/argument.vue"),
|
|||
|
|
VideoBox: () => import("../components/VideoBox.vue"),
|
|||
|
|
HomeLoad: () => import("../components/Home_load.vue"),
|
|||
|
|
NewList: () => import("../components/newsList.vue"),
|
|||
|
|
},
|
|||
|
|
async asyncData({ req, store, route }) {
|
|||
|
|
const [d1, d2] = await Promise.all([getIp().then(), getData().then()]);
|
|||
|
|
const newsList = {
|
|||
|
|
last: d2.data.news,
|
|||
|
|
notice: [],
|
|||
|
|
activity: [],
|
|||
|
|
trends: [],
|
|||
|
|
};
|
|||
|
|
// console.log(d2.data);
|
|||
|
|
|
|||
|
|
store.commit("storageData/addHeaders", d1.data.ip);
|
|||
|
|
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,
|
|||
|
|
png: "https://cdn.star-linear.com/resource/dream/motianlun.png",
|
|||
|
|
bg_two: require("@/assets/partTwo/bg_two.png"),
|
|||
|
|
bg_two_light: "../assets/partTwo/bg_two_light.png",
|
|||
|
|
gif: "https://cdn.star-linear.com/resource/dream/bg.gif",
|
|||
|
|
bg1: "https://cdn.star-linear.com/resource/dream/bg1.png",
|
|||
|
|
swiper1: "https://cdn.star-linear.com/resource/dream/swiper1.png",
|
|||
|
|
team_bg: "https://cdn.star-linear.com/resource/dream/team_bg.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/bethina_bg.jpg",
|
|||
|
|
dialogue: ["拂晓骑兵团成员之一，", "思维有些跳脱，让人捉摸不透。"],
|
|||
|
|
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/kikidi_bg.jpg",
|
|||
|
|
dialogue: ["神秘的少年。", "看似友好的笑容下藏着什么呢？"],
|
|||
|
|
// audio: "https://cdn.star-linear.com/resource/kikidi.wav",
|
|||
|
|
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/demian_bg.jpg",
|
|||
|
|
dialogue: ["拂晓骑兵团的团长，", "同时也是洛维斯的王子。"],
|
|||
|
|
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/isreall_bg.jpg",
|
|||
|
|
dialogue: ["塔吉玛的掌管者。", "为人不苟言笑，做事雷厉风行。"],
|
|||
|
|
// audio: "https://cdn.star-linear.com/resource/isreall.mp3",
|
|||
|
|
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/selieu_bg.jpg",
|
|||
|
|
dialogue: ["统治精灵的王，让精灵们彻底与外界隔开。", "讨厌争端。"],
|
|||
|
|
// audio: "https://cdn.star-linear.com/resource/selieu.mp3",
|
|||
|
|
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/ophelia_bg.jpg",
|
|||
|
|
dialogue: ["拂晓骑兵团成员之一，", "骑术、剑术等均为顶尖水准。"],
|
|||
|
|
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,
|
|||
|
|
showCode: false,
|
|||
|
|
showQQ: false,
|
|||
|
|
showOrder: false,
|
|||
|
|
showLand: false,
|
|||
|
|
showContact: false,
|
|||
|
|
showArgument: false,
|
|||
|
|
argumentTitle: "userAgreement",
|
|||
|
|
last_bg: "",
|
|||
|
|
qq_number: false,
|
|||
|
|
showVideoBox: false,
|
|||
|
|
audio: "",
|
|||
|
|
imgs: [
|
|||
|
|
require("@/assets/mobile/loading.png"),
|
|||
|
|
require("@/assets/mobile/loading_line.png"),
|
|||
|
|
require("@/assets/partOne/nav_img.png"),
|
|||
|
|
require("@/assets/partOne/age.png"),
|
|||
|
|
"https://cdn.star-linear.com/resource/dream/order.png",
|
|||
|
|
require("@/assets/mobile/scroll.png"),
|
|||
|
|
require("@/assets/partOne/img.png"),
|
|||
|
|
require("@/assets/partOne/focus_bg.png"),
|
|||
|
|
],
|
|||
|
|
tiemr: "",
|
|||
|
|
count: 0,
|
|||
|
|
loading: 0,
|
|||
|
|
precent: 0,
|
|||
|
|
imglength: 0,
|
|||
|
|
intervalId: null,
|
|||
|
|
showloading: true,
|
|||
|
|
ip: "",
|
|||
|
|
headers: "",
|
|||
|
|
lan: "cn",
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
swiper() {
|
|||
|
|
return this.$refs.mySwiper.$swiper;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
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: "/m" });
|
|||
|
|
}
|
|||
|
|
if (window.location.href.indexOf("#") > 0) {
|
|||
|
|
history.pushState({}, "", window.location.href.split("#")[0]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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",
|
|||
|
|
},
|
|||
|
|
slidesPerView: 1,
|
|||
|
|
mousewheel: true,
|
|||
|
|
mousewheelControl: true,
|
|||
|
|
resistanceRatio: 0,
|
|||
|
|
height: window.innerHeight,
|
|||
|
|
// observeParents: true,
|
|||
|
|
speed: 600,
|
|||
|
|
lazy: {
|
|||
|
|
loadPrevNext: true,
|
|||
|
|
loadPrevNextAmount: 1,
|
|||
|
|
loadOnTransitionStart: true,
|
|||
|
|
},
|
|||
|
|
on: {
|
|||
|
|
slideChange: () => {
|
|||
|
|
const swiper = this.$refs.mySwiper.swiper;
|
|||
|
|
this.activeIndex = swiper.activeIndex;
|
|||
|
|
},
|
|||
|
|
// slideChangeTransitionEnd回调函数，swiper从一个slide过渡到另一个slide结束时执行。
|
|||
|
|
// this.mousewheel.disable()禁止鼠标滚轴控制。
|
|||
|
|
// 此时是当进入页面5时，关闭container1的鼠标滚轴控制
|
|||
|
|
slideChangeTransitionEnd() {
|
|||
|
|
// if (this.activeIndex === 4) {
|
|||
|
|
// mySwiper1.mousewheel.disable();
|
|||
|
|
// }
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
this.mySwiper = mySwiper1;
|
|||
|
|
const that = this;
|
|||
|
|
this.footerSwiper = new Swiper("#swiper-container2", {
|
|||
|
|
direction: "vertical",
|
|||
|
|
slidesPerView: "auto", // 设置slider容器能够同时显示的slides数量
|
|||
|
|
centeredSlides: false,
|
|||
|
|
freeMode: true, // 动量反弹。slides通过惯性滑动到边缘时，无法反弹。
|
|||
|
|
mousewheel: true,
|
|||
|
|
nested: true,
|
|||
|
|
speed: 600,
|
|||
|
|
breakpoints: {
|
|||
|
|
320: {
|
|||
|
|
freeMode: true,
|
|||
|
|
},
|
|||
|
|
768: {
|
|||
|
|
freeMode: true,
|
|||
|
|
},
|
|||
|
|
1280: {
|
|||
|
|
freeMode: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
// 当在container2中滚到最下方，或者最上面的时候都会开启container1的鼠标滚轴控制
|
|||
|
|
on: {
|
|||
|
|
reachEnd() {
|
|||
|
|
// 回调函数，当Swiper切换到最后一个Slide时执行(长页面滑动到底部的时候)
|
|||
|
|
},
|
|||
|
|
reachBeginning() {
|
|||
|
|
// 回调函数，Swiper切换到初始化位置时执行
|
|||
|
|
},
|
|||
|
|
slideChangeTransitionStart() {
|
|||
|
|
// if (this.activeIndex === 4) {
|
|||
|
|
that.mySwiper.mousewheel.disable();
|
|||
|
|
// }
|
|||
|
|
},
|
|||
|
|
progress(progress) {
|
|||
|
|
if (progress < 0.01) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
that.mySwiper.mousewheel.enable();
|
|||
|
|
}, 100);
|
|||
|
|
} else {
|
|||
|
|
that.mySwiper.mousewheel.disable();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
// window.addEventListener("resize", this.swiperInit);
|
|||
|
|
this.activeArr = this.characterArr.slice(0, 5);
|
|||
|
|
this.ip = this.$store.state.storageData.headers;
|
|||
|
|
this.indexData();
|
|||
|
|
|
|||
|
|
if (this.$route.params.id) {
|
|||
|
|
this.activeIndex = this.$route.params.id;
|
|||
|
|
this.toViewSwiper(this.activeIndex);
|
|||
|
|
} else {
|
|||
|
|
this.activeIndex = 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (JSON.stringify(this.$route.params) !== "{}") {
|
|||
|
|
this.showloading = false;
|
|||
|
|
} else {
|
|||
|
|
this.preload();
|
|||
|
|
// this.loadNumber();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// swiperInit() {
|
|||
|
|
// this.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",
|
|||
|
|
// },
|
|||
|
|
// slidesPerView: 1,
|
|||
|
|
// mousewheel: true,
|
|||
|
|
// mousewheelControl: true,
|
|||
|
|
// resistanceRatio: 0,
|
|||
|
|
// // autoHeight: true,
|
|||
|
|
// height: window.innerHeight,
|
|||
|
|
// speed: 600,
|
|||
|
|
// lazy: {
|
|||
|
|
// loadPrevNext: true,
|
|||
|
|
// loadPrevNextAmount: 1,
|
|||
|
|
// loadOnTransitionStart: true,
|
|||
|
|
// },
|
|||
|
|
// on: {
|
|||
|
|
// slideChange: () => {
|
|||
|
|
// const swiper = this.$refs.mySwiper.swiper;
|
|||
|
|
// this.activeIndex = swiper.activeIndex;
|
|||
|
|
// },
|
|||
|
|
// },
|
|||
|
|
// });
|
|||
|
|
// this.mySwiper = mySwiper1;
|
|||
|
|
// });
|
|||
|
|
// },
|
|||
|
|
indexData() {
|
|||
|
|
const source = this.$route.query.source;
|
|||
|
|
getData(
|
|||
|
|
{
|
|||
|
|
source,
|
|||
|
|
ip: this.ip,
|
|||
|
|
}
|
|||
|
|
// ,this.headers
|
|||
|
|
).then((res) => {
|
|||
|
|
// this.orderSuccess = true;
|
|||
|
|
// console.log(res);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
toViewSwiper(activeIndex) {
|
|||
|
|
this.mySwiper.lazy.loadInSlide(activeIndex);
|
|||
|
|
this.mySwiper.slideTo(activeIndex, 600, false);
|
|||
|
|
this.activeIndex = activeIndex;
|
|||
|
|
},
|
|||
|
|
prev() {
|
|||
|
|
this.play = false;
|
|||
|
|
this.changeActive = false;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.changeActive = true;
|
|||
|
|
}, 200);
|
|||
|
|
const prev = this.characterArr.pop(); // 删除最后一个 添加到一个位置
|
|||
|
|
this.characterArr.unshift(prev);
|
|||
|
|
this.activeArr = this.characterArr.slice(0, 5);
|
|||
|
|
},
|
|||
|
|
next() {
|
|||
|
|
this.changeActive = false;
|
|||
|
|
this.play = false;
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.changeActive = true;
|
|||
|
|
}, 200);
|
|||
|
|
const next = this.characterArr.shift(); // 删除最后一个 添加到一个位置
|
|||
|
|
this.characterArr.push(next);
|
|||
|
|
this.activeArr = this.characterArr.slice(0, 5);
|
|||
|
|
},
|
|||
|
|
changeCharacter(index) {
|
|||
|
|
this.play = false;
|
|||
|
|
this.changeActive = false;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.changeActive = true;
|
|||
|
|
}, 200);
|
|||
|
|
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);
|
|||
|
|
},
|
|||
|
|
enter(id) {
|
|||
|
|
if (id === "QQ") {
|
|||
|
|
this.showQQ = true;
|
|||
|
|
} else {
|
|||
|
|
this.showCode = true;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
leave() {
|
|||
|
|
this.showQQ = false;
|
|||
|
|
this.showCode = false;
|
|||
|
|
},
|
|||
|
|
closeOrder() {
|
|||
|
|
this.showOrder = false;
|
|||
|
|
},
|
|||
|
|
showLandBox() {
|
|||
|
|
this.showLand = true;
|
|||
|
|
},
|
|||
|
|
closeLand() {
|
|||
|
|
this.showLand = false;
|
|||
|
|
},
|
|||
|
|
closeContact() {
|
|||
|
|
this.showContact = false;
|
|||
|
|
},
|
|||
|
|
closeArgument() {
|
|||
|
|
this.showArgument = false;
|
|||
|
|
},
|
|||
|
|
openArgument(txt) {
|
|||
|
|
this.showArgument = true;
|
|||
|
|
this.argumentTitle = txt;
|
|||
|
|
},
|
|||
|
|
closeViedoBox() {
|
|||
|
|
this.showVideoBox = 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);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
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;
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
this.loadNumber();
|
|||
|
|
},
|
|||
|
|
loadNumber() {
|
|||
|
|
this.intervalId = setInterval(() => {
|
|||
|
|
if (this.percent > this.loading || !this.percent) {
|
|||
|
|
this.loading += 1;
|
|||
|
|
} else {
|
|||
|
|
window.clearInterval(this.intervalId);
|
|||
|
|
this.intervalId = null;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.showloading = false;
|
|||
|
|
}, 20);
|
|||
|
|
}
|
|||
|
|
}, 10);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
@import "@/assets/scss/index.scss";
|
|||
|
|
</style>
|