微剧院官网，特权各专题修改公众号模板

2018专题/GMGC游戏展专题/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/LOL赛事竞猜专题通用/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/LPL夏季联赛竞猜多活动/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/LPL赛事竞猜通用模块/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/MSI赛事竞猜/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/MSI赛事竞猜淘汰赛/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/MSI赛事竞猜顶部活动切换/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/冒险岛专题/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/堡垒之夜专题/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/天龙八部4月专题/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/微剧院官网/src/_index.html

@@ -38,104 +38,220 @@
             <div class="primary-bg"></div>
         </div>
         <div class="primary-main">
-            <h1>
-                <img src="/src/img/logo.png" alt="">微剧院</h1>
-            <p>有趣，有料，5分钟看剧平台
-                <br>从此看片告别枯燥、漫长!</p>
+            <h1><img src="/src/img/logo.png" alt="">微剧院</h1>
+            <p>有趣，有料，5分钟看剧平台<br>从此看片告别枯燥、漫长!</p>
             <div class="btns-wrap clearfix">
                 <a class="btn btn-ios fl" href="https://itunes.apple.com/cn/app/%E5%BE%AE%E5%89%A7%E9%99%A2-5%E5%88%86%E9%92%9F%E7%9C%8B%E7%89%87/id1268549279?l=zh&ls=1&mt=8"
                     target="_blank">iphone版</a>
                 <a class="btn btn-android fr" href="http://www.hiyd.com/static/apkDownload?appid=13">Android版</a>
             </div>
         </div>
+        <i class="icon-pull"></i>
     </div>
