已售出商品添加蒙层 review by zhiming.hu
Showing
2 changed files
with
27 additions
and
1 deletions
@@ -2,7 +2,14 @@ | @@ -2,7 +2,14 @@ | ||
2 | <div class="bg" v-if="list.length"> | 2 | <div class="bg" v-if="list.length"> |
3 | <div class="second-list-item" v-for="(product,index) in list" @click="goDetail(product, index)" | 3 | <div class="second-list-item" v-for="(product,index) in list" @click="goDetail(product, index)" |
4 | :key="index" :class="(index) % 2 === 0 && 'magrin-right'"> | 4 | :key="index" :class="(index) % 2 === 0 && 'magrin-right'"> |
5 | - <ImgSize class="item-imge" :src="product.secondhand_image" :width="343" :height="343"/> | 5 | + |
6 | + <div v-if="product.status === 100" class="dim-background"> | ||
7 | + <ImgSize class="dim-imge" :src="product.secondhand_image" :width="343" :height="343"/> | ||
8 | + </div> | ||
9 | + <div v-else class="item-background"> | ||
10 | + <ImgSize class="item-imge" :src="product.secondhand_image" :width="343" :height="343"/> | ||
11 | + </div> | ||
12 | + | ||
6 | <div class="item-bottom"> | 13 | <div class="item-bottom"> |
7 | <div class="item-price"> | 14 | <div class="item-price"> |
8 | <span>{{product.skup_price && '¥'}}</span><span>{{product.skup_price || ' '}}</span> | 15 | <span>{{product.skup_price && '¥'}}</span><span>{{product.skup_price || ' '}}</span> |
@@ -126,6 +133,10 @@ export default { | @@ -126,6 +133,10 @@ export default { | ||
126 | margin-bottom: 16px; | 133 | margin-bottom: 16px; |
127 | } | 134 | } |
128 | 135 | ||
136 | + .item-background { | ||
137 | + background: transparent; | ||
138 | + } | ||
139 | + | ||
129 | .item-imge { | 140 | .item-imge { |
130 | width: 344px; | 141 | width: 344px; |
131 | height: 344px; | 142 | height: 344px; |
@@ -133,6 +144,21 @@ export default { | @@ -133,6 +144,21 @@ export default { | ||
133 | border-top-right-radius: 16px; | 144 | border-top-right-radius: 16px; |
134 | } | 145 | } |
135 | 146 | ||
147 | + .dim-background { | ||
148 | + background: url(~statics/image/list/Group@2x.png) no-repeat; | ||
149 | + background-size: 50% 50%; | ||
150 | + background-position: center; | ||
151 | + } | ||
152 | + | ||
153 | + .dim-imge { | ||
154 | + width: 344px; | ||
155 | + height: 344px; | ||
156 | + border-top-left-radius: 16px; | ||
157 | + border-top-right-radius: 16px; | ||
158 | + opacity:0.6; | ||
159 | + filter: alpha(opacity=60); | ||
160 | + } | ||
161 | + | ||
136 | .item-bottom { | 162 | .item-bottom { |
137 | padding: 20px 14px 30px 20px; | 163 | padding: 20px 14px 30px 20px; |
138 | display: flex; | 164 | display: flex; |
apps/statics/image/list/Group@2x.png
0 → 100644

11.6 KB
-
Please register or login to post a comment