|
|
@@ -6,6 +6,8 @@
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
|
|
<meta name="format-detection" content="telephone=no">
|
|
|
+ <meta name="renderer" content="webkit">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
<base target="_blank">
|
|
|
<meta name="Keywords" content="奇迹觉醒，新视界，视频专题">
|
|
|
<meta name="description" content="">
|
|
|
@@ -18,9 +20,9 @@
|
|
|
<script src="//www.duowan.com/assets/js/jquery.js"></script>
|
|
|
<script src="/src/lib/rem.js"></script>
|
|
|
<link href="sass/global.scss" rel="stylesheet">
|
|
|
- <script >
|
|
|
+ <script>
|
|
|
document.addEventListener('readystatechange', function (event) {
|
|
|
- if(document.readyState === 'complete'){
|
|
|
+ if (document.readyState === 'complete') {
|
|
|
$('.loading-wrapper').fadeOut()
|
|
|
}
|
|
|
})
|
|
|
@@ -30,67 +32,89 @@
|
|
|
<body>
|
|
|
<div id="app" v-cloak>
|
|
|
|
|
|
- <div class="swiper-container main-swiper" v-show="loaded">
|
|
|
- <div class="swiper-wrapper">
|
|
|
+ <div class="swiper-container main-swiper" v-show="loaded" :style="{width:viewWidth+'px',height:viewHeight+'px',transform:viewTransform}">
|
|
|
+ <div class="swiper-wrapper" >
|
|
|
<!--首页 s-->
|
|
|
<div class="loading-wrapper">
|
|
|
<img src="src/img/loading.gif" class="loading">
|
|
|
</div>
|
|
|
<div class="swiper-slide">
|
|
|
<div class="page-primary">
|
|
|
- <img src="//pub.dwstatic.com/zt2018/qjjx05//img/primary-start.jpg" style="display: none" v-if="isMobile">
|
|
|
- <img src="//pub.dwstatic.com/zt2018/qjjx05//img/primary-turn.jpg" style="display: none" v-if="isMobile">
|
|
|
- <img src="//pub.dwstatic.com/zt2018/qjjx05//img/primary-bg-loop.jpg" style="display: none" v-if="isMobile">
|
|
|
- <div class="mobile-bg" ref="mobile-bg" v-if="isMobile"></div>
|
|
|
- <div :class="['primary-guide','animated', isPrimaryEnter ? 'fadeOut' : '']">
|
|
|
- <span class="box-mouse" @click="showPagePrimary" :style="{cursor: isPrimaryEnter ? 'default' : 'pointer'}">
|
|
|
+ <img src="http://pub.dwstatic.com/zt2018/qjjx05//img/primary-start-compressed.gif" ref="mobile-bg"
|
|
|
+ class="mobile-bg" v-if="isMobile">
|
|
|
+ <div :class="['primary-guide','animated', isPrimaryEnter ? 'fadeOut' : '']">
|
|
|
+ <span class="box-mouse" @click="handleTowerClick"
|
|
|
+ :style="{cursor: isPrimaryEnter ? 'default' : 'pointer'}">
|
|
|
</span>
|
|
|
+ </div>
|
|
|
+ <div class="primary-from">
|
|
|
+ <a href="//duowan.com" class="icon-xsj" target="_blank"></a>
|
|
|
+ <a href="#" class="icon-ear" target="_blank"></a>
|
|
|
+ </div>
|
|
|
+ <div :class="['primary-nav','animated delay-1s', isPrimaryEnter ? 'fadeIn' : '']"
|
|
|
+ v-show="isPrimaryEnter">
|
|
|
+ <a class=" primary-nav-item" href="http://www.duowan.com/" target="_blank">
|
|
|
+ <i class="icon-home"></i>
|
|
|
+ <span>官网</span>
|
|
|
+ </a>
|
|
|
+ <a class=" primary-nav-item" v-if="!isMobile" href="http://www.duowan.com/"
|
|
|
+ target="_blank">
|
|
|
+ <i class="icon-download"></i>
|
|
|
+ <span>下载</span>
|
|
|
+ </a>
|
|
|
+ <a class=" primary-nav-item" @mouseenter="shareShow = true">
|
|
|
+ <i class="icon-share"></i>
|
|
|
+ <span>分享</span>
|
|
|
+ </a>
|
|
|
+ <div class="bdsharebuttonbox bdshare-button-style0-16" data-bd-bind="1495269586842"
|
|
|
+ v-show="shareShow" @mouseleave="shareShow = false">
|
|
|
+ <span>分享到：</span>
|
|
|
+ <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
|
|
|
+ <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
|
|
|
+ <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
|
|
|
+ <a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a>
|
|
|
+ <a href="#" class="bds_tieba" data-cmd="tieba" title="分享到人人网"></a>
|
|
|
+ <a href="#" class="bds_more" data-cmd="more"></a>
|
|
|
</div>
|
|
|
- <div class="primary-from">
|
|
|
- <a href="#" class="icon-xsj" target="_blank"></a>
|
|
|
+ <div :class="['mobile-bg-reader', isMobileBGPlaying ? 'active' : '']"
|
|
|
+ @click="isMobileBGPlaying = !isMobileBGPlaying">
|
|
|
+ <audio src="http://pub.dwstatic.com/zt2018/wxwy1809/audio/mobile-bg.mp3" ref="mobile-bgm" loop autoplay></audio>
|
|
|
</div>
|
|
|
- <div :class="['primary-nav','animated delay-1s', isPrimaryEnter ? 'fadeIn' : '']" v-show="isPrimaryEnter">
|
|
|
- <a class="diamond primary-nav-item">
|
|
|
- <i class="icon-home"></i>
|
|
|
- <span>官网</span>
|
|
|
- </a>
|
|
|
- <a class="diamond primary-nav-item" v-if="!isMobile">
|
|
|
- <i class="icon-download"></i>
|
|
|
- <span>下载</span>
|
|
|
- </a>
|
|
|
- <a class="diamond primary-nav-item">
|
|
|
- <i class="icon-share"></i>
|
|
|
- <span>分享</span>
|
|
|
- </a>
|
|
|
- <a class="diamond primary-nav-item" v-if="!isMobile">
|
|
|
- <i class="icon-music"></i>
|
|
|
- <span>音乐</span>
|
|
|
- </a>
|
|
|
- <div :class="['mobile-bg-reader', isMobileBGPlaying ? 'active' : '']"
|
|
|
- @click="isMobileBGPlaying = !isMobileBGPlaying" v-if="isMobile">
|
|
|
- <audio src="src/audio/mobile-bg.mp3" ref="mobile-bgm" loop autoplay></audio>
|
|
|
- </div>
|
|
|
- <div class="black-line" v-if="!isMobile"></div>
|
|
|
- </div >
|
|
|
- <img src="img/banner-logo.png"
|
|
|
- :class="['banner-logo','animated delay-1s', isPrimaryEnter ? 'fadeIn' : '']" v-show="isPrimaryEnter" >
|
|
|
- <img src="img/mobile-video-play.png" v-if="isMobile" v-show="isPrimaryEnter"
|
|
|
- :class="['mobile-video-play','animated delay-1s', isPrimaryEnter ? 'fadeIn' : '']"
|
|
|
- @click="mobileVideoVisiable = true">
|
|
|
- <div :class="['tip-scroll-down','animated delay-1s', isPrimaryEnter ? 'fadeIn' : '']" v-show="isPrimaryEnter">
|
|
|
- <img src="img/text-scroll-down.png" v-if="!isMobile">
|
|
|
- <i class="icon-down"></i>
|
|
|
- </div>
|
|
|
- <video src="https://dw-bw6.dwstatic.com/f811d5c665b9668dc5655fb416174821/5b936493/53/7/1836/8948869-101-1536116280.mp4" autoplay loop ref="primary-video" v-if="!isMobile"></video>
|
|
|
+ <div class="black-line" v-if="!isMobile"></div>
|
|
|
+ </div>
|
|
|
+ <img src="img/banner-logo.png"
|
|
|
+ :class="['banner-logo','animated delay-1s', isPrimaryEnter ? 'fadeIn' : '']"
|
|
|
+ v-show="isPrimaryEnter">
|
|
|
+ <img src="img/mobile-video-play.png" v-if="isMobile" v-show="isPrimaryEnter"
|
|
|
+ :class="['mobile-video-play','animated delay-1s', isPrimaryEnter ? 'fadeIn' : '']"
|
|
|
+ @click="mobileVideoVisiable = true">
|
|
|
+ <div :class="['tip-scroll-down','animated delay-1s', isPrimaryEnter ? 'fadeIn' : '']"
|
|
|
+ v-show="isPrimaryEnter">
|
|
|
+ <img src="img/text-scroll-down.png" v-if="!isMobile">
|
|
|
+ <i class="icon-down"></i>
|
|
|
+ </div>
|
|
|
+ <video :src="isMobile ? '' : 'https://dw-bw6.dwstatic.com/4f8ebaf180976f2981e3d361220b05bf/5b99c1ed/47/9/1837/8951717-101-1536655530.mp4'"
|
|
|
+ autoplay loop
|
|
|
+ ref="primary-start-video"
|
|
|
+ v-if="!isMobile"
|
|
|
+ class='animated'></video>
|
|
|
+ <video style="display: none;"
|
|
|
+ :src="isMobile ? '' : 'https://dw-bw6.dwstatic.com/214cd17590d97210fab485435133b32a/5b99c1ed/89/8/1837/8951719-101-1536655538.mp4'"
|
|
|
+ class="animated"
|
|
|
+ ref="primary-turn-video"
|
|
|
+ v-if="!isMobile"></video>
|
|
|
+ <video style="display: none;"
|
|
|
+ :src="isMobile ? '' : 'https://dw-bw6.dwstatic.com/b2d1326e81fb228fef992ebf067dc191/5b99c1ed/87/2/1837/8951723-101-1536655555.mp4'"
|
|
|
+ class="animated"
|
|
|
+ ref="primary-loop-video" loop
|
|
|
+ v-if="!isMobile"></video>
|
|
|
<transition name="fade">
|
|
|
- <div class="primary-mobile-video-wrapper" v-if="isMobile" v-show="mobileVideoVisiable" @click.stop="mobileVideoVisiable = false">
|
|
|
- <video src="https://dw-bw6.dwstatic.com/04a54eeba2de60c8c50b630dbc35fce1/5b9482c4/52/9/1836/8948979-102-1536129095.mp4" ref="primary-mobile-video" class="primary-mobile-video" controls></video>
|
|
|
+ <div class="primary-mobile-video-wrapper" v-if="isMobile" v-show="mobileVideoVisiable"
|
|
|
+ @click.stop="mobileVideoVisiable = false">
|
|
|
+ <video src="https://dw-bw6.dwstatic.com/91e1e68a8c006ec35806c36e0c9d7aec/5b9b1df3/88/6/1837/8951715-101-1536655514.mp4"
|
|
|
+ ref="primary-mobile-video" class="primary-mobile-video" controls></video>
|
|
|
</div>
|
|
|
</transition>
|
|
|
- <!--预加载视频-->
|
|
|
- <video src='https://dw-bw6.dwstatic.com/198bc99950c41ab0af4958081f3087ed/5b936493/59/9/1836/8948871-101-1536116294.mp4' style="display: none" v-if="!isMobile"></video>
|
|
|
- <video src='https://dw-bw6.dwstatic.com/6f193edcf485cf0226ec5390d92d8af2/5b936493/51/4/1836/8948867-101-1536116266.mp4' style="display: none" v-if="!isMobile"></video>
|
|
|
- <!--预加载视频-->
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--首页 e-->
|
|
|
@@ -102,15 +126,19 @@
|
|
|
<div class="book-wrap">
|
|
|
<ul>
|
|
|
<li :class="['item' + (index + 1)]" v-for="(item,index) in worldList" :key="index">
|
|
|
- <p><img :src="item.cover" alt="" /></p>
|
|
|
+ <p><img :src="isWorldShow ? resourceAPI + item.cover : 'http://pub.dwstatic.com/common/img/blank.png'" alt="" /></p>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<p class="book-switch prev"></p>
|
|
|
<p class="book-switch next"></p>
|
|
|
</div>
|
|
|
- <audio src="/src/audio/world/paging.mp3" class="pagingMp3"></audio>
|
|
|
- <audio src="/src/audio/world/world.mp3" class="worldMp3" ref="world-video"></audio>
|
|
|
+ <audio :src="resourceAPI + 'audio/world/paging.mp3'" class="pagingMp3"></audio>
|
|
|
+ <audio :src="resourceAPI + 'audio/world/world.mp3'" class="worldMp3" ref="world-video"></audio>
|
|
|
+ <div>
|
|
|
+ <audio :src="resourceAPI + 'audio/world/world-bgm1.mp3'" class="world-bgm1 world-bgm"></audio>
|
|
|
+ <audio :src="resourceAPI + 'audio/world/world-bgm2.mp3'" class="world-bgm2 world-bgm"></audio>
|
|
|
+ </div>
|
|
|
<p class="video-play" v-if="!isMobile"></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -118,23 +146,29 @@
|
|
|
|
|
|
<!-- 场景 s -->
|
|
|
<div class="swiper-slide page-scene">
|
|
|
- <div class="content-wrapper">
|
|
|
+ <div class="content-wrapper" style="overflow: hidden">
|
|
|
<ul class="scene-list">
|
|
|
- <li v-for="(item, index) in sceneList" :class="['scene-item item-bg' + (index + 1), currentSceneIndex === index ? 'active' : '']" :key="item" @click.self="currentSceneIndex = index">
|
|
|
+ <li v-for="(item, index) in sceneList"
|
|
|
+ :class="['scene-item item-bg' + (index + 1), currentSceneIndex === index ? 'active' : '']"
|
|
|
+ :key="item" @click.self="currentSceneIndex = index">
|
|
|
</li>
|
|
|
</ul>
|
|
|
<img src="img/scene-cover.png" class="scene-cover">
|
|
|
<ul class="scene-pic-list" ref='scene-wrapper'>
|
|
|
<div data-depth="0.1">
|
|
|
- <li v-for="(scene, index) in sceneList" class="scene-pic-item" v-show="currentSceneIndex === index" :key="index" >
|
|
|
- <img :src="'//pub.dwstatic.com/zt2018/qjjx05//img/scene'+ (index + 1) + '.png'" >
|
|
|
- <p class="scene-desc">{{scene.desc}}</p>
|
|
|
+ <li v-for="(scene, index) in sceneList"
|
|
|
+ :class="['scene-pic-item']"
|
|
|
+ v-show="currentSceneIndex === index"
|
|
|
+ :key="index">
|
|
|
+ <img :data-original="'//pub.dwstatic.com/zt2018/qjjx05//img/scene'+ (index + 1) + '.png'" :ref="'scene' + (index + 1)">
|
|
|
</li>
|
|
|
- <img src="src/img/scene-shadow.png" class="text-shadow">
|
|
|
</div>
|
|
|
+ <img src="src/img/scene-shadow.png" class="text-shadow">
|
|
|
+ <p class="scene-desc">{{sceneList[currentSceneIndex].desc}}</p>
|
|
|
</ul>
|
|
|
- <div :class="['scene-reader', isReading ? 'active' : '']" @click="isReading = !isReading" v-if="!isMobile">
|
|
|
- <audio src="src/audio/scenes/scene1.mp3" ref="scene-audio-player"></audio>
|
|
|
+ <div :class="['scene-reader', isReading ? 'active' : '']" @click="isReading = !isReading"
|
|
|
+ v-show="!isMobile">
|
|
|
+ <audio :src="resourceAPI + 'audio/scenes/scene1.mp3'" ref="scene-audio-player"></audio>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -144,23 +178,25 @@
|
|
|
<div class="swiper-slide">
|
|
|
<div class="page-role">
|
|
|
<div class="role-list">
|
|
|
- <ul>
|
|
|
- <li v-for="(item,index) in roleList" :key="index" :class="['item' + (index + 1),'animated',isRoleListEnter ? 'fadeInDown' : '']" :animate-delay="(index / 10 + index * 0.2) + 's'">
|
|
|
+ <ul v-for="(item,index) in roleList" :key="index" :class="index == 0 ? 'is-active' : ''">
|
|
|
+ <li v-for="(subItem,subIndex) in item" :key="subIndex" :class="['animated',isRoleListEnter ? 'fadeInDown' : '']" :animate-delay="(subIndex / 10 + subIndex * 0.2) + 's'">
|
|
|
<p class="item-mask"></p>
|
|
|
- <img :src="resourceAPI + item.listCover" alt="" />
|
|
|
+ <img :src="isRoleShow ? resourceAPI + subItem.listCover : 'http://pub.dwstatic.com/common/img/blank.png'" alt="" />
|
|
|
+ {{index}}
|
|
|
</li>
|
|
|
</ul>
|
|
|
<p class="role-bot-arrow"></p>
|
|
|
</div>
|
|
|
- <div class="role-bigList">
|
|
|
+ <div class="role-bigList" v-if="isRoleShow">
|
|
|
<ul>
|
|
|
- <li v-for="(item,index) in roleList" :key="index" :class="['ml','item' + (index + 1)]">
|
|
|
- <!-- <img :src="'../..//' + item.cover" alt="" /> -->
|
|
|
+ <template v-for="(item,index) in roleList" :key="index">
|
|
|
+ <li v-for="(subItem,subIndex) in item" :key="subIndex" :class="['ml','item' + (index * 5 + subIndex + 1)]">
|
|
|
<div class="imgbox"></div>
|
|
|
</li>
|
|
|
+ </template>
|
|
|
</ul>
|
|
|
</div>
|
|
|
- <div class="role-info">
|
|
|
+ <div class="role-info" v-if="isRoleShow">
|
|
|
<div class="role-info-flex">
|
|
|
<div class="role-info-box role-info-left">
|
|
|
<p class="role-back"></p>
|
|
|
@@ -169,7 +205,8 @@
|
|
|
</div>
|
|
|
<div class="role-info-box role-info-right">
|
|
|
<div class="info-main">
|
|
|
- <div class="info-item" role-wrap="role" v-for="(roleItem,index) in roleList" :key="index" :style="{ display: index == 0 ? 'block' : 'none' }">
|
|
|
+ <template v-for="(item,index) in roleList" :key="index">
|
|
|
+ <div class="info-item" role-wrap="role" v-for="(subItem,subIndex) in item" :key="subIndex" :style="{ display: index == 0 ? 'block' : 'none' }">
|
|
|
<div class="attr-box attr-list" role-tab="attrTab">
|
|
|
<ul>
|
|
|
<li class="item1 is-active" data-bg="0"></li>
|
|
|
@@ -182,7 +219,7 @@
|
|
|
<div class="skill-content">
|
|
|
<ul role-content="skillTab">
|
|
|
<template>
|
|
|
- <li v-for="(skill,skillIndex) in roleItem.skillList" :key="skillIndex" :style="{ display: skillIndex == 0 ? 'block' : 'none' }">
|
|
|
+ <li v-for="(skill,skillIndex) in subItem.skillList" :key="skillIndex" :style="{ display: skillIndex == 0 ? 'block' : 'none' }">
|
|
|
<h2>{{ skill.name }}</h2>
|
|
|
<div class="skill-info">
|
|
|
<p class="skill-attr">[{{ skill.attr }}技能]</p>
|
|
|
@@ -204,46 +241,47 @@
|
|
|
</div>
|
|
|
<div class="role-box content-part">
|
|
|
<div class="role-name">
|
|
|
- {{ roleItem.name }}
|
|
|
+ {{ subItem.name }}
|
|
|
</div>
|
|
|
<div class="role-cv">
|
|
|
<img src="/src/img/role-cv-bg.png" alt="" />
|
|
|
- <p class="cv-name">{{ roleItem.cv }}</p>
|
|
|
+ <p class="cv-name">{{ subItem.cv }}</p>
|
|
|
<p class="horn"></p>
|
|
|
<div class="cv-audio">
|
|
|
- <audio :src="resourceAPI + 'audio/role/role' + (index + 1) + '-cv1.mp3'" class="cv-m1"></audio>
|
|
|
- <audio :src="resourceAPI + 'audio/role/role' + (index + 1) + '-cv2.mp3'" class="cv-m2"></audio>
|
|
|
+ <audio :src="resourceAPI + 'audio/role/role' + (index * 5 + subIndex + 1) + '-cv1.mp3'" class="cv-m1"></audio>
|
|
|
+ <audio :src="resourceAPI + 'audio/role/role' + (index * 5 + subIndex + 1) + '-cv2.mp3'" class="cv-m2" v-if="subItem.name != '实验体'"></audio>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="role-sign birth">
|
|
|
<p class="box">
|
|
|
<span class="left">生日</span>
|
|
|
- <span class="right">{{ roleItem.birth }}</span>
|
|
|
+ <span class="right">{{ subItem.birth }}</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="role-sign height">
|
|
|
<p class="box">
|
|
|
<span class="left">身高</span>
|
|
|
- <span class="right">{{ roleItem.height }}</span>
|
|
|
+ <span class="right">{{ subItem.height }}</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="role-gif">
|
|
|
- <img :src="resourceAPI + roleItem.roleGif" alt="" />
|
|
|
- <i></i>
|
|
|
+ <img :src="resourceAPI + subItem.roleGif" alt="" />
|
|
|
+ <i :class="subItem.roleAttr == 'white' ? 'white' : (subItem.roleAttr == 'black' ? 'black' : 'gold')"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="desc-box content-part">
|
|
|
<div class="sign-name">
|
|
|
- <img :src="resourceAPI + roleItem.signNameImg" alt="" />
|
|
|
+ <img :src="resourceAPI + subItem.signNameImg" alt="" />
|
|
|
</div>
|
|
|
<div class="desc-text" data-role="scrollTeam">
|
|
|
- {{ roleItem.desc }}
|
|
|
+ {{ subItem.desc }}
|
|
|
</div>
|
|
|
<p class="desc-audio-play is-active"></p>
|
|
|
- <audio src="/src/audio/role/role1-desc.mp3" class="role-desc"></audio>
|
|
|
+ <audio :src="resourceAPI + 'audio/role/role' + (index * 5 + subIndex + 1) + '-desc.mp3'" class="role-desc"></audio>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
<img src="/src/img/role-info-bg1.png" alt="" class="role-info-bg is-active" />
|
|
|
<img src="/src/img/role-info-bg2.png" alt="" class="role-info-bg" />
|
|
|
@@ -251,80 +289,90 @@
|
|
|
</div>
|
|
|
<div class="info-mask"></div>
|
|
|
</div>
|
|
|
- <audio src="src/audio/role/role-back.mp3" class="role-back-m"></audio>
|
|
|
- <audio src="src/audio/role/role-uihide.mp3" class="role-uihide-m"></audio>
|
|
|
- <audio src="src/audio/role/role-switch.mp3" class="role-switch-m"></audio>
|
|
|
- <audio src="src/audio/role/role-skill.mp3" class="role-skill-m"></audio>
|
|
|
- <audio src="src/audio/role/role-desc-bgm.mp3" loop class="role-desc-bgm"></audio>
|
|
|
+ <div v-if="isRoleShow">
|
|
|
+ <audio :src="resourceAPI + 'audio/role/role-back.mp3'" class="role-back-m"></audio>
|
|
|
+ <audio :src="resourceAPI + 'audio/role/role-uihide.mp3'" class="role-uihide-m"></audio>
|
|
|
+ <audio :src="resourceAPI + 'audio/role/role-switch.mp3'" class="role-switch-m"></audio>
|
|
|
+ <audio :src="resourceAPI + 'audio/role/role-skill.mp3'" class="role-skill-m"></audio>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 角色 e -->
|
|
|
|
|
|
- <!-- 评测 s -->
|
|
|
- <div class="swiper-slide" v-show="!isMobile">
|
|
|
- <div class="page-evaluation">
|
|
|
- <video src="https://dw-bw6.dwstatic.com/5e72ec9f2707a1793dbf2bd8e304b362/5b9389dc/87/10/1836/8949473-101-1536221301.mp4" class="evaluation-bg" autoplay loop v-if="!isMobile"></video>
|
|
|
- <div class="evaluation-video-wrapper">
|
|
|
- <i class="icon-videoPlay" v-show="!isEvaluationVideoPlaying" @click.stop="isEvaluationVideoPlaying = true"></i>
|
|
|
- <video src="https://dw-bw6.dwstatic.com/04a54eeba2de60c8c50b630dbc35fce1/5b9482c4/52/9/1836/8948979-102-1536129095.mp4" class="evaluation-video" loop ref="evaluation-video" @click.stop="isEvaluationVideoPlaying = false"></video>
|
|
|
- </div>
|
|
|
- <div class="charactor-wrapper" ref="charactor-wrapper">
|
|
|
- <img src="src/img/evaluation-character1.png" class="charactor1" data-depth="0.1">
|
|
|
- <img src="src/img/evaluation-character2.png" class="charactor2" data-depth="0.1">
|
|
|
- </div>
|
|
|
+ <!-- 评测 s -->
|
|
|
+ <div class="swiper-slide" v-show="!isMobile">
|
|
|
+ <div class="page-evaluation">
|
|
|
+ <video :src="isMobile ? '' : 'https://dw-bw6.dwstatic.com/db9a624fe2168243e8766012ff75e726/5b9b1df3/51/8/1837/8952341-101-1536805115.mp4'"
|
|
|
+ class="evaluation-bg" autoplay loop v-if="!isMobile"></video>
|
|
|
+ <div class="evaluation-video-wrapper">
|
|
|
+ <i class="icon-videoPlay" v-show="!isEvaluationVideoPlaying"
|
|
|
+ @click.stop="isEvaluationVideoPlaying = true"></i>
|
|
|
+ <video src="https://dw-bw6.dwstatic.com/91e1e68a8c006ec35806c36e0c9d7aec/5b9b1df3/88/6/1837/8951715-101-1536655514.mp4"
|
|
|
+ class="evaluation-video" loop ref="evaluation-video" v-if="!isMobile"
|
|
|
+ @click.stop="isEvaluationVideoPlaying = false"></video>
|
|
|
+ </div>
|
|
|
+ <div class="charactor-wrapper" ref="charactor-wrapper">
|
|
|
+ <img src="src/img/evaluation-character1.png" class="charactor1" data-depth="0.1">
|
|
|
+ <img src="src/img/evaluation-character2.png" class="charactor2" data-depth="0.1">
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- 评测 e -->
|
|
|
+ </div>
|
|
|
+ <!-- 评测 e -->
|
|
|
|
|
|
- <!--预约-->
|
|
|
- <div class="swiper-slide">
|
|
|
- <div class="page-subscribe">
|
|
|
- <img src="src/img/subscribe-logo.png" class="subscribe-logo">
|
|
|
- <div class="subscribe-button-group">
|
|
|
- <a href="javascript: void 0" class="text-bg" target="_blank">进入官网</a>
|
|
|
- <a href="javascript: void 0" class="text-bg" target="_blank">立即预约</a>
|
|
|
- <a href="javascript: void 0" class="text-bg" @click="commentVisiable = true">发表评论</a>
|
|
|
- </div>
|
|
|
+ <!--预约-->
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <img src="src/img/mobile-subscribe-bg.jpg" class="subscribe-bg" v-if="isMobile">
|
|
|
+ <div class="page-subscribe">
|
|
|
+ <img src="src/img/subscribe-logo.png" class="subscribe-logo">
|
|
|
+ <div class="subscribe-button-group">
|
|
|
+ <a class="text-bg" target="_blank"
|
|
|
+ href="http://www.duowan.com/1801/m_380731143157.html">进入官网</a>
|
|
|
+ <a class="text-bg" target="_blank"
|
|
|
+ href="http://www.duowan.com/1801/m_380731143157.html">立即预约</a>
|
|
|
+ <a href="javascript: void 0" class="text-bg" @click="commentVisiable = true">发表评论</a>
|
|
|
</div>
|
|
|
- <video src="https://dw-bw6.dwstatic.com/57e336bef24da940be360bf3441c4316/5b9389dc/89/5/1836/8949475-101-1536221368.mp4"
|
|
|
- autoplay loop class="subscribe-video" v-if="!isMobile"></video>
|
|
|
</div>
|
|
|
- <!--预约-->
|
|
|
+ <video :src="isMobile ? '' : 'https://dw-bw6.dwstatic.com/362c93817fb7f825721ac71a4d3ca76c/5b99c6e3/44/12/1837/8951909-101-1536717179.mp4'"
|
|
|
+ v-if="!isMobile"
|
|
|
+ v-show="!isMobile"
|
|
|
+ autoplay loop
|
|
|
+ class="subscribe-video" ></video>
|
|
|
</div>
|
|
|
+ <!--预约-->
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
+ <div class="scene-role-bgm">
|
|
|
+ <audio :src="resourceAPI + 'audio/scene-role-bgm1.mp3'" class="bgm-volume"></audio>
|
|
|
+ <audio :src="resourceAPI + 'audio/scene-role-bgm2.mp3'" class="bgm-volume"></audio>
|
|
|
+ <audio :src="resourceAPI + 'audio/scene-role-bgm3.mp3'" class="bgm-volume"></audio>
|
|
|
+ </div>
|
|
|
<div :class="['main-navbar','animated delay-1s', isPrimaryEnter && isMobile ? 'fadeIn' : '']"
|
|
|
v-show="isPrimaryEnter && navbarVisible"
|
|
|
- :style="{height: mobileNavBarShow && isMobile ? '70% !important' : isMobile ? '0 !important' : ''}">
|
|
|
+ :style="{height: mobileNavBarShow && isMobile ? '0% !important' : isMobile ? '0% !important' : ''}">
|
|
|
<p class="icon-horizon" v-if="!isMobile"></p>
|
|
|
<a href="#" class="logo" v-if="!isMobile"></a>
|
|
|
<i class="icon-mobileMenu" v-if="isMobile" @click="mobileNavBarShow = !mobileNavBarShow"></i>
|
|
|
- <div :class="[isMobile ? 'menu-wrapper' : '']"
|
|
|
+ <div :class="[isMobile ? 'menu-wrapper' : 'pc-menu']"
|
|
|
:style="{'pointer-events': mobileNavBarShow ? 'auto' : isMobile ? 'none' : 'auto'}">
|
|
|
<ul :class="['nav-list', mobileNavBarShow ? '' : 'hide']">
|
|
|
<li :class="[{'is-active':mainSwiperIndex == 0}]" class="item1" @click.stop="mainSwiperSlideTo(0,0)">
|
|
|
- <i></i>
|
|
|
- <span>首页</span>
|
|
|
+ <i><span>首页</span></i>
|
|
|
</li>
|
|
|
<li :class="[{'is-active':mainSwiperIndex == 1}]" class="item2" @click.stop="mainSwiperSlideTo(1)">
|
|
|
- <i></i>
|
|
|
- <span>世界观</span>
|
|
|
+ <i><span>世界观</span></i>
|
|
|
</li>
|
|
|
<li :class="[{'is-active':mainSwiperIndex == 2}]" class="item3" @click.stop="mainSwiperSlideTo(2)">
|
|
|
- <i></i>
|
|
|
- <span>场景</span>
|
|
|
+ <i><span>场景</span></i>
|
|
|
</li>
|
|
|
<li :class="[{'is-active':mainSwiperIndex == 3}]" class="item4" @click.stop="mainSwiperSlideTo(3)">
|
|
|
- <i></i>
|
|
|
- <span>角色</span>
|
|
|
+ <i><span>角色</span></i>
|
|
|
</li>
|
|
|
<li :class="[{'is-active':mainSwiperIndex == 4}]" class="item5" @click.stop="mainSwiperSlideTo(4)" v-if="!isMobile">
|
|
|
- <i></i>
|
|
|
- <span>评测</span>
|
|
|
+ <i><span>评测</span></i>
|
|
|
</li>
|
|
|
<li :class="[{'is-active':mainSwiperIndex == 5}]" class="item6" @click.stop="mainSwiperSlideTo(5)">
|
|
|
- <i></i>
|
|
|
- <span>预约</span>
|
|
|
+ <i><span>预约</span></i>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
@@ -341,6 +389,25 @@
|
|
|
<script src="//pub.dwstatic.com/zt2018/qjjx05/js/vue.js"></script>
|
|
|
<script src="lib/mod.js"></script>
|
|
|
<script src="lib/jquery.nicescroll.js"></script>
|
|
|
+<script charset="utf-8">
|
|
|
+ // 百度分享
|
|
|
+ window._bd_share_config = {
|
|
|
+ "common": {
|
|
|
+ "bdSnsKey": {
|
|
|
+ "tsina": "4079905110",
|
|
|
+ "tqq": "42d33144240e4386a43ee39629560564"
|
|
|
+ },
|
|
|
+ "bdText": "",
|
|
|
+ "bdMini": "2",
|
|
|
+ "bdMiniList": false,
|
|
|
+ "bdPic": "",
|
|
|
+ "bdStyle": "0",
|
|
|
+ "bdSize": "16"
|
|
|
+ },
|
|
|
+ "share": {}
|
|
|
+ };
|
|
|
+ with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
|
|
|
+</script>
|
|
|
<script>
|
|
|
var worldList = require('modules/data/world.js')
|
|
|
var sceneList = require('modules/data/scene.js')
|
