Browse Source

集团首页完成换肤功能

fujunwen 4 years ago
parent
commit
ed155ae17d

+ 614 - 0
src/assets/css/dark.less

@@ -0,0 +1,614 @@
+.dark-overview {
+  height: calc(100vh - 26px);
+  background: #0c102c;
+  /deep/.p-select-search{
+    .p-select-search-box{
+      background-color: rgba(22,73,206,0.36)!important;
+      border:1px solid #69CFEA!important;
+      .p-select-choice-name{
+        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;
+      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;
+        font-weight: bold;
+        color: #000;
+      }
+      .table-tabs {
+        margin: 16px 0;
+      }
+      .table-select {
+        margin-bottom: 12px;
+      }
+      table {
+        width: 100%;
+        thead {
+          height: 40px;
+          line-height: 40px;
+          background: #f8f9fa;
+          th {
+            font-size: 12px;
+            color: #646a73;
+            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 #e4e6e7;
+            td {
+              padding: 0 24px;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+    }
+    .empty-text {
+      height: 60px;
+      line-height: 60px;
+      text-align: center;
+    }
+  }
+
+  .menu {
+    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(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
+      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);
+      // border:2px solid #68CEE8;
+      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;
+        //background: url('../assets/images/topbar1.png') no-repeat;
+        float: left;
+        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 {
+      position: relative;
+      float: right;
+      margin-right: 20px;
+      line-height: 48px;
+      color: #646c73;
+      font-size: 1.4rem;
+      cursor: pointer;
+      display: flex;
+      align-content: center;
+      .tip{
+        position: absolute;
+        z-index: 8000;
+        top: 40px;
+        right: 0;
+        padding: 4px 8px;
+        background: rgba(31, 36, 41, 0.8);
+        color:white;
+        font-size: 14px;
+        line-height: 14px;
+        cursor: pointer;
+      }
+      img {
+        height: 24px;
+        width: 24px;
+        filter: saturate(50);
+        margin-top: -2px;
+        margin-left: 12px;
+      }
+      .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: 25.4%;
+        box-sizing: border-box;
+      .system-main-title {
+        padding: 2rem 0 2.4rem 1.6rem;
+      }
+      
+      .system-list {
+        height: 80vh;
+        overflow-y: auto;
+        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(56.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: 2rem 4rem;
+          }
+        }
+        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;
+          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: 1.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: 55%;
+          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;
+      }
+    }
+  }
+}

+ 589 - 0
src/assets/css/light.less

@@ -0,0 +1,589 @@
+.light-overview{
+  height: calc(100vh - 26px);
+  background: rgba(247, 249, 250, 1);
+  .my-dialog {
+    position: relative;
+    .shut-download {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      width: 90px;
+      height: 30px;
+      cursor: pointer;
+      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;
+        font-weight: bold;
+        color: #000;
+      }
+      .table-tabs {
+        margin: 16px 0;
+      }
+      .table-select {
+        margin-bottom: 12px;
+      }
+      table {
+        width: 100%;
+        thead {
+          height: 40px;
+          line-height: 40px;
+          background: #f8f9fa;
+          th {
+            font-size: 12px;
+            color: #646a73;
+            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 #e4e6e7;
+            td {
+              padding: 0 24px;
+              line-height: 22px;
+            }
+          }
+        }
+      }
+    }
+    .empty-text {
+      height: 60px;
+      line-height: 60px;
+      text-align: center;
+    }
+  }
+
+  .menu {
+    height: 48px;
+    min-width: 1366px;
+    color: #1f2429;
+    font-size: 1.6rem;
+    background: rgba(255, 255, 255, 1);
+    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(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
+      background: linear-gradient(
+        180deg,
+        rgba(54, 156, 247, 1) 0%,
+        rgba(2, 91, 170, 1) 100%
+      );
+      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;
+        //background: url('../assets/images/topbar1.png') no-repeat;
+        float: left;
+        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 {
+      position: relative;
+      float: right;
+      margin-right: 20px;
+      line-height: 48px;
+      color: #646c73;
+      font-size: 1.4rem;
+      cursor: pointer;
+      display: flex;
+      align-content: center;
+       .tip{
+        position: absolute;
+        z-index: 8000;
+        top: 40px;
+        right: 0;
+        padding: 4px 8px;
+        background: rgba(31, 36, 41, 0.8);
+        color:white;
+        font-size: 14px;
+        line-height: 14px;
+        cursor: pointer;
+      }
+      img {
+        height: 24px;
+        width: 24px;
+        filter: saturate(0);
+        margin-top: -2px;
+        margin-left: 12px;
+      }
+      .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;
+    background: white;
+    .crumbs {
+      span {
+        cursor: pointer;
+      }
+      span:first-child {
+        display: inline-block;
+        width: auto;
+        height: 3rem;
+        margin-right: 1.2rem;
+        border: 1px solid rgba(195, 199, 203, 1);
+        border-radius: 1.4rem;
+        padding: 0 2rem;
+        text-align: center;
+        line-height: 2.8rem;
+        font-size: 14px;
+        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 {
+      display: flex;
+      align-items: center;
+      padding-left: 10px;
+      border-left: 4px solid #025baa;
+      color: #1f2429;
+      font-size: 1.6rem;
+      font-weight: bolder;
+      line-height: 2rem;
+      cursor: pointer;
+      img {
+        width: 2rem;
+        margin-left: 1.2rem;
+      }
+    }
+
+    .system-general {
+      width: 25.4%;
+      box-sizing: border-box;
+      background: white;
+      .system-main-title {
+        padding: 2rem 0 2.4rem 1.6rem;
+      }
+      .system-list {
+        height: 80vh;
+        overflow-y: auto;
+        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 #eff0f1;
+            border-radius: 4px;
+            transition: 0.5s;
+            cursor: pointer;
+            .system-name {
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              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;
+                .number {
+                  width: 30%;
+                  margin-right: 1%;
+                  background: #eff0f1;
+                  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;
+                      color: #1f2429;
+                      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;
+                      color: #f54e45;
+                      background: #fde3e2;
+                    }
+                  }
+                  p {
+                    span:first-child {
+                      color: #1f2429;
+                      font-size: 1.8rem;
+                      font-weight: bold;
+                    }
+                    .amount {
+                      font-size: bold;
+                    }
+                  }
+                }
+              }
+            }
+          }
+          li.selected {
+            border-color: rgba(0, 118, 197, 0.6);
+            box-shadow: 0 2px 10px 0px rgba(0, 118, 197, 0.4);
+          }
+          li:hover {
+            border-color: #e4e5e7;
+            box-shadow: 0 2px 10px 0px rgba(195, 199, 203, 0.4);
+          }
+          li:nth-of-type(1),
+          li:nth-of-type(4),
+          li:nth-of-type(7) {
+            .system-name {
+              background: linear-gradient(to left, #4064cc, #6c8be2);
+            }
+          }
+          li:nth-of-type(2),
+          li:nth-of-type(5),
+          li:nth-of-type(6) {
+            .system-name {
+              background: linear-gradient(to left, #3998db, #70bbef);
+            }
+          }
+          li:nth-of-type(3),
+          li:nth-of-type(8) {
+            .system-name {
+              background: linear-gradient(to left, #30ae88, #53d5b1);
+            }
+          }
+        }
+      }
+    }
+    .map-box {
+      width: calc(56.6% - 2.4rem);
+      margin: 0 12px;
+      .cards-list {
+        display: flex;
+        justify-content: space-between;
+        .card {
+          width: 50%;
+          box-sizing: border-box;
+          border-radius: 4px;
+          background: white;
+          .card-title {
+            position: relative;
+            height: 5rem;
+            display: flex;
+            align-items: center;
+            padding: 10px 12px;
+            color: white;
+            font-size: 16px;
+            border-radius: 4px;
+            background-image: url("../../assets/images/icons/title_bg.png");
+            background-position: center center;
+            background-size: 100%;
+            img {
+              width: 2rem;
+              height: 2rem;
+              margin-right: 1.2rem;
+            }
+          }
+          .describe {
+            padding: 2rem 4rem;
+          }
+        }
+        div:first-child.card {
+          margin-right: 12px;
+        }
+
+        div:nth-of-type(1) .img {
+          background: rgba(130, 199, 252, 0.14);
+        }
+        div:nth-of-type(2) .img {
+          background: rgba(0, 214, 185, 0.14);
+        }
+
+        strong {
+          color: #1f2429;
+          font-size: 2.4rem;
+          margin-left: 3rem;
+        }
+      }
+      .map-container {
+        position: relative;
+        height: 84%;
+        #map {
+          height: 100%;
+          overflow: hidden;
+
+          svg {
+            pointer-events: none;
+          }
+        }
+        .legend {
+          position: absolute;
+          left: 1.4rem;
+          bottom: 10rem;
+          padding: 0.6rem;
+          background: white;
+          .legend-bar {
+            display: flex;
+            align-items: center;
+            span {
+              display: inline-block;
+              height: 4px;
+              width: 20px;
+              margin-right: 12px;
+            }
+          }
+        }
+      }
+    }
+    .ratio-list {
+      width: 18%;
+      .block {
+        position: relative;
+        padding: 1.2rem 1.6rem;
+        height: calc((100% - 2rem) / 3);
+        border-radius: 4px;
+        margin-bottom: 1rem;
+        background: white;
+        // overflow: auto;
+        transition: height 0.3s ease-in-out;
+        .section-title {
+          font-size: 1.6rem;
+        }
+        .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: #646c73;
+                  font-size: 1.4rem;
+                }
+              }
+              .bar {
+                position: relative;
+                height: 6px;
+                border-radius: 3px;
+                background: #c3c7cb;
+                .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(0);
+          }
+        }
+      }
+      section:last-child.block {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

BIN
src/assets/images/border.png


BIN
src/assets/images/icons/alert.png


BIN
src/assets/images/icons/arrow_d_u.png


BIN
src/assets/images/icons/switch.png


+ 75 - 605
src/views/statistics/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="overview">
+  <div ref="homepage" :class="skinMode === 'light' ? 'light-overview' : 'dark-overview'">
     <!-- 顶部路由 -->
     <div class="menu">
       <div class="home" @click="$emit('update:modelNum', 0)">
-        <div class="downright"></div>
+        <!-- <div class="downright"></div> -->
         <div class="home-box">
           <img src="@/assets/imgs/logo.png" alt />
           <!-- <span>{{plazas.length>0?formatter(plazaId,plazas):'--'}}</span> -->
@@ -13,6 +13,10 @@
       <div class="home-right">
         <span style="color: #8d9399">
           <span class="span3">{{ times }}</span>
+          <img @mouseenter="showSwitchTip = true"  @mouseleave="delayToHideTip" src="../../assets/images/icons/switch.png">
+          <div class="tip" v-show="showSwitchTip"  @mouseenter="cancelHideTip" @mouseleave="showSwitchTip = false"  @click="changeSkin" >
+            {{skinMode === 'light' ? '切换深色版':'切换浅色版'}}
+          </div>
         </span>
       </div>
     </div>
@@ -46,7 +50,7 @@
       </section>
     </nav>
     <main class="container">
-      <section class="system-general">
+      <section class="system-general dot-background">
         <div class="system-main-title">
           <h4 class="section-title">系统概况</h4>
         </div>
@@ -74,10 +78,8 @@
                     transform: item.expand ? 'rotate(0)' : 'rotate(180deg)',
                   }"
                 >
-                  <img
-                    v-if="item.showColor"
-                    src="../../assets/images/icons/arrow.png"
-                  />
+                  <!-- <img v-if="item.showColor" :src="`../../assets/images/icons/${skinMode === 'light'?'arrow':'expand_dark'}.png`" /> -->
+                  <img v-if="item.showColor" src="`../../assets/images/icons/arrow.png`" />
                   <img v-else src="../../assets/images/icons/grey.png" />
                 </div>
                 <div class="system-equipments">
@@ -159,9 +161,8 @@
       </section>
       <section class="map-box">
         <section class="cards-list">
-          <div class="card" @click="navToManageNumber">
+          <div class="card dot-background" @click="navToManageNumber">
             <div class="card-title">
-              <img src="../../assets/images/icons/curve.png" />
               <p>上线管理说明书广场数量</p>
             </div>
             <div class="describe">
@@ -170,9 +171,8 @@
               >
             </div>
           </div>
-          <div class="card" @click="navToIntroduceUpdate">
+          <div class="card dot-background" @click="navToIntroduceUpdate">
             <div class="card-title">
-              <img src="../../assets/images/icons/amount.png" />
               <p>当月说明书更新数量</p>
             </div>
             <div class="describe">
@@ -204,18 +204,15 @@
       </section>
       <section class="ratio-list">
         <section
-          class="block"
+          class="block dot-background"
           :style="panelStyle(item)"
           v-for="(item, index) in maintainList"
           :key="index"
         >
-          <h4 class="section-title" @click="toggerPanel(item)">
-            {{ item.title
-            }}<img
-              @mouseover="showToolTip(index, item.title)"
-              @mouseout="hideToolTip(index, item.title)"
-              src="../../assets/images/icons/notice.png"
-            />
+          <h4 class="section-title" @click="toggerPanel(item)" @mouseover="showToolTip(index, item.title)"  @mouseout="hideToolTip(index, item.title)" >
+            {{ item.title}}
+            <img v-show="skinMode==='light'" src="../../assets/images/icons/notice.png" />
+            <img v-show="skinMode==='dark'"  src="../../assets/images/icons/alert.png" />
           </h4>
           <transition name="selectDownUpExtendTop">
             <div class="tool-tip" v-if="item.showToolTip">
@@ -266,16 +263,8 @@
                 </div>
               </li>
             </ul>
-            <div
-              class="arrow"
-              v-show="item.expand !== 2"
-              :style="{
-                transform:
-                  item.expand === 1 ? 'rotate(-90deg)' : 'rotate(90deg)',
-              }"
-              @click="toggerPanel(item)"
-            >
-              <img src="../../assets/images/icons/right.png" />
+            <div class="arrow" v-show="item.expand !== 2" :style="{ transform: item.expand === 1 ? 'rotate(180deg)' : 'rotate(0deg)'}" @click="toggerPanel(item)" >
+              <img src="../../assets/images/icons/arrow_d_u.png" />
             </div>
           </div>
         </section>
@@ -402,6 +391,10 @@ import "leaflet-contextmenu";
 export default {
   data() {
     return {
+      tipTimer:null,
+      showSwitchTip:false,
+      mapLayer:null,
+      skinMode:'light',
       zoneTotal: 0,
       centerTotal: 0,
       projectTotal: 0,
@@ -525,6 +518,41 @@ export default {
     window.addEventListener("resize", this.reinitalMap, false);
   },
   methods: {
+    delayToHideTip() {
+      this.tipTimer = setTimeout(() => {
+          this.showSwitchTip = false
+      }, 500);
+    },
+    cancelHideTip(){
+      clearTimeout(this.tipTimer);
+    },
+    /**
+    *@description 切换皮肤
+    */
+    changeSkin() {
+      const vm = this
+      const mapDom = document.querySelector("#map")
+      const icons = mapDom.querySelectorAll(".my-leaflet-div-icon")
+      if (this.skinMode === 'light') {
+        this.skinMode = 'dark'
+        icons.forEach(dom => {
+          dom.style.color = "#FFF"
+        })
+      } else {
+        this.skinMode = 'light'
+        icons.forEach(dom => {
+          dom.style.color = "#333"
+        })
+      }
+      if (this.mapLayer) {
+        this.mapLayer.setStyle({
+          weight: 1,
+          color: vm.skinMode === "light" ? "#B3D2FF" :"#56a3c2",
+          fillColor: vm.skinMode === "light" ? "#DEECFF" : "#21285c",
+          fillOpacity: vm.skinMode === "light" ? 0.2 : 1
+        })
+      }
+    },
     downloadExcel() {
       let tableContent = document.querySelector("#tableReport").outerHTML;
       let blob = new Blob([tableContent], {
@@ -916,7 +944,7 @@ export default {
       if (title === "专维") {
         item.overdue_unfinished = item.overdue_unfinished || 0;
         if (item.overdue_unfinished > 0 || item.due_num > 0) {
-          bg = "linear-gradient(to right, #F54E45 , #F54E45)";
+          bg = this.skinMode ==='light' ? "linear-gradient(to right, #F54E45 , #F54E45)" : 'linear-gradient(to right, #DE944D , #F58300)';
         }
         // else {
         //     bg = this.barColors[type]
@@ -924,7 +952,7 @@ export default {
         ratio = ((item.overdue_unfinished + item.due_num) / item.total) * 100;
       } else {
         if (item.due_num > 0) {
-          bg = "linear-gradient(to right, #F54E45 , #F54E45)";
+          bg = this.skinMode ==='light' ? "linear-gradient(to right, #F54E45 , #F54E45)" : 'linear-gradient(to right, #DE944D , #F58300)';
         }
         // bg = this.barColors[type]
         ratio = (item.due_num / item.total) * 100;
@@ -1118,7 +1146,7 @@ export default {
         // dragging: false,
       });
       let JsonData = require("../../assets/geoData/china.json");
-      let layer = L.geoJSON(JsonData.features, {
+      this.mapLayer = L.geoJSON(JsonData.features, {
         style: function () {
           return {
             weight: 1,
@@ -1127,6 +1155,7 @@ export default {
           };
         },
       }).addTo(myMaps);
+ 
       if (this.currentLevel === 1) {
         //1集团
         this.pantGroupMap(this.currentZoneData, this.currentSysId);
@@ -1142,16 +1171,19 @@ export default {
      * @Description 清空地图 并添加全国底图
      */
     clearAllLayers() {
+      const vm = this
       myMaps.eachLayer(function (layer) {
         myMaps.removeLayer(layer);
       });
       let JsonData = require("../../assets/geoData/china.json");
-      let layer = L.geoJSON(JsonData.features, {
+      this.mapLayer = L.geoJSON(JsonData.features, {
         style: function () {
           return {
             weight: 1,
-            color: "#B3D2FF",
-            fillColor: "#DEECFF",
+            color: vm.skinMode === "light" ? "#B3D2FF" :"#56a3c2",
+            // fillColor: vm.skinMode === "light" ? "#DEECFF" : "red",
+            fillColor: vm.skinMode === "light" ? "#DEECFF" : "#21285c",
+            fillOpacity: vm.skinMode === "light" ? 0.2 : 1
           };
         },
       }).addTo(myMaps);
@@ -1497,10 +1529,11 @@ export default {
       type,
       zoom
     ) {
+      let vm =this
       let color = this.paintColorByData(num);
       let textIcon = L.divIcon({
         html: type == "group" ? name : `<div>${name}</div>`,
-        className: "my-leaflet-div-icon",
+        className: vm.skinMode==='light'? "my-leaflet-div-icon":"dark-my-leaflet-div-icon",
         iconSize: 30,
       });
       let circleIcon = L.icon({
@@ -1605,7 +1638,12 @@ export default {
 };
 </script>
 
-<style scoped lang="less">
+<style scoped lang="less">  
+@import "../../assets/css/dark.less";
+@import "../../assets/css/light.less";
+.dark-my-leaflet-div-icon{
+  color: white;
+}
 @keyframes selectDownUpExtendTop {
   from {
     transform: translateY(8px);
@@ -1632,573 +1670,5 @@ export default {
   padding-top: 0;
 }
 
-.overview {
-  height: 100vh;
-  background: rgba(247, 249, 250, 1);
-  .my-dialog {
-    position: relative;
-    .shut-download {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      width: 90px;
-      height: 30px;
-      cursor: pointer;
-      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;
-        font-weight: bold;
-        color: #000;
-      }
-      .table-tabs {
-        margin: 16px 0;
-      }
-      .table-select {
-        margin-bottom: 12px;
-      }
-      table {
-        width: 100%;
-        thead {
-          height: 40px;
-          line-height: 40px;
-          background: #f8f9fa;
-          th {
-            font-size: 12px;
-            color: #646a73;
-            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 #e4e6e7;
-            td {
-              padding: 0 24px;
-              line-height: 22px;
-            }
-          }
-        }
-      }
-    }
-    .empty-text {
-      height: 60px;
-      line-height: 60px;
-      text-align: center;
-    }
-  }
-
-  .menu {
-    height: 48px;
-    min-width: 1366px;
-    color: #1f2429;
-    font-size: 1.6rem;
-    background: rgba(255, 255, 255, 1);
-    box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
-    overflow: hidden;
-    .home {
-      width: 265px;
-      height: 48px;
-      // line-height: 48px;
-      text-align: center;
-      cursor: pointer;
-      color: #ffffff;
-      float: left;
-      margin-right: 83px;
-      // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
-      background: linear-gradient(
-        180deg,
-        rgba(54, 156, 247, 1) 0%,
-        rgba(2, 91, 170, 1) 100%
-      );
-      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;
-        //background: url('../assets/images/topbar1.png') no-repeat;
-        float: left;
-        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 {
-      float: right;
-      margin-right: 20px;
-      line-height: 48px;
-      color: #646c73;
-      font-size: 1.4rem;
-      cursor: pointer;
-      display: flex;
-      align-content: center;
-      img {
-        margin-top: -2px;
-      }
-      .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;
-    background: white;
-    .crumbs {
-      span {
-        cursor: pointer;
-      }
-      span:first-child {
-        display: inline-block;
-        width: auto;
-        height: 3rem;
-        margin-right: 1.2rem;
-        border: 1px solid rgba(195, 199, 203, 1);
-        border-radius: 1.4rem;
-        padding: 0 2rem;
-        text-align: center;
-        line-height: 2.8rem;
-        font-size: 14px;
-        cursor: default;
-      }
-      span:last-child {
-        font-weight: bold;
-      }
-    }
-  }
-  .container {
-    display: flex;
-    justify-content: space-between;
-    height: calc(100vh - 98px);
-    padding: 1.2rem 1.6rem;
-    .section-title {
-      display: flex;
-      align-items: center;
-      padding-left: 10px;
-      border-left: 4px solid #025baa;
-      color: #1f2429;
-      font-size: 1.6rem;
-      font-weight: bolder;
-      line-height: 2rem;
-      cursor: pointer;
-      img {
-        width: 2rem;
-        margin-left: 1.2rem;
-      }
-    }
-
-    .system-general {
-      width: 25.4%;
-      box-sizing: border-box;
-      background: white;
-      .system-main-title {
-        padding: 2rem 0 2.4rem 1.6rem;
-      }
-      .system-list {
-        height: 80vh;
-        overflow-y: auto;
-        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 #eff0f1;
-            border-radius: 4px;
-            transition: 0.5s;
-            cursor: pointer;
-            .system-name {
-              position: absolute;
-              top: 0;
-              bottom: 0;
-              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.6rem;
-              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;
-                .number {
-                  width: 30%;
-                  margin-right: 1%;
-                  background: #eff0f1;
-                  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;
-                      color: #1f2429;
-                      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;
-                      color: #f54e45;
-                      background: #fde3e2;
-                    }
-                  }
-                  p {
-                    span:first-child {
-                      color: #1f2429;
-                      font-size: 1.8rem;
-                      font-weight: bold;
-                    }
-                    .amount {
-                      font-size: bold;
-                    }
-                  }
-                }
-              }
-            }
-          }
-          li.selected {
-            border-color: rgba(0, 118, 197, 0.6);
-            box-shadow: 0 2px 10px 0px rgba(0, 118, 197, 0.4);
-          }
-          li:hover {
-            border-color: #e4e5e7;
-            box-shadow: 0 2px 10px 0px rgba(195, 199, 203, 0.4);
-          }
-          li:nth-of-type(1),
-          li:nth-of-type(4),
-          li:nth-of-type(7) {
-            .system-name {
-              background: linear-gradient(to left, #4064cc, #6c8be2);
-            }
-          }
-          li:nth-of-type(2),
-          li:nth-of-type(5),
-          li:nth-of-type(6) {
-            .system-name {
-              background: linear-gradient(to left, #3998db, #70bbef);
-            }
-          }
-          li:nth-of-type(3),
-          li:nth-of-type(8) {
-            .system-name {
-              background: linear-gradient(to left, #30ae88, #53d5b1);
-            }
-          }
-        }
-      }
-    }
-    .map-box {
-      width: calc(56.6% - 2.4rem);
-      margin: 0 12px;
-      .cards-list {
-        display: flex;
-        justify-content: space-between;
-        .card {
-          width: 50%;
-          box-sizing: border-box;
-          border-radius: 4px;
-          background: white;
-          .card-title {
-            position: relative;
-            height: 5rem;
-            display: flex;
-            align-items: center;
-            padding: 10px 12px;
-            color: white;
-            font-size: 16px;
-            border-radius: 4px;
-            background-image: url("../../assets/images/icons/title_bg.png");
-            background-position: center center;
-            background-size: 100%;
-            img {
-              width: 2rem;
-              height: 2rem;
-              margin-right: 1.2rem;
-            }
-          }
-          .describe {
-            padding: 2rem 4rem;
-          }
-        }
-        div:first-child.card {
-          margin-right: 12px;
-        }
-
-        div:nth-of-type(1) .img {
-          background: rgba(130, 199, 252, 0.14);
-        }
-        div:nth-of-type(2) .img {
-          background: rgba(0, 214, 185, 0.14);
-        }
-
-        strong {
-          color: #1f2429;
-          font-size: 2.4rem;
-          margin-left: 3rem;
-        }
-      }
-      .map-container {
-        position: relative;
-        height: 90%;
-        #map {
-          height: 100%;
-          overflow: hidden;
-
-          svg {
-            pointer-events: none;
-          }
-        }
-        .legend {
-          position: absolute;
-          left: 1.4rem;
-          bottom: 10rem;
-          padding: 0.6rem;
-          background: white;
-          .legend-bar {
-            display: flex;
-            align-items: center;
-            span {
-              display: inline-block;
-              height: 4px;
-              width: 20px;
-              margin-right: 12px;
-            }
-          }
-        }
-      }
-    }
-    .ratio-list {
-      width: 18%;
-      .block {
-        position: relative;
-        padding: 1.2rem 1.6rem;
-        height: calc((100% - 2rem) / 3);
-        border-radius: 4px;
-        margin-bottom: 1rem;
-        background: white;
-        // overflow: auto;
-        transition: height 0.3s ease-in-out;
-        .section-title {
-          font-size: 1.6rem;
-        }
-        .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: #646c73;
-                  font-size: 1.4rem;
-                }
-              }
-              .bar {
-                position: relative;
-                height: 6px;
-                border-radius: 3px;
-                background: #c3c7cb;
-                .inner-bar {
-                  position: absolute;
-                  height: 6px;
-                  left: 0;
-                  top: 0;
-                  border-radius: 3px;
-                }
-              }
-            }
-          }
-        }
-        .arrow {
-          position: absolute;
-          bottom: 0;
-          left: 50%;
-          cursor: pointer;
-          transform-origin: center center;
-          transform: translateX(-50%) rotate(90deg);
-        }
-      }
-      section:last-child.block {
-        margin-bottom: 0;
-      }
-    }
-  }
-}
 </style>