搜索框改用自己的

web/src/views/layout/index.vue

@@ -84,15 +84,25 @@
           aria-label aria-description="You've reached the seach field, please use the tab key to browse the content."
           tabindex="0"
         >
-          <el-input
+          <div class="input-wrapper">
+            <input
+              type="text"
+              autocomplete="off"
+              placeholder="search..."
+              v-model="searchTxt"
+              tabindex="0"
+              aria-description="search"
+            />
+          </div>
+          <!-- <el-input
             placeholder="search..."
             suffix-icon="el-icon-search"
             v-model="searchTxt"
             tabindex="0"
             aria-description="search"
           >
-          </el-input>
-          <div class="btnn" @click="search"></div>
+          </el-input> -->
+          <!-- <div class="btnn" @click="search"></div> -->
         </div>
       </div>
       <!-- 嵌套路由 -->
@@ -364,21 +374,47 @@ export default {
     ::-webkit-input-placeholder {
       color: #000000;
     }
-    /deep/.el-input__icon {
-      font-size: 20px;
-      line-height: 30px;
-      color: #ca000a;
-    }
-    .btnn {
-      cursor: pointer;
-      z-index: 99;
-      position: absolute;
-      right: 0px;
-      top: 0px;
-      width: 40px;
+    .input-wrapper {
+      box-sizing: border-box;
+      position: relative;
+      display: inline-block;
+      width: 100%;
       height: 30px;
-      border-radius: 15px;
+      input {
+        font-size: 14px;
+        background-color: #FFF;
+        border: 1px solid #DCDFE6;
+        box-sizing: border-box;
+        color: #606266;
+        display: inline-block;
+        outline: 0;
+        padding: 0 15px;
+        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+        width: 100%;
+        height: 30px;
+        border-radius: 15px;
+        line-height: 30px;
+        padding-right: 30px;
+        &:focus {
+          border-color: #ca000a;
+        }
+      }
     }
+    // /deep/.el-input__icon {
+    //   font-size: 20px;
+    //   line-height: 30px;
+    //   color: #ca000a;
+    // }
+    // .btnn {
+    //   cursor: pointer;
+    //   z-index: 99;
+    //   position: absolute;
+    //   right: 0px;
+    //   top: 0px;
+    //   width: 40px;
+    //   height: 30px;
+    //   border-radius: 15px;
+    // }
   }
 }
 .rightNav {