Merge branch '2018zt' of http://svn.ouj.com:3000/FED/dwweb-pc into 2018zt

2018专区/堡垒之夜/src/_index.html

@@ -158,7 +158,7 @@
                             <div class="g-ui-slide ext-dotted" data-role="slide-streamer">
                                 <ul class="g-ui-slide__content" data-switchable-role="content">
                                     <li class="g-ui-slide__panel">
-                                        <div class="streamer">
+                                        <a class="streamer">
                                             <img src="http://fed.webdev.ouj.com/65x65" class="streamer-avatar">
                                             <span class="streamer-name">dasj2 2ad.</span>
                                             <div class="streamer-desc">
@@ -166,8 +166,8 @@
                                                 <p class="desc-text">古书上指金星。旧时指交际场中有名的女子；现指在某个领域内有一定影响力的人物。泛指有名的演员、歌手、艺人、运动员等。</p>
                                                 <p class="good-at">擅长游戏: <span>绝地求生</span><span>英雄联盟</span></p>
                                             </div>
-                                        </div>
-                                        <div class="streamer">
+                                        </a>
+                                        <a class="streamer">
                                             <img src="http://fed.webdev.ouj.com/65x65" class="streamer-avatar">
                                             <span class="streamer-name">高德伟</span>
                                             <div class="streamer-desc">
@@ -175,8 +175,8 @@
                                                 <p class="desc-text">古书上指金星。旧时指交际场中有名的女子；现指在某个领域内有一定影响力的人物。泛指有名的演员、歌手、艺人、运动员等。</p>
                                                 <p class="good-at">擅长游戏: <span>绝地求生</span><span>英雄联盟</span></p>
                                             </div>
-                                        </div>
-                                        <div class="streamer" href='#'>
+                                        </a>
+                                        <a class="streamer" href='#'>
                                             <img src="http://fed.webdev.ouj.com/65x65" class="streamer-avatar">
                                             <span class="streamer-name">高德伟</span>
                                             <div class="streamer-desc">
@@ -184,7 +184,7 @@
                                                 <p class="desc-text">古书上指金星。旧时指交际场中有名的女子；现指在某个领域内有一定影响力的人物。泛指有名的演员、歌手、艺人、运动员等。</p>
                                                 <p class="good-at">擅长游戏: <span>绝地求生</span><span>英雄联盟</span></p>
                                             </div>
-                                        </div>
+                                        </a>
                                         <div class="streamer">
                                             <img src="http://fed.webdev.ouj.com/65x65" class="streamer-avatar">
                                             <span class="streamer-name">高德伟</span>
@@ -279,7 +279,7 @@
                             </div>
                         </div>
                         <div id="day-store">
-                            <p><span class="text-bg store-bg">每日商城</span><span>售卖历史 <i class="icon icon-more"></i></span>
+                            <p><span class="text-bg store-bg">每日商城</span><a href="#">售卖历史 <i class="icon icon-more"></i></a>
                             </p>
                             <p id="refresh-time"><span></span> <span></span></p>
                         </div>
@@ -479,7 +479,7 @@
                                     <li>
                                         <label class="label-video">视频</label>
                                         <span class="date">05-04</span>
-                                        <p><a target="_blank" href="#" title="" class="list-news-title">CSGO 职业大神的比赛匕首击杀时刻TOP10
+                                        <p><a target="_blank" href="#" title="" class="list-news-title">CSGO 1职业大神的比赛匕首击杀时刻TOP10
                                             </a></p>
                                         <a class="detail-wrapper">
                                             <img src="http://fed.webdev.ouj.com/165x92" alt="">
@@ -490,10 +490,10 @@
                                     <li>
                                         <label class="label-bbs">论坛</label>
                                         <span class="date">05-04</span>
-                                        <p><a target="_blank" href="#" title="" class="list-news-title">CSGO 职业大神的比赛匕首击杀时刻TOP10
+                                        <p><a target="_blank" href="#" title="" class="list-news-title">CSGO 2职业大神的比赛匕首击杀时刻TOP10
                                             </a></p>
                                         <div class="detail-wrapper">
-                                            <img src="http://fed.webdev.ouj.com/165x92" alt="">
+                                            <img data-original="http://img3.dwstatic.com/fortnite/1809/400503984722/1536549644871.jpg">
                                             <p>堡垒之夜在昨天公布了自己的安卓版本，并立即发布SD卡供玩家购买。</p>
                                             <a>阅读详情 <i class="icon-right-arrow"></i></a>
                                         </div>
@@ -1336,7 +1336,7 @@
                                     <li class="g-col-gItem">
                                         <a href="http://video.duowan.com/play/3533484.html" target="_blank">
                                             <div class="gItem-pic">
