Skip to content

3
3DWeb
Commit 6623fd71 authored by lixiaoyi's avatar lixiaoyi
Browse files
Options

左侧图1

parent 2a686dfc
Show whitespace changes
Inline Side-by-side
Showing with 48 additions and 22 deletions
css/index.css
View file @ 6623fd71
...@@ -102,6 +102,41 @@ body { ...@@ -102,6 +102,41 @@ body {
.item_wrap { .item_wrap {
height: calc(100% - 32px); height: calc(100% - 32px);
line-height: 32px; line-height: 32px;
display: flex;
}
.item_wrap_content{
margin-top: 20px;
flex: 1;
height: 170px;
text-align: center;
flex-wrap: wrap;
}
.item_wrap_content>div{
width: 96px;
height: 100%;
background: url(../imgs/numerical.png) no-repeat;
background-size: 100%;
overflow: hidden;
}
.item_wrap_content:nth-child(2)>div{
margin-top: 34px;
}
.val{
margin-top: 33px;
margin-bottom: 5px;
font-size: 19px;
font-family: PingFang SC;
font-weight: bold;
color: #FB9931;
line-height: 1;
}
.name{
font-size: 12px;
font-family: PingFang SC;
font-weight: 500;
color: #FFFEFE;
line-height: 1;
} }
.item_img { .item_img {
......
index.html
View file @ 6623fd71
...@@ -23,48 +23,39 @@ ...@@ -23,48 +23,39 @@
<img class="item_img" src="./imgs/title@2x.png" alt=""> <img class="item_img" src="./imgs/title@2x.png" alt="">
<span class="item_title" >文本标题</span> <span class="item_title" >文本标题</span>
</div> </div>
<div class="item_wrap" ></div> <div class="item_wrap">
</div> <div class="item_wrap_content">
<div class="item">
<div class="item_header" >
<img class="item_img" src="./imgs/title@2x.png" alt="">
<span class="item_title" >文本标题</span>
</div>
<div class="item_wrap" ></div>
</div>
<div class="item">
<div class="item_header" >
<img class="item_img" src="./imgs/title@2x.png" alt="">
<span class="item_title" >文本标题</span>
</div>
<div class="item_wrap" >
<div> <div>
<div class="val" id="pro_eff">0</div> <div class="val" id="pro_eff">0</div>
<div class="name">生产效率</div> <div class="name">生产效率</div>
</div> </div>
</div>
<div class="item_wrap_content">
<div> <div>
<div class="val" id="per_eff">0</div> <div class="val" id="per_eff">0</div>
<div class="name">合格率</div> <div class="name">合格率</div>
</div> </div>
</div>
<div class="item_wrap_content">
<div> <div>
<div class="val" id="act_eff">0</div> <div class="val" id="act_eff">0</div>
<div class="name">稼动率</div> <div class="name">稼动率</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="item"> <div class="item">
<div class="item_header" > <div class="item_header" >
<img src="" alt=""> <img class="item_img" src="./imgs/title@2x.png" alt="">
<span>文本标题</span> <span class="item_title" >文本标题</span>
</div> </div>
<div class="item_wrap" id="act_torque"></div> <div class="item_wrap" id="act_torque"></div>
</div> </div>
<div class="item"> <div class="item">
<div class="item_header"> <div class="item_header" >
<img src="" alt=""> <img class="item_img" src="./imgs/title@2x.png" alt="">
<span>文本标题</span> <span class="item_title" >文本标题</span>
</div> </div>
<div class="item_wrap" id="torque"></div> <div class="item_wrap" id="torque"></div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment