frontend-app/components/shop/ping-item.vue

<template>
	<view class="shop-view" @click.stop="onClick">
		<image :src="obj.url" class="top-img" mode="widthFix"></image>
		<view class="shop-bottom-panel">
			<text class="text-30 text-zu  text-overflow" style="padding-top:8rpx">{{obj.title}}</text>
			<view class="flex-r-lr" style="width:100%;margin-top:10rpx;margin-bottom: 14px;">
				<text class="text-28 text-zi text-bold">￥{{obj.price}}</text>
				<text class="text-24 " style="color:#999">已售{{obj.sales}}件</text>
			</view>
		</view>
	</view>
</template>

<script>
	import MyBtn from '@/components/common/my-btn.vue'
	export default {
		components:{MyBtn},
		props:{
			obj:{
				type:Object,
				default:()=>{}
			},
		},
		mounted(){
		},
		methods: {
			onClick(){
				this.$emit('ok',this.obj.id);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shop-view{
		width:332rpx;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		background-color: #fff;		
		.top-img{
			width:332rpx;
			display: block;
			border-radius: 12rpx;
		}
		.shop-bottom-panel{
			width:100%;
			padding: 0 12rpx;
			box-sizing: border-box;
			flex-direction: column;
			justify-content: space-between;
			display: flex;
			
		}
		
	}
	.text-overflow {
		display: inline-block;
		overflow: hidden;         
		text-overflow: ellipsis;  
		white-space: nowrap; 
	}
</style>