fe / mars-static · Commits

Go to a project

Authored by 李靖
Commit bd512022fc922115ba6578dc8e12df3aea5113e0 1 parent 73744d14

筛选

Inline Side-by-side
Showing 4 changed files with 145 additions and 72 deletions
... ... @@ -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>
... ...
... ... @@ -2,6 +2,7 @@ const $ = require('jquery');
window.jQuery = $;
require('./common/area-common');
require('./area/more-list');
let categoryObj = {
domInit: function () {
... ... @@ -16,11 +17,9 @@ let categoryObj = {
let _this = this;
_this.el.$leftPartItem.on('click', function () {
let $index = $(this).index();
$(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 () {
... ... @@ -39,7 +38,6 @@ let categoryObj = {
$(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();
}
... ...
const $ = require('jquery');
window.jQuery = $;
let moreObj = {
init: function () {
this.scroll();
},
scroll: function () {
$(window).scroll(() => {
if (($(window).scrollTop() + $(window).height() >= $(document).height() * 0.8)) {
this.getMore();
}
});
},
getMore: function () {
$.ajax({
method: 'GET',
url: window.$ajaxPath,
data: {
page: 2,
row: 10,
businessAreaId: 44
},
success: function (result) {
}
});
}
};
$(
function () {
moreObj.init();
}
);
... ...
... ... @@ -89,6 +89,13 @@
width: 375px;
box-sizing: border-box;
.city-name {
.name {
display: inline-block;
max-width: 300px;
}
}
&:first-child {
border-right: solid 1px #e0e0e0;
}
... ... @@ -111,17 +118,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 +149,7 @@
}
.item {
width: 310px;
padding-left: 40px;
font-size: 30px;
line-height: 86px;
... ... @@ -155,6 +173,10 @@
img {
opacity: 1;
}
.right-part {
display: block;
}
}
.item.active {
... ... @@ -163,9 +185,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;
... ... @@ -198,6 +223,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 +255,11 @@
width: 750px;
padding-left: 0;
overflow-y: hidden;
.child-name {
display: inline-block !important;
width: 300px !important;
}
}
}
}
... ...