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

2017专区/PC单机/src/_artical2.html

@@ -156,161 +156,342 @@
                             </ul>
                         </div>
                     </div>
-                    <div class="g-ui-tab zq-col-740" data-role="tab-comlist">
+                    <div class="g-ui-tab zq-col-740 wide-screen">
                         <div class="g-tab__hd">
-                            <h2>视频<span>推荐</span></h2>
-                            <ul class="g-tab__nav" data-switchable-role="nav">
-                                <li class="is-active"><a href="#">最新视频</a></li>
-                                <li><a href="#">流程视频</a></li>
-                                <li><a href="#">搞笑视频</a></li>
-                            </ul>
+                            <h2>云玩<span>游戏</span></h2>
+                            <p class="subtitle">专注游戏剧情攻略 给你电影般的游戏体验</p>
                             <div class="g-tab__ext">
-                                <a href="#">更多</a>
+                                <a href="#">更多攻略视频</a>
                             </div>
                         </div>
-                        <div class="g-tab__bd mt-25" data-switchable-role="content">
-                            <div class="g-tab-pannel" data-more="#1">
-                                <ul class="zq-video-list ext-list-166">
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                </ul>  
+                        <div class="g-tab__bd clearfix">
+                            <div class="video-list clearfix mt-25">
+                                <div class="part-title">
+                                    <span>热门视频</span>
+                                </div>
+                                <div class="cloudplay-list">
+                                    <ul class="zq-cloudplay-list">
+                                        <li class="g-col-gItem item1">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item2">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item3">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item4">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item5">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item6">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item7">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item8">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item9">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                        <li class="g-col-gItem item10">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
                             </div>
-                            <div class="g-tab-pannel u-hide">
-                                <ul class="zq-video-list ext-list-166">
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                    <li class="zq-video-item">
-                                        <a href="#" target="_blank">
-                                            <span class="item-pic">
-                                                <img src="http://fed.webdev.ouj.com/146x82" alt="">
-                                                <i class="icon-play"></i>
-                                            </span>
-                                            <span class="item-title">英雄联盟MV第一五期卡牌大师崔斯特</span>
-                                        </a>
-                                    </li>
-                                </ul>  
+                            <div class="hot-list clearfix mt-25">
+                                <div class="part-title">
+                                    <span>热门推荐游戏</span>
+                                </div>
+                                <div class="cloudplay-hot">
+                                    <ul class="zq-cloudplay-hot">
+                                        <li class="item1">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                        <li class="item2">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                        <li class="item3">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                        <li class="item4">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                        <li class="item5">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                        <li class="item6">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                    </ul>
+                                </div>
                             </div>
                         </div>
                     </div>

2017专区/PC单机/src/_index.html

@@ -761,227 +761,334 @@
                                 <a href="#">更多攻略视频</a>
                             </div>
                         </div>
