设备参数列表样式调整

.prettierrc

@@ -1,4 +1,5 @@
 {
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "printWidth": 120
 }

components/SimpleParamList/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="param-list">
+    <div class="param__row" v-for="(item, index) in paramList" :key="index">
+      <template v-for="(param, index) in item">
+        <div class="col param__row-name" :key="'name' + index" v-text="param.paramName"></div>
+        <div class="col param__row-content" :key="'content' + index" v-text="param.paramContent"></div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    paramList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@media screen and (min-width: 768px) {
+  .param-list {
+    width: 100%;
+    word-break: break-all;
+    text-align: justify;
+    padding: 16px 0;
+    .param__row {
+      display: table-row;
+      width: 100%;
+    }
+
+    .col {
+      display: table-cell;
+      font-size: 16px;
+      padding: 8px 0;
+
+      &.param__row-name {
+        color: #666;
+        padding-right: 32px;
+        white-space: nowrap;
+        border-right: 1px solid #d8d8d8;
+      }
+
+      &.param__row-content {
+        color: #4e4e4e;
+        padding-left: 32px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .param-list {
+    width: 100%;
+    word-break: break-all;
+    text-align: justify;
+    .param__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: 1.6vw 0;
+
+      &.param__row-name {
+        color: #282828;
+        padding-right: 3.2vw;
+        font-weight: bold;
+        white-space: nowrap;
+        border-right: 0.2vw solid #d8d8d8;
+      }
+
+      &.param__row-content {
+        color: #4e4e4e;
+        padding-left: 3.2vw;
+      }
+    }
+  }
+}
+</style>

layouts/app-hyt.vue

@@ -590,41 +590,41 @@ export default {
         font-size: 3vw;
       }
     }
+  }
 
