cte-share/pages/component/ListItemE/ListItemE.vue

<template>
	<view class="item_list">
		<view class="item_content">
			<view class="contentV" style="height: 360rpx;" @click="fenleixuanz('1')">
				<view class="">
					<view class="title ztextfontB3">
						<text>{{$t('shouye.meishiwaisong')}}</text>
					</view>
					<view class="detail textfontB5" style="width: 260rpx;">
						<text>{{$t('shouye.jqxsms')}}</text>
					</view>
				</view>
				<view class="viewInRow">
					<image class="imagIconB" src="/static/defimages/ewr@3x.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="contentV" style="height: 220rpx;" @click="fenleixuanz('4')">
				<view class="title textfontB5">
					<text>{{$t('shouye.gezhongyinpi')}}</text>
				</view>
				<view class="viewInRow">
					<text class="detail ztextfontB4">{{$t('shouye.changyinxr')}}</text>
					<image class="imagIconM" src="/static/defimages/234@3x.png" mode="aspectFit"></image>
				</view>
				
			</view>
			<view class="contentV" style="height: 150rpx;" @click="fenleixuanz('3')">
				<view class="viewInRow">
					<view >
						<text class="title ztextfontB3">{{$t('shouye.waimaizq')}}</text>
						<view class="detail textfontB5">
							<text >{{$t('shouye.dizhiXzhe')}}</text>
						</view>
					</view>
					<image class="imagIconS" src="/static/defimages/phl@3x.png" mode="aspectFit"></image>
				</view>
			</view>
			<!-- <view class="contentV" style="height: 150rpx;" @click="fenleixuanz('3')">
				<view class="viewInRow">
					<view >
						<text class="title ztextfontB3">专车出行</text>
						<view class="detail textfontB5">
							<text >方便快捷</text>
						</view>
					</view>
					<image class="imagIconS" src="/static/images/dache/zhuancdc@3x.png" mode="aspectFit"></image>
				</view>
			</view> -->
		</view>
		
		<view class="item_content">
			<view class="contentV" style="height: 220rpx;" @click="fenleixuanz('2')">
				<view class="title ztextfontB3">
					<text>{{$t('shouye.tangshi')}}</text>
				</view>
				<view class="viewInRow">
					<view class="detail textfontB5">
						<text>{{$t('shouye.tangshidand')}}</text>
					</view>
					<image class="imagIconM" src="/static/defimages/www@3x.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="contentV" style="height: 270rpx;" @click="fenleixuanz('6')">
				<view class="">
					<view class="title ztextfontB3">
						<text>{{$t('shouye.remenbangd')}}</text>
					</view>
					<text class="detail textfontB5">{{$t('shouye.shangpinrem')}}</text>
				</view>
				<view class="viewInRow">
					<image class="imagIconBL" src="/static/defimages/324@3x.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="contentV" style="height: 240rpx;" @click="fenleixuanz('5')">
				<view class="title ztextfontB3">
					<text>{{$t('shouye.jingzhixwc')}}</text>
				</view>
				<view class="viewInRow">
					<text class="detail textfontB5">{{$t('shouye.pinzhish')}}</text>
					<image class="imagIconM" src="/static/defimages/wail@3x.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"goods-list",
		props:{
			goods:{},
		},
		data() {
			return {
				
			};
		},
		methods:{
			fenleixuanz(e){
				this.$emit('Efwflxuanze',e);
			},
		},
	}
</script>

<style lang="scss">
@font-face {
	font-family: zrht;
	src: url('/uni_modules/font/zrht.otf');
}
	.item_list{
		padding: 0 40rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		
		background-color: #F2F3F7;
	}
	.item_content{
		width: 48%;
		margin: 20rpx 0;
		box-sizing: border-box;
	}
	.contentV{
		margin-top: 20rpx;
		background: white;
		align-items: center;
		border-radius: 12rpx;
		border: 1rpx solid lightgrey;
		box-shadow: 0rpx 0rpx 10rpx 0rpx lightgrey;
	}
	
	.viewInRow{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.title{
		margin: 20rpx;
		color:black;
		font-weight: bolder;
	}
	.detail{
		margin-left: 20rpx;
		color:black;
	}
	
	
	.imagIconB{
		margin-left: auto;
		margin-top: -20rpx;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
		width: 230rpx;
		height: 230rpx;
	}
	.imagIconBL{
		margin-left: auto;
		margin-top: -30rpx;
		margin-right: 20rpx;
		margin-bottom: 0rpx;
		width: 180rpx;
		height: 180rpx;
	}
	.imagIconM{
		margin-left: auto;
		margin-top: -16rpx;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
		width: 150rpx;
		height: 150rpx;
	}
	.imagIconS{
		margin-left: auto;
		margin-right: 20rpx;
		margin-top: 10rpx;
		width: 100rpx;
		height: 100rpx;
	}
		
</style>