-                    </div>
-                    <div class="g-tab__bd clearfix mt-25">
-                        <div class="zq-col-670">
-                            <div class="part-title">
-                                <span>热门视频</span>
-                            </div>
-                            <div class="cloudplay-list">
-                                <ul>
-                                    <li class="g-col-gItem">
-                                        <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
-                                            <div class="gItem-pic">
-                                                <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
-                                                <div class="gItem-mask"></div>
-                                                <span class="gItem-tag">质量效应：仙女座</span>
-                                                <span class="gItem-vdIcon"></span>
-                                                <span class="gItem-vdTime">29:55</span>
-                                            </div>
-                                            <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
-                                            <div class="gItem-info">
-                                                <span>wantto玩徒</span>
-                                                <em>8</em>
-                                            </div>
-                                        </a>
-                                    </li>
-                                    <li class="g-col-gItem">
-                                        <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
-                                            <div class="gItem-pic">
-                                                <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
-                                                <div class="gItem-mask"></div>
-                                                <span class="gItem-tag">质量效应：仙女座</span>
-                                                <span class="gItem-vdIcon"></span>
-                                                <span class="gItem-vdTime">29:55</span>
-                                            </div>
-                                            <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
-                                            <div class="gItem-info">
-                                                <span>wantto玩徒</span>
-                                                <em>8</em>
-                                            </div>
-                                        </a>
-                                    </li>
-                                    <li class="g-col-gItem">
-                                        <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
-                                            <div class="gItem-pic">
-                                                <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
-                                                <div class="gItem-mask"></div>
-                                                <span class="gItem-tag">质量效应：仙女座</span>
-                                                <span class="gItem-vdIcon"></span>
-                                                <span class="gItem-vdTime">29:55</span>
-                                            </div>
-                                            <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
-                                            <div class="gItem-info">
-                                                <span>wantto玩徒</span>
-                                                <em>8</em>
-                                            </div>
-                                        </a>
-                                    </li>
-                                    <li class="g-col-gItem">
-                                        <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
-                                            <div class="gItem-pic">
-                                                <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
-                                                <div class="gItem-mask"></div>
-                                                <span class="gItem-tag">质量效应：仙女座</span>
-                                                <span class="gItem-vdIcon"></span>
-                                                <span class="gItem-vdTime">29:55</span>
-                                            </div>
-                                            <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
-                                            <div class="gItem-info">
-                                                <span>wantto玩徒</span>
-                                                <em>8</em>
-                                            </div>
-                                        </a>
-                                    </li>
-                                    <li class="g-col-gItem">
-                                        <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
-                                            <div class="gItem-pic">
-                                                <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
-                                                <div class="gItem-mask"></div>
-                                                <span class="gItem-tag">质量效应：仙女座</span>
-                                                <span class="gItem-vdIcon"></span>
-                                                <span class="gItem-vdTime">29:55</span>
-                                            </div>
-                                            <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
-                                            <div class="gItem-info">
-                                                <span>wantto玩徒</span>
-                                                <em>8</em>
-                                            </div>
-                                        </a>
-                                    </li>
-                                    <li class="g-col-gItem">
-                                        <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
-                                            <div class="gItem-pic">
-                                                <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
-                                                <div class="gItem-mask"></div>
-                                                <span class="gItem-tag">质量效应：仙女座</span>
-                                                <span class="gItem-vdIcon"></span>
-                                                <span class="gItem-vdTime">29:55</span>
-                                            </div>
-                                            <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
-                                            <div class="gItem-info">
-                                                <span>wantto玩徒</span>
-                                                <em>8</em>
-                                            </div>
-                                        </a>
-                                    </li>
-                                    <li class="g-col-gItem">
-                                        <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
-                                            <div class="gItem-pic">
-                                                <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
-                                                <div class="gItem-mask"></div>
-                                                <span class="gItem-tag">质量效应：仙女座</span>
-                                                <span class="gItem-vdIcon"></span>
-                                                <span class="gItem-vdTime">29:55</span>
-                                            </div>
-                                            <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
-                                            <div class="gItem-info">
-                                                <span>wantto玩徒</span>
-                                                <em>8</em>
-                                            </div>
-                                        </a>
-                                    </li>
-                                    <li class="g-col-gItem">
-                                        <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
-                                            <div class="gItem-pic">
-                                                <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
-                                                <div class="gItem-mask"></div>
-                                                <span class="gItem-tag">质量效应：仙女座</span>
-                                                <span class="gItem-vdIcon"></span>
-                                                <span class="gItem-vdTime">29:55</span>
-                                            </div>
-                                            <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
-                                            <div class="gItem-info">
-                                                <span>wantto玩徒</span>
-                                                <em>8</em>
-                                            </div>
-                                        </a>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div class="zq-col-504">
-                            <div class="part-title">
-                                <span>热门推荐游戏</span>
-                            </div>
-                            <div class="cloudplay-hot">
-                                <ul>
-                                    <li>
-                                        <div class="imgbox">
-                                            <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
-                                                <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
-                                                <p class="setnum">78</p>
-                                            </a>
-                                            <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
-                                                <div class="to-update">
-                                                    <p>07月25日更新至</p>
-                                                    <em>9</em>
+                        <div class="g-tab__bd clearfix">
+                            <div class="video-list clearfix mt-25">
+                                <div class="part-title">
+                                    <span>热门视频</span>
+                                </div>
+                                <div class="cloudplay-list">
+                                    <ul class="zq-cloudplay-list">
+                                        <li class="g-col-gItem item1">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
                                                 </div>
                                             </a>
