Browse Source

统一全局搜索框样式

shenjj 7 years ago
parent
commit
1a591e784b
2 changed files with 24 additions and 19 deletions
  1. 3 3
      components/mobile/Home.vue
  2. 21 16
      pages/mobile/search/newkeycode.vue

+ 3 - 3
components/mobile/Home.vue

@@ -339,7 +339,7 @@
     padding-bottom: 1rem;
     background: #f3f3f7;
     .search-content {
-      padding: 0.15rem 0;
+      padding: 0.19rem 0 0.15rem;
       position: absolute;
       z-index: 11;
       width: 100%;
@@ -370,7 +370,7 @@
             border-top-right-radius: 0.05rem;
           }
           &.active a {
-            color: #40b6fc;
+            color: #3e82f5;
           }
         }
       }
@@ -379,7 +379,7 @@
       position: absolute;
       width: 100%;
       background: #fff;
-      top: 1.25rem;
+      top: 1.29rem;
       border: 1px solid #dcdcdc;
       z-index: 100;
       height: 100%;

+ 21 - 16
pages/mobile/search/newkeycode.vue

@@ -11,7 +11,10 @@
        </div>
      </div>
      <input type="text" id="search-box" v-model="keyword" @keyup.13="onClickSearchHander()" :placeholder="placeholder" @input="changeKeyWord()">
-     <span @click="onClickSearchHander()">搜索</span>
+     <!--<span @click="onClickSearchHander()">搜索</span>-->
+     <span @click="onClickSearchHander()">
+        <i class="iconfont icon-sousuo"></i>
+      </span>
      <a @click="cancelSearchHander()" style="margin-top: 0.14rem;display: inline-block;">取消</a>
    </div>
    <ul class="associate-list" v-show="associate.show" @click="associate.show = false">
@@ -650,12 +653,12 @@
     .main-search-header {
       position: absolute;
       background: #3e82f5;
-      padding: 0.15rem 0;
+      padding: 0.19rem 0 0.15rem;
       margin-top: 0;
       z-index: 1;
       width: 100%;
       input {
-        width: 5.1rem;
+        width: 6.48rem;
         height: .58rem;
         line-height: .58rem;
         font-size: .26rem;
@@ -669,22 +672,24 @@
         float: left;
         /*margin-top: .12rem;*/
         -webkit-appearance: none;
-        border-top-left-radius: .14rem;
-        border-bottom-left-radius: .14rem;
+        border-radius: .14rem;
+        /*border-top-left-radius: .14rem;*/
+        /*border-bottom-left-radius: .14rem;*/
       }
       span {
         display: inline-block;
-        width: 1.02rem;
-        text-align: center;
         height: .58rem;
         line-height: .58rem;
-        color: #366df3;
-        font-size: .28rem;
-        margin-left: .02rem;
-        border-top-right-radius: .14rem;
-        border-bottom-right-radius: .14rem;
-        background: #fff;
-        float: left;
+        position: relative;
+        top: .04rem;
+        width: .68rem;
+        color: #376ff3;
+        border-left: .02rem solid #376ff3;
+        margin-left: -.68rem;
+        text-align: center;
+        i {
+          font-size: .31rem;
+        }
         /*margin-top: .12rem;*/
       }
       a {
@@ -709,7 +714,7 @@
               border-top-right-radius: 0.05rem;
             }
             &.active a {
-              color: #40b6fc;
+              color: #3e82f5;
             }
             a {
               font-size: .26rem;
@@ -1142,7 +1147,7 @@
       position: absolute;
       width: 100%;
       background: #fff;
-      top: 1.4rem;
+      top: 1.44rem;
       border: 1px solid #dcdcdc;
       z-index: 100;
       height: 100%;