CommunityApp/comps/goods/goods.vue

<template>
	<view >
		<view class="recommend-info" style="background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#f1f1f1))">
		  <view class="goods-list">
		    <navigator :url="'/pagesM/pages/goods_des?id='+item.id" class="list" v-for="(item,index) in goodsList" :key="index">
		      <view class="pictrue">
		        <image :src="item.productImages[0].medium" mode="heightFix"></image>
		      </view>
		      <view class="title-tag">
		        <view class="tag">
		          <!-- <text v-if="item.is_goods === 1">特价</text> -->
		          {{item.name}}
		        </view>
		      </view>
<!-- 			  <view class="padding-top-10 padding-left-20">
			  	<view class="cu-tag sm text-gray radius" style="background-color: #ebebeb;">
			  		销量{{item.salfNum}}
			  	</view>
			  </view> -->
		      <view class="price-info">
		        <view class="user-price">
		          <text class="min">￥</text>
		          <text class="max">{{item.price}}</text>
		        </view>
		        <view class="vip-price">
		          <text>￥{{item.marketPrice}}</text>
		        </view>
		      </view>
		    </navigator>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			goodsList: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
		
		}
	}
</script>

<style lang="scss" scoped>
	/* 为你推荐 */
	.recommend-info{
	  width: 100%;
	  .recommend-title{
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    width: 100%;
	    height: 100rpx;
	    .title{
	      display: flex;
	      align-items: center;
	      image{
	        width: 416rpx;
	        height: 40rpx;
	      }
	    }
	  }
	  .goods-list{
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-between;
	    padding: 0 30rpx;
	    .list{
	      width: 49%;
	      height: 490rpx;
	      margin-bottom: 20rpx;
	      background-color: #FFFFFF;
	      border-radius: 10rpx;
	      overflow: hidden;
	      .pictrue{
	        display: flex;
	        justify-content: center;
	        width: 100%;
	        image{
	          height: 320rpx;
	        }
	      }
	      .title-tag{
	        // display: flex;
	        height: 70rpx;
	        padding: 20rpx;
	        .tag{
	          float: left;
	          margin-right: 10rpx;
	          overflow: hidden;
	          text-overflow: ellipsis;
	          display: -webkit-box;
	          -webkit-line-clamp: 2;
	          -webkit-box-orient: vertical;
	          white-space: normal;
	          font-size: 26rpx;
	          line-height: 40rpx;
	          text{
	            font-size: 24rpx;
	            color: #FFFFFF;
	            padding: 4rpx 16rpx;
	            background: #fe3f11;
	            border-radius: 6rpx;
	            margin-right: 10rpx;
	          }
	        }
	      }
	      .price-info{
	        display: flex;
	        flex-wrap: wrap;
	        align-items: center;
	        justify-content: start;
	        padding: 0 20rpx;
	        height: 50rpx;
	        .user-price{
	          display: flex;
	          align-items: center;
	          text{
	            color: #ff587f;
	          }
	          .min{
	            font-size: 24rpx;
	          }
	          .max{
	            font-size: 32rpx;
	          }
	        }
	        .vip-price{
			  padding-left: 20rpx;
	          display: flex;
	          align-items: center;
	          image{
	            width: 26rpx;
	            height: 26rpx;
	            margin-right: 10rpx;
	          }
	          text{
				text-decoration: line-through;
	            color: #8c8c8c;
	            font-size: 24rpx;
	          }
	        }
	      }
	    }
	  }
	}

</style>