笑傲江湖3专题

2019专题/1911笑傲江湖3专题/src/_index.html

@@ -23,14 +23,14 @@
                     <a href="javascript:;" target="_self" class="btn fl btn-order"></a>
                     <a href="javascript:;" target="_self" class="btn fr btn-follow"></a>
                 </div>
-                <p class="order-text">已有<em>215454</em>位少侠 成功预约游戏</p>
+                <p class="order-text">已有<em id="orderCount"></em>位少侠 成功预约游戏</p>
                 <p class="sub-text">快来一起随我们快意江湖吧！</p>
             </div>
             <div class="popup-wrap">
                 <span class="mask"></span>
                 <i class="close-popup">&times;</i>
                 <div class="innerbox">
-                    <embed id="8818379" name="8818379" src="http://assets.dwstatic.com/video/vpp.swf" wmode="transparent" allowfullscreen="true" quality="high" height="100%" width="100%" align="middle" allowscriptaccess="always" flashvars="uu=a04808d307&amp;vu=&amp;continous_play=0&amp;auto_play=1&amp;videoId=0&amp;vid=8818379&amp;width=640&amp;height=360&amp;channelId=cr&amp;sdk=&amp;no_ad=1" type="application/x-shockwave-flash" />
+                    <video src="https://media.wmupd.com/media/media/xxa_20190917gwvideo.mp4" preload controls />
                 </div>
             </div>
         </div>
@@ -113,6 +113,210 @@
                     <p class="sects-switch btn-next"></p>
                     <p class="sects-pagination"></p>
                 </div>
+                <div class="sects-danmu"></div>
+                <div class="sects-send">
+                    <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">
+                        <span>少侠高姓大名</span>
+                        <input type="text" placeholder="请输入名字" id="danmu_name" />
+                    </div>
+                    <div class="input-item">
+                        <span>少侠想大声喊出</span>
+                        <input type="text" placeholder="请输入内容" id="danmu_text" />
+                    </div>
+                    <p class="btn-danmu">发送</p>
+                </div>
+            </div>
+        </div>
+        <div class="mod-part mod-special">
+            <div class="mod-title title2">
+                <p class="text"></p>
+                <span class="left"></span>
+                <span class="right"></span>
+            </div>
+            <div class="mod-inner">
+                <div class="swiper-wrap">
+                    <span class="adorn-tree left"></span>
+                    <span class="adorn-tree right"></span>
+                    <div class="special-swiper">
+                        <ul class="swiper-wrapper">
+                            <li class="swiper-slide" data-text="自定心法">
+                                <img src="/src/img/pc/img-special1.jpg" alt="" class="thumb" />
+                                <img src="/src/img/pc/text-special1.png" alt="" class="text" />
+                            </li>
+                            <li class="swiper-slide" data-text="清韵国风">
+                                <img src="/src/img/pc/img-special2.jpg" alt="" class="thumb" />
+                                <img src="/src/img/pc/text-special2.png" alt="" class="text" />
+                            </li>
+                            <li class="swiper-slide" data-text="重现经典">
+                                <img src="/src/img/pc/img-special3.jpg" alt="" class="thumb" />
+                                <img src="/src/img/pc/text-special3.png" alt="" class="text" />
+                            </li>
+                            <li class="swiper-slide" data-text="外观染色">
+                                <img src="/src/img/pc/img-special4.jpg" alt="" class="thumb" />
+                                <img src="/src/img/pc/text-special4.png" alt="" class="text" />
+                            </li>
+                            <li class="swiper-slide" data-text="琴箫和鸣">
+                                <img src="/src/img/pc/img-special5.jpg" alt="" class="thumb" />
+                                <img src="/src/img/pc/text-special5.png" alt="" class="text" />
+                            </li>
+                        </ul>
+                        <p class="special-pagination"></p>
+                    </div>
+                </div>
+                <div class="infos-wrap">
+                    <div class="adorn-cloud">
+                        <span class="left cloud1"></span>
+                        <span class="right cloud2"></span>
+                    </div>
+                    <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>
+                <span class="left"></span>
+                <span class="right"></span>
+            </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="adorn-cloud">
+                <span class="left cloud1"></span>
+                <span class="right cloud2"></span>
+            </div>
+            <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>
     </div>
