Home Explore Help
Register Sign In
FED
/
dwweb-pc
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

搜索

wukunlin 5 years ago
parent
fb5aa384e6
commit
56c3f92452
17 changed files with 446 additions and 42 deletions
Split View Show Diff Stats
  1. 27 0
      2019专题/1906lol自走棋专题/src/_detail.html
  2. 2 0
      2019专题/1906lol自走棋专题/src/_index.html
  3. BIN
      2019专题/1906lol自走棋专题/src/img/bg_hero.jpg
  4. BIN
      2019专题/1906lol自走棋专题/src/img/icon-blue.png
  5. BIN
      2019专题/1906lol自走棋专题/src/img/icon-gold.png
  6. BIN
      2019专题/1906lol自走棋专题/src/img/icon-green.png
  7. BIN
      2019专题/1906lol自走棋专题/src/img/icon-pink.png
  8. BIN
      2019专题/1906lol自走棋专题/src/img/icon-search.png
  9. BIN
      2019专题/1906lol自走棋专题/src/img/icon-white.png
  10. 44 0
      2019专题/1906lol自走棋专题/src/modules/hero/hero.html
  11. 131 0
      2019专题/1906lol自走棋专题/src/modules/hero/hero.js
  12. 4 0
      2019专题/1906lol自走棋专题/src/modules/underscore/underscore.js
  13. 23 42
      2019专题/1906lol自走棋专题/src/modules/utils/utils.js
  14. 20 0
      2019专题/1906lol自走棋专题/src/sass/base/_mixins.scss
  15. 35 0
      2019专题/1906lol自走棋专题/src/sass/detail.scss
  16. 152 0
      2019专题/1906lol自走棋专题/src/sass/module/_ hero.scss
  17. 8 0
      2019专题/1906lol自走棋专题/src/tpl/item.tmpl

+ 27 - 0
2019专题/1906lol自走棋专题/src/_detail.html
View File 

@@ -0,0 +1,27 @@
 
+<!doctype html>
 
+<html>
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
 
+    <meta name="format-detection" content="telephone=no" />
 
+    <base target="_blank" />
 
+    <title>lol自走棋</title>
 
+    <script src="https://cdn.bootcss.com/underscore.js/1.9.1/underscore.js"></script><!--ignore-->
 
+    <script src="lib/jquery.js"></script><!--ignore-->
 
+    <link href="sass/detail.scss" rel="stylesheet">
 
+    
+</head>
 
+
 
+<body>
 
+    <div class="page-index">
 
+        
+        <link rel="import" href="./modules/hero/hero.html?__inline" />
 
+    </div>
 
+    <script src="lib/mod.js"></script>
 
+    <script>
 
+        require('./modules/page/index.js')
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 2 - 0
2019专题/1906lol自走棋专题/src/_index.html
View File 

@@ -7,6 +7,8 @@
 
     <meta name="format-detection" content="telephone=no" />
 
     <base target="_blank" />
 
     <title>lol自走棋</title>
 
+    <script src="https://cdn.bootcss.com/underscore.js/1.9.1/underscore.js"></script><!--ignore-->
 
+    <script src="lib/jquery.js"></script><!--ignore-->
 
     <link href="sass/index.scss" rel="stylesheet">
 
     
 </head>

BIN
2019专题/1906lol自走棋专题/src/img/bg_hero.jpg
View File


BIN
2019专题/1906lol自走棋专题/src/img/icon-blue.png
View File


BIN
2019专题/1906lol自走棋专题/src/img/icon-gold.png
View File


BIN
2019专题/1906lol自走棋专题/src/img/icon-green.png
View File


BIN
2019专题/1906lol自走棋专题/src/img/icon-pink.png
View File


BIN
2019专题/1906lol自走棋专题/src/img/icon-search.png
View File


BIN
2019专题/1906lol自走棋专题/src/img/icon-white.png
View File


