搜索框样式

src/views/result.vue

@@ -9,7 +9,7 @@
     <form @submit.prevent="search">
       <!-- <mt-search v-model="searchText" ></mt-search> -->
       <div class="search-container">
-        <img class="search-container-img" @click="back" src="../images/sousuo/right-throw.png"/>
+        <img class="search-container-img" @click="back" src="../images/sousuo/left-arrow-black.png"/>
         <div >
           <span class="search-container-img2"><img class="search-container-img" src="../images/sousuo/search-black.png"/></span>
           <input class="search-container-input" type="search" v-model="searchText" maxlength="100">
@@ -352,55 +352,6 @@ export default {
   },
 }
 </script>
-<style >
-  /* .mint-search {
-    position: fixed;
-    top: 0px;
-    z-index: 3 !important;
-    height: 66px;
-    width: 100%;
-    border-bottom: 1px solid #E7E7E7 !important;
-  } */
-  .mint-search {
-    position: fixed;
-    top: 0px;
-    z-index: 3;
-    height: 66px;
-    width: 100%;
-    /* margin: 0 20px; */
-    border-bottom: 1px solid #E7E7E7 !important;
-    /* background-color: #fff; */
-  }
- .mint-searchbar {
-    position: relative;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    background: #fff;
-    box-sizing: border-box;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    margin: 0 10px;
-    padding: 30px 10px 8px;
-    z-index: 3;
-  }
-  .mint-searchbar-cancel {
-    margin-left: 10px;
-    font-size: 14px ;
-    color: #999;
-    text-decoration: none;
-  }
-  .mint-searchbar-inner {
-    background: #F5F6F6;
-    /* border-radius: 15px; */
-  }
-  .mint-searchbar-core {
-    color: #555555;
-    background: #F5F6F6;
-  }
-</style>
-
 <style lang="scss" scoped>
   @import '../style/mixin.scss';
   // .search-form {
@@ -457,24 +408,25 @@ export default {
 .search-container {
   display: flex;
   position: fixed;
-  flex-direction: row;
-  text-align: center;
   top: 0;
   left: 0;
   z-index: 3;
+  width: 100%;
+  flex-direction: row;
+  text-align: center;
   padding: px2rem(10px) 0;
   background: #fff;
   border-bottom: 1px solid #E7E7E7;
   &-img {
-    padding: px2rem(22px) 0 0 px2rem(10px);
-    width: px2rem(18px);
-    height: px2rem(18px);
+    padding: px2rem(21px) 0 0 px2rem(16px);
+    width: px2rem(20px);
+    height: px2rem(20px);
     // transform: rotate(180deg);
   }
   &-img2 {
     position: absolute;
-    top: px2rem(10px);
-    left: px2rem(30px);
+    top: px2rem(9.5px);
+    left: px2rem(24px);
     z-index: 2;
     img {
       width: px2rem(22px);
@@ -483,8 +435,8 @@ export default {
   }
   &-img3 {
     position: absolute;
-    top: px2rem(10px);
-    left: px2rem(280px);
+    top: px2rem(9px);
+    left: px2rem(274px);
     z-index: 2;
     img {
       width: px2rem(22px);
@@ -497,17 +449,19 @@ export default {
     left: px2rem(0px);
     width: px2rem(280px);
     height: px2rem(26px);
-    margin-left: px2rem(10px);
-    padding-left: px2rem(22px);
-    padding-right: px2rem(32px);
+    margin-left: px2rem(0px);
+    // padding-left: px2rem(26px);
+    // padding-right: px2rem(28px);
+    padding: px2rem(1px) px2rem(28px) 0 px2rem(26px);
     border-radius: px2rem(4px);
     background: rgba(246, 246, 246, 1);
+    font-size: px2rem(13px);
     color: #666;
     -webkit-appearance: none;
   }
   &-cancle {
     position: relative;
-    top: px2rem(2px);
+    top: px2rem(1px);
     left: 0;
     height: px2rem(14px);
     line-height: px2rem(14px);

src/views/search-index.vue

@@ -5,7 +5,7 @@
         <form @submit.prevent="search">
           <!-- <mt-search v-model="searchText" ></mt-search> -->
           <div class="search-container">
-            <img class="search-container-img" @click="back" src="../images/sousuo/right-throw.png"/>
+            <img class="search-container-img" @click="back" src="../images/sousuo/left-arrow-black.png"/>
             <div >
               <span class="search-container-img2"><img class="search-container-img" src="../images/sousuo/search-black.png"/></span>
               <input class="search-container-input" type="search"  v-model="searchText" maxlength="100">
@@ -20,8 +20,6 @@
         <!-- <div class="mt-100"></div> -->
         <HistoryLabels/>
         <HotLabels/>
-        dev 环境
-        <img src="https://test1-file.yunqueyi.com/image/HJ_B001_YD_002_A.jpg" @click="gotoPage">
     </div>
 </template>
 
@@ -237,23 +235,25 @@ export default {
 .search-container {
   display: flex;
   position: relative;
-  flex-direction: row;
-  text-align: center;
   top: 0;
   left: 0;
+  z-index: 3;
+  width: 100%;
+  flex-direction: row;
+  text-align: center;
   padding: px2rem(10px) 0;
   background: #fff;
   border-bottom: 1px solid #E7E7E7;
   &-img {
-    padding: px2rem(22px) 0 0 px2rem(10px);
-    width: px2rem(18px);
-    height: px2rem(18px);
+    padding: px2rem(21px) 0 0 px2rem(16px);
+    width: px2rem(20px);
+    height: px2rem(20px);
     // transform: rotate(180deg);
   }
   &-img2 {
     position: absolute;
-    top: px2rem(10px);
-    left: px2rem(30px);
+    top: px2rem(9.5px);
+    left: px2rem(24px);
     z-index: 2;
     img {
       width: px2rem(22px);
@@ -262,8 +262,8 @@ export default {
   }
   &-img3 {
     position: absolute;
-    top: px2rem(10px);
-    left: px2rem(280px);
+    top: px2rem(9px);
+    left: px2rem(274px);
     z-index: 2;
     img {
       width: px2rem(22px);
@@ -276,17 +276,19 @@ export default {
     left: px2rem(0px);
     width: px2rem(280px);
     height: px2rem(26px);
-    margin-left: px2rem(10px);
-    padding-left: px2rem(22px);
-    padding-right: px2rem(32px);
+    margin-left: px2rem(0px);
+    // padding-left: px2rem(26px);
+    // padding-right: px2rem(28px);
+    padding: px2rem(1px) px2rem(28px) 0 px2rem(26px);
     border-radius: px2rem(4px);
     background: rgba(246, 246, 246, 1);
+    font-size: px2rem(13px);
     color: #666;
     -webkit-appearance: none;
   }
   &-cancle {
     position: relative;
-    top: px2rem(2px);
+    top: px2rem(1px);
     left: 0;
     height: px2rem(14px);
     line-height: px2rem(14px);