-                                                <img src="http://pub.dwstatic.com/common/img/blank.png" data-original="http://vimg.dwstatic.com/1703/3533484/9-220x124.jpg"
+                                                <img  data-original="http://vimg.dwstatic.com/1703/3533484/9-220x124.jpg"
                                                     alt="守望先锋午时已到第23期：这期又是大锤">
                                                 <div class="gItem-mask"></div>
                                                 <span class="gItem-vdIcon"></span>
@@ -1348,7 +1348,7 @@
                                     <li class="g-col-gItem">
                                         <a href="http://video.duowan.com/play/3533484.html" target="_blank">
                                             <div class="gItem-pic">
-                                                <img src="http://pub.dwstatic.com/common/img/blank.png" data-original="http://vimg.dwstatic.com/1703/3533484/9-220x124.jpg"
+                                                <img  data-original="http://vimg.dwstatic.com/1836/8950409/9-220x124.jpg"
                                                     alt="守望先锋午时已到第23期：这期又是大锤">
                                                 <div class="gItem-mask"></div>
 
@@ -1361,7 +1361,7 @@
                                     <li class="g-col-gItem">
                                         <a href="http://video.duowan.com/play/3533484.html" target="_blank">
                                             <div class="gItem-pic">
-                                                <img src="http://pub.dwstatic.com/common/img/blank.png" data-original="http://vimg.dwstatic.com/1703/3533484/9-220x124.jpg"
+                                                <img  data-original="http://vimg.dwstatic.com/1836/8950402/9-220x124.jpg"
                                                     alt="守望先锋午时已到第23期：这期又是大锤">
                                                 <div class="gItem-mask"></div>
 
@@ -1374,7 +1374,7 @@
                                     <li class="g-col-gItem">
                                         <a href="http://video.duowan.com/play/3533484.html" target="_blank">
                                             <div class="gItem-pic">
-                                                <img src="http://pub.dwstatic.com/common/img/blank.png" data-original="http://vimg.dwstatic.com/1703/3533484/9-220x124.jpg"
+                                                <img  data-original="http://vimg.dwstatic.com/1836/8950401/9-220x124.jpg"
                                                     alt="守望先锋午时已到第23期：这期又是大锤">
                                                 <div class="gItem-mask"></div>
 
@@ -1387,7 +1387,7 @@
                                     <li class="g-col-gItem">
                                         <a href="http://video.duowan.com/play/3533484.html" target="_blank">
                                             <div class="gItem-pic">
-                                                <img src="http://pub.dwstatic.com/common/img/blank.png" data-original="http://vimg.dwstatic.com/1703/3533484/9-220x124.jpg"
+                                                <img  data-original="http://vimg.dwstatic.com/1703/3533484/9-220x124.jpg"
                                                     alt="守望先锋午时已到第23期：这期又是大锤">
                                                 <div class="gItem-mask"></div>
 
@@ -1404,7 +1404,7 @@
                                     <li class="g-col-gItem">
                                         <a href="http://video.duowan.com/play/3533484.html" target="_blank">
                                             <div class="gItem-pic">
-                                                <img src="http://pub.dwstatic.com/common/img/blank.png" data-src="http://vimg.dwstatic.com/1703/3533484/9-220x124.jpg" alt="守望先锋午时已到第23期：这期又是大锤">
+                                                <img  data-src="http://vimg.dwstatic.com/1836/8950404/9-220x124.jpg" alt="守望先锋午时已到第23期：这期又是大锤">
                                                 <div class="gItem-mask"></div>
 
                                                 <span class="gItem-vdIcon"></span>
@@ -1420,7 +1420,7 @@
                                     <li class="g-col-gItem">
                                         <a href="http://video.duowan.com/play/3533484.html" target="_blank">
                                             <div class="gItem-pic">
-                                                <img src="http://pub.dwstatic.com/common/img/blank.png" data-src="http://vimg.dwstatic.com/1703/3533484/9-220x124.jpg" alt="守望先锋午时已到第23期：这期又是大锤">
+                                                <img  data-src="http://vimg.dwstatic.com/1836/89504111/9-220x124.jpg" alt="守望先锋午时已到第23期：这期又是大锤">
                                                 <div class="gItem-mask"></div>
 
                                                 <span class="gItem-vdIcon"></span>
@@ -1436,7 +1436,7 @@
                                     <li class="g-col-gItem">
                                         <a href="http://video.duowan.com/play/3533484.html" target="_blank">
                                             <div class="gItem-pic">
