ShopInfo代码:

<template>

        <div class="shop">

          <img :src="item.imgUrl" class="shop__img">

          <div class="shop__content">

            <div class="shop__content__title">{{item.name}}</div>

            <div class="shop__content__tags">

              <span  class="shop__content__tag">月售:{{item.sales}}</span>

              <span  class="shop__content__tag">起送:{{item.expressLimit}}</span>

              <span  class="shop__content__tag">基础运费:{{item.expressPrice}}</span>

              </div>

            <p class="shop__content__highlight">{{item.slogan}}</p>

          </div>

        </div>  

</template>

<script>

export default {

    name:'ShopInfo',

    props:['item']

}

</script>

<style lang="scss" scoped>

@import '../style/viriables.scss';

.shop{

    padding: .12rem 0;

    display: flex;

    padding-top: .12rem;

    &__img{

      width: .56rem;

      height: .56rem;

      margin-right: .16rem;

    }

     &__content{

      flex:1;

      border-bottom: 1px solid $content-bgColor;

      padding-bottom: .12rem;

      &__title{

        line-height: .22rem;

        font-size: .16rem;

        color:$content-fontcolor;

      }

      &__tags{

        line-height: .18rem;

        font-size: .13rem;

        color:$content-fontcolor;

        margin-top: .08rem;

      }

      &__tag{

        margin-right: .16rem;

      }

      &__highlight{

        color: #E93B3B;

        line-height: .18rem;

        font-size: .13rem;

        margin: .08rem 0 0 0;

      }

  }

    }

</style>

Shop.vue代码:

<template>

   <ShopInfo :item="item" />

</template>

<script>

import ShopInfo from '../../components/ShopInfo'

export default {

    name:'Shop',

    components:{ ShopInfo },

    setup() {

        const item = {

            _id:'1',

            name:'沃尔玛',

            imgUrl:'http://www.dell-lee.com/imgs/vue3/near.png',

            sales:10000,

            expressLimit:0,

            expressPrice:5,

            slogan:'VIP尊享满89元减4元运费券'

            }

        return{ item }

    }

}

</script>

<style lang="scss" scoped>

</style>

相关截图：