+ 44 - 0
2019专题/1906lol自走棋专题/src/modules/hero/hero.html
View File 

@@ -0,0 +1,44 @@
 
+<div class="mod-hero">
 
+    <div class="hero-hd-box">
 
+        <div class="tab-hd-item active" data-type="hero">英雄</div>
 
+        <div class="tab-hd-item"  data-type="equipment">装备</div>
 
+        <div class="tab-hd-item"  data-type="littleHero">小小英雄</div>
 
+        <div class="tab-hd-item">合成图</div>
 
+        <div class="search-wrap">
 
+            <input type="text" placeholder="请输入名称" id="search">
 
+            <i></i>
 
+        </div>
 
+    </div>
 
+    <div class="hero-bd-box">
 
+        <div class="hero-sort-wrap">
 
+            <div class="hero-sort active" data-tab-sort="hero">
 
+                <span class="active">全部</span>
 
+            </div>
 
+            <div class="hero-sort active" data-tab-sort="hero" data-tab-job="hero">
 
+                <span class="active">全部</span>
 
+            </div>
 
+            <div class="hero-sort" data-tab-sort="equipment">
 
+                <span class="active">全部</span>
 
+                
+            </div>
 
+            <div class="hero-sort" data-tab-sort="littleHero">
 
+                <span class="active">全部</span>
 
+                
+            </div>
 
+            <div class="hero-wrap">
 
+                <div class="item-hero">
 
+                    <div class="hero"></div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        
+    </div>
 
+    <div class="compound-wrap">
 
+        <img src="" alt="">
 
+    </div>
 
+</div>
 
+
 
+<script>
 
+require('./hero.js')
 
+</script>

+ 131 - 0
2019专题/1906lol自走棋专题/src/modules/hero/hero.js
View File 

@@ -0,0 +1,131 @@
 
+
 
+var itemTmpl = __inline('../../tpl/item.tmpl')
 
