开始改造搜索框

themes/yilia/source-src/css/mobile.scss

@@ -34,9 +34,6 @@ html, body, #container {
   }
   .tools-wrap, .tools-section {
     width: 300px;
-    .search-wrap {
-      width: 280px;
-    }
     .search-tag.tagcloud {
       margin-right: -30px;
     }

themes/yilia/source-src/css/reward.scss

@@ -45,6 +45,6 @@
     width: 130px;
     height: 130px;
     border: 6px solid $colorBorder;
-    border-radius: 3px;
+    border-radius: $radiusSmall;
   }
 }

themes/yilia/source-src/css/tools.scss

@@ -33,20 +33,20 @@
   }
   .tools-section {
     .search-wrap {
-      width: 310px;
       margin: 20px 20px 10px 20px;
       position: relative;
+      border-bottom: 2px solid $colorF;
+      cursor: text;
       .search-ipt {
-        width: 310px;
+        width: 50px;
         color: $colorF;
         background: none;
         border: none;
-        border-bottom: 2px solid $colorF;
       }
       .icon {
         position: absolute;
         right: 0;
-        top: 7px;
+        bottom: 7px;
         color: $colorF;
         cursor: pointer;
         @extend %trans;
@@ -54,6 +54,24 @@
           transform: scale(1.2);
         }
       }
+      .search-item {
+        border: 1px solid $colorF;
+        padding-left: 5px;
+        line-height: 1.4em;
+        display: inline-block;
+        border-radius: $radiusBase;
+        &::after {
+          content: "x";
+          border-left: 1px solid $colorF;
+          width: 20px;
+          height: 20px;
+          display: inline-block;
+          margin: 3px 0 3px 3px;
+          line-height: 20px;
+          text-align: center;
+          cursor: pointer;
+        }
+      }
       ::-webkit-input-placeholder {
         color: #ededed;
       }