在本次大屏实现中,前期调研主要侧重于布局方面,功能点的拆分,以及可能用到的相关技术知识技能。
布局
刚拿到设计稿的第一眼,简单的分为了图A的样子,而我在前期实现的时候,通过栅格化布局,也确实按照这个来实现了,然而到最后的地图部分的时候,我有点懵了……这个地图看起来更像是背景图,额……那岂不是说,一开始的布局就是错误的?
最开始的布局,中间部分,我用的是
display: flex;
align-items: center;
justify-content: space-between;
如果是这样,那地图怎么放???何况地图还有鼠标滚动的缩放等功能交互,不行,需要改变z-index。可即便是加上z-index,这个布局也是错的方向。最终重新拆分,并且在刘哥的帮助下,重新定义布局,重新拆解后,地图的布局是图B的样子。
简单来说,就是不用栅格化布局,通过position:absolute,设置宽高单位为vw/vh,实现自适应(很惭愧,布局这部分的css是刘哥来改的,我是时候看的代码)。
先甩几个链接,留着多看看
rem设置根元素的字体大小 px、em、rem区别介绍 CSS中的px与物理像素、逻辑像素、1px边框问题
顺便延伸下,对html标签的offsetWidth、clientWidth、scrollWidth属性的理解
小技巧:把设计稿当成背景图来调样式,可达到高概率还原。
以下是本次实现的大屏布局方面的思维导图及目前实现的效果图,和index.vue文件中template部分。
<template>
<div id="index">
<Header style=";top: 0;width: 100vw;z-index: 999;position: absolute" />
<MapBJ style="height:100vh;position: absolute;z-index: 1" />
<div class="index_left">
<MyTable :tabHeades="tabHeades" :tabDatas="tabDatas" style="height: 47vh;"></MyTable>
<RadarMap class='index_bottom_bg' :items="items_one" style="height: 39vh;margin-top: 1.5vh;" />
</div>
<div class="index_right_top">
<ListScroll :itemsListData="itemsListData" />
</div>
<div class="index_right_bottom">
<GraphMap id="echartGraph" class='index_bottom_bg' :options="optionGraph" style="height: 37vh;" />
</div>
<div class="index_bottom">
<a-button-group class="base-btn">
<BaseBtn :BtnText="dayText" @clickDay="clickDay" />
<BaseBtn :BtnText="houseText" @clickHouse="clickHouse" />
</a-button-group>
<StackedMap id="echartBar" :options="optionBar" style="height:20vh;" />
</div>
</div>
</template>