meishidaYH/msdYongHu/pages/component/listItemD/listItemD.vue

<template>
	<view style="background-color: white;">
		<view class="titleview ztextfontB1">{{title}}</view>
		<scroll-view  scroll-x="true" >
			<view >
				<view class="item_list">
					<view v-if="mendianList.length==0" class="title textfontB3">
						<text>{{$t('index.fujinmeiyou')}}</text>
					</view>
					<view class="" v-for="(item,index) in mendianList" @click="mendiankl(item.id)">
						<view class="item_content">
							<imageconver :isremen="true" :isyouhui="false" :youhuinote="''" class="mainimage" :imagSrc="item.image"></imageconver>
							<!-- <image class="mainimage" :src="item.image=='/static/defimages/ddd.png'?item.image:baseUrl+item.image" mode="scaleToFill" @error="imageError(index)"></image> -->
							<view class="title textfontB3">
								<text>{{item.posName}}</text>
							</view>
							<view class="">
								<label class="Dishes textfontB5">{{item.area}}</label>
							</view>
							<view class="price textfontB5">
								<text>{{$t('index.manX')}} {{$formPr(item.posPrice)}}{{$t('locale.huobidw')}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		props:{
			mendianList:'',
			title:''
		},
		data() {
			return {
				baseUrl:this.$baseImagurl,
			};
		},
		onShow() {
			if(''==this.title||null==this.title||undefined==this.title){
				this.title=this.$t('index.remenct')
			}
		},
		methods: {
			mendiankl(e){
				//console.log(this.mendianList);
				this.$emit('Emendianxuanze',e);
			},
			imageError(index){
				this.mendianList[index]['image'] = '/static/defimages/ddd.png';//默认图片 
			},
		},
	}
</script>

<style lang="scss">
@font-face {
	font-family: zrht;
	src: url('/uni_modules/font/zrht.otf');
}

	.item_list{
		padding-left: 40rpx;
		padding-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	.item_content{
		background: white;
		width: 460rpx;
		height: 420rpx;
		margin-right: 20rpx;
	}
	
	.mainimage{
		width: 460rpx;
		height: 270rpx;
		display: block;
		border-radius: 16rpx;
		background-color:floralwhite;
		border: 1rpx solid lightgray;
	}
	
	.titleview{
		padding-left: 40rpx;
		padding-top: 16rpx;
		line-height: 46rpx;
	}
	.title{
		padding-top: 8rpx;
		width: 100%;
		text-align: left;
		//line-height: 30rpx;
		font-weight:initial
	}
	.Dishes{
		width: 100%;
		text-align: left;
		color: darkgray;
	}

	.price{
		width: 100%;
		text-align: left;
		//line-height: 28rpx;
		color: black;
	}
</style>