-                                        </div>
-                                        <div class="txtbox">
-                                            <a href="//yun.duowan.com/game_237019/" target="_blank">
-                                                <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
-                                            </a>
-                                            <a href="//yun.duowan.com/up_543/" target="_blank">
-                                                <div class="release-info">
-                                                    <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
-                                                    <em>黑桐谷歌</em>
+                                        </li>
+                                        <li class="g-col-gItem item2">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
                                                 </div>
                                             </a>
-                                        </div>
-                                    </li>
-                                    <li>
-                                        <div class="imgbox">
-                                            <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
-                                                <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
-                                                <p class="setnum">78</p>
+                                        </li>
+                                        <li class="g-col-gItem item3">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
                                             </a>
-                                            <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
-                                                <div class="to-update">
-                                                    <p>07月25日更新至</p>
-                                                    <em>9</em>
+                                        </li>
+                                        <li class="g-col-gItem item4">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
                                                 </div>
                                             </a>
-                                        </div>
-                                        <div class="txtbox">
-                                            <a href="//yun.duowan.com/game_237019/" target="_blank">
-                                                <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                        </li>
+                                        <li class="g-col-gItem item5">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
                                             </a>
-                                            <a href="//yun.duowan.com/up_543/" target="_blank">
-                                                <div class="release-info">
-                                                    <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
-                                                    <em>黑桐谷歌</em>
+                                        </li>
+                                        <li class="g-col-gItem item6">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
                                                 </div>
                                             </a>
-                                        </div>
-                                    </li>
-                                    <li>
-                                        <div class="imgbox">
-                                            <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
-                                                <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
-                                                <p class="setnum">78</p>
+                                        </li>
+                                        <li class="g-col-gItem item7">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
                                             </a>
-                                            <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
-                                                <div class="to-update">
-                                                    <p>07月25日更新至</p>
-                                                    <em>9</em>
+                                        </li>
+                                        <li class="g-col-gItem item8">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
                                                 </div>
                                             </a>
-                                        </div>
-                                        <div class="txtbox">
-                                            <a href="//yun.duowan.com/game_237019/" target="_blank">
-                                                <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                        </li>
+                                        <li class="g-col-gItem item9">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
+                                                </div>
                                             </a>
-                                            <a href="//yun.duowan.com/up_543/" target="_blank">
-                                                <div class="release-info">
-                                                    <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
-                                                    <em>黑桐谷歌</em>
+                                        </li>
+                                        <li class="g-col-gItem item10">
+                                            <a href="//test-yun.duowan.com/up_610/77729.html" target="_blank">
+                                                <div class="gItem-pic">
+                                                    <img data-original="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" alt="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始" src="http://ojiastoreimage.bs2dl.huanjuyun.com/480x269/1534126230192_len25801.jpg" style="display: block;">
+                                                    <div class="gItem-mask"></div>
+                                                    <span class="gItem-tag">质量效应：仙女座</span>
+                                                    <span class="gItem-vdIcon"></span>
+                                                    <span class="gItem-vdTime">29:55</span>
+                                                </div>
+                                                <h3 class="gItem-title" title="【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始">【wantto玩徒】《质量效应：仙女座》中文剧情电影 - 第3集：冒险开始</h3>
+                                                <div class="gItem-info">
+                                                    <span>wantto玩徒</span>
+                                                    <em>8</em>
                                                 </div>
                                             </a>