@@ -121,6 +325,23 @@
     <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');
+        var danmuColor = [
+            '#bd3ec2',
+            '#c23e73',
+            '#f161b9',
+        ];
+        var danmuList = [
+            '弹幕000000',
+            '弹幕111111',
+            '弹幕222222',
+            '弹幕333333',
+            '弹幕444444',
+            '弹幕555555',
+            '弹幕666666',
+            '弹幕777777',
+            '弹幕888888',
+            '弹幕999999',
+        ];
     </script>
 </body>
 </html>

2019专题/1911笑傲江湖3专题/src/_wap.html

@@ -0,0 +1,128 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,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">
+    <meta name="browsermode" content="application">
+    <meta name="x5-page-mode" content="app">
+    <title>多玩游戏网 | 多玩游戏 多交朋友</title>
+    <link href="sass/wap.scss" rel="stylesheet">
+    <script src="//www.duowan.com/assets/js/jquery.js"></script><!--ignore-->
+    <script src="//pub.dwstatic.com/common/js/dwudbproxy.js "></script><!--ignore-->
+    <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>
+    <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>
+                    <a href="javascript:;" target="_self" class="btn fr btn-follow"></a>
+                </div>
+                <p class="order-text">已有<em id="orderCount"></em>位少侠 成功预约游戏</p>
+                <p class="sub-text">快来一起随我们快意江湖吧！</p>
+            </div>
+            <div class="popup-wrap">
+                <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>
+        <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">
+                    <ul class="swiper-wrapper">
+                        <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">
+                                    <span class="item1"></span>
+                                    <span class="item2"></span>
+                                </div>
+                                <div class="context" data-context="sects1type">
+                                    <img src="/src/img/mp/img-role1-type1.png" alt="" />
+                                    <img src="/src/img/mp/img-role1-type2.png" alt="" />
+                                </div>
+                            </div>
+                        </li>
+                        <li class="swiper-slide item2">
+                            <img src="/src/img/mp/bg-sects2.jpg" alt="" class="thumb" />
+                            <div class="type">
+                                <div class="tab tab-bg1" data-tabchange="sects1type">
+                                    <span class="item1"></span>
+                                    <span class="item2"></span>
+                                </div>
+                                <div class="context" data-context="sects1type">
+                                    <img src="/src/img/mp/img-role2-type1.png" alt="" />
+                                    <img src="/src/img/mp/img-role2-type2.png" alt="" />
+                                </div>
+                            </div>
+                        </li>
+                        <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">
+                                    <span class="item1"></span>
+                                    <span class="item2"></span>
+                                </div>
+                                <div class="context" data-context="sects1type">
+                                    <img src="/src/img/mp/img-role3-type1.png" alt="" />
+                                    <img src="/src/img/mp/img-role3-type2.png" alt="" />
+                                </div>
+                            </div>
+                        </li>
+                        <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">
+                                    <span class="item1"></span>
+                                    <span class="item2"></span>
+                                </div>
+                                <div class="context" data-context="sects1type">
+                                    <img src="/src/img/mp/img-role4-type1.png" alt="" />
+                                    <img src="/src/img/mp/img-role4-type2.png" alt="" />
+                                </div>
+                            </div>
+                        </li>
+                        <li class="swiper-slide item5">
+                            <img src="/src/img/mp/bg-sects5.jpg" alt="" class="thumb" />
+                            <div class="type">
+                                <div class="tab tab-bg1" data-tabchange="sects1type">
+                                    <span class="item1"></span>
+                                    <span class="item2"></span>
+                                </div>
+                                <div class="context" data-context="sects1type">
+                                    <img src="/src/img/mp/img-role5-type1.png" alt="" />
+                                    <img src="/src/img/mp/img-role5-type2.png" alt="" />
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <p class="sects-switch btn-prev"></p>
+                    <p class="sects-switch btn-next"></p>
+                    <p class="sects-pagination"></p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <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');
+    </script>
+</body>
+
+</html>

