修正产品详情页

pages/mobile/product/_batchCode.vue

@@ -6,6 +6,10 @@
     </div>
     <div class="product-info">
       <div class="wrap-title"><span class="line"></span>产品信息</div>
+      <div class="focus-wrap inline-block" :class="{'active': isFocus}">
+        <i class="iconfont icon-shoucang" @click="collectStore"></i>
+        <div>店铺<br />关注</div>
+      </div>
       <div class="middle">
         <div class="list">
           <div class="fl">
@@ -77,8 +81,8 @@
       <div class="content-line link cl-price2">
         <ul class="clearfix">
           <nuxt-link :to="`/mobile/shop/${storeInfo.uuid}`" tag="li" class="text-ellipse inline-block price-level">
-            <i class="iconfont icon-shouye-copy"></i>
-            <p>店铺</p>
+            <i class="iconfont icon-dianpu"></i>
+            <p style="margin-left:0.25rem;">店铺</p>
           </nuxt-link>
           <li class="text-ellipse inline-block price-level" @click="showStoreInfo = true">
             <i class="iconfont icon-kefu1"></i>
@@ -92,10 +96,10 @@
       </div>
     </div>
     <div class="params-wrap">
-      <p>产品参数</p>
+      <div class="wrap-title"><span class="line"></span>产品参数</div>
       <ul v-if="component.properties && component.properties.length">
         <li v-for="prop in component.properties" v-if="prop.property">
-          <span class="inline-block text-ellipse" v-text="prop.property.labelCn"></span>
+          <span class="inline-block text-ellipse"> {{prop.property.labelCn}}：</span>
           <span class="inline-block text-ellipse" v-text="prop.value || '—'"></span>
         </li>
       </ul>
@@ -245,11 +249,31 @@
       }
     }
     .product-info {
+      position: relative;
       background: #fff;
       margin: 0.2rem;
       border: 1px solid #e3e5e8;
       padding-bottom: 0.2rem;
+      .focus-wrap {
+        text-align: center;
+        position: absolute;
+        background-image: url('/images/mobile/product/productdetail_label.png');
+        width: 0.93rem;
+        height: 1.27rem;
+        background-size: 100% 100%;
+        font-size: 0.24rem;
+        color: #666;
+        right: 0px;
+        top: 0px;
+        i {
+          color: #cacaca;
+        }
+        &.active {
+          i {color: rgb(255, 120, 0);}
+        }
+      }
       .middle {
+        border-radius: 5px;
         padding: 0.24rem 0.24rem 0px;
         background: #fff;
         .pms {
@@ -275,7 +299,7 @@
           }
           .textinfo {
             color: #0067e7;
-            font-size: 0.3rem;
+            font-size: 0.28rem;
           }
           .button {
             font-size: 0.28rem;
@@ -322,7 +346,7 @@
           .text {
             display: inline-block;
             color: #333;
-            font-size: 0.3rem;
+            font-size: 0.28rem;
             &.red {
               color: #e6353d;
             }
@@ -376,6 +400,7 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        font-size:0.28rem;
         .name {
           color: #666;
         }
@@ -394,6 +419,7 @@
         }
       }
       .content-line {
+        border-radius: 5px;
         ul {
           li {
             width: 2rem;
@@ -408,6 +434,9 @@
               display: inline-block;
               margin-right: 0.1rem;
               margin-left: 0.1rem;
+              &.active {
+                color: #eb062b;
+              }
             }
             &:nth-last-of-type(1) {
               margin-right: 0;
@@ -429,9 +458,6 @@
               text-align: center;
               line-height: 0.5rem;
               vertical-align: top;
-              &:nth-of-type(1) {
-                margin-left: 0.25rem;
-              }
             }
           }
         }
@@ -451,32 +477,36 @@
       }
     }
     .params-wrap {
+      border: 1px solid #e3e5e8;
+      border-radius: 5px;
+      margin: 0.2rem;
       background: #fff;
-      padding: .29rem .23rem;
+      padding: 0 0 .29rem;
       p {
         font-size: .26rem;
         text-align: center;
         margin-bottom: .24rem;
       }
       ul {
-        border-left: .01rem solid #d9d9d9;
-        border-top: .01rem solid #d9d9d9;
         background: #fff;
-        font-size: .24rem;
+        font-size: .28rem;
+        padding: 0 0.24rem;
         li {
-          border-bottom: .01rem solid #d9d9d9;
+          /*border-bottom: .01rem solid #d9d9d9;*/
           span {
-            border-right: .01rem solid #d9d9d9;
+            /*border-right: .01rem solid #d9d9d9;*/
             height: .67rem;
             line-height: .67rem;
             text-align: center;
-            padding: 0 .15rem;
+            /*padding: 0 .15rem;*/
             &:first-child {
-              width: 50%;
+              /*width: 50%;*/
+              color: #666;
             }
             &:last-child {
-              width: 50%;
-              text-align: left;
+              color: #333;
+              /*width: 50%;*/
+              /*text-align: left;*/
             }
           }
         }