修改搜索样式

components/mobile/search/MainSearch.vue

@@ -17,10 +17,12 @@
       <span @click="onSearch()">搜索</span>
       <a @click="cancelSearch()">取消</a>
       <div class="main-search-header-controll clearfix">
-        <span :class="ChooseTop === 'component' ? 'active' : ''" @click="setChangelistHander('component')"><a>型号</a></span>
-        <span :class="ChooseTop === 'kind' ? 'active' : ''" @click="setChangelistHander('kind')"><a>物料名称</a></span>
-        <span :class="ChooseTop === 'store' ? 'active' : ''" @click="setChangelistHander('store')"><a>卖家</a></span>
-        <span :class="ChooseTop === 'brand' ? 'active' : ''" @click="setChangelistHander('brand')"><a>品牌</a></span>
+        <div style="display: flex;align-items: center;justify-content: space-between;width:100%;">
+          <div :class="ChooseTop === 'component' ? 'active' : ''" @click="setChangelistHander('component')"><a>型号</a></div>
+          <div :class="ChooseTop === 'kind' ? 'active' : ''" @click="setChangelistHander('kind')"><a>物料名称</a></div>
+          <div :class="ChooseTop === 'store' ? 'active' : ''" @click="setChangelistHander('store')"><a>卖家</a></div>
+          <div :class="ChooseTop === 'brand' ? 'active' : ''" @click="setChangelistHander('brand')"><a>品牌</a></div>
+        </div>
       </div>
     </div>
     <ul class="associate-list" v-show="associate.show">
@@ -255,7 +257,7 @@
         height: .62rem;
         line-height: .62rem;
         font-size: .26rem;
-        color: #999;
+        color: #333;
         margin-left: 0.3rem;
         /*padding-left: 1.26rem;*/
         border: .04rem solid #fff;
@@ -290,18 +292,18 @@
       }
       .main-search-header-controll {
         background: #3e82f5;
-        span {
-          padding: 0 0.2rem;
+        width: 5.9rem;
+        margin-left: 0.3rem;
+        div {
           @include lineHeight(0.66rem);
           font-size: 0.28rem;
           color: #fff;
           margin: 0;
           background: rgba(0,0,0,0);
           border-radius: 0;
-          width: auto;
           &.active a{
             color: #fff;
-            border-bottom: 0.04rem solid #fff;
+            border-bottom: 0.02rem solid #fff;
           }
         }
       }

pages/mobile/search/newkeycode.vue

@@ -6,10 +6,12 @@
      <span @click="onClickSearchHander()">搜索</span>
      <a @click="cancelSearchHander()">取消</a>
      <div class="main-search-header-controll clearfix">
-       <span :class="ChooseTop === 'component' ? 'active' : ''" @click="setChangelistHander('component')"><a>型号</a></span>
-       <span :class="ChooseTop === 'kind' ? 'active' : ''" @click="setChangelistHander('kind')"><a>物料名称</a></span>
-       <span :class="ChooseTop === 'store' ? 'active' : ''" @click="setChangelistHander('store')"><a>卖家</a></span>
-       <span :class="ChooseTop === 'brand' ? 'active' : ''" @click="setChangelistHander('brand')"><a>品牌</a></span>
+       <div style="display: flex;align-items: center;justify-content: space-between;width:100%;">
+         <div :class="ChooseTop === 'component' ? 'active' : ''" @click="setChangelistHander('component')"><a>型号</a></div>
+           <div :class="ChooseTop === 'kind' ? 'active' : ''" @click="setChangelistHander('kind')"><a>物料名称</a></div>
+           <div :class="ChooseTop === 'store' ? 'active' : ''" @click="setChangelistHander('store')"><a>卖家</a></div>
+         <div :class="ChooseTop === 'brand' ? 'active' : ''" @click="setChangelistHander('brand')"><a>品牌</a></div>
+       </div>
      </div>
    </div>
    <ul class="associate-list" v-show="associate.show" @click="associate.show = false">
@@ -54,11 +56,11 @@
                </div>
              </div>
              <div class="list">
-               <div class="name">官网地址：</div>
+               <div class="name" style="color:#4290f7">官网地址：</div>
                <div class="text" style="width: 4.5rem">
                  <a :href="resourceList.brand && resourceList.brand.url" target="_blank">{{resourceList.brand && resourceList.brand.url}}</a>
                </div>
-               <div class="pull-right lookMoreBtn" @click="showBrandDetails = true">
+               <div class="pull-right lookMoreBtn" @click="showBrandDetails = true"  style="color:#4290f7">
                  查看更多
                </div>
              </div>
@@ -725,7 +727,7 @@
         height: .62rem;
         line-height: .62rem;
         font-size: .26rem;
-        color: #999;
+        color: #333;
         margin-left: 0.3rem;
         /*padding-left: 1.26rem;*/
         border: .04rem solid #fff;
@@ -760,18 +762,18 @@
       }
       .main-search-header-controll {
         background: #3e82f5;
-        width: 6.2rem;
-        span {
+        width: 5.9rem;
+        margin-left: 0.3rem;
+        div {
           @include lineHeight(0.66rem);
           font-size: 0.28rem;
           color: #fff;
           margin: 0;
           background: rgba(0,0,0,0);
           border-radius: 0;
-          width: 25%;
           &.active a {
             color: #fff;
-            border-bottom: 0.04rem solid #fff;
+            border-bottom: 0.02rem solid #fff;
           }
           a {
             margin-left: 0 !important;
@@ -983,8 +985,8 @@
               border: 1px solid #3f84f6;
               background: #fff;
               width: 2rem;
-              line-height: 0.54rem;
-              height: 0.54rem;
+              line-height: 0.56rem;
+              height: 0.56rem;
               text-align: center;
             }
             div:last-child {
@@ -1038,7 +1040,7 @@
             img {
               width: 1.21rem;
               height: 1.21rem;
-              border: 1px solid #3e82f5;
+              border: 1px solid #4290f7;
               border-radius: 0.07rem;
               overflow: hidden;
             }