160 lines
2.9 KiB
CSS
160 lines
2.9 KiB
CSS
.mainContentC{
|
|
float:left;
|
|
width:1051px;
|
|
margin:0 23px;
|
|
height:100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.mainContentC>div:nth-child(1){
|
|
width:1051px;
|
|
height:217px;
|
|
background-image: url("../image/center_bg_div1.png");
|
|
background-size:auto;
|
|
background-repeat:no-repeat;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content:space-evenly;
|
|
|
|
}
|
|
.mainContentC>div:nth-child(1)>div{
|
|
position: relative;
|
|
width:146px;
|
|
height:144px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mainContentC>div:nth-child(1)>div>div{
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
.mainContentC>div:nth-child(1)>div>div:first-child{
|
|
z-index:999;
|
|
text-align: center;
|
|
font-size: 26px;
|
|
margin-top: 42px;
|
|
}
|
|
.mainContentC>div:nth-child(1)>div>div:last-child{
|
|
background-image: url("../image/center_nav.png");
|
|
background-size:auto;
|
|
background-repeat:no-repeat;
|
|
animation: rotate 10s infinite linear;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
|
|
.mainContentC>div:nth-child(2){
|
|
width:1051px;
|
|
height:calc(100% - 420px);
|
|
position: relative;
|
|
top:-36px;
|
|
}
|
|
#marinContentMapContent>div,
|
|
#marinContentMapContent>div>div{
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
|
|
#systemIntroduction{
|
|
width:calc(100% - 60px);
|
|
margin:0px 30px;
|
|
}
|
|
|
|
#systemIntroduction>p{
|
|
font-size:16px;
|
|
line-height:30px;
|
|
text-indent: 2em;
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
#systemIntroduction>p:nth-child(1){
|
|
line-height:40px;
|
|
text-align: center;
|
|
font-size:26px;
|
|
text-indent: -5px;
|
|
color:#0D97A7;
|
|
margin:7px 0;
|
|
}
|
|
|
|
#alarmTrends{
|
|
height:200px;
|
|
}
|
|
#alarmTrendsTab{
|
|
height:100%;
|
|
}
|
|
#alarmTrendsTab>ul{
|
|
height:79px;
|
|
background-image: url("../image/center_bottom_bg.png");
|
|
background-size:auto;
|
|
background-repeat:no-repeat;
|
|
background-position: center;
|
|
}
|
|
#alarmTrendsTab>ul>li{
|
|
width:146px;
|
|
height:45px;
|
|
float:left;
|
|
font-size:18px;
|
|
position: relative;
|
|
z-index:1000;
|
|
line-height:45px;
|
|
top:28px;
|
|
color:#fff;
|
|
}
|
|
#alarmTrendsTab>ul>li:nth-child(1){
|
|
left:100px;
|
|
}
|
|
#alarmTrendsTab>ul>li:nth-child(2){
|
|
left:100px;
|
|
}
|
|
|
|
|
|
|
|
|
|
#alarmTrends .layui-tab-content{
|
|
padding:0;
|
|
width:calc(100% - 250px);
|
|
height:100%;
|
|
margin-left:120px;
|
|
height:calc(100% - 79px);
|
|
}
|
|
#alarmTrends .layui-tab-item {
|
|
height:100%;
|
|
}
|
|
|
|
#alarmTrends .layui-tab{
|
|
margin:0 !important;
|
|
}
|
|
#alarmTrends .layui-tab-title{
|
|
border:0;
|
|
}
|
|
#alarmTrends .layui-tab-title .layui-this:after{
|
|
border:0 !important
|
|
}
|
|
|
|
.videoTrendInfo{
|
|
width:100%;
|
|
height:100%;
|
|
display:flex;
|
|
/* justify-content:space-between; */
|
|
align-items:center;
|
|
}
|
|
.videoTrendInfo>div{
|
|
width:24%;
|
|
height:100%;
|
|
background: #000;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
border:1px solid #172c60;
|
|
margin-right:1%;
|
|
}
|
|
.videoTrendInfo>div>iframe{
|
|
width:100%;
|
|
height:100%;
|
|
} |