<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.out-of-service {
width: 100%;
height: 100vh;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.maintenance_img {
width: 570px;
}
.info {
color: #000;
}
.info_time {
margin-top: 80px;
height: 46px;
line-height: 46px;
font-size: 24px;
color: #333;
display: flex;
align-items: center;
}
.time-num {
display: inline-block;
/* width: 46px; */
padding: 0 6px;
line-height: 46px;
font-size: 26px;
margin: 0 6px;
text-align: center;
background-color: #222222;
color: #fff;
opacity: 0.7;
}
.info_main {
font-size: 32px;
font-weight: 600;
line-height: 56px;
margin: 24px 0;
}
.info_tips {
width: 350px;
font-size: 16px;
line-height: 26px;
}
</style>
<div class="out-of-service" id="app">
<img class="maintenance_img" src="css/1.gif">
<div class="info" id="info">
<p class="info_main">系统维护</p>
<p class="info_tips">为了更好地为您服务,我们正在更新我们的系统。抓紧!我们马上回来!</p>
<p class="info_tips"></p>
</div>
</div>