* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } *, body { padding: 0px; margin: 0px; font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif; } body { background: #000d4a url(../images/bg.jpg) center top; } /* div { border: 1px solid red; } */ .dHeader { width: 100%; height: 4.5rem; background: url(../images/head_bg.png) no-repeat center center; background-size: 100% 100%; z-index: 100; display: flex; justify-content: center; align-items: center; } .dHeader h1 { margin-top: 5px; color: #fff; font-size: 2rem; } .dBody { width: 100%; height: 60.1rem; display: flex; } .bodyLeft { width: 30%; height: 100%; padding: 20px 10px 20px 20px; } .bodyMiddle { width: 42%; height: 100%; padding: 20px 10px 20px 10px; } .bodyRight { width: 28%; height: 100%; padding: 20px 20px 20px 10px; } .box { width: 100%; border: 1px dotted #237BBC; position: relative; margin-bottom: 5%; } .box .title { display: flex; justify-content: center; } .titleTxt { width: 153px; height: 29px; border: 1px solid #237BBC; color: #3CD5FF; margin-top: -14px; background: #031937; display: flex; justify-content: center; align-items: center; font-size: 14px; } .echarts { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .echartsMiddle { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; /* padding: 10px; */ } .middleUp { width: 100%; height: 20%; color: #3DD4FF; } .middleCenter { width: 100%; height: 40%; color: #3DD4FF; } .centerTitle { width: 100%; margin-left: 20px; } .centerContent { width: 100%; height: 91%; } .centerNum { width: 100%; height: 98%; display: flex; justify-content: space-around; padding: 25px 20px 0 20px; } .centerImg{ position: relative; } .zlNum { position: absolute; left: 32px; top: 18px; font-size: 32px; } .zlLine { position: absolute; height: 1px; width: 32px; left: 34px; top: 54px; background: #237bbc; } .zlText { position: absolute; left: 25px; top: 58px; font-size: 12px; } .imgNum{ position: absolute; left: 26px; top: 25px; font-size: 32px; } .imgText { position: absolute; left: 20px; top: 73px; font-size: 12px; } .numBox { width: 100px; height: 70px; border: 1px solid #3CD5FF; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .circleNum { font-weight: bold; font-size: 22px; } .circleLine { height: 1px; width: 40px; border-top: 1px solid #237bbc; margin: 2px 0 5px 0; } .numBox .num { font-weight: bold; font-size: 22px; } .circleTxt { /* color: #fff; */ font-size: 12px; } .numBox .txt { color: #fff; font-size: 12px; } .numColor0 { color: #ff6b81; } .numColor1 { color: #0984e3; } .numColor2 { color: #6c5ce7; } .numColor3 { color: #d63031; } .numColor4 { color: #00b894; } .numColor5 { color: #fdcb6e; } .numColor6 { color: #fff; } .middleDown { width: 100%; height: 40%; color: #3DD4FF; } .boxBorder { position: absolute; width: 20px; height: 20px; } .boxBorder1 { top: -3px; left: -3px; border-left: 3px solid #3CD5FF; border-top: 3px solid #3CD5FF; } .boxBorder2 { top: -3px; right: -3px; border-right: 3px solid #3CD5FF; border-top: 3px solid #3CD5FF; } .boxBorder3 { bottom: -3px; left: -3px; border-bottom: 3px solid #3CD5FF; border-left: 3px solid #3CD5FF; } .boxBorder4 { bottom: -3px; right: -3px; border-right: 3px solid #3CD5FF; border-bottom: 3px solid #3CD5FF; } /* ===================================== */ .tableSelect { width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; padding: 0 20px; margin-top: 10px; } .tabBottomLine { width: 91%; border-bottom: 1px solid #17468D; margin: 0 20px; } ul, li { margin: 0; padding: 0; list-style: none; } .tab-tilte { width: 100%; color: #3CD5FF; font-size: 12px; } .tab-tilte li { float: left; width: 16.6%; text-align: center; cursor: pointer; padding: 5px 0; } .tab-tilte .active { background-color: #2E61A2; border-radius: 5px; } .scroll { width: 100%; height: 90%; display: inline-block; overflow: hidden; position: relative; } .scroll>div:last-child { margin-top: 15px; height: 94%; overflow: hidden; } .scroll .item { display: flex; align-items: center; justify-content: space-between; padding: 15px 10px 0 10px; /* height: 106px; */ } .orgItems { height: 100px; width: 100%; border: 1px solid #2B99D1; margin: 0 10px 0 10px; display: block; border-radius: 0 20px 0 20px; } .orgItem{ position: relative; } .orgItemTitle { height: 30px; display: flex; align-items: center; padding-left: 21px; } .orgTitleNum { border: 1px solid #F59A23; display: flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-right: 10px; color: #F59A23; font-size: 12px; background: #393D43; } .orgTitleTxt { color: #3CD5FF; font-size: 12px; } .orgItemTypeList { display: flex; flex-wrap: wrap; width: 100%; height: 63px; /* margin: 6px 0 0 21px; */ margin-left: 21px; font-size: 12px; } .typeListItems { display: flex; align-items: center; width: 125px; } .typeItemTxt { margin-left: 10px; color: #AAAAAA; } .typeItemNum { font-size: 14px; color: #FFF; margin-left: 10px; } .out-rect { display: flex; align-items: center; justify-content: center; width: 91%; height: 106px; padding: 1px; background: linear-gradient(-45deg, transparent 0px, #2B99D1 0) bottom right, linear-gradient(45deg, transparent 8px, #2B99D1 0) bottom left, linear-gradient(135deg, transparent 0px, #2B99D1 0) top left, linear-gradient(-135deg, transparent 8px, #2B99D1 0) top right; background-size: 50% 50%; background-repeat: no-repeat; } .in-rect { width: 100%; height: 100%; background: linear-gradient(-145deg, transparent 0px, #000B3B 0) bottom right, linear-gradient(45deg, transparent 8px, #000B3B 0) bottom left, linear-gradient(135deg, transparent 0px, #000B3B 0) top left, linear-gradient(-135deg, transparent 8px, #000B3B 0) top right; background-size: 50% 50%; background-repeat: no-repeat; position: relative; } .tableTitle { display: flex; margin: 10px 0 0 20px; font-size: 12px; } .tableTitle .serialNum { border: 1px solid #F59A23; width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; color: #F59A23; background: #393D43; border-radius: 3px; } .tableTitle .schoolName { margin-left: 10px; color: #3CD5FF; } .tableContent { color: #fff; display: flex; flex-wrap: wrap; width: 352px; height: 70px; margin: 6px 0 0 21px; font-size: 12px; } .tableContent .item { display: flex; width: 117px; height: 35px; align-items: center; } .tableContent .item .typeName { color: #AAAAAA; } .tableContent .item .num { font-size: 14px; color: #FFF; } .ml { margin-left: 10px; } .dot { width: 14px; height: 14px; border-radius: 50%; } .xmycSelect { width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; padding: 0 20px; margin-top: 10px; } .xmyc-tab-tilte { width: 100%; color: #3CD5FF; font-size: 12px; } .xmyc-tab-tilte li { float: left; width: 36.6%; text-align: center; cursor: pointer; padding: 5px 0; margin-right: 14px; } .xmyc-tab-tilte .active { background-color: #2E61A2; border-radius: 5px; } .xmycContent { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0 20px; } .xmycContent .xmycItem { width: 48%; height: 50px; border: 1px solid #2B99D1; margin: 15px 0 5px 0; border-radius: 0 20px 0 0; display: flex; align-items: center; justify-content: space-between; padding: 0 20px 0 10px; } .xmycContent .xmycItem .itemImg { border: 1px solid #2B99D1; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50% } .xmycContent .xmycItem .itemTxt { font-size: 14px; color: #AAAAAA; } .xmycContent .xmycItem .itemNum { color: #fdcb6e; } .dotColor0 { border: 3px solid #0085FF; } .dotColor1 { border: 3px solid #F8B551; } .dotColor2 { border: 3px solid #B769FF; } .dotColor3 { border: 3px solid #32B16C; } .dotColor4 { border: 3px solid #BF3A68; } .circle { width: 66px; height: 66px; border-radius: 50%; border: 1px solid #195A97; color: #3CD5FF; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #0B2F67; position: absolute; top: 18%; right: 18px; font-size: 14px; } .circle1 { border: 1px solid #0984e3; width: 100px; height: 100px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .circle2 { background-image: url('../images/u141.svg'); background-repeat: no-repeat; background-size: 100%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .circle3 { border: 1px dashed #0984e3; width: 85px; height: 85px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .circle4 { border: 1px solid #0984e3; width: 75px; height: 75px; border-radius: 50%; background: #237cbc5e; display: flex; flex-direction: column; align-items: center; justify-content: center; } .circleContent { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 7px; }