自走棋更新

2019专题/1906lol自走棋专题/src/modules/hero/hero.js

@@ -5,6 +5,7 @@
 
 var dialog = require('dialog')
 var itemTmpl = __inline('../../tpl/item.tmpl')
+
 class Hero {
     constructor () {
         this.getData()
@@ -251,6 +252,7 @@ class Hero {
     // 绑定装备覆盖事件
     bindEquipmentEvent () {
         var self = this;
+        $window = $('.floating-window');
         $('.item-hero[data-type="equipment"]').hover(function(e) {
             var id = $(this).data('id'); // 当前选中的序号
             // 渲染数据
@@ -260,7 +262,7 @@ class Hero {
             });
            data.name = data.name.split(',')[0]
 
-            $window = $('.floating-window');
+
             $window.find('.fw-img').attr('src', data.img); // 名称
             $window.find('.fw-text').html(data.name); // 名称
 
@@ -291,9 +293,39 @@ class Hero {
             $window.hide();
         });
 
+        $('.item-hero[data-type="hero"]').hover(function(e) {
+          var id = $(this).data('id'); // 当前选中的序号
+          // 渲染数据
+          var data = self.metaData['hero'].data.find((i) => {
+              // 找到对应英雄数据
+              return i.id == id;
+          });
+
+          $window.find('.fw-img').attr('src', data.skillIcon); // 名称
+          $window.find('.fw-text').html(data.name); // 描述
+
+
+          $window.find('.fw-line').hide()
+          $window.find('.fw-title').removeClass('lineShow')
+          $window.find('.fw-text-two').html(data.skill || '')
+
+          // 展示弹框
+          $window.show();
+          var offsetObj = this.getBoundingClientRect();
+          var top = offsetObj.top + 80;   //获得的是方块的绝对偏移量
+          var left = offsetObj.left + 80;   //获得的是方块的绝对偏移量
+          $window.css({
+              'top' : top + 'px',
+              'left': left+ 'px'
+          });
+        }, function(){
+            // 隐藏弹框
+            $window.hide();
+        })
+
         //英雄类显示title
         $('.item-hero[data-type="hero"]').hover(function(){
-            $(this).find('.hero-mask').show()
+      
             var id = $(this).data('id'); // 当前选中的序号
             // 渲染数据
             var data = self.metaData['hero'].data.find((i) => {
@@ -302,9 +334,6 @@ class Hero {
             });
            data.name = data.name.split(',')[0]
             $(this).attr('title',data.name)
-        },function(){
-            $(this).find('.hero-mask').hide()
-
         })
 
         //小小英雄类显示title

2019专题/1906lol自走棋专题/src/sass/module/_ hero.scss

@@ -121,6 +121,9 @@
         &.white {
             background: url(/src/img/icon-white.png) no-repeat;
         }
+        &.colorful{
+            background: url(/src/img/icon-colorful.png) no-repeat;
+        }
         .hero {
             position: absolute;
             width: 79px;

2019专题/1906lol自走棋专题/src/sass/search.scss

@@ -38,3 +38,6 @@ body {
 		}
 	}
 }
+.mod-hero .hero-sort{
+  width: auto;
+}

2019专题/1906lol自走棋专题/src/tpl/item.tmpl

@@ -1,12 +1,12 @@
 <div class="hero-list">
 <% for(var i = 0; i < list.length; i++) {%>
-    <a class="item-hero <%= list[i].color %>" target="_blank" href="<%= list[i].link%>" data-type="<%= list[i].frontendType %>" data-id="<%= list[i].id %>">
+    <div class="item-hero <%= list[i].color %>" target="_blank" href="<%= list[i].link%>" data-type="<%= list[i].frontendType %>" data-id="<%= list[i].id %>">
         <div class="hero" style="background-image: url(<%= list[i].img %>)"></div>
         <div class="hero-mask"><i></i></div>
 
         <% if(list[i].desc){ %>
             <div class="desc"><img src="<%= list[i].desc%>" alt=""></div>
         <%}%>
-    </a>
+    </div>
 <%}%>
 </div>

2019专题/云顶之弈模拟器/src/components/hero.vue

@@ -142,6 +142,9 @@ export default {
   &.white {
     background: url("../assets/images/icon-white.png") no-repeat 100% / 100%;
   }
+  &.colorful{
+    background: url("../assets/images/icon-colorful.png") no-repeat 100% / 100%;
+  }
   .hero {
     position: absolute;
     width: 79px;

2019专题/云顶之弈模拟器/src/components/index.vue

@@ -67,6 +67,15 @@
                 @addHero='addHero'
               />
             </div>
+            <div class="hero-list small">
+              <hero
+                size="small"
+                v-for="_hero in heroes.filter(h => h.color === 'colorful')"
+                :key="_hero.id"
+                :hero="_hero"
+                @addHero='addHero'
+              />
+            </div>
           </div>
         </div>
         <img src="../assets/images/arrow.png" alt class="arrow" />
@@ -920,8 +929,8 @@ export default {
             }
           }
           &.small {
-            &:last-child {
-              margin-top: 20px;
+            &:nth-child(n + 4) {
+              margin-bottom: 20px;
             }
             .item-hero {
               &:nth-child(19n + 11) {