mainbox 主体模块
- 需要一个上左右的10px 的内边距
- column 列容器,分三列,占比 3:5:3
下面正式开始
<!-- 页面主体部分 -->
<section class="mainbox"></section>
再设置一下样式
// 页面主体盒子
.mainbox{
min-width: 1024px;
max-width: 1920px;
margin: 0 auto;
padding: .125rem .125rem 0;
}
此时column 列容器,分三列,占比 3:5:3
这时我们就要使用flex布局,flex布局是给父亲加display:flex
<!-- 页面主体部分 -->
<section class="mainbox">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
</section>
.mainbox{
display: flex;
min-width: 1024px;
max-width: 1920px;
margin: 0 auto;
padding: .125rem .125rem 0;
background-color: pink;
.column{
flex: 3;
}
&::nth-child(2){
flex:5;
}
}
但是实际结果并不是我们预想的那样
它并不是按照我们设置的中间占5分,原因是 &::nth-child(2)它的权值不够高
.column:nth-child(2){
flex:5;
}
这样一来,提高它的权重,结果
然后往里面分别放内容就行。
对于上面这三个盒子,我们可以写一个公共样式。
公共面板模块 panel
- 高度为 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
<section class="mainbox">
<div class="column">
<div class="panel"></div>
</div>
<div class="column">2</div>
<div class="column">3</div>
</section>
.panel{
height: 3.875rem;
position: relative;
height: 3.875rem;
border: 1px solid rgba(25, 186, 139, 0.17);
background: url(../images/line.png);
padding: 0 0.1875rem 0.5rem;
margin-bottom: 0.1875rem;
}
结果如下:
此时,这个边框的四个角是怎么做出来的呢?
利用panel 盒子 before 和after 制作上面两个角 ,新加一个盒子before 和after 制作下侧两个角
<section class="mainbox">
<div class="column">
<div class="panel">
<div class="panel-footer"></div>
</div>
</div>
<div class="column">2</div>
<div class="column">3</div>
</section>
.panel{
height: 3.875rem;
position: relative;
height: 3.875rem;
border: 1px solid rgba(25, 186, 139, 0.17);
background: url(../images/line.png);
padding: 0 0.1875rem 0.5rem;
margin-bottom: 0.1875rem;
&::before{
position: absolute;
top:0;
left: 0;
width: 10px;
height: 10px;
border-top: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
content: '';
}
&::after{
position: absolute;
top:0;
right: 0;
width: 10px;
height: 10px;
border-top: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
content: '';
}
.panel-footer{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
&::before{
position: absolute;
bottom:0;
left: 0;
width: 10px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-left: 2px solid #02a6b5;
content: '';
}
&::after{
position: absolute;
bottom:0;
right: 0;
width: 10px;
height: 10px;
border-bottom: 2px solid #02a6b5;
border-right: 2px solid #02a6b5;
content: '';
}
}
接下来我们来看一下第一个柱状图是怎么完成的
柱形图 bar 模块(布局)
-
标题模块 h2 高度为 48px 文字颜色为白色 文字大小为 20px
-
图标内容模块 chart 高度 240px
-
以上可以作为panel公共样式部分
<div class="panel bar">
<h2>柱形图-就业行业</h2>
<div class="chart">图表</div>
<div class="panel-footer"></div>
</div>
h2 {
height: 0.6rem;
line-height: 0.6rem;
text-align: center;
color: #fff;
font-size: 20px;
font-weight: 400;
}
.chart {
height: 3rem;
background-color: pink;
}
结果是:
这样的图形布局我们需要3份
<section 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">2</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>
</section>
结果为:
接下来,我们要做的就是往里面填充图表就行。