-    .nav {
-      width: 63vw;
-      box-sizing: border-box;
-      padding: 0 6.4vw;
-      .link {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        border-bottom: 0.1vw solid #c2c2c2;
-        padding-bottom: 3vw;
-        padding-top: 6vw;
-        .icon {
-          width: 5.6vw;
-          height: 5.6vw;
-          vertical-align: -1.2vw;
-          margin-right: 2.4vw;
-          background-size: 5.6vw;
-          background-repeat: no-repeat;
-          background-position: center;
-
-          &.icon-register {
-            background-image: url(~assets/theme-images/hyt/h5/link-entry-register-active.png);
-          }
-          &.icon-doc {
-            background-image: url(~assets/theme-images/hyt/h5/link-entry-doc-active.png);
-          }
-          &.icon-feedback {
-            background-image: url(~assets/theme-images/hyt/h5/link-entry-feedback-active.png);
-          }
+  .nav {
+    width: 63vw;
+    box-sizing: border-box;
+    padding: 0 6.4vw;
+    .link {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      border-bottom: 0.1vw solid #c2c2c2;
+      padding-bottom: 3vw;
+      padding-top: 6vw;
+      .icon {
+        width: 5.6vw;
+        height: 5.6vw;
+        vertical-align: -1.2vw;
+        margin-right: 2.4vw;
+        background-size: 5.6vw;
+        background-repeat: no-repeat;
+        background-position: center;
+
+        &.icon-register {
+          background-image: url(~assets/theme-images/hyt/h5/link-entry-register-active.png);
         }
-        .text {
-          font-size: 3.4vw;
-          color: #282828;
+        &.icon-doc {
+          background-image: url(~assets/theme-images/hyt/h5/link-entry-doc-active.png);
         }
+        &.icon-feedback {
+          background-image: url(~assets/theme-images/hyt/h5/link-entry-feedback-active.png);
+        }
+      }
+      .text {
+        font-size: 3.4vw;
+        color: #282828;
       }
     }
   }

layouts/app-normal.vue

@@ -597,41 +597,40 @@ export default {
         font-size: 3vw;
       }
     }
-
-    .nav {
-      width: 63vw;
-      box-sizing: border-box;
-      padding: 0 6.4vw;
-      .link {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        border-bottom: 0.1vw solid #c2c2c2;
-        padding-bottom: 3vw;
-        padding-top: 6vw;
-        .icon {
-          width: 5.6vw;
-          height: 5.6vw;
-          vertical-align: -1.2vw;
-          margin-right: 2.4vw;
-          background-size: 5.6vw;
-          background-repeat: no-repeat;
-          background-position: center;
-
-          &.icon-register {
-            background-image: url(~assets/theme-images/normal/h5/link-entry-register-active.png);
-          }
-          &.icon-doc {
-            background-image: url(~assets/theme-images/normal/h5/link-entry-doc-active.png);
-          }
-          &.icon-feedback {
-            background-image: url(~assets/theme-images/normal/h5/link-entry-feedback-active.png);
-          }
+  }
+  .nav {
+    width: 63vw;
+    box-sizing: border-box;
+    padding: 0 6.4vw;
+    .link {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      border-bottom: 0.1vw solid #c2c2c2;
+      padding-bottom: 3vw;
+      padding-top: 6vw;
+      .icon {
+        width: 5.6vw;
+        height: 5.6vw;
+        vertical-align: -1.2vw;
+        margin-right: 2.4vw;
+        background-size: 5.6vw;
+        background-repeat: no-repeat;
+        background-position: center;
+
+        &.icon-register {
+          background-image: url(~assets/theme-images/normal/h5/link-entry-register-active.png);
         }
-        .text {
-          font-size: 3.4vw;
-          color: #282828;
+        &.icon-doc {
+          background-image: url(~assets/theme-images/normal/h5/link-entry-doc-active.png);
         }
+        &.icon-feedback {
+          background-image: url(~assets/theme-images/normal/h5/link-entry-feedback-active.png);
+        }
+      }
+      .text {
+        font-size: 3.4vw;
+        color: #282828;
       }
     }
   }

layouts/app-ph.vue

@@ -544,41 +544,40 @@ export default {
         font-size: 3vw;
       }
     }
-
-    .nav {
-      width: 63vw;
-      box-sizing: border-box;
-      padding: 0 6.4vw;
-      .link {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        border-bottom: 0.1vw solid #c2c2c2;
-        padding-bottom: 3vw;
-        padding-top: 6vw;
-        .icon {
-          width: 5.6vw;
-          height: 5.6vw;
-          vertical-align: -1.2vw;
-          margin-right: 2.4vw;
-          background-size: 5.6vw;
-          background-repeat: no-repeat;
-          background-position: center;
-
-          &.icon-register {
-            background-image: url(~assets/theme-images/normal/h5/link-entry-register-active.png);
-          }
-          &.icon-doc {
-            background-image: url(~assets/theme-images/normal/h5/link-entry-doc-active.png);
-          }
-          &.icon-feedback {
-            background-image: url(~assets/theme-images/normal/h5/link-entry-feedback-active.png);
-          }
+  }
+  .nav {
+    width: 63vw;
+    box-sizing: border-box;
+    padding: 0 6.4vw;
+    .link {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      border-bottom: 0.1vw solid #c2c2c2;
+      padding-bottom: 3vw;
+      padding-top: 6vw;
+      .icon {
+        width: 5.6vw;
+        height: 5.6vw;
+        vertical-align: -1.2vw;
+        margin-right: 2.4vw;
+        background-size: 5.6vw;
+        background-repeat: no-repeat;
+        background-position: center;
+
+        &.icon-register {
+          background-image: url(~assets/theme-images/normal/h5/link-entry-register-active.png);
         }
-        .text {
-          font-size: 3.4vw;
-          color: #282828;
+        &.icon-doc {
+          background-image: url(~assets/theme-images/normal/h5/link-entry-doc-active.png);
         }
+        &.icon-feedback {
+          background-image: url(~assets/theme-images/normal/h5/link-entry-feedback-active.png);
+        }
+      }
+      .text {
+        font-size: 3.4vw;
+        color: #282828;
       }
     }
   }

layouts/app-ross.vue

@@ -651,44 +651,43 @@ export default {
         font-size: 3vw;
       }
     }
-
-    .nav {
-      width: 63vw;
-      box-sizing: border-box;
-      padding: 0 6.4vw;
-      .link {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        border-bottom: 0.1vw solid #c2c2c2;
-        padding-bottom: 3vw;
-        padding-top: 6vw;
-        .icon {
-          width: 5.6vw;
-          height: 5.6vw;
-          vertical-align: -1.2vw;
-          margin-right: 2.4vw;
-          background-size: 5.6vw;
-          background-repeat: no-repeat;
-          background-position: center;
-
-          &.icon-register {
-            background-image: url(~assets/theme-images/ross/h5-link-entry-register-active.png);
-          }
-          &.icon-doc {
-            background-image: url(~assets/theme-images/ross/h5-link-entry-doc-active.png);
-          }
-          &.icon-feedback {
-            background-image: url(~assets/theme-images/ross/h5-link-entry-feedback-active.png);
-          }
-          &.icon-challenge {
-            background-image: url(~assets/theme-images/ross/h5-link-entry-challenge.png);
-          }
+  }
+  .nav {
+    width: 63vw;
+    box-sizing: border-box;
+    padding: 0 6.4vw;
+    .link {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      border-bottom: 0.1vw solid #c2c2c2;
+      padding-bottom: 3vw;
+      padding-top: 6vw;
+      .icon {
+        width: 5.6vw;
+        height: 5.6vw;
+        vertical-align: -1.2vw;
+        margin-right: 2.4vw;
+        background-size: 5.6vw;
+        background-repeat: no-repeat;
+        background-position: center;
+
+        &.icon-register {
+          background-image: url(~assets/theme-images/ross/h5-link-entry-register-active.png);
         }
-        .text {
-          font-size: 3.4vw;
-          color: #282828;
+        &.icon-doc {
+          background-image: url(~assets/theme-images/ross/h5-link-entry-doc-active.png);
         }
+        &.icon-feedback {
+          background-image: url(~assets/theme-images/ross/h5-link-entry-feedback-active.png);
+        }
+        &.icon-challenge {
+          background-image: url(~assets/theme-images/ross/h5-link-entry-challenge.png);
+        }
+      }
+      .text {
+        font-size: 3.4vw;
+        color: #282828;
       }
     }
   }

middleware/intercept.js

@@ -67,7 +67,7 @@ async function initTemplateEntry(context) {
       return
     }
 
-    if (dev !== 'development') {
+    if (dev === 'production') {
       // 默认模板
       if (prefix === 'app') {
         if (isFixedTemplate(authUserId)) {

mixins/deviceDetail.js

@@ -26,9 +26,10 @@ export default {
     // 参数列表
     paramListRender() {
       if (!this.productInfo) return []
-      return this.isPc
-        ? chunk(this.productInfo.paramList, 2)
-        : chunk(this.productInfo.paramList, 1)
+      // return this.isPc
+      //   ? chunk(this.productInfo.paramList, 2)
+      //   : chunk(this.productInfo.paramList, 1)
+      return chunk(this.productInfo.paramList, 1)
     },
     // 机构logo
     brandLogoImage() {

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

@@ -5,21 +5,13 @@
       <div class="swiper-body">
         <img :src="productInfo.pcImage" class="device-image" />
         <div class="auth-seal"></div>
-        <img
-          class="auth-card"
-          :src="authCardImage"
-          @click="onShowAuthCard"
-          v-if="!showAuthCard"
-        />
+        <img class="auth-card" :src="authCardImage" @click="onShowAuthCard" v-if="!showAuthCard" />
         <img class="auth-logo" :src="brandLogoImage" />
       </div>
       <div class="device-info">
         <div class="logo">
           <div class="logo-swiper" v-if="clubLogo.length > 1">
-            <SimpleSwiper
-              :imageList="clubLogo"
-              :pagination="false"
-            ></SimpleSwiper>
+            <SimpleSwiper :imageList="clubLogo" :pagination="false"></SimpleSwiper>
           </div>
           <img :src="clubLogo[0]" alt="logo" v-else />
         </div>
@@ -58,26 +50,12 @@
       <div class="device-params">
         <div class="title">相关参数</div>
         <div class="line"></div>
-        <div class="params">
-          <div class="row" v-for="(row, index) in paramListRender" :key="index">
-            <template v-for="(col, index) in row">
-              <div class="col" :key="'name' + index">
-                {{ col.paramName }}{{ isPc ? '：' : '' }}
-              </div>
-              <div class="col" :key="'content' + index">
-                {{ col.paramContent }}
-              </div>
-            </template>
-          </div>
-        </div>
+        <SimpleParamList :paramList="paramListRender" />
       </div>
     </div>
     <!-- 授权牌弹窗 -->
     <div class="mask" v-if="showAuthCard" @click="onHideAuthCard"></div>
-    <transition
-      enter-active-class="animate__zoomIn"
-      leave-active-class="animate__zoomOut"
-    >
+    <transition enter-active-class="animate__zoomIn" leave-active-class="animate__zoomOut">
       <div class="auth-card-content animate__animated" v-if="showAuthCard">
         <div class="auth-card-popup">
           <span class="el-icon-circle-close" @click="onHideAuthCard"></span>
@@ -192,8 +170,7 @@ export default {
           position: absolute;
           width: 70px;
           height: 70px;
-          background: url(~assets/theme-images/normal/pc/icon-auth-seal.png)
-            no-repeat center;
+          background: url(~assets/theme-images/normal/pc/icon-auth-seal.png) no-repeat center;
           background-size: 70px;
           right: 24px;
           bottom: 24px;
@@ -264,8 +241,7 @@ export default {
             display: block;
             width: 24px;
             height: 24px;
-            background: url(~assets/theme-images/normal/pc/icon-auth-ren.png)
-              no-repeat center;
+            background: url(~assets/theme-images/normal/pc/icon-auth-ren.png) no-repeat center;
             background-size: 23px;
           }
 
@@ -338,8 +314,7 @@ export default {
 
           .auth-icon {
             height: 28px;
-            background: url(~assets/theme-images/normal/pc/icon-auth2.png)
-              no-repeat left center;
+            background: url(~assets/theme-images/normal/pc/icon-auth2.png) no-repeat left center;
             background-size: auto 28px;
             margin-bottom: 10px;
           }
@@ -380,33 +355,6 @@ export default {
             bottom: 0;
           }
         }
-        .params {
-          width: 100%;
-          .row {
-            display: table-row;
-            width: 100%;
-          }
-
-          .col {
-            display: table-cell;
-            font-size: 16px;
-            padding: 12px 0;
-
-            &:nth-child(2n-1) {
-              color: #999999;
-              white-space: nowrap;
-            }
-
-            &:nth-child(2n) {
-              color: #282828;
-              padding-left: 12px;
-            }
-
-            &:nth-child(3) {
-              padding-left: 100px;
-            }
-          }
-        }
       }
     }
   }
@@ -478,8 +426,7 @@ export default {
           position: absolute;
           width: 13.8vw;
           height: 13.8vw;
-          background: url(~assets/theme-images/normal/h5/icon-auth-seal.png)
-            no-repeat center;
+          background: url(~assets/theme-images/normal/h5/icon-auth-seal.png) no-repeat center;
           background-size: 13.8vw;
           right: 4vw;
           bottom: 4vw;
@@ -548,8 +495,7 @@ export default {
             display: block;
             width: 3.6vw;
             height: 3.6vw;
-            background: url(~assets/theme-images/normal/h5/icon-auth-ren.png)
-              no-repeat center;
+            background: url(~assets/theme-images/normal/h5/icon-auth-ren.png) no-repeat center;
             background-size: 3.6vw;
           }
 
@@ -625,8 +571,7 @@ export default {
 
           .auth-icon {
             height: 4.9vw;
-            background: url(~assets/theme-images/normal/h5/icon-auth2.png)
-              no-repeat left center;
+            background: url(~assets/theme-images/normal/h5/icon-auth2.png) no-repeat left center;
             background-size: auto 4.9vw;
             margin-bottom: 1vw;
           }
@@ -659,46 +604,6 @@ export default {
           margin-top: 4.7vw;
           margin-bottom: 1.2vw;
         }
-        .params {
-          width: 100%;
-          word-break: break-all;
-          text-align: justify;
-          .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: 1.6vw 0;
-
-            &:nth-child(2n-1) {
-              color: #282828;
-              padding-right: 3.2vw;
-              font-weight: bold;
-              white-space: nowrap;
-              border-right: 0.2vw solid #d8d8d8;
-            }
-
-            &:nth-child(2n) {
-              color: #4e4e4e;
-              padding-left: 3.2vw;
-            }
-          }
-        }
       }
     }
   }

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

@@ -5,21 +5,13 @@
       <div class="swiper-body">
         <img :src="productInfo.pcImage" class="device-image" />
         <div class="auth-seal"></div>
-        <img
-          class="auth-card"
-          :src="authCardImage"
-          @click="onShowAuthCard"
-          v-if="!showAuthCard"
-        />
+        <img class="auth-card" :src="authCardImage" @click="onShowAuthCard" v-if="!showAuthCard" />
         <img class="auth-logo" :src="brandLogoImage" />
       </div>
       <div class="device-info">
         <div class="logo">
           <div class="logo-swiper" v-if="clubLogo.length > 1">
-            <SimpleSwiper
-              :imageList="clubLogo"
-              :pagination="false"
-            ></SimpleSwiper>
+            <SimpleSwiper :imageList="clubLogo" :pagination="false"></SimpleSwiper>
           </div>
           <img :src="clubLogo[0]" alt="logo" v-else />
         </div>
@@ -58,26 +50,12 @@
       <div class="device-params">
         <div class="title">相关参数</div>
         <div class="line"></div>
-        <div class="params">
-          <div class="row" v-for="(row, index) in paramListRender" :key="index">
-            <template v-for="(col, index) in row">
-              <div class="col" :key="'name' + index">
-                {{ col.paramName }}{{ isPc ? '：' : '' }}
-              </div>
-              <div class="col" :key="'content' + index">
-                {{ col.paramContent }}
-              </div>
-            </template>
-          </div>
-        </div>
+        <SimpleParamList :paramList="paramListRender" />
       </div>
     </div>
     <!-- 授权牌弹窗 -->
     <div class="mask" v-if="showAuthCard" @click="onHideAuthCard"></div>
-    <transition
-      enter-active-class="animate__zoomIn"
-      leave-active-class="animate__zoomOut"
-    >
+    <transition enter-active-class="animate__zoomIn" leave-active-class="animate__zoomOut">
       <div class="auth-card-content animate__animated" v-if="showAuthCard">
         <div class="auth-card-popup">
           <span class="el-icon-circle-close" @click="onHideAuthCard"></span>
@@ -192,8 +170,7 @@ export default {
           position: absolute;
           width: 70px;
           height: 70px;
-          background: url(~assets/theme-images/hyt/pc/icon-auth-seal.png)
-            no-repeat center;
+          background: url(~assets/theme-images/hyt/pc/icon-auth-seal.png) no-repeat center;
           background-size: 70px;
           right: 24px;
           bottom: 24px;
@@ -264,8 +241,7 @@ export default {
             display: block;
             width: 24px;
             height: 24px;
-            background: url(~assets/theme-images/hyt/pc/icon-auth-ren.png)
-              no-repeat center;
+            background: url(~assets/theme-images/hyt/pc/icon-auth-ren.png) no-repeat center;
             background-size: 23px;
           }
 
@@ -349,8 +325,7 @@ export default {
 
           .auth-icon {
             height: 28px;
-            background: url(~assets/theme-images/hyt/pc/icon-auth2.png)
-              no-repeat left center;
+            background: url(~assets/theme-images/hyt/pc/icon-auth2.png) no-repeat left center;
             background-size: auto 28px;
             margin-bottom: 10px;
           }
@@ -391,33 +366,6 @@ export default {
             bottom: 0;
           }
         }
-        .params {
-          width: 100%;
-          .row {
-            display: table-row;
-            width: 100%;
-          }
-
-          .col {
-            display: table-cell;
-            font-size: 16px;
-            padding: 12px 0;
-
-            &:nth-child(2n-1) {
-              color: #999999;
-              white-space: nowrap;
-            }
-
-            &:nth-child(2n) {
-              color: #282828;
-              padding-left: 12px;
-            }
-
-            &:nth-child(3) {
-              padding-left: 100px;
-            }
-          }
-        }
       }
     }
   }
@@ -489,8 +437,7 @@ export default {
           position: absolute;
           width: 13.8vw;
           height: 13.8vw;
-          background: url(~assets/theme-images/hyt/h5/icon-auth-seal.png)
-            no-repeat center;
+          background: url(~assets/theme-images/hyt/h5/icon-auth-seal.png) no-repeat center;
           background-size: 13.8vw;
           right: 4vw;
           bottom: 4vw;
@@ -559,8 +506,7 @@ export default {
             display: block;
             width: 3.6vw;
             height: 3.6vw;
-            background: url(~assets/theme-images/hyt/h5/icon-auth-ren.png)
-              no-repeat center;
+            background: url(~assets/theme-images/hyt/h5/icon-auth-ren.png) no-repeat center;
             background-size: 3.6vw;
           }
 
@@ -646,8 +592,7 @@ export default {
 
           .auth-icon {
             height: 4.9vw;
-            background: url(~assets/theme-images/hyt/h5/icon-auth2.png)
-              no-repeat left center;
+            background: url(~assets/theme-images/hyt/h5/icon-auth2.png) no-repeat left center;
             background-size: auto 4.9vw;
             margin-bottom: 1vw;
           }
@@ -674,52 +619,10 @@ export default {
           font-weight: bold;
         }
         .line {
-          // height: 0.2vw;
-          // background: #ececec;
           position: relative;
           margin-top: 4.7vw;
           margin-bottom: 1.2vw;
         }
-        .params {
-          width: 100%;
-          word-break: break-all;
-          text-align: justify;
-          .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: 1.6vw 0;
-
-            &:nth-child(2n-1) {
-              color: #282828;
-              padding-right: 3.2vw;
-              font-weight: bold;
-              white-space: nowrap;
-              border-right: 0.2vw solid #d8d8d8;
-            }
-
-            &:nth-child(2n) {
-              color: #4e4e4e;
-              padding-left: 3.2vw;
-            }
-          }
-        }
       }
     }
   }

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

@@ -5,21 +5,13 @@
       <div class="swiper-body">
         <img :src="productInfo.pcImage" class="device-image" />
         <div class="auth-seal"></div>
-        <img
-          class="auth-card"
-          :src="authCardImage"
-          @click="onShowAuthCard"
-          v-if="!showAuthCard"
-        />
+        <img class="auth-card" :src="authCardImage" @click="onShowAuthCard" v-if="!showAuthCard" />
         <img class="auth-logo" :src="brandLogoImage" />
       </div>
       <div class="device-info">
         <div class="logo">
           <div class="logo-swiper" v-if="clubLogo.length > 1">
-            <SimpleSwiper
-              :imageList="clubLogo"
-              :pagination="false"
-            ></SimpleSwiper>
+            <SimpleSwiper :imageList="clubLogo" :pagination="false"></SimpleSwiper>
           </div>
           <img :src="clubLogo[0]" alt="logo" v-else />
         </div>
@@ -58,26 +50,12 @@
       <div class="device-params">
         <div class="title">相关参数</div>
         <div class="line"></div>
-        <div class="params">
-          <div class="row" v-for="(row, index) in paramListRender" :key="index">
-            <template v-for="(col, index) in row">
-              <div class="col" :key="'name' + index">
-                {{ col.paramName }}{{ isPc ? '：' : '' }}
-              </div>
-              <div class="col" :key="'content' + index">
-                {{ col.paramContent }}
-              </div>
-            </template>
-          </div>
-        </div>
+        <SimpleParamList :paramList="paramListRender" />
       </div>
     </div>
     <!-- 授权牌弹窗 -->
     <div class="mask" v-if="showAuthCard" @click="onHideAuthCard"></div>
-    <transition
-      enter-active-class="animate__zoomIn"
-      leave-active-class="animate__zoomOut"
-    >
+    <transition enter-active-class="animate__zoomIn" leave-active-class="animate__zoomOut">
       <div class="auth-card-content animate__animated" v-if="showAuthCard">
         <div class="auth-card-popup">
           <span class="el-icon-circle-close" @click="onHideAuthCard"></span>
@@ -188,8 +166,7 @@ export default {
           position: absolute;
           width: 70px;
           height: 70px;
-          background: url(~assets/theme-images/ross/pc-icon-auth-seal.png)
-            no-repeat center;
+          background: url(~assets/theme-images/ross/pc-icon-auth-seal.png) no-repeat center;
           background-size: 70px;
           right: 24px;
           bottom: 24px;
@@ -260,8 +237,7 @@ export default {
             display: block;
             width: 24px;
             height: 24px;
-            background: url(~assets/theme-images/ross/pc-icon-auth-ren.png)
-              no-repeat center;
+            background: url(~assets/theme-images/ross/pc-icon-auth-ren.png) no-repeat center;
             background-size: 23px;
           }
 
@@ -334,8 +310,7 @@ export default {
 
           .auth-icon {
             height: 28px;
-            background: url(~assets/theme-images/ross/pc-icon-auth2.png)
-              no-repeat left center;
+            background: url(~assets/theme-images/ross/pc-icon-auth2.png) no-repeat left center;
             background-size: auto 28px;
             margin-bottom: 10px;
           }
@@ -376,33 +351,6 @@ export default {
             bottom: 0;
           }
         }
-        .params {
-          width: 100%;
-          .row {
-            display: table-row;
-            width: 100%;
-          }
-
-          .col {
-            display: table-cell;
-            font-size: 16px;
-            padding: 12px 0;
-
-            &:nth-child(2n-1) {
-              color: #999999;
-              white-space: nowrap;
-            }
-
-            &:nth-child(2n) {
-              color: #282828;
-              padding-left: 12px;
-            }
-
-            &:nth-child(3) {
-              padding-left: 100px;
-            }
-          }
-        }
       }
     }
   }
@@ -474,8 +422,7 @@ export default {
           position: absolute;
           width: 13.8vw;
           height: 13.8vw;
-          background: url(~assets/theme-images/ross/h5-icon-auth-seal.png)
-            no-repeat center;
+          background: url(~assets/theme-images/ross/h5-icon-auth-seal.png) no-repeat center;
           background-size: 13.8vw;
           right: 4vw;
           bottom: 4vw;
@@ -544,8 +491,7 @@ export default {
             display: block;
             width: 3.6vw;
             height: 3.6vw;
-            background: url(~assets/theme-images/ross/h5-icon-auth-ren.png)
-              no-repeat center;
+            background: url(~assets/theme-images/ross/h5-icon-auth-ren.png) no-repeat center;
             background-size: 3.6vw;
           }
 
@@ -621,8 +567,7 @@ export default {
 
           .auth-icon {
             height: 4.9vw;
-            background: url(~assets/theme-images/ross/h5-icon-auth2.png)
-              no-repeat left center;
+            background: url(~assets/theme-images/ross/h5-icon-auth2.png) no-repeat left center;
             background-size: auto 4.9vw;
             margin-bottom: 1vw;
           }
@@ -655,46 +600,6 @@ export default {
           margin-top: 4.7vw;
           margin-bottom: 1.2vw;
         }
-        .params {
-          width: 100%;
-          word-break: break-all;
-          text-align: justify;
-          .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: 1.6vw 0;
-
-            &:nth-child(2n-1) {
-              color: #282828;
-              padding-right: 3.2vw;
-              font-weight: bold;
-              white-space: nowrap;
-              border-right: 0.2vw solid #d8d8d8;
-            }
-
-            &:nth-child(2n) {
-              color: #4e4e4e;
-              padding-left: 3.2vw;
-            }
-          }
-        }
       }
     }
   }