-                                        </div>
-                                    </li>
-                                </ul>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="hot-list clearfix mt-25">
+                                <div class="part-title">
+                                    <span>热门推荐游戏</span>
+                                </div>
+                                <div class="cloudplay-hot">
+                                    <ul class="zq-cloudplay-hot">
+                                        <li class="item1">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                        <li class="item2">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                        <li class="item3">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                        <li class="item4">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                        <li class="item5">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                        <li class="item6">
+                                            <div class="imgbox">
+                                                <a href="//yun.duowan.com/up_543/76799.html" target="_blank" class="cover-img">
+                                                    <img data-original="http://screenshot.dwstatic.com/ojiastoreimage/92a0ba56c39cc57e85566e4b3382dd4a_size800x998_len129505.jpg" alt="" />
+                                                    <p class="setnum">78</p>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/76815.html" target="_blank" class="date-box">
+                                                    <div class="to-update">
+                                                        <p>07月25日更新至</p>
+                                                        <em>9</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="txtbox">
+                                                <a href="//yun.duowan.com/game_237019/" target="_blank">
+                                                    <h3 title="底特律：我欲成人">底特律：我欲成人</h3>
+                                                </a>
+                                                <a href="//yun.duowan.com/up_543/" target="_blank">
+                                                    <div class="release-info">
+                                                        <p><img src="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" data-original="http://screenshot.dwstatic.com/ojiasnsimage/1371d8a2bfed12117f27fbc5706ba3e4_len45392.jpg?imageview/0/w/150/h/150/format/jpg" alt="黑桐谷歌" style="display: block;"></p>
+                                                        <em>黑桐谷歌</em>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </li>
+                                    </ul>
+                                </div>
                             </div>
                         </div>
                     </div>

2017专区/PC单机/src/modules/page/artical.js

@@ -1,6 +1,7 @@
 var seaLoader = require('sealoader');
 var _ = require("underscore/underscore");
 require('artKeyword.js');
+require('jquery.lazyload');
 
 
 var PhotoSwipe = require('./photoswipe/photoswipe');
