.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%; }