-    <div class="dw-mod-recommend">
-        <div class="inner clearfix">
-            <div class="recommend-tv fl">
-                <h2 class="title title-tv">电视剧/番剧连载</h2>
-                <div class="clearfix">
-                    <ul class="list-video ext-list fl">
-                        <li data-url="http://dw-bw6.dwstatic.com/569cedb6ee7f63e86937dd8b67e1f29c/5afe7c5d/79/2/1731/8459433-99-1501744074.mp4" data-poster="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/15/0756796.jpeg">
-                            <div class="item-video">
-                                <video id="mainVideo" src="http://dw-bw6.dwstatic.com/569cedb6ee7f63e86937dd8b67e1f29c/5afe7c5d/79/2/1731/8459433-99-1501744074.mp4"
-                                    loop="" autoplay="" muted="" poster="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/15/0756796.jpeg"></video>
-                                <img src="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/10/3211675.jpeg" alt="">
-                            </div>
-                            <span class="item-tag item-tag2">完</span>
-                            <div class="item-mask">
-                                <p>
-                                    <span class="item-title">《美国众神 第一季》
-                                        <i class="item-title-tag item-title-tag2">完</i>
-                                    </span>
-                                    <span class="item-desc">
-                                        《美国众神》主要讲述了新神和旧神之间一场正在酝酿的战争：神话中传统的神开始逐渐失去了自己的信徒，转而去信仰一些新崛起的新神，新神反映了当前社会对金钱、科技、现代媒体、名人名流和药物毒品的贪恋。剧中主要描写Mr. Wednesday（Ian McShane饰），一个狡猾而魅力无穷的骗子，充满了邪恶的智慧、令人好奇的魔法以及宏伟的抱负。他雇佣有诈骗前科的Shadow
-                                        Moon（Ricky Whittle饰）作为贴身保镖伴游美国，用他个人魅力到处招兵买马为最终的新旧神之间的战争做准备。
-                                    </span>
-                                </p>
-                            </div>
-                        </li>
-                    </ul>
-                    <ul class="list-video fr">
-                        <li data-url="http://dw-bw6.dwstatic.com/4161ebaa0ad7d02743f9bb34305ebe8d/5afe7c5d/81/5/1731/8457033-99-1501727531.mp4">
-                            <div class="item-video">
-                                <img src="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/10/3211675.jpeg" alt="行尸走肉 第三季">
-                            </div>
-                            <span class="item-tag item-tag1">
-                                更 </span>
-                            <div class="item-mask">
-                                <p title="时间流逝着，逃亡与抗争的旅程依旧漫漫看不到尽头，好在瑞克（安德鲁·林肯 Andrew Lincoln 饰）一行人的运气还不算太坏，偶然中，他们找到了最理想的庇护所——一座废弃已久的监狱，在这里，新的生活即将展开。 <br> 　　另一边，出走的安德里亚（劳瑞·侯登 Laurie Holden 饰）与“刀女”米琼恩（达娜·贾克赛·古瑞拉 Danai Jekesai Gurira 饰）亦找到了一处由“总督”（大卫·莫瑞瑟 David Morrissey 饰）所统治的“世外桃源”，安德里亚十分喜欢这里貌似平静快乐的生活，但显然米琼恩并不这么觉得，随着时间的推移，一个惊人而恐怖的秘密渐渐浮出了水面。瑞克和“总督”，当这两个原则和理念完全相悖的“领导”相遇之时，战争爆发了。">
-                                    <span class="item-title">《行尸走肉 第三季》
-                                        <i class="item-title-tag item-title-tag1"> 更 </i>
-                                    </span>
-                                    <span class="item-desc">时间流逝着，逃亡与抗争的旅程依旧漫漫看不到尽头，好在瑞克（安德鲁·林肯 Andrew Lincoln 饰）一行人的运气还不算太坏，偶然中，他们找到了最理想的庇护所——一座废弃已久的监狱，在这里，新的生活即将展开。
-                                        <br> 　　另一边，出走的安德里亚（劳瑞·侯登 Laurie Holden 饰）与“刀女”米琼恩（达娜·贾克赛·古瑞拉 Danai Jekesai Gurira 饰）亦找到了一处由“总督”（大卫·莫瑞瑟
-                                        David Morrissey 饰）所统治的“世外桃源”，安德里亚十分喜欢这里貌似平静快乐的生活，但显然米琼恩并不这么觉得，随着时间的推移，一个惊人而恐怖的秘密渐渐浮出了水面。瑞克和“总督”，当这两个原则和理念完全相悖的“领导”相遇之时，战争爆发了。</span>
-                                </p>
-                            </div>
-                        </li>
-                        <li data-url="http://dw-bw6.dwstatic.com/fbaab7230a631a9e21c75ebcc21f1f70/5afe7c5d/81/8/1731/8461043-99-1501750803.mp4">
-                            <div class="item-video">
-                                <img src="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/17/0006523.jpeg" alt="行尸走肉 第一季">
-                            </div>
-                            <span class="item-tag item-tag2">
-                                完 </span>
-                            <div class="item-mask">
-                                <p title="镇治安官瑞克·格里姆斯（Andrew Lincoln 饰）在一次行动中遭受枪击，当他从昏迷中醒来时，发现小镇上阴气沉沉，死尸遍地。更为恐怖的是，有的死尸游走于街头巷尾，嗜血如命，早已化作恐怖的丧尸。从一对幸存的父子口中得知，大批的幸存者早已疏散到亚特兰大市的避难所。为了 找到失踪的妻儿，瑞克只身上路。然而亚特兰大早已沦陷成为死城，丧尸在此占有绝对的统治地位。被丧尸围攻的瑞克得到数名幸存者的救助，经过一番奋力厮杀，他们最终返回到野外的营地。在接下来的日子里，他们不仅要面临丧尸的威胁，更要承受来自灵魂深处的巨大考验…… <br> 　　本片根据托尼·摩尔（Tony Moore）的同名漫画改编，是电视史上第一部正宗的僵尸电视剧。">
-                                    <span class="item-title">《行尸走肉 第一季》
-                                        <i class="item-title-tag item-title-tag2"> 完 </i>
-                                    </span>
-                                    <span class="item-desc">镇治安官瑞克·格里姆斯（Andrew Lincoln 饰）在一次行动中遭受枪击，当他从昏迷中醒来时，发现小镇上阴气沉沉，死尸遍地。更为恐怖的是，有的死尸游走于街头巷尾，嗜血如命，早已化作恐怖的丧尸。从一对幸存的父子口中得知，大批的幸存者早已疏散到亚特兰大市的避难所。为了
-                                        找到失踪的妻儿，瑞克只身上路。然而亚特兰大早已沦陷成为死城，丧尸在此占有绝对的统治地位。被丧尸围攻的瑞克得到数名幸存者的救助，经过一番奋力厮杀，他们最终返回到野外的营地。在接下来的日子里，他们不仅要面临丧尸的威胁，更要承受来自灵魂深处的巨大考验……
-                                        <br> 　　本片根据托尼·摩尔（Tony Moore）的同名漫画改编，是电视史上第一部正宗的僵尸电视剧。</span>
-                                </p>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-            <div class="recommend-film fr">
-                <h2 class="title title-film">新片速递</h2>
-                <ul class="list-film" id="filmWrap">
-                    <li data-url="http://dw-bw6.dwstatic.com/e43a84352793f2f4a03749e860c2b3c5/5afcf866/81/8/1731/8461043-99-1501750803.mp4" data-poster="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/17/0006523.jpeg">
-                        <div class="item-cover">
-                            <img src="http://w2.dwstatic.com/yy/ojiastoreimage/270x378/1526000359083_len29763.jpg" alt="">
+    <div class="inner">
+        <div class="dw-mod-recommend clearfix">
+            <h2 class="title title-tv">电视剧/番剧连载</h2>
+            <div class="clearfix">
+                <ul class="list-video clearfix ext-list fl">
+                    <li data-url="http://dw-bw6.dwstatic.com/569cedb6ee7f63e86937dd8b67e1f29c/5afe7c5d/79/2/1731/8459433-99-1501744074.mp4" data-poster="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/15/0756796.jpeg">
+                        <div class="item-video">
+                            <video id="mainVideo" src="http://dw-bw6.dwstatic.com/569cedb6ee7f63e86937dd8b67e1f29c/5afe7c5d/79/2/1731/8459433-99-1501744074.mp4"
+                                loop="" autoplay="" muted="" poster="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/15/0756796.jpeg"></video>
+                            <img src="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/10/3211675.jpeg" alt="">
+                            <div class="item-duration">6.78</div>
+                        </div>
+                        <h3>《行尸走肉 第三季》</h3>
+                        <p>时间流逝着，逃亡与抗争的旅程依旧漫漫看不到尽头</p>
+                    </li>
+                </ul>
+                <ul class="list-video clearfix">
+                    <li data-url="http://dw-bw6.dwstatic.com/4161ebaa0ad7d02743f9bb34305ebe8d/5afe7c5d/81/5/1731/8457033-99-1501727531.mp4">
+                        <div class="item-video">
+                            <img src="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/10/3211675.jpeg" alt="行尸走肉 第三季">
+                            <div class="item-duration">6.78</div>
+                        </div>
+                        <h3>《行尸走肉 第三季》</h3>
+                        <p>时间流逝着，逃亡与抗争的旅程依旧漫漫看不到尽头</p>
+                    </li>
+                    <li data-url="http://dw-bw6.dwstatic.com/4161ebaa0ad7d02743f9bb34305ebe8d/5afe7c5d/81/5/1731/8457033-99-1501727531.mp4">
+                        <div class="item-video">
+                            <img src="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/10/3211675.jpeg" alt="行尸走肉 第三季">
+                            <div class="item-duration">6.78</div>
+                        </div>
+                        <h3>《行尸走肉 第三季》</h3>
+                        <p>时间流逝着，逃亡与抗争的旅程依旧漫漫看不到尽头</p>
+                    </li>
+                    <li data-url="http://dw-bw6.dwstatic.com/4161ebaa0ad7d02743f9bb34305ebe8d/5afe7c5d/81/5/1731/8457033-99-1501727531.mp4">
+                        <div class="item-video">
+                            <img src="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/10/3211675.jpeg" alt="行尸走肉 第三季">
+                        </div>
+                        <h3>《行尸走肉 第三季》</h3>
+                        <p>时间流逝着，逃亡与抗争的旅程依旧漫漫看不到尽头</p>
+                    </li>
+                    <li data-url="http://dw-bw6.dwstatic.com/4161ebaa0ad7d02743f9bb34305ebe8d/5afe7c5d/81/5/1731/8457033-99-1501727531.mp4">
+                        <div class="item-video">
+                            <img src="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/10/3211675.jpeg" alt="行尸走肉 第三季">
+                        </div>
+                        <h3>《行尸走肉 第三季》</h3>
+                        <p>时间流逝着，逃亡与抗争的旅程依旧漫漫看不到尽头</p>
+                    </li>
+                    <li data-url="http://dw-bw6.dwstatic.com/4161ebaa0ad7d02743f9bb34305ebe8d/5afe7c5d/81/5/1731/8457033-99-1501727531.mp4">
+                        <div class="item-video">
+                            <img src="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/10/3211675.jpeg" alt="行尸走肉 第三季">
+                        </div>
+                        <h3>《行尸走肉 第三季》</h3>
+                        <p>时间流逝着，逃亡与抗争的旅程依旧漫漫看不到尽头</p>
+                    </li>
+                    <li data-url="http://dw-bw6.dwstatic.com/4161ebaa0ad7d02743f9bb34305ebe8d/5afe7c5d/81/5/1731/8457033-99-1501727531.mp4">
+                        <div class="item-video">
+                            <img src="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/10/3211675.jpeg" alt="行尸走肉 第三季">
+                        </div>
+                        <h3>《行尸走肉 第三季》</h3>
+                        <p>时间流逝着，逃亡与抗争的旅程依旧漫漫看不到尽头</p>
+                    </li>
+                    <li data-url="http://dw-bw6.dwstatic.com/4161ebaa0ad7d02743f9bb34305ebe8d/5afe7c5d/81/5/1731/8457033-99-1501727531.mp4">
+                        <div class="item-video">
+                            <img src="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/10/3211675.jpeg" alt="行尸走肉 第三季">
                         </div>
