大屏记录——布局（前期调研篇）_大屏布局规则-优快云博客

本文链接：https://blog.youkuaiyun.com/ansheng02/article/details/103363092

本文分享了一次大屏设计实现过程中的布局调整经验，从最初的栅格化布局遇到地图组件难题，到采用绝对定位和vw/vh单位实现自适应布局的解决方案，以及相关CSS技巧和资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在本次大屏实现中，前期调研主要侧重于布局方面，功能点的拆分，以及可能用到的相关技术知识技能。

布局

刚拿到设计稿的第一眼，简单的分为了图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>