ross设备认证页面样式调整

pages/_template/ross/approve/device/detail.vue

@@ -3,7 +3,6 @@
     <div class="detail-title">设备认证</div>
     <div class="page-top">
       <div class="swiper">
-        <!-- <SimpleSwiper :imageList="bannerList"></SimpleSwiper> -->
         <img :src="productInfo.pcImage" class="device-image" />
         <div class="auth-seal"></div>
         <img
@@ -12,28 +11,24 @@
           @click="onShowAuthCard"
           v-if="!showAuthCard"
         />
-        <!-- <img class="auth-logo" :src="authLogoImage" /> -->
+        <img class="auth-logo" :src="authLogoImage" />
       </div>
       <div class="device-info">
         <div class="logo">
-          <img :src="authLogoImage" alt="logo" />
+          <img :src="productInfo.clubLogo" alt="logo" />
         </div>
         <div class="section">
           <div class="name" v-text="productInfo.productName"></div>
           <div class="sncode mobile">
-            SN码：<span>{{ productInfo.snCode }}</span>
+            SN码：<span>{{ productInfo.snCode | snCodeRender }}</span>
           </div>
           <div class="row">
-            <span>{{ productInfo.brandName }}</span>
-            <i></i>
-            <span>{{ productInfo.productionPlace }}</span>
+            <span>品牌：{{ productInfo.brandName }}</span><i></i><span>产地：{{ productInfo.productionPlace }}</span>
           </div>
           <div class="sncode pc">
             SN码：<span>{{ productInfo.snCode | snCodeRender }}</span>
           </div>
-          <div class="maker" v-if="productInfo.manufacturer">
-            制造商：{{ productInfo.manufacturer }}
-          </div>
+          <div class="maker">制造商：{{ productInfo.manufacturer }}</div>
           <div class="supplier">代理商：{{ productInfo.shopName }}</div>
         </div>
         <div class="auth">
@@ -49,7 +44,7 @@
     </div>
     <div class="page-content">
       <div class="device-params">
-        <div class="title">产品参数</div>
+        <div class="title">相关参数</div>
         <div class="line"></div>
         <div class="params">
           <div class="row" v-for="(row, index) in paramListRender" :key="index">
@@ -86,7 +81,7 @@ import { chunk } from 'lodash'
 export default {
   layout: 'app-ross',
   filters: {
-    snCodeRender: function (code) {
+    snCodeRender(code) {
       return code.replace(/^(\w{2})\w+(\w{4})$/, '$1******$2')
     },
   },
@@ -432,6 +427,7 @@ export default {
 
             &:nth-child(2n-1) {
               color: #999999;
+              white-space: nowrap;
             }
 
             &:nth-child(2n) {
@@ -559,7 +555,7 @@ export default {
           box-sizing: border-box;
           position: absolute;
           right: 4vw;
-          top: 15.3vw;
+          top: 5.8vw;
 
           &::after {
             content: '';
@@ -588,6 +584,7 @@ export default {
           color: #282828;
           line-height: 7.4vw;
           margin-bottom: 2.4vw;
+          font-weight: bold;
         }
 
         .sncode.pc {
@@ -607,9 +604,9 @@ export default {
             &::after {
               content: '';
               display: block;
-              width: 0.3vw;
+              width: 0.2vw;
               height: 3vw;
-              background: #999999;
+              background: #282828;
               position: absolute;
               top: 1vw;
               left: 0;
@@ -618,13 +615,13 @@ export default {
 
           span {
             font-size: 3.6vw;
-            color: #999999;
+            color: #282828;
           }
         }
 
         .row,
         .maker {
-          margin-bottom: 2.4vw;
+          margin-bottom: 1.2vw;
         }
 
         .supplier,
@@ -634,12 +631,14 @@ export default {
         }
 
         .auth {
-          width: 100%;
+          // width: 100%;
+          margin: 0 4vw;
           min-height: 20vw;
           background: #f3920d;
-          margin-top: 6.4vw;
+          margin-top: 4vw;
           box-sizing: border-box;
           padding: 5.2vw 4vw;
+          border-radius: 1.2vw;
 
           .auth-icon {
             height: 4.9vw;
@@ -650,11 +649,12 @@ export default {
 
           .auth-info {
             font-size: 0;
-            margin-top: 10px;
+            margin-top: 1vw;
             span {
               font-size: 3.6vw;
               line-height: 6.4vw;
               color: #fff;
+              font-weight: bold;
             }
           }
         }
@@ -662,16 +662,16 @@ export default {
     }
     .page-content {
       .device-params {
-        padding: 11.2vw 4vw;
+        padding: 8vw 4vw;
         box-sizing: border-box;
         .title {
-          font-size: 4vw;
+          font-size: 4.6vw;
           color: #282828;
           font-weight: bold;
         }
         .line {
-          height: 0.2vw;
-          background: #ececec;
+          // height: 0.2vw;
+          // background: #ececec;
           position: relative;
           margin-top: 4.7vw;
           margin-bottom: 1.2vw;
@@ -683,21 +683,36 @@ export default {
           .row {
             display: table-row;
             width: 100%;
+
+            &:first-child {
+              .col {
+                padding-top: 0;
+              }
+            }
+
+            &:last-child {
+              .col {
+                padding-bottom: 0;
+              }
+            }
           }
 
           .col {
             display: table-cell;
             font-size: 3.6vw;
-            padding: 2.8vw 0;
+            padding: 1.6vw 0;
 
             &:nth-child(2n-1) {
-              color: #999999;
+              color: #282828;
               padding-right: 3.2vw;
+              font-weight: bold;
               white-space: nowrap;
+              border-right: 0.2vw solid #d8d8d8;
             }
 
             &:nth-child(2n) {
-              color: #282828;
+              color: #4e4e4e;
+              padding-left: 3.2vw;
             }
           }
         }