-                                                <img src="http://pub.dwstatic.com/common/img/blank.png" data-src="http://vimg.dwstatic.com/1703/3533484/9-220x124.jpg" alt="守望先锋午时已到第23期：这期又是大锤">
+                                                <img  data-src="http://vimg.dwstatic.com/1703/3533484/9-220x124.jpg" alt="守望先锋午时已到第23期：这期又是大锤">
                                                 <div class="gItem-mask"></div>
 
                                                 <span class="gItem-vdIcon"></span>
@@ -1653,11 +1653,11 @@
                         </div>
                         <div class="strategy-img-wrapper">
                             <a class="strategy-img-item">
-                                <img src="http://fed.webdev.ouj.com/174x96" alt="">
+                                <img  data-original="http://img4.dwstatic.com/fortnite/1809/400013478197/1536058611566.jpg">
                                 <p>这是一段很长的标题这是一段很长的标题这是一段很长的标题</p>
                             </a>
                             <a class="strategy-img-item">
-                                <img src="http://fed.webdev.ouj.com/174x96" alt="">
+                                <img data-original="http://img1.dwstatic.com/fortnite/1809/400005490372/1536050662508.jpg">
                                 <p>这是一段很长的标题这是一段很长的标题这是一段很长的标题</p>
                             </a>
                         </div>
@@ -1838,12 +1838,12 @@
                             <ul class="g-ui-slide__content" data-switchable-role="content">
                                 <li class="g-ui-slide__panel hero-medal">
                                     <div class="medal-item">
-                                        <img src="img\slider1.png" alt="">
+                                        <img data-original='http://img.dwstatic.com/fortnite/1809/400444740322/1536490908873.png'>
                                     </div>
                                 </li>
                                 <li class="g-ui-slide__panel u-hide">
                                     <div class="medal-item">
-                                        <img src="img\slider2.png" alt="">
+                                        <img  data-original="http://img.dwstatic.com/fortnite/1809/400444740322/1536489551786.png">
                                     </div>
                                 </li>
                                 <li class="g-ui-slide__panel u-hide">
@@ -1866,6 +1866,41 @@
                                         <img src="img\slider6.png" alt="">
                                     </div>
                                 </li>
+                                <li class="g-ui-slide__panel u-hide">
+                                    <div class="medal-item">
+                                        <img src="img\slider7.png" alt="">
+                                    </div>
+                                </li>
+                                <li class="g-ui-slide__panel u-hide">
+                                    <div class="medal-item">
+                                        <img src="img\slider8.png" alt="">
+                                    </div>
+                                </li>
+                                <li class="g-ui-slide__panel u-hide">
+                                    <div class="medal-item">
+                                        <img src="img\slider9.png" alt="">
+                                    </div>
+                                </li>
+                                <li class="g-ui-slide__panel u-hide">
+                                    <div class="medal-item">
+                                        <img src="img\slider10.png" alt="">
+                                    </div>
+                                </li>
+                                <li class="g-ui-slide__panel u-hide">
+                                    <div class="medal-item">
+                                        <img src="img\slider11.png" alt="">
+                                    </div>
+                                </li>
+                                <li class="g-ui-slide__panel u-hide">
+                                    <div class="medal-item">
+                                        <img src="img\slider12.png" alt="">
+                                    </div>
+                                </li>
+                                <li class="g-ui-slide__panel u-hide">
+                                    <div class="medal-item">
+                                        <img src="img\slider13.png" alt="">
+                                    </div>
+                                </li>
                             </ul>
                             <!--轮播左右箭头-->
                             <ul class="g-ui-slide__nav slider-arrow-wrapper" data-switchable-role="nav">
@@ -1881,6 +1916,13 @@
                                     <li class="g-ui-slide__trigger" data-switchable-role="trigger"><i class="circle"></i></li>
                                     <li class="g-ui-slide__trigger" data-switchable-role="trigger"><i class="circle"></i></li>
                                     <li class="g-ui-slide__trigger" data-switchable-role="trigger"><i class="circle"></i></li>
+                                    <li class="g-ui-slide__trigger" data-switchable-role="trigger"><i class="circle"></i></li>
+                                    <li class="g-ui-slide__trigger" data-switchable-role="trigger"><i class="circle"></i></li>
+                                    <li class="g-ui-slide__trigger" data-switchable-role="trigger"><i class="circle"></i></li>
+                                    <li class="g-ui-slide__trigger" data-switchable-role="trigger"><i class="circle"></i></li>
+                                    <li class="g-ui-slide__trigger" data-switchable-role="trigger"><i class="circle"></i></li>
+                                    <li class="g-ui-slide__trigger" data-switchable-role="trigger"><i class="circle"></i></li>
+                                    <li class="g-ui-slide__trigger" data-switchable-role="trigger"><i class="circle"></i></li>
                                 </div>
                             </ul>
                         </div>

