Kaynağa Gözat

幻想全明星首页改动

sa03 6 yıl önce
ebeveyn
işleme
b17b458cfa

+ 4 - 0
2018专区/幻想全明星/src/_index.html

@@ -545,6 +545,10 @@
                 </div>
             </div>
 
+            <link rel="import" href="modules/hero/hero2.html?__inline">
+
+            <link rel="import" href="modules/hero/hero2.html?__inline">
+
             <div class="dw-mod-news mt-60">
                 <ul class="list-type clearfix">
                     <li class="item-type g-col g-col-368">

+ 1145 - 0
2018专区/幻想全明星/src/modules/hero/hero2.html

@@ -0,0 +1,1145 @@
+<!--英雄视频-->
+<div class="dw-mod-hero" data-type="mod-hero2">
+    <div class="g-ui-tab" data-role="tab-demo1">
+        <div class="g-tab__hd">
+            <h2>道具资料
+                <i></i>
+            </h2>
+            <ul class="g-tab__nav" data-switchable-role="nav">
+                <li class="g-tab__trigger is-active" data-tag="all">
+                    <a>全部</a>
+                </li>
+                <li class="g-tab__trigger" data-tag="gj">
+                    <a>攻击</a>
+                </li>
+                <li class="g-tab__trigger" data-tag="fy">
+                    <a>防御</a>
+                </li>
+                <li class="g-tab__trigger" data-tag="ty">
+                    <a>通用</a>
+                </li>
+                <li class="g-tab__trigger" data-tag="xh">
+                    <a>消耗</a>
+                </li>
+                <li class="g-tab__trigger" data-tag="yd">
+                    <a>移动</a>
+                </li>
+            </ul>
+            <div class="g-tab__ext g-lineList">
+                <div class="search-wrap">
+                    <input type="text" placeholder="请输入你想要搜索的道具名" class="search-text">
+                    <i class="btn-search icon-search"></i>
+                </div>
+            </div>
+        </div>
+        <div class="g-tab__bd" data-switchable-role="content">
+            <div class="g-tab__panel">
+                <ul class="list-hero">
+                    <li class="yd">
+                        <a href="http://acmoba.duowan.com/1711/374064059519.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img1.dwstatic.com/acmoba/djzl/ydsd/01.png" alt="鞋子">
+                            </span>
+                            <span class="name">鞋子</span>
+                        </a>
+                    </li>
+                    <li class="yd">
+                        <a href="http://acmoba.duowan.com/1711/374064381797.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/ydsd/02.png" alt="疾风之鞋">
+                            </span>
+                            <span class="name">疾风之鞋</span>
+                        </a>
+                    </li>
+                    <li class="yd">
+                        <a href="http://acmoba.duowan.com/1711/374064447007.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/ydsd/03.png" alt="相位双子">
+                            </span>
+                            <span class="name">相位双子</span>
+                        </a>
+                    </li>
+                    <li class="yd">
+                        <a href="http://acmoba.duowan.com/1711/374064478840.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/ydsd/04.png" alt="空间跑鞋">
+                            </span>
+                            <span class="name">空间跑鞋</span>
+                        </a>
+                    </li>
+                    <li class="yd">
+                        <a href="http://acmoba.duowan.com/1711/374064545315.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/ydsd/05.png" alt="轻灵便鞋">
+                            </span>
+                            <span class="name">轻灵便鞋</span>
+                        </a>
+                    </li>
+                    <li class="yd">
+                        <a href="http://acmoba.duowan.com/1711/374064576416.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img5.dwstatic.com/acmoba/djzl/ydsd/06.png" alt="精灵系足">
+                            </span>
+                            <span class="name">精灵系足</span>
+                        </a>
+                    </li>
+                    <li class="yd">
+                        <a href="http://acmoba.duowan.com/1711/374064614397.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/ydsd/07.png" alt="神言木屐">
+                            </span>
+                            <span class="name">神言木屐</span>
+                        </a>
+                    </li>
+                    <li class="yd">
+                        <a href="http://acmoba.duowan.com/1711/374064659588.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img.dwstatic.com/acmoba/djzl/ydsd/08.png" alt="大地之鞋">
+                            </span>
+                            <span class="name">大地之鞋</span>
+                        </a>
+                    </li>
+                    <li class="yd">
+                        <a href="http://acmoba.duowan.com/1711/374064690692.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/ydsd/09.png" alt="灭想之靴">
+                            </span>
+                            <span class="name">灭想之靴</span>
+                        </a>
+                    </li>
+                    <li class="yd">
+                        <a href="http://acmoba.duowan.com/1711/374064729048.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img.dwstatic.com/acmoba/djzl/ydsd/10.png" alt="勇者战靴">
+                            </span>
+                            <span class="name">勇者战靴</span>
+                        </a>
+                    </li>
+                    <li class="yd">
+                        <a href="http://acmoba.duowan.com/1711/374064761214.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img1.dwstatic.com/acmoba/djzl/ydsd/11.png" alt="禁魔下封">
+                            </span>
+                            <span class="name">禁魔下封</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374002034629.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img1.dwstatic.com/acmoba/djzl/gjzb/01.png" alt="重剑">
+                            </span>
+                            <span class="name">重剑</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374002180119.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/gjzb/02.png" alt="闪耀之石">
+                            </span>
+                            <span class="name">闪耀之石</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374002226759.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/gjzb/03.png" alt="战斗尖刺">
+                            </span>
+                            <span class="name">战斗尖刺</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374002261626.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img1.dwstatic.com/acmoba/djzl/gjzb/04.png" alt="粗制铁剑">
+                            </span>
+                            <span class="name">粗制铁剑</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374002306021.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/gjzb/05.png" alt="长柄薙刀">
+                            </span>
+                            <span class="name">长柄薙刀</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374002344510.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/gjzb/06.png" alt="战镰">
+                            </span>
+                            <span class="name">战镰</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374002387920.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img.dwstatic.com/acmoba/djzl/gjzb/07.png" alt="长剑">
+                            </span>
+                            <span class="name">长剑</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374002423080.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img5.dwstatic.com/acmoba/djzl/gjzb/08.png" alt="雪女饰物">
+                            </span>
+                            <span class="name">雪女饰物</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374002460221.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img1.dwstatic.com/acmoba/djzl/gjzb/09.png" alt="风之刃">
+                            </span>
+                            <span class="name">风之刃</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374002495631.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/gjzb/10.png" alt="脉冲之剑">
+                            </span>
+                            <span class="name">脉冲之剑</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374002531250.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img5.dwstatic.com/acmoba/djzl/gjzb/11.png" alt="蜻蜓切">
+                            </span>
+                            <span class="name">蜻蜓切</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374003156580.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/gjzb/12.png" alt="魔法之刺">
+                            </span>
+                            <span class="name">魔法之刺</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374003415597.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img5.dwstatic.com/acmoba/djzl/gjzb/13.png" alt="灵能枪">
+                            </span>
+                            <span class="name">灵能枪</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374003452880.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img.dwstatic.com/acmoba/djzl/gjzb/14.png" alt="大太刀">
+                            </span>
+                            <span class="name">大太刀</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374003489775.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/gjzb/15.png" alt="十字枪">
+                            </span>
+                            <span class="name">十字枪</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374003526379.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/gjzb/16.png" alt="秘银轻剑">
+                            </span>
+                            <span class="name">秘银轻剑</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374003618209.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img5.dwstatic.com/acmoba/djzl/gjzb/17.png" alt="双手重剑">
+                            </span>
+                            <span class="name">双手重剑</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374003651170.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/gjzb/18.png" alt="附魔短剑">
+                            </span>
+                            <span class="name">附魔短剑</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374003687889.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/gjzb/19.png" alt="符文剑">
+                            </span>
+                            <span class="name">符文剑</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374003721108.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img1.dwstatic.com/acmoba/djzl/gjzb/20.png" alt="铁制大棒">
+                            </span>
+                            <span class="name">铁制大棒</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374003758229.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/gjzb/21.png" alt="重锤">
+                            </span>
+                            <span class="name">重锤</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374003811282.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/gjzb/22.png" alt="迷你八卦炉">
+                            </span>
+                            <span class="name">迷你八卦炉</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374003850350.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/gjzb/23.png" alt="咒缚魔杖">
+                            </span>
+                            <span class="name">咒缚魔杖</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374003907958.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img5.dwstatic.com/acmoba/djzl/gjzb/24.png" alt="风纹群矢">
+                            </span>
+                            <span class="name">风纹群矢</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374003953734.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/gjzb/25.png" alt="蓝石戒指">
+                            </span>
+                            <span class="name">蓝石戒指</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374003994497.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/gjzb/26.png" alt="冰霜结晶">
+                            </span>
+                            <span class="name">冰霜结晶</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374004031488.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img5.dwstatic.com/acmoba/djzl/gjzb/27.png" alt="闪光神言">
+                            </span>
+                            <span class="name">闪光神言</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374004076589.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/gjzb/28.png" alt="反冲弹簧">
+                            </span>
+                            <span class="name">反冲弹簧</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374004117811.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/gjzb/29.png" alt="岚之杖">
+                            </span>
+                            <span class="name">岚之杖</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374004153111.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img1.dwstatic.com/acmoba/djzl/gjzb/30.png" alt="堕天使之叹">
+                            </span>
+                            <span class="name">堕天使之叹</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374004212853.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/gjzb/31.png" alt="圣剑EXcalibur">
+                            </span>
+                            <span class="name">圣剑EXcalibur</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374004278086.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/gjzb/32.png" alt="天丛云剑">
+                            </span>
+                            <span class="name">天丛云剑</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374004324143.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img.dwstatic.com/acmoba/djzl/gjzb/33.png" alt="妖刀村正">
+                            </span>
+                            <span class="name">妖刀村正</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374004365739.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img1.dwstatic.com/acmoba/djzl/gjzb/34.png" alt="破魔的红蔷薇">
+                            </span>
+                            <span class="name">破魔的红蔷薇</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374004406659.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img.dwstatic.com/acmoba/djzl/gjzb/35.png" alt="刺穿死棘之枪">
+                            </span>
+                            <span class="name">刺穿死棘之枪</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374004446036.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/gjzb/36.png" alt="死神之镰">
+                            </span>
+                            <span class="name">死神之镰</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374004486691.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/gjzb/37.png" alt="斩首镰">
+                            </span>
+                            <span class="name">斩首镰</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374004544480.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img.dwstatic.com/acmoba/djzl/gjzb/38.png" alt="慈悲的卡提那">
+                            </span>
+                            <span class="name">慈悲的卡提那</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374004585373.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/gjzb/39.png" alt="施术者之杖">
+                            </span>
+                            <span class="name">施术者之杖</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374004633194.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/gjzb/40.png" alt="火陨">
+                            </span>
+                            <span class="name">火陨</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374004757437.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/gjzb/41.png" alt="噬魂之镰">
+                            </span>
+                            <span class="name">噬魂之镰</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374004801141.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/gjzb/42.png" alt="逐风之剑">
+                            </span>
+                            <span class="name">逐风之剑</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374004853114.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/gjzb/43.png" alt="烈焰魔剑莱瓦汀">
+                            </span>
+                            <span class="name">烈焰魔剑莱瓦汀</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374004897172.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/gjzb/44.png" alt="无限之剑">
+                            </span>
+                            <span class="name">无限之剑</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374004938540.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/gjzb/45.png" alt="刺客袖剑">
+                            </span>
+                            <span class="name">刺客袖剑</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374004996375.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img.dwstatic.com/acmoba/djzl/gjzb/46.png" alt="屠龙剑巴鲁姆克">
+                            </span>
+                            <span class="name">屠龙剑巴鲁姆克</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374005033163.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img.dwstatic.com/acmoba/djzl/gjzb/47.png" alt="极速之影">
+                            </span>
+                            <span class="name">极速之影</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374005070556.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/gjzb/48.png" alt="闪烁之光">
+                            </span>
+                            <span class="name">闪烁之光</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374005111803.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img.dwstatic.com/acmoba/djzl/gjzb/49.png" alt="断斩之剪">
+                            </span>
+                            <span class="name">断斩之剪</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374005176991.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img.dwstatic.com/acmoba/djzl/gjzb/50.png" alt="必灭的黄蔷薇">
+                            </span>
+                            <span class="name">必灭的黄蔷薇</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374005240123.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img1.dwstatic.com/acmoba/djzl/gjzb/51.png" alt="宝石剑泽尔里奇">
+                            </span>
+                            <span class="name">宝石剑泽尔里奇</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374005308690.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/gjzb/52.png" alt="噬魂魔戒">
+                            </span>
+                            <span class="name">噬魂魔戒</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374005359429.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img1.dwstatic.com/acmoba/djzl/gjzb/53.png" alt="能量涡轮">
+                            </span>
+                            <span class="name">能量涡轮</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374005399025.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img1.dwstatic.com/acmoba/djzl/gjzb/54.png" alt="雷神之锤">
+                            </span>
+                            <span class="name">雷神之锤</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374005438673.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/gjzb/55.png" alt="毁灭之锤">
+                            </span>
+                            <span class="name">毁灭之锤</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374005476223.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/gjzb/56.png" alt="X手套">
+                            </span>
+                            <span class="name">X手套</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374005554736.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/gjzb/57.png" alt="赤龙帝的笼手">
+                            </span>
+                            <span class="name">赤龙帝的笼手</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374005613202.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/gjzb/58.png" alt="寒铁棍">
+                            </span>
+                            <span class="name">寒铁棍</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374005660724.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img1.dwstatic.com/acmoba/djzl/gjzb/59.png" alt="特斯拉电棍">
+                            </span>
+                            <span class="name">特斯拉电棍</span>
+                        </a>
+                    </li>
+                    <li class="gj">
+                        <a href="http://acmoba.duowan.com/1711/374005718791.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img.dwstatic.com/acmoba/djzl/gjzb/60.png" alt="商神权杖">
+                            </span>
+                            <span class="name">商神权杖</span>
+                        </a>
+                    </li>
+                    <li class="xh">
+                        <a href="http://acmoba.duowan.com/1711/373997663296.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/xhp/01.png" alt="治愈水晶">
+                            </span>
+                            <span class="name">治愈水晶</span>
+                        </a>
+                    </li>
+                    <li class="xh">
+                        <a href="http://acmoba.duowan.com/1711/373998141507.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img5.dwstatic.com/acmoba/djzl/xhp/02.png" alt="魔法水晶">
+                            </span>
+                            <span class="name">魔法水晶</span>
+                        </a>
+                    </li>
+                    <li class="xh">
+                        <a href="http://acmoba.duowan.com/1711/373998217575.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img1.dwstatic.com/acmoba/djzl/xhp/03.png" alt="真视守卫">
+                            </span>
+                            <span class="name">真视守卫</span>
+                        </a>
+                    </li>
+                    <li class="xh">
+                        <a href="http://acmoba.duowan.com/1711/373998264637.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/xhp/04.png" alt="巨兽果实">
+                            </span>
+                            <span class="name">巨兽果实</span>
+                        </a>
+                    </li>
+                    <li class="xh">
+                        <a href="http://acmoba.duowan.com/1711/373998302117.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/xhp/05.png" alt="疯狂果实">
+                            </span>
+                            <span class="name">疯狂果实</span>
+                        </a>
+                    </li>
+                    <li class="xh">
+                        <a href="http://acmoba.duowan.com/1711/373998346056.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/xhp/06.png" alt="燃烧果实">
+                            </span>
+                            <span class="name">燃烧果实</span>
+                        </a>
+                    </li>
+                    <li class="xh">
+                        <a href="http://acmoba.duowan.com/1711/373998408379.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/xhp/07.png" alt="时间果实">
+                            </span>
+                            <span class="name">时间果实</span>
+                        </a>
+                    </li>
+                    <li class="xh">
+                        <a href="http://acmoba.duowan.com/1711/373998452855.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img1.dwstatic.com/acmoba/djzl/xhp/08.png" alt="真实果实">
+                            </span>
+                            <span class="name">真实果实</span>
+                        </a>
+                    </li>
+                    <li class="xh">
+                        <a href="http://acmoba.duowan.com/1711/373998506991.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img.dwstatic.com/acmoba/djzl/xhp/09.png" alt="守护者印记">
+                            </span>
+                            <span class="name">守护者印记</span>
+                        </a>
+                    </li>
+                    <li class="xh">
+                        <a href="http://acmoba.duowan.com/1711/373998545427.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/xhp/10.png" alt="破坏者印记">
+                            </span>
+                            <span class="name">破坏者印记</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374062227611.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img.dwstatic.com/acmoba/djzl/tyzb/01.png" alt="符石">
+                            </span>
+                            <span class="name">符石</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374062415330.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/tyzb/02.png" alt="剑鞘残片">
+                            </span>
+                            <span class="name">剑鞘残片</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374062538725.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/tyzb/03.png" alt="魂玉碎片">
+                            </span>
+                            <span class="name">魂玉碎片</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374062573641.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/tyzb/04.png" alt="能量魔石">
+                            </span>
+                            <span class="name">能量魔石</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374062641200.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/tyzb/05.png" alt="科技核心">
+                            </span>
+                            <span class="name">科技核心</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374062683817.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img.dwstatic.com/acmoba/djzl/tyzb/06.png" alt="妖精容器">
+                            </span>
+                            <span class="name">妖精容器</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374062753351.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img1.dwstatic.com/acmoba/djzl/tyzb/07.png" alt="精灵树持节">
+                            </span>
+                            <span class="name">精灵树持节</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374062789730.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img5.dwstatic.com/acmoba/djzl/tyzb/08.png" alt="怨毒娃娃">
+                            </span>
+                            <span class="name">怨毒娃娃</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374062845263.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/tyzb/09.png" alt="巫术御札">
+                            </span>
+                            <span class="name">巫术御札</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374062897033.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img.dwstatic.com/acmoba/djzl/tyzb/10.png" alt="和燃焰火">
+                            </span>
+                            <span class="name">和燃焰火</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374062942503.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/tyzb/11.png" alt="祈歌之赞">
+                            </span>
+                            <span class="name">祈歌之赞</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374063074493.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/tyzb/12.png" alt="晴天储钱罐">
+                            </span>
+                            <span class="name">晴天储钱罐</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374063131201.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/tyzb/13.png" alt="便携式小玩具">
+                            </span>
+                            <span class="name">便携式小玩具</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374063207908.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img5.dwstatic.com/acmoba/djzl/tyzb/14.png" alt="追踪眼镜">
+                            </span>
+                            <span class="name">追踪眼镜</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374063274953.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/tyzb/15.png" alt="英勇之兆">
+                            </span>
+                            <span class="name">英勇之兆</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374063317396.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img.dwstatic.com/acmoba/djzl/tyzb/16.png" alt="蓝金钱御守">
+                            </span>
+                            <span class="name">蓝金钱御守</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374063613982.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/tyzb/17.png" alt="红金钱御守">
+                            </span>
+                            <span class="name">红金钱御守</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374063650828.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img1.dwstatic.com/acmoba/djzl/tyzb/18.png" alt="碧雀">
+                            </span>
+                            <span class="name">碧雀</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374063831511.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/tyzb/19.png" alt="贪婪手刃">
+                            </span>
+                            <span class="name">贪婪手刃</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374063869435.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img5.dwstatic.com/acmoba/djzl/tyzb/20.png" alt="勇者羽翼">
+                            </span>
+                            <span class="name">勇者羽翼</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374063907088.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img.dwstatic.com/acmoba/djzl/tyzb/21.png" alt="充能型电磁炮">
+                            </span>
+                            <span class="name">充能型电磁炮</span>
+                        </a>
+                    </li>
+                    <li class="ty">
+                        <a href="http://acmoba.duowan.com/1711/374063999545.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/tyzb/22.png" alt="猎人护臂">
+                            </span>
+                            <span class="name">猎人护臂</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/373998638929.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/fyzb/01.png" alt="木板盾">
+                            </span>
+                            <span class="name">木板盾</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/373999795792.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/fyzb/02.png" alt="勇者披肩">
+                            </span>
+                            <span class="name">勇者披肩</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/373999963280.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img5.dwstatic.com/acmoba/djzl/fyzb/03.png" alt="防弹内衬">
+                            </span>
+                            <span class="name">防弹内衬</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374000070366.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img5.dwstatic.com/acmoba/djzl/fyzb/04.png" alt="铁盾">
+                            </span>
+                            <span class="name">铁盾</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374000105972.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/fyzb/05.png" alt="辟魔长袍">
+                            </span>
+                            <span class="name">辟魔长袍</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374000149706.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/fyzb/06.png" alt="魔能护盾">
+                            </span>
+                            <span class="name">魔能护盾</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374000193029.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/fyzb/07.png" alt="圣职之袍">
+                            </span>
+                            <span class="name">圣职之袍</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374000234127.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img5.dwstatic.com/acmoba/djzl/fyzb/08.png" alt="武侦制服">
+                            </span>
+                            <span class="name">武侦制服</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374000386685.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/fyzb/09.png" alt="崩玉碎片">
+                            </span>
+                            <span class="name">崩玉碎片</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374000430197.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img1.dwstatic.com/acmoba/djzl/fyzb/10.png" alt="秘银盾">
+                            </span>
+                            <span class="name">秘银盾</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374000463583.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img2.dwstatic.com/acmoba/djzl/fyzb/11.png" alt="秘银甲">
+                            </span>
+                            <span class="name">秘银甲</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374000494079.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/fyzb/12.png" alt="青铜圣衣">
+                            </span>
+                            <span class="name">青铜圣衣</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374000531261.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img.dwstatic.com/acmoba/djzl/fyzb/13.png" alt="八咫镜">
+                            </span>
+                            <span class="name">八咫镜</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374000586984.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/fyzb/14.png" alt="庇护宝玉">
+                            </span>
+                            <span class="name">庇护宝玉</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374000655268.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img.dwstatic.com/acmoba/djzl/fyzb/15.png" alt="鲜血神衣">
+                            </span>
+                            <span class="name">鲜血神衣</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374000704206.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img1.dwstatic.com/acmoba/djzl/fyzb/16.png" alt="死神死霸装">
+                            </span>
+                            <span class="name">死神死霸装</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374000762212.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img.dwstatic.com/acmoba/djzl/fyzb/17.png" alt="血族斗篷">
+                            </span>
+                            <span class="name">血族斗篷</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374000811438.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img5.dwstatic.com/acmoba/djzl/fyzb/18.png" alt="教皇之袍">
+                            </span>
+                            <span class="name">教皇之袍</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374000856881.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img1.dwstatic.com/acmoba/djzl/fyzb/19.png" alt="移动教会">
+                            </span>
+                            <span class="name">移动教会</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374000904133.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/fyzb/20.png" alt="狂战士铠甲">
+                            </span>
+                            <span class="name">狂战士铠甲</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374000958053.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/fyzb/21.png" alt="黑暗之心">
+                            </span>
+                            <span class="name">黑暗之心</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374001645703.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/fyzb/22.png" alt="太阳之铠">
+                            </span>
+                            <span class="name">太阳之铠</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374001681028.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/fyzb/23.png" alt="月镜盾">
+                            </span>
+                            <span class="name">月镜盾</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374001756469.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img3.dwstatic.com/acmoba/djzl/fyzb/24.png" alt="八尺琼勾玉">
+                            </span>
+                            <span class="name">八尺琼勾玉</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374001786676.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img4.dwstatic.com/acmoba/djzl/fyzb/25.png" alt="贤者之石">
+                            </span>
+                            <span class="name">贤者之石</span>
+                        </a>
+                    </li>
+                    <li class="fy">
+                        <a href="http://acmoba.duowan.com/1711/374001828442.html" target="_wzhero">
+                            <span class="img-wrap">
+                                <img src="http://img1.dwstatic.com/acmoba/djzl/fyzb/26.png" alt="崩玉">
+                            </span>
+                            <span class="name">崩玉</span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+<!--英雄视频-->
+<script>
+    $(function () {
+        var hero = {
+            tag: "",
+            init: function () {
+                $("[data-type='mod-hero2']").on("mousemove", ".g-tab__trigger", function () {
+                    var $this = $(this);
+                    var tag = $this.attr("data-tag");
+
+
+                    $this.addClass("is-active").siblings().removeClass("is-active");
+                    hero.initHeroList(tag);
+                });
+
+                //搜索相关
+                $("[data-type='mod-hero2']").on("keyup", ".search-wrap .search-text", function () {
+                    var key = $(this).val();
+
+                    hero.searchHero(key);
+                })
+                $("[data-type='mod-hero2']").on("click", ".search-wrap .btn-search", function () {
+                    var key = $("[data-type='mod-hero2'] .search-text").val();
+
+                    if (key) {
+                        hero.searchHero(key);
+                    }
+                })
+            },
+            //tag:标签名,type:1添加,0删除
+            initHeroList: function (tag) {
+                var _ts = this;
+
+                if (tag == "all") {
+                    $("[data-type='mod-hero2'] .list-hero li").show();
+                    return;
+                }
+
+                $("[data-type='mod-hero2'] .list-hero li").each(function () {
+                    var $this = $(this);
+
+                    if ($this.hasClass(tag)) {
+                        $this.show();
+                    } else {
+                        $this.hide();
+                    }
+                });
+            },
+            //搜索英雄
+            searchHero: function (key) {
+                if (!key) {
+                    $("[data-type='mod-hero2'] .list-hero li").show();
+                    return;
+                }
+
+                $("[data-type='mod-hero2'] .g-tab__trigger[data-tag='all']").addClass("is-active").siblings()
+                    .removeClass("is-active");
+                $("[data-type='mod-hero2'] .list-hero li").hide();
+                $("[data-type='mod-hero2'] .list-hero li").each(function () {
+                    var $this = $(this);
+                    var name = $this.find(".name").text();
+
+                    if (name.indexOf(key) > -1) {
+                        $this.show();
+                    }
+                });
+            }
+        }
+        hero.init();
+    })
+</script>

