规格书下载

components/mobile/brand/BrandDetail.vue

@@ -50,7 +50,7 @@
       <ul class="product-list">
         <li v-for="product in productList.content">
           <nuxt-link class="text-left" :to="'/mobile/brand/componentDetail/' + product.uuid">{{product.code}}</nuxt-link>
-          <a class="text-right">规格书 <img src="/images/mobile/@2x/productDetail/view@2x.png" alt=""></a>
+          <a class="text-right" @click="toShowPdf(product.attach)">规格书 <i class="icon-chakan iconfont"></i></a>
         </li>
       </ul>
     </div>
@@ -200,6 +200,11 @@
         if (!this.isInList) {
           this.showKindList = false
         }
+      },
+      toShowPdf: function (url) {
+        if (url !== '1') {
+          window.location.href = url
+        }
       }
     }
   }
@@ -216,7 +221,7 @@
       display: inline-block;
       border: .01rem solid #e75610;
       margin: .38rem auto;
-      line-height: 2.21rem;
+      line-height: 2.13rem;
       img {
         max-height: 2.13rem;
       }
@@ -355,11 +360,12 @@
           .text-right {
             float: right;
             color: #333;
-            img {
-              margin-left: .54rem;
-              width: .39rem;
-              height: .26rem;
+            i {
+              font-size: .55rem;
+              float: right;
               margin-right: .27rem;
+              margin-left: .54rem;
+              color: #6fcafe;
             }
           }
         }

components/mobile/brand/ComponentDetail.vue

@@ -9,9 +9,9 @@
         <span>品牌：</span>
         <span>{{component.brand.nameCn}}</span>
       </div>
-      <div class="base-detail-item">
+      <div class="base-detail-item attach" @click="goAttach(component.attach)">
         <span>规格书：</span>
-        <img src="/images/mobile/@2x/productDetail/view@2x.png" alt="">
+        <i class="icon-chakan iconfont"></i>
       </div>
       <div class="base-detail-item" v-if="component.description">
         <span class="description">产品描述：{{component.description}}</span>
@@ -159,6 +159,13 @@
         }
         return num
       }
+    },
+    methods: {
+      goAttach: function (url) {
+        if (url !== '1') {
+          window.location.href = url
+        }
+      }
     }
   }
 </script>
@@ -172,9 +179,15 @@
       padding-top: .34rem;
       .base-detail-item {
         margin-bottom: .3rem;
-        img {
-          width: .39rem;
-          height: .26rem;
+        position: relative;
+        &.attach {
+          display: inline-block;
+        }
+        i {
+          font-size: .55rem;
+          color: #6fcafe;
+          position: absolute;
+          top: -.13rem;
         }
         &:last-child {
           margin-bottom: 0;