.brief-item { width: calc(25% - 16px); height: 120px; cursor: pointer; border-radius: 3px; -webkit-box-shadow: rgb(9 30 66 / 25%) 0 1px 1px, rgb(9 30 66 / 31%) 0 0 1px; box-shadow: 0 1px 1px rgb(9 30 66 / 25%), 0 0 1px rgb(9 30 66 / 31%); margin: 8px 8px 16px 8px; } .brief-item .chart_box { position: absolute; left: 0px; top: 20px; width: 101px; height: 80px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px; } .brief-item .title { color: #5e6c84; } .brief-item .number { margin-top: 16px; margin-right: 5px; overflow: hidden; font-size: 24px; line-height: 1; white-space: nowrap; } .brief-item .col-xs-6 { padding: 0; padding-top: 10px; } .brief-item .number .unit { margin-left: 4px; font-size: 14px; } .brief-item .des { margin-top: 16px; color: #5e6c84; } .brief-item .panel { border: 0; } .brief-item .des .rate { margin-left: 8px; font-size: 14px; } .brief-item .des .rate.top { color: #ff5630; } .brief-item .des .rate.bottom { color: #36b37e; } .brief-item.is-current, .brief-item.is-current .title, .brief-item.is-current .des { background-color: #0052cc !important; color: #fff !important; font-weight: 500; } .brief-dig-box { margin-top: 20px; } .brief-box { position: relative; background-color: #fff; border: 1px solid #dfe1e6; border-radius: 3px; } .brief-item:hover { box-shadow: rgba(9, 30, 66, 0.25) 0px 2px 4px, rgba(9, 30, 66, 0.31) 0px 0px 1px; } .brief-box:before { position: absolute; top: 0; right: 0; left: 0; height: 4px; content: " "; background-color: #0052cc; border-radius: 2px; } .brief-box .brief-title { padding: 16px 16px 0; } .brief-box .brief-title .fa { padding: 3px; margin-right: 8px; font-size: 12px; color: #fff; background-color: #0052cc; border-radius: 3px; } body { background-color: #fff; } .brief-wrap { -webkit-box-flex: 0; -ms-flex: 0 0 33%; flex: 0 0 33%; } .brief-wrap .brief { -ms-flex-negative: 0; flex-shrink: 0; padding: 16px; margin-bottom: 16px; cursor: pointer; background-color: #ebecf0; border-radius: 3px; } .brief .title { overflow: hidden; line-height: 20px; color: #5e6c84; white-space: nowrap; } .brief .value { min-height: 20px; margin-top: 8px; overflow: hidden; font-size: 20px; font-weight: 700; line-height: 1; white-space: nowrap; } .brief .value .value-unit { font-size: 20px; } .section__hd { padding: 10px 0; } .el-divider--horizontal { position: relative; height: 2px; margin: 12px 0; display: block; width: 100%; background-color: #dfe1e6; } .el-divider--horizontal .el-divider__text.is-left { top: -10px; padding-right: 8px; padding-left: 0; font-size: 16px; position: absolute; background-color: #fff; color: #172b4d; } .wk-toggle-button__bd { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: -webkit-max-content; width: -moz-max-content; width: max-content; max-width: 100%; padding: 4px; font-size: 12px; font-weight: 600; line-height: 1.3333; text-transform: uppercase; background-color: #ebecf0; border-radius: 3px; } .wk-toggle-item.selected { background-color: #fff; border-radius: 3px; -webkit-box-shadow: rgba(13, 20, 36, .18) 0 3px 5px, rgba(13, 20, 36, .29) 0 0 1px !important; box-shadow: 0 3px 5px rgba(13, 20, 36, .18), 0 0 1px rgba(13, 20, 36, .29) !important; } .wk-toggle-item { display: block; padding: 0 5px; line-height: 24px; cursor: pointer; border-radius: 3px; } .form-control { padding-right: 20px; display: inline-block; } [disabled] { border-radius: 3px; border: 0 !important; background-image: none !important; color: #a5adba !important; } .tooltip-inner { margin: 0; padding: 8px 14px; font-size: 13px; background-color: #f7f7f7; border: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; border-radius: 4px 4px 0 0; color: #000; text-align: left; } .dashboard-title { font-size: 24px; }