1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- <template>
- <view class="goods-item">
- <view class="goods-imgs">
- <view v-if="data.status == 1" class="goods-staus">已售罄</view>
- <u-lazy-load img-mode="scaleToFill" :height="imgHeight" :image="data.src" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
- </view>
- <view class="name">{{data.name}}</view>
- <view class="price">
- <view><text>{{data.price}}</text>乐豆</view>
- <view><u-image width="48rpx" height="48rpx" src="/static/add-cart.png"></u-image></view>
- </view>
- </view>
- </template>
- <script>
- export default {
- props: {
- imgHeight: {
- type: Number,
- default: 250
- },
- data:{
- type: Object,
- default: function(){
- return {}
- }
- }
- },
- data() {
- return {
- loadingImg: '/static/loading.gif',
- errorImg: '/static/imgError.png'
- }
- }
- }
- </script>
- <style lang="scss">
- .goods-item{
- background: #FFFFFF;
- box-shadow: 1px 1px 3px #eee;
- width: 48%;
- margin-bottom: 35upx;
- border-radius: 10upx;
- .goods-imgs{
- position: relative;
- .goods-staus{
- width: 120rpx;
- height: 120rpx;
- position: absolute;
- z-index: 10000;
- border-radius: 100%;
- background: rgba($color: #000000, $alpha: 0.5);
- text-align: center;
- line-height: 120rpx;
- left: 50%;
- top: 50%;
- margin-top: -60rpx;
- margin-left: -60rpx;
- color: #eee;
- }
- }
- .name{
- padding: 10upx 20upx 0;
- }
- .price{
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 15upx 20upx;
- text{
- color: red;
- font-size: 36upx;
- margin-right: 6upx;
- }
- >view{
- &:first-child{
- font-size: 22upx;
- }
- }
- }
- }
- </style>
|