商家信息展示模板开发

    
    
    
      
        {{item.merName}}
        
          {{item.merType}}
        
      
      
        
          
          {{item.rateNum}}
        
        
          月售
          296
        
        
          
            {{item.time}}
            分钟
          
          
            {{item.distance}}
            米
          
        
      
      
        
          配送
        
          ￥
          {{item.deliveryFee}}
        
        
          ￥
          {{item.oriDeliveryFee}}
        
        
        {{item.delivery}}
      
      
        {{item.assess}}
      
      
        
          
            {{item.orPriceOne}}
            减
            {{item.discountOne}}
          
          
            {{item.orPriceTwo}}
            减
            {{item.discountTwo}}
          
        
        {{item.specialOffer}}元特价
      
    
  

css代码：

.sjList-box{
display:flex;
justify-content: flex-start;
margin-top: 60rpx;
padding: 0 30rpx;
}
.sjList-box .leftCon-box{
  width: 176rpx;
  height: 252rpx;
}
.sjList-box .rightCon-box{
  display:flex;
  justify-content: space-between;
  flex-direction: column;
  padding-left: 22rpx;
  box-sizing: border-box;
}
.sjList-box .rightCon-box .labelOne{
  display:flex;
  justify-content: space-between;
}
.sjList-box .rightCon-box .labelOne .merName{
font-size: 32rpx;
font-family: SourceHanSansCN-Regular;
color: #333333;
}
.sjList-box .rightCon-box .labelOne .merType{
width: 134rpx;
height: 34rpx;
line-height: 27rpx;
background: #F3C051;
border-radius: 18rpx;
text-align:center;
}
.sjList-box .rightCon-box .labelOne .merType text{
font-size: 24rpx;
font-family: SourceHanSansCN-Normal;
color: #FFFFFF;
}
.sjList-box .rightCon-box .labelTwo{
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.sjList-box .rightCon-box .labelTwo .rate{
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.sjList-box .rightCon-box .labelTwo .rate image{
width: 35rpx;
height: 35rpx;
}
.sjList-box .rightCon-box .labelTwo .rate text{
font-size: 24rpx;
font-family: SourceHanSansCN-Regular;
color: #FF5704;
margin-left: 10rpx;
}
.sjList-box .rightCon-box .labelTwo .yueshou .label,.yueshouNum{
  font-size: 24rpx;
  font-family: SourceHanSansCN-Regular;
  color: #AC6125;
}
.sjList-box .rightCon-box .labelTwo .juli{
  display:flex;
  justify-content: space-between;
  font-size: 24rpx;
  font-family: SourceHanSansCN-Regular;
  color: #999999;
}
.sjList-box .rightCon-box .labelThree{
  display:flex;
  justify-content: space-between;
  align-items: center;
  font-size: 26rpx;
  font-family: SourceHanSansCN-Regular;
  color: #666666;
}
.sjList-box .rightCon-box .labelThree .yunfei{
  display:flex;
  justify-content: flex-start;
  align-items: center;
}
.sjList-box .rightCon-box .labelThree .yuanjia{
  color: #999999;
  margin-left: 10rpx;
}
.sjList-box .rightCon-box .labelFour{
width: 224rpx;
height: 40rpx;
line-height: 35rpx;
border-radius: 24rpx;
background-color: #FFF3E6;
text-align:center;
}
.sjList-box .rightCon-box .labelFour text{
font-size: 24rpx;
font-family: SourceHanSansCN-Regular;
color: #AC6125;
}
.sjList-box .rightCon-box .labelFive{
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.sjList-box .rightCon-box .labelFive .youhui{
  display:flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #FC7E2B;
  border-radius: 4rpx;
  font-size: 28rpx;
  font-family: SourceHanSansCN-Regular;
  color: #FC7E2B;
  padding: 0 26rpx;
  box-sizing: border-box;
}
.sjList-box .rightCon-box .labelFive .youhuiOne{
  position:relative;
  padding-right: 20rpx;
  text-align:center;
}
.sjList-box .rightCon-box .labelFive .youhuiTwo{
  margin-left: 20rpx;
  text-align:center;
}
.sjList-box .rightCon-box .labelFive .youhuiOne:after{
content: '';
position:absolute;
right: 0;
top: 5rpx;
width: 0;
height: 24rpx;
border: 1px solid #FFCDAC;
}
.sjList-box .rightCon-box .labelFive .tejia{
border: 1px solid #FC7E2B;
border-radius: 4rpx;
padding: 0 26rpx;
font-size: 28rpx;
font-family: SourceHanSansCN-Regular;
color: #FC7E2B;
}
.peisong{
  padding: 0 14rpx;
  box-sizing: border-box;
  height: 40rpx;
  font-size: 24rpx;
  font-family: SourceHanSansCN-Regular;
  color: #2963F2;
  background-color: rgba(32, 94, 251, 0.11);
}

js:

  data: {
    merlist: [
      {
        src: "../../../static/img/education/",
        merName: "肯德基（邮政中心十字）",
        merType: "生鲜超市",
        rateNum: "4.8",
        monthlySale: "296",
        time: "28",
        distance: "242",
        deliveryFee: "5",
        oriDeliveryFee: "9",
        delivery: "兰骑士专送",
        assess: "好吃量大、很过瘾",
        orPriceOne:"49",
        discountOne: "9",
        orPriceTwo:"89",
        discountTwo: "22",
        specialOffer: "3"
      },
      {
        src: "../../../static/img/lifeCircle/arroundServe/mericon.png",
        merName: "肯德基（邮政中心十字）",
        merType: "生鲜超市",
        rateNum: "4.8",
        monthlySale: "296",
        time: "28",
        distance: "242",
        deliveryFee: "5",
        oriDeliveryFee: "9",
        delivery: "兰骑士专送",
        assess: "好吃量大、很过瘾",
        orPriceOne:"49",
        discountOne: "9",
        orPriceTwo:"89",
        discountTwo: "22",
        specialOffer: "3"
      },
      {
        src: "../../../static/img/lifeCircle/arroundServe/mericon.png",
        merName: "肯德基（邮政中心十字）",
        merType: "生鲜超市",
        rateNum: "4.8",
        monthlySale: "296",
        time: "28",
        distance: "242",
        deliveryFee: "5",
        oriDeliveryFee: "9",
        delivery: "兰骑士专送",
        assess: "好吃量大、很过瘾",
        orPriceOne:"49",
        discountOne: "9",
        orPriceTwo:"89",
        discountTwo: "22",
        specialOffer: "3"
      }
    ]
  },

效果如下：