cte-share/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="contentInRowS price textfontB5">
								<text>{{$t('index.manX')}} {{$formPr(item.posPrice)}}{{$t('locale.huobidw')}}</text>
								<text class="textfontB5" style="color:#00A6FF;">{{$formPr(item.juli)}}Km</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>