<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<title>健康管理面板</title>
</head>
<body>
<div class="container">
<div class="bg1">
<h2>16 <span>| 24</span></h2>
<p>完成目标数</p>
</div>
<div class="bg1">
<h2><i class="fas fa-battery-three-quarters"></i></h2>
<p>呼吸</p>
</div>
<div class="bg2">
<h2><i class="fas fa-running"></i></h2>
<p>公里</p>
</div>
<div class="bg1">
<h2>36 °</h2>
<p>温度</p>
</div>
<div class="bg1">
<h2><i class="fas fa-bed"></i></h2>
<p>睡眠质量</p>
</div>
<div class="bg2">
<h2>98 <span>bpm</span></h2>
<p>心率</p>
</div>
<div class="bg1">
<h2>50 <span>kg</span></h2>
<p>体重</p>
</div>
<div class="bg1">
<h2>20 <span>%</span></h2>
<p>体脂率</p>
</div>
<div class="bg2">
<h2>108 <span>mgdl</span></h2>
<p>血糖</p>
</div>
<div class="bg2">
<h2>680 <span>kcal</span></h2>
<p>平均消耗</p>
</div>
<div class="bg2">
<h2><i class="fas fa-dumbbell"></i></h2>
<p>锻炼</p>
</div>
<div class="bg2">
<h2>85 <span>%</span></h2>
<p>身体含水量</p>
</div>
</div>
</body>
</html>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
background-color: #333;
color: #fff;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
h2{
font-size: 45px;
font-weight: 300;
margin: 10px;
}
h2 span{
font-size: 30px;
}
p{
font-size: 20px;
}
.container{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap:10px;
height: 100vh;
}
.container > div {
cursor: pointer;
background-size: cover;
background-attachment: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: all 0.5s ease-in;
}
.container > div:hover{
opacity: 0.7;
transform: scale(0.98);
}
.container > div:nth-of-type(1){
grid-column: 1 / 3;
}
.container > div:nth-of-type(6){
grid-column: 3 / 5;
}
.container > div:nth-of-type(9){
grid-column: 3 / 5;
}
.container > div:nth-of-type(10){
grid-column: 1 / 3;
}
.bg1{
background-image: url('./img/bg1.jpg');
}
.bg2{
background-image: url('./img/bg2.jpg');
color: #333;
}