Browse Source

手机求购样式调整

yangc 7 years ago
parent
commit
ab6db0847b

+ 8 - 7
assets/scss/mobileCommon.scss

@@ -98,7 +98,7 @@ ins, a {
   left: 0;
   right: 0;
   z-index: 999;
-  background: rgba(0,0,0,.3);
+  background: rgba(0,0,0,.4);
   .mobile-modal-box {
     position: absolute;
     /*width: 5.92rem;*/
@@ -114,8 +114,8 @@ ins, a {
       text-align: center;
       font-size: .32rem;
       position: relative;
-      border-top-left-radius: .1rem;
-      border-top-right-radius: .1rem;
+      border-top-left-radius: .07rem;
+      border-top-right-radius: .07em;
       i {
         position: absolute;
         right: -.25rem;
@@ -127,8 +127,8 @@ ins, a {
       background: #fff;
       color: #333;
       padding: 0 .54rem;
-      border-bottom-left-radius: .1rem;
-      border-bottom-right-radius: .1rem;
+      border-bottom-left-radius: .07rem;
+      border-bottom-right-radius: .07rem;
       div {
         padding: .2rem 0;
         line-height: .4rem;
@@ -215,7 +215,7 @@ input {
   line-height: .96rem;
   text-align: center;
   position: relative;
-  border-bottom: .04rem solid rgb(219, 219, 219);
+  border-bottom: .02rem solid rgb(219, 219, 219);
   > img {
     width: .36rem;
     height: .38rem;
@@ -248,6 +248,7 @@ input {
   input {
     width: 6.48rem;
     height: .58rem;
+    line-height: .58rem;
     border-radius: .14rem;
     margin: 0 0 0 .11rem;
     font-size: .23rem;
@@ -265,7 +266,7 @@ input {
     margin-left: -.68rem;
     text-align: center;
     i {
-      font-size: .3rem;
+      font-size: .31rem;
     }
   }
   img {

+ 1 - 1
components/mobile/MobileHeader.vue

@@ -279,7 +279,7 @@
     width:100%;
     height:.88rem;
     line-height: .88rem;
-    border-bottom:.04rem solid #ccc;
+    border-bottom:.01rem solid #ccc;
     background: #3e82f5;
     padding:0 .2rem 0 .1rem;
     color:#fff;

+ 3 - 3
components/mobile/applyPurchase/PublishSeek.vue

@@ -330,17 +330,17 @@
           line-height: .8rem;
           font-size: .26rem;
           text-align: left;
-          border-bottom: .02rem solid #b7d5fe;
+          border-bottom: .01rem solid #b7d5fe;
           input {
             width: 3.49rem;
             height: .52rem;
             line-height: normal;
             padding: .1rem .19rem;
-            /*padding-left: .19rem;*/
-            border: .02rem solid #7e7e7e;
+            border: .01rem solid #7e7e7e;
             font-size: .26rem;
             vertical-align: middle;
             background: #fff;
+            border-radius: 0;
           }
           > span {
             display: inline-block;

+ 8 - 8
components/mobile/applyPurchase/SeekList.vue

@@ -149,12 +149,11 @@
     margin: .13rem auto 0;
 
     li {
-      border: .04rem solid #e0e0e4;
+      border: .02rem solid #e0e0e4;
       height: 3.32rem;
       margin-bottom: .2rem;
 
-      >
-      p {
+      > p {
         font-size: .32rem;
         color: #3a3a3a;
         background: #f8f7fa;
@@ -164,13 +163,12 @@
         span {
           display: block;
           width: 6.9rem;
-          border-bottom: .04rem dashed #9f9f9f;
+          border-bottom: .02rem dashed #9f9f9f;
           margin: 0 auto;
         }
 
       }
-      >
-      div {
+      > div {
         font-size: .3rem;
         display: inline-block;
 
@@ -180,16 +178,17 @@
           height: 1.74rem;
           margin: .27rem 0 .29rem .18rem;
           line-height: .46rem;
-          border-right: .04rem dashed #9f9f9f;
+          border-right: .02rem dashed #9f9f9f;
 
           > div {
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            font-family: "PingFang SC Regular";
 
             span {
               color: #333;
-
+              font-family: "PingFang SC Medium";
               &.date {
                 color: #e6353d;
               }
@@ -209,6 +208,7 @@
             span {
               font-size: .35rem;
               color: #ff3208;
+              font-family: 'PingFang SC Heavy';
             }
 
             i {

+ 6 - 1
pages/mobile/applyPurchase/list/index.vue

@@ -123,9 +123,14 @@
       .search-content {
         margin-left: .5rem;
         line-height: normal;
-        padding-top: .08rem;
+        padding-top: .14rem;
         input {
           color: #333;
+          width: 5.78rem;
+        }
+        span {
+          height: .46rem;
+          line-height: .46rem;
         }
       }
     }

+ 42 - 27
pages/mobile/user/index.vue

@@ -13,11 +13,17 @@
       <li :class="{active: activeType == 'comp'}" @click="activeType = 'comp'">器件收藏</li>
       <li :class="{active: activeType == 'store'}" @click="activeType = 'store'">店铺关注</li>
     </ul>
-    <div class="seek" v-if="activeType == 'seek'">
-      <ul class="seek-type">
+    <div v-if="activeType == 'seek'">
+      <div class="seek" v-if="userType !== 'saler'">
+        <ul class="seek-type">
+          <li :class="{active: seekType == 'wait'}" @click="switchSeek('wait')"><div>待报价</div></li>
+          <li :class="{active: seekType == 'done'}" @click="switchSeek('done')"><div>已报价</div></li>
+          <!--<li :class="{active: seekType == 'accept'}" @click="switchSeek('accept')"><div>已采纳</div></li>-->
+        </ul>
+      </div>
+      <ul class="switch-list vendor-switch" v-if="userType === 'saler'">
         <li :class="{active: seekType == 'wait'}" @click="switchSeek('wait')"><div>待报价</div></li>
         <li :class="{active: seekType == 'done'}" @click="switchSeek('done')"><div>已报价</div></li>
-        <!--<li :class="{active: seekType == 'accept'}" @click="switchSeek('accept')"><div>已采纳</div></li>-->
       </ul>
       <div class="search-content">
         <input type="text" placeholder="请输入您要查找的型号或品牌" v-model="seekKeyword" @keyup.13="searchSeek">
@@ -183,6 +189,7 @@
         this.reloadData()
       },
       switchType: function () {
+        this.activeType = 'seek'
         this.seekType = 'wait'
         this.seekKeyword = ''
         this.$router.push('/mobile/user' + (this.userType === 'saler' ? '?type=buyer' : '?type=saler'))
@@ -281,6 +288,7 @@
 
 <style scoped lang="scss">
   .user-content{
+    font-family: "PingFang SC Medium";
     margin-bottom: .98rem;
     .none-state{
       text-align: center;
@@ -311,15 +319,16 @@
       }
     }
     .user-name{
-      padding:.14rem 0 .2rem .34rem;
-      background:#fff;
-      width:100%;
-      position:relative;
+      height: 1.8rem;
+      padding: .28rem 0 .28rem .34rem;
+      background: #fff;
+      width: 100%;
+      position: relative;
       img{
         display: inline-block;
-        width:1.25rem;
-        height:1.25rem;
-        border:.04rem solid #c5dbfc;
+        width: 1.25rem;
+        height: 1.25rem;
+        border: .02rem solid #c5dbfc;
         border-radius: .05rem;
         vertical-align: middle;
       }
@@ -330,15 +339,13 @@
         p{
           font-size:.3rem;
           margin:0;
-          font-weight: bold;
           display: block;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
           width: 3.92rem;
           &:nth-child(2) {
-            font-weight: normal;
-            margin-top: .3rem;
+            margin-top: .2rem;
           }
         }
       }
@@ -486,11 +493,11 @@
         font-size: .28rem;
         color: #666;
         background: #fff;
-        border: .02rem solid #b4b4b4;
+        border: .01rem solid #b4b4b4;
         border-right: none;
         &.active {
           background: #0067e7;
-          border: .02rem solid #0067e7;
+          border: .01rem solid #0067e7;
           color: #fff;
         }
         &:first-child {
@@ -500,10 +507,15 @@
           border-right: none;
         }
       }
+      &.vendor-switch {
+        li {
+          width: 50%;
+        }
+      }
     }
     .seek {
-      ul.seek-type {
-        margin-top: .06rem;
+      .seek-type {
+        margin-top: .15rem;
         li {
           font-size: .28rem;
           color: #666;
@@ -511,11 +523,10 @@
           width: 50%;
           text-align: center;
           div {
-            width: 2rem;
-            border-bottom: .02rem solid #c1c4c9;
+            border-bottom: .03rem solid #c1c4c9;
             margin: 0 auto;
-            height: .6rem;
-            line-height: .6rem;
+            height: .46rem;
+            line-height: .46rem;
           }
           &.active {
             color: #3f84f6;
@@ -525,12 +536,16 @@
           }
         }
       }
-      .search-content {
-        text-align: center;
-        padding: .25rem 0 0 0;
-        input {
-          border: .02rem solid #376ff3;
-        }
+    }
+    .search-content {
+      text-align: center;
+      padding: .25rem 0 0 0;
+      input {
+        border: .02rem solid #376ff3;
+      }
+      span {
+        height: .46rem;
+        line-height: .46rem;
       }
     }
   }