大屏基本布局实现

基于element-ui进行布局。

安装

安装运行依赖

element-ui

安装开发依赖

babel-plugin-component

安装插件

vue-cli-plugin-element

布局

项目的整体布局是共用的，通过在vue的路由里配置component为Layout复用，这个vue的官方文档有介绍。

如上图所示：

1、建立一个layout文件夹存放项目的共用布局
2、工作需要，现需要一个上下两栏的布局，上面是工具栏
3、下面是内容展示栏，工具栏内点击切换的页面，路由就在内容页内加载
4、index.js是用来统筹引用布局用的组件的，2、3建的就是组件，如果需要用到别的布局组件，全都放这里，方便layout.vue引用（后面会在内容展示栏2边都分别再放一栏）
5、供路由使用的Layout文件，整体布局所在
6、复用布局的使用大概就标记6那样了

采用element的Container布局容器作为页面的整体布局，这里是基于1366x768像素做大屏页面，然后对全屏页面进行等比例缩放。

layout.vue

<template><div><div class="app-wrapper"><!-- 头部栏 --><app-head></app-head><!-- 内容栏 --><app-main /></div></div>
</template><style lang="scss" scoped>
.app-wrapper {width: 1366px;height: 768px;transform-origin: center top 0px;position: relative;left: 50%;margin-left: -683px;
}
</style>

AppHead.vue

<template><div class="app-head"></div>
</template><style lang="scss" scoped>
@import '~@/styles/variables.scss';
.app-head {height: 50px;line-height: 50px;width: 100%;background-color: $headBg;
}
</style>

AppMain.vue

<template><section class="app-main"><transition><router-view :key="key" /></transition></section>
</template><style lang="scss" scoped>
@import '~@/styles/variables.scss';
.app-main {overflow: hidden;position: absolute;left: 0;right: 0;top: 50px;bottom: 0;background-color: $appBg;
}
</style>

这样就得到了如下的布局了

这里基本就是基本的大屏展示框架了，然后为了适应大屏，需要对全屏页面等比例缩放，放到前端大屏展示框架搭建（三）介绍了，都是常用的方法。

工程代码

整个项目的代码在下面地址，参考commit就懂过程了

大屏开发框架工程代码

前端大屏展示框架搭建（二）相关推荐

前端大屏展示框架搭建（一）
基于VS Code的代码风格统一配置项目开发很常用到,记录下搭建的过程. 基于vue-cli3新建一个项目过程已经写过了~~~ 参考这里vue-cli3新建项目基于VS Code的代码风格统一配 ...
前端大屏展示框架搭建（三）
大屏全屏页面等比例缩放的实现等比缩放页面,是大屏开发里比较常用的方式了.一般设计图按大屏的尺寸设计,按尺寸开发,最后等比缩放. 大屏等比缩放,我这里在layout.vue里面做控制. layout. ...
如何使用 WEB 技术编写前端代码，实现大屏展示和地图显示功能
使用 WEB 技术编写前端代码实现大屏展示和地图显示功能可以采用以下步骤: 使用 HTML.CSS.JavaScript 等前端技术构建页面布局和样式. 使用 JavaScript 库或框架,如 jQ ...
数据可视化、模板框架、动态控件、可视化大屏、数据监管、监控平台、图表元件库、数据看板、驾驶舱、统计图表、园区、大屏展示、安防、智慧城市、旅游、健康、医疗卫生、交通、农业、政务、AI、食品、医院、安全
数据可视化.模板框架.动态控件.可视化大屏.数据监管.监控平台.图表元件库.数据看板.驾驶舱.统计图表.园区.大屏展示.安防.智慧城市.旅游.健康.医疗卫生.交通.农业.政务.AI.食品.医院.数据安 ...
数据可视化、模板框架、动态控件、可视化大屏、数据原型、监控平台、图表元件库、数据看板、驾驶舱、统计图表、消防、大屏展示、安防、智慧城市、旅游、运输、医疗卫生、贸易、电力、政务、水质、工业园区环境监测
数据可视化.模板框架.动态控件.可视化大屏.数据原型.监控平台.图表元件库.数据看板.驾驶舱.统计图表.消防.大屏展示.安防.智慧城市.旅游.运输.医疗卫生.贸易.电力.政务.水质.工业园区环境监测 ...
大数据可视化模板、模板框架、动态控件、可视化大数据原型、监控平台、图表元件库、数据看板、驾驶舱、统计图表、大数据驾驶舱、大屏展示、联勤治理、旅游、运输、车辆、校园、舆情、信息监测看板原型
大数据可视化模板.模板框架.动态控件.可视化大数据原型.监控平台.图表元件库.数据看板.驾驶舱.统计图表.大数据驾驶舱.大屏展示.智慧安防.党建.旅游.运输.医疗.校园.工业园区环境监测看板原型适用 ...
Vuex与前端表格施展“组合拳”，实现大屏展示应用的交互增强
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 下图是一个产品开发中非常常见的大屏展示界面 ...
大数据可视化模板、模板框架、动态控件、可视化大数据原型、监控平台、图表元件库、数据看板、驾驶舱、统计图表、大数据驾驶舱、大屏展示、智慧安防、党建、旅游、运输、医疗、校园、工业园区环境监测看板原型
大数据可视化模板.模板框架.动态控件.可视化大数据原型.监控平台.图表元件库.数据看板.驾驶舱.统计图表.大数据驾驶舱.大屏展示.智慧安防.党建.旅游.运输.医疗.校园.工业园区环境监测看板原型适用 ...
前端使用echarts实现数据可视化大屏展示
1.vue中如何使用echarts完成大屏展示:移步到这里 2.原生js项目中如何使用echarts完成大屏展示:移步到这里

前端大屏展示框架搭建（二）