yihuo/pages/vip/cell.vue

<template>
    <view class="relative" @click="showDetail">
        <image :src="resource.bgGoods" class="bg" />
        <view class="mall-cell marginB10">
            <image :src="data.cover" class="image" />
            <view class="paddingX8 paddingT8 font1 pre-wrap bold relative">
                <view class="">{{ data.name }}</view>
            </view>
            <view class="flex-center-start paddingX8 paddingT5 paddingB7 width100">
                <view v-if="data.sellType == 2" class="color-red font3 bold marginR2">定金</view>
                <view class="color-red font1">¥</view>
                <view v-if="data.sellType == 2" class="color-red font6 bold paddingL1 flex1">
                    {{ data.deposit }}
                </view>
                <view v-else class="color-red font6 bold paddingL1 flex1">
                    {{ data.price }}
                </view>
                <image v-if="data.sellType == 2" class="presell" :src="resource.presale"></image>
                <image v-if="data.sellType == 1" class="presell" :src="resource.spots"></image>
            </view>
        </view>
    </view>
</template>
<script>
import resource from '@/utils/resource'
export default {
    props: {
        data: Object
    },
    data() {
        return {
            resource
        }
    },
    computed: {},
    methods: {
        showDetail() {
            this.$router.push('product', {
                id: this.data.id
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.mall-cell {
    position: relative;
    color: #fff;
    // overflow: hidden;
    border-radius: 26rpx;
    background: #000;
    display: inline-block;
    width: 326rpx;
    border: 2px solid #0b6e8f;
    margin-left: 20rpx;
    .image {
        height: 0;
        width: 326rpx;
        height: 326rpx;
    }
    .presell {
        width: 164rpx;
        height: 69rpx;
    }
}
.bg {
    position: absolute;
    z-index: 1;
    top: -22rpx;
    width: 396rpx;
    height: 516rpx;
}
</style>