2019专题/1911笑傲江湖3专题/src/modules/page/index.js

@@ -1,7 +1,10 @@
 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) {
@@ -25,9 +28,12 @@ var M = {
 
 var V = {
     init: function () {
+        this.playVideo();
         this.popupVideo();
         this.tabChange();
         this.renderSwiper();
+        this.orderCount();
+        this.danmu();
 
         // 预订游戏
         $('body').on('click', '.btn-follow', function () {
@@ -54,27 +60,69 @@ var V = {
                 _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');
+                $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: 'http://ka.duowan.com/game/ZtBook',
+            url: domain + '/game/ZtBook',
             dataType: 'jsonp',
             data: { lottery_id: parseInt(gameID) },
             jsonp: 'callback',
@@ -97,6 +145,7 @@ var V = {
         });
     },
     renderSwiper: function () {
+        // 门派介绍 swiper
         new Swiper('.sects-swiper', {
             loop: true,
             observer: true,
@@ -120,9 +169,97 @@ var V = {
             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);
+        })
     }
 }
 

2019专题/1911笑傲江湖3专题/src/sass/global.scss

@@ -79,8 +79,9 @@ body {
     position: relative;
     font-family: "微软雅黑";
     background: #DEDAC9;
+    overflow-x: hidden;
     .mod-part {
-        overflow: hidden;
+        // overflow: hidden;
         position: relative;
         background: top center no-repeat;
         .popup-wrap {
@@ -131,13 +132,38 @@ body {
                 margin: -255px 0 0 -470px;
                 background: #fff;
                 overflow: hidden;
-                embed {
+                embed, video {
                     height: 100% !important;
                     width: 100%;
                     display: block;
                 }
             }
         }
+        .adorn-cloud {
+            position: relative;
+            span {
+                height: 357px;
+                width: 724px;
+                display: block;
+                position: absolute;
+                top: 0;
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                @for $i from 1 through 4 {
+                    &.cloud#{$i} {
+                        background-image: url(../img/adorn-cloud#{$i}.png);
+                    }
+                }
+                &.left {
+                    left: 0;
+                    background-position: top left;
+                }
+                &.right {
+                    right: 0;
+                    background-position: top right;
+                }
+            }
+        }
     }
     .mod-title {
         position: relative;
@@ -147,17 +173,16 @@ body {
             background: top center no-repeat;
         }
         span {
+            width: 717px;
             display: block;
             position: absolute;
             top: 0;
             bottom: 0;
             &.left {
-                width: 717px;
                 left: 0;
                 background: url(../img/bg-title-cloud-left.png) top left no-repeat;
             }
             &.right {
-                width: 710px;
                 right: 0;
                 background: url(../img/bg-title-cloud-right.png) top right no-repeat;
             }
@@ -170,6 +195,7 @@ body {
     }
     .mod-inner {
         margin: 0 auto;
+        position: relative;
     }
     .mod-primary {
         height: 1026px;
@@ -203,6 +229,9 @@ body {
                     display: block;
                     background: top left no-repeat;
                     transition: transform 0.3s;
+                    &:focus {
+                        outline: none;
+                    }
                     &:hover {
                         transform: translate(0, -9px);
                     }
@@ -235,6 +264,7 @@ body {
     }
     .mod-sects {
         .mod-inner {
+            padding-bottom: 141px;
             .sects-swiper {
                 height: 640px;
                 position: relative;
@@ -371,7 +401,7 @@ body {
                         }
                         @for $i from 1 through 5 {
                             &.item#{$i} {
-                                background: url(../img/pc/sects-dot#{$i}.png) top left no-repeat;
+                                background: url(../img/sects-dot#{$i}.png) top left no-repeat;
                                 &.is-active, &:hover {
                                     background-position-y: bottom;
                                 }
@@ -380,6 +410,442 @@ body {
                     }
                 }
             }
+            .sects-danmu {
+                height: 160px;
+                width: 490px;
+                position: absolute;
+                z-index: 15;
+                top: 350px;
+                right: 50%;
+                margin-right: -530px;
+                overflow: hidden;
+                span {
+                    display: inline-block;
+                    line-height: 1.1;
+                    position: absolute;
+                    left: 102%;
+                    white-space: nowrap;
+                }
+            }
+            .sects-send {
+                height: 133px;
+                width: 100%;
+                padding-top: 96px;
+                position: absolute;
+                z-index: 10;
+                bottom: -42px;
+                left: 0;
+                background: url(../img/pc/bg-send-danmu.png) top center no-repeat;
+                font-size: 0;
+                text-align: center;
+                .input-item {
+                    display: inline-block;
+                    vertical-align: top;
+                    margin-left: 32px;
+                    span, select, input {
+                        display: inline-block;
+                        vertical-align: top;
+                    }
+                    span {
+                        font-size: 24px;
+                        color: #fff;
+                        line-height: 35px;
+                        margin-right: 18px;
+                    }
+                    select, input {
+                        height: 33px;
+                        font-size: 16px;
+                        color: #fff;
+                        line-height: 33px;
+                        border: 1px #000 solid;
+                        background: #505050;
+                        padding: 0 10px;
+                        margin: 0;
+                        &:focus {
+                            outline: none;
+                        }
+                    }
+                    input {
+                        &::placeholder {
+                            color: #fff;
+                        }
+                    }
+                }
+                .btn-danmu {
+                    height: 33px;
+                    width: 57px;
+                    background: #A99E82;
+                    border: 1px #D2C3A5 solid;
+                    display: inline-block;
+                    vertical-align: top;
+                    font-size: 16px;
+                    color: #fff;
+                    line-height: 33px;
+                    text-align: center;
+                    margin-left: 6px;
+                    transition: filter 0.3s;
+                    cursor: pointer;
+                    &:hover {
+                        filter: brightness(0.9);
+                    }
+                }
+            }
+        }
+    }
+    .mod-special {
+        .swiper-wrap {
+            height: 642px;
+            position: relative;
+            background: url(../img/pc/bg-special.jpg) top center no-repeat;
+            .adorn-tree {
+                position: absolute;
+                z-index: 5;
+                display: block;
+                &.left {
+                    height: 295px;
+                    width: 582px;
+                    left: 0;
+                    bottom: -1px;
+                    background: url(../img/adorn-tree-left.png) left bottom no-repeat;
+                }
+                &.right {
+                    height: 197px;
+                    width: 432px;
+                    right: 0;
+                    top: 205px;
+                    background: url(../img/adorn-tree-right.png) right top no-repeat;
+                }
+            }
+            .special-swiper {
+                height: 519px;
+                width: 1279px;
+                padding: 39px 0;
+                position: absolute;
+                top: 18px;
+                left: 50%;
+                margin-left: -630px;
+                overflow: hidden;
+                .swiper-wrapper {
+                    height: 100%;
+                    .swiper-slide {
+                        height: 100%;
+                        width: 1279px;
+                        overflow: hidden;
+                        img {
+                            display: block;
+                            &.thumb {
+                                height: 100%;
+                                width: 100%;
+                            }
+                            &.text {
+                                position: absolute;
+                                top: -39px;
+                                left: 26px;
+                            }
+                        }
+                    }
+                }
+                .special-pagination {
+                    width: auto;
+                    font-size: 0;
+                    position: absolute;
+                    z-index: 10;
+                    top: 64px;
+                    right: 33px;
+                    text-align: right;
+                    span {
+                        height: auto;
+                        width: 22px;
+                        display: inline-block;
+                        vertical-align: top;
+                        font-size: 20px;
+                        color: #5E5A51;
+                        line-height: 22px;
+                        text-align: center;
+                        background: #CFCAB7;
+                        margin-left: 8px;
+                        border: 1px #4F4F4f solid;
+                        border-radius: 1px;
+                        padding: 30px 5px;
+                        position: relative;
+                        @include opacity(1);
+                        &:focus {
+                            outline: none;
+                        }
+                        &.is-active, &:hover {
+                            background: #F9F6E7;
+                        }
+                        i {
+                            height: 10px;
+                            width: 10px;
+                            display: block;
+                            position: absolute;
+                            top: 15px;
+                            left: 50%;
+                            margin-left: -5px;
+                            background: url(../img/bg-special-dot.png?__sprite) top left no-repeat;
+                        }
+                    }
+                }
+            }
+        }
+        .infos-wrap {
+            overflow: hidden;
+            padding-bottom: 74px;
+            dl {
+                height: 270px;
+                width: 1300px;
+                margin: 88px auto 0;
+                overflow: hidden;
+                position: relative;
+                z-index: 2;
+                dt {
+                    height: 268px;
+                    width: 428px;
+                    float: left;
+                    margin-right: 22px;
+                    border: 1px #B2A695 solid;
+                    img {
+                        height: 100%;
+                        width: 100%;
+                        display: block;
+                    }
+                }
+                dd {
+                    height: 100%;
+                    .title {
+                        font-size: 24px;
+                        font-weight: bold;
+                        color: #696055;
+                        line-height: 35px;
+                        margin-bottom: 9px;
+                    }
+                    .text {
+                        font-size: 14px;
+                        color: #736b61;
+                        line-height: 24px;
+                        text-indent: 2.5em;
+                        margin-bottom: 14px;
+                    }
+                }
+            }
+        }
+    }
+    .mod-video {
+        height: 850px;
+        background: url(../img/pc/bg-video.jpg) bottom center no-repeat;
+        .mod-title {
+            padding: 0;
+        }
+        .mod-inner {
+            width: 1300px;
+            margin-top: 91px;
+            .context-wrap {
+                height: 568px;
+                width: 955px;
+                float: left;
+                overflow: hidden;
+                border: 3px #B2A695 solid;
+                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;
+                            .btn-play {
+                                height: 110px;
+                                width: 110px;
+                                display: block;
+                                background: url(../img/btn-play.png?__sprite) top left no-repeat;
+                                position: absolute;
+                                top: 50%;
+                                left: 50%;
+                                margin: -55px 0 0 -55px;
+                                transition: transform 0.3s;
+                                cursor: pointer;
+                                &:hover {
+                                    transform: rotate(180deg);
+                                }
+                            }
+                        }
+                        .video {
+                            display: none;
+                            embed, video {
+                                height: 100% !important;
+                                width: 100%;
+                                display: block;
+                                background: #000;
+                            }
+                        }
+                    }
+                }
+            }
+            .tab-wrap {
+                width: 318px;
+                float: right;
+                ul {
+                    li {
+                        height: 178px;
+                        background: #DFD9C9;
+                        border: 1px #B2A695 solid;
+                        margin-bottom: 17px;
+                        cursor: pointer;
+                        &.is-active, &:hover {
+                            border-color: #C83333;
+                        }
+                        img {
+                            height: 100%;
+                            width: 100%;
+                            display: block;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .mod-preview {
+        .mod-inner {
+            height: 613px;
+            padding-top: 112px;
+            background: url(../img/pc/bg-preview.jpg) top center no-repeat;
+            .lists {
+                width: 1300px;
+                margin: 0 auto;
+                ul {
+                    width: 1350px;
+                    li {
+                        height: 235px;
+                        width: 414px;
+                        overflow: hidden;
+                        background: #DEDAC9;
+                        border: 1px #B2A695 solid;
+                        float: left;
+                        margin: 0 29px 28px 0;
+                        &:hover {
+                            img {
+                                transform: scale(1.1);
+                            }
+                        }
+                        img {
+                            height: 100%;
+                            width: 100%;
+                            display: block;
+                            transition: transform 0.3s;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .mod-strategy {
+        height: 670px;
+        background: url(../img/pc/bg-strategy.jpg) bottom center no-repeat;
+        .mod-inner {
+            width: 1300px;
+            margin-top: 54px;
+            .img-lists, .text-lists {
+                position: relative;
+                z-index: 2;
+            }
+            .img-lists {
+                width: 890px;
+                float: left;
+                ul {
+                    width: 920px;
+                    li {
+                        height: 150px;
+                        width: 278px;
+                        border: 1px #B2A695 solid;
+                        float: left;
+                        margin: 0 25px 38px 0;
+                        background: #DEDAC9;
+                        position: relative;
+                        transition: transform 0.3s;
+                        overflow: hidden;
+                        &:hover {
+                            transform: translate(0, -5px);
+                        }
+                        a {
+                            &:hover {
+                                text-decoration: none;
+                            }
+                        }
+                        img {
+                            height: 100%;
+                            width: 100%;
+                            display: block;
+                        }
+                        .text {
+                            height: 30px;
+                            width: 93%;
+                            padding: 0 3.5%;
+                            background: #000;
+                            background: rgba(#000, 0.6);
+                            position: absolute;
+                            z-index: 2;
+                            bottom: 0;
+                            left: 0;
+                            font-size: 14px;
+                            color: #fff;
+                            line-height: 30px;
+                            @include ellipsis;
+                        }
+                    }
+                }
+            }
+            .text-lists {
+                width: 374px;
+                float: left;
+                margin-left: 36px;
+                ul {
+                    li {
+                        overflow: hidden;
+                        margin-bottom: 18px;
+                        &.hot {
+                            span {
+                                background: #D54445;
+                            }
+                        }
+                        span {
+                            height: 18px;
+                            width: 18px;
+                            background: #A29B8B;
+                            float: left;
+                            display: block;
+                            font-size: 14px;
+                            font-style: normal;
+                            color: #fff;
+                            line-height: 18px;
+                            text-align: center;
+                            margin-right: 14px;
+                        }
+                        a {
+                            width: 342px;
+                            display: block;
+                            float: left;
+                            font-size: 14px;
+                            color: #736b61;
+                            line-height: 18px;
+                            @include ellipsis;
+                            &:hover {
+                                color: #D54445;
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
 }

2019专题/1911笑傲江湖3专题/src/sass/swiper.css

@@ -219,13 +219,13 @@
   opacity: 0;
 }
 /* Common Styles */
-.swiper-pagination-fraction,
+/* .swiper-pagination-fraction,
 .swiper-pagination-custom,
 .swiper-container-horizontal > .swiper-pagination-bullets {
   bottom: 10px;
   left: 0;
   width: 100%;
-}
+} */
 /* Bullets */
 .swiper-pagination-bullets-dynamic {
   overflow: hidden;
@@ -317,9 +317,9 @@ button.swiper-pagination-bullet {
   transition: 200ms transform, 200ms top;
   transition: 200ms transform, 200ms top, 200ms -webkit-transform;
 }
-.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
+/* .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
   margin: 0 4px;
-}
+} */
 .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
   left: 50%;
   -webkit-transform: translateX(-50%);

2019专题/1911笑傲江湖3专题/src/sass/wap.scss

@@ -0,0 +1,451 @@
+@charset "UTF-8";
+$yahei: "Microsoft YaHei",
+SimHei,
+sans-serif;
+$maincolor: #e94646;
+$titleFont: PingFang sc,
+"Helvetica Neue",
+Helvetica,
+Tahoma,
+Arial,
+"Liberation Sans",
+"Hiragino Sans GB",
+"Source Han Sans CN",
+"Source Han Sans SC",
+"Microsoft YaHei",
+"Wenquanyi Micro Hei",
+"WenQuanYi Zen Hei",
+"ST Heiti",
+SimHei,
+"WenQuanYi Zen Hei Sharp",
+sans-serif;
+@import "lego/lego";
+@import "base/mixins";
+@import "base/mMixins";
+@import "base/ui-dialog";
+@import "page/bindWx";
+@import "./swiper.css";
+$yellow: #CEBE95;
+$yellow-lighter: #CAB98D;
+html {
+    font-size: 12px;
+    height: 100%; // overflow-y: scroll;
+    font: 12px/1.5 PingFang sc, "Helvetica Neue", Helvetica, Tahoma, Arial, SimSun, TW-Sung, "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", serif; // font-family: $yahei;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+}
+
+body {
+    min-width: 320px;
+    max-width: 750;
+    a {
+        text-decoration: none;
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+    p,
+    a,
+    span,
+    em,
+    i,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+    }
+}
+
+.hide {
+    display: none;
+}
+
+.clearfix{
+    @include clearfix();
+}
+
+.page-wap {
+    position: relative;
+    font-family: "微软雅黑";
+    background: #E0DDCD url(../img/mp/bg-primary.jpg) top center no-repeat;
+    background-size: 100% auto;
+    a {
+        &:focus {
+            outline: none;
+        }
+    }
+    .mod-part {
+        position: relative;
+        overflow: hidden;
+        .popup-wrap {
+            display: none;
+            height: 100%;
+            width: 100%;
+            position: fixed;
+            z-index: 99;
+            top: 0;
+            left: 0;
+            .mask {
+                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);
+                }
+            }
+            .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 {
+                    height: 100% !important;
+                    width: 100%;
+                    display: block;
+                }
+            }
+        }
+    }
+    .mod-title {
+        position: relative;
+        padding: px2rem(65) 0 px2rem(20);
+        p {
+            height: px2rem(85);
+            background: top center no-repeat;
+            background-size: auto 100%;
+            position: relative;
+            z-index: 2;
+        }
+        span {
+            width: px2rem(600);
+            display: block;
+            position: absolute;
+            top: 0;
+            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);
+            }
+        }
+        @for $i from 1 through 5 {
+            &.title#{$i} p {
+                background-image: url(../img/bg-title#{$i}.png);
+            }
+        }
+    }
+    .mod-primary {
+        height: px2rem(1300);
+        .btn-popup {
+            height: px2rem(78);
+            width: px2rem(78);
+            display: block;
+            position: absolute;
+            top: px2rem(420);
+            left: 50%;
+            background: url(../img/btn-primary-play.png) left top no-repeat;
+            background-size: 100% 100%;
+        }
+        .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%);
+            .btns {
+                display: flex;
+                justify-content: center;
+                .btn {
+                    height: px2rem(84);
+                    width: px2rem(320);
+                    display: block;
+                    background-repeat: no-repeat;
+                    background-position: top center;
+                    background-size: 100% 100%;
+                    &.btn-order {
+                        background-image: url(../img/btn-order.png);
+                    }
+                    &.btn-follow {
+                        margin-left: px2rem(15);
+                        background-image: url(../img/btn-follow.png);
+                    }
+                }
+            }
+            .order-text {
+                font-size: px2rem(26);
+                font-weight: bold;
+                color: #333;
+                line-height: 1.5;
+                text-align: center;
+                margin-top: px2rem(15);
+                em {
+                    color: #e21e1e;
+                }
+            }
+            .sub-text {
+                font-size: px2rem(20);
+                color: #000;
+                line-height: 1.5;
+                text-align: center;
+            }
+        }
+    }
+    .mod-sects {
+        .mod-inner {
+            .sects-swiper {
+                overflow: hidden;
+                .swiper-wrapper {
+                    .swiper-slide {
+                        position: relative;
+                        overflow: hidden;
+                        .thumb {
+                            width: 100%;
+                            display: block;
+                        }
+                        .type {
+                            .context {
+                                width: px2rem(315);
+                                position: absolute;
+                                z-index: 2;
+                                bottom: 0;
+                                right: 50%;
+                                margin-right: -px2rem(375);
+                                img {
+                                    width: 100%;
+                                    display: none;
+                                    &:first-child {
+                                        display: block;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+//弹窗基础样式
+.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 {
+        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;
+        }
+    }
+}
+//验证码样式
+.dialog-code {
+    font-size: 14px;
+    .code-wrap {
+        @include clearfix;
+        height: 65px;
+        padding-bottom: 15px;
+        .code-img {
+            width: 205px;
+            height: 100%;
+            float: left;
+            text-align: center;
+            img {
+                vertical-align: middle;
+            }
+        }
+        .code-again {
+            float: left;
+            line-height: 24px;
+            color: #333;
+            margin-top: 5px;
+            .change-codeimg {
+                cursor: pointer;
+                color: #30a5ef;
+                &:hover {
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+    .input-line {
+        color: #777;
+        line-height: 36px;
+        input {
+            border: 1px solid #E3E3E3;
+            width: 163px;
+            height: 36px;
+            line-height: 36px;
+            padding-left: 10px;
+        }
+    }
+    .btn-line {
+        text-align: center;
+        margin-top: 20px;
+        span {
+            @include inline-block; //width: 130px;
+            width: 271px;
+            height: 38px;
+            line-height: 38px;
+            text-align: center;
+            background: #30a5ef;
+            color: #fff;
+            border-radius: 4px;
+            cursor: pointer;
+            &:hover {
+                background: #1386cf;
+            }
+        }
+    }
+}
+
+.question-tips-dialog {
+    display: table;
+    min-width: 337px;
+    height: 110px;
+    text-align: center;
+    .text-wrap {
+        p {
+            font-size: 16px;
+            line-height: 32px;
+        }
+        span {
+            color: $maincolor;
+        }
+    }
+    .btn-wrap {
+        margin-top: 30px;
+    }
+    .btn {
+        display: inline-block;
+        line-height: 36px;
+        height: 36px;
+        margin: 0 6px;
+        cursor: pointer;
+        border-radius: 3px;
+        font-size: 16px;
+        width: 100px;
+    }
+    .btn-cancel {
+        color: #333;
+        background-color: #f9f9f9;
+        border: 1px solid #e3e3e3;
+        &:hover {
+            background-color: #fafafa;
+        }
+    }
+    .btn-submit {
+        background: #30a5ef;
+        color: #fff;
+        &:hover {
+            background-color: #55b7f5;
+        }
+    }
+}
+
+/*抽奖弹窗*/
+.ui-dialog .ui-dialog-close {
+    font-size: 30px;
+}
+
+.lottery-tip-wrap {
+    // width: 400px;
+    padding-bottom: 35px;
+    text-align: center;
+    .tip-title {
+        font-size: 20px;
+        font-weight: bold;
+        line-height: 2;
+        em {
+            color: #ea1003;
+        }
+    }
+    a {
+        font-size: 14px;
+        color: #0075a9;
+        line-height: 40px;
+    }
+    p {
+        font-size: 16px;
+        color: #333;
+        line-height: 40px;
+    }
+    .lottery-tips {
+        height: 35px;
+        margin-top: 15px;
+        font-size: 0;
+        .comfirm-btn {
+            @include reset;
+            @include inline-block;
+            line-height: 35px;
+            background-color: #ea1003;
+            padding: 0 40px;
+            font-size: 14px;
+            color: #fff;
+            border: none;
+            outline: none;
+        }
+    }
+}