| | |
| | | grid: { |
| | | left: '10%', |
| | | right: '10%', |
| | | bottom: '0%', |
| | | bottom: '10%', |
| | | top: '20%', |
| | | containLabel: true |
| | | }, |
| | |
| | | |
| | | let option = { |
| | | tooltip: { |
| | | trigger: 'item' |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'line' |
| | | } |
| | | }, |
| | | grid: { |
| | | left: '5%', |
| | |
| | | overflow-x: hidden; |
| | | padding: 15px; |
| | | box-sizing: border-box; |
| | | background-color: #ffffff; |
| | | background-color: #F4F7FC; |
| | | .main_head { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin-bottom: 20px; |
| | | margin-bottom: 10px; |
| | | background-color: #ffffff; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | .blue { |
| | | border-left: 5px solid blue; |
| | | border-left: 8px solid #12BB8B; |
| | | } |
| | | .red { |
| | | border-left: 5px solid red; |
| | | border-left: 8px solid #F6CF46; |
| | | } |
| | | .yellow { |
| | | border-left: 5px solid yellow; |
| | | border-left: 8px solid #5DC9FB; |
| | | } |
| | | .orange { |
| | | border-left: 5px solid orange; |
| | | border-left: 8px solid #FF9E56; |
| | | } |
| | | .darkBlue { |
| | | border-left: 5px solid #0000a8; |
| | | border-left: 8px solid #6B6EFF; |
| | | } |
| | | .main_head_item { |
| | | width: 19%; |
| | | height: 70px; |
| | | height: 112px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | box-sizing: border-box; |
| | | border-radius: 5px; |
| | | background-color: #ffffff; |
| | | background: #F4F7FC; |
| | | span { |
| | | &:nth-child(1) { |
| | | font-size: 22px; |
| | | color: black; |
| | | font-weight: bold; |
| | | font-weight: 600; |
| | | font-size: 30px; |
| | | color: #222222; |
| | | } |
| | | &:nth-child(2) { |
| | | font-size: 16px; |
| | | color: black; |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: #222222; |
| | | margin-top: 10px; |
| | | } |
| | | } |
| | | } |
| | |
| | | align-items: start; |
| | | justify-content: space-between; |
| | | .main_table_echart { |
| | | flex: 1; |
| | | width: 64%; |
| | | height: 400px; |
| | | background-color: #ffffff; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | .title { |
| | | font-weight: 600; |
| | | font-size: 16px; |
| | |
| | | } |
| | | } |
| | | .main_table_list { |
| | | margin-left: 20px; |
| | | flex-shrink: 0; |
| | | width: 500px; |
| | | width: 35%; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | background-color: #ffffff; |
| | | .title { |
| | | font-weight: 600; |
| | | font-size: 16px; |
| | |
| | | |
| | | .main_content { |
| | | display: flex; |
| | | align-items: start; |
| | | justify-content: space-between; |
| | | height: 500px; |
| | | |
| | | margin-bottom: 10px; |
| | | .title { |
| | | font-weight: 600; |
| | | font-size: 16px; |
| | | color: #222222; |
| | | /*margin-bottom: 20px;*/ |
| | | margin-top: 20px; |
| | | } |
| | | |
| | | .type_wrap { |
| | | flex: 11; |
| | | width: 49.5%; |
| | | flex-shrink: 0; |
| | | height: calc(100% - 20px); |
| | | height: 100%; |
| | | /*border-right: 12px solid #f7f7f7;*/ |
| | | |
| | | background-color: #ffffff; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | |
| | | .echart1 { |
| | | width: 100%; |
| | | height: calc(100% - 60px); |
| | | height: 100%; |
| | | } |
| | | } |
| | | |
| | | .dept_wrap { |
| | | flex: 10; |
| | | width: 49.5%; |
| | | flex-shrink: 0; |
| | | height: calc(100% - 20px); |
| | | padding-left: 20px; |
| | | |
| | | height: 100%; |
| | | background-color: #ffffff; |
| | | padding: 20px; |
| | | box-sizing: border-box; |
| | | .echart2 { |
| | | width: 100%; |
| | | height: calc(100% - 60px); |
| | | height: 100%; |
| | | } |
| | | } |
| | | } |