fe / mars-static · Commits

Go to a project

Authored by 周少峰
Commit 1f44f87fdd0edfac146e8a003cb59b2dd9836794 2 parents 73744d14 3bfa9664

Merge branch 'feature/seo2' into develop

Inline Side-by-side
Showing 17 changed files with 578 additions and 280 deletions
{
"extends": "eslint-config-standard",
"extends": "yoho",
"parserOptions": {
"sourceType": "module"
},
"plugins": [
"html"
],
"rules": {
"indent": [2, 4],
"semi": [2, "always"],
"no-mixed-operators": 0
"camelcase": "off"
}
}
\ No newline at end of file
... ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="../../dist/css/area-err.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<body>
<div class="err-page">
<div class="err-pic"></div>
<h1 class="h1-g">新鲜好去处，探索城市潮流，潮流火星APP下载|火星Mars</h1>
</div>
<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TZT2TD9');
</script>
<!-- End Google Tag Manager -->
</body>
</html>
\ No newline at end of file
... ...
... ... @@ -22,13 +22,15 @@
<div class="filter-tab">
<div class="tab-item">
<span class="city-name">
<span class="name">所有城市</span>
<span class="name eps-1">所有城市</span>
<span class="arr"></span>
</span>
<div class="down-list">
<div class="list-item active">
<span class="name">所有城市</span>
<span class="tick"></span>
<a href="#" target="_blank" title="title">
<span class="name eps-1">所有城市</span>
<span class="tick"></span>
</a>
</div>
<div class="list-item">
<span class="name">南京</span>
... ... @@ -62,94 +64,96 @@
</div>
<div class="tab-item">
<span class="city-name">
<span class="name">ALL</span>
<span class="name eps-1">ALL</span>
<span class="arr"></span>
</span>
<div class="down-list down-list-2">
<div class="left-part">
<div class="item active">
<img class="icon" src="../../src/images/area/all-2.png" />
<span>All</span>
<span class="left-name eps-1">All</span>
<div class="right-part">
<a href="#" target="_blank" title="title">
<div class="list-item active">
<span class="name child-name eps-1">全部11</span>
<span class="tick"></span>
</div>
</a>
<div class="list-item">
<span class="name">南京11</span>
<span class="tick"></span>
</div>
</div>
</div>
<div class="item">
<img class="icon" src="../../src/images/area/all-2.png" />
<span>All</span>
<div class="right-part">
<div class="list-item active">
<span class="name">全部22</span>
<span class="tick"></span>
</div>
<div class="list-item">
<span class="name">南京22</span>
<span class="tick"></span>
</div>
</div>
</div>
<div class="item">
<img class="icon" src="../../src/images/area/all-2.png" />
<span>All</span>
<div class="right-part">
<div class="list-item active">
<span class="name">全部33</span>
<span class="tick"></span>
</div>
<div class="list-item">
<span class="name">南京33</span>
<span class="tick"></span>
</div>
</div>
</div>
<div class="item">
<img class="icon" src="../../src/images/area/all-2.png" />
<span>All</span>
<div class="right-part">
<div class="list-item active">
<span class="name">全部44</span>
<span class="tick"></span>
</div>
<div class="list-item">
<span class="name">南京44</span>
<span class="tick"></span>
</div>
</div>
</div>
<div class="item">
<img class="icon" src="../../src/images/area/all-2.png" />
<span>All</span>
<div class="right-part">
<div class="list-item active">
<span class="name">全部55</span>
<span class="tick"></span>
</div>
<div class="list-item">
<span class="name">南京55</span>
<span class="tick"></span>
</div>
</div>
</div>
<div class="item">
<img class="icon" src="../../src/images/area/all-2.png" />
<span>All</span>
</div>
</div>
<div class="right-part">
<div class="list-item active">
<span class="name">全部11</span>
<span class="tick"></span>
</div>
<div class="list-item">
<span class="name">南京11</span>
<span class="tick"></span>
</div>
</div>
<div class="right-part">
<div class="list-item active">
<span class="name">全部22</span>
<span class="tick"></span>
</div>
<div class="list-item">
<span class="name">南京22</span>
<span class="tick"></span>
</div>
</div>
<div class="right-part">
<div class="list-item active">
<span class="name">全部33</span>
<span class="tick"></span>
</div>
<div class="list-item">
<span class="name">南京33</span>
<span class="tick"></span>
</div>
</div>
<div class="right-part">
<div class="list-item active">
<span class="name">全部44</span>
<span class="tick"></span>
</div>
<div class="list-item">
<span class="name">南京44</span>
<span class="tick"></span>
</div>
</div>
<div class="right-part">
<div class="list-item active">
<span class="name">全部55</span>
<span class="tick"></span>
</div>
<div class="list-item">
<span class="name">南京55</span>
<span class="tick"></span>
</div>
</div>
<div class="right-part">
<div class="list-item active">
<span class="name">全部66</span>
<span class="tick"></span>
</div>
<div class="list-item">
<span class="name">南京66</span>
<span class="tick"></span>
<div class="right-part">
<div class="list-item active">
<span class="name">全部66</span>
<span class="tick"></span>
</div>
<div class="list-item">
<span class="name">南京66</span>
<span class="tick"></span>
</div>
</div>
</div>
</div>
</div>
... ...
... ... @@ -29,7 +29,7 @@
<div class="intro">
河西是个好地方，要是河西有一套房子，还敲什么代码。河西是个好地方，要是河西有一套房子，还敲什么代码。河西是个好地方，要是河西有一套房子，还敲什么代码。河西是个好地方，要是河西有一套房子，还敲什么代码。河西是个好地方，要是河西有一套房子，还敲什么代码。河西是个好地方，要是河西有一套房子，还敲什么代码。河西是个好地方，要是河西有一套房子，还敲什么代码。河西是个好地方，要是河西有一套房子，还敲什么代码。河西是个好地方，要是河西有一套房子，还敲什么代码。河西是个好地方，要是河西有一套房子，还敲什么代码。
</div>
<div class="box-list">
<div class="box-list" id="list-container">
<div class="list-item">
<div class="pic-c">
<img class="pic lazy" alt="alt" data-original="../../src/images/area/city-test.png" />
... ...
... ... @@ -37,193 +37,195 @@
<a class="list-item" href="#" target="_blank">北京</a>
<a class="list-item" href="#" target="_blank">北京</a>
</div>
<div class="shop-item">
<div class="shop-pic">
<img src="../../src/images/area/city-test.png" alt="alt" />
<a href="#" target="_blank" title="title">
<h2 class="name">
<p class="en">Hengshan Road</p>
<p class="ch">衡山路</p>
</h2>
</a>
<div id="list-container">
<div class="shop-item">
<div class="shop-pic">
<img src="../../src/images/area/city-test.png" alt="alt" />
<a href="#" target="_blank" title="title">
<h2 class="name">
<p class="en">Hengshan Road</p>
<p class="ch">衡山路</p>
</h2>
</a>
</div>
<div class="shop-list">
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../../src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title eps-1">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-originalc="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" class="more" target="_blank">
<div class="list-item">
More
</div>
</a>
</div>
</div>
<div class="shop-list">
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../../src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title eps-1">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-originalc="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" class="more" target="_blank">
<div class="list-item">
More
</div>
</a>
<div class="shop-item">
<div class="shop-pic">
<img src="../..//src/images/area/city-test.png" alt="alt" />
<a href="#" target="_blank" title="title">
<h2 class="name">
<p class="en">Hengshan Road</p>
<p class="ch">衡山路</p>
</h2>
</a>
</div>
<div class="shop-list">
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" class="more" target="_blank">
<div class="list-item">
More
</div>
</a>
</div>
</div>
</div>
<div class="shop-item">
<div class="shop-pic">
<img src="../..//src/images/area/city-test.png" alt="alt" />
<a href="#" target="_blank" title="title">
<h2 class="name">
<p class="en">Hengshan Road</p>
<p class="ch">衡山路</p>
</h2>
</a>
</div>
<div class="shop-list">
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic lazy" alt="alt" data-original="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" class="more" target="_blank">
<div class="list-item">
More
</div>
</a>
</div>
</div>
<div class="shop-item">
<div class="shop-pic">
<img src="../..//src/images/area/city-test.png" alt="alt" />
<a href="#" target="_blank" title="title">
<h2 class="name">
<p class="en">Hengshan Road</p>
<p class="ch">衡山路</p>
</h2>
</a>
</div>
<div class="shop-list">
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" class="more" target="_blank">
<div class="list-item">
More
</div>
</a>
<div class="shop-item">
<div class="shop-pic">
<img src="../..//src/images/area/city-test.png" alt="alt" />
<a href="#" target="_blank" title="title">
<h2 class="name">
<p class="en">Hengshan Road</p>
<p class="ch">衡山路</p>
</h2>
</a>
</div>
<div class="shop-list">
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" target="_blank" title="title">
<div class="list-item">
<img class="pic" alt="alt" src="../..//src/images/area/city-test.png" />
<div class="new"></div>
<div class="type">家居</div>
<div class="bg"></div>
<div class="title">THE cub</div>
</div>
</a>
<a href="#" class="more" target="_blank">
<div class="list-item">
More
</div>
</a>
</div>
</div>
</div>
<h1 class="h1-g">新鲜好去处，探索城市潮流，潮流火星APP下载|火星Mars</h1>
... ...
{
"name": "mars-static",
"version": "1.0.4",
"version": "1.0.8",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
... ... @@ -2961,6 +2961,12 @@
"integrity": "sha1-+K/mmAPZXGhaS4OSuHkxiOsDy7M=",
"dev": true
},
"eslint-config-yoho": {
"version": "1.0.9",
"resolved": "http://npm.yoho.cn/eslint-config-yoho/-/eslint-config-yoho-1.0.9.tgz",
"integrity": "sha1-lz94ELHg4JtmBh3v1HfiFE0v3Ls=",
"dev": true
},
"eslint-import-resolver-node": {
"version": "0.3.1",
"resolved": "http://npm.yoho.cn/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.1.tgz",
... ... @@ -3003,6 +3009,15 @@
}
}
},
"eslint-plugin-html": {
"version": "4.0.1",
"resolved": "http://npm.yoho.cn/eslint-plugin-html/-/eslint-plugin-html-4.0.1.tgz",
"integrity": "sha1-/HAHImPMk4SW+7yc9khmDkH6Jpo=",
"dev": true,
"requires": {
"htmlparser2": "3.9.2"
}
},
"eslint-plugin-import": {
"version": "2.8.0",
"resolved": "http://npm.yoho.cn/eslint-plugin-import/-/eslint-plugin-import-2.8.0.tgz",
... ... @@ -12562,6 +12577,12 @@
"dev": true
}
}
},
"yoho-qs": {
"version": "1.0.1",
"resolved": "http://npm.yoho.cn/yoho-qs/-/yoho-qs-1.0.1.tgz",
"integrity": "sha1-jp5Vn7BcJvkQ4JhEuRAc+eIx+kQ=",
"dev": true
}
}
}
... ...
{
"name": "mars-static",
"private": true,
"version": "1.0.7",
"version": "1.0.8",
"description": "mars-static",
"main": "build.js",
"scripts": {
... ... @@ -18,6 +18,8 @@
"ada": "^0.1.6",
"eslint": "^4.14.0",
"eslint-config-standard": "^11.0.0-beta.0",
"eslint-config-yoho": "^1.0.9",
"eslint-plugin-html": "^4.0.1",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-node": "^5.2.1",
"eslint-plugin-promise": "^3.6.0",
... ... @@ -25,6 +27,7 @@
"jquery": "^1.12.4",
"jquery-lazyload": "^1.9.7",
"stylelint": "^8.4.0",
"stylelint-config-standard": "^18.0.0"
"stylelint-config-standard": "^18.0.0",
"yoho-qs": "^1.0.1"
}
}
... ...
const $ = require('jquery');
window.jQuery = $;
require('./common/area-common');
require('./area/more-list');
let categoryObj = {
domInit: function () {
domInit: function() {
this.el = {
$tabItem: $('.tab-item'),
$listItem: $('.tab-item').find('.list-item'),
... ... @@ -12,41 +14,40 @@ let categoryObj = {
$rightPart: $('.right-part')
};
},
leftPartFillter: function () {
leftPartFillter: function() {
let _this = this;
_this.el.$leftPartItem.on('click', function () {
let $index = $(this).index();
_this.el.$leftPartItem.on('click', function() {
$(this).addClass('active').siblings('div').removeClass('active');
$(`.right-part:eq(${$index})`).show().siblings('.right-part').hide();
return false;
$(this).find('.right-part').show();
$(this).siblings('.item').find('.right-part').hide();
});
},
init: function () {
init: function() {
let _this = this;
this.domInit();
_this.el.$tabItem.on('click', function () {
$(this).toggleClass('active').siblings('.tab-item').removeClass('active');
_this.el.$tabItem.find('.city-name').on('click', function() {
let $this = $(this).parents('.tab-item');
$this.toggleClass('active').siblings('.tab-item').removeClass('active');
});
_this.el.$tabItem.find('.right-part:first').show();
_this.el.$listItem.on('click', function () {
_this.el.$listItem.on('click', function() {
let cityName = $(this).find('.name').text();
$(this).addClass('active').siblings('div').removeClass('active');
$(this).parents('.tab-item').find('.city-name .name').text(cityName);
$(this).parents('.tab-item').toggleClass('active');
return false;
});
_this.leftPartFillter();
}
};
$(
function () {
function() {
categoryObj.init();
}
);
... ...
require('./common/area-common');
require('./area/more-area');
... ...
const $ = require('jquery');
const lazyload = require('../plugins/lazyload');
window.jQuery = $;
let moreObj = {
domInit: function() {
this.el = {
$listContainer: $('#list-container')
};
},
init: function() {
this.domInit();
this.page = 0;
this.loading = false;
this.end = false;
this.scroll();
},
scroll: function() {
$(window).scroll(() => {
if (($(window).scrollTop() + $(window).height() >= $(document).height() * 0.8)) {
this.doMore();
}
});
},
doMore: function() {
if (!this.loading && !this.end) {
this.page++;
this.getMore();
}
},
getMore: function() {
this.loading = true;
let ajaxData = {
page: this.page,
row: 10
};
if ($('#cityId').val()) {
Object.assign(ajaxData, {cityId: $('#cityId').val()});
}
$.ajax({
method: 'GET',
url: window.$ajaxPath,
data: ajaxData,
success: (result) => {
if ($(result).length > 0) {
let $result = $(result);
let $lazyImg = $result.find('img.lazy');
this.el.$listContainer.append($result);
lazyload($lazyImg, {
threshold: 1000,
q: 80
});
this.loading = false;
} else {
this.end = true;
}
}
});
}
};
$(
function() {
moreObj.init();
}
);
... ...
const $ = require('jquery');
const lazyload = require('../plugins/lazyload');
window.jQuery = $;
let moreObj = {
domInit: function() {
this.el = {
$listContainer: $('#list-container')
};
},
init: function() {
this.domInit();
this.page = 0;
this.loading = false;
this.end = false;
this.scroll();
},
scroll: function() {
$(window).scroll(() => {
if (($(window).scrollTop() + $(window).height() >= $(document).height() * 0.8)) {
this.doMore();
}
});
},
doMore: function() {
if (!this.loading && !this.end) {
this.page++;
this.getMore();
}
},
getMore: function() {
this.loading = true;
let ajaxData = {
page: this.page,
row: 10
};
if ($('#businessAreaId').val()) {
Object.assign(ajaxData, {businessAreaId: $('#businessAreaId').val()});
}
if ($('#cityId').val()) {
Object.assign(ajaxData, {cityId: $('#cityId').val()});
}
if ($('#tagId').val()) {
Object.assign(ajaxData, {tagId: $('#tagId').val()});
}
$.ajax({
method: 'GET',
url: window.$ajaxPath,
data: ajaxData,
success: (result) => {
if ($(result).length > 0) {
let $result = $(result);
let $lazyImg = $result.find('img.lazy');
this.el.$listContainer.append($result);
lazyload($lazyImg, {
threshold: 1000,
q: 80
});
this.loading = false;
} else {
this.end = true;
}
}
});
}
};
$(
function() {
moreObj.init();
}
);
... ...
... ... @@ -2,18 +2,18 @@ const $ = require('jquery');
const lazyload = require('../plugins/lazyload');
let indexObj = {
init: function () {
init: function() {
this.lazyLoad();
this.resizeInit();
this.resize();
},
lazyLoad: function () {
lazyLoad: function() {
lazyload($('img.lazy'), {
threshold: 1000,
q: 80
});
},
resizeInit: function () {
resizeInit: function() {
let winW = $(window).width();
let $page = $('body').find('div:first');
... ... @@ -25,17 +25,17 @@ let indexObj = {
$('.download').show();
}
},
resize: function () {
resize: function() {
let _this = this;
$(window).resize(function () {
$(window).resize(function() {
_this.resizeInit();
});
}
};
$(
function () {
function() {
indexObj.init();
}
);
... ...
require('./webp-support');
const $ = require('jquery');
window.jQuery = $;
require('jquery-lazyload');
... ...
import $ from 'jquery';
import qs from 'yoho-qs';
class Page {
constructor() {
this.qs = qs;
this.$event = $(document);
}
on(name, ...cb) {
name = `yohoevent.${name}`;
this.$event.on(name, ...cb);
}
emit(name, ...data) {
name = `yohoevent.${name}`;
this.$event.trigger(name, ...data);
}
ajax(options = {}) {
return Promise.resolve($.ajax(options));
}
}
export default Page;
... ...
... ... @@ -89,6 +89,15 @@
width: 375px;
box-sizing: border-box;
.city-name {
display: block;
.name {
display: inline-block;
max-width: 300px;
}
}
&:first-child {
border-right: solid 1px #e0e0e0;
}
... ... @@ -111,17 +120,27 @@
.tab-item.active {
.down-list {
display: block;
.name {
display: inline-block;
width: 650px;
}
}
}
.left-part {
width: 310px;
width: 750px;
max-height: 665px;
float: left;
overflow-x: hidden;
overflow-y: scroll;
text-align: left;
.left-name {
display: inline-block;
width: 245px;
}
.icon {
width: 30px;
height: 30px;
... ... @@ -132,6 +151,7 @@
}
.item {
width: 310px;
padding-left: 40px;
font-size: 30px;
line-height: 86px;
... ... @@ -155,6 +175,10 @@
img {
opacity: 1;
}
.right-part {
display: block;
}
}
.item.active {
... ... @@ -163,9 +187,12 @@
}
.right-part {
position: absolute;
top: 0;
left: 350px;
display: none;
padding-left: 35px;
width: 405px;
width: 365px;
max-height: 665px;
float: right;
overflow-x: hidden;
... ... @@ -179,7 +206,7 @@
.down-list {
display: none;
position: absolute;
top: 86px;
top: 85px;
left: 0;
max-height: 665px;
width: 720px;
... ... @@ -198,6 +225,13 @@
color: #b0b0b0;
position: relative;
font-size: 30px;
display: block;
a {
display: inline-block;
vertical-align: top;
color: #000;
}
}
.list-item:last-child {
... ... @@ -223,6 +257,11 @@
width: 750px;
padding-left: 0;
overflow-y: hidden;
.child-name {
display: inline-block !important;
width: 300px !important;
}
}
}
}
... ...
@import 'common/area-common.scss';
html,
body {
height: 100%;
width: 100%;
}
.err-page {
height: 100%;
width: 100%;
position: relative;
.err-pic {
position: absolute;
top: 40%;
left: 50%;
margin-left: -170px;
margin-top: -167px;
width: 340px;
height: 333px;
background-image: url('../images/area/404.png');
background-size: 100% 100%;
background-position: center center;
}
.h1-g {
color: #fff;
}
}
... ...