checked & senior hover

@@ -2,18 +2,26 @@
 <div class="products-page yoho-page">
     <div class="filter-box">
         {{# filters}}
-            {{#if checked}}
-                <div class="checked">
+            {{# checkedConditons}}
+                <div class="checked-conditions section">
                     <span class="title">已选条件：</span>
 
-                    {{# checked}}
-                        <span class="item">
-                            {{name}}
-                            <i class="close">x</i>
-                        </span>
-                    {{/ checked}}
+                    <div class="attr-content clearfix">
+                        {{#each conditions}}
+                            <a class="tag" href="{{href}}">
+                                {{#if name}}
+                                    {{name}}
+                                {{^}}
+                                    <i class="color-block" style="background: {{color}}"></i>
+                                {{/if}}
+                                <i class="close iconfont">&#xe602;</i>
+                            </a>
+                        {{/each}}
+
+                        <a class="clear-checked" href="{{clearUrl}}">清空筛选条件</a>
+                    </div>
                 </div>
-            {{/if}}
+            {{/ checkedConditons}}
 
             {{#if channel}}
                 <div class="channel section">
@@ -174,7 +182,9 @@
                             {{#each seniorChose}}
                                 <li class="attr">
                                     {{name}}
-                                    <span class="iconfont"></span>
+                                    <span class="iconfont">&#xe600;</span>
+
+                                    <div class="senior-up-icon"></div>
 
                                     <div class="senior-sub hide" data-attr="{{attr}}">
                                         {{#if showMulti}}

@@ -10,6 +10,7 @@
 
         &:first-child {
             border-top: none;
+            background: #eaeceb;
         }
     }
 
@@ -48,12 +49,29 @@
         -moz-user-select: none;
     }
 
-    .channel {
-        line-height: 35px;
-        background: #eaeceb;
+    .checked-conditions {
+        line-height: 30px;
+
+        .tag {
+            display: block;
+            float: left;
+            padding: 0 10px;
+            margin-right: 30px;
+            background: #000;
+            color: #fff;
+            cursor: pointer;
+        }
+
+        .color-block {
+            height: 14px;
+            width: 14px;
+            border: 1px solid #fff;
+            margin-bottom: -3px;
+        }
 
-        .title, .attr {
-            line-height: 35px;
+        .clear-checked {
+            color: #999;
+            float: right;
         }
     }
 
@@ -139,6 +157,7 @@
             margin-top: 5px;
             background: #f4f7f6;
             min-height: 30px;
+            border: 1px solid #000;
         }
     }
 
@@ -199,36 +218,57 @@
         margin-bottom: -6px;
         margin-right: 5px;
     }
-
-    .senior-attr-wrap {
+    
+    .senior-attr-wrap > .attr {
         position: relative;
-
-        .senior-sub {
-            box-sizing: border-box;
-            position: absolute;
-            padding: 15px 0;
-            left: 0;
-            right: -16px;
-            background: #fff;
-            border: 1px solid #ccc;
-
-            ul {
-                max-width: 950px;
+        
+        &:hover {
+            > .iconfont {
+                visibility: hidden;
             }
 
-            &.multi .multi-select {
-                display: none;
+            .senior-up-icon {
+                display: block;
             }
+        }
+    }
 
-            .multi-select {
-                position: absolute;
-                top: 20px;
-                right: 15px;
-            }
+    .senior-sub {
+        box-sizing: border-box;
+        position: absolute;
+        padding: 15px 0;
+        left: 0;
+        width: 1050px;
+        top: 39px;
+        background: #fff;
+        border: 1px solid #eaeceb;
+
+        ul {
+            max-width: 950px;
+        }
+
+        &.multi .multi-select {
+            display: none;
+        }
+
+        .multi-select {
+            position: absolute;
+            top: 20px;
+            right: 15px;
         }
     }
 
+    .senior-up-icon {
+        position: absolute;
+        width: 15px;
+        height: 9px;
+        z-index: 1;
+        left: 50%;
+        margin-left: -18px;
+        display: none;
 
+        background: image-url('product/senior-up.png') no-repeat;
+    }
 
     .checkbox {
         display: none;

@@ -13,6 +13,23 @@ class IndexController extends AbstractAction
         $data = array(
             'searchListPage' => true,
             'filters' => array(
+                'checkedConditons' => array(
+                    'conditions' => array(
+                        array(
+                            'href' => '',
+                            'name' => '暗黑'
+                        ),
+                        array(
+                            'href' => '',
+                            'color' => '#f00'
+                        ),
+                        array(
+                            'href' => '',
+                            'name' => 'CLOT'
+                        )
+                    ),
+                    'clearUrl' => ''
+                ),
                 'channel' => array(
                     array(
                         'href' => '/?gender=1,3',