-                        <h3>《钢铁骑士》</h3>
-                        <p>戴安娜（盖尔·加朵 Gal Gadot 饰）是女王希波吕忒（康妮·尼尔森 Connie Nielsen 饰）的女儿，自幼生活在天堂岛上。巨大的屏障将这座岛屿同外界的纷纷扰扰隔开犹如一个世外桃源，而岛上生活着的亦都是女性。在女武官安提奥普（罗宾·莱特
-                            Robin Wright 饰）的教导之下，戴安娜习得了高强的武艺，而她的体内，似乎隐藏着某种强大的未知力量。
-                            <br> 　　一场意外中，一位名为史蒂夫（克里斯·派恩 Chris Pine 饰）的男子来到了岛上，从他口中，戴安娜得知外面的世界正在经历战争的磨难，而造成这一切的罪魁祸首，是战神阿瑞斯（大卫·休里斯
-                            David Thewlis 饰）。为了拯救人类于水火之中，戴安娜依然拿起了长剑与盾牌，发誓要彻底摧毁阿瑞斯的阴谋。</p>
+                        <h3>《行尸走肉 第三季》</h3>
+                        <p>时间流逝着，逃亡与抗争的旅程依旧漫漫看不到尽头</p>
                     </li>
-                    <li data-url="http://dw-bw6.dwstatic.com/e43a84352793f2f4a03749e860c2b3c5/5afcf866/81/8/1731/8461043-99-1501750803.mp4" data-poster="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/17/0006523.jpeg">
-                        <div class="item-cover">
-                            <img src="http://w2.dwstatic.com/yy/ojiastoreimage/270x378/1526000359083_len29763.jpg" alt="">
+                    <li data-url="http://dw-bw6.dwstatic.com/4161ebaa0ad7d02743f9bb34305ebe8d/5afe7c5d/81/5/1731/8457033-99-1501727531.mp4">
+                        <div class="item-video">
+                            <img src="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/10/3211675.jpeg" alt="行尸走肉 第三季">
                         </div>
-                        <h3>《钢铁骑士》</h3>
-                        <p>这里是一段很长要命的介绍文案，长的让人吐血！</p>
+                        <h3>《行尸走肉 第三季》</h3>
+                        <p>时间流逝着，逃亡与抗争的旅程依旧漫漫看不到尽头</p>
                     </li>
                 </ul>
             </div>
         </div>
