resource-new-product-list.vue
4 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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<template>
<resource class="no-padding-right" v-if="showFloor">
<ul class="resource-blk-new-products" v-if="value.data.showType == 1">
<li class="product-item" v-for="(item, pi) in value.data.list" :key="pi">
<product-link :value="item" class="link" :yas="value" :yas-f="index" :yas-i="pi"></product-link>
<img-format :lazy="lazy" :src="item.default_images" :w="188" :h="250"></img-format>
<div class="ellipsis">
<p class="title" v-if="item.brand_name">{{item.brand_name}}</p>
<p class="title" v-if="item.product_name">{{item.product_name}}</p>
<p class="price" v-if="item.sales_price">￥{{item.sales_price}}</p>
</div>
</li>
</ul>
<ul class="resource-blk-new-products" v-if="value.data.showType == 2">
<div class="one">
<li class="product-item" v-for="(item, pi) in value.data.list" :key="pi" v-if="pi % 2 == 0">
<product-link :value="item" class="link" :yas="value" :yas-f="index" :yas-i="pi"></product-link>
<img-format :lazy="lazy" :src="item.default_images" :w="188" :h="250"></img-format>
<div class="ellipsis">
<p class="title" v-if="item.brand_name">{{item.brand_name}}</p>
<p class="title" v-if="item.product_name">{{item.product_name}}</p>
<p class="price" v-if="item.sales_price">￥{{item.sales_price}}</p>
</div>
</li>
</div>
<div class="two">
<li class="product-item" v-for="(item, pi) in value.data.list" :key="pi" v-if="pi % 2 == 1">
<product-link :value="item" class="link" :yas="value" :yas-f="index" :yas-i="pi"></product-link>
<img-format :lazy="lazy" :src="item.default_images" :w="188" :h="250"></img-format>
<div class="ellipsis">
<p class="title" v-if="item.brand_name">{{item.brand_name}}</p>
<p class="title" v-if="item.product_name">{{item.product_name}}</p>
<p class="price" v-if="item.sales_price">￥{{item.sales_price}}</p>
</div>
</li>
</div>
</ul>
</resource>
</template>
<script>
import Resource from './resource';
export default {
name: 'ResourceBlkNewProductList',
props: {
value: Object,
lazy: Boolean,
index: Number
},
computed: {
showFloor() {
return this.value.data.showType === 1 && this.value.data.list && this.value.data.list.length > 3 ||
this.value.data.showType === 2 && this.value.data.list && this.value.data.list.length > 7;
}
},
components: {Resource}
};
</script>
<style lang="scss">
.resource-blk-new-products {
width: 100%;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
overflow-y: hidden;
li.product-item {
position: relative;
display: inline-block;
padding-right: 20px;
text-align: center;
line-height: 40px;
width: 208px;
.link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
img {
width: 188px;
height: 250px;
}
.ellipsis > p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 24px;
max-width: 188px;
line-height: 1;
margin-top: 24px;
font-family: HelveticaNeue , Tahoma, Arial, HiraginoSansGB-W3, "PingFang SC", "Heiti SC";
&.price {
font-size: 28px;
}
}
}
}
</style>