Home Explore Help
Register Sign In
FED
/
dwweb-pc
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

笑傲江湖3专题

PC-20180523CIYM\Administrator 5 years ago
parent
4b4f8632ae
commit
c2c059e7e5
29 changed files with 1385 additions and 417 deletions
Split View Show Diff Stats
  1. 19 14
      2019专题/1911笑傲江湖3专题/src/_index.html
  2. 294 21
      2019专题/1911笑傲江湖3专题/src/_wap.html
  3. BIN
      2019专题/1911笑傲江湖3专题/src/img/mp/adorn-cloud-many.png
  4. BIN
      2019专题/1911笑傲江湖3专题/src/img/mp/adorn-hill-hight-left.jpg
  5. BIN
      2019专题/1911笑傲江湖3专题/src/img/mp/adorn-hill-left.jpg
  6. BIN
      2019专题/1911笑傲江湖3专题/src/img/mp/adorn-sects2.png
  7. BIN
      2019专题/1911笑傲江湖3专题/src/img/mp/adorn-tree-small.png
  8. BIN
      2019专题/1911笑傲江湖3专题/src/img/mp/bg-primary.jpg
  9. BIN
      2019专题/1911笑傲江湖3专题/src/img/mp/bg-special.jpg
  10. BIN
      2019专题/1911笑傲江湖3专题/src/img/mp/btn-follow.png
  11. BIN
      2019专题/1911笑傲江湖3专题/src/img/mp/btn-order.png
  12. BIN
      2019专题/1911笑傲江湖3专题/src/img/mp/img-special1.jpg
  13. BIN
      2019专题/1911笑傲江湖3专题/src/img/mp/img-special2.jpg
  14. BIN
      2019专题/1911笑傲江湖3专题/src/img/mp/img-special3.jpg
  15. BIN
      2019专题/1911笑傲江湖3专题/src/img/mp/img-special4.jpg
  16. BIN
      2019专题/1911笑傲江湖3专题/src/img/mp/img-special5.jpg
  17. 0 0
      2019专题/1911笑傲江湖3专题/src/img/pc/btn-follow.png
  18. 0 0
      2019专题/1911笑傲江湖3专题/src/img/pc/btn-order.png
  19. 0 0
      2019专题/1911笑傲江湖3专题/src/img/type-sects1.png
  20. 0 0
      2019专题/1911笑傲江湖3专题/src/img/type-sects2.png
  21. 0 0
      2019专题/1911笑傲江湖3专题/src/img/type-sects3.png
  22. 0 0
      2019专题/1911笑傲江湖3专题/src/img/type-sects4.png
  23. 0 0
      2019专题/1911笑傲江湖3专题/src/img/type-sects5.png
  24. 289 0
      2019专题/1911笑傲江湖3专题/src/modules/page/global.js
  25. 0 268
      2019专题/1911笑傲江湖3专题/src/modules/page/index.js
  26. 47 0
      2019专题/1911笑傲江湖3专题/src/modules/page/wap.js
  27. 45 19
      2019专题/1911笑傲江湖3专题/src/sass/global.scss
  28. 680 95
      2019专题/1911笑傲江湖3专题/src/sass/wap.scss
  29. 11 0
      2019专题/1911笑傲江湖3专题/src/tpl/previewSwiper.tmpl

+ 19 - 14
2019专题/1911笑傲江湖3专题/src/_index.html
View File 

@@ -2,6 +2,7 @@
 
 <html>
 
 <head>
 
     <meta charset="utf-8">
 
+    <meta name="viewport" content="width=750,user-scalable=no">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="renderer" content="webkit">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
@@ -12,12 +13,12 @@
 
     <script src="//www.duowan.com/assets/js/jquery.js"></script><!--ignore-->
 
     <script src="//pub.dwstatic.com/common/js/dwudbproxy.js "></script><!--ignore-->
 
 </head>
 
-<body>
 
+<body data-gameid="9">
 
     <!-- 模板-导航头部 -->
 
     <script id="without-navplus" src="//pub.dwstatic.com/common/dwNavbar/navbar.js?type=ka"></script><!--ignore-->
 
     <div class="o-wrap page-index">
 
         <div class="mod-part mod-primary popup-container">
 
-            <i class="btn-popup"></i>
 
+            <i class="btn-popup-video"></i>
 
             <div class="tools-wrap">
 
                 <div class="btns">
 
                     <a href="javascript:;" target="_self" class="btn fl btn-order"></a>
 
@@ -26,13 +27,17 @@
 
                 <p class="order-text">已有<em id="orderCount"></em>位少侠 成功预约游戏</p>
 
                 <p class="sub-text">快来一起随我们快意江湖吧！</p>
 
             </div>
 
-            <div class="popup-wrap">
 
+            <div class="popup-wrap popup-video">
 
                 <span class="mask"></span>
 
                 <i class="close-popup">&times;</i>
 
                 <div class="innerbox">
 
                     <video src="https://media.wmupd.com/media/media/xxa_20190917gwvideo.mp4" preload controls />
 
                 </div>
 
             </div>
 
+            <div class="popup-wrap popup-order">
 
+                <i class="close-popup">&times;</i>
 
+                <div class="innerbox"><iframe src="http://xxa.wanmei.com/hd/1911/duowan/index.html" frameborder="0"></iframe></div>
 
+            </div>
 
         </div>
 
         <div class="mod-part mod-sects">
 
             <div class="mod-title title1">
 
@@ -46,11 +51,11 @@
 
                         <li class="swiper-slide item1" style="background-image: url(/src/img/pc/bg-sects1.jpg);">
 
                             <img src="/src/img/pc/role-sects1.png" alt="" class="role" />
 
                             <div class="type">
 
-                                <div class="tab tab-bg1" data-tabchange="sects1type">
 
+                                <div class="tab tab-bg1" data-tabchange="sss">
 
                                     <span class="item1"></span>
 
                                     <span class="item2"></span>
 
                                 </div>
 
-                                <div class="context" data-context="sects1type">
 
+                                <div class="context" data-context="sss">
 
                                     <img src="/src/img/pc/img-role1-type1.png" alt="" />
 
                                     <img src="/src/img/pc/img-role1-type2.png" alt="" />
 
                                 </div>
 
@@ -59,11 +64,11 @@
 
                         <li class="swiper-slide item2" style="background-image: url(/src/img/pc/bg-sects2.jpg);">
 
                             <img src="/src/img/pc/role-sects2.png" alt="" class="role" />
 
                             <div class="type">
 
-                                <div class="tab tab-bg1" data-tabchange="sects2type">
 
+                                <div class="tab tab-bg1">
 
                                     <span class="item1"></span>
 
                                     <span class="item2"></span>
 
                                 </div>
 
-                                <div class="context" data-context="sects2type">
 
+                                <div class="context">
 
                                     <img src="/src/img/pc/img-role2-type1.png" alt="" />
 
                                     <img src="/src/img/pc/img-role2-type2.png" alt="" />
 
                                 </div>
 
@@ -72,11 +77,11 @@
 
                         <li class="swiper-slide item3" style="background-image: url(/src/img/pc/bg-sects3.jpg);">
 
                             <img src="/src/img/pc/lotus.png" alt="" class="lotus" />
 
                             <div class="type">
 
-                                <div class="tab tab-bg1" data-tabchange="sects3type">
 
+                                <div class="tab tab-bg1">
 
                                     <span class="item1"></span>
 
                                     <span class="item2"></span>
 
                                 </div>
 
-                                <div class="context" data-context="sects3type">
 
+                                <div class="context">
 
                                     <img src="/src/img/pc/img-role3-type1.png" alt="" />
 
                                     <img src="/src/img/pc/img-role3-type2.png" alt="" />
 
                                 </div>
 
@@ -85,11 +90,11 @@
 
                         <li class="swiper-slide item4" style="background-image: url(/src/img/pc/bg-sects4.jpg);">
 
                             <img src="/src/img/pc/role-sects4.png" alt="" class="role" />
 
                             <div class="type">
 
-                                <div class="tab tab-bg1" data-tabchange="sects4type">
 
+                                <div class="tab tab-bg1">
 
                                     <span class="item1"></span>
 
                                     <span class="item2"></span>
 
                                 </div>
 
-                                <div class="context" data-context="sects4type">
 
+                                <div class="context">
 
                                     <img src="/src/img/pc/img-role4-type1.png" alt="" />
 
                                     <img src="/src/img/pc/img-role4-type2.png" alt="" />
 
                                 </div>
 
@@ -98,11 +103,11 @@
 
                         <li class="swiper-slide item5" style="background-image: url(/src/img/pc/bg-sects5.jpg);">
 
                             <img src="/src/img/pc/role-sects5.png" alt="" class="role" />
 
                             <div class="type">
 
-                                <div class="tab tab-bg1" data-tabchange="sects5type">
 
+                                <div class="tab tab-bg1">
 
                                     <span class="item1"></span>
 
                                     <span class="item2"></span>
 
                                 </div>
 
-                                <div class="context" data-context="sects5type">
 
+                                <div class="context">
 
                                     <img src="/src/img/pc/img-role5-type1.png" alt="" />
 
                                     <img src="/src/img/pc/img-role5-type2.png" alt="" />
 
                                 </div>
 
@@ -324,7 +329,7 @@
 
     <script src="http://pub.dwstatic.com/zt2017/xajh//lib/clipboard_86b88c9.js"></script><!--ignore-->
 
     <script id="dw-footer-without-gem" charset="utf-8" src="//pub.dwstatic.com/common/dwFoot/duowanFooter.js"></script><!--ignore-->
 
     <script>
 
-        require('modules/page/index.js');
 
