yihuo/components/goods-cell.vue

<template>
    <view class="cell flex-align-center" :style="{ width: size.width + 'px' }">
        <view class="content" :style="{ width: size.width - 10 + 'px' }" @click="showDetail">
            <view class="imgBox">
                <image :src="data.cover" mode="aspectFit" class="image" />
            </view>

            <view class="marginX9 marginY7">
                <view class="font2 line-ellipsis">{{ data.name }}</view>
                <view class="marginT6 flex-align" style="color: red">
                    <text class="font0">¥</text>
                    <text class="font4 bold">{{ data.price }}</text>
                    <view v-if="data.sellType == 2" class="presell">预售</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        props: {
            data: Object
        },
        data() {
            return {
            }
        },
        computed: {
            size() {
                let width = this.$store.state.systemInfo.screenWidth
                width = (width - 14) / 2
                let imgHeight = ((width - 10) * 150) / 170
                return { width, imgHeight }
            }
        },
        methods: {
            showDetail() {
                this.$emit('click', this.data)
            }
        }
    }
</script>
<style lang="scss" scoped>
    .cell {
        margin-bottom: 24rpx;
        .content {
            overflow: hidden;
            position: relative;
            .bg {
                position: absolute;
                z-index: -1;
                left: 0;
                right: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }
            .imgBox {
                width: 340rpx;
                height: 400rpx;
                border-radius: 14rpx;
                background-image: radial-gradient(#ffffff 45%,#fff9e7);
                overflow: hidden;
            }
            .image {
                width: 100%;
                height: 100%;
            }

            .presell {
                width: 128rpx;
                height: 44rpx;
                line-height: 44rpx;
                border-radius: 22rpx;
                font-size: 24rpx;
                margin-left: 16rpx;
                text-align: center;
            }
        }
    }
</style>