+        <div class="dw-mod-recommend">
+            <h2 class="title title-film">新片速递</h2>
+            <ul class="list-film clearfix" id="filmWrap">
+                <li data-url="http://dw-bw6.dwstatic.com/e43a84352793f2f4a03749e860c2b3c5/5afcf866/81/8/1731/8461043-99-1501750803.mp4" data-poster="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/17/0006523.jpeg">
+                    <div class="item-cover">
+                        <img src="http://w2.dwstatic.com/yy/ojiastoreimage/270x378/1526000359083_len29763.jpg" alt="">
+                        <div class="item-duration">6.78</div>
+                    </div>
+                    <h3>《钢铁骑士》</h3>
+                    <p>这里是一段很长要命的介绍文案，长的让人吐血！</p>
+                </li>
+                <li data-url="http://dw-bw6.dwstatic.com/e43a84352793f2f4a03749e860c2b3c5/5afcf866/81/8/1731/8461043-99-1501750803.mp4" data-poster="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/17/0006523.jpeg">
+                    <div class="item-cover">
+                        <img src="http://w2.dwstatic.com/yy/ojiastoreimage/270x378/1526000359083_len29763.jpg" alt="">
+                    </div>
+                    <h3>《钢铁骑士》</h3>
+                    <p>这里是一段很长要命的介绍文案，长的让人吐血！</p>
+                </li>
+                <li data-url="http://dw-bw6.dwstatic.com/e43a84352793f2f4a03749e860c2b3c5/5afcf866/81/8/1731/8461043-99-1501750803.mp4" data-poster="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/17/0006523.jpeg">
+                    <div class="item-cover">
+                        <img src="http://w2.dwstatic.com/yy/ojiastoreimage/270x378/1526000359083_len29763.jpg" alt="">
+                    </div>
+                    <h3>《钢铁骑士》</h3>
+                    <p>戴安娜（盖尔·加朵 Gal Gadot 饰）是女王希波吕忒（康妮·尼尔森 Connie Nielsen 饰）的女儿，自幼生活在天堂岛上。巨大的屏障将这座岛屿同外界的纷纷扰扰隔开犹如一个世外桃源，而岛上生活着的亦都是女性。在女武官安提奥普（罗宾·莱特
+                        Robin Wright 饰）的教导之下，戴安娜习得了高强的武艺，而她的体内，似乎隐藏着某种强大的未知力量。
+                        <br> 　　一场意外中，一位名为史蒂夫（克里斯·派恩 Chris Pine 饰）的男子来到了岛上，从他口中，戴安娜得知外面的世界正在经历战争的磨难，而造成这一切的罪魁祸首，是战神阿瑞斯（大卫·休里斯
+                        David Thewlis 饰）。为了拯救人类于水火之中，戴安娜依然拿起了长剑与盾牌，发誓要彻底摧毁阿瑞斯的阴谋。</p>
+                </li>
+                <li data-url="http://dw-bw6.dwstatic.com/e43a84352793f2f4a03749e860c2b3c5/5afcf866/81/8/1731/8461043-99-1501750803.mp4" data-poster="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/17/0006523.jpeg">
+                    <div class="item-cover">
+                        <img src="http://w2.dwstatic.com/yy/ojiastoreimage/270x378/1526000359083_len29763.jpg" alt="">
+                    </div>
+                    <h3>《钢铁骑士》</h3>
+                    <p>这里是一段很长要命的介绍文案，长的让人吐血！</p>
+                </li>
+                <li data-url="http://dw-bw6.dwstatic.com/e43a84352793f2f4a03749e860c2b3c5/5afcf866/81/8/1731/8461043-99-1501750803.mp4" data-poster="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/17/0006523.jpeg">
+                    <div class="item-cover">
+                        <img src="http://w2.dwstatic.com/yy/ojiastoreimage/270x378/1526000359083_len29763.jpg" alt="">
+                    </div>
+                    <h3>《钢铁骑士》</h3>
+                    <p>戴安娜（盖尔·加朵 Gal Gadot 饰）是女王希波吕忒（康妮·尼尔森 Connie Nielsen 饰）的女儿，自幼生活在天堂岛上。巨大的屏障将这座岛屿同外界的纷纷扰扰隔开犹如一个世外桃源，而岛上生活着的亦都是女性。在女武官安提奥普（罗宾·莱特
+                        Robin Wright 饰）的教导之下，戴安娜习得了高强的武艺，而她的体内，似乎隐藏着某种强大的未知力量。
+                        <br> 　　一场意外中，一位名为史蒂夫（克里斯·派恩 Chris Pine 饰）的男子来到了岛上，从他口中，戴安娜得知外面的世界正在经历战争的磨难，而造成这一切的罪魁祸首，是战神阿瑞斯（大卫·休里斯
+                        David Thewlis 饰）。为了拯救人类于水火之中，戴安娜依然拿起了长剑与盾牌，发誓要彻底摧毁阿瑞斯的阴谋。</p>
+                </li>
+                <li data-url="http://dw-bw6.dwstatic.com/e43a84352793f2f4a03749e860c2b3c5/5afcf866/81/8/1731/8461043-99-1501750803.mp4" data-poster="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/17/0006523.jpeg">
+                    <div class="item-cover">
+                        <img src="http://w2.dwstatic.com/yy/ojiastoreimage/270x378/1526000359083_len29763.jpg" alt="">
+                    </div>
+                    <h3>《钢铁骑士》</h3>
+                    <p>这里是一段很长要命的介绍文案，长的让人吐血！</p>
+                </li>
+                <li class="ext-more" data-url="http://dw-bw6.dwstatic.com/e43a84352793f2f4a03749e860c2b3c5/5afcf866/81/8/1731/8461043-99-1501750803.mp4" data-poster="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/17/0006523.jpeg">
+                    <div class="item-cover">
+                        <img src="http://w2.dwstatic.com/yy/ojiastoreimage/270x378/1526000359083_len29763.jpg" alt="">
+                    </div>
+                    <h3>《钢铁骑士》</h3>
+                    <p>戴安娜（盖尔·加朵 Gal Gadot 饰）是女王希波吕忒（康妮·尼尔森 Connie Nielsen 饰）的女儿，自幼生活在天堂岛上。巨大的屏障将这座岛屿同外界的纷纷扰扰隔开犹如一个世外桃源，而岛上生活着的亦都是女性。在女武官安提奥普（罗宾·莱特
+                        Robin Wright 饰）的教导之下，戴安娜习得了高强的武艺，而她的体内，似乎隐藏着某种强大的未知力量。
+                        <br> 　　一场意外中，一位名为史蒂夫（克里斯·派恩 Chris Pine 饰）的男子来到了岛上，从他口中，戴安娜得知外面的世界正在经历战争的磨难，而造成这一切的罪魁祸首，是战神阿瑞斯（大卫·休里斯
+                        David Thewlis 饰）。为了拯救人类于水火之中，戴安娜依然拿起了长剑与盾牌，发誓要彻底摧毁阿瑞斯的阴谋。</p>
+                </li>
+            </ul>
+        </div>
+        <div class="dw-mod-recommend">
+            <h2 class="title title-hot">热门榜单</h2>
+            <ul class="list-film clearfix" id="filmWrap">
+                <li class="ext-app">
+                    <div class="item-cover">
+                        更多内容尽在<br>微剧院APP
+                    </div>
+                    <a href="#" class="btn-dl btn-android">下载APP</a>
+                </li>
+                <li data-url="http://dw-bw6.dwstatic.com/e43a84352793f2f4a03749e860c2b3c5/5afcf866/81/8/1731/8461043-99-1501750803.mp4" data-poster="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/17/0006523.jpeg">
+                    <div class="item-cover">
+                        <img src="http://w2.dwstatic.com/yy/ojiastoreimage/270x378/1526000359083_len29763.jpg" alt="">
+                    </div>
+                    <h3>《钢铁骑士》</h3>
+                    <p>这里是一段很长要命的介绍文案，长的让人吐血！</p>
+                </li>
+                <li data-url="http://dw-bw6.dwstatic.com/e43a84352793f2f4a03749e860c2b3c5/5afcf866/81/8/1731/8461043-99-1501750803.mp4" data-poster="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/17/0006523.jpeg">
+                    <div class="item-cover">
+                        <img src="http://w2.dwstatic.com/yy/ojiastoreimage/270x378/1526000359083_len29763.jpg" alt="">
+                    </div>
+                    <h3>《钢铁骑士》</h3>
+                    <p>戴安娜（盖尔·加朵 Gal Gadot 饰）是女王希波吕忒（康妮·尼尔森 Connie Nielsen 饰）的女儿，自幼生活在天堂岛上。巨大的屏障将这座岛屿同外界的纷纷扰扰隔开犹如一个世外桃源，而岛上生活着的亦都是女性。在女武官安提奥普（罗宾·莱特
+                        Robin Wright 饰）的教导之下，戴安娜习得了高强的武艺，而她的体内，似乎隐藏着某种强大的未知力量。
+                        <br> 　　一场意外中，一位名为史蒂夫（克里斯·派恩 Chris Pine 饰）的男子来到了岛上，从他口中，戴安娜得知外面的世界正在经历战争的磨难，而造成这一切的罪魁祸首，是战神阿瑞斯（大卫·休里斯
+                        David Thewlis 饰）。为了拯救人类于水火之中，戴安娜依然拿起了长剑与盾牌，发誓要彻底摧毁阿瑞斯的阴谋。</p>
+                </li>
+                <li data-url="http://dw-bw6.dwstatic.com/e43a84352793f2f4a03749e860c2b3c5/5afcf866/81/8/1731/8461043-99-1501750803.mp4" data-poster="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/17/0006523.jpeg">
+                    <div class="item-cover">
+                        <img src="http://w2.dwstatic.com/yy/ojiastoreimage/270x378/1526000359083_len29763.jpg" alt="">
+                    </div>
+                    <h3>《钢铁骑士》</h3>
+                    <p>这里是一段很长要命的介绍文案，长的让人吐血！</p>
+                </li>
+                <li data-url="http://dw-bw6.dwstatic.com/e43a84352793f2f4a03749e860c2b3c5/5afcf866/81/8/1731/8461043-99-1501750803.mp4" data-poster="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/17/0006523.jpeg">
+                    <div class="item-cover">
+                        <img src="http://w2.dwstatic.com/yy/ojiastoreimage/270x378/1526000359083_len29763.jpg" alt="">
+                    </div>
+                    <h3>《钢铁骑士》</h3>
+                    <p>戴安娜（盖尔·加朵 Gal Gadot 饰）是女王希波吕忒（康妮·尼尔森 Connie Nielsen 饰）的女儿，自幼生活在天堂岛上。巨大的屏障将这座岛屿同外界的纷纷扰扰隔开犹如一个世外桃源，而岛上生活着的亦都是女性。在女武官安提奥普（罗宾·莱特
+                        Robin Wright 饰）的教导之下，戴安娜习得了高强的武艺，而她的体内，似乎隐藏着某种强大的未知力量。
+                        <br> 　　一场意外中，一位名为史蒂夫（克里斯·派恩 Chris Pine 饰）的男子来到了岛上，从他口中，戴安娜得知外面的世界正在经历战争的磨难，而造成这一切的罪魁祸首，是战神阿瑞斯（大卫·休里斯
+                        David Thewlis 饰）。为了拯救人类于水火之中，戴安娜依然拿起了长剑与盾牌，发誓要彻底摧毁阿瑞斯的阴谋。</p>
+                </li>
+                <li data-url="http://dw-bw6.dwstatic.com/e43a84352793f2f4a03749e860c2b3c5/5afcf866/81/8/1731/8461043-99-1501750803.mp4" data-poster="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/17/0006523.jpeg">
+                    <div class="item-cover">
+                        <img src="http://w2.dwstatic.com/yy/ojiastoreimage/270x378/1526000359083_len29763.jpg" alt="">
+                    </div>
+                    <h3>《钢铁骑士》</h3>
+                    <p>这里是一段很长要命的介绍文案，长的让人吐血！</p>
+                </li>
+                <li data-url="http://dw-bw6.dwstatic.com/e43a84352793f2f4a03749e860c2b3c5/5afcf866/81/8/1731/8461043-99-1501750803.mp4" data-poster="http://w2.dwstatic.com/s1_dwstatic/author-grab/20170803/17/0006523.jpeg">
+                    <div class="item-cover">
+                        <img src="http://w2.dwstatic.com/yy/ojiastoreimage/270x378/1526000359083_len29763.jpg" alt="">
+                    </div>
+                    <h3>《钢铁骑士》</h3>
+                    <p>戴安娜（盖尔·加朵 Gal Gadot 饰）是女王希波吕忒（康妮·尼尔森 Connie Nielsen 饰）的女儿，自幼生活在天堂岛上。巨大的屏障将这座岛屿同外界的纷纷扰扰隔开犹如一个世外桃源，而岛上生活着的亦都是女性。在女武官安提奥普（罗宾·莱特
+                        Robin Wright 饰）的教导之下，戴安娜习得了高强的武艺，而她的体内，似乎隐藏着某种强大的未知力量。
+                        <br> 　　一场意外中，一位名为史蒂夫（克里斯·派恩 Chris Pine 饰）的男子来到了岛上，从他口中，戴安娜得知外面的世界正在经历战争的磨难，而造成这一切的罪魁祸首，是战神阿瑞斯（大卫·休里斯
+                        David Thewlis 饰）。为了拯救人类于水火之中，戴安娜依然拿起了长剑与盾牌，发誓要彻底摧毁阿瑞斯的阴谋。</p>
+                </li>
+            </ul>
+        </div>
     </div>
 
     <div class="dw-mod-sidebar">

