.grid-wrapper { box-sizing: border-box; color: #ffffff; padding: 23px 16px 16px; height: calc(100% - 94px); display: grid; grid-gap: 8px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); grid-template-areas: "left center right" "left bottom bottom"; } /*.grid-wrapper > div { overflow: hidden; background-color: #001346; padding: 4px; }*/ .grid-wrapper > div .wrapper { border-radius: 6px; height: 100%; background-color: #001346; overflow: hidden; } .grid-wrapper > div .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%); /* IE 9 */ -moz-transform:rotate(45deg) translateY(-50%); /* Firefox */ -webkit-transform:rotate(45deg) translateY(-50%); /* Safari 和 Chrome */ -o-transform:rotate(45deg) translateY(-50%); /* Opera */ } .grid-wrapper .left { grid-area: left; } .grid-wrapper .left .left-side-bar{ position:relative; } .left .left-side-table{ position:absolute; bottom:0px; left:0px; width:100%; padding:20px 5%; background-color: #001346; height:calc(56% - 40px); display:none } #table-clfb th{ color:#6DDFE9 } #table-clfb tr,#table-clfb td,#table-clfb th{ height:33px; vertical-align:middle; border:1px solid #528DFF } #table-clfb tr td{ text-align:center } .grid-wrapper .left .calendar{ height:calc(44% - 40px); } .grid-wrapper .left .calendar .tabs { display: flex; justify-content: space-around; align-items: center; height: 58px; border-bottom: 3px solid transparent; border-image: linear-gradient(-90deg, #0A214A, #6DDFE9, #0A214A) 10; } .grid-wrapper .left .calendar .tabs .tab { cursor: pointer; font-size: 1.4em; color: #A5ACA4; } .grid-wrapper .left .calendar .tabs .tab.active { color: #6DDFE9; } .grid-wrapper .left .calendar #calendarWrapper .calendar-wrapper { display: none; } .grid-wrapper #chartLeft1{ height:25%; } .grid-wrapper #chartLeft2{ height:31%; } .grid-wrapper #chartLeft3{ height:31%; } #chart-clfb,#chart-tcqk,#chart-gjdzzcl{ height:calc(100% - 40px); } .grid-wrapper .chart-tab-t{ padding-left: 102px; height: 40px; line-height: 40px; } .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 .center { grid-area: center; } .grid-wrapper .center .line1 { font-size: 1.4em; height: 40px; 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; } .grid-wrapper .center .line1 img { width: 30px; } .grid-wrapper .center .line2 { color: #ffffff; display: flex; align-items: center; justify-content: center; position:relative; padding-bottom:20px; height:68px; } .grid-wrapper .center .line2:before{ content:''; position:absolute; bottom:0px; left:10%; height:3px; width:80%; background: linear-gradient(to right, rgba(105,248,254,0), #6DDFE9, rgba(105,248,254,0)); } .grid-wrapper .center .line2 .wait-finish{ margin-right: 30px; } .grid-wrapper .center .line2 .wait-finish .wait-do{ text-align:center; } .grid-wrapper .center .line2 img { width: 50px; } .grid-wrapper .center .line2 .cross-line{ width:1px; height:60px; background-color:#6DDFE9; } .grid-wrapper .center .line2 .list { overflow:hidden; height:100%; max-width:60%; padding-left: 30px; } /* .grid-wrapper .center .line2 .list .item { overflow:hidden; height: 26px; line-height: 26px; text-overflow:ellipsis; white-space: nowrap; } .grid-wrapper .center .line2 .list .item .title { color: #6DDFE9; } */ .grid-wrapper .center .line2 .top{ display: flex; } .grid-wrapper .center .line2 .top .cell{ margin: 5px 8px; border: #64CFDC 1px solid; border-radius: 5px; padding: 5px; } .grid-wrapper .center .line2 .top .cell .title{ color: #69bdfd; font-size: 18px; } .grid-wrapper .center .line2 .top .cell .content{ font-weight: 600; font-size: 18px; } .grid-wrapper .line3{ margin-top:10px; height:calc(100% - 148px); } .ln-Dropdown{ cursor: pointer; position: relative; display: inline-block; } .ln-Dropdown .ln-Dropdown-content{ min-width: 100px; background-color: #ddd; display: none; z-index: 999; position: absolute; top: 80%; /* transform: translateX(-150%); */ /* width: 100%; */ border-radius: 5px; padding: 5px 0; } .ln-Dropdown .ln-Dropdown-content .ln-Dropdown-item{ color: #000; text-align: center; line-height: 180%; padding: 0 20px; } .grid-wrapper .line3 .ln-Dropdown .ln-Dropdown-content .ln-Dropdown-item:hover{ background-color: #b9e4e8; } #chartCenter{ height:100%; } #chart-ydfscts{ height: calc(100% - 40px); } .grid-wrapper .right { grid-area: right; } .right .charts-content{ height:calc(100% - 40px); } #chartRight1{ height:45%; } #chart-ttfb{ height:calc(100% - 40px); } #chartRight2{ height:55%; } #chart-ydttsl{ height:calc(100% - 40px); } .grid-wrapper .bottom { grid-area: bottom; } /* .grid-wrapper .bottom .wrapper { display: flex; flex-direction: column; }*/ .grid-wrapper .bottom .wrapper .chartBlock { display: flex; justify-content: space-between; height:calc(100% - 40px); } .grid-wrapper .bottom .wrapper .chartBlock > #chartBottom1 ,.grid-wrapper .bottom .wrapper .chartBlock > #chartBottom2{ height: 100%; flex: 1; display: flex; flex-direction: column; } .grid-wrapper .bottom .wrapper .chartBlock > #chartBottom1{ position:relative; } /* 新 */ .grid-wrapper .bottom .bottom_left{ width: 33.3%; } .grid-wrapper .bottom .bottom_middle{ width: 33.3%; } .grid-wrapper .bottom .bottom_righy{ width: 33.3%; } /* end */ #chartBottom1 .choosebtn{ position:absolute; right:1em; top:0; z-index:99; } .grid-wrapper .bottom .wrapper .chartBlock > #chartBottom1 .choosepc{ cursor:pointer; font-size: 1.2em; height: 40px; display: flex; align-items: center; } #chartBottom1 .choosepc .choose-item{ margin-right:10px; } #chartBottom1 .choosebtn .choosebox{ display:none; width:180px; padding:15px; position:absolute; top:40px; right:0; border:1px solid #3bb3e0; background-color:#001346; } #chartBottom1 .choosebtn .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; } #chartBottom1 .choosepc .cont img{ width:30px; } #chart-pzfb1,#chart-fmczfb1{ height:50%; } #chart-rstl,#chart-rfql,#chart-rpml{ height:48%; } #chart-fql, #chart-stl, #chart-pml{ height:52%; } /* .grid-wrapper .bottom .wrapper .block { height: 48%; }*/ .grid-wrapper .bottom .wrapper .block .panel { display: flex; } .grid-wrapper .bottom .wrapper .block .panel > div { width: 50%; } .calendar-wrapper { color: #ffffff; position: relative; margin: 15px; min-height: 155px; margin-top:10px; } .calendar-wrapper .flexoCalendar { margin: 0 auto; border-collapse: separate; width: 100%; position: relative; z-index: 1; } .flexoCalendar td, .flexoCalendar th { border: 0 none; height: 30px; line-height:30px; text-align: center; width: 32px; font-size: 1.2em; cursor: pointer; } .flexoCalendar th { font-size: 1.4em; } .flexoCalendar tr th .icon-arrow-left { display: inline-block; height: 16px; line-height: 16px; margin-top: 4px; vertical-align: text-top; width: 12px; cursor: pointer; position:relative; } .icon-arrow-left:before,.icon-arrow-left:after{ width: 0; height: 0; display: block; position: absolute; left: 0; top: 0; z-index: 5; border-top: 10px transparent dashed; border-left: 10px transparent dashed; border-bottom: 10px transparent dashed; border-right: 10px #001346 solid; overflow: hidden; } .icon-arrow-left:before { content: ''; border-right: 10px #6DDFE9 solid; } .icon-arrow-left:after { content:''; left:3px; border-right: 10px #001346 solid; } .flexoCalendar tr th .icon-arrow-right { display: inline-block; height: 16px; line-height: 16px; margin-top: 4px; vertical-align: text-top; width: 12px; cursor: pointer; position:relative; } .icon-arrow-right:before,.icon-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 #6DDFE9 solid; overflow: hidden; } .icon-arrow-right:after { content: ''; border-left: 10px #001346 solid; } .icon-arrow-right:before { content:''; left:3px; border-left: 10px #6DDFE9 solid; } .flexoCalendar thead tr { height: 40px; color: #fff; } .flexoCalendar thead tr:nth-child(2){ height:50px; } .flexoCalendar thead tr:first-child th { cursor: pointer; } .flexoCalendar thead tr:first-child th:hover .icon-arrow-right:after{ border-left-color: #2b488e; } .flexoCalendar thead tr:first-child th:hover .icon-arrow-left:after{ border-right-color: #2b488e; } .flexoCalendar thead tr:first-child th:hover { background: #2b488e; } .flexoCalendar tr td.other-month { color: #aaa; } .flexoCalendar thead, .flexoCalendar th { font-weight: normal; color: #fff; } .flexoCalendar tr th.current-year { width: 60%; } .flexoCalendar td.selected-day span { color: #2b488e; } .flexoCalendar tr td .day { display: block; height: 30px; line-height: 30px; text-align: center; margin: 1px; border: 1px solid transparent; } .flexoCalendar tr td.current-day > div, .flexoCalendar td.current-day > span { border: 1px solid #2b488e !important; border-radius: 4px; color: #2b488e; } .flexoCalendar tr td.selected > div, .flexoCalendar tr td.selected > span, .flexoCalendar tr td.selected > div span { border-radius: 4px; background-color: #2b488e; color: #fff !important; } #calendar-weekly .calendar-hd, #calendar-monthly .calendar-hd, #calendar-weekly tbody td { height: 40px; } #calendar-weekly tr td div { margin-bottom: 2px; } #calendar-weekly tr td .week { width: 100%; height: 100%; line-height: 30px; color: #fff; text-align: center; } #calendar-weekly tr td .process { color: #999; margin-left: 20px; display: inline-block; width: 57px; text-align: left; } #calendar-monthly td.tmonth .month { display: block; width: 80%; margin:0 auto; font-size:1.2em; text-align: center; border-radius: 4px; color: #fff; border: 1px solid transparent; } #calendar-monthly td.current-month .month { border: 1px solid #2b488e; } #calendar-weekly tr td.week1 div, .tmonth.month1 span, .tmonth.month2 span, .tmonth.month3 span, .tmonth.month4 span { margin-top: 10px !important; }