scss做布局

在这里插入代码片<template>
	<view class="content">
		<view class="box">
			<view class="ch1">
				
			</view>
			<view class="ch2">
				
			</view>
			<view class="ch3">
				<view class="left">
					
				</view>
				<view class="right">
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.box{
		width: 800upx;
		height: 1000upx;
		background-color: red;
		.ch1{
			width: 800upx;
			height: 100upx;
			background-color: blue;
		}
		.ch2{
			width: 800upx;
			height: 300upx;
			background-color: green;
		}
		.ch3{
			width: 800upx;
			display: flex;
			.left{
				width: 50%;
				height: 600upx;
				background-color: yellow;
			}
			.right{
				width: 50%;
				height: 600upx;
				background-color: blue;
			}
		}
	}
</style>

效果展示