caimei-applets-mcare/pages/goods/components/procurement_good.vue

<template>
    <view class="pro-good">
        <view class="img">
            <image src="" mode="aspectFill" style="width: 100%;height: 100%;"></image>
        </view>
        <view class="pro-content">
            <view class="pro-title">
                法国曼丽菲戈动能素抗
                衰DERMABOOSTER
            </view>
            <view class="pro-price">
                ￥19800.00
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            storeInfo: {
                type: Object,
                default: () => {}
            }
        },
        data() {
            return {
                
            }
        },
        methods: {}
    }
</script>

<style scoped lang="scss">
    .pro-good {
        width: 339rpx;
        height: 518rpx;
        border-radius: 8rpx;
        background-color: #fff;
        overflow: hidden;
        margin-bottom: 24rpx;
    }
    .img {
        width: 339rpx;
        height: 339rpx;
        border: 1px dotted;
        box-sizing: border-box;
    }
    .pro-content {
        padding: 14rpx 24rpx 20rpx 24rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        height: 179rpx;
        box-sizing: border-box;
        background-color: #fff;
    }
    .pro-title {
        color: #333333;
        font-size: 28rpx;
        width: 100%;
    }
    .pro-price {
        width: 100%;
        color: #F85050;
        font-size: 28rpx;
    }
</style>