.grid-wrapper { color: #ffffff; padding: 23px 16px 16px; height: calc(100% - 80px); display: grid; grid-gap: 8px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); grid-template-areas: "left1 center center right" "left2 center center right" "bottom1 bottom1 bottom1 bottom1"; } .grid-wrapper > div .wrapper { border-radius: 6px; height: 100%; background-color: #001346; overflow: hidden; } .grid-wrapper .wrapper-content{ position:relative; height:calc(100% - 40px); } .grid-wrapper .wide-border{ height:calc(100% + 1px); width:100%; position:absolute; top:-3px; left:0px; border:1px solid #53BAFD; } .wide-border-line1{ position:absolute; left:0px; top:-26px; background-color:#0f215c } .wide-border-line2{ position:absolute; right:0px; top:-26px; background-color:#0f215c } .wide-border-line3{ position:absolute; left:0px; bottom:0; background-color:#001346; } .wide-border-line4{ position:absolute; right:0px; bottom:0; background-color:#001346; } .grid-wrapper .chart-tab-t{ padding-left: 82px; height: 40px; line-height: 40px; background-color: #0f215c; } .grid-wrapper .chart-tab-t .chart-tab-title{ font-size: 1em; position: relative; } .grid-wrapper .chart-tab-t .chart-tab-title:before{ content:''; width:14px; height:14px; border-radius:50%; position:absolute; left:-20px; top:50%; background-color:#fff; transform:translateY(-50%); -ms-transform:translateY(-50%); /* IE 9 */ -moz-transform:translateY(-50%); /* Firefox */ -webkit-transform:translateY(-50%); /* Safari 和 Chrome */ -o-transform:translateY(-50%); /* Opera */ } .grid-wrapper .left1 { grid-area: left1; } #chart-stztzfb,#chart-styyfx{ height:100%; } .grid-wrapper .left2 { grid-area: left2; } .grid-wrapper .center { grid-area: center; } .grid-wrapper .center .line1 { font-size: 1.4em; height: 66px; display: flex; align-items: center; } .grid-wrapper .center .line1 .division { flex: 1; height: 2px; background-color:#528DFF; } .grid-wrapper .center .line1 .cont { margin: 1px 20px; } .line1 .video-controller{ position:relative; display:flex; margin: 1px 20px; } .line1 .video-controller .watch-videos{ margin-right:30px; } .line1 .video-controller .watch-videos,.line1 .video-controller .change-direction{ flex:1; } .line1 .video-controller .choose-videoBox{ width:446px; position:absolute; top:50px; left:50%; transform:translateX(-50%); -ms-transform:translateX(-50%); /* IE 9 */ -moz-transform:translateX(-50%); /* Firefox */ -webkit-transform:translateX(-50%); /* Safari 和 Chrome */ -o-transform:translateX(-50%); /* Opera */ z-index:100; background-color: #001346; border-radius:6px; box-shadow:0px -5px 5px 0px rgba(255,255,255,0.1),-5px 0px 5px 0px rgba(255,255,255,0.1),5px 0px 5px 0px rgba(255,255,255,0.1),0px 5px 5px 0px rgba(255,255,255,0.1); } .choose-videoBox .tab-videocontrol{ width:100%; height:100%; } .tab-videocontrol .control-box1{ display:none; } .control-box1 .tab-video-head { height:40px; display: flex; align-items: center; justify-content:center; font-size:0.8em; color:#53BAFD; position:relative; } .control-box1 .tab-video-body{ height:240px; padding:10px 50px; } .control-box1 .tab-video-foot{ } .tab-video-foot .tab-foot-top{ height:40px; display: flex; align-items: center; justify-content:center; font-size:0.8em; color:#53BAFD; position:relative; } .tab-video-foot .tab-videoes{ height:140px; padding:10px 50px; overflow:hidden; } .tab-videoes .video-item{ height: 31px; display: flex; align-items: center; flex-wrap: nowrap; padding: 0 10px; color: #fff; border-bottom:1px dashed #a4cfe5; } .video-date,.video-time{ font-size:0.6em; } .video-item i{ margin-right:15px; } .video-item .time-crossline{ margin:0 15px; } .tab-video-body .tab-video-content{ display:flex; align-items: center; margin-top:20px; } .tab-video-content .tab-type{ flex:1; text-align:center; font-size:0.8em; } .tab-video-content .select{ flex:2; height:32px; position: relative; vertical-align: middle; padding: 2px; overflow: hidden; background-color: #001346; color: #fff; text-shadow: none; border-radius: 4px; transition: box-shadow 0.25s ease; border:1px solid #0b52e0; z-index: 2; display:flex; align-items: center; } .tab-video-content .datetimePicker{ flex:2; height:32px; border-radius: 4px; transition: box-shadow 0.25s ease; font-size: 0; white-space: nowrap; display:flex; justify-content: space-between; } .tab-video-content .video-find{ flex:2; } .tab-video-content .video-find #sub-btn{ width:103px; height:30px; font-size:0.7em; text-align:center; line-height:30px; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; background-color:#ea8c29; color:#fff; cursor:pointer; } input[type="text"]{ display: inline-block; height: 20px; padding: 4px 6px; margin-bottom: 10px; font-size: 14px; line-height: 20px; color: #555555; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; vertical-align: middle; background-color: #ffffff; border: 1px solid #cccccc; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border linear .2s, box-shadow linear .2s; -moz-transition: border linear .2s, box-shadow linear .2s; -o-transition: border linear .2s, box-shadow linear .2s; transition: border linear .2s, box-shadow linear .2s; } .input-append input{ position: relative; margin-bottom: 0; vertical-align: top; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #eeeeee; outline:none; border:1px solid #0b52e0; height: 32px; color:#fff; background-color: #001346; } input[readonly]{ cursor: not-allowed; } .input-append .add-on { white-space: nowrap; vertical-align: middle; display:flex; align-items: center; } [class^="icon-"], [class*=" icon-"]{ display: inline-block; background-image: url(../img/glyphicons-halflings-white.png); background-repeat: no-repeat; cursor: pointer; width: 14px; height: 14px; } .icon-remove { background-position: -312px 0; } .icon-th { background-position: -240px 0; } table { max-width: 100%; background-color: transparent; border-collapse: collapse; border-spacing: 0; } .table-condensed th i{ background-image: url(../img/glyphicons-halflings.png); } .table-condensed th, .table-condensed td { padding: 4px 5px; } .icon-arrow-left { background-position: -240px -96px; } .icon-arrow-right { background-position: -264px -96px; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; list-style: none; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,0.2); *border-right-width: 2px; *border-bottom-width: 2px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2); -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2); box-shadow: 0 5px 10px rgba(0,0,0,0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .tab-video-content .select:before { content: ""; position: absolute; width: 0; height: 0; border: 6px solid transparent; border-top-color: #fff; top: 12px; right: 4px; cursor: pointer; z-index: -2; } .tab-video-content .select select { cursor: pointer; padding: 3px 0px; width: 100%; border: none; background: transparent; background-image: none; -webkit-appearance: none; -moz-appearance: none; outline:none; text-align:center; color: #fff; padding-left:10px; font-size:0.7em; } .tab-video-content .select option{ background-color:#001346; } .tab-video-head:before,.tab-video-foot .tab-foot-top:before{ content: ''; position: absolute; bottom: 0px; left: 5%; height: 2px; width: 90%; background: linear-gradient(to right, rgba(11,82,224,0), #0b52e0, rgba(11,82,224,0)); } .watch-videos img,.change-direction img{ width:30px; cursor:pointer; } .grid-wrapper .line2 .change-pc{ width:100%; height:50px; border: 2.5px solid #53BAFD; position: relative; } .change-pc .zhe-block{ width: 15px; height: 15px; border-bottom: 3px solid #53BAFD; position: absolute; background-color: #001346; } .change-pc .item-info-title{ height: 100%; display: flex; align-items: center; justify-content: center; cursor:pointer; } .change-pc .item-info-title .title{ font-size: 1.6em; padding-right:15px; margin-right:15px; border-right:2px solid #53BAFD; color: #53BAFD; font-weight: normal; } .change-pc .item-info-title .click-check{ font-size:1.2em; } .change-pc .arrow-right{ height: 16px; vertical-align: text-top; width: 20px; cursor: pointer; position: relative; margin-left:15px; } .change-pc .arrow-right:before{ content: ''; left: 3px; border-left: 10px #53BAFD solid; } .arrow-right:before, .arrow-right:after { width: 0; height: 0; display: block; position: absolute; left: 0; top: 0; border-top: 10px transparent dashed; border-right: 10px transparent dashed; border-bottom: 10px transparent dashed; border-left: 10px #53BAFD solid; overflow: hidden; } .change-pc .arrow-right:after{ content: ''; border-left: 10px #001346 solid; } .for-click-show{ position:relative; width:30%; } .for-click-show .choosebox{ display:none; width:100%; padding:15px; position:absolute; top:46px; right:0; border:1px solid #3bb3e0; background-color:#001346; z-index:99; } .for-click-show .choosebox .box-btns{ display: flex; flex:1; justify-content:space-around; } .a_demo_two { background-color:#3bb3e0; padding:10px 15px; position:relative; font-family: 'Open Sans', sans-serif; font-size:12px; text-decoration:none; color:#fff; background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(44,160,202)), color-stop(1, rgb(62,184,229)) ); -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 4px 0px #156785; -moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 4px 0px #156785; -o-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 4px 0px #156785; box-shadow: inset 0px 1px 0px #7fd2f1, 0px 4px 0px #156785; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } .a_demo_two::before { background-color:#072239; content:""; display:block; position:absolute; width:100%; height:100%; padding-left:2px; padding-right:2px; padding-bottom:4px; left:-2px; top:5px; z-index:-1; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .a_demo_two:active { color:#156785; text-shadow: 0px 1px 1px rgba(255,255,255,0.3); background:rgb(44,160,202); -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785; -moz-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785; -o-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785; box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785; top:3px; } .a_demo_two:active::before { top:-2px; } .switch-bt-active{ color: #156785; text-shadow: 0px 1px 1px rgba(255,255,255,0.3); background: rgb(44,160,202); -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785; -moz-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785; -o-box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785; box-shadow: inset 0px 1px 0px #7fd2f1, inset 0px -1px 0px #156785; top:3px; } .choosebox .tab-areas{ height:130px; padding-top:20px; } #tab-area1,#tab-area2{ height:100%; } #tab-area1 .pc-nums{ height:100%; overflow:hidden; background-color:#fff; } #tab-area1 .pc-nums .item{ overflow:hidden; height: 28px; line-height: 28px; text-overflow:ellipsis; white-space: nowrap; color:#333; padding-left:5px; cursor:pointer; } #tab-area1 .pc-nums .item:hover{ background-color:#9de5f5; color:#fff } .tabshow{ display:none !important; } #tab-area2{ display: flex; flex:1; justify-content:space-around; } #tab-area2 .select{ display: inline-block; width: 45%; height:28px; position: relative; vertical-align: middle; padding: 2px; overflow: hidden; background-color: #fff; color: #555; text-shadow: none; border-radius: 4px; transition: box-shadow 0.25s ease; z-index: 2; } #tab-area2 .select-list{ width: 45%; height:100%; overflow:hidden; background-color:#fff; } #tab-area2 .select-list .item{ overflow:hidden; height: 28px; line-height: 28px; text-overflow:ellipsis; white-space: nowrap; color:#333; padding-left:5px; cursor:pointer; } #tab-area2 .select-list .item:hover{ background-color:#9de5f5; color:#fff } #tab-area2 .select:hover { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); } #tab-area2 .select:before { content: ""; position: absolute; width: 0; height: 0; border: 3px solid transparent; border-top-color: #ccc; top: 12px; right: 4px; cursor: pointer; z-index: -2; } #tab-area2 .select select { cursor: pointer; padding: 3px 0px; width: 100%; border: none; background: transparent; background-image: none; -webkit-appearance: none; -moz-appearance: none; } #tab-area2 .select select:focus { outline: none; } .center .line3{ height:calc(100% - 66px); display:flex; align-items:center; justify-content:center; } .zhe-block-rotate1{ transform: rotate(45deg); top: -8px; right: -8px; } .zhe-block-rotate2{ transform: rotate(315deg); left: -8px; top: -8px; } .zhe-block-rotate3{ transform: rotate(225deg); left: -8px; bottom: -8px; } .zhe-block-rotate4{ transform: rotate(135deg); bottom: -8px; right: -8px; } .grid-wrapper .right { grid-area: right; } .wrapper .msg-tab-head{ background-color:#0E1E51; width:100%; padding:10px 40px; height:100px; color:#898a90; display: flex; flex:1; justify-content:space-around; flex-wrap:nowrap; } .line3 .msg-tab-body{ height:100%; width:50%; } .line3 .msg-detail{ height:100%; width:50%; } .msg-list-content{ } #msg-list-content{ overflow-y:scroll; } #msg-list-content::-webkit-scrollbar { width: 8px; } #msg-list-content::-webkit-scrollbar-track { background-color:transparent; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius:2em; } #msg-list-content::-webkit-scrollbar-thumb { background-color:#ccc; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius:2em; } .msg-tab-body .msg-list-content.active{ display:block; } .msg-tab-body .msg-tab-list{ height:80px; position:relative; display: flex; align-items: center; justify-content: space-around; flex-wrap:nowrap; margin:0 40px; padding:10px; color:#a4cfe5; cursor:pointer; } .msg-tab-body .msg-tab-list:hover{ background-color: #0f215c; } .msg-tab-list.active{ background-color: #0f215c; } .msg-tab-body .msg-tab-list .man-dothis{ flex:1; } .msg-tab-body .msg-tab-list .man-dothis img{ width:50px; height:50px; border-radius:50%; } .msg-tab-body .msg-tab-list .this-content{ flex:4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height:1.2em; } .msg-tab-body .msg-tab-list .this-content .finish-time{ margin-right:15px; } .msg-tab-body .msg-tab-list:before{ content: ''; position: absolute; bottom: 0px; left: 10%; height: 2px; width: 80%; background: linear-gradient(to right, rgba(11,82,224,0), #0b52e0, rgba(11,82,224,0)); } .msg-tab-head .msg-tab1{ display: flex; flex-direction: column; cursor:pointer; } .msg-tab-head .msg-tab1 img{ width:50px; } .msg-tab-head .msg-tab1 span{ line-height:30px; text-align:center; font-size:1.2em; } .msg-tab-head .msg-tab1.active span{ color:#fff; } .jk-img{ height:50%; text-align:center; } .jk-img img{ height:100%; } .jk-info-list{ padding:20px 40px; } .jk-info-item{ color:#0b52e0; font-size:20px; margin:15px; } .grid-wrapper .bottom1 { grid-area: bottom1; } .grid-wrapper .wrapper .tab-t { padding-left: 102px; height: 40px; line-height: 40px; background-color: #0f215c; } .grid-wrapper .tab-t>.tab-title { font-size: 1.5em; position: relative; } .grid-wrapper .tab-t>.tab-title:before { content: ""; position: absolute; left: -1.5em; top: 50%; width: 0.5em; height: 0.5em; border: 2px solid #6DDFE9; transform: rotate(45deg) translateY(-50%); -ms-transform: rotate(45deg) translateY(-50%); -moz-transform: rotate(45deg) translateY(-50%); -webkit-transform: rotate(45deg) translateY(-50%); -o-transform: rotate(45deg) translateY(-50%); } .grid-wrapper .bottom1 .wrapper .chartBlock { display: flex; height: calc(100% - 40px); justify-content:space-around; } #chartBottom1,#chartBottom2,#chartBottom3{ width:30% } #chartBottom1 .chartTab-t,#chartBottom2 .chartTab-t,#chartBottom3 .chartTab-t,#chartBottom4 .chartTab-t{ padding-left: 102px; height: 40px; line-height: 40px; } #chartBottom2 .chartTab-t,#chartBottom4 .chartTab-t,{ padding-left: 12px; } #chartBottom1 .chartTab-t .chartTab-title,#chartBottom2 .chartTab-t .chartTab-title,#chartBottom3 .chartTab-t .chartTab-title,#chartBottom4 .chartTab-t .chartTab-title{ font-size: 1em; position: relative; } #chartBottom1 .chartTab-t .chartTab-title:before,#chartBottom2 .chartTab-t .chartTab-title:before,#chartBottom3 .chartTab-t .chartTab-title:before,#chartBottom4 .chartTab-t .chartTab-title:before{ content:''; width:14px; height:14px; border-radius:50%; position:absolute; left:-20px; top:50%; background-color:#fff; margin-top:-7px; } #chart-snwd,#chart-snsd,#chart-myfwtj,#chart-ys{ height:calc(100% - 40px); } .grid-wrapper .bottom1 .chartWrapper { display: flex; } .grid-wrapper .bottom1 .chartWrapper > div { width: 50%; } .grid-wrapper .bottom2 { grid-area: bottom2; } .right-tabs { height: 40px; display: flex; justify-content: center; align-items: center; } .right-tabs .log-tab.active,.right-tabs .log-tab.active:before,.right-tabs .log-tab.active:after { background-color: #53BAFD; color: #fff; } .right-tabs .log-tab.active { z-index: 3; } .right-tabs .log-tab { border-radius: 8px 8px 0 0; display: flex; align-items: center; justify-content: center; /* padding: 10px 24px 8px; */ height: 100%; width: 30%; background-color: #FFF; margin-right: 46px; z-index: 2; position: relative; cursor: pointer; color: #777; text-transform: uppercase; font-size: 1.2em; transition: all 250ms ease; } .right-tabs .log-tab:before { right: -24px; transform: skew(30deg, 0deg); box-shadow: rgba(0,0,0,.1) 3px 2px 5px, inset rgba(255,255,255,.09) -1px 0; border-radius: 0 8px 0 0; } .right-tabs .log-tab:after { left: -24px; transform: skew(-30deg, 0deg); box-shadow: rgba(0,0,0,.1) -3px 2px 5px, inset rgba(255,255,255,.09) 1px 0; border-radius: 8px 0 0 0; } .right-tabs .log-tab:before, .right-tabs .log-tab:after { display: block; content: " "; position: absolute; top: 0; height: 100%; width: 44px; background-color: #FFF; transition: all 250ms ease; } .switch-tab-list{ display:none; height:calc(100% - 40px); } .play-box-content{ width:100%; height:50%; } .play-box-content canvas{ width:466px; height:299px; }