2018专题/微剧院官网/src/sass/global.scss

@@ -150,10 +150,23 @@ a{
             }
         }
     }
+    .icon-pull{
+        position: absolute;
+        bottom: 30px;
+        left: 50%;
+        margin-left: -22px;
+        width: 44px;
+        height: 24px;
+        background: url(/src/img/icon-pull.png?__sprite) no-repeat;
+        animation: fadeIn 1.2s 0s ease-in infinite
+    }
 }
 
 .dw-mod-recommend{
-    padding: 90px 0;
+    padding-bottom: 46px;
+    &:first-child{
+        padding: 50px 0 26px;
+    }
     .inner{
         position: relative;
     }
@@ -169,172 +182,192 @@ a{
     .title-film{
         background: url(/src/img/icon-film.png) no-repeat;
     }
-    .recommend-tv{
-        width: 808px;
-        .list-video{
-            &.ext-list{
-                li{
-                    width: 556px;
-                    height: 312px;
-                }
-                img{
-                    position: absolute;
-                    top: 0;
-                    display: none;
-                }
-            }
+    .title-hot{
+        background: url(/src/img/icon-hot.png) no-repeat;
+    }
+    .list-video,.list-film{
+        .item-duration{
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            z-index: 2;
+            height: 29px;
+            line-height: 36px;
+            font-size: 12px;
+            color: #ffffff;
+            text-align: right;
+            padding: 0 6px;
+            background: url(/src/img/icon-mask1.png) center bottom repeat-x;
+        }
+        h3{
+            padding: 18px 0 3px 0;
+            font-size: 18px;
+            line-height: 1;
+            color: #333333;
+            @include ellipsis();
+        }
+        p{
+            line-height: 30px;
+            height: 30px;
+            font-size: 14px;
+            color: #999999;
+            overflow: hidden;
+            @include ellipsis();
+        }
+    }
+    .list-video{
+        margin-right: -20px;
+        &.ext-list{
+            margin-right: 0;
             li{
-                position: relative;
-                width: 242px;
-                height: 152px;
-                margin-bottom: 7px;
-                overflow: hidden;
-                color: #FFFFFF;
-                cursor: pointer;
-                &:hover{
-                    .item-video{
-                        &:before{
-                            @include opacity(1);
-                        }
-                    }
-                }
-            }
-            a{
-                position: relative;
-                height: 100%;
-                display: block;
-                color: #FFFFFF;
+                width: 472px;
             }
             .item-video{
-                position: relative;
-                width: 100%;
-                height: 100%;
-                &:before{
-                    content: "";
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    z-index: 3;
-                    width: 100%;
-                    height: 100%;
-                    background: url(/src/img/icon-play.png) center center no-repeat rgba(0,0,0,0.1);
-                    transition: all .4s;
-                    @include opacity(0);
-                }
-            }
-            video{
-                position: relative;
-                z-index: 1;
-                width: 100%;
-                height: 100%;
-                background: #000;
+                height: 265px;
             }
             img{
-                position: relative;
-                z-index: 2;
-                display: block;
-                width: 100%;
-                height: 100%;
-                overflow: hidden;
-            }
-            .item-tag{
                 position: absolute;
                 top: 0;
-                right: 0;
-                z-index: 3;
-                line-height: 28px;
-                padding: 0 5px;
-                font-size: 14px;
-                border-radius: 0 0 0 10px;
-                &.item-tag1{
-                    @include gradient-horizontal(#ff8e2a,#ff6c1a);
-                }
-                &.item-tag2{
-                    @include gradient-horizontal(#16e46b,#11ca5d);
+                display: none;
+            }
+            .item-duration{
+                padding: 0 8px;
+            }
+        }
+        li{
+            position: relative;
+            float: left;
+            width: 162px;
+            overflow: hidden;
+            color: #FFFFFF;
+            margin: 0 20px 12px 0;
+            cursor: pointer;
+            &:hover{
+                .item-video{
+                    &:before{
+                        @include opacity(1);
+                    }
                 }
             }
-            .item-mask{
+        }
+        a{
+            position: relative;
+            height: 100%;
+            display: block;
+            color: #FFFFFF;
+        }
+        .item-video{
+            position: relative;
+            width: 100%;
+            height: 92px;
+            border-radius: 10px;
+            overflow: hidden;
+            &:before{
+                content: "";
                 position: absolute;
-                bottom: 0;
+                top: 0;
+                left: 0;
                 z-index: 3;
                 width: 100%;
-                background: #000;
-                background: rgba(0,0,0,0.8);
-            }
-            p{
-                padding: 2px 10px 4px 2px;
-                font-size: 14px;
-                line-height: 20px;
-                height: 20px;
-                @include ellipsis();
-            }
-            .item-title-tag{
-                display: none;
+                height: 100%;
+                background: url(/src/img/icon-play.png) center center no-repeat rgba(0,0,0,0.1);
+                transition: all .4s;
+                @include opacity(0);
             }
         }
+        video{
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            background: #000;
+        }
+        img{
+            position: relative;
+            z-index: 2;
+            display: block;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
     }
-    .recommend-film{
-        width: 360px;
-        .list-film{
-            li{
-                position: relative;
-                margin: 20px 0 46px 0;
-                padding: 0 16px 0 130px;
-                height: 112px;
-                background: #f5f5f5;
-                border-radius: 0 0 10px 0;
-                cursor: pointer;
-                &:hover{
-                    .item-cover{
-                        &:before{
-                            @include opacity(1);
-                        }
+    .list-film{
+        margin-right: -20px;
+        li{
+            position: relative;
+            float: left;
+            width: 154px;
+            margin-right: 20px;
+            cursor: pointer;
+            &:hover{
+                .item-cover{
+                    &:before{
+                        @include opacity(1);
                     }
                 }
             }
-            a{
-                display: block;
+            &.ext-app{
+                .item-cover{
+                    padding-top: 148px;
+                    font-size: 16px;
+                    line-height: 26px;
+                    height: 70px;
+                    text-align: center;
+                    color: #333333;
+                    background: url(/src/img/icon-w.png) center 28px no-repeat #eeeeee;
+                    &:before{
+                        display: none;
+                    }
+                }
             }
-            .item-cover{
+        }
+        a{
+            display: block;
+        }
+        img{
+            position: relative;
+            z-index: 1;
+            display: block;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+        .item-duration{
+            font-size: 14px;
+            height: 49px;
+            line-height: 70px;
+            color: #ff6b1a;
+         }
+        .item-cover{
+            position: relative;
+            height: 218px;
+            border-radius: 10px;
+            overflow: hidden;
+            background: #eeeeee;
+            &:before{
+                content: "";
                 position: absolute;
-                top: -20px;
+                top: 0;
                 left: 0;
-                width: 114px;
-                height: 152px;
-                background: #FFFFFF;
-                &:before{
-                    content: "";
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    z-index: 2;
-                    width: 100%;
-                    height: 100%;
-                    background: url(/src/img/icon-play.png) center center no-repeat rgba(0,0,0,0.1);
-                    transition: all .4s;
-                    @include opacity(0);
-                }
-            }
-            img{
-                position: relative;
-                z-index: 1;
-                display: block;
+                z-index: 2;
                 width: 100%;
                 height: 100%;
-                overflow: hidden;
+                background: url(/src/img/icon-play.png) center center no-repeat rgba(0,0,0,0.1);
+                transition: all .4s;
+                @include opacity(0);
             }
-            h3{
-                padding: 22px 0 10px 0;
-                font-size: 18px;
-                color: #333333;
-                @include ellipsis();
-            }
-            p{
-                line-height: 22px;
-                height: 44px;
-                font-size: 14px;
-                color: #999999;
-                @include ellipsis-line(2)
+        }
+        .btn-dl{
+            font-size: 14px;
+            line-height: 40px;
+            text-align: center;
+            color: #FFFFFF;
+            border-radius: 20px;
+            margin-top: 20px;
+            @include gradient-horizontal(#ff8e2a,#ff6b1a);
+            &:hover{
+                @include opacity(0.8);
             }
         }
     }
@@ -396,7 +429,7 @@ $vari: 750 / 640;
 
 //H5适配
 @media screen and (max-width: 750px) {
-    .ui-friend,.dwCommonFooter{
+    .dw-mod-nav,.ui-friend,.dwCommonFooter{
         display: none;
     }
     .fl{
@@ -432,12 +465,12 @@ $vari: 750 / 640;
         }
     }
     .dw-mod-primary{
-        height: px2rem(500);
+        height: px2rem(399);
         .primary-bg{
             margin: px2rem(-20) 0 0 px2rem(-20);
             padding: px2rem(20);
             animation: wapBgMove 20s ease .2s infinite alternate;
-            background: url(/src/img/bg-primary-wap.jpg) center 0 / auto 100% no-repeat;
+            background: url(/src/img/bg-primary-wap.jpg) center 0 / auto 110% no-repeat;
         }
         .primary-main{
             position: relative;
@@ -447,28 +480,28 @@ $vari: 750 / 640;
             height: auto;
             background: transparent;
             margin: 0;
-            padding: px2rem(82) 0 0 0;
+            padding: px2rem(63) 0 0;
             text-align: center;
             h1{
                 display: flex;
                 justify-content: center;
-                line-height: px2rem(90);
-                height: px2rem(90);
-                font-size: px2rem(52);
-                font-weight: bold;
+                line-height: px2rem(69);
+                height: px2rem(69);
+                font-size: px2rem(39);
+                font-weight: normal;
                 img{
                     display: block;
-                    height: px2rem(90);
+                    height: px2rem(69);
                     margin-right: px2rem(30);
                 }
             }
             p{
                 font-size: px2rem(32);
-                line-height: px2rem(50);
-                margin: px2rem(20) 0 px2rem(40) 0;
+                line-height: px2rem(54);
+                margin: px2rem(18) 0 px2rem(27) 0;
             }
             .btns-wrap {
-                margin-top: px2rem(50);
+                margin-top: 0;
             }
             .btn{
                 height: px2rem(88);
@@ -490,9 +523,16 @@ $vari: 750 / 640;
                 }
             }
         }
+        .icon-pull{
+            display: none;
+        }
     }
     .dw-mod-recommend{
-        padding: px2rem(52) px2rem(24);
+        padding: 0 px2rem(24) px2rem(51);
+        overflow: hidden;
+        &:first-child{
+            padding: px2rem(51) px2rem(24) px2rem(36);
+        }
         .title{
             line-height: px2rem(40);
             padding: 0 0 0 px2rem(55);
@@ -500,143 +540,100 @@ $vari: 750 / 640;
             font-size: px2rem(32);
             background-size: auto 100%;
         }
-        .recommend-tv{
-            width: 100%;
-            .item-tag{
-                display: none;
-            }
-            .list-video{
-                display: flex;
-                &.ext-list{
-                    li{
-                        width: 100%;
-                        height: auto;
-                        margin-bottom: px2rem(24);
-                        .item-video{
-                            height: px2rem(400);
-                        }
-                        &.is-playing{
-                            .item-video{
-                                &:before{
-                                    @include opacity(0);
-                                }
-                            }
-                            img{
-                                display: none;
-                            }
-                        }
-                    }
-                    img{
-                        display: block;
-                    }
-                    p{
-                        font-size: px2rem(26);
-                        padding: 0;
-                    }
+        .list-video,.list-film{
+            li{
+                display: block;
+                .item-video{
+                    border-radius: px2rem(9);
                 }
+                &.ext-more,&.ext-app{
+                    display: none;
+                }
+            }
+            h3{
+                padding: px2rem(30) 0 px2rem(12) 0;
+                font-size: px2rem(30);
+            }
+            p{
+                line-height: px2rem(40);
+                height: px2rem(40);
+                font-size: px2rem(26);
+                overflow: hidden;
+            }
+        }
+        .list-video{
+            &.ext-list{
                 li{
-                    flex: 1;
                     width: 100%;
                     height: auto;
-                    margin-right: px2rem(16);
-                    &:last-child{
-                        margin-right: 0;
+                    margin-bottom: px2rem(24);
+                    .item-video{
+                        height: px2rem(400);
                     }
-                }
-                .item-video{
-                    height: auto;
-                    &:before{
-                        @include opacity(1);
+                    &.is-playing{
+                        .item-video{
+                            &:before{
+                                @include opacity(0);
+                            }
+                        }
+                        img{
+                            display: none;
+                        }
                     }
                 }
-                video{
-                    height: px2rem(400);
-                }
-                .item-mask{
-                    position: relative;
-                    color: #333;
-                    background: transparent;
-                }
-                p{
-                    height: auto;
-                }
-                .item-title{
+                img{
                     display: block;
-                    font-size: px2rem(30);
-                    padding: px2rem(16) 0;
-                    line-height: 1;
                 }
-                .item-desc{
-                    display: block;
+                p{
                     font-size: px2rem(26);
-                    line-height: px2rem(30);
-                    height: px2rem(28);
-                    padding: 0 px2rem(6);
-                    color: #999999;
-                    @include ellipsis();
-                }
-                .item-title-tag{
-                    display: inline-block;
-                    vertical-align: middle;
-                    color: #FFFFFF;
-                    padding: 0 px2rem(12);
-                    font-size: px2rem(22);
-                    height: px2rem(30);
-                    line-height: px2rem(30);
-                    border-radius: px2rem(10);
-                    margin-top: px2rem(-4);
+                    padding: 0;
                 }
-                .item-title-tag1{
-                    @include gradient-horizontal(#ff8e2a,#ff6c1a);
+            }
+            li{
+                width: px2rem(342);
+                margin-right: px2rem(15);
+                &:last-child{
+                    margin-right: 0;
                 }
-                .item-title-tag2{
-                    @include gradient-horizontal(#16e46b,#11ca5d);
+            }
+            .item-video{
+                height: px2rem(192);
+                &:before{
+                    @include opacity(1);
                 }
             }
+            video{
+                height: px2rem(400);
+            }
+            p{
+                height: auto;
+            }
         }
-        .recommend-film{
-            width: 100%;
-            margin-top: px2rem(40);
-            .list-film{
-                li{
-                    margin: px2rem(42) 0 px2rem(46) 0;
-                    padding: 0 px2rem(40) 0 px2rem(170);;
-                    height: px2rem(162);
-                    border-radius: 0 0 px2rem(10) 0;
-                    &.ext-item{
-                        display: block;
-                        .cover{
-                            line-height: px2rem(162);
-                        }
-                    }
-                }
-                h3{
-                    padding: px2rem(30) 0 px2rem(12) 0;
-                    font-size: px2rem(30);
-                }
-                p{
-                    line-height: px2rem(40);
-                    height: px2rem(80);
-                    font-size: px2rem(26);
-                    overflow: hidden;
-                }
-                .item-cover{
-                    top: px2rem(-17);
-                    width: px2rem(140);
-                    height: px2rem(196);
-                    &:before{
-                        @include opacity(1);
-                        background: url(/src/img/icon-play.png) center center / px2rem(60) no-repeat rgba(0, 0, 0, 0.1)
+        .list-film{
+            li{
+                width: px2rem(225);
+                margin: 0 px2rem(15) px2rem(21) 0;
+                &.ext-item{
+                    display: block;
+                    .cover{
+                        line-height: px2rem(162);
                     }
                 }
-                .btn{
-                    width: px2rem(180);
-                    height: px2rem(58);
-                    font-size: px2rem(26);
-                    line-height: px2rem(58);
-                    border-radius: px2rem(30);
+            }
+            .item-cover{
+                height: px2rem(315);
+                &:before{
+                    @include opacity(1);
+                    background: url(/src/img/icon-play.png) center center / px2rem(60) no-repeat rgba(0, 0, 0, 0.1)
                 }
             }
+            .btn{
+                width: px2rem(180);
+                height: px2rem(58);
+                font-size: px2rem(26);
+                line-height: px2rem(58);
+                border-radius: px2rem(30);
+            }
         }
     }
     .dw-mod-sidebar{
@@ -790,4 +787,32 @@ $vari: 750 / 640;
     100% {
         transform: translate(px2rem(0), px2rem(10));
     }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: .5;
+        -webkit-transform: translate(0,-1px);
+        transform: translate(0,-1px)
+    }
+
+    to {
+        opacity: 1;
+        -webkit-transform: translate(0,10px);
+        transform: translate(0,10px)
+    }
+}
+
+@-webkit-keyframes fadeIn {
+    from {
+        opacity: .5;
+        -webkit-transform: translate(0,-1px);
+        transform: translate(0,-1px)
+    }
+
+    to {
+        opacity: 1;
+        -webkit-transform: translate(0,10px);
+        transform: translate(0,10px)
+    }
 }

2018专题/德玛西亚杯竞猜/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/心灵方块/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/星际战甲6月专题/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/灵山奇缘专题/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/玩游戏送王者荣耀皮肤/src/_index.html

@@ -50,7 +50,7 @@
                         <li>
                             <span class="btn-dl">下载游戏</span>
                             <div class="pop-wrap pop-qrcode">
-                                <img src="http://screenshot.dwstatic.com/ojiastoreimage/df7d4d06eace11d5b7f60432559ef0fc.png" alt="">
+                                <img src="http://screenshot.dwstatic.com/ojiastoreimage/691a23e1fb44306bcd933f0800ab4f90.jpg" alt="">
                             </div>
                         </li>
                         <li class="lingqu-wrap" data-giftid="203002">

2018专题/玩游戏送王者荣耀皮肤/src/sass/global.scss

@@ -281,7 +281,7 @@ body {
         .pop-wrap{
             position: absolute;
             top: 70px;
-            left: 50%;
+            left: 0;
             display: none;
             z-index: 2;
             background: #FFFFFF;
@@ -292,26 +292,21 @@ body {
                 content: "";
                 position: absolute;
                 top: -20px;
-                left: 50%;
+                left: 66px;
                 width: 0;
                 height: 0;
-                margin-left: -10px;
                 border: 10px solid #FFF;
                 border-color: transparent  transparent #FFF transparent;
             }
             &.pop-qrcode{
                 padding: 10px;
-                margin-left: -110px;
                 img{
                     display: block;
-                    width: 200px;
-                    height: 200px;
                     overflow: hidden;
                 }
             }
             &.pop-gift{
                 padding: 20px;
-                margin-left: -159px;
                 width: 278px;
                 font-size: 12px;
                 line-height: 20px;

2018专题/玩游戏送王者荣耀皮肤/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/球球大作战竞猜/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/艾兰岛专题/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/英雄联盟洲际赛专题/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/英雄联盟职业联赛/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/诛仙专题/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/远征手游专题/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/魔域4月专题/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/魔域5月专题/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>

2018专题/魔域三月专题/src/tpl/bindWx.tmpl

@@ -10,7 +10,7 @@
         <p class="why-bind">为什么要绑定微信？</p>
         <ol class="bind-tips__list">
             <li class="bind-tip__item"><label>1、</label>
-                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（iduowan）</em>即可轻松使用。
+                <p>多玩特权已经上线微信版。绑定微信后，通过<em>微信公众号（duowanmall）</em>即可轻松使用。
                     <p>
             </li>
             <!--<li class="bind-tip__item"><label>2、</label>