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,77 +21,79 @@
     </div>
 </template>
 <script>
-let bus = require('common/vue-bus');
+    let bus = require('common/vue-bus');
 
-module.exports = {
-    props: {
-        /* 开启滚动加载 */
-        disableFetch: Boolean,
+    module.exports = {
+        props: {
+            /* 开启滚动加载 */
+            disableFetch: Boolean,
 
-        // 数据
-        data: Array
-    },
-    methods: {
-        fetch: function() {
-            bus.$emit('list.paging');
+            // 数据
+            data: Array
+        },
+        methods: {
+            fetch: function() {
+                bus.$emit('list.paging');
+            }
         }
-    }
-};
+    };
+
 </script>
 <style>
-@import "../../scss/common/color";
-
-.cardlist {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.card-large {
-    .card {
-        float: left;
-        width: 372px;
-        margin-right: 6px;
-        &:nth-child(2n) {
-            margin-right: 0;
-        }
+    @import "../../scss/common/color";
+    
+    .cardlist {
+        list-style: none;
+        margin: 0;
+        padding: 0;
     }
-    .card-pic {
-        width: 100%;
-        height: 499px;
-        a,
-        img {
-            display: block;
+    
+    .card-large {
+        .card {
+            float: left;
+            width: 372px;
+            margin-right: 6px;
+            &:nth-child(2n) {
+                margin-right: 0;
+            }
+        }
+        .card-pic {
             width: 100%;
-            height: 100%;
+            height: 499px;
+            a,
+            img {
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .card-bd {
+            min-height: 180px;
+            margin-left: 30px;
+            margin-right: 30px;
+            padding-top: 25px;
+            text-align: center;
+            font-size: 24px;
+        }
+        .card-label {
+            margin: 0 0 10px;
+            font-size: inherit;
+            font-weight: normal;
         }
     }
-    .card-bd {
-        min-height: 180px;
-        margin-left: 30px;
-        margin-right: 30px;
-        padding-top: 25px;
-        text-align: center;
-        font-size: 24px;
-    }
-    .card-label {
-        margin: 0 0 10px;
-        font-size: inherit;
-        font-weight: normal;
+    
+    .good-price {
+        color: #b0b0b0;
+        margin-right: 10px;
+        &:last-of-type {
+            margin-right: 0;
+        }
+        &.old-price {
+            text-decoration: line-through;
+        }
+        &.sale-price {
+            color: $red;
+        }
     }
-}
 
-.good-price {
-    color: #b0b0b0;
-    margin-right: 10px;
-    &:last-of-type {
-        margin-right: 0;
-    }
-    &.old-price {
-        text-decoration: line-through;
-    }
-    &.sale-price {
-        color: $red;
-    }
-}
 </style>