项目实训的“所有状态”和“所有进展”以及搜索，请调整

app/views/shixuns/index.html.erb

@@ -12,17 +12,44 @@
     </ul>
   </div>
   <div class="task-index-select mb20 clearfix">
+    <li class="fl  ml15 mr5 edu-dropdown">
+      <a href="#" class="edu-dropdown-toggle">所有状态<i class="fa fa-caret-down ml5" ></i></a>
+      <ul class="edu-dropdown-menu" role="menu">
+        <li><a href="#">所有状态</a></li>
+        <li><a href="#">已 审 核</a></li>
+        <li><a href="#">审 核 中</a></li>
+      </ul>
+    </li>
+    <li class="edu-dropdown fl ml15 mr5">
+      <a href="#" class="edu-dropdown-toggle" >所有进展<i class="fa fa-caret-down ml5" ></i></a>
+      <ul class="edu-dropdown-menu" >
+        <li><a href="#">所有进展</a></li>
+        <li><a href="#">我已创建</a></li>
+        <li><a href="#">我未挑战</a></li>
+        <li><a href="#">我未通关</a></li>
+        <li><a href="#">我已通关</a></li>
+      </ul>
+    </li>
+    <form onsubmit="submitFn(this, event);" class="fl ml15">
+      <div class="search-wrapper">
+        <div class="input-holder">
+          <input type="text" class="search-input" placeholder="搜索" />
+          <button class="search-icon" onclick="searchToggle(this, event);"><i class="fa fa-search font-16 mt5"></i></button>
+        </div>
+        <span class="close" onclick="searchToggle(this, event);"><i class="fa fa-times font-16 mt5"></i></span>
+      </div>
+    </form>
     <p class="color-grey fr">
-    <div class="postSort fr" id="shixun_hot">
-      <a href="javascript:void(0);" class="linkGrey2 fl">热度排序</a>
-      <a href="javascript:void(0);" id="hot_reorder" class="fl"></a>
-    </div>
-    <div class="postSort fr" id="shixun_time">
-      <a href="javascript:void(0);" class="linkGrey2 fl">时间排序</a>
-      <a href="javascript:void(0);"  id="time_reorder" class="sortArrowActiveD fl"></a>
-    </div>
-    <span class="fr">排序方式：</span>
-    <!--<span class="fr mr30">共 <span class="color-light-green">102</span> 个搜索结果</span>-->
+        <div class="postSort fr" id="shixun_hot">
+          <a href="javascript:void(0);" class="linkGrey2 fl">热度排序</a>
+          <a href="javascript:void(0);" id="hot_reorder" class="fl"></a>
+        </div>
+        <div class="postSort fr" id="shixun_time">
+          <a href="javascript:void(0);" class="linkGrey2 fl">时间排序</a>
+          <a href="javascript:void(0);"  id="time_reorder" class="sortArrowActiveD fl"></a>
+        </div>
+        <span class="fr">排序方式：</span>
+        <!--<span class="fr mr30">共 <span class="color-light-green">102</span> 个搜索结果</span>-->
     </p>
   </div>
 
@@ -33,6 +60,39 @@
 <!----------------------- 左侧导航栏 ----------------------------->
 <%= render :partial => 'layouts/public_left_info' %>
 <script>
+    function searchToggle(obj, evt){
+        var container = $(obj).closest('.search-wrapper');
+
+        if(!container.hasClass('active')){
+            container.addClass('active');
+            evt.preventDefault();
+        }
+        else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){
+            container.removeClass('active');
+            // clear input
+            container.find('.search-input').val('');
+            // clear and hide result container when we press close
+            container.find('.result-container').fadeOut(100, function(){$(this).empty();});
+        }
+    }
+
+    function submitFn(obj, evt){
+        value = $(obj).find('.search-input').val().trim();
+
+        _html = "Yup yup! Your search text sounds like this: ";
+        if(!value.length){
+            _html = "Yup yup! Add some text friend :D";
+        }
+        else{
+            _html += "<b>" + value + "</b>";
+        }
+
+        $(obj).find('.result-container').html('<span>' + _html + '</span>');
+        $(obj).find('.result-container').fadeIn(100);
+
+        evt.preventDefault();
+    }
+
     $(function(){
         var nTime = $("#time_reorder");
         var nHot  = $("#hot_reorder");

public/stylesheets/css/edu-public.css

@@ -1,7 +1,8 @@
 /* 头部 */
 .header{ width:100%; height:51px;min-width:1200px;background:#46484c;  }
 .header_con{ width:1200px; min-width:1200px; height:50px; margin:0 auto;  }
-.new-logo img{ width: 31px; height: 31px; margin-top:10px;}
+.new-logo{ border:1px solid #fff;border-radius:3px;margin-top:10px;}
+.new-logo img{ width: 27px; height:27px;  border-radius:3px; }
 .new-logo p{ font-size: 18px; color:#fff; line-height: 50px; }
 a.new-nav-a{ display: block; font-size: 14px; line-height: 50px; color:#fff;}
 a:hover.new-nav-a{ color:#3b94d6; text-decoration: none;}
@@ -52,6 +53,11 @@ $colors: #fff, #0072B5, #2C3E50;
 }
 }
 }
+
+.edu-dropdown{ position: relative; padding:0 15px; }
+.edu-dropdown-menu{ background-color:#fff; text-align: center;  border-radius:3px; box-shadow: 0px 2px 8px rgba(146, 153, 169, 0.5); position:absolute; top:25px; left:0px; z-index: 999;   display:none;}
+.edu-dropdown-menu li{ height:30px; line-height:30px; display: block; padding:0 15px;}
+.edu-dropdown:hover .edu-dropdown-menu{ display: block;}
 .animate{ -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -ms-transition: all .3s;
     transition: all .3s;   backface-visibility:hidden; -webkit-backface-visibility:hidden; /* Chrome and Safari */ -moz-backface-visibility:hidden; /* Firefox */ -ms-backface-visibility:hidden; /* Internet Explorer */}
 /* 底部 */