CommunityApp/pages/demo/demo4.vue

<template>
	<view>
		<view class="data">
			<view class="address">
				<view class="img">
					<image src="/static/icon/address.png" mode="widthFix"></image>
				</view>
				<view class="content">
					<text>宁夏冬美小区</text>
					<text>银川市兴庆区解放东路477号</text>
				</view>
			</view>
		</view>
		
		<view class="data" >
			<view class="info">
				<view class="top">
					<view class="left">
						<u-icon name="hourglass-half-fill" :size="30" top="2" color="rgb(94,94,94)"></u-icon>
						<view class="title">订单号：<text>45217845689442452111</text></view>
					</view>
					<view class="copy">
						<text>复制</text>
					</view>
				</view>
				<view class="item">
					<view class="content" >
						<text >标题：</text>
						<text >代拿滑板到二楼</text>
					</view>
					<view class="content" >
						<text >发布时间：</text>
						<text >2020-10-27 17:00:22</text>
					</view>
					<view class="content" >
						<text >联系人：</text>
						<text >黄明潘</text>
					</view>
					<view class="content" >
						<text >联系微信：</text>
						<text >hmp1049127947</text>
					</view>
					<view class="content" >
						<view class="alignCenter">
							<text >联系电话：</text>
						</view>
						<view class="phone">
							<text class="alignCenter">19124812874</text>
							<image src="http://139.9.185.150/upload/bf61acb4-22fc-4812-9f80-2f59a4cd949f-phone.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="content" >
						<text >价格：</text>
						<text class="price">￥4.00</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="data" >
			<view class="account">
				<view class="top">
					<u-icon name="account" :size="30" top="2" color="rgb(94,94,94)"></u-icon>
					<text>会员信息</text>
				</view>
				<view class="item">
					<u-avatar :show-sex ="true" size="110" src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg"></u-avatar>
					<view class="alignCenter name" >
						plsteins
					</view>
				</view>
			</view>
		</view>
		
		<view class="data">
			<view class="cu-card dynamic no-card " style="margin: 10rpx 0;">
				<view class="cu-item shadow">
					<!-- 1张图片 -->
					<view class=" grid flex-sub   col-1" style="height: 300rpx;"  v-if="dataDetail.picArray.length==1">
						<view class="bg-img only-img" :style="{backgroundImage: 'url(' + dataDetail.picArray[0] + ')'}">
						</view>
					</view>
					<!-- 多张图片 -->
					<view class=" grid flex-sub  col-4 grid-square" v-else>
						<view class="bg-img" :style="{backgroundImage: 'url(' + item1 + ')'}"
						   v-for="(item1,index1) in dataDetail.picArray" :key="index1">
						</view>
					</view>
				</view>
				
				<view class="need-desc">
					<text>需求内容：</text>
					<text class="content">
						小熊USB小风扇迷你超静音手持电风扇便携式随身小型电动充电宿舍【全新包邮】原价40闲置30到手＋微信请备注
					</text>
				</view>
			</view>
		</view>
		
		<u-divider height="80"  bg-color="#f1f1f1">没有更多了</u-divider>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataDetail:{
					picArray:[
						'https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg',
						'https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg',
						'https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg',
						'https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg'
					]
				}
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.alignCenter{
		display: flex;flex-direction: column;justify-content: center;
	}
	
	.data {
		background-color: #FFFFFF;
		width: 700rpx;
		margin:20rpx auto;
		border-radius: 14rpx;
		box-sizing: border-box;
		padding: 16rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #b6b6b6;
	}
	// 地址
	.address{
		margin: 20rpx auto;
		display: flex;
		.img{
			margin: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image{
				width: 42rpx;
			}
		}
		.content{
			display: flex;
			flex-direction: column;
			margin: 10rpx 0;
			text{
				color: #a1a1a1;
				font-size: 28rpx;
			}
			text:first-child{
				margin-bottom: 20rpx;
				color: #333;
				font-weight: 800;
				font-size: 30rpx;
			}
		}
	}
	
	//基本信息
	.info{
		.top {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #e2e2e2;
			.left {
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				.title {
					margin: 0 10rpx;
					font-weight: bold;
					text{
						font-weight: 500;
					}
				}
			}
			.copy{
				padding-right: 20rpx;
				color: $base-btn-color;
				text-decoration: underline;
			}
		}
		.item {
			margin: 30rpx;
			display: flex;
			flex-direction: column;
			.content{
				padding: 16rpx 0;
				display: flex;
				justify-content: space-between;
				.price{
					color: #e54d42;
					font-size: 32rpx;
					font-weight: 700;
				}
				.phone{
					display: flex;
					text{
						margin-right: 10rpx;
					}
					image{
						width: 50rpx;
					}
				}
			}
		}
	}
	
	//会员信息
	.account{
		.top{
			padding: 20rpx 0;
			display: flex;
			border-bottom: 1rpx solid #e2e2e2;
			font-weight: 800;
			
			text{
				padding-left: 10rpx;
			}
		}
		.item{
			padding: 20rpx;
			display: flex;
			
			.name{
				padding-left: 40rpx;
				font-size: 32rpx;
			}
		}
	}
	
	.need-desc{
		padding-top: 20rpx;
		font-weight: 600;
		line-height: 48rpx;
		.content{
			font-weight: 500;
		}
	}
	
	
</style>