+class Hero {
 
+    constructor () {
 
+        this.getData()
 
+        this.metaData = {}
 
+        this.allData = []
 
+        this.type = 'hero'
 
+    }
 
+    getData() {
 
+        var self = this
 
+        $.ajax({
 
+            url: 'http://lol.duowan.com/s/zzqdata.js',
 
+            dataType: 'jsonp',
 
+            jsonpCallback: 'zzqjsonp',
 
+            success: function(ret) {
 
+                self.metaData = ret
 
+                _.each(self.metaData.equipment.data,function(i) {  //装备点击不跳转
 
+                    i.link = 'javasctipt:'
 
+                })
 
+                self.allData = [].concat(ret.hero.data,ret.equipment.data,ret.littleHero.data)
 
+                self.init()
 
+            }
 
+        })
 
+    }
 
+
 
+    bindEvent() {
 
+        var self = this
 
+
 
+        //大分类
 
+        $('.tab-hd-item').on('click', function() {
 
+            $('.tab-hd-item').removeClass('active')
 
+            $(this).addClass('active')
 
+            var type = $(this).attr('data-type')
 
+            $('.hero-bd-box').toggle()
 
+            $('.compound-wrap').toggle()
 
+            if(!type) {
 
+                $('.hero-bd-box').hide()
 
+                $('.compound-wrap').show()
 
+                return false 
+            }else {
 
+                $('.hero-bd-box').show()
 
+                $('.compound-wrap').hide()
 
+            }
 
+            $('[data-tab-sort]').removeClass('active')
 
+            $('[data-tab-sort|='+type+']').addClass('active')
 
+            self.renderList(self.metaData[type].data)
 
+            return false
 
+        })
 
+
 
+
 
+        //小分类
 
+        $('.hero-sort span:not([data-tab-sort|=hero] span)').on('click', function() {
 
+            var type = $(this).parent().attr('data-tab-sort')
 
+            var sort = $(this).attr('data-sort')
 
+            $('.hero-sort span').removeClass('active')
 
+            $(this).addClass('active')
 
+            
+           
+            var typeList = self.metaData[type].data
 
+            if(sort) {
 
+                var list = []
 
+                for(var i = 0; i < typeList.length; i++) {
 
+                    if(typeList[i].sort == sort) {
 
+                        list.push(typeList[i])
 
+                    }
 
+                }
 
+                self.renderList(list)
 
+            }else {
 
+                self.renderList(typeList)
 
+            }
 
+        })
 
+
 
+        $('[data-tab-sort|=hero] span').on('click', function() {
 
+            
+        })
 
+
 
+        //搜索
 
+        var search = function() {
 
+            var val = $('#search').val()
 
+            if(!val) {
 
+                return
 
+            }
 
+            var reg = new RegExp(val)
 
+            var list = []
 
+            _.each(self.allData,function(i) {
 
+                if(reg.test(i.name) || reg.test(i.pinyin)) {
 
+                    list.push(i)
 
+                }
 
+            })
 
+            self.renderList(list)
 
+        }
 
+        $('#search').on('focus',function() {
 
+            $('.hero-bd-box').show()
 
+            $('.compound-wrap').hide()
 
+        }).on('input',_.debounce(search,500))
 
+
 
+        
+
 
+    }
 
+    
+    init () {
 
+        this.renderList(this.metaData.hero.data)
 
+        this.renderSort()
 
+        this.bindEvent()
 
+    }
 
+
 
+    renderList(list) {
 
+        $('.hero-wrap').html(itemTmpl({list:list}))
 
+    }
 
+
 
+    renderSort() {
 
+        var self = this,html = ''
 
+        $('[data-tab-sort]').each(function(i,e) {
 
+            var sort = $(e).attr('data-tab-sort')
 
+            var sortList = self.metaData[sort].sorts
 
+            for(var i = 0; i < sortList.length; i++) {
 
+                $(e).append('<span data-sort="'+sortList[i].code+'">'+sortList[i].sort+'</span>')
 
+            }
 
+        })
 
+        _.each(self.metaData.hero.jobs,function(i) {
 
+            console.log(i)
 
+        })
 
+        console.log(self.metaData.hero.jobs)
 
+        $('[data-tab-job]').html()
 
+    }
 
+}
 
+
 
+$(function(){
 
+    new Hero()
 
+})

File diff suppressed because it is too large
+ 4 - 0
2019专题/1906lol自走棋专题/src/modules/underscore/underscore.js


+ 23 - 42
2019专题/1906lol自走棋专题/src/modules/utils/utils.js
View File 

@@ -1,47 +1,28 @@
 
-var utils = {
 
-    //获取query参数
 
-    getParam(name) {
 
-        var getParam2 = function (name, str) {
 
-            //获取参数name的值
 
-            var reg = new RegExp("(^|!|&|\\?)" + name + "=([^&]*)(&|$)");
 
+var debounce = function(func, wait, immediate) {
 
+    var timeout, result;
 
 
-            //再获取?后面的参数
 
-            var r = str.match(reg);
 
-            if (r != null) {
 
-                try {
 
-                    return decodeURIComponent(r[2]);
 
-                } catch (e) {
 
-                    console.log(e + "r[2]:" + r[2]);
 
-                    return null;
 
-                }
 
-            }
 
-            return null;
 
-        };
 
+    var later = function(context, args) {
 
+      timeout = null;
 
+      if (args) result = func.apply(context, args);
 
+    };
 
 
-        //先获取#后面的参数
 
-        var str = document.location.hash.substr(2);
 
-        var value = getParam2(name, str);
 
-        if (value == null) {
 
-            str = document.location.search.substr(1);
 
-            value = getParam2(name, str);
 
-        }
 
-        return value;
 
-    },
 
+    var debounced = restArguments(function(args) {
 
+      if (timeout) clearTimeout(timeout);
 
+      if (immediate) {
 
+        var callNow = !timeout;
 
+        timeout = setTimeout(later, wait);
 
+        if (callNow) result = func.apply(this, args);
 
+      } else {
 
+        timeout = _.delay(later, wait, this, args);
 
+      }
 
 
-    //是否微信浏览器
 
-    isWechat() {
 
-        //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
 
-        var ua = window.navigator.userAgent.toLowerCase();
 
-        //通过正则表达式匹配ua中是否含有MicroMessenger字符串
 
-        return /MicroMessenger/i.test(ua)
 
-    },
 
+      return result;
 
+    });
 
 
-    //是否安卓
 
-    isIos() {
 
-        var u = navigator.userAgent;
 
-        return /\(i[^;]+;( U;)? CPU.+Mac OS X/.test(u)
 
+    debounced.cancel = function() {
 
+      clearTimeout(timeout);
 
+      timeout = null;
 
+    };
 
 
-    }
 
-}
 
-
 
-module.exports = utils
 
+    return debounced;
 
+  }

+ 20 - 0
2019专题/1906lol自走棋专题/src/sass/base/_mixins.scss
View File 

@@ -167,4 +167,24 @@
 
 	border: none;
 
 	background: transparent;
 
 	padding: 0;
 
+}
 