@@ -97,6 +98,11 @@ var catalog = {
 
 var V = {
    init: function() {
+       //图片懒加载
+       $("body img").lazyload({
+            failurelimit : 5,
+            skip_invisible : false
+        })
         catalog.init();
         M.getGameRank(2);
         M.getGameRank(3);

2017专区/PC单机/src/modules/page/artical2.js

@@ -1,5 +1,6 @@
 var seaLoader = require('sealoader');
 require('artKeyword.js');
+require('jquery.lazyload');
 
 var PhotoSwipe = require('./photoswipe/photoswipe');
 var PhotoSwipeUI_Default  = require('./photoswipe/photoswipe-ui-default');
@@ -57,6 +58,11 @@ var catalog = {
 
 var V = {
    init: function() {
+       //图片懒加载
+       $("body img").lazyload({
+            failurelimit : 5,
+            skip_invisible : false
+        })
        catalog.init();
        V.initPhotoSwipe();
 

2017专区/PC单机/src/sass/global.scss

@@ -891,288 +891,6 @@ body {
     }
 }
 
-.pc-index-cloudplay{
-    .zq-col-670{
-        width: 670px;
-        float: left;
-    }
-    .zq-col-504{
-        width: 504px;
-        float: right;
-    }
-    li{
-        a:hover{
-            text-decoration: none;
-        }
-    }
-    .part-title{
-        span{
-            font-size: 14px;
-            color: #66c0f4;
-            background: #131d29;
-            line-height: 30px;
-            padding: 0 12px;
-            display: inline-block;
-        }
-    }
-    .cloudplay-list{
-        ul{
-            width: 700px;
-            li{
-                height: 140px;
-                width: 157px;
-                float: left;
-                margin-right: 14px;
-                vertical-align: top;
-                font-size: 12px;
-                a{
-                    display: block;
-                    color: #e94646;
-                    &:hover{
-                        text-decoration: none;
-                        img{
-                            opacity: 0.85;
-                        }
-                        .gItem-title{
-                            padding: 2px 0 0px 0;
-                            height: 44px;
-                            color: #ff6600;
-                            white-space: normal;
-                        }
-                        .gItem-tag{
-                            top: 0;
-                        }
-                        .gItem-mask{
-                            opacity: 1;
-                        }
-                        .gItem-vdIcon{
-                            bottom: 5px;
-                        }
-                        .gItem-vdTime{
-                            bottom: 0;
-                        }
-                        .gItem-info{
-                            display: none;
-                        }
-                    }
-                }
-                .gItem-pic{
-                    height: 90px;
-                    overflow: hidden;
-                    position: relative;
-                    img{
-                        height: 100%;
-                        width: 100%;
-                        display: block;
-                        overflow: hidden;
-                        transition: opacity ease 300ms;
-                    }
-                }
-                .gItem-mask{
-                    position: absolute;
-                    background: url(../img/gItem-mask.png?__sprite) no-repeat;
-                    bottom: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 41px;
-                    z-index: 10;
-                    opacity: 0;
-                    transition: opacity 300ms ease;
-                }
-                .gItem-tag{
-                    padding: 0 5px;
-                    position: absolute;
-                    right: 0;
-                    top: -24px;
-                    width: auto;
-                    height: 24px;
-                    line-height: 24px;
-                    text-indent: 5px;
-                    color: #fff;
-                    overflow: hidden;
-                    background-color: transparent;
-                    background-color: rgba(0, 0, 0, .5);
-                    zoom: 1;
-                    z-index: 11;
-                    transition: all 300ms ease;
-                }
-                .gItem-vdIcon{
-                    position: absolute;
-                    z-index: 11;
-                    width: 24px;
-                    height: 24px;
-                    background: url(../img/gItem-vdIcon.png?__sprite) no-repeat;
-                    bottom: -24px;
-                    left: 5px;
-                    transition: all 300ms ease;
-                }
-                .gItem-vdTime{
-                    position: absolute;
-                    z-index: 11;
-                    right: 7px;
-                    bottom: -24px;
-                    line-height: 30px;
-                    color: #ffffff;
-                    font-size: 12px;
-                    transition: all 300ms ease;
-                }
-                .gItem-title{
-                    text-align: left;
-                    padding: 2px 0 3px 0;
-                    font-size: 12px;
-                    color: #c0d3e4;
-                    line-height: 23px;
-                    height: 23px;
-                    overflow: hidden;
-                    font-weight: normal;
-                    @include ellipsis();
-                }
-                .gItem-info{
-                    line-height: 18px;
-                    height: 18px;
-                    overflow: hidden;
-                    font-size: 12px;
-                    span{
-                        float: left;
-                        color: #839bb4;
-                        width: 100px;
-                        line-height: 18px;
-                        height: 18px;
-                        overflow: hidden;
-                    }
-                    em{
-                        float: right;
-                        color: #bbb;
-                        padding-left: 18px;
-                        background: url(../img/gItem-vdIcon2.png?__sprite) 0 4px no-repeat;
-                    }
-                }
-            }
-        }
-    }
-    .cloudplay-hot{
-        ul{
-            width: 520px;
-            li{
-                height: 276px;
-                width: 158px;
-                background: #223c4d;
-                border-bottom-left-radius: 3px;
-                border-bottom-right-radius: 3px;
-                overflow: hidden;
-                float: left;
-                margin-right: 15px;
-                .imgbox{
-                    height: 219px;
-                    width: 100%;
-                    overflow: hidden;
-                    position: relative;
-                    background: #000402;
-                    a{
-                        transition: opacity ease 0.2s;
-                    }
-                    &:hover{
-                        a{
-                            opacity: 0.9;
-                            filter: alpha(opacity=90);
-                        }
-                    }
-                    .cover-img{
-                        height: 193px;
-                        display: block;
-                        img{
-                            height: 100%;
-                            width: 100%;
-                            display: block;
-                        }
-                        .setnum{
-                            height: 28px;
-                            width: 24px;
-                            background: url(/src/img/bg-setnum.png?__sprite) no-repeat;
-                            position: absolute;
-                            top: 7px;
-                            left: 8px;
-                            font-size: 12px;
-                            color: #fff;
-                            line-height: 28px;
-                            text-align: center;
-                            text-shadow: 0 2px 3px rgba(0,0,0,0.69);
-                        }
-                    }
-                    .date-box{
-                        display: block;
-                        background: #000402;
-                        .to-update{
-                            width: 145px;
-                            margin: 0 auto;
-                            font-size: 12px;
-                            line-height: 26px;
-                            text-align: center;
-                            color: #fff;
-                            overflow: hidden;
-                            p{
-                                height: 100%;
-                                width: 110px;
-                                background: #000;
-                                background: rgba(0,0,0,0.8);
-                                float: left;
-                            }
-                            em{
-                                width: 35px;
-                                float: left;
-                                display: block;
-                                color: #fff;
-                                background: #FF263A;
-                                background: rgba(255,38,58,0.9);
-                                transition: background 0.35s;
-                                &:hover{
-                                    background: #FF263A;
-                                }
-                            }
-                        }
-                    }
-                }
-                .txtbox{
-                    padding: 2px 6px 0 8px;
-                    h3,em{
-                        @include ellipsis;
-                        color: #97c8e6;
-                    }
-                    h3{
-                        font-size: 14px;
-                        line-height: 30px;
-                        &:hover{
-                            color: #ff6600;
-                        }
-                    }
-                    .release-info{
-                        overflow: hidden;
-                        p{
-                            height: 16px;
-                            width: 16px;
-                            float: left;
-                            overflow: hidden;
-                            border-radius: 100%;
-                            margin-right: 10px;
-                            img{
-                                height: 100%;
-                                width: 100%;
-                                display: block;
-                            }
-                        }
-                        em{
-                            width: 103px;
-                            float: left;
-                            display: block;
-                            font-size: 12px;
-                            line-height: 16px;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
 
 .pc-index-relate{
     .zq-col-438{
@@ -1247,7 +965,379 @@ body {
     }
 }
 
+.pc-index-cloudplay{
+    .video-list{
+        width: 670px;
+        float: left;
+    }
+    .hot-list{
+        width: 504px;
+        float: right;
+    }
+    li{
+        a:hover{
+            text-decoration: none;
+        }
+    }
+    .cloudplay-list{
+        .zq-cloudplay-list{
+            width: 700px;
+            li{
+                &.item9,&.item10{
+                    display: none;
+                }
+            }
+        }
+    }
+    .cloudplay-hot{
+        .zq-cloudplay-hot{
+            width: 520px;
+            li{
+                &.item4,&.item5,&.item6{
+                    display: none;
+                }
+            }
+        }
+    }
+}
+.zq-cloudplay-list{
+    li{
+        height: 140px;
+        width: 157px;
+        float: left;
+        margin-right: 14px;
+        vertical-align: top;
+        font-size: 12px;
+        a{
+            display: block;
+            color: #e94646;
+            &:hover{
+                text-decoration: none;
+                img{
+                    opacity: 0.85;
+                }
+                .gItem-title{
+                    padding: 2px 0 0px 0;
+                    height: 44px;
+                    color: #ff6600;
+                    white-space: normal;
+                }
+                .gItem-tag{
+                    top: 0;
+                }
+                .gItem-mask{
+                    opacity: 1;
+                }
+                .gItem-vdIcon{
+                    bottom: 5px;
+                }
+                .gItem-vdTime{
+                    bottom: 0;
+                }
+                .gItem-info{
+                    display: none;
+                }
+            }
+        }
+        .gItem-pic{
+            height: 90px;
+            overflow: hidden;
+            position: relative;
+            img{
+                height: 100%;
+                width: 100%;
+                display: block;
+                overflow: hidden;
+                transition: opacity ease 300ms;
+            }
+        }
+        .gItem-mask{
+            position: absolute;
+            background: url(../img/gItem-mask.png?__sprite) repeat-x;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 41px;
+            z-index: 10;
+            opacity: 0;
+            transition: opacity 300ms ease;
+        }
+        .gItem-tag{
+            padding: 0 5px;
+            position: absolute;
+            right: 0;
+            top: -24px;
+            width: auto;
+            height: 24px;
+            line-height: 24px;
+            text-indent: 5px;
+            color: #fff;
+            overflow: hidden;
+            background-color: transparent;
+            background-color: rgba(0, 0, 0, .5);
+            zoom: 1;
+            z-index: 11;
+            transition: all 300ms ease;
+        }
+        .gItem-vdIcon{
+            position: absolute;
+            z-index: 11;
+            width: 24px;
+            height: 24px;
+            background: url(../img/gItem-vdIcon.png?__sprite) no-repeat;
+            bottom: -24px;
+            left: 5px;
+            transition: all 300ms ease;
+        }
+        .gItem-vdTime{
+            position: absolute;
+            z-index: 11;
+            right: 7px;
+            bottom: -24px;
+            line-height: 30px;
+            color: #ffffff;
+            font-size: 12px;
+            transition: all 300ms ease;
+        }
+        .gItem-title{
+            text-align: left;
+            padding: 2px 0 3px 0;
+            font-size: 12px;
+            color: #c0d3e4;
+            line-height: 23px;
+            height: 23px;
+            overflow: hidden;
+            font-weight: normal;
+            @include ellipsis();
+        }
+        .gItem-info{
+            line-height: 18px;
+            height: 18px;
+            overflow: hidden;
+            font-size: 12px;
+            span{
+                float: left;
+                color: #839bb4;
+                width: 100px;
+                line-height: 18px;
+                height: 18px;
+                overflow: hidden;
+            }
+            em{
+                float: right;
+                color: #bbb;
+                padding-left: 18px;
+                background: url(../img/gItem-vdIcon2.png?__sprite) 0 4px no-repeat;
+            }
+        }
+    }
+}
+.zq-cloudplay-hot{
+    li{
+        height: 276px;
+        width: 158px;
+        background: #223c4d;
+        border-bottom-left-radius: 3px;
+        border-bottom-right-radius: 3px;
+        overflow: hidden;
+        float: left;
+        margin-right: 15px;
+        .imgbox{
+            height: 219px;
+            width: 100%;
+            overflow: hidden;
+            position: relative;
+            background: #000402;
+            a{
+                transition: opacity ease 0.2s;
+            }
+            &:hover{
+                a{
+                    opacity: 0.9;
+                    filter: alpha(opacity=90);
+                }
+            }
+            .cover-img{
+                height: 193px;
+                display: block;
+                overflow: hidden;
+                img{
+                    height: 100%;
+                    width: 100%;
+                    display: block;
+                }
+                .setnum{
+                    height: 28px;
+                    width: 24px;
+                    background: url(/src/img/bg-setnum.png?__sprite) no-repeat;
+                    position: absolute;
+                    top: 7px;
+                    left: 8px;
+                    font-size: 12px;
+                    color: #fff;
+                    line-height: 28px;
+                    text-align: center;
+                    text-shadow: 0 2px 3px rgba(0,0,0,0.69);
+                }
+            }
+            .date-box{
+                display: block;
+                background: #000402;
+                overflow: hidden;
+                .to-update{
+                    width: 145px;
+                    margin: 0 auto;
+                    font-size: 12px;
+                    line-height: 26px;
+                    text-align: center;
+                    color: #fff;
+                    overflow: hidden;
+                    p{
+                        height: 100%;
+                        width: 110px;
+                        background: #000;
+                        background: rgba(0,0,0,0.8);
+                        float: left;
+                    }
+                    em{
+                        width: 35px;
+                        float: left;
+                        display: block;
+                        color: #fff;
+                        background: #FF263A;
+                        background: rgba(255,38,58,0.9);
+                        transition: background 0.35s;
+                        &:hover{
+                            background: #FF263A;
+                        }
+                    }
+                }
+            }
+        }
+        .txtbox{
+            padding: 2px 6px 0 8px;
+            h3,em{
+                @include ellipsis;
+                color: #97c8e6;
+            }
+            h3{
+                font-size: 14px;
+                line-height: 30px;
+                &:hover{
+                    color: #ff6600;
+                }
+            }
+            .release-info{
+                overflow: hidden;
+                p{
+                    height: 16px;
+                    width: 16px;
+                    float: left;
+                    overflow: hidden;
+                    border-radius: 100%;
+                    margin-right: 10px;
+                    img{
+                        height: 100%;
+                        width: 100%;
+                        display: block;
+                    }
+                }
+                em{
+                    width: 103px;
+                    float: left;
+                    display: block;
+                    font-size: 12px;
+                    line-height: 16px;
+                }
+            }
+        }
+    }
+}
+.narrow-screen,.wide-screen{
+    .zq-cloudplay-list{
+        width: 950px;
+        li{
+            height: 145px;
+            width: 170px;
+            margin-right: 20px;
+            .gItem-pic{
+                height: 95px;
+            }
+        }
+    }
+    .zq-cloudplay-hot{
+        width: 960px;
+        li{
+            height: 229px;
+            width: 138px;
+            margin-right: 20px;
+            .imgbox{
+                height: 172px;
+                .cover-img{
+                    height: 172px;
+                    img{
+                        height: auto;
+                        min-height: 100%;
+                    }
+                }
+                .date-box{
+                    background: none;
+                    position: absolute;
+                    bottom: 4px;
+                    left: 4px;
+                    .to-update{
+                        width: 130px;
+                        p{
+                            width: 100px;
+                        }
+                        em{
+                            width: 30px;
+                        }
+                    }
+                }
+            }
+            .txtbox{
+                a:hover{
+                    text-decoration: none;
+                }
+                .release-info{
+                    p{
+                        margin-right: 7px;
+                    }
+                    em{
+                        width: 101px;
+                    }
+                }
+            }
+        }
+    }
+}
+.wide-screen{
+    .hot-list,.part-title{
+        display: none;
+    }
+    .zq-cloudplay-list{
+        width: 760px;
+        li{
+            &.item9,&.item10{
+                display: none;
+            }
+        }
+    }
+}
 
+.g-tab__bd{
+    .part-title{
+        span{
+            font-size: 14px;
+            color: #66c0f4;
+            background: #131d29;
+            line-height: 30px;
+            padding: 0 12px;
+            display: inline-block;
+        }
+    }
+}
 
 .ZQ__map{
     background-color: #EAEAEA;

2018专题/球球大作战竞猜/src/_pubswiper.html

@@ -15,7 +15,7 @@
 </head>
 <body>
     <!-- 押注 -->
-    <div class="qq-pub-stake theme-green" data-acid="5" data-ind="106">
+    <div class="qq-pub-stake theme-green" data-acid="22" data-ind="106">
     </div>
 
     <script src="lib/mod.js"></script>

2018专题/球球大作战竞猜/src/sass/index/global.scss

@@ -567,7 +567,7 @@ $contBgColor: #061529;
         text-align: left;
         border-bottom: 1px dashed $borderColor;
         span{
-            margin: 0 10px;
+            margin: 0 24px;
         }
     }
     .info_res{

2018专题/球球大作战竞猜/src/sass/pubswiper/pubswiper.scss

@@ -49,7 +49,7 @@ $contBgColor: #061529;
         text-align: left;
         border-bottom: 1px dashed $borderColor;
         span{
-            margin: 0 10px;
+            margin: 0 24px;
         }
     }
     .info_res{
@@ -100,6 +100,7 @@ $contBgColor: #061529;
                 color: #84ade3;
                 margin-top: 6px;
                 text-align: center;
+                width: 35px;
             }
         }
         @for $i from 1 through 3{

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

@@ -48,21 +48,21 @@
                                 <div class="rank clearfix rank1">
                                     <i class="icon"></i>
                                     <div class="cover">
-                                        <img src="http://pub.dwstatic.com/zt2018/qiuJC//img/tbd.png" alt="">
+                                        <img src="http://pub.dwstatic.com/zt2018/qiuJC//img/tbd-green.png" alt="">
                                     </div>
                                     <p>待定</p>
                                 </div>
                                 <div class="rank clearfix rank2">
                                     <i class="icon"></i>
                                     <div class="cover">
-                                        <img src="http://pub.dwstatic.com/zt2018/qiuJC//img/tbd.png" alt="">
+                                        <img src="http://pub.dwstatic.com/zt2018/qiuJC//img/tbd-green.png" alt="">
                                     </div>
                                     <p>待定</p>
                                 </div>
                                 <div class="rank clearfix rank3">
                                     <i class="icon"></i>
                                     <div class="cover">
-                                        <img src="http://pub.dwstatic.com/zt2018/qiuJC//img/tbd.png" alt="">
+                                        <img src="http://pub.dwstatic.com/zt2018/qiuJC//img/tbd-green.png" alt="">
                                     </div>
                                     <p>待定</p>
                                 </div>