大屏展示 架构 大屏展示布局

大屏展示 区域设计

区域设计

实现

区域设计

大致的分布图为：

实现

格局

由于整个页面要跟随屏幕的大小来改变其尺寸，所以不能写死，在屏幕大小的基础上来设定，（由父级样式继承尺寸）。

多用到

{
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项目中改，存为副本或其他；；）

————————————————