中间布局之数字模块布局
一、需求
- 中间布局-数字模块
- 背景颜色rgba(101,132,226,0.1)
- 15个像素的内边距
- 中间布局-map地图模块
二、代码实现
找到中间模块,修改index.html
<selection class="mainbox">
<div class="column">
<div class="panel bar">
<h2>柱形图-就业行情</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div> <div class="panel line">
<h2>折线图-就业行业</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div> <div class="panel pie">
<h2>饼图-就业行业</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div> </div> <div class="column">
<!-- 数字模块-->
<div class="no">数字模块</div>
</div> <div class="column">
<div class="panel bar">
<h2>柱形图-就业行情</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div> <div class="panel line">
<h2>折线图-就业行业</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div> <div class="panel pie">
<h2>饼图-就业行业</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div> </div></selection>
在less文件里增加一下代码
.panel{
position: relative;
height: 3.875rem;
padding: 0 0.1875rem 0.5rem;
border: 1px solid rgba(25,186,139,0.17);
margin-bottom: 0.1875rem;
background: url(../images/line.png) rgba(255,255,255,0.03);
//制作左上角
&::before{
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
border-left: 2px solid #02a6b5;
border-top: 2px solid #02a6b5;
content: "";
}
//制作右上角
&::after{
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
border-right: 2px solid #02a6b5;
border-top: 2px solid #02a6b5;
content: "";
}
.panel-footer{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
&::before{
position: absolute;
left: 0;
bottom: 0;
width: 10px;
height: 10px;
border-left: 2px solid #02a6b5;
border-bottom: 2px solid #02a6b5;
content: "";
}
&::after{
position: absolute;
right: 0;
bottom: 0;
width: 10px;
height: 10px;
border-right: 2px solid #02a6b5;
border-bottom: 2px solid #02a6b5;
content: "";
}
}
h2 {
height: 0.6rem;
color: #fff;
line-height: 0.6rem;
text-align: center;
font-size: 0.25rem;
font-weight: 400;
}
.chart {
height: 3rem;
background-color: pink;
}
}
//数字模块
.no{
background: rgba(101,132,226,0.1);
padding: 0.1875rem;
}
需求2: 中间列column有个左右10px下15px的外边距
在index.less增加代码
.column{
flex: 5;
}
.column:nth-child(2){
flex: 5;
margin: 0 0.125rem 0.1875rem;
}
数字模块布局制作
一、需求
- 数字模块划分
- 数字（no-hd）
- 相关文字说明（no-bd）
二、代码实现
需求1：no 模块里面上下划分 上面是数字（no-hd) 下面 是 相关文字说明(no-bd)
index.html文件中找到中间模块修改代码
<div class="column">
<!-- 数字模块-->
<div class="no">
<div class="no-hd"></div>
<div class="no-bd"></div>
</div></div>
需求2：no-hd 数字模块 有一个边框 1px solid rgba(25, 186, 139, 0.17)
index.less 中添加数据模块，添加一个边框 1px solid rgba(25,186,139,0.17)
//数字模块
.no{
background: rgba(101,132,226,0.1);
padding: 0.1875rem;
}
.no-hd{
border: 1px solid rgba(25,186,139,0.17);
}
验证效果
需求3：no-hd 数字模块 里面分为两个小li 每个小li高度为 80px 文字大小为 70px 颜色为 #ffeb7b 字体是图标字体 electronicFont
index.html 文件中添加代码
<div class="column">
<!-- 数字模块-->
<div class="no">
<div class="no-hd">
<ul> <li>1693798</li>
<li>1329646</li>
</ul> </div> <div class="no-bd"></div>
</div></div>
在less文件中，找到no-hd模块，在no-hd模块增加以下代码
//数字模块
.no{
background: rgba(101,132,226,0.1);
padding: 0.1875rem;
}
.no-hd{
border: 1px solid rgba(25,186,139,0.17);
ul{
display: flex;
}
li{
flex: 1;
}
}
测试效果如下：
继续在less文件中，li中添加代码如下
//数字模块
.no{
background: rgba(101,132,226,0.1);
padding: 0.1875rem;
}
.no-hd{
border: 1px solid rgba(25,186,139,0.17);
ul{
display: flex;
}
li{
flex: 1;
line-height: 1.25rem; // 行高
font-size: 0.375rem; // 字体大小
color: #ffeb7b;
}
}
去掉小圆点，居中显示
//数字模块
.no{
background: rgba(101,132,226,0.1);
padding: 0.1875rem;
}
.no-hd{
border: 1px solid rgba(25,186,139,0.17);
ul{
display: flex;
}
li{
flex: 1;
line-height: 1.25rem; // 行高
font-size: 0.375rem; // 字体大小
color: #ffeb7b;
text-align: center;
}
li{
list-style: none;
}
}
效果如下：
更好为漂亮字体
- 在less文件中，上面进行声明字体
- 在less的li添加修改内容
//声明字体
@font-face{
font-family: electronicFont;
src: url("../font/DS-DIGIT.TTF");
}
// css初始化
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
//数字模块
.no{
background: rgba(101,132,226,0.1);
padding: 0.1875rem;
}
.no-hd{
border: 1px solid rgba(25,186,139,0.17);
ul{
display: flex;
}
li{
flex: 1;
line-height: 1.2rem; // 行高
font-size: 0.475rem; // 字体大小
color: #ffeb7b;
text-align: center;
font-family: electronicFont;
}
li{
list-style: none;
}
}
验证效果如下：
![![[Pasted image 20230217214852.png]]](https://i-blog.csdnimg.cn/blog_migrate/07719eabce361ede5b02ebea47b18de1.png)
需求4：no-hd 利用 after 和 before制作2个小角， 边框 2px solid #02a6b5 宽度为 30px 高度为 10px
左上角代码实现：
在index.less中找到no-hd，在no-hd下增加如下代码：
相对位置定位：position: relative;
在no-hd里继续增加代码：
//数字模块
.no{
background: rgba(101,132,226,0.1);
padding: 0.1875rem;
}
.no-hd{
position: relative;
border: 1px solid rgba(25,186,139,0.17);
ul{
display: flex;
}
li{
flex: 1;
line-height: 1.2rem; // 行高
font-size: 0.475rem; // 字体大小
color: #ffeb7b;
text-align: center;
font-family: electronicFont;
}
li{
list-style: none;
}
&::before{
position: absolute;
top: 0;
left: 0;
content: "";
width: 30px;
height: 10px;
border-top: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
}
}
验证效果
在less中修改代码
//数字模块
.no{
background: rgba(101,132,226,0.1);
padding: 0.1875rem;
}
.no-hd{
position: relative;
border: 1px solid rgba(25,186,139,0.17);
ul{
display: flex;
}
li{
flex: 1;
line-height: 1.2rem; // 行高
font-size: 0.475rem; // 字体大小
color: #ffeb7b;
text-align: center;
font-family: electronicFont;
}
li{
list-style: none;
}
&::before{
position: absolute;
top: 0;
left: 0;
content: "";
width: 30px;
height: 10px;
border-top: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
}
&::after{
position: absolute;
bottom: 0;
right: 0;
content: "";
width: 30px;
height: 10px;
border-right: 2px solid #02a6b5;
border-bottom: 2px solid #02a6b5;
}
}
效果验证
需求5：小竖线 给 第一个小li after 就可以 2px宽 背景颜色为 rgba(255, 255, 255, 0.2); 高度 50% top 25% 即可。
index.less
/数字模块
.no{
background: rgba(101,132,226,0.1);
padding: 0.1875rem;
}
.no-hd{
position: relative;
border: 1px solid rgba(25,186,139,0.17);
ul{
display: flex;
}
li{
position: relative;
flex: 1;
line-height: 1.2rem; // 行高
font-size: 0.475rem; // 字体大小
color: #ffeb7b;
text-align: center;
font-family: electronicFont;
&::after{
content: "";
position: absolute;
top: 25%;
right: 0;
height: 50%;
width: 2px;
background: rgba(255,255,255,0.2);
}
}
li{
list-style: none;
}
&::before{
position: absolute;
top: 0;
left: 0;
content: "";
width: 30px;
height: 10px;
border-top: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
}
&::after{
position: absolute;
bottom: 0;
right: 0;
content: "";
width: 30px;
height: 10px;
border-right: 2px solid #02a6b5;
border-bottom: 2px solid #02a6b5;
}
}
效果如下
数据模块说明布局
no-bd布局
一、需求
no-bd 里面也有两个小li 高度为 40px 文字颜色为 rgba(255, 255, 255, 0.7) 文字大小为 18px 上内边距为 10px
二、代码实现
在index.html文件中修改no-bd代码
<div class="column">
<!-- 数字模块-->
<div class="no">
<div class="no-hd">
<ul> <li>1693798</li>
<li>1329646</li>
</ul> </div> <div class="no-bd">
<ul> <li>总职位需求人数</li>
<li>当前有效需求人数</li>
</ul> </div> </div></div>
效果如下
在less文件中，no-hd下（注意no-bd和no-hd是兄弟关系，故是平等关系），增加如下代码：
//数字模块
.no{
background: rgba(101,132,226,0.1);
padding: 0.1875rem;
}
.no-hd{
position: relative;
border: 1px solid rgba(25,186,139,0.17);
ul{
display: flex;
}
li{
position: relative;
flex: 1;
line-height: 1.2rem; // 行高
font-size: 0.475rem; // 字体大小
color: #ffeb7b;
text-align: center;
font-family: electronicFont;
&::after{
content: "";
position: absolute;
top: 25%;
right: 0;
height: 50%;
width: 2px;
background: rgba(255,255,255,0.2);
}
}
li{
list-style: none;
}
&::before{
position: absolute;
top: 0;
left: 0;
content: "";
width: 30px;
height: 10px;
border-top: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
}
&::after{
position: absolute;
bottom: 0;
right: 0;
content: "";
width: 30px;
height: 10px;
border-right: 2px solid #02a6b5;
border-bottom: 2px solid #02a6b5;
}
}
.no-bd{
ul {
display: flex;
li {
flex: 1;
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-size: 0.225rem;
height: 0.5rem;
line-height: 0.5rem;
padding-top: 0.125rem;
}
li{
list-style: none;
}
}
}
效果验证如下
可视化大屏项目参考链接
【可视化大屏开发】1.基础开发环境准备_pblh123的博客-CSDN博客
【可视化大屏开发】2.基础项目配置及大屏布局_pblh123的博客-CSDN博客
【可视化大屏开发】3.大屏配置之数字模块配置_pblh123的博客-CSDN博客
【可视化大屏开发】4.大屏配置之地球模块配置_pblh123的博客-CSDN博客
【可视化大屏开发】5.大屏配置之Echarts入门学习_pblh123的博客-CSDN博客
【可视化大屏开发】6.可视化大屏配置之静态图柱形图1定制_pblh123的博客-CSDN博客
【可视化大屏开发】7.可视化大屏配置之静态图条形图定制_pblh123的博客-CSDN博客
【可视化大屏开发】8. 可视化大屏配置之静态图折线图1定制_pblh123的博客-CSDN博客
【可视化大屏开发】9. 可视化大屏配置之静态图折线图2定制_pblh123的博客-CSDN博客
【可视化大屏开发】10. 可视化大屏配置之静态图饼图1定制_pblh123的博客-CSDN博客
【可视化大屏开发】11. 可视化大屏配置之静态图饼图2定制_pblh123的博客-CSDN博客
【可视化大屏开发】12. 可视化大屏配置之静态图中国地图定制_pblh123的博客-CSDN博客
【可视化大屏开发】13. 可视化大屏配置之打通前后端更新静态图数据_pblh123的博客-CSDN博客
【可视化大屏开发】14. Maven打包可视化大屏项目-发布jar包_pblh123的博客-CSDN博客
【可视化大屏开发】15.可视化大屏项目-网络访问静态数据无法更新问题修复_pblh123的博客-CSDN博客
【可视化大屏开发】16. 可视化大屏项目共性优化问题_pblh123的博客-CSDN博客
17.可视化大屏配置之代码整理资源-CSDN文库
可视化大屏项目动态数据样例资源-CSDN文库
扫一扫
3241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
