00参考以及效果
参考：https://www.bilibili.com/video/BV1v7411R7mp
最终效果：
01背景知识
大屏
分辨率：
分辨率…到底是啥？1080p，2k，4k？分辨率越高就越清晰吗？
https://zhuanlan.zhihu.com/p/109817032
大屏设计尺寸规范指南
https://www.shejidaren.com/da-ping-sheji-chicun-guifan-zhinan.html
查看自己电脑的显示器：
个性化-显示设置-分辨率
19寸显示器：1440x900（16:10）
其它常见的尺寸的屏幕对应的最佳分辨率如下：
19寸显示器：1440x900（16:10）
20寸显示器：1600x900（16:9）1600x1200（4:3）
21.5寸显示器：1920x1080（16:9）
22寸显示器：1680x1050（16:10）1920x1080（16:9）1920x1200（16:10）
23寸显示器：1920x1080（16:9）1920x1200（16:10）
23.6寸显示器：1920x1080（16:9）
24寸显示器：1920x1200（16:10）1920x1080（16:9）
25寸显示器：1920x1080（16:9）
26寸显示器：1920x1200（16:10）
27寸显示器：2560x1440（16:9）
30寸显示器：2560x1600（16:10）
flex布局
参考：https://blog.csdn.net/wuyxinu/article/details/107708194
二个成员：
采用Flex布局的元素为Flex容器（flex container），它的所有子元素自动成为容器成员，称为Flex项目(flex item)。
两根轴：
水平主轴 main axis
主轴与边框的左右交叉点 main start/main end
垂直交叉轴 cross axis
交叉轴与边框的上下交叉点 cross start/cross end
项目（flex item）默认沿主轴排列，单项目占据的主轴空间/交叉轴空间 main size/cross size
flex容器属性
flex-direction 决定主轴方向=项目排列方向 flex-wrap 定义如何换行 flex-flow 它是flex-direction和flex-wrap的简写形式，语法糖 justify-content 定义项目在主轴上的对齐方式 align-items 定义项目在交叉轴上的对齐方式 align-content 定义多根轴线的对齐方式。若项目只有一根轴线则不生效。
02 大屏设计
00 项目目录
01-使用技术
完成该项目需要具备以下知识：
- div + css 布局
- flex 布局
- Less
- 原生js + jquery 使用
- rem适配
- echarts基础
02- 案例适配方案
- 设计稿是1920px
- flexible.js 把屏幕分为 24 等份
- cssrem 插件的基准值是 80px
插件-配置按钮—配置扩展设置–Root Font Size 里面 设置。
但是别忘记重启vscode软件保证生效
flexible配置
1.引入flexible
<script src="js/flexible.js"></script>
2.修改flexible配置 为24
// set 1rem = viewWidth / 10 function setRemUnit() { var rem = docEl.clientWidth / 24; docEl.style.fontSize = rem + "px"; }
3.前端查看是否引入成功
cssrem配置
1.安装cssrem插件拓展
extensions搜索cssrem
2.修改cssrem拓展的默认配置
03-基础设置
- css初始化
- body 设置背景图 ，缩放为 100% ， 行高1.15
CSS初始化
- 引入easyless插件
- 在css目录下创建index.less
在css目录下创建index.less
执行ctrl+s 保存
会自动编译成index.css文件
- 在index.less进行css初始化
* { margin: 0; padding: 0; box-sizing: border-box; }
content-box 与 border-box
- 在index.html中引入css
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="js/flexible.js"></script> <link rel="stylesheet" href="css/index.css"> <title>Document</title> </head> <body> <div class="box">123</div> </body>
- 查看引入之后的效果，
body背景图
body 设置背景图 ，缩放为 100% ， 行高1.15
body { background: url(../images/bg.jpg) no-repeat top center; line-height: 1.15; }
04-header 布局
- 高度为100px
- 背景图，在容器内显示
- 缩放比例为 100%
- h1 标题部分 白色 38像素 居中显示 行高为 80像素
- 时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为：rgba(255, 255, 255, 0.7) 而文字大小为 20像素
html布局
<header> <h1>Echarts - dashboard</h1> <div class="showTime"></div> <script> var t = null; t = setTimeout(time, 1000);//開始运行 function time() { clearTimeout(t);//清除定时器 dt = new Date(); var y = dt.getFullYear(); var mt = dt.getMonth() + 1; var day = dt.getDate(); var h = dt.getHours();//获取时 var m = dt.getMinutes();//获取分 var s = dt.getSeconds();//获取秒 document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒"; t = setTimeout(time, 1000); //设定定时器，循环运行 } </script> </header>
CSS布局
header{ position: relative; height: 1.25rem; background: url(../images/head_bg.png) no-repeat top center; background-size: 100% 100%; h1 { font-size: .475rem; text-align: center; color: #fff; line-height: 1rem; } .showTime{ position: absolute; right:.375rem; top: 0; line-height: .9375rem; font-size: .25rem; color:rgba(255, 255, 255, 0.7) } }
05-mainbox 主体模块
- 需要一个上左右的10px 的内边距
- column 列容器，分三列，占比 3：5：3
html布局
<section class="mainbox"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> </section>
css样式：
.mainbox{ min-width: 1024px; max-width: 1920px; padding: .125rem .125rem 0; display: flex; background-color: red; .column { flex: 3; &:nth-child(2){ flex:5; margin: 0 .125rem .1875rem; overflow: hidden; } } }
效果如下：
06-公共面板模块 panel + bar
高度为 310px
1像素的 1px solid rgba(25, 186, 139, 0.17) 边框
有line.jpg 背景图片
padding为 上为 0 左右 15px 下为 40px
下外边距是 15px
利用panel 盒子 before 和after 制作上面两个角 大小为 10px 线条为 2px solid #02a6b5
新加一个盒子before 和after 制作下侧两个角 宽度高度为 10px
标题模块 h2 高度为 48px 文字颜色为白色 文字大小为 20px
图标内容模块 chart 高度 240px
以上可以作为panel公共样式部分
Html布局
<section class="mainbox"> <div class="column"> <div class="panel bar"> <h2>bar chart</h2> <div class="chart"> bar Echarts </div> <div class="panel-footer"></div> </div> </div> <div class="column">2</div> <div class="column">3</div> </section>
