Authored by 陈轩

line-clamp

@@ -76,3 +76,10 @@ ul { @@ -76,3 +76,10 @@ ul {
76 .mr50 { 76 .mr50 {
77 margin-right: 50px; 77 margin-right: 50px;
78 } 78 }
  79 +
  80 +.line-clamp-2 {
  81 + display: -webkit-box;
  82 + -webkit-line-clamp: 2;
  83 + -webkit-box-orient: vertical;
  84 + overflow: hidden;
  85 +}
@@ -9,7 +9,7 @@ @@ -9,7 +9,7 @@
9 </div> 9 </div>
10 <div class="card-bd"> 10 <div class="card-bd">
11 <h2 class="card-label"> 11 <h2 class="card-label">
12 - <a href="">{{item.productName}}</a> 12 + <a href="/product/{{item.productId}}" class="line-clamp-2">{{item.productName}}</a>
13 </h2> 13 </h2>
14 <span class="good-price" :class="{'old-price': item.marketPrice}" v-if="item.marketPrice">¥ {{item.marketPrice}}</span> 14 <span class="good-price" :class="{'old-price': item.marketPrice}" v-if="item.marketPrice">¥ {{item.marketPrice}}</span>
15 <span class="good-price" :class="{'sale-price': item.marketPrice}">¥ {{item.salesPrice}}</span> 15 <span class="good-price" :class="{'sale-price': item.marketPrice}">¥ {{item.salesPrice}}</span>
@@ -21,77 +21,79 @@ @@ -21,77 +21,79 @@
21 </div> 21 </div>
22 </template> 22 </template>
23 <script> 23 <script>
24 -let bus = require('common/vue-bus'); 24 + let bus = require('common/vue-bus');
25 25
26 -module.exports = {  
27 - props: {  
28 - /* 开启滚动加载 */  
29 - disableFetch: Boolean, 26 + module.exports = {
  27 + props: {
  28 + /* 开启滚动加载 */
  29 + disableFetch: Boolean,
30 30
31 - // 数据  
32 - data: Array  
33 - },  
34 - methods: {  
35 - fetch: function() {  
36 - bus.$emit('list.paging'); 31 + // 数据
  32 + data: Array
  33 + },
  34 + methods: {
  35 + fetch: function() {
  36 + bus.$emit('list.paging');
  37 + }
37 } 38 }
38 - }  
39 -}; 39 + };
  40 +
40 </script> 41 </script>
41 <style> 42 <style>
42 -@import "../../scss/common/color";  
43 -  
44 -.cardlist {  
45 - list-style: none;  
46 - margin: 0;  
47 - padding: 0;  
48 -}  
49 -  
50 -.card-large {  
51 - .card {  
52 - float: left;  
53 - width: 372px;  
54 - margin-right: 6px;  
55 - &:nth-child(2n) {  
56 - margin-right: 0;  
57 - } 43 + @import "../../scss/common/color";
  44 +
  45 + .cardlist {
  46 + list-style: none;
  47 + margin: 0;
  48 + padding: 0;
58 } 49 }
59 - .card-pic {  
60 - width: 100%;  
61 - height: 499px;  
62 - a,  
63 - img {  
64 - display: block; 50 +
  51 + .card-large {
  52 + .card {
  53 + float: left;
  54 + width: 372px;
  55 + margin-right: 6px;
  56 + &:nth-child(2n) {
  57 + margin-right: 0;
  58 + }
  59 + }
  60 + .card-pic {
65 width: 100%; 61 width: 100%;
66 - height: 100%; 62 + height: 499px;
  63 + a,
  64 + img {
  65 + display: block;
  66 + width: 100%;
  67 + height: 100%;
  68 + }
  69 + }
  70 + .card-bd {
  71 + min-height: 180px;
  72 + margin-left: 30px;
  73 + margin-right: 30px;
  74 + padding-top: 25px;
  75 + text-align: center;
  76 + font-size: 24px;
  77 + }
  78 + .card-label {
  79 + margin: 0 0 10px;
  80 + font-size: inherit;
  81 + font-weight: normal;
67 } 82 }
68 } 83 }
69 - .card-bd {  
70 - min-height: 180px;  
71 - margin-left: 30px;  
72 - margin-right: 30px;  
73 - padding-top: 25px;  
74 - text-align: center;  
75 - font-size: 24px;  
76 - }  
77 - .card-label {  
78 - margin: 0 0 10px;  
79 - font-size: inherit;  
80 - font-weight: normal; 84 +
  85 + .good-price {
  86 + color: #b0b0b0;
  87 + margin-right: 10px;
  88 + &:last-of-type {
  89 + margin-right: 0;
  90 + }
  91 + &.old-price {
  92 + text-decoration: line-through;
  93 + }
  94 + &.sale-price {
  95 + color: $red;
  96 + }
81 } 97 }
82 -}  
83 98
84 -.good-price {  
85 - color: #b0b0b0;  
86 - margin-right: 10px;  
87 - &:last-of-type {  
88 - margin-right: 0;  
89 - }  
90 - &.old-price {  
91 - text-decoration: line-through;  
92 - }  
93 - &.sale-price {  
94 - color: $red;  
95 - }  
96 -}  
97 </style> 99 </style>