Jingde-town-wechat-uniapp/pages_order/service/situation.vue

<template>
	<!-- 遗产概况 -->
	<view class="situation">
		<navbar title="遗产概况" leftClick @leftClick="$utils.navigateBack" />
		<view class="situation-imgs">
			<view class="situation-imgs-one">
				<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" radius="12rpx" width="100%" height="100%" />
			</view>
			<view class="situation-imgs-two">
				<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg"  width="100%" height="100%" />
			</view>
			<view class="situation-imgs-four">
				<view>
					<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFit" width="100%" height="100%" />
				</view>
				<view>
					<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFit" width="100%" height="100%" />
				</view>
				<view>
					<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFit" width="100%" height="100%" />
				</view>
				<view>
					<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFit" width="100%" height="100%" />
				</view>
			</view>
		</view>
		<tabber />
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.situation {
		.situation-imgs {
			width: 92%;
			margin-top: 20rpx;
			margin-left: 4%;

			.situation-imgs-one {
				height: 360rpx;
			}

			.situation-imgs-two {
				margin-top: 10rpx;
				height: 300rpx;
			}

			.situation-imgs-four {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				view {
					width: 48%;
					height: 260rpx;
				}
			}
		}
	}
</style>