工作230:小程序学习4开始布局页面4

<template>
	<view class=" content">
		<div style="float: left; width: 477rpx;margin-bottom: 24rpx;">
			<div class="u-flex module_sm blue_module" style="margin-right: 25rpx;">
				<u-image class="module_icon" width="60rpx" height="60rpx" src="../../static/marker_information/jbxx_icon.png"></u-image>
				<view class="market_font ">
					基本信息
				</view>
			</div>
			<div class="u-flex module_sm jhuang_module">
				<u-image class="module_icon" width="60rpx" height="60rpx" src="../../static/marker_information/scry_icon.png"></u-image>
				<view class="market_font ">
					荣誉市场
				</view>
			</div>
			<div class="u-flex module_big shichang_bg">
				<u-image class="module_icon" width="60rpx" height="60rpx" src="../../static/marker_information/scjs_icon.png"></u-image>
				<view class="market_font">
					市场介绍
				</view>
			</div>
		</div>


		<div class="u-flex module_big_col">
			<u-image class="module_icon_big" width="60rpx" height="60rpx" src="../../static/marker_information/scdt_icon.png"></u-image>
			<view class="market_font">
				市场地图
			</view>
		</div>



		<div style="clear: both;"></div>

		<div class="u-flex module_sm jhong_module">
			<u-image style="margin-top: 30rpx; margin-bottom: 20rpx;" width="60rpx" height="60rpx" src="../../static/marker_information/xfs_icon.png"></u-image>
			<view class="market_font ">
				消防栓
			</view>
		</div>
		<div class="module_big  tanwei_bg"></div>





	</view>
</template>

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

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 30rpx;

		.module_sm {
			width: 214rpx;
			height: 192rpx;
			opacity: 1;
			border-radius: 8rpx;
			flex-direction: column;
			margin-right: 25rpx;
			margin-bottom: 24rpx;
			float: left;

			.module_icon {
				margin-top: 30rpx;
				margin-bottom: 20rpx;
			}

			.market_font {
				font-size: 24rpx;
				font-family: PingFangSC;
				font-weight: 400;
				line-height: 33rpx;
				color: #FFFFFF;
				opacity: 1;
				letter-spacing: 3rpx;
			}
		}

		.module_big {
			width: 452rpx;
			height: 192rpx;
			background-size: 452rpx 192rpx;
			background-repeat: no-repeat;
			float: left;
			flex-direction: column;

			.market_font {
				font-size: 24rpx;
				font-family: PingFangSC;
				font-weight: 400;
				line-height: 33rpx;
				color: #FFFFFF;
				opacity: 1;
				letter-spacing: 3rpx;
			}

			.module_icon {
				margin-top: 30rpx;
				margin-bottom: 20rpx;
			}

		}

		.shichang_bg {
			background-image: url(../../static/marker_information/scjs_bg.png);
		}

		.tanwei_bg {
			background-image: url(../../static/marker_information/twh_bg.png);
		}

		.module_big_col {
			width: 214rpx;
			height: 408rpx;
			background: linear-gradient(180deg, #3DD5FE 0%, #05B1FA 100%);
			opacity: 1;
			border-radius: 8rpx;
			float: left;
			flex-direction: column;
			.module_icon_big{
				margin-top: 145rpx;
			}
			.market_font {
				font-size: 24rpx;
				font-family: PingFangSC;
				font-weight: 400;
				line-height: 33rpx;
				color: #FFFFFF;
				opacity: 1;
				letter-spacing: 3rpx;
			}
		}

		.blue_module {
			background: linear-gradient(180deg, #70C7F2 0%, #24B4F2 100%);
		}

		.jhuang_module {
			background: linear-gradient(180deg, #F8B87A 0%, #F88213 100%);
		}

		.jhong_module {
			background: linear-gradient(180deg, #FA946B 0%, #FA682E 100%);
		}
	}
</style>

运行结果