line-clamp

@@ -76,3 +76,10 @@ ul {
 .mr50 {
     margin-right: 50px;
 }
+
+.line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}

@@ -9,7 +9,7 @@
                 </div>
                 <div class="card-bd">
                     <h2 class="card-label">
-                        <a href="">{{item.productName}}</a>
+                        <a href="/product/{{item.productId}}" class="line-clamp-2">{{item.productName}}</a>
                     </h2>
                     <span class="good-price" :class="{'old-price': item.marketPrice}" v-if="item.marketPrice">¥ {{item.marketPrice}}</span>
                     <span class="good-price" :class="{'sale-price': item.marketPrice}">¥ {{item.salesPrice}}</span>
@@ -21,9 +21,9 @@
     </div>
 </template>
 <script>
-let bus = require('common/vue-bus');
+    let bus = require('common/vue-bus');
 
-module.exports = {
+    module.exports = {
         props: {
             /* 开启滚动加载 */
             disableFetch: Boolean,
@@ -36,18 +36,19 @@ module.exports = {
                 bus.$emit('list.paging');
             }
         }
-};
+    };
+
 </script>
 <style>
-@import "../../scss/common/color";
+    @import "../../scss/common/color";
     
-.cardlist {
+    .cardlist {
         list-style: none;
         margin: 0;
         padding: 0;
-}
+    }
     
-.card-large {
+    .card-large {
         .card {
             float: left;
             width: 372px;
@@ -79,9 +80,9 @@ module.exports = {
             font-size: inherit;
             font-weight: normal;
         }
-}
+    }
     
-.good-price {
+    .good-price {
         color: #b0b0b0;
         margin-right: 10px;
         &:last-of-type {
@@ -93,5 +94,6 @@ module.exports = {
         &.sale-price {
             color: $red;
         }
-}
+    }
+
 </style>