.dark-overview { height: calc(100vh - 26px); overflow: hidden; background: #0c102c; /deep/.p-pagination{ background: transparent; .p-total{ background: transparent; } .p-prev-btn{ background: #102668; color: #95bfff; border: 1px solid #2f5873; } .p-next-btn{ background: #102668; color: #95bfff; border: 1px solid #2f5873; } ul{ li{ background: #102668; color: #95bfff; border: 1px solid #2f5873; } li.active{ background: #275489; color: white; border: 1px solid #62c4dd; } } } /deep/.p-tabs{ .p-tabs-nav-item{ background: #102567; color: #8eb7f5; border: 1px solid #2e5772; } .p-tabs-card-item-active{ color: white; background: #275489; } } /deep/.el-dialog__body{ background: #0c102c; } /deep/.p-select-search{ .p-select-search-box{ background-color: rgba(22,73,206,0.36)!important; border:1px solid #2e5772!important; .p-select-choice-name{ color: white!important; } .p-select-search-input{ color: white!important; } } } .dot-background{ background: radial-gradient(#20284f 20%, transparent 20%) 0 0; background-color: transparent; background-size: 8px 8px; border: 10px solid; border-image: url("../../assets/images/border.png") 14; // border-image: url("https://www.webhek.com/wordpress/wp-content/uploads/2014/07/bg-pawprints-all.jpg") 45 round; // border-image-width: 10px; // background-image: url("../../assets/images/border.png"); // background-size: 100% 100%; } .my-dialog { position: relative; .shut-download { position: absolute; top: 10px; right: 10px; width: 90px; height: 30px; cursor: pointer; color: white; text-align: center; span { display: inline-block; } .download { width: 50px; border-right: 1px solid #cccccc; } .shut { width: 30px; } } .table-content { margin: 0; padding-bottom: 40px; .table-title { height: 56px; line-height: 56px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); font-size: 16px; color: white; } .table-tabs { margin: 16px 0; } .table-select { margin-bottom: 12px; } table { width: 100%; thead { height: 40px; line-height: 40px; background: #0d1b4c; th { font-size: 12px; color: #95bfff; font-weight: normal; padding: 0 24px; } } tbody { // tr:first-child{ // font-size:14px; // font-weight: bold; // color: #1F2429; // } tr { height: 48px; line-height: 48px; border-bottom: 1px solid #0f215f; td { padding: 0 24px; line-height: 22px; color: white; } } } } } .empty-text { height: 60px; line-height: 60px; text-align: center; } } .menu { display: flex; justify-content: space-between; align-items: center; height: 48px; min-width: 1366px; color: #1f2429; font-size: 1.6rem; box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1); .home { width: 280px; height: 48px; // line-height: 48px; text-align: center; cursor: pointer; color: #ffffff; float: left; margin-right: 83px; background: linear-gradient( 180deg, rgba(16, 57, 121, 1) 0%, rgba(22, 38, 63, 1) 100% ); background: linear-gradient(-65deg,transparent 20px,rgba(16, 57, 121, 1) 0); position: relative; .downright { position: absolute; width: 0; height: 0; border-left: 20px solid transparent; border-bottom: 48px solid #fff; right: 0px; top: 0; } .home-box { height: 100%; display: flex; align-items: center; img { width: 28px; height: 28px; margin-left: 20px; margin-right: 24px; margin-top: -3px; } span { font-size: 2rem; font-family: MicrosoftYaHei; height: 27px; line-height: 27px; margin-top: -4px; &:after { content: "|"; position: absolute; left: 60px; } } } } & > div:nth-of-type(2) { & > div { line-height: 48px; text-align: center; width: 80px; height: 48px; cursor: pointer; transition: all 0.2s; } .is-active { color: #025baa; font-weight: bolder; border-bottom: 2px solid #025baa; background: linear-gradient( 180deg, rgba(2, 91, 170, 0) 0%, rgba(2, 91, 170, 0.2) 100% ); } } .home-right { display: flex; align-items: center; width: 260px; line-height: 48px; color: #646c73; font-size: 1.4rem; cursor: pointer; display: flex; align-content: center; .tip{ width: 90px; color:white; font-size: 14px; cursor: pointer; } img { height: 24px; width: 24px; filter: saturate(50); margin-left: 20px; } .span-out { position: relative; margin: 0 16px; .span2-num { position: absolute; right: -5px; top: 5px; display: inline-block; width: 18px; height: 18px; border-radius: 90px; font-size: 1.2rem; text-align: center; line-height: 18px; color: #ffffff; } } } .span1, .span2 { padding: 0 6px 0 3px; } .span3 { padding-left: 3px; } } .navigation { display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 0 16px; .crumbs { span { cursor: pointer; color: white; } span:first-child { display: inline-block; width: auto; height: 3rem; margin-right: 1.2rem; border: 1px solid #69CFEA; border-radius: 1.4rem; padding: 0 2.4rem; text-align: center; line-height: 2.8rem; font-size: 14px; background: #1649CE; cursor: default; } span:last-child { font-weight: bold; } } } .container { display: flex; justify-content: space-between; height: calc(100vh - 120px); padding: 1.2rem 1.6rem; .section-title { width: 30%; padding: 0.8rem 1.8rem; color: white; font-size: 1.6rem; font-weight: bolder; line-height: 2rem; // background: #1649CE; background: linear-gradient(-65deg,transparent 20px, rgba(22,73,206, 0.36) 0); cursor: pointer; } .system-general { width: 28.4%; height: 100%; box-sizing: border-box; .system-main-title { padding: 2rem 0 2.4rem 1.6rem; } .system-list { height: 90%; overflow-y: auto; &::-webkit-scrollbar-track{ background: rgba(22, 73, 206, 0.3); border-radius:2px; } &::-webkit-scrollbar-thumb{ background: rgba(22, 73, 206, 0.8); border-radius:10px; border: none; } // &::-webkit-scrollbar-thumb:hover{ // background: #333; // } // &::-webkit-scrollbar-corner{ // background: #179a16; // } ul { li.system-item { position: relative; display: flex; justify-content: flex-start; align-items: stretch; width: calc(100% - 3.2rem); margin-left: 0.8rem; margin-bottom: 0.4rem; box-sizing: border-box; border: 1px solid transparent; border-radius: 6px; transition: 0.5s; background: rgba(13,29,66,0.6); cursor: pointer; .system-name { position: absolute; top: 0; bottom: 0; border-top-left-radius: 6px; border-bottom-left-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 1; flex-grow: 1; width: 18%; height: auto; img { width: 3.2rem; height: 3.2rem; margin-bottom: 0.6rem; } span { color: white; font-size: 1.4rem; font-weight: bolder; } } .system-equipments-container { position: relative; width: 88%; padding: 0.8rem; margin-left: 18%; .more { position: absolute; display: flex; justify-content: center; align-items: center; width: 14px; height: 14px; right: 8px; top: 50%; border-radius: 7px; cursor: pointer; transform: rotate(0); transform-origin: center; z-index: 100; transform: translateY(-7px); img { width: 14px; height: 14px; } } .system-equipments { display: flex; align-items: center; color: white; .number { width: 30%; margin-right: 1%; background: rgba(56,94,204,0.22); border-radius: 2px; padding: 1.4rem 0 1rem 0.4rem; .title { display: inline-block; position: relative; line-height: 1; p { display: inline-block; position: relative; font-size: 1.4rem; line-height: 2rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } span { position: absolute; top: -1rem; right: -2rem; padding: 2px 4px; border-radius: 0.9rem; font-size: 1.2rem; background: #FF3737; border:1px solid #E39191; } } p { span:first-child { font-size: 1.8rem; font-weight: bold; } .amount { font-size: bold; } } } } } } li.selected { border-color: rgba(104, 131, 255, 1); // box-shadow: 0 2px 10px 0px rgba(0, 118, 197, 0.4); } li:hover { border-color: rgba(104, 131, 255, 1);; // box-shadow: 0 2px 10px 0px rgba(195, 199, 203, 0.4); } li:nth-of-type(1), li:nth-of-type(7) { .system-name { background: linear-gradient(to left, rgba(64,204,202,0.3), rgba(108,194,226,0.3)); } } li:nth-of-type(2), li:nth-of-type(5){ .system-name { background: linear-gradient(to left, rgba(57,152,219,0.3), rgba(112,187,239,0.3)); } } li:nth-of-type(3), li:nth-of-type(6) { .system-name { background: linear-gradient(to left, rgba(174,48,118,0.3),rgba(213,83,135,0.3) ); } } li:nth-of-type(4), li:nth-of-type(8){ .system-name { background: linear-gradient(to left, rgba(240,84,59,0.3),rgba(226,133,108,0.3) ); } } } } } .map-box { width: calc(53.6% - 2.4rem); margin: 0 12px; .cards-list { display: flex; justify-content: space-between; .card { width: 50%; box-sizing: border-box; border-radius: 4px; .card-title { width: 50%; padding: 0.8rem 1.8rem; margin: 1.4rem; color: white; font-size: 1.6rem; font-weight: bold; line-height: 2rem; background: linear-gradient(-65deg,transparent 20px, rgba(22,73,206, 0.36) 0); cursor: pointer; } .describe { display: flex; color: white; padding: 0.2rem 4rem; strong{ font-size: 30px; } } } div:first-child.card { margin-right: 12px; } strong { color: white; font-size: 2.4rem; margin-left: 3rem; } } .map-container { position: relative; height: 84%; .leaflet-container{ background: #0c102c!important; } #map { height: 100%; overflow: hidden; svg { pointer-events: none; } } .legend { position: absolute; left: 1.4rem; bottom: 10rem; padding: 0.6rem; z-index: 1000; background: #0D368D; .legend-bar { display: flex; align-items: center; span { display: inline-block; height: 4px; width: 20px; margin-right: 12px; } em{ color:#C3C7CB; } } } } } .ratio-list { width: 18%; .block { position: relative; padding: 0.2rem 1.6rem; height: calc((100% - 2rem) / 3); border-radius: 4px; margin-bottom: 1rem; // overflow: auto; transition: height 0.3s ease-in-out; .section-title { font-size: 1.6rem; width: 70%; img{ height: 18px; width: 18px; margin-left: 0.8rem; } } .tool-tip { position: absolute; left: 0; top: -6.6rem; width: 100%; border-radius: 4px; padding: 0.8rem 1.6rem 1.6rem; font-size: 1.4rem; line-height: 2.2rem; background: white; border: 1px solid rgba(151, 151, 151, 0.2); filter: drop-shadow(0 2px 4px rgba(31, 35, 41, 0.1)); .tip-triangle { position: absolute; position: absolute; left: 7.8rem; border-style: solid; width: 0; height: 0; bottom: -6px; border-width: 6px 6px 0 6px; border-color: rgba(247, 249, 250, 1) transparent transparent transparent; } } .list { margin-top: 1.4rem; overflow: hidden; height: calc(100% - 7.5rem); ul { li { display: flex; flex-direction: column; justify-content: center; margin-bottom: 1.2rem; .ratio { display: flex; justify-content: space-between; margin-bottom: 0.5rem; span:first-child { color: white; font-size: 1.4rem; } span:last-child { color: #fafafa; font-size: 1.4rem; } } .bar { position: relative; height: 6px; border-radius: 3px; background: rgba(144, 197, 250, 0.24); .inner-bar { position: absolute; height: 6px; left: 0; top: 0; border-radius: 3px; } } } } } .arrow { position: absolute; bottom: 5px; left: 50%; cursor: pointer; transform-origin: center center; transform: translateX(-50%); img{ width: 16px; height: 10px; filter: saturate(50); } } } section:last-child.block { margin-bottom: 0; } } } }