console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
box-sizing: border-box;
}
body{
width: 750px;
background: #fff;
font-family: PingFangSC-Regular, PingFang SC;
}
.theme{
min-height: 1800px;
border: 1px solid #333333;
}
.name{
font-size: 46px;
font-weight:600;
color: #333333;
line-height: 75px;
padding-left: 12px;
padding-bottom: 25px;
}
.order{
font-size: 26px;
font-weight: 400;
color: #999999;
line-height: 50px;
}
.position{
display: flex;
justify-content:space-between;
padding-bottom: 26px;
border-bottom: 1px solid #E4E4E4;
padding-top: 28px;
}
.addressOne{
font-size: 32px;
font-weight: 400;
color: #333333;
line-height: 50px;
}
.addressTwo{
font-size: 32px;
font-weight: 400;
color: #999999;
line-height: 50px;
display: flex;
}
.info-card{
width: 690px;
margin: auto;
height: 400px;
background: #f9f9f9;
border-radius: 16px;
margin-top: 50px;
padding: 26px 16px 30px;
}
.show{
font-size: 36px;
font-weight: 600;
color: #333333;
line-height: 50px;
margin-left: 30px;
margin-top: 40px;
}
.photo{
margin-top: 20px;
}
.box{
display: flex;
margin-left: 30px;
flex-wrap: wrap;
}
.present{
width: 151px;
height: 151px;
background: #D8D8D8;
margin-top: 31px;
margin-right: 22px;
display: flex;
align-items: center;
justify-content: center;
}
.remarks{
margin-top: 93px;
}
.remind{
font-size: 32px;
font-weight: 400;
line-height: 45px;
}
.submit{
width: 480px;
height: 88px;
margin: 167px auto 116px;
background: linear-gradient(to right,#5AA6FF,#0AC7FF);
border-radius:20px;
}
.report{
color: #fff;
padding:22px 208px;
}
</style>
</head>
<body>
<div class="theme">
<div class="info-card">
<div class="name">
天文望远镜
</div>
<div class="order">
工单号：KJG-IH9NWQ
</div>
<div class="position">
<div class="addressOne">
展品位置：
</div>
<div class="addressTwo">
三层4展区
</div>
</div>
<div class="position">
<div class="addressOne">
派单时间：
</div>
<div class="addressTwo">
2020/08/26 12:25:36
</div>
</div>
</div>
<div class="show">
<div class="photo">
展项照片
</div>
</div>
<div class="box">
<div class="present"></div>
<div class="present"></div>
<div class="present"></div>
<div class="present"></div>
<div class="present"></div>
<div class="present"></div>
</div>
<div class="show">展项视频</div>
<div class="box">
<div class="present">
<img src="./play.png" class="play-icon" alt="">
</div>
<div class="present"></div>
</div>
<div class="show">展项音频</div>
<div class="box">
<div class="present">
<img src="./audio.png" class="play-icon" alt="">
</div>
</div>
<div class="remarks show" >
维修备注
</div>
<div class="remind show">
无法正常开机，电源线已坏，速来维修
</div>
<div class="submit">
<div class="report remind">上报</div>
</div>
</div>
</body>
</html>