搜索框bug修复

themes/yilia/layout/_partial/tools.ejs

@@ -23,14 +23,14 @@
   <div class="tools-wrap">
     <%if(hasInnerArchive){%>
     	<section class="tools-section tools-section-all" v-show="innerArchive">
-        <div class="search-wrap" @click="$refs.searchIpt.focus()">
+        <div class="search-wrap" >
           <span :class="'search-item'" v-for="(searchItem,index) in searchItems" :key="index">
             <i class="icon icon-book" v-if="searchItem.type === 'category'"></i>
             <i class="icon icon-price-tags" v-if="searchItem.type === 'tag'"></i>
             {{searchItem.query}}
             <i class="icon icon-close" @click="searchItems.splice(index,1)"></i>
           </span>
-          <input class="search-ipt" ref="searchIpt" v-model="search" @blur="addSearchItem(search)" @keydown="searchKeydown" type="text" placeholder="<%=__('search') %>…">
+          <input class="search-ipt" v-model="search" @blur="addSearchItem(search)" @keydown="searchKeydown" type="text" placeholder="<%=__('search') %>…">
           <i class="icon icon-search" @click="addSearchItem(search)"></i>
         </div>
         <div class="widget tagcloud search-tag">

themes/yilia/source-src/css/core/_animation.scss

@@ -256,7 +256,7 @@
 }
 
 %anmCommon {
-  animation-duration: .3s;
+  animation-duration: .5s;
   animation-fill-mode: both;
   animation-timing-function: ease-in-out;
 }

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

@@ -40,15 +40,15 @@ html, body, #container {
 	min-height:100%;
 	background:$colorBodyBg;
 	left: 300px;
-	width: auto;
+  width: auto;
 	@extend %trans;
 	&.show {
 		background: none;
 		opacity: .9;
 		@extend %anmLeftIn;
 		.article {
-			@extend %trans;
-			background: rgba(255,255,255,.3);
+      transition: opacity .5s ease-in, background-color .2s ease-in;
+      opacity: 0.6;
 		}
 	}
 	&.hide {

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

@@ -38,7 +38,6 @@
       border-bottom: 2px solid $colorF;
       display: flex;
       flex-wrap: wrap;
-      cursor: text;
       .search-ipt {
         color: $colorF;
         background: none;
@@ -64,6 +63,8 @@
         border-radius: 20px;
         background-color: #076773;
         white-space: nowrap;
+        font-size: 14px;
+        line-height: 25px;
         >.icon-close {
           color: darken($colorF, 15%);
           font-size: 12px;

themes/yilia/source-src/js/slider.js

@@ -77,7 +77,7 @@ new Vue({
       console.log(event.keyCode)
       if(event.keyCode == 13){ // 回车键
         this.addSearchItem(this.search)
-      } else if(event.keyCode == 8) { // 退格键
+      } else if(event.keyCode == 8 && !this.search) { // 退格键
         this.searchItems.pop()
       }
     },