+
 
+
 
+//滚动条
 
+@mixin beatifyScrollBar($width: 8px, $height:4px) {
 
+	&::-webkit-scrollbar {
 
+			width: $width;
 
+			height: $height;
 
+	}
 
+
 
+	&::-webkit-scrollbar-thumb {
 
+			border-radius: 3px;
 
+			-moz-border-radius: 3px;
 
+			-webkit-border-radius: 3px;
 
+			background-color: rgba($color: #8d8a8a, $alpha: 0.3);
 
+	}
 
+
 
+	&::-webkit-scrollbar-track {
 
+			background-color: transparent;
 
+	}
 
 }

+ 35 - 0
2019专题/1906lol自走棋专题/src/sass/detail.scss
View File 

@@ -0,0 +1,35 @@
 
+@charset "UTF-8";
 
+$yahei: "Microsoft YaHei";
 
+$pingfan:PingFangSC-Regular;
 
+
 
+/*基础样式*/
 
+
 
+@import "base/base";
 
+@import "base/mixins";
 
+
 
+/*通用变量*/
 
+
 
+$baseFontSize:14px;
 
+$baseFontColor:#999;
 
+
 
+
 
+
 
+html,
 
+body {
 
+    height: 100%;
 
+}
 
+
 
+body {
 
+    position: relative;
 
+    font-size: $baseFontSize;
 
+    font-family: $pingfan, $yahei, Helvetica, Arial, sans-serif;
 
+    color: #333333;
 
+    background: url(/src/img/bg.jpg) no-repeat center top #2e1230;
 
+}
 
+
 
+.page-index {
 
+    margin: 486px auto 0;
 
+    width: 1000px;
 
+    background: #fff;
 
+    min-height: 500px;
 
+}

+ 152 - 0
2019专题/1906lol自走棋专题/src/sass/module/_ hero.scss
View File 

@@ -0,0 +1,152 @@
 
+.mod-hero {
 
+    width: 960px;
 
+    margin: 0 auto;
 
+
 
+    .hero-hd-box {
 
+        background: #f6f6f6;
 
+        @include clearfix;
 
+        position: relative;
 
+        .tab-hd-item {
 
+            float: left;
 
+            width: 115px;
 
+            height: 50px;
 
+            line-height: 50px;
 
+            font-size: 16px;
 
+            color: #000;
 
+            text-align: center;
 
+            cursor: pointer;
 
+            &.active {
 
+                color: #c49c3c;
 
+                font-weight: bold;
 
+                font-size: 24px;
 
+                background: #313131;
 
+            }
 
+        }
 
+    }
 
+    .search-wrap {
 
+        width: 231px;
 
+        height: 30px;
 
+        position: absolute;
 
+        right: 10px;
 
+        top: 7px;
 
+        background: #ffffff;
 
+        border: 1px solid #e7e7e7;
 
+        input {
 
+            display: block;
 
+            width:100%;height:100%;
 
+            line-height: 30px;
 
+            font-size: 14px;
 
+            outline: none;
 
+            border: none;
 
+            text-indent: 15px;
 
+        }
 
+        i {
 
+            position: absolute;
 
+            width: 19px;
 
+            height: 19px;
 
+            background: url(/src/img/icon-search.png) no-repeat ;
 
+            top: 6px;
 
+            right: 5px;
 
+        }
 
+    }
 
+
 
+    .hero-bd-box {
 
+        overflow: hidden;
 
+        min-height: 385px;
 
+        background: url(/src/img/bg_hero.jpg) no-repeat left top #313131;
 
+        padding: 0 12px;
 
+
 
+    }
 
+    .compound-wrap {
 
+        width: 960px;
 
+        height: 387px;
 
+        display: none;
 
+        img {
 
+            width:100%;height:100%;
 
+        }
 
+    }
 
+    .hero-sort-wrap {
 
+        margin: 20px 0 15px 0;
 
+    }
 
+    .hero-sort {
 
+        
+        width: 705px;
 
+        display: none;
 
+        &.active {
 
+            display: block;
 
+        }
 
+        span {
 
+            @include inline-block;
 
+            line-height: 24px;
 
+            height: 24px;
 
+            padding: 0 7px;
 
+            color: #fff;
 
+            font-size: 14px;
 
+            cursor: pointer;
 
+            margin-bottom: 10px;
 
+            border: 1px solid transparent;
 
+            &.active {
 
+                color: #c49c3c;
 
+                border: 1px solid #c49c3c;
 
+            }
 
+        }
 
+    }
 
+    .hero-wrap {
 
+        @include clearfix;
 
+        margin: 10px -8px 0 0;      
+        height: 316px;
 
+        overflow-y: scroll;
 
+        @include beatifyScrollBar;
 
+    }
 
+    .item-hero {
 
+        display: block;
 
+        width: 87px;
 
+        height: 98px;
 
+        position: relative;
 
+        float: left;
 
+        margin-right: 6px;
 
+        &.gold {
 
+            background: url(/src/img/icon-gold.png) no-repeat;
 
+        }
 
+        &.purple {
 
+            background: url(/src/img/icon-orange.png) no-repeat;
 
+        }
 
+        &.blue {
 
+            background: url(/src/img/icon-orange.png) no-repeat;
 
+        }
 
+        &.green {
 
+            background: url(/src/img/icon-green.png) no-repeat;
 
+        }
 
+        &.white {
 
+            background: url(/src/img/icon-white.png) no-repeat;
 
+        }
 
+        &:nth-of-type(19n+11) {
 
+            margin-left: 46px;
 
+        }
 
+        &:nth-of-type(19n+19) {
 
+            margin-right: 50px;
 
+        }
 
+        &:nth-of-type(n+11) {
 
+            margin-top: -15px;
 
+        }
 
+        .hero {
 
+            position: absolute;
 
+            width: 77px;
 
+            height: 88px;
 
+            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
 
+            background-size: 100% 100%;
 
+            background-position: center center;
 
+            background-image: url(https://bennettfeely.com/clippy/pics/pittsburgh.jpg) ;
 
+            top: 5px;
 
+            left: 5px;
 
+        }
 
+        .desc {
 
+            position: absolute;
 
+            top: 50px;
 
+            left: 50px;
 
+            img {
 
+                width:100%;height:100%;
 
+            }
 
+        }
 
+    }
 
+}

+ 8 - 0
2019专题/1906lol自走棋专题/src/tpl/item.tmpl
View File 

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

Some files were not shown because too many files changed in this diff