2. 可视化大屏 - 自适应布局- 可直接使用

最新推荐文章于 2024-07-05 14:49:45 发布

-DOUSS

最新推荐文章于 2024-07-05 14:49:45 发布

阅读量364

点赞数 1

分类专栏：可视化大屏开发遇到的事情文章标签： vue.js 前端数据可视化 css3 html

本文链接：https://blog.csdn.net/web_dou/article/details/131870072

版权

可视化大屏开发遇到的事情专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图：

总结：
弹性盒flex布局

display:flex 开启flex布局
flex:1 对应区块的占比大小
align-items 元素在交叉轴的对齐方式
justify-content 元素在x轴的排列方式
flex-wrap 是否允许元素换行
flex:0 1 auto

flex-grow：定义了项目的放大比例，默认为 0，即使存在剩余空间，也不放大。
flex-shrink：定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
flex-basis：定义在分配多余空间之前，项目占据的主轴空间

html 代码：

<template>
	<div class="board-screen">
		<!-- 1. 头部 -->
		<div class="board-header"></div>
		
		<!-- 2. 全屏地图 -->
		<section class="map-container" v-loading="mapLoading" element-loading-text="地图加载中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
			<div id="map-box" style="width: 100%; height: 100%"></div>
			<div class="map-list-bottom section-map-bottom" v-if="isFullShow">
			</div>
		</section>

		<!-- 3. 左侧 -->
		<div class="board-left" v-if="isFullShow">
			<div class="section-chart-left" style="flex: 0 1 20%;"></div>
			<div class="section-chart-left" style="flex: 0 1 38%"></div>
			<div class="section-chart-left" style="flex: 0 1 42%"></div>
		</div>

		<!-- 4.右侧 -->
		<div class="board-right" v-if="isFullShow">
			<div class="section-chart-right" style="flex: 0 1 30%"></div>
			<div class="section-chart-right" style="flex: 0 1 36%"></div>
			<div class="section-chart-right" style="flex: 0 1 34%"></div>
		</div>
	</div>
</template>

css代码:

<style lang="scss" scoped>
	.board-screen {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		position: relative;
		font-family: PingFangSC-Semibold, PingFang SC;

		// 1. 头部
		.board-header{
			position: absolute;
			width: 100%;
			height: 8%;
			top: 0;
			left: 0;
			z-index: 20;
			background: rgba(0, 0, 0,0.7)
		}
		
		// 2. 地图
		.map-container {
			position: absolute;
			height: calc(100vh);
			width: calc(100vw);
			top: 0;
			left: 0;
			.section-map-bottom {
				position: absolute;
				bottom: 0;
				left: 25%;
				width: 50%;
				height: 30%;
				background-color: rgba(0, 0, 0, 0.7);
			}
		}
		// 3/4 左侧 右侧
		.board-left, .board-right {
			position: absolute;
			width: 24%;
			height: calc(100vh - 8.6%);
			top: 8.6%;
			bottom: 0;
			display: flex;
			flex-direction: column;
		}
		.board-left {
			background-color: rgba(0, 0, 0, 0.7);
			left: 0;
		}
		.board-right {
			background-color: rgba(0, 0, 0, 0.7);
			right: 0;
		}
		
	}
</style>