recommend-product-item.vue
1.46 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<template>
<div class="product-item">
<div class="product-images-wrapper">
<img class="image" :src="imgUrl"/>
<div class="price">{{price}}</div>
</div>
<div class="title line-clamp-2">{{title}}</div>
</div>
</template>
<script>
export default {
name: 'RecommendProductItem',
props: {
price: {
type: String,
default() {
return '￥1111.0';
},
},
imgUrl: {
type: String,
default() {
return '//img12.static.yhbimg.com/goodsimg/2019/01/29/15/022a23864f68c66a6e1ef398ce7bd82efc.jpg?imageView2/2/w/640/h/640/q/60';
}
},
title: {
type: String,
default() {
return 'viishow 套头圆领撞拼条纹针织衫';
}
}
},
methods: {
}
};
</script>
<style lang="scss" scoped>
.product-item {
display: inline-block;
width: 170px;
.product-images-wrapper {
position: relative;
width: 170px;
height: 226px;
margin-bottom: 12px;
.image {
width: 170px;
height: 226px;
}
.price {
width: 100px;
height: 40px;
line-height: 40px;
position: absolute;
bottom: 10px;
margin-left: 82px;
color: white;
font-size: 20px;
background-image: linear-gradient(90deg, #474747 0%, #222 100%);
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
}
}
.title {
width: 100%;
font-size: 20px;
color: #444;
word-break: break-all;
white-space: normal;
}
}
</style>