Authored by 郝肖肖

列表筛选,错位修复

1 {{#if showFilters}} 1 {{#if showFilters}}
2 <div class="filter-area"> 2 <div class="filter-area">
3 - <label>已选条件:</label>  
4 - 3 + <div class="left">
  4 + <label>已选条件:</label>
  5 + </div>
  6 + <div class="middle">
5 {{#each filters}} 7 {{#each filters}}
6 <div class="filter-item" data-key="{{key}}"> 8 <div class="filter-item" data-key="{{key}}">
7 {{#color}} 9 {{#color}}
@@ -11,7 +13,9 @@ @@ -11,7 +13,9 @@
11 <span class="iconfont cancel">&#xe61d;</span> 13 <span class="iconfont cancel">&#xe61d;</span>
12 </div> 14 </div>
13 {{/each}} 15 {{/each}}
14 - 16 + </div>
  17 + <div class="right">
15 <label class="cancel">清空筛选条件</label> 18 <label class="cancel">清空筛选条件</label>
  19 + </div>
16 </div> 20 </div>
17 {{/if}} 21 {{/if}}
@@ -258,17 +258,31 @@ @@ -258,17 +258,31 @@
258 .filter-area { 258 .filter-area {
259 background-color: #eae9e9; 259 background-color: #eae9e9;
260 margin-bottom: 30px; 260 margin-bottom: 30px;
  261 + overflow: hidden;
  262 +
  263 + .left,
  264 + .right {
  265 + width: auto;
  266 + margin: 27px 10px 0 20px;
  267 + }
  268 +
  269 + .right {
  270 + margin: 27px 20px 0 0;
  271 + }
  272 +
  273 + .middle {
  274 + float: left;
  275 + width: 630px;
  276 + }
261 277
262 label { 278 label {
263 font-size: 14px; 279 font-size: 14px;
264 font-weight: 700; 280 font-weight: 700;
265 - margin-left: 20px;  
266 } 281 }
267 282
268 label.cancel { 283 label.cancel {
269 float: right; 284 float: right;
270 color: #878787; 285 color: #878787;
271 - margin: 27px 20px 0 0;  
272 cursor: pointer; 286 cursor: pointer;
273 } 287 }
274 288