Web1020/12_vuecli/mediaapp/src/components/ProductItem.vue

<template>
    <div class="product-item">
        <div class="img-content" :style="{ backgroundImage: `url(https://images.weserv.nl/?url=${val.image})` }"></div>
        <div class="product-title">
            {{val.title}}
        </div>
        <div class="product-info">
            {{val.desc}}                  
        </div>
        <div class="product-tag">
            <van-tag style="margin-right:.1rem" type="danger" v-for="item in val.tags" :key="item">{{item}}</van-tag>
        </div>
        <div class="product-price">
            <span class="new-price">¥{{val.promote_price}}</span>
            <span class="old-price">¥{{val.price}}</span>
        </div>
    </div>
</template>
<script>
export default {
    props:["val"]
}
</script>
<style scoped>
    .product-item{
        margin:.1rem 0;
    }
    .img-content{
        width: 100%;
        padding-top: 100%;
        /* background-image: url("https://img01.yzcdn.cn/vant/cat.jpeg"); */
        background-size: cover;
        margin-bottom: .1rem;
    }
    .product-title{
        font-size: .3rem;
        font-weight: 700;
        color: #111;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-bottom: .1rem;
    }
    .product-info{
        font-size: .25rem;
        color: #999;
        margin-bottom: .1rem;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .product-tag{
        line-height: 0;
        margin-bottom: .1rem;
    }
    .product-price{
        font-size: 0;
    }
    .product-price .new-price{
        font-size: .3rem;
        color:#dd1944;
        font-weight: 700;
    }
    .product-price .old-price{
        font-size: .22rem;
        color: #999;
        text-decoration: line-through;
    }
</style>