+ 1 - 1
2018专区/幻想全明星/src/sass/global.scss

@@ -315,7 +315,7 @@ body {
                 width: 17px;
                 height: 24px;
                 display: block;
-                background: url(../img/wzry/icon-search.png?__sprite) 0 4px no-repeat;
+                background: url(../img/icon-search.png?__sprite) 0 4px no-repeat;
             }
         }
     }

+ 199 - 47
2018专区/幻想全明星/src/sass/modules/_hero.scss

@@ -1,68 +1,183 @@
 @charset "UTF-8";
 
-.dw-mod-hero {
-    margin-top: 20px;
-    position: relative;
-    .g-ui-tab .g-tab__ext .search-wrap {
-        border: 1px solid #e3e3e3;
-        border-radius: 2px;
-        *zoom:1;padding: 0 10px;
-        position: absolute;
-        height: 34px;
-        bottom: -35px;
-        &:after{
-            clear: both;
-        }
-        input{
-            border: 0;
-            background: transparent;
-            outline: 0;
-            color: #666;
+.dw-mod-primary {
+    .dw-mod-hero {
+        margin-top: 20px;
+        position: relative;
+        .g-ui-tab .g-tab__ext .search-wrap {
+            border: 1px solid #e3e3e3;
+            border-radius: 2px;
+            *zoom:1;padding: 0 10px;
+            position: absolute;
             height: 34px;
-            line-height: 34px;
-            float: left;
-            width: 160px;
-            font-size: 12px
+            bottom: -35px;
+            &:after{
+                clear: both;
+            }
+            input{
+                border: 0;
+                background: transparent;
+                outline: 0;
+                color: #666;
+                height: 34px;
+                line-height: 34px;
+                float: left;
+                width: 160px;
+                font-size: 12px
+            }
+            .icon-search {
+                float: right;
+                width: 17px;
+                height: 34px;
+                display: block;
+                background-image: url(http://pub.dwstatic.com/zq2017/wzryvideo//img/sprite/home_z_4f68b72.png);
+                background-repeat: no-repeat;
+                background-position: -11px -286px;
+            }
+        }
+        .g-ui-tab .g-tab__hd h2{
+            margin-right: 10px;
         }
-        .icon-search {
+        .g-ui-tab .g-tab__nav{
             float: right;
-            width: 17px;
-            height: 34px;
-            display: block;
-            background-image: url(http://pub.dwstatic.com/zq2017/wzryvideo//img/sprite/home_z_4f68b72.png);
-            background-repeat: no-repeat;
-            background-position: -11px -286px;
+        }
+        .g-ui-tab .g-tab__trigger{
+            margin-right: 0;
+            margin-left: 10px;
+            font-size: 12px;
+            a{
+                padding: 0 8px;
+            }
         }
     }
-    .g-ui-tab .g-tab__hd h2{
-        margin-right: 10px;
+
+    .dw-mod-hero .g-tab__bd {
+        padding: 20px 0;
     }
-    .g-ui-tab .g-tab__nav{
-        float: right;
+
+    .dw-mod-hero .g-tab__panel {
+        height: 360px;
+        overflow-y: auto;
+        padding: 0 20px 0 10px;
     }
-    .g-ui-tab .g-tab__trigger{
-        margin-right: 0;
-        margin-left: 10px;
+
+    .dw-mod-hero .list-hero {
+        *zoom:1;
+        margin-right: -20px;
+    }
+
+    .dw-mod-hero .list-hero:before,.dw-mod-hero .list-hero:after {
+        content: "";
+        display: table;
+        line-height: 0
+    }
+
+    .dw-mod-hero .list-hero:after {
+        clear: both
+    }
+
+    .dw-mod-hero .list-hero li {
+        // width: 56px;
+        float: left;
+        margin-right: 13px;
+        text-align: center
+    }
+
+    .dw-mod-hero .list-hero a {
+        display: block;
+        outline: 0
+    }
+
+    .dw-mod-hero .list-hero a:hover {
+        text-decoration: none
+    }
+
+    .dw-mod-hero .list-hero a:hover .img-wrap {
+        border: 2px solid #308ab9
+    }
+
+    .dw-mod-hero .list-hero a:hover .name {
+        color: #308ab9
+    }
+
+    .dw-mod-hero .list-hero .img-wrap {
+        width: 56px;
+        height: 56px;
+        display: block;
+        border: 2px solid transparent;
+        overflow: hidden
+    }
+
+    .dw-mod-hero .list-hero img {
+        width: 100%;
+        overflow: hidden;
+        display: block
+    }
+
+    .dw-mod-hero .list-hero .name {
+        display: block;
         font-size: 12px;
-        a{
-            padding: 0 8px;
-        }
+        line-height: 30px;
+        height: 30px;
+        white-space: nowrap;
+        word-wrap: normal;
+        overflow: hidden;
+        -ms-text-overflow: ellipsis;
+        text-overflow: ellipsis
+    }
+}
+
+.dw-mod-hero[data-type="mod-hero2"] {
+    margin-top: 60px;
+    position: relative;
+    &:before{
+        content: "";
+        position: absolute;
+        top: -20px;
+        margin-left: -619px;
+        left: 50%;
+        width: 1238px;
+        height: 438px;
+        background: url(../img/bg-section2.png) no-repeat;
+    }
+    .g-ui-tab{
+        position: relative;
+        height: 345px;
+    }
+}
+
+.dw-mod-hero[data-type="mod-hero3"] {
+    margin-top: 60px;
+    position: relative;
+    &:before{
+        content: "";
+        position: absolute;
+        top: -20px;
+        margin-left: -619px;
+        left: 50%;
+        width: 1238px;
+        height: 438px;
+        background: url(../img/bg-section2.png) no-repeat;
+    }
+    .g-ui-tab{
+        position: relative;
+        height: 345px;
     }
 }
 
 .dw-mod-hero .g-tab__bd {
     padding: 20px 0;
+    background: url(http://pub.dwstatic.com/zq2017/wzryvideo//img/wzry/bg-hero_da187cd.jpg)
 }
 
 .dw-mod-hero .g-tab__panel {
-    height: 360px;
+    height: 220px;
     overflow-y: auto;
-    padding: 0 20px 0 10px;
+    padding: 0 20px
 }
 
 .dw-mod-hero .list-hero {
-    *zoom:1;
-    margin-right: -20px;
+    *zoom:1;margin-right: -16px
 }
 
 .dw-mod-hero .list-hero:before,.dw-mod-hero .list-hero:after {
@@ -76,9 +191,9 @@
 }
 
 .dw-mod-hero .list-hero li {
-    // width: 56px;
+    width: 78px;
     float: left;
-    margin-right: 13px;
+    margin-right: 18px;
     text-align: center
 }
 
@@ -100,8 +215,8 @@
 }
 
 .dw-mod-hero .list-hero .img-wrap {
-    width: 56px;
-    height: 56px;
+    width: 78px;
+    height: 78px;
     display: block;
     border: 2px solid transparent;
     overflow: hidden
@@ -123,4 +238,41 @@
     overflow: hidden;
     -ms-text-overflow: ellipsis;
     text-overflow: ellipsis
+}
+.g-ui-tab .g-tab__ext .search-wrap {
+    border: 1px solid #e3e3e3;
+    border-radius: 2px;
+    *zoom:1;padding: 0 10px
+}
+
+.g-ui-tab .g-tab__ext .search-wrap:before,.g-ui-tab .g-tab__ext .search-wrap:after {
+    content: "";
+    display: table;
+    line-height: 0
+}
+
+.g-ui-tab .g-tab__ext .search-wrap:after {
+    clear: both
+}
+
+.g-ui-tab .g-tab__ext .search-wrap input {
+    border: 0;
+    background: transparent;
+    outline: 0;
+    color: #666;
+    height: 24px;
+    line-height: 24px;
+    float: left;
+    width: 160px;
+    font-size: 12px
+}
+
+.g-ui-tab .g-tab__ext .search-wrap .icon-search {
+    float: right;
+    width: 17px;
+    height: 24px;
+    display: block;
+    background-image: url(http://pub.dwstatic.com/zq2017/wzryvideo//img/sprite/home_z_4f68b72.png);
+    background-repeat: no-repeat;
+    background-position: -11px -286px;
 }