Showing
2 changed files
with
72 additions
and
63 deletions
@@ -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> |
-
Please register or login to post a comment