null/pages/mang/components/pro-item.vue

<template>
	<view class="flex-row section_2 view_6"  @tap="navTo('/pages/mang/detail',{id:info.id})">
	  <image
		:src="info.goods_img"
		class="group_11"
		mode="aspectFill"
	  />
	  <view class="flex-col text_21 view_7">
		<text class="text_25 clamp">{{info.goods_name}}</text>
		<view class="stars align-center">
			 <image
			  src="/static/mang_star.png"
			  class="image_14"
			  v-for="(item,idx) in info.rank"
			  :key="idx"
			/>	
		</view>
		<text class="text_26">随机搭配</text>
		<view class="flex-row group_16">
		  <view class="group_17">
			<text class="text_27">￥</text>
			<text class="text_28">{{info.shop_price}}</text>
		  </view>
		  <text class="text_29">￥{{info.market_price}}</text>
		</view>
	  </view>
	  <text class="text_30" v-if="info.distance">{{info.distance}}</text>
	  <view class="flex-col text-wrapper_2"><text class="text_23 text_31 clamp">仅剩{{info.num}}份</text></view>
	</view>	
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
	//请求数据
	info:{
		type:Object,
		default:()=>({})
	},
  },
  methods: {
  }
};
</script>
<style lang="scss" scoped>
	.section_2 {
	  width: 690rpx;
	  margin:0 auto 24rpx;
	  padding: 24rpx 14rpx 24rpx 24rpx;
	  background-color: #ffffff;
	  box-shadow: 0px 6rpx 10rpx #2a2a2a14;
	  border-radius: 20rpx;
	  position: relative;
	  .text-wrapper_2 {
	    padding: 8rpx 0 16rpx;
	    background-image: url('/static/mang-listbg.png');
	    background-size: 100% 100%;
	    background-repeat: no-repeat;
	    position: absolute;
	    right: -10rpx;
	    top: 26rpx;
		width: 120rpx;
	  }
	  .text_23 {
	    margin-left: 12rpx;
	    margin-right: 6rpx;
	    color: #ffffff;
	    font-size: 24rpx;
	    font-family: PingFang;
		max-width: 120rpx;
	  }
	  // .text_31 {
	  //   margin-left: 12rpx;
	  //   margin-right: 6rpx;
	  // }
	}
	.view_6 {
	  padding: 24rpx 18rpx 24rpx 24rpx;
	}
	.group_11 {
	  flex-shrink: 0;
	  width: 200rpx;
	  height: 200rpx;
	  border-radius: 20rpx;
	}
	.text_21 {
	  margin-top: 100rpx;
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	  line-height: 18rpx;
	}
	.view_7 {
	  margin-top: initial;
	  color: initial;
	  font-size: initial;
	  font-family: initial;
	  line-height: initial;
	  margin-left: 19rpx;
	  flex: 1 1 auto;
	  align-self: center;
	}
	.text_25 {
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang;
	  max-width: 360rpx;
	}
	.stars{
		 margin-top: 12rpx;
		.image_14 {
		  width: 28rpx;
		  height: 28rpx;
		  margin-right: 4rpx;
		}
	}
	
	.text_26 {
	  margin-top: 20rpx;
	  align-self: flex-start;
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	  line-height: 23rpx;
	}
	.group_16 {
	  margin-top: 37rpx;
	  padding: 0 2rpx;
	}
	.group_17 {
	  line-height: 28rpx;
	  height: 29rpx;
	}
	.text_27 {
	  color: #ff3e3e;
	  font-size: 24rpx;
	  font-family: PingFang;
	  line-height: 19rpx;
	}
	.text_28 {
	  color: #ff3e3e;
	  font-size: 36rpx;
	  font-family: PingFang;
	  line-height: 28rpx;
	}
	.text_29 {
	  margin-left: 10rpx;
	  margin-top: 9rpx;
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	  line-height: 20rpx;
	  text-decoration: line-through;
	}
	.text_30 {
	  z-index: 2;
	  position: absolute;
	  top: 130rpx;
	  right: 20rpx;
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	}
</style>