+        require('modules/page/global.js');
 
         var danmuColor = [
 
             '#bd3ec2',
 
             '#c23e73',

+ 294 - 21
2019专题/1911笑傲江湖3专题/src/_wap.html
View File 

@@ -3,7 +3,7 @@
 
 
 <head>
 
     <meta charset="UTF-8">
 
-    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
 
+    <meta name="viewport" content="width=750,user-scalable=no">
 
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <meta name="format-detection" content="telephone=no" />
 
     <meta name="mobile-web-app-capable" content="yes">
 
@@ -16,10 +16,9 @@
 
     <script>!function(d,a){var e=d.documentElement,c="orientationchange"in window?"orientationchange":"resize",v=function(){var f=e.clientWidth;f&&(e.style.fontSize=20*(f/320)+"px")};d.addEventListener&&(a.addEventListener(c,v,!1),d.addEventListener("DOMContentLoaded",v,!1))}(document,window);</script>
 
 </head>
 
 
-<body>
 
+<body data-gameid="9">
 
     <div class="o-wrap page-wap">
 
         <div class="mod-part mod-primary popup-container">
 
-            <i class="btn-popup"></i>
 
             <div class="tools-wrap">
 
                 <div class="btns">
 
                     <a href="javascript:;" target="_self" class="btn fl btn-order"></a>
 
@@ -28,19 +27,14 @@
 
                 <p class="order-text">已有<em id="orderCount"></em>位少侠 成功预约游戏</p>
 
                 <p class="sub-text">快来一起随我们快意江湖吧！</p>
 
             </div>
 
-            <div class="popup-wrap">
 
-                <span class="mask"></span>
 
+            <div class="popup-wrap popup-order">
 
                 <i class="close-popup">&times;</i>
 
-                <div class="innerbox">
 
-                    <video src="https://media.wmupd.com/media/media/xxa_20190917gwvideo.mp4" preload controls />
 
-                </div>
 
+                <div class="innerbox"><iframe src="http://xxa.wanmei.com/hd/1911/duowan/index.html" frameborder="0"></iframe></div>
 
             </div>
 
         </div>
 
         <div class="mod-part mod-sects">
 
             <div class="mod-title title1">
 
                 <p class="text"></p>
 
-                <span class="left"></span>
 
-                <span class="right"></span>
 
             </div>
 
             <div class="mod-inner">
 
                 <div class="sects-swiper">
 
@@ -48,11 +42,11 @@
 
                         <li class="swiper-slide item1">
 
                             <img src="/src/img/mp/bg-sects1.jpg" alt="" class="thumb" />
 
                             <div class="type">
 
-                                <div class="tab tab-bg1" data-tabchange="sects1type">
 
+                                <div class="tab tab-bg1">
 
                                     <span class="item1"></span>
 
                                     <span class="item2"></span>
 
                                 </div>
 
-                                <div class="context" data-context="sects1type">
 
+                                <div class="context">
 
                                     <img src="/src/img/mp/img-role1-type1.png" alt="" />
 
                                     <img src="/src/img/mp/img-role1-type2.png" alt="" />
 
                                 </div>
 
@@ -60,12 +54,13 @@
 
                         </li>
 
                         <li class="swiper-slide item2">
 
                             <img src="/src/img/mp/bg-sects2.jpg" alt="" class="thumb" />
 
+                            <span class="adorn"></span>
 
                             <div class="type">
 
-                                <div class="tab tab-bg1" data-tabchange="sects1type">
 
+                                <div class="tab tab-bg1">
 
                                     <span class="item1"></span>
 
                                     <span class="item2"></span>
 
                                 </div>
 
-                                <div class="context" data-context="sects1type">
 
+                                <div class="context">
 
                                     <img src="/src/img/mp/img-role2-type1.png" alt="" />
 
                                     <img src="/src/img/mp/img-role2-type2.png" alt="" />
 
                                 </div>
 
@@ -74,11 +69,11 @@
 
                         <li class="swiper-slide item3">
 
                             <img src="/src/img/mp/bg-sects3.jpg" alt="" class="thumb" />
 
                             <div class="type">
 
-                                <div class="tab tab-bg1" data-tabchange="sects1type">
 
+                                <div class="tab tab-bg1">
 
                                     <span class="item1"></span>
 
                                     <span class="item2"></span>
 
                                 </div>
 
-                                <div class="context" data-context="sects1type">
 
+                                <div class="context">
 
                                     <img src="/src/img/mp/img-role3-type1.png" alt="" />
 
                                     <img src="/src/img/mp/img-role3-type2.png" alt="" />
 
                                 </div>
 
@@ -87,11 +82,11 @@
 
                         <li class="swiper-slide item4">
 
                             <img src="/src/img/mp/bg-sects4.jpg" alt="" class="thumb" />
 
                             <div class="type">
 
-                                <div class="tab tab-bg1" data-tabchange="sects1type">
 
+                                <div class="tab tab-bg1">
 
                                     <span class="item1"></span>
 
                                     <span class="item2"></span>
 
                                 </div>
 
-                                <div class="context" data-context="sects1type">
 
+                                <div class="context">
 
                                     <img src="/src/img/mp/img-role4-type1.png" alt="" />
 
                                     <img src="/src/img/mp/img-role4-type2.png" alt="" />
 
                                 </div>
 
@@ -99,12 +94,13 @@
 
                         </li>
 
                         <li class="swiper-slide item5">
 
                             <img src="/src/img/mp/bg-sects5.jpg" alt="" class="thumb" />
 
+                            <span class="adorn"></span>
 
                             <div class="type">
 
-                                <div class="tab tab-bg1" data-tabchange="sects1type">
 
+                                <div class="tab tab-bg1">
 
                                     <span class="item1"></span>
 
                                     <span class="item2"></span>
 
                                 </div>
 
-                                <div class="context" data-context="sects1type">
 
+                                <div class="context">
 
                                     <img src="/src/img/mp/img-role5-type1.png" alt="" />
 
                                     <img src="/src/img/mp/img-role5-type2.png" alt="" />
 
                                 </div>
 
@@ -114,6 +110,195 @@
 
                     <p class="sects-switch btn-prev"></p>
 
                     <p class="sects-switch btn-next"></p>
 
                     <p class="sects-pagination"></p>
 
+                    <div class="sects-danmu"></div>
 
+                </div>
 
+                <div class="sects-send">
 
+                    <div class="input-line">
 
+                        <div class="input-item">
 
+                            <span>少侠身出何门</span>
 
+                            <select id="danmu_sect">
 
+                                <option value="少林">少林</option>
 
+                                <option value="峨眉">峨眉</option>
 
+                                <option value="武当">武当</option>
 
+                            </select>
 
+                        </div>
 
+                        <div class="input-item flex-auto">
 
+                            <span>少侠高姓大名</span>
 
+                            <input type="text" placeholder="请输入名字" id="danmu_name" class="flex-auto" />
 
+                        </div>
 
+                    </div>
 
+                    <div class="input-line">
 
+                        <div class="input-item flex-auto">
 
+                            <span>少侠想大声喊出</span>
 
+                            <input type="text" placeholder="请输入内容" id="danmu_text" class="flex-auto" />
 
+                        </div>
 
+                        <p class="btn-danmu">发送</p>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <div class="mod-part mod-special">
 
+            <div class="mod-title title2">
 
+                <p class="text"></p>
 
+            </div>
 
+            <div class="mod-inner">
 
+                <div class="swiper-wrap">
 
+                    <div class="special-swiper">
 
+                        <ul class="swiper-wrapper">
 
+                            <li class="swiper-slide" data-text="自定心法">
 
+                                <img src="/src/img/mp/img-special1.jpg" alt="" />
 
+                            </li>
 
+                            <li class="swiper-slide" data-text="清韵国风">
 
+                                <img src="/src/img/mp/img-special2.jpg" alt="" />
 
+                            </li>
 
+                            <li class="swiper-slide" data-text="重现经典">
 
+                                <img src="/src/img/mp/img-special3.jpg" alt="" />
 
+                            </li>
 
+                            <li class="swiper-slide" data-text="外观染色">
 
+                                <img src="/src/img/mp/img-special4.jpg" alt="" />
 
+                            </li>
 
+                            <li class="swiper-slide" data-text="琴箫和鸣">
 
+                                <img src="/src/img/mp/img-special5.jpg" alt="" />
 
+                            </li>
 
+                        </ul>
 
+                    </div>
 
+                    <p class="special-pagination"></p>
 
+                </div>
 
+                <div class="infos-wrap">
 
+                    <dl>
 
+                        <dt><img src="/src/img/img-special-info.jpg" alt="" /></dt>
 
+                        <dd>
 
+                            <h2 class="title">多玩评测《新笑傲江湖》</h2>
 
+                            <p class="text">今日，完美世界游戏正式宣布：清韵国风武侠手游《新笑傲江湖》将于11月7日开启沧海测试，本次为安卓计费删档测试，iOS的玩家们别着急，我们正在加快iOS版本的制作进度，望玩家们多多包容。游戏对本次测试的整体体验进行了更为全面的结构性优化与升级，将开放虚生绝境、身份制药、侠客互动等全新玩法，届时玩家们通过官网（xxa.wanmei.com）下载即可进入体验，享受全新玩法带来的战斗乐趣。</p>
 
+                            <p class="text">“虚生绝境”采用了更为公平的地图机制，每次进入时玩家的出生点与地图中散落的资源种类数量全部随机，需要玩家时刻保持高度专注的作战状态来收集地图上散落的装备、药品、绝学、技能、空投等资源，不断武装自己提升实力，并在探索与跑图过程中通过位移、躲闪以及不同技能的组合实现更灵活的对抗，打退敌出其不意的进攻。同时战场上所拥有的不同形貌的树木以及可隐身的灌木丛等植被，也将为玩家们的胜利起到决定性效果。</p>
 
+                        </dd>
 
+                    </dl>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <div class="mod-part mod-video">
 
+            <div class="mod-title title3">
 
+                <p class="text"></p>
 
+            </div>
 
+            <div class="mod-inner">
 
+                <div class="context-wrap">
 
+                    <ul data-context="modvideo">
 
+                        <li>
 
+                            <div class="cover" style="background-image: url(/src/img/pc/video-cover.jpg);"><i class="btn-play" data-msg=""></i></div>
 
+                            <div class="video"><video src="https://media.wmupd.com/media/media/xxa_20190917gwvideo.mp4" preload controls /></video></div>
 
+                        </li>
 
+                        <li>
 
+                            <div class="cover" style="background-image: url(/src/img/pc/video-cover.jpg);"><i class="btn-play"></i></div>
 
+                            <div class="video"><video src="https://media.wmupd.com/media/media/xxa_20190917gwvideo.mp4" preload controls /></video></div>
 
+                        </li>
 
+                        <li>
 
+                            <div class="cover" style="background-image: url(/src/img/pc/video-cover.jpg);"><i class="btn-play"></i></div>
 
+                            <div class="video"><video src="https://media.wmupd.com/media/media/xxa_20190917gwvideo.mp4" preload controls /></video></div>
 
+                        </li>
 
+                    </ul>
 
+                </div>
 
+                <div class="tab-wrap">
 
+                    <ul data-tabchange="modvideo">
 
+                        <li class="is-active"><img src="/src/img/pc/tab-img-video.jpg" alt="" /></li>
 
+                        <li><img src="/src/img/pc/tab-img-video.jpg" alt="" /></li>
 
+                        <li><img src="/src/img/pc/tab-img-video.jpg" alt="" /></li>
 
+                    </ul>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <div class="mod-part mod-preview">
 
+            <div class="mod-title title4">
 
+                <p class="text"></p>
 
+            </div>
 
+            <div class="mod-inner">
 
+                <div class="lists">
 
+                    <ul>
 
+                        <li><img src="/src/img/img-preview1.jpg" alt="" /></li>
 
+                        <li><img src="/src/img/img-preview2.jpg" alt="" /></li>
 
+                        <li><img src="/src/img/img-preview3.jpg" alt="" /></li>
 
+                        <li><img src="/src/img/img-preview4.jpg" alt="" /></li>
 
+                        <li><img src="/src/img/img-preview5.jpg" alt="" /></li>
 
+                        <li><img src="/src/img/img-preview6.jpg" alt="" /></li>
 
+                    </ul>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <div class="mod-part mod-strategy">
 
+            <div class="mod-title title5">
 
+                <p class="text"></p>
 
+            </div>
 
+            <div class="mod-inner">
 
+                <div class="img-lists">
 
+                    <ul>
 
+                        <li><a href="#" target="_blank">
 
+                            <img src="/src/img/pc/img-strategy1.jpg" alt="" />
 
+                            <p class="text">中韩伤害相差巨大 哈林打引鸟背两分多</p>
 
+                        </a></li>
 
+                        <li><a href="#" target="_blank">
 
+                            <img src="/src/img/pc/img-strategy1.jpg" alt="" />
 
+                            <p class="text">中韩伤害相差巨大 哈林打引鸟背两分多</p>
 
+                        </a></li>
 
+                        <li><a href="#" target="_blank">
 
+                            <img src="/src/img/pc/img-strategy1.jpg" alt="" />
 
+                            <p class="text">中韩伤害相差巨大 哈林打引鸟背两分多</p>
 
+                        </a></li>
 
+                        <li><a href="#" target="_blank">
 
+                            <img src="/src/img/pc/img-strategy1.jpg" alt="" />
 
+                            <p class="text">中韩伤害相差巨大 哈林打引鸟背两分多</p>
 
+                        </a></li>
 
+                        <li><a href="#" target="_blank">
 
+                            <img src="/src/img/pc/img-strategy1.jpg" alt="" />
 
+                            <p class="text">中韩伤害相差巨大 哈林打引鸟背两分多</p>
 
+                        </a></li>
 
+                        <li><a href="#" target="_blank">
 
+                            <img src="/src/img/pc/img-strategy1.jpg" alt="" />
 
+                            <p class="text">中韩伤害相差巨大 哈林打引鸟背两分多</p>
 
+                        </a></li>
 
+                    </ul>
 
+                </div>
 
+                <div class="text-lists">
 
+                    <ul>
 
+                        <li class="hot">
 
+                            <span>1</span>
 
+                            <a href="" target="_blank">文艺复兴！韩服白手手搓技能单刷CP副本</a>
 
+                        </li>
 
+                        <li class="hot">
 
+                            <span>2</span>
 
+                            <a href="" target="_blank">2韩服布甲剑魔刷单人普雷 通关只需八分钟</a>
 
+                        </li>
 
+                        <li class="hot">
 
+                            <span>3</span>
 
+                            <a href="" target="_blank">3这伤害就离谱 安夏带队暴力竞速强者之路</a>
 
+                        </li>
 
+                        <li>
 
+                            <span>4</span>
 
+                            <a href="" target="_blank">4剑魂兄！19件红12丢下去可成不了几个鸭</a>
 
+                        </li>
 
+                        <li>
 
+                            <span>5</span>
 
+                            <a href="" target="_blank">5国服浮游庭院轻松强杀 美服破防依然困难</a>
 
+                        </li>
 
+                        <li>
 
+                            <span>6</span>
 
+                            <a href="" target="_blank">6出击 沃克天团1分48秒强者之路英雄模式</a>
 
+                        </li>
 
+                        <li>
 
+                            <span>7</span>
 
+                            <a href="" target="_blank">7钞能力挂！驴叫王单刷四人难度强者之路</a>
 
+                        </li>
 
+                        <li>
 
+                            <span>8</span>
 
+                            <a href="" target="_blank">8没有无我剑气太弱了 美服剑魂艰难打鸟背</a>
 
+                        </li>
 
+                        <li>
 
+                            <span>9</span>
 
+                            <a href="" target="_blank">9神剑之巅 DNF无防具剑魂单人通强者之路</a>
 
+                        </li>
 
+                        <li>
 
+                            <span>10</span>
 
+                            <a href="" target="_blank">10找到合适的打法 男漫游四种20秒连招讲解</a>
 
+                        </li>
 
+                    </ul>
 
                 </div>
 
             </div>
 
         </div>
 
@@ -121,7 +306,95 @@
 
     <script src="lib/mod.js"></script>
 
     <script src="http://pub.dwstatic.com/zt2017/xajh//lib/clipboard_86b88c9.js"></script><!--ignore-->
 
     <script>
 
-        require('modules/page/index.js');
 
+        require('modules/page/global.js');
 
+        require('modules/page/wap.js');
 
+        var danmuColor = [
 
+            '#bd3ec2',
 
+            '#c23e73',
 
+            '#f161b9',
 
+        ];
 
+        var danmuList = [
 
+            '华山的令狐冲说：小师妹你在哪里？？',
 
+            '华山的岳灵珊说：我在小师弟这里压',
 
+            '华山的林平之说：o((⊙﹏⊙))o',
 
+            '无相的大佬看我说：贵圈真乱',
 
+            '华山的张智宸说：这游戏有分T么',
 
+            '恒山的张苛说：看着画风还不错，不知道实际咋样',
 
+            '日月的曹曼易说：小妹提前求大佬带团',
 
+            '武当的曹幻香说：网恋么，我萝莉音',
 
+            '武当的于碧菡说：游戏已经预定，什么时候发码',
 
+            '华山的于朦说：什么时候发码+1',
 
+            '恒山的于雅寒说：什么时候发码+1',
 
+            '日月的丁夜柳说：求大神指导游戏玩法',
 
+            '无相的丁昏说：看着画面还行',
 
+            '武当的丁眆说：笑傲是我最爱啊',
 
+            '华山的南宫晓博说：什么时候发码+1',
 
+            '恒山的南宫书白说：什么时候发码+1',
 
+            '日月的南宫绍辉说：风雪连天射白鹿',
 
+            '无相的慕容飞雪说：笑书神侠倚碧鸳',
 
+            '武当的慕容鸯说：其实我最爱鹿鼎记',
 
+            '华山的夏雁丝说：什么时候发码+1',
 
+            '恒山的慕容碧玉说：天龙八部也不错啊',
 
+            '日月的夏巧凡说：这游戏又是完美的？',
 
+            '无相的夏庭说：前几天是不是刚上了一个神雕侠侣，这又笑傲江湖了',
 
+            '武当的程剂说：我的盈盈，我来啦！你在哪儿',
 
+            '华山的程谐说：别问，问就是冲冲冲',
 
+            '恒山的程绸缪说：万里独行田伯光就是我！',
 
+            '日月的程晏说：看我梯云纵飞身上前盗走你的心',
 
+            '无相的丁笑霜说：说实话，这游戏什么时候能开测',
 
+            '武当的丁峭说：有点过分了，开测了么',
 
+            '华山的丁振说：已经预约',
 
+            '恒山的丁如柏说：什么时候发码+1',
 
+            '日月的丁丁说：已经预约+1',
 
+            '无相的东郭以松说：已经预约+100832323',
 
+            '武当的东郭征说：五岳门人听令，盟主令旗在此：请给XOSDU333这个ID充钱！',
 
+            '华山的东郭天荷说：看特色介绍还不错，是已经可以玩了吧？',
 
+            '恒山的令狐雪旋说：哈哈，我已经在玩了，真香',
 
+            '日月的令狐谷蓝说：已经预约+65535',
 
+            '无相的东郭穆说：已经预约',
 
+            '武当的令狐梦秋说：游戏居然是原创故事剧情',
 
+            '华山的令狐代萱说：自古华山一条路，预约笑傲闯江湖',
 
+            '恒山的令狐朕说：预约笑傲闯江湖+1',
 
+            '日月的谢此说：已经预约',
 
+            '无相的谢敬说：已经预约',
 
+            '武当的谢沛珊说：预约笑傲闯江湖+1',
 
+            '华山的谢铎说：预约笑傲闯江湖+1',
 
+            '恒山的令狐显说：请强力玩家关注我，招强力团',
 
+            '日月的谢亦巧说：已经预约',
 
+            '无相的谢半梅说：官网抽奖居然抽了个球',
 
+            '武当的谢肯说：官网还有抽奖？',
 
+            '华山的完颜静说：预约成功，有什么奖励么',
 
+            '恒山的完颜笑翠说：请奖励我小师妹香吻一枚',
 
+            '日月的令狐屯说：我C，别抢我的小师妹！',
 
+            '无相的完颜俊驰说：这么多人，抢小师妹，我抢小师弟好了',
 
+            '武当的完颜武说：重口味',
 
+            '华山的完颜初之说：O(∩_∩)O哈哈~',
 
+            '恒山的朱力说：(～￣▽￣)～',
 
+            '日月的朱纮说：预订一发，随机的名字居然不认识',
 
+            '无相的完颜凌瑶说：名字随机的挺好听',
 
+            '武当的朱剂说：放下D3没刷来预订看下这个手游',
 
+            '华山的安陵迎南说：有没有评测啊？',
 
+            '恒山的朱冰薇说：这游戏没给实录画面么？看看到底是啥',
 
+            '日月的安陵涵雁说：武林口袋诛仙老玩家，完美的游戏，起码不会丑',
 
+            '无相的吴惜蕊说：赌10块肯定要卖时装的',
 
+            '武当的完颜抑说：游戏是什么类型的？别再是回合制了。',
 
+            '华山的吴寒香说：我也不喜欢回合制游戏',
 
+            '恒山的吴吾说：游戏是即时战斗，参与了体验测试，感觉还不错',
 
+            '日月的朱梦琪说：有点类似流星蝴蝶',
 
+            '无相的安陵寻绿说：一定要选门派么，能自创武学么？',
 
+            '武当的吴漾说：自创武学，争霸天下，碾压豪强',
 
+            '华山的吴泺说：武林至尊宝刀屠龙，号令天下谁敢不从！',
 
+            '恒山的朱茜说：那个发屠龙刀的，笑傲的时候还没屠龙刀吧……',
 
+            '日月的黎郡说：看中这份国风，希望不要失望',
 
+            '无相的闻人已说：什么时候出个鹿鼎记手游，我要娶7个',
 
+            '武当的黎盈说：辛苦项目组了，赶紧上线',
 
+            '华山的白马雯说：CH不知道会不会跟鬼J3一样',
 
+            '恒山的白马劫说：什么时候开测啊',
 
+            '日月的闻人如柏说：哪里下载游戏啊，已经预约了',
 
+            '无相的黎妨说：游戏选T奶，永远不愁卖',
 
+            '武当的闻人香天说：怎么注册账号啊',
 
+            '华山的白马从寒说：天呐，笑傲',
 
+        ];
 
     </script>
 
 </body>

BIN
2019专题/1911笑傲江湖3专题/src/img/mp/adorn-cloud-many.png
View File


BIN
2019专题/1911笑傲江湖3专题/src/img/mp/adorn-hill-hight-left.jpg
View File


BIN
2019专题/1911笑傲江湖3专题/src/img/mp/adorn-hill-left.jpg
View File


BIN
2019专题/1911笑傲江湖3专题/src/img/mp/adorn-sects2.png
View File


BIN
2019专题/1911笑傲江湖3专题/src/img/mp/adorn-tree-small.png
View File


BIN
2019专题/1911笑傲江湖3专题/src/img/mp/bg-primary.jpg
View File


BIN
2019专题/1911笑傲江湖3专题/src/img/mp/bg-special.jpg
View File


BIN
2019专题/1911笑傲江湖3专题/src/img/mp/btn-follow.png
View File


BIN
2019专题/1911笑傲江湖3专题/src/img/mp/btn-order.png
View File


BIN
2019专题/1911笑傲江湖3专题/src/img/mp/img-special1.jpg
View File


BIN
2019专题/1911笑傲江湖3专题/src/img/mp/img-special2.jpg
View File


BIN
2019专题/1911笑傲江湖3专题/src/img/mp/img-special3.jpg
View File


BIN
2019专题/1911笑傲江湖3专题/src/img/mp/img-special4.jpg
View File


BIN
2019专题/1911笑傲江湖3专题/src/img/mp/img-special5.jpg
View File


+ 0 - 0
2019专题/1911笑傲江湖3专题/src/img/btn-follow.png → 2019专题/1911笑傲江湖3专题/src/img/pc/btn-follow.png
View File


+ 0 - 0
2019专题/1911笑傲江湖3专题/src/img/btn-order.png → 2019专题/1911笑傲江湖3专题/src/img/pc/btn-order.png
View File


+ 0 - 0
2019专题/1911笑傲江湖3专题/src/img/pc/type-sects1.png → 2019专题/1911笑傲江湖3专题/src/img/type-sects1.png
View File


+ 0 - 0
2019专题/1911笑傲江湖3专题/src/img/pc/type-sects2.png → 2019专题/1911笑傲江湖3专题/src/img/type-sects2.png
View File


+ 0 - 0
2019专题/1911笑傲江湖3专题/src/img/pc/type-sects3.png → 2019专题/1911笑傲江湖3专题/src/img/type-sects3.png
View File


+ 0 - 0
2019专题/1911笑傲江湖3专题/src/img/pc/type-sects4.png → 2019专题/1911笑傲江湖3专题/src/img/type-sects4.png
View File


+ 0 - 0
2019专题/1911笑傲江湖3专题/src/img/pc/type-sects5.png → 2019专题/1911笑傲江湖3专题/src/img/type-sects5.png
View File


+ 289 - 0
2019专题/1911笑傲江湖3专题/src/modules/page/global.js
View File 

@@ -0,0 +1,289 @@
 
+var dialog = require('dialog.js');
 
+var Swiper = require('swiper');
 
+
 
+var domain = "http://ka.duowan.com";
 
+var gameID = $('[data-gameid]').attr('data-gameid');
 
+var isH5 = /Android|webOS|iPhone|Windows Phone|iPod|BlackBerry|SymbianOS/i.test(window.navigator.userAgent) && !/[\?&]pc(?:[=&].*|$)/.test(window.location.href);
 
+var $prevVideo = null;
 
+var $orderCount =$('#orderCount')
 
+
 
+var G = {
 
+    init: function () {
 
+        this.tabChange();
 
+        this.reservedState();
 
+        this.renderSwiper();
 
+        this.popupVideo();
 
+        this.playVideo();
 
+        this.popupClose();
 
+        this.danmu();
 
+        
+        // 预订游戏
 
+        $('body').on('click', '.btn-follow', function () {
 
+            dwUDBProxy.isKaLogin(function (flag) {
 
+                if (flag) {
 
+                    if ($(this).hasClass('is-reserved')) {
 
+                        G.showTip('已预订');
 
+                    } else {
 
+                        G.reservedGame();
 
+                    }
 
+                } else {
 
+                    if (isH5 || $('body').width() <= 750) {
 
+                        dwUDBProxy.login();
 
+                    } else {
 
+                        dwUDBProxy.kaLogin();
 
+                    }
 
+                }
 
+            })
 
+        })
 
+        
+        // 预约弹窗
 
+        $('.btn-order').on('click', function () {
 
+            $('.popup-order').fadeIn();
 
+        })
 
+
 
+        // 门派 type 背景切换
 
+        $('.mod-sects .type .tab span').on('click', function () {
 
+            var $this = $(this),
 
+                $context = $this.parents('li').find('.context'),
 
+                _index = $this.index();
 
+            $this.parent().removeClass('tab-bg1 tab-bg2').addClass('tab-bg' + (_index + 1));
 
+            $context.find('img').eq(_index).show().siblings().hide();
 
+        })
 
+
 
+        // tab 切换时暂停上次播放的 video
 
+        $('.mod-video [data-tabchange="modvideo"]').children().on('click', function () {
 
+            var _index = $(this).index(),
 
+                $currentVideo = $('[data-context="modvideo"]').children().eq(_index);
 
+            G.stopPrevVideo();
 
+            if (!$currentVideo.find('.video').is(':hidden')) {
 
+                $currentVideo.find('video')[0].play();
 
+                $prevVideo = $currentVideo.find('video');
 
+            }
 
+        })
 
+    },
 
+    showTip: function (msg, timeout) {
 
+        if (!msg) {
 
+            return;
 
+        }
 
+        timeout = timeout || 2000;
 
+
 
+        var d = dialog({
 
+            title: "提示",
 
+            content: msg,
 
+            skin: "base-ui popup-tips"
 
+        }).showModal();
 
+
 
+        //2秒后自动关闭
 
+        setTimeout(function () {
 
+            d.close().remove();
 
+        }, timeout);
 
+    },
 
+    reservedGame: function () {
 
+        $.ajax({
 
+            url: domain + '/Game/ZtBook',
 
+            dataType: 'jsonp',
 
+            jsonp: 'callback',
 
+            data: { lottery_id: parseInt(gameID) },
 
+            success: function (res) {
 
+                // console.log(res);
 
+                if (res.result == 1) {
 
+                    G.showTip('预订成功');
 
+                    $orderCount.text(parseInt($orderCount.text()) + 1);
 
+                } else {
 
+                    G.showTip(res.msg);
 
+                }
 
+            }
 
+        })
 
+    },
 
+    stopPrevVideo: function () {
 
+        if ($prevVideo) {
 
+            $prevVideo[0].currentTime = 0;
 
+            $prevVideo[0].pause();
 
+        }
 
+    },
 
+    tabChange: function () {
 
+        $('[data-tabchange]').children().on('click', function () {
 
+            var $this = $(this),
 
+                currentIndex = $this.index(),
 
+                changeAttr = $this.parent().attr('data-tabchange');
 
+            $this.addClass('is-active').siblings().removeClass('is-active');
 
+            $('[data-context="' + changeAttr + '"]').children().eq(currentIndex).show().siblings().hide();
 
+        });
 
+    },
 
+    reservedState: function () {
 
+        $.ajax({
 
+            url: domain + '/Game/GetZtBook',
 
+            dataType: 'jsonp',
 
+            jsonp: 'callback',
 
+            data: { lottery_id: parseInt(gameID) },
 
+            success: function (res) {
 
+                // console.log(res);
 
+                if (res.result == 1) {
 
+                    var status = res.data.status,
 
+                        reservedCount = res.data.book_nums;
 
+                    $orderCount.text(reservedCount);
 
+                    if (status == 1) {
 
+                        $('.btn-follow').addClass('is-reserved');
 
+                    }
 
+                } else {
 
+                    G.showTip(res.msg);
 
+                }
 
+            }
 
+        })
 
+    },
 
+    renderSwiper: function () {
 
+        // 门派介绍 swiper
 
+        new Swiper('.sects-swiper', {
 
+            loop: true,
 
+            observer: true,
 
+            observeParents: true,
 
+            effect: 'fade',
 
+            fadeEffect: {
 
+                crossFade: true
 
+            },
 
+            autoplay: {
 
+                delay: 4000,
 
+                disableOnInteraction: false
 
+            },
 
+            pagination: {
 
+                el: '.sects-pagination',
 
+                bulletActiveClass: 'is-active',
 
+                clickable: true,
 
+                renderBullet: function (index, classname) {
 
+                    return '<span class="' + classname + ' item' + (index + 1) + '"></span>';
 
+                }
 
+            },
 
+            navigation: {
 
+                nextEl: '.sects-switch.btn-next',
 
+                prevEl: '.sects-switch.btn-prev',
 
+            }
 
+        });
 
+
 
+        // 游戏特色 swiper
 
+        new Swiper('.special-swiper', {
 
+            loop: true,
 
+            observer: true,
 
+            observeParents: true,
 
+            effect: 'fade',
 
+            fadeEffect: {
 
+                crossFade: true
 
+            },
 
+            autoplay: {
 
+                delay: 4000,
 
+                disableOnInteraction: false
 
+            },
 
+            pagination: {
 
+                el: '.special-pagination',
 
+                bulletActiveClass: 'is-active',
 
+                clickable: true,
 
+                renderBullet: function (index, classname) {
 
+                    var text = $(this.slides[index]).attr('data-text');
 
+                    return '<span class="' + classname + '"><i></i>' + text + '</span>';
 
+                }
 
+            }
 
+        });
 
+    },
 
+    popupVideo: function () {
 
+        $('.btn-popup-video').click(function () {
 
+            var $this = $(this),
 
+                msgAttr = $this.attr('data-msg'),
 
+                $container = $this.parents('.popup-container'),
 
+                $popupInner = $container.find('.popup-video'),
 
+                $video = $popupInner.find('video');
 
+            if (typeof(msgAttr) != 'undefined') {
 
+                G.showTip(msgAttr || '敬请期待！');
 
+                return false;
 
+            }
 
+            G.stopPrevVideo();
 
+            $popupInner.fadeIn();
 
+            if ($video.length > 0) {
 
+                $video[0].play();
 
+                $prevVideo = $video;
 
+            }
 
+        });
 
+        $('.popup-video .close-popup').on('click', G.stopPrevVideo);
 
+    },
 
+    playVideo: function () {
 
+        $('.btn-play').on('click', function () {
 
+            var $this = $(this),
 
+                $parent = $this.parent(),
 
+                $video = $parent.parent().find('video'),
 
+                msg = $this.attr('data-msg');
 
+            if (typeof(msg) != 'undefined') {
 
+                G.showTip(msg || '敬请期待！');
 
+                return false;
 
+            }
 
+            G.stopPrevVideo();
 
+            $parent.hide().siblings().show();
 
+            if ($video.length > 0) {
 
+                $video[0].play();
 
+                $prevVideo = $video;
 
+            }
 
+        })
 
+    },
 
+    popupClose: function () {
 
+        $('.close-popup').on('click', function () {
 
+            var $popupInner = $(this).parents('.popup-wrap');
 
+            $popupInner.fadeOut();
 
+            G.stopPrevVideo();
 
+        });
 
+    },
 
+    danmu: function () {
 
+        var activedDanmu = [],
 
+            $danmuWrap = $('.mod-sects .sects-danmu');
 
+        function getRandom (l, r) {
 
+            return Math.floor(Math.random() * (r - l) + l);
 
+        }
 
+        function createDanmu () {
 
+            var span = document.createElement('span'),
 
+                duration = getRandom(4, 6) * 1000,
 
+                fontSize = getRandom(14, 20);
 
+            $(span).css({
 
+                'color': danmuColor[getRandom(0, danmuColor.length)],
 
+                'font-size': fontSize + 'px',
 
+                'top': (getRandom(0, $danmuWrap.height() - 2 - fontSize)) + 'px'
 
+            })
 
+            return {
 
+                span: span,
 
+                duration: duration
 
+            }
 
+        }
 
+        function renderDanmu (danmuText, callback) {
 
+            var danmu = createDanmu();
 
+            danmu.span.innerText = danmuText;
 
+            $danmuWrap.append(danmu.span);
 
+            $(danmu.span).animate({'left': - $(danmu.span).width() - 4 + 'px'}, danmu.duration, 'linear', function () {
 
+                $(this).remove();
 
+                callback && callback();
 
+            });
 
+        }
 
+        setInterval(function () {
 
+            var danmuText = danmuList[getRandom(0, danmuList.length)];
 
+            while (activedDanmu.includes(danmuText) && activedDanmu.length !== danmuList.length) {
 
+                danmuText = danmuList[getRandom(0, danmuList.length)];
 
+            }
 
+            activedDanmu.push(danmuText);
 
+            renderDanmu(danmuText, function () {
 
+                activedDanmu.splice(activedDanmu.indexOf(danmuText), 1);
 
+            });
 
+        }, 1000);
 
+
 
+        // 发送弹幕
 
+        $('.btn-danmu').on('click', function () {
 
+            var $this = $(this),
 
+                $container = $this.parents('.sects-send'),
 
+                danmuSect = $container.find('#danmu_sect').val(),
 
+                danmuName = $container.find('#danmu_name').val(),
 
+                danmuText = $container.find('#danmu_text').val();
 
+            if (danmuSect == '' || danmuName == '' || danmuName == '') {
 
+                G.showTip('发送失败，内容填写不全');
 
+                return false;
 
+            }
 
+            renderDanmu(danmuSect + '的' + danmuName + '说：' + danmuText);
 
+        })
 
+    }
 
+}
 
+
 
+$(function () {
 
+    G.init();
 
+});

+ 0 - 268
2019专题/1911笑傲江湖3专题/src/modules/page/index.js
View File 

@@ -1,268 +0,0 @@
 
-var dialog = require('dialog.js');
 
-var Swiper = require('swiper');
 
-
 
-var domain = "http://ka.duowan.com";
 
-var gameID = $('[data-gameid]').attr('data-gameid');
 
-var isH5 = /Android|webOS|iPhone|Windows Phone|iPod|BlackBerry|SymbianOS/i.test(window.navigator.userAgent) && !/[\?&]pc(?:[=&].*|$)/.test(window.location.href);
 
-var $prevVideo = null;
 
-
 
-var M = {
 
-    showTip: function (msg, timeout) {
 
-        if (!msg) {
 
-            return;
 
-        }
 
-        timeout = timeout || 2000;
 
-
 
-        var d = dialog({
 
-            title: "提示",
 
-            content: msg,
 
-            skin: "base-ui popup-tips"
 
-        }).showModal();
 
-
 
-        //2秒后自动关闭
 
-        setTimeout(function () {
 
-            d.close().remove();
 
-        }, timeout);
 
-    }
 
-}
 
-
 
-var V = {
 
-    init: function () {
 
-        this.playVideo();
 
-        this.popupVideo();
 
-        this.tabChange();
 
-        this.renderSwiper();
 
-        this.orderCount();
 
-        this.danmu();
 
-
 
-        // 预订游戏
 
-        $('body').on('click', '.btn-follow', function () {
 
-            dwUDBProxy.isKaLogin(function (flag) {
 
-                if (flag) {
 
-                    if ($(this).hasClass('is-reserved')) {
 
-                        M.showTip('已预订');
 
-                    } else {
 
-                        V.reservedGame();
 
-                    }
 
-                } else {
 
-                    if (isH5 || $('body').width() <= 750) {
 
-                        dwUDBProxy.login();
 
-                    } else {
 
-                        dwUDBProxy.kaLogin();
 
-                    }
 
-                }
 
-            })
 
-        })
 
-
 
-        // 门派 type 背景切换
 
-        $('.mod-sects .type .tab span').on('click', function () {
 
-            var $this = $(this),
 
-                _index = $this.index();
 
-            $(this).parent().attr('class', 'tab tab-bg' + (_index + 1));
 
-        })
 
-
 
-        // tab 切换时暂停上次播放的 video
 
-        $('.mod-video [data-tabchange="modvideo"]').children().on('click', function () {
 
-            var _index = $(this).index(),
 
-                $currentVideo = $('[data-context="modvideo"]').children().eq(_index);
 
-            V.stopPrevVideo();
 
-            if (!$currentVideo.find('.video').is(':hidden')) {
 
-                $currentVideo.find('video')[0].play();
 
-                $prevVideo = $currentVideo.find('video');
 
-            }
 
-        })
 
-    },
 
-    stopPrevVideo: function () {
 
-        if ($prevVideo) {
 
-            $prevVideo[0].currentTime = 0;
 
-            $prevVideo[0].pause();
 
-        }
 
-    },
 
-    playVideo: function () {
 
-        $('.btn-play').on('click', function () {
 
-            var $this = $(this),
 
-                $parent = $this.parent(),
 
-                $video = $parent.parent().find('video'),
 
-                msg = $this.attr('data-msg');
 
-            if (typeof(msg) != 'undefined') {
 
-                M.showTip(msg || '敬请期待！');
 
-                return false;
 
-            }
 
-            V.stopPrevVideo();
 
-            $parent.hide().siblings().show();
 
-            if ($video.length > 0) {
 
-                $video[0].play();
 
-                $prevVideo = $video;
 
-            }
 
-        })
 
-    },
 
-    popupVideo: function () {
 
-        $('.btn-popup').click(function () {
 
-            var $this = $(this),
 
-                msgAttr = $this.attr('data-msg'),
 
-                $container = $this.parents('.popup-container'),
 
-                $popupInner = $container.find('.popup-wrap'),
 
-                $video = $popupInner.find('video');
 
-            if (typeof(msgAttr) != 'undefined') {
 
-                V.showTip(msgAttr || '敬请期待！');
 
-                return false;
 
-            }
 
-            V.stopPrevVideo();
 
-            $popupInner.fadeIn();
 
-            if ($video.length > 0) {
 
-                $video[0].play();
 
-                $prevVideo = $video;
 
-            }
 
-        });
 
-        $('.close-popup').click(function () {
 
-            var $popupInner = $(this).parents('.popup-wrap');
 
-            $popupInner.fadeOut();
 
-            V.stopPrevVideo();
 
-        });
 
-    },
 
-    reservedGame: function () {
 
-        $.ajax({
 
-            url: domain + '/game/ZtBook',
 
-            dataType: 'jsonp',
 
-            data: { lottery_id: parseInt(gameID) },
 
-            jsonp: 'callback',
 
-            success: function (ret) {
 
-                if (ret.result == 1) {
 
-                    M.showTip('预订成功');
 
-                } else {
 
-                    M.showTip(ret.msg);
 
-                }
 
-            }
 
-        })
 
-    },
 
-    tabChange: function () {
 
-        $('[data-tabchange]').children().on('click', function () {
 
-            var $this = $(this),
 
-                currentIndex = $this.index(),
 
-                changeAttr = $this.parent().attr('data-tabchange');
 
-            $this.addClass('is-active').siblings().removeClass('is-active');
 
-            $('[data-context="' + changeAttr + '"]').children().eq(currentIndex).show().siblings().hide();
 
-        });
 
-    },
 
-    renderSwiper: function () {
 
-        // 门派介绍 swiper
 
-        new Swiper('.sects-swiper', {
 
-            loop: true,
 
-            observer: true,
 
-            observeParents: true,
 
-            effect: 'fade',
 
-            fadeEffect: {
 
-                crossFade: true
 
-            },
 
-            autoplay: {
 
-                delay: 4000,
 
-                disableOnInteraction: false
 
-            },
 
-            pagination: {
 
-                el: '.sects-pagination',
 
-                bulletActiveClass: 'is-active',
 
-                clickable: true,
 
-                renderBullet: function (index, classname) {
 
-                    return '<span class="' + classname + ' item' + (index + 1) + '"></span>';
 
-                }
 
-            },
 
-            navigation: {
 
-                nextEl: '.sects-switch.btn-next',
 
-                prevEl: '.sects-switch.btn-prev',
 
-            }
 
-        });
 
-
 
-        // 游戏特色 swiper
 
-        new Swiper('.special-swiper', {
 
-            loop: true,
 
-            observer: true,
 
-            observeParents: true,
 
-            effect: 'fade',
 
-            fadeEffect: {
 
-                crossFade: true
 
-            },
 
-            autoplay: {
 
-                delay: 4000,
 
-                disableOnInteraction: false
 
-            },
 
-            pagination: {
 
-                el: '.special-pagination',
 
-                bulletActiveClass: 'is-active',
 
-                clickable: true,
 
-                renderBullet: function (index, classname) {
 
-                    var text = $(this.slides[index]).attr('data-text');
 
-                    return '<span class="' + classname + '"><i></i>' + text + '</span>';
 
-                }
 
-            }
 
-        });
 
-    },
 
-    orderCount: function () {
 
-        $.ajax({
 
-            url: domain + '/open/jHot',
 
-            type: 'post',
 
-            success: function (ret) {
 
-                if (ret.code == 0) {
 
-                    $('#orderCount').text(ret.data.result);
 
-                }
 
-            }
 
-        })
 
-    },
 
-    danmu: function () {
 
-        var activedDanmu = [],
 
-            $danmuWrap = $('.mod-sects .sects-danmu');
 
-        function getRandom (l, r) {
 
-            return Math.floor(Math.random() * (r - l) + l);
 
-        }
 
-        function createDanmu () {
 
-            var span = document.createElement('span'),
 
-                duration = getRandom(4, 6) * 1000,
 
-                fontSize = getRandom(14, 20);
 
-            $(span).css({
 
-                'color': danmuColor[getRandom(0, danmuColor.length)],
 
-                'font-size': fontSize + 'px',
 
-                'top': (getRandom(0, $danmuWrap.height() - 2 - fontSize)) + 'px'
 
-            })
 
-            return {
 
-                span: span,
 
-                duration: duration
 
-            }
 
-        }
 
-        function renderDanmu (danmuText, callback) {
 
-            var danmu = createDanmu();
 
-            danmu.span.innerText = danmuText;
 
-            $danmuWrap.append(danmu.span);
 
-            $(danmu.span).animate({'left': - $(danmu.span).width() - 4 + 'px'}, danmu.duration, 'linear', function () {
 
-                $(this).remove();
 
-                callback && callback();
 
-            });
 
-        }
 
-        setInterval(function () {
 
-            var danmuText = danmuList[getRandom(0, danmuList.length)];
 
-            while (activedDanmu.includes(danmuText) && activedDanmu.length !== danmuList.length) {
 
-                danmuText = danmuList[getRandom(0, danmuList.length)];
 
-            }
 
-            activedDanmu.push(danmuText);
 
-            renderDanmu(danmuText, function () {
 
-                activedDanmu.splice(activedDanmu.indexOf(danmuText), 1);
 
-            });
 
-        }, 1000);
 
-
 
-        // 发送弹幕
 
-        $('.btn-danmu').on('click', function () {
 
-            var $this = $(this),
 
-                $container = $this.parent(),
 
-                danmuSect = $container.find('#danmu_sect').val(),
 
-                danmuName = $container.find('#danmu_name').val(),
 
-                danmuText = $container.find('#danmu_text').val();
 
-            if (danmuSect == '' || danmuName == '' || danmuName == '') {
 
-                M.showTip('发送失败，内容填写不全');
 
-                return false;
 
-            }
 
-            renderDanmu(danmuSect + '的' + danmuName + '说：' + danmuText);
 
-        })
 
-    }
 
-}
 
-
 
-$(function () {
 
-    V.init();
 
-})

+ 47 - 0
2019专题/1911笑傲江湖3专题/src/modules/page/wap.js
View File 

@@ -0,0 +1,47 @@
 
+var Swiper = require('swiper');
 
+var swiperTmpl = __inline("/src/tpl/previewSwiper.tmpl");
 
+var previewSwiper = null;
 
+
 
+var V = {
 
+    init: function () {
 
+        this.previewShow();
 
+        this.popupClickHide();
 
+    },
 
+    popupClickHide: function () {
 
+        $('body').on('click', '.popup-wrap', function () {
 
+            $(this).fadeOut();
 
+        })
 
+        $('body').on('click', '.popup-wrap .innerbox', function (e) {
 
+            e.stopPropagation();
 
+        })
 
+    },
 
+    previewShow: function () {
 
+        $('.mod-preview .lists li').on('click', function () {
 
+            var $this = $(this),
 
+                _index = $this.index(),
 
+                imgLists = $this.parents('.lists').find('img'),
 
+                swiperDom = swiperTmpl({data: imgLists});
 
+            if (!previewSwiper) {
 
+                $('.mod-preview .mod-inner').append(swiperDom);
 
+                V.renderSwiper(_index);
 
+                return false;
 
+            }
 
+            previewSwiper.slideTo(_index + 1);
 
+            $('.popop-preview').fadeIn();
 
+        })
 
+    },
 
+    renderSwiper: function (currentIndex) {
 
+        previewSwiper = new Swiper('.preview-swiper', {
 
+            loop: true,
 
+            observer: true,
 
+            observeParents: true,
 
+            autoplay: false,
 
+            initialSlide: currentIndex
 
+        });
 
+        $('.popop-preview').fadeIn();
 
+    }
 
+}
 
+
 
+$(function () {
 
+    V.init();
 
+})

+ 45 - 19
2019专题/1911笑傲江湖3专题/src/sass/global.scss
View File 

@@ -81,7 +81,6 @@ body {
 
     background: #DEDAC9;
 
     overflow-x: hidden;
 
     .mod-part {
 
-        // overflow: hidden;
 
         position: relative;
 
         background: top center no-repeat;
 
         .popup-wrap {
 
@@ -92,6 +91,40 @@ body {
 
             z-index: 99;
 
             top: 0;
 
             left: 0;
 
+            &.popup-video {
 
+                .close-popup {
 
+                    top: 50%;
 
+                    left: 50%;
 
+                    margin: -255px 0 0 470px;
 
+                }
 
+                .innerbox {
 
+                    height: 530px;
 
+                    width: 940px;
 
+                    top: 50%;
 
+                    left: 50%;
 
+                    margin: -255px 0 0 -470px;
 
+                    background: #000;
 
+                }
 
+            }
 
+            &.popup-order {
 
+                .close-popup {
 
+                    height: 60px;
 
+                    width: 60px;
 
+                    line-height: 60px;
 
+                    top: 80px;
 
+                    left: 50%;
 
+                    margin-left: 280px;
 
+                    border-radius: 100%;
 
+                    transition: opacity 0.3s;
 
+                    @include opacity(1);
 
+                }
 
+                .innerbox {
 
+                    height: 968px;
 
+                    width: 100%;
 
+                    top: 0;
 
+                    left: 0;
 
+                }
 
+            }
 
             .mask {
 
                 height: 100%;
 
                 width: 100%;
 
@@ -106,9 +139,7 @@ body {
 
                 width: 40px;
 
                 display: block;
 
                 position: absolute;
 
-                top: 50%;
 
-                left: 50%;
 
-                margin: -255px 0 0 470px;
 
+                z-index: 10;
 
                 background: #000;
 
                 font-size: 24px;
 
                 font-weight: bold;
 
@@ -123,16 +154,10 @@ body {
 
                 }
 
             }
 
             .innerbox {
 
-                height: 530px;
 
-                width: 940px;
 
                 position: absolute;
 
                 z-index: 2;
 
-                top: 50%;
 
-                left: 50%;
 
-                margin: -255px 0 0 -470px;
 
-                background: #fff;
 
                 overflow: hidden;
 
-                embed, video {
 
+                embed, video, iframe {
 
                     height: 100% !important;
 
                     width: 100%;
 
                     display: block;
 
@@ -200,7 +225,7 @@ body {
 
     .mod-primary {
 
         height: 1026px;
 
         background-image: url(../img/pc/bg-primary.jpg);
 
-        .btn-popup {
 
+        .btn-popup-video {
 
             height: 78px;
 
             width: 78px;
 
             display: block;
 
@@ -236,10 +261,10 @@ body {
 
                         transform: translate(0, -9px);
 
                     }
 
                     &.btn-order {
 
-                        background-image: url(../img/btn-order.png?__sprite);
 
+                        background-image: url(../img/pc/btn-order.png?__sprite);
 
                     }
 
                     &.btn-follow {
 
-                        background-image: url(../img/btn-follow.png?__sprite);
 
+                        background-image: url(../img/pc/btn-follow.png?__sprite);
 
                     }
 
                 }
 
             }
 
@@ -277,7 +302,7 @@ body {
 
                         @for $i from 1 through 5 {
 
                             &.item#{$i} {
 
                                 .type .tab {
 
-                                    background-image: url(../img/pc/type-sects#{$i}.png);
 
+                                    background-image: url(../img/type-sects#{$i}.png);
 
                                 }
 
                             }
 
                         }
 
@@ -517,9 +542,8 @@ body {
 
                 }
 
             }
 
             .special-swiper {
 
-                height: 519px;
 
+                height: 597px;
 
                 width: 1279px;
 
-                padding: 39px 0;
 
                 position: absolute;
 
                 top: 18px;
 
                 left: 50%;
 
@@ -528,8 +552,9 @@ body {
 
                 .swiper-wrapper {
 
                     height: 100%;
 
                     .swiper-slide {
 
-                        height: 100%;
 
+                        height: 519px;
 
                         width: 1279px;
 
+                        padding: 39px 0;
 
                         overflow: hidden;
 
                         img {
 
                             display: block;
 
@@ -538,8 +563,9 @@ body {
 
                                 width: 100%;
 
                             }
 
                             &.text {
 
+                                width: 130px;
 
                                 position: absolute;
 
-                                top: -39px;
 
+                                top: 0;
 
                                 left: 26px;
 
                             }
 
                         }

+ 680 - 95
2019专题/1911笑傲江湖3专题/src/sass/wap.scss
View File 

@@ -37,7 +37,7 @@ html {
 
 
 body {
 
     min-width: 320px;
 
-    max-width: 750;
 
+    margin: 0 auto;
 
     a {
 
         text-decoration: none;
 
         &:hover {
 
@@ -86,50 +86,45 @@ body {
 
             height: 100%;
 
             width: 100%;
 
             position: fixed;
 
-            z-index: 99;
 
+            z-index: 999;
 
             top: 0;
 
             left: 0;
 
-            .mask {
 
+            &::before {
 
                 height: 100%;
 
                 width: 100%;
 
-                position: absolute;
 
-                top: 0;
 
-                left: 0;
 
-                background: #000;
 
-                @include opacity(0.5);
 
-            }
 
-            .close-popup {
 
-                height: 40px;
 
-                width: 40px;
 
                 display: block;
 
-                position: absolute;
 
-                top: 50%;
 
-                left: 50%;
 
-                margin: -255px 0 0 470px;
 
-                background: #000;
 
-                font-size: 24px;
 
-                font-weight: bold;
 
-                font-style: normal;
 
-                color: #fff;
 
-                line-height: 40px;
 
-                text-align: center;
 
-                @include opacity(0.6);
 
-                cursor: pointer;
 
-                &:hover {
 
-                    @include opacity(0.8);
 
+                background: rgba(#000, 0.5);
 
+                content: '';
 
+            }
 
+            &.popup-order {
 
+                .close-popup {
 
+                    height: px2rem(65);
 
+                    width: px2rem(65);
 
+                    background: #000;
 
+                    font-size: px2rem(34);
 
+                    font-weight: bold;
 
+                    font-style: normal;
 
+                    color: #fff;
 
+                    display: flex;
 
+                    align-items: center;
 
+                    justify-content: center;
 
+                    position: absolute;
 
+                    z-index: 10;
 
+                    top: 0;
 
+                    right: 0;
 
+                }
 
+                .innerbox {
 
+                    height: 100%;
 
+                    width: 100%;
 
+                    top: 0;
 
+                    left: 0;
 
                 }
 
             }
 
             .innerbox {
 
-                height: 530px;
 
-                width: 940px;
 
                 position: absolute;
 
                 z-index: 2;
 
-                top: 50%;
 
-                left: 50%;
 
-                margin: -255px 0 0 -470px;
 
-                background: #fff;
 
                 overflow: hidden;
 
-                embed, video {
 
+                embed, video, iframe {
 
                     height: 100% !important;
 
                     width: 100%;
 
                     display: block;
 
@@ -139,7 +134,12 @@ body {
 
     }
 
     .mod-title {
 
         position: relative;
 
-        padding: px2rem(65) 0 px2rem(20);
 
+        padding: px2rem(55) 0 px2rem(25);
 
+        @for $i from 1 through 5 {
 
+            &.title#{$i} p {
 
+                background-image: url(../img/bg-title#{$i}.png);
 
+            }
 
+        }
 
         p {
 
             height: px2rem(85);
 
             background: top center no-repeat;
 
@@ -147,7 +147,7 @@ body {
 
             position: relative;
 
             z-index: 2;
 
         }
 
-        span {
 
+        &::before, &::after {
 
             width: px2rem(600);
 
             display: block;
 
             position: absolute;
 
@@ -155,28 +155,35 @@ body {
 
             bottom: 0;
 
             background-repeat: no-repeat;
 
             background-size: auto 100%;
 
-            &.left {
 
-                left: -px2rem(100);
 
-                background-position: top right;
 
-                background-image: url(../img/bg-title-cloud-left.png);
 
-                transform: rotateX(180deg);
 
-                opacity: 0.8;
 
-            }
 
-            &.right {
 
-                right: -px2rem(100);
 
-                background-position: top left;
 
-                background-image: url(../img/bg-title-cloud-right.png);
 
-            }
 
+            content: '';
 
         }
 
-        @for $i from 1 through 5 {
 
-            &.title#{$i} p {
 
-                background-image: url(../img/bg-title#{$i}.png);
 
-            }
 
+        &::before {
 
+            left: -px2rem(100);
 
+            background-position: top right;
 
+            background-image: url(../img/bg-title-cloud-left.png);
 
+            transform: rotateX(180deg);
 
+            opacity: 0.8;
 
+        }
 
+        &::after {
 
+            right: -px2rem(100);
 
+            background-position: top left;
 
+            background-image: url(../img/bg-title-cloud-right.png);
 
         }
 
     }
 
     .mod-primary {
 
-        height: px2rem(1300);
 
-        .btn-popup {
 
+        height: px2rem(1334);
 
+        overflow: visible;
 
+        &::after {
 
+            height: px2rem(50);
 
+            width: 100%;
 
+            display: block;
 
+            position: absolute;
 
+            bottom: 0;
 
+            left: 0;
 
+            background: linear-gradient(to bottom, transparent, #E0DDCD);
 
+            content: '';
 
+        }
 
+        .btn-popup-video {
 
             height: px2rem(78);
 
             width: px2rem(78);
 
             display: block;
 
@@ -189,25 +196,25 @@ body {
 
         .tools-wrap {
 
             width: 100%;
 
             position: absolute;
 
-            bottom: px2rem(60);
 
-            padding-bottom: px2rem(10);
 
-            background: linear-gradient(to bottom, transparent, rgba(#fff, 0.6) 80%, transparent 98%);
 
+            bottom: px2rem(55);
 
             .btns {
 
                 display: flex;
 
+                flex-direction: column;
 
+                align-items: center;
 
                 justify-content: center;
 
                 .btn {
 
-                    height: px2rem(84);
 
-                    width: px2rem(320);
 
+                    height: px2rem(107);
 
+                    width: px2rem(408);
 
                     display: block;
 
                     background-repeat: no-repeat;
 
                     background-position: top center;
 
                     background-size: 100% 100%;
 
                     &.btn-order {
 
-                        background-image: url(../img/btn-order.png);
 
+                        background-image: url(../img/mp/btn-order.png);
 
                     }
 
                     &.btn-follow {
 
-                        margin-left: px2rem(15);
 
-                        background-image: url(../img/btn-follow.png);
 
+                        margin-top: px2rem(29);
 
+                        background-image: url(../img/mp/btn-follow.png);
 
                     }
 
                 }
 
             }
 
@@ -215,17 +222,17 @@ body {
 
                 font-size: px2rem(26);
 
                 font-weight: bold;
 
                 color: #333;
 
-                line-height: 1.5;
 
+                line-height: px2rem(34);
 
                 text-align: center;
 
-                margin-top: px2rem(15);
 
+                margin: px2rem(32) 0 px2rem(11);
 
                 em {
 
                     color: #e21e1e;
 
                 }
 
             }
 
             .sub-text {
 
-                font-size: px2rem(20);
 
+                font-size: px2rem(22);
 
                 color: #000;
 
-                line-height: 1.5;
 
+                line-height: px2rem(30);
 
                 text-align: center;
 
             }
 
         }
 
@@ -234,15 +241,95 @@ body {
 
         .mod-inner {
 
             .sects-swiper {
 
                 overflow: hidden;
 
+                position: relative;
 
                 .swiper-wrapper {
 
                     .swiper-slide {
 
                         position: relative;
 
                         overflow: hidden;
 
+                        &.item2 {
 
+                            .adorn {
 
+                                height: px2rem(263);
 
+                                width: px2rem(120);
 
+                                bottom: 0;
 
+                                right: 0;
 
+                                background-image: url(../img/mp/adorn-sects2.png);
 
+                            }
 
+                        }
 
+                        &.item5 {
 
+                            .adorn {
 
+                                height: px2rem(222);
 
+                                width: px2rem(205);
 
+                                bottom: px2rem(69);
 
+                                right: 0;
 
+                                background-image: url(../img/mp/adorn-tree-small.png);
 
+                            }
 
+                        }
 
+                        @for $i from 1 through 5 {
 
+                            &.item#{$i} {
 
+                                .type .tab {
 
+                                    background-image: url(../img/type-sects#{$i}.png);
 
+                                }
 
+                            }
 
+                        }
 
                         .thumb {
 
                             width: 100%;
 
                             display: block;
 
                         }
 
+                        .adorn {
 
+                            display: block;
 
+                            position: absolute;
 
+                            z-index: 5;
 
+                            background-position: top left;
 
+                            background-repeat: no-repeat;
 
+                            background-size: 100% 100%;
 
+                        }
 
                         .type {
 
+                            .tab {
 
+                                height: px2rem(200);
 
+                                width: px2rem(81);
 
+                                overflow: hidden;
 
+                                position: absolute;
 
+                                z-index: 20;
 
+                                top: 0;
 
+                                left: 60%;
 
+                                background-repeat: no-repeat;
 
+                                background-position-x: left;
 
+                                background-size: 100% px2rem(400);
 
+                                &.tab-bg1 {
 
+                                    background-position-y: top;
 
+                                    span {
 
+                                        &.item1 {
 
+                                            top: px2rem(83);
 
+                                        }
 
+                                        &.item2 {
 
+                                            top: px2rem(29);
 
+                                        }
 
+                                    }
 
+                                }
 
+                                &.tab-bg2 {
 
+                                    background-position-y: bottom;
 
+                                    span {
 
+                                        &.item1 {
 
+                                            top: px2rem(29);
 
+                                        }
 
+                                        &.item2 {
 
+                                            top: px2rem(83);
 
+                                        }
 
+                                    }
 
+                                }
 
+                                span {
 
+                                    height: px2rem(117);
 
+                                    width: px2rem(35);
 
+                                    display: block;
 
+                                    position: absolute;
 
+                                    &.item1 {
 
+                                        left: 0;
 
+                                    }
 
+                                    &.item2 {
 
+                                        right: 0;
 
+                                    }
 
+                                }
 
+                            }
 
                             .context {
 
                                 width: px2rem(315);
 
                                 position: absolute;
 
@@ -261,42 +348,540 @@ body {
 
                         }
 
                     }
 
                 }
 
+                .sects-switch {
 
+                    height: px2rem(140);
 
+                    width: px2rem(69);
 
+                    position: absolute;
 
+                    z-index: 10;
 
+                    top: 45%;
 
+                    margin-top: -px2rem(70);
 
+                    background: top left no-repeat;
 
+                    background-size: 100% 100%;
 
+                    &:focus {
 
+                        outline: none;
 
+                    }
 
+                    &.btn-prev {
 
+                        left: 0;
 
+                        background-image: url(../img/btn-sects-prev.png);
 
+                    }
 
+                    &.btn-next {
 
+                        right: 0;
 
+                        background-image: url(../img/btn-sects-next.png);
 
+                    }
 
+                }
 
+                .sects-pagination {
 
+                    width: 100%;
 
+                    position: absolute;
 
+                    z-index: 10;
 
+                    bottom: px2rem(20);
 
+                    left: 0;
 
+                    font-size: 0;
 
+                    text-align: center;
 
+                    span {
 
+                        height: px2rem(88);
 
+                        width: px2rem(88);
 
+                        display: inline-block;
 
+                        vertical-align: top;
 
+                        margin: 0 px2rem(5);
 
+                        border-radius: 0;
 
+                        background-color: transparent;
 
+                        background-position-x: left;
 
+                        background-repeat: no-repeat;
 
+                        background-size: 100% px2rem(176);
 
+                        @include opacity(1);
 
+                        &:focus {
 
+                            outline: none;
 
+                        }
 
+                        @for $i from 1 through 5 {
 
+                            &.item#{$i} {
 
+                                background-image: url(../img/sects-dot#{$i}.png);
 
+                                &.is-active {
 
+                                    background-position-y: bottom;
 
+                                }
 
+                            }
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+            .sects-danmu {
 
+                height: px2rem(240);
 
+                width: 100%;
 
+                position: absolute;
 
+                z-index: 15;
 
+                bottom: px2rem(120);
 
+                left: 0;
 
+                overflow: hidden;
 
+                span {
 
+                    display: inline-block;
 
+                    line-height: 1.1;
 
+                    position: absolute;
 
+                    left: 101%;
 
+                    white-space: nowrap;
 
+                }
 
+            }
 
+            .sects-send {
 
+                background: #3E3D3D;
 
+                display: flex;
 
+                flex-wrap: wrap;
 
+                color: #fff;
 
+                padding: px2rem(15) px2rem(20);
 
+                .input-line {
 
+                    height: px2rem(48);
 
+                    width: 100%;
 
+                    display: flex;
 
+                    margin-top: px2rem(15);
 
+                    &:first-child {
 
+                        margin-top: 0;
 
+                    }
 
+                    .flex-auto {
 
+                        flex: 1;
 
+                    }
 
+                    .input-item {
 
+                        height: 100%;
 
+                        display: flex;
 
+                        align-items: center;
 
+                        margin-left: px2rem(15);
 
+                        &:first-child {
 
+                            margin-left: 0;
 
+                        }
 
+                        span {
 
+                            font-size: px2rem(22);
 
+                            margin-right: px2rem(10);
 
+                        }
 
+                        select, input {
 
+                            height: 100%;
 
+                            font-size: px2rem(18);
 
+                            padding: 0 px2rem(15);
 
+                            color: #333;
 
+                            box-sizing: border-box;
 
+                            border: 1px #D2C3A5 solid;
 
+                            &:focus {
 
+                                outline: none;
 
+                            }
 
+                        }
 
+                        input {
 
+                            &::placeholder {
 
+                                color: #333;
 
+                            }
 
+                        }
 
+                    }
 
+                    .btn-danmu {
 
+                        height: 100%;
 
+                        padding: 0 px2rem(15);
 
+                        background: #A99E82;
 
+                        border: 1px #D2C3A5 solid;
 
+                        margin-left: px2rem(15);
 
+                        font-size: px2rem(22);
 
+                        // font-weight: bold;
 
+                        color: #fff;
 
+                        display: flex;
 
+                        align-items: center;
 
+                        justify-content: center;
 
+                    }
 
+                }
 
+            }
 
+        }
 
+    }
 
+    .mod-special {
 
+        .mod-inner {
 
+            .swiper-wrap {
 
+                width: 100%;
 
+                position: relative;
 
+                padding-bottom: px2rem(85);
 
+                background: url(../img/mp/bg-special.jpg) bottom center no-repeat;
 
+                background-size: 100% auto;
 
+                &::before, &::after {
 
+                    display: block;
 
+                    position: absolute;
 
+                    z-index: 10;
 
+                    background: url(../img/adorn-tree-right.png) right top no-repeat;
 
+                    background-size: 100% 100%;
 
+                    content: '';
 
+                }
 
+                &::before {
 
+                    height: px2rem(137);
 
+                    width: px2rem(300);
 
+                    left: -px2rem(50);
 
+                    top: -px2rem(85);
 
+                    transform: rotateY(180deg) rotate(-20deg);
 
+                }
 
+                &::after {
 
+                    height: px2rem(109);
 
+                    width: px2rem(240);
 
+                    right: 0;
 
+                    bottom: px2rem(40);
 
+                }
 
+                .special-swiper {
 
+                    width: 100%;
 
+                    overflow: hidden;
 
+                    .swiper-wrapper {
 
+                        .swiper-slide {
 
+                            img {
 
+                                width: 100%;
 
+                                display: block;
 
+                            }
 
+                        }
 
+                    }
 
+                }
 
+                .special-pagination {
 
+                    height: px2rem(80);
 
+                    width: 100%;
 
+                    position: absolute;
 
+                    z-index: 15;
 
+                    bottom: 0;
 
+                    left: 0;
 
+                    padding: 0 px2rem(25);
 
+                    box-sizing: border-box;
 
+                    display: flex;
 
+                    align-items: center;
 
+                    justify-content: center;
 
+                    span {
 
+                        height: px2rem(40);
 
+                        width: auto;
 
+                        flex: 1;
 
+                        display: flex;
 
+                        align-items: center;
 
+                        // padding-left: px2rem(30);
 
+                        font-size: px2rem(20);
 
+                        color: #333;
 
+                        opacity: 1;
 
+                        border-radius: 0;
 
+                        margin-left: px2rem(5);
 
+                        background: #CFCAB7;
 
+                        position: relative;
 
+                        &:focus {
 
+                            outline: none;
 
+                        }
 
+                        &:first-child {
 
+                            margin-left: 0;
 
+                        }
 
+                        &.is-active {
 
+                            background: #F9F6E7;
 
+                        }
 
+                        i {
 
+                            height: px2rem(10);
 
+                            width: px2rem(10);
 
+                            display: block;
 
+                            background: url(../img/bg-special-dot.png) center no-repeat;
 
+                            background-size: 100% 100%;
 
+                            margin: 0 px2rem(8) 0 px2rem(10);
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+            .infos-wrap {
 
+                padding: px2rem(25) px2rem(25) 0;
 
+                position: relative;
 
+                &::before, &::after {
 
+                    height: px2rem(178);
 
+                    width: px2rem(360);
 
+                    display: block;
 
+                    position: absolute;
 
+                    top: 0;
 
+                    background-repeat: no-repeat;
 
+                    background-position-y: top;
 
+                    background-size: 100% 100%;
 
+                    content: '';
 
+                }
 
+                &::before {
 
+                    left: 0;
 
+                    background-position-x: left;
 
+                    background-image: url(../img/adorn-cloud1.png);
 
+                }
 
+                &::after {
 
+                    right: 0;
 
+                    background-position-x: left;
 
+                    background-image: url(../img/adorn-cloud2.png);
 
+                }
 
+                dl {
 
+                    position: relative;
 
+                    z-index: 2;
 
+                    dt {
 
+                        width: px2rem(350);
 
+                        float: left;
 
+                        margin-right: px2rem(15);
 
+                        img {
 
+                            width: 100%;
 
+                            display: block;
 
+                        }
 
+                    }
 
+                    dd {
 
+                        .title {
 
+                            font-size: px2rem(26);
 
+                            font-weight: bold;
 
+                            color: #696055;
 
+                            line-height: 1.1;
 
+                            margin-bottom: px2rem(18);
 
+                        }
 
+                        .text {
 
+                            font-size: px2rem(20);
 
+                            color: #736b61;
 
+                            text-align: justify;
 
+                            text-indent: 2em;
 
+                            margin-bottom: px2rem(12);
 
+                            &:last-child {
 
+                                margin-bottom: 0;
 
+                            }
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        }
 
+    }
 
+    .mod-video {
 
+        .mod-inner {
 
+            .context-wrap {
 
+                height: px2rem(446);
 
+                width: 100%;
 
+                overflow: hidden;
 
+                ul {
 
+                    height: 100%;
 
+                    width: 100%;
 
+                    li {
 
+                        height: 100%;
 
+                        width: 100%;
 
+                        background: #000;
 
+                        display: none;
 
+                        &:first-child {
 
+                            display: block;
 
+                        }
 
+                        .cover, .video {
 
+                            height: 100%;
 
+                            width: 100%;
 
+                            position: relative;
 
+                        }
 
+                        .cover {
 
+                            background: top center no-repeat;
 
+                            background-size: 100% 100%;
 
+                            .btn-play {
 
+                                height: px2rem(96);
 
+                                width: px2rem(96);
 
+                                display: block;
 
+                                background: url(../img/btn-play.png) center no-repeat;
 
+                                background-size: 100% 100%;
 
+                                position: absolute;
 
+                                top: 50%;
 
+                                left: 50%;
 
+                                transform: translate(-50%, -50%);
 
+                            }
 
+                        }
 
+                        .video {
 
+                            display: none;
 
+                            embed, video {
 
+                                height: 100% !important;
 
+                                width: 100%;
 
+                                display: block;
 
+                                background: #000;
 
+                            }
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+            .tab-wrap {
 
+                width: 100%;
 
+                margin-top: px2rem(15);
 
+                ul {
 
+                    display: flex;
 
+                    li {
 
+                        height: px2rem(135);
 
+                        flex: 1;
 
+                        background: #DFD9C9;
 
+                        border: 1px #B2A695 solid;
 
+                        box-sizing: border-box;
 
+                        margin-left: px2rem(15);
 
+                        &:first-child {
 
+                            margin-left: 0;
 
+                        }
 
+                        &.is-active {
 
+                            border-color: #C83333;
 
+                        }
 
+                        img {
 
+                            height: 100%;
 
+                            width: 100%;
 
+                            display: block;
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        }
 
+    }
 
+    .mod-preview {
 
+        .mod-inner {
 
+            .lists {
 
+                width: 100%;
 
+                ul {
 
+                    width: 100%;
 
+                    display: flex;
 
+                    flex-wrap: wrap;
 
+                    justify-content: space-between;
 
+                    li {
 
+                        width: 49%;
 
+                        margin-top: px2rem(15);
 
+                        &:nth-child(1), &:nth-child(2) {
 
+                            margin-top: 0;
 
+                        }
 
+                        img {
 
+                            width: 100%;
 
+                            display: block;
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+            .popop-preview {
 
+                .preview-swiper {
 
+                    width: 100%;
 
+                    position: absolute;
 
+                    top: 50%;
 
+                    left: 0;
 
+                    transform: translate(0, -50%);
 
+                    .swiper-wrapper {
 
+                        .swiper-slide {
 
+                            img {
 
+                                width: 100%;
 
+                                display: block;
 
+                            }
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        }
 
+    }
 
+    .mod-strategy {
 
+        .mod-inner {
 
+            position: relative;
 
+            z-index: 2;
 
+            &::before, &::after {
 
+                position: absolute;
 
+                z-index: -1;
 
+                display: block;
 
+                background-repeat: no-repeat;
 
+                background-size: 100% 100%;
 
+                content: '';
 
+            }
 
+            &::before {
 
+                height: px2rem(155);
 
+                width: px2rem(360);
 
+                background-position: bottom left;
 
+                background-image: url(../img/mp/adorn-cloud-many.png);
 
+                left: 0;
 
+                top: 42%;
 
+                opacity: 0.15;
 
+                transform: rotateY(180deg);
 
+            }
 
+            &::after {
 
+                height: px2rem(729);
 
+                width: 100%;
 
+                bottom: 0;
 
+                left: 0;
 
+                background-position: bottom left;
 
+                background-image: url(../img/mp/adorn-hill-hight-left.jpg);
 
+                opacity: 0.1;
 
+                transform: rotateY(180deg);
 
+            }
 
+            .img-lists {
 
+                ul {
 
+                    display: flex;
 
+                    flex-wrap: wrap;
 
+                    justify-content: space-between;
 
+                    li {
 
+                        width: 49%;
 
+                        position: relative;
 
+                        margin-top: px2rem(15);
 
+                        &:nth-child(1), &:nth-child(2) {
 
+                            margin-top: 0;
 
+                        }
 
+                        img {
 
+                            width: 100%;
 
+                            display: block;
 
+                        }
 
+                        .text {
 
+                            width: 100%;
 
+                            box-sizing: border-box;
 
+                            font-size: px2rem(20);
 
+                            color: #fff;
 
+                            line-height: px2rem(42);
 
+                            padding: 0 px2rem(12);
 
+                            background: rgba(#000, 0.8);
 
+                            position: absolute;
 
+                            bottom: 0;
 
+                            left: 0;
 
+                            @include ellipsis;
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+            .text-lists {
 
+                padding: px2rem(10) 0;
 
+                ul {
 
+                    li {
 
+                        height: px2rem(70);
 
+                        display: flex;
 
+                        align-items: center;
 
+                        &.hot {
 
+                            span {
 
+                                background: #D54445;
 
+                            }
 
+                        }
 
+                        span {
 
+                            height: px2rem(40);
 
+                            width: px2rem(40);
 
+                            display: flex;
 
+                            align-items: center;
 
+                            justify-content: center;
 
+                            font-size: px2rem(20);
 
+                            font-weight: bold;
 
+                            color: #fff;
 
+                            margin: 0 px2rem(15) 0 px2rem(20);
 
+                            background: #A29B8B;
 
+                        }
 
+                        a {
 
+                            flex: 1;
 
+                            font-size: px2rem(30);
 
+                            color: #333;
 
+                            @include ellipsis;
 
+                            &:hover {
 
+                                text-decoration: none;
 
+                            }
 
+                        }
 
+                    }
 
+                }
 
             }
 
         }
 
     }
 
 }
 
 
-//弹窗基础样式
 
-.ui-popup {
 
-    width: 100%;
 
-}
 
-.ui-dialog-grid {
 
-    width: 100%;
 
-}
 
-.account-login-pop {
 
-    width: 90%;
 
-}
 
+// 弹窗基础样式
 
 .ui-dialog {
 
-    width: 95%;
 
-    margin: 0 auto;
 
-    border-radius: 6px;
 
-    .ui-dialog-title {
 
+    &.popup-tips{
 
+        width: 100%;
 
+        margin: 0 auto;
 
+        border-radius: px2rem(6);
 
         font-family: "微软雅黑";
 
-        padding-bottom: 5px;
 
-        padding-top: 10px;
 
-        color: #777;
 
-        font-size: 14px;
 
-        text-indent: 0;
 
-    }
 
-    .ui-dialog-close {
 
-        background: 0;
 
-        color: #777;
 
-        text-indent: 0;
 
-        font-size: 20px;
 
-        top: 0;
 
-        right: 0;
 
-        &:hover {
 
-            color: #30a5ef;
 
+        .ui-dialog-header {
 
+            .ui-dialog-title {
 
+                font-size: px2rem(20);
 
+                color: #777;
 
+                text-indent: 0;
 
+                padding: px2rem(15) px2rem(20);
 
+            }
 
+            .ui-dialog-close {
 
+                height: px2rem(52);
 
+                width: px2rem(40);
 
+                font-size: px2rem(32);
 
+                color: #777;
 
+                line-height: px2rem(52);
 
+                text-indent: 0;
 
+                top: 0;
 
+                right: 0;
 
+                background: none;
 
+            }
 
+        }
 
+        .ui-dialog-body {
 
+            .ui-dialog-content {
 
+                font-size: px2rem(24);
 
+                line-height: 1.5;
 
+                text-align: center;
 
+            }
 
         }
 
     }
 
 }

+ 11 - 0
2019专题/1911笑傲江湖3专题/src/tpl/previewSwiper.tmpl
View File 

@@ -0,0 +1,11 @@
 
+<div class="popup-wrap popop-preview">
 
+    <div class="preview-swiper innerbox">
 
+        <ul class="swiper-wrapper">
 
+            <% for (var i = 0; i < data.length; i++) { %>
 
+            <li class="swiper-slide">
 
+                <img src="<%= data[i].src %>" alt="" />
 
+            </li>
 
+            <% } %>
 
+        </ul>
 
+    </div>
 
+</div>