83 lines
1.2 KiB
CSS
83 lines
1.2 KiB
CSS
|
html,
|
||
|
|
body {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
body{
|
||
|
|
background-image: url(../img/bg.png);
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title{
|
||
|
|
width: 99.8%;
|
||
|
|
height: 9%;
|
||
|
|
margin-bottom: 1.8%;
|
||
|
|
}
|
||
|
|
.title>div:first-child{
|
||
|
|
height: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.left{
|
||
|
|
width: 34.5%;
|
||
|
|
height: 54%;
|
||
|
|
float: left;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
}
|
||
|
|
.left>div{
|
||
|
|
float: left;
|
||
|
|
color: #006F78;
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: bold;
|
||
|
|
align-self: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right{
|
||
|
|
width: 34.5%;
|
||
|
|
height: 54%;
|
||
|
|
float: right;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
}
|
||
|
|
.right>div{
|
||
|
|
float: left;
|
||
|
|
color: #006F78;
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: bold;
|
||
|
|
align-self: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.content{
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
width: 99.8%;
|
||
|
|
height: 86%;
|
||
|
|
}
|
||
|
|
iframe{
|
||
|
|
width: 95%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#alarm{
|
||
|
|
width: 2%;
|
||
|
|
height: 4%;
|
||
|
|
position: absolute;
|
||
|
|
right: 1%;
|
||
|
|
bottom: 2%;
|
||
|
|
background-image: url(../img/index/more.png);
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
#alarm:hover{
|
||
|
|
background-image: url(../img/index/more_1.png);
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|