大屏展示 NO1（区域设计）

区域设计

大致的分布图为：

实现

格局

由于整个页面要跟随屏幕的大小来改变其尺寸，所以不能写死，在屏幕大小的基础上来设定，（由父级样式继承尺寸）。
多用到{
display: flex;
align-items: center;
justify-content: space-between;
}
框架代码如下：
下面展示一些 内联代码片。

// Dom
<div class="home">
<div class="left">
	<div class="left-button">
		<!-- <svg class="icon myIconStyle" aria-hidden="true">
			<use xlink:href="#icon-langchaoyun"></use>
			</svg> -->
		<button class="buttons" @click="changeState(30)" ref="b30">
			<svg class="icon myIconStyle" aria-hidden="true">
			<use xlink:href="#icon-yuepao-copy"></use>
			</svg>
		</button>
		<button class="buttons" @click="changeState(90)" ref="b90">
			<svg class="icon myIconStyle" aria-hidden="true">
			<use xlink:href="#icon-jipao-copy"></use>
			</svg>
		</button>
		<button class="buttons" @click="changeState(365)" ref="b365">
			<svg class="icon myIconStyle" aria-hidden="true">
			<use xlink:href="#icon-nianpao-copy"></use>
			</svg>
		</button>
		<button class="buttons" @click="changeState('our')" ref="bour">
			<!-- <svg class="icon myIconStyle icon-quanbu1" aria-hidden="true">
			<use xlink:href="#icon-quanbu1"></use>
			</svg> -->
			<span class="Our">全</span>
		</button>
	</div>
	<div id="leftMain">
		<left ></left>
	</div>
</div>
<div class="center">
	<center  :visualMapminmax="visualMapminmax"></center>
</div>
</div>

//  css
.home{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: url('../assets/jpg/1222.jpg')no-repeat;
	background-size: cover;
	.left{
		width: 100%;
		height: 100%;
		// border: 1px solid red;
		.left-button{
			width: 100%;
			height: 10%;
			// border: 1px solid red;
			display: flex;
			align-items: center;
			justify-content: center;
			.buttons{
				margin-left: 10px;
				width: 80px;
				height: 80px;
				display: block;
				background-color: #008682;
				border: 1px solid transparent;
				border-radius: 50%;
				.myIconStyle{
					width: 100%;
					height: 100%;
				}
				.Our{
					position: relative;
					top: -4px;
					font-size: 50px;
					color: white;
				}
			}
		}
		#leftMain{
			width: 100%;
			height: 88%;
		}
	}.center{
		width: 100%;
		height: 100%;
		// border: 1px solid green;
	}
}

注： 由于父级继承，在Echarts实例化中 ，同样要设置单个的尺寸，否则显示不出来，
图中的svg图片，是在阿里巴巴iconfont项目中的Symbol引用，在public中的index.html中用script标签载入在线链接。 样式可在svg标签中添加自己的class，来单独设立样式，（颜色不能改，可以直接在阿里巴巴iconfont项目中改，存为副本或其他；；）