可视化大屏开发系列——页面布局

页面布局是可视化大屏的基础,想要拥有一个基本美观的大屏,就得考虑页面整体模块的宽高自适应,我们自然就会想到具有强大灵活性flex布局,再借助百分比布局来辅助。至此,大屏页面布局问题即可得到解决。

可视化大屏开发系列------页面布局

案例分析

观察上述页面,对页面布局进行分析:

  1. 整体 分为头部标题区域主体内容区域两部分;
  2. 主体内容区域 从左到右分为左、中、右三部分;
  3. 主体 内容左边右边 的区域从上到下 分为四部分左边第一部分 分为左右两块
  4. 主体内容中间 的区域从上到下 分为两部分上边第一部分 分为左中右三块

实现思路

(1)页面整体高度 设为100%头部标题区域高度 设为10%主体内容区域高度 设为90% ;------实现分析1

html 复制代码
<div class="all">
    <div class="head">
      头部标题
    </div>
    <div class="whole">
      主体内容
    </div>
</div>
css 复制代码
.all {
  height: 100%;
  .head {
    height: 10%;
  }
  .whole {
    height: 90%;
  }
}

(2)鉴于页面上有从左到右从上到下 的布局,利用flex布局实现;这里抽取出一些公共样式,节省代码量,后面会使用:

css 复制代码
.my-h-flex {//容器的样式:从左到右
  display: flex;
  gap: 8px;
}
.my-v-flex {//容器的样式:从上到下
  display: flex;
  flex-direction: column;
  gap:10px;
}
.my-flex1 {//项目的样式
  flex: 1;
}

(3)主体内容区域从左到右 布局,则为主体内容区域元素添加样式my-h-flex ,为其添加三个内部直接子元素,并设置子元素flex属性来表示所占的剩余空间;------实现分析2

css 复制代码
<div class="whole my-h-flex">
  <div class="left">
    左
  </div>
  <div class="middle">
    中
  </div>
  <div class="right">
    右
  </div>
</div>
css 复制代码
.left {
  flex: 1;
}
.middle {
  flex: 2;
}
.right {
  flex: 1;
}

(4)主体内容区域左边部分从上到下 布局,则为其相应元素添加样式my-v-flex ,为其添加四个内部直接子元素,并设置子元素flex属性来表示所占的剩余空间;而第一个内部直接子元素的布局方式与(3)类似。与此同理,主体内容区域中间和右边部分依然从上到下布局,这里不再赘述。------实现分析3和分析4

html 复制代码
<div class="left  my-v-flex">
  <div class="first my-h-flex" style="flex:0.8;">
    <div class="my-flex1">
      左上1
    </div>
    <div class="my-flex1">
      左上2
    </div>
  </div>
  <div class="second my-flex1">
    左2
  </div>
  <div class="third my-flex1">
    左3
  </div>
  <div class="forth my-flex1">
    左4
  </div>
</div>

完整效果

整体页面布局代码较长,这里就不全部贴出占用过多篇幅。按照本文思路,码完代码,最终页面呈现的完整效果如下:

好了,掌握以上页面布局思路,我们就可以轻松画出各种大屏页面布局啦~

PS:若对页面布局完整代码有需要的同学,可留言!

相关推荐
流烟默9 小时前
CSS中Flex布局应用实践总结
前端·css·flex布局
千汇数据的老司机1 个月前
数据可视化技术综述(5)数据的存储
大数据·可视化·可视化大屏
招风的黑耳2 个月前
Axure精选各类组件案例集锦:设计灵感与实战技巧
axure·数据可视化·可视化大屏·原型设计·元件库·可视化元件
程楠楠&M2 个月前
uni-app页面调用接口和路由(四)
前端·vue.js·小程序·uni-app·flex布局·弹性布局
招风的黑耳2 个月前
Axure大屏可视化模板:跨领域数据分析平台原型案例
智慧城市·axure·数据可视化·可视化大屏·智慧社区·科技感大屏
Commas.KM2 个月前
【CSS|第1期】网页设计的演变:从表格布局到Grid布局
前端·css·网页布局·flex布局·grid布局·表格布局·div+css布局
M.LNG@li3 个月前
可视化大屏-实现自动滚动
vue.js·可视化大屏·大屏自动滚动·seamless-scroll·自动滚动
D7号星球4 个月前
Flex布局中元素主轴上平均分布 多余的向左对齐
前端·css·css3·flex布局
枝上棉蛮4 个月前
免费的数字孪生平台助力产业创新,让新质生产力概念有据可依
智能制造·数字孪生·可视化大屏·新质生产力·山海鲸可视化·免费可视化工具·产业数字化转型
兰兰的风吖4 个月前
【可视化大屏系列】Echarts之饼图绘制
前端·echarts·可视化大屏