2018专区/堡垒之夜/src/modules/index.js

@@ -70,6 +70,22 @@ var V = {
             skip_invisible: false
         })
 
+        $(".dw-mod-strategy img").lazyload({
+            failurelimit: 5,
+            skip_invisible: false
+        })
+
+        $(".dw-mod-news img").lazyload({
+            failurelimit: 5,
+            skip_invisible: false
+        })
+
+        $('.dw-mod-medal img').lazyload({
+            failurelimit: 5,
+            skip_invisible: false,
+            placeholder: 'http://pub.dwstatic.com/common/img/blank.png'
+        })
+
     },
     checkNarrow: function () {
         if ($(window).width() < 1420) {
@@ -118,7 +134,7 @@ var V = {
                 activeIndex: 0,
                 hasTriggers: true,
                 step: 1,
-                effect: 'scrollx',
+                effect: 'scrollx'
             }).render()
         })
         $('.hero-medal').find('.g-ui-slide__panel').each(function (index, item) {
@@ -200,7 +216,7 @@ var V = {
                         activeIndex: 0,
                         hasTriggers: false,
                         step: 1,
-                        effect: 'scrollx'
+                        effect: 'scrollx',
                     }).render()
                 })
             }
@@ -224,6 +240,7 @@ var C = {
             $tagCont.show().siblings().hide();
 
             if (_index != 0) {
+                console.log($tagCont.get(0))
                 $tagCont.find("img").each(function (i, e) {
                     $(e).attr("src", $(e).attr("data-src"));
                 });
@@ -256,6 +273,8 @@ var C = {
                         $(this).hasClass('is-active') && $(this).removeClass('is-active')
                     })
                     $(this).parents('li').addClass('is-active')
+                    var $img = $(_li).find('img')
+                    $img.attr('src', $img.attr('data-original'))
                 })
             })
         })

2018专区/堡垒之夜/src/sass/global.scss

@@ -1108,7 +1108,7 @@ body {
 		.g-ui-slide__nav.dots {
 			display: block;
 			position: absolute;
-			width: 300px;
+			width: 500px;
 			left: 50%;
 			transform: translateX(-50%);
 			top: 636px;
@@ -1803,7 +1803,6 @@ body {
 	background-repeat: no-repeat;
 	background-position: center top;
 	padding-top: 280px;
-	background-size: contain;
 }
 
 .page-video {
@@ -2449,7 +2448,7 @@ body {
 				width: 100%;
 				height: 24px;
 				line-height: 24px;
-				background-color: rgba(33, 33, 33, .3);
+				background-color: rgba(33, 33, 33, .5);
 				box-sizing: border-box;
 				color: #fff;
 				font-size: 12px;
@@ -2800,12 +2799,14 @@ $img-height: 300px; // 图片高度
 		&:first-child {
 			border-bottom: 1px solid #f1f1f1;
 			margin-bottom: 10px;
-			span {
+			a {
 				&:last-child {
 					float: right;
 					color: #999;
 					font-size: 13px;
 					margin-top: 20px;
+					position: relative;
+					z-index: 10;
 				}
 			}
 		}
@@ -2841,12 +2842,14 @@ $img-height: 300px; // 图片高度
 		a {
 			display: inline-block;
 			width: 285px;
+			height: 25px;
 			font-size: 14px;
 			position: relative;
 			top: 8px;
 			color: #333;
 			line-height: 25px;
 			@include ellipsis();
+			white-space: normal;
 			&:hover {
 				color: $maincolor;
 			}
@@ -3138,6 +3141,7 @@ $img-height: 300px; // 图片高度
 		float: left;
 		height: 92px;
 		position: relative;
+		cursor: pointer;
 		&:hover{
 			h6{
 				color: #000;

2018专题/1808万象物语专题-商务/fis-conf.js

@@ -1,5 +1,5 @@
 var version = '';
-var path = '/zt2018/qjjx05/';
+var path = '/zt2018/wxwy1809/';
 
 fis.set('project.files', ['*.html', 'map.json']);
 fis.set('project.exclude', ['tpl/**.tmpl', '_dest/**']);

2018专题/1808万象物语专题-商务/package.json

@@ -5,6 +5,6 @@
   "main": "index.js",
   "scripts": {
     "debug": "fis3 server restart && fis3 release dev -w ",
-    "build": "fis3 release prod -d ../../../pub/zt2018/qjjx05/"
+    "build": "fis3 release prod -d ../../../pub/zt2018/wxwy1809/"
   }
 }

2018专题/1808万象物语专题-商务/src/_index.html

@@ -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')