初始提交

src/assets/css/RightTzsb.scss

@@ -0,0 +1,389 @@
+.tab_box {
+  display: flex;
+  justify-content: space-between;
+  color: #58a4fa;
+  // margin-bottom: 10px;
+  padding: 0 5px;
+
+  >div {
+    padding: 8px 5px;
+    cursor: pointer;
+  }
+
+  >img {
+    height: 40px;
+    width: 30px;
+    cursor: pointer;
+  }
+
+  .isSelect {
+    color: #fe9037;
+    position: relative;
+  }
+
+  .isSelect::after {
+    content: "";
+    position: absolute;
+    height: 2px;
+    width: 30px;
+    background: #fe9037;
+    bottom: 0;
+    z-index: 99;
+    left: 50%;
+    margin-left: -15px;
+  }
+
+  .twoTab {
+    padding: 8px 40px;
+    cursor: pointer;
+  }
+}
+
+.tj-card-body {
+  padding: 10px 5px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+  position: relative;
+
+  .xzss {
+    position: absolute;
+    width: 22rem;
+    left: -354px;
+    top: 2px;
+    background: rgba(5, 35, 66, 0.95);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px;
+    border-radius: 5px;
+    color: #fff;
+
+    input {
+      flex: 7;
+      line-height: 22px;
+      color: #fff;
+    }
+
+    .search {
+      background: #067cd2;
+      color: #fff;
+      margin-left: 5px;
+      width: 50px;
+      text-align: center;
+      padding: 5px 0;
+      flex: 1;
+    }
+  }
+
+  .dtgzy_box {
+    height: calc(100% - 122px);
+
+    .qcyj_tab {
+      display: flex;
+      justify-content: space-between;
+      padding: 5px;
+
+      .isSelectTab {
+        box-shadow: inset 0px 0px 10px 0px #067cd2;
+      }
+
+      >span {
+        color: #fff;
+        display: inline-block;
+        border: 1px solid #1f99c7;
+        width: 23%;
+        text-align: center;
+        line-height: 30px;
+        cursor: pointer;
+      }
+    }
+
+    .xcsb_tab {
+      >span {
+        width: 19%;
+      }
+
+      >span:nth-child(4) {
+        width: 21%;
+      }
+
+      >span:nth-child(5) {
+        width: 16%;
+      }
+    }
+
+    .ry_total {
+      display: flex;
+      justify-content: space-between;
+      color: #fff;
+      padding: 10px 50px;
+      height: 95px;
+
+      .ryzs,
+      .zdrys {
+        text-align: center;
+        cursor: pointer;
+
+        >span {
+          font-size: 38px;
+          font-weight: 600;
+          font-family: LenFont;
+          display: inline-block;
+          padding: 3px 7px;
+          margin-bottom: 10px;
+          text-align: center;
+          background: url(~@/assets/images/images/zdry_total.png) no-repeat;
+          background-size: 105% 100%;
+          // background-image: linear-gradient(to right rgba(6,40,103,1),rgba(6,40,103,0.5),rgba(0,0,0,0));
+        }
+
+        .isSelectRy {
+          position: relative;
+          color: #fe9037;
+        }
+
+        .isSelectRy::after {
+          position: absolute;
+          content: "";
+          height: 2px;
+          width: 60px;
+          background: #fe9037;
+          bottom: -8px;
+          left: 50%;
+          margin-left: -30px;
+        }
+      }
+
+      .zdrys {
+        >span {
+          color: #ff0000;
+        }
+      }
+    }
+  }
+
+  .right_box {
+    overflow: auto;
+    // &::-webkit-scrollbar {
+    //   display: none;
+    // }
+    overflow-x: hidden;
+    // padding: 0 5px;
+    height: calc(100% - 100px);
+  }
+
+  .scsb_box {
+    color: #fff;
+    height: 100%;
+  }
+
+  .qcyj {
+    height: calc(100% - 50px);
+
+    .list-box {
+      height: 80%;
+
+
+    }
+  }
+
+  .dtgz_box {
+    margin: 8px 8px;
+    color: #fff;
+    display: flex;
+    justify-content: space-between;
+
+    .left_line {
+      width: 10px;
+      border-left: 1px solid #eeeeee52;
+      position: relative;
+      top: 10px;
+      flex: 1;
+    }
+
+    .left_line::after {
+      position: absolute;
+      content: "";
+      width: 8px;
+      height: 8px;
+      background: #3680f0;
+      top: -8px;
+      left: -5px;
+      border-radius: 50%;
+    }
+
+    .item_box {
+      flex: 24;
+
+      .item {
+        display: flex;
+        border: 1px solid #067cd2;
+        box-shadow: inset 0px 0px 10px 0px #067cd2;
+        margin: 8px 0px 0 0;
+        padding: 12px;
+        border-radius: 5px;
+
+        .imgs {
+          margin-right: 10px;
+
+          img {
+            width: 60px;
+            height: 80px;
+          }
+
+          div {
+            color: #f97409;
+            margin-top: 10px;
+          }
+        }
+
+        .user_box {
+          >div {
+            padding: 3px 0;
+            color: #fff;
+          }
+
+          .name {
+            font-size: 14px;
+            color: #6ccef5;
+          }
+
+          .but_box {
+            text-align: right;
+
+            >span {
+              color: #fff;
+              display: inline-block;
+              padding: 0.25rem 0.6rem;
+              border-radius: 3px;
+              border: 1px solid #3180ea;
+              cursor: pointer;
+            }
+          }
+        }
+
+        .address_and_but {
+          bottom: 0;
+        }
+      }
+
+      .yellow {
+        border: 1px solid #ffb139;
+        box-shadow: inset 0 0 10px #ffb139 !important;
+      }
+
+      .orange {
+        border: 1px solid #ff6c00;
+        box-shadow: inset 0 0 10px #ff6c00 !important;
+      }
+
+      .red {
+        border: 1px solid #f61d4b;
+        box-shadow: inset 0 0 10px #f61d4b !important;
+      }
+
+      .qcyj_item {
+        flex-direction: column;
+        cursor: pointer;
+
+        .qcyj_ryxi {
+          display: flex;
+          margin-bottom: 10px;
+        }
+
+        .address_and_but {
+          .item_address {
+            display: flex;
+            justify-content: space-between;
+            padding-top: 11px;
+            border-top: 1px solid #162f55;
+
+            .address {
+              color: #6586af;
+            }
+          }
+
+          .but_box {
+            text-align: center;
+            color: #fff;
+            padding: 0.8rem 0 0.2rem 0;
+
+            >span {
+              display: inline-block;
+              padding: 0.25rem 0.6rem;
+              border-radius: 3px;
+              border: 1px solid #3180ea;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.tj-card-title {
+  height: 36px;
+  line-height: 36px;
+  background: url(~@/assets/img/header.png) no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+  color: #6ccef5;
+  margin: 0 auto;
+  font-size: 16px;
+  margin: 0 5px 5px;
+  position: relative;
+  z-index: 1999;
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+  padding: 0 20px;
+  cursor: pointer;
+}
+
+.showBigImg {
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99999999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .image_box {
+    width: 950px;
+    height: 550px;
+    background: rgba(5, 35, 66, 1);
+    padding: 20px;
+    border-radius: 8px;
+    position: absolute;
+    left: 50%;
+    margin-left: -475px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+
+    .close_box {
+      position: absolute;
+      font-size: 16px;
+      top: 3px;
+      right: 3px;
+      color: #fff;
+      cursor: pointer;
+    }
+
+  }
+}
+
+.empty {
+  color: #fff;
+  text-align: center;
+  height: 500px;
+  line-height: 500px;
+}

src/assets/css/element-plus.scss

@@ -0,0 +1,313 @@
+::v-deep .el-button--default {
+  color: #fff;
+  border: 1px solid #1558a4;
+  background: #052362;
+
+  &:hover {
+    border: 1px solid #106fdc;
+  }
+}
+::v-deep .el-button {
+  color: #fff;
+  border: 1px solid #1558a4;
+  --el-button-bg-color: #052362;
+
+  &:hover {
+    border: 1px solid #106fdc;
+  }
+}
+::v-deep .el-button:focus,
+::v-deep .el-button:hover {
+  background-color: #052362;
+}
+:v-deep .el-card {
+  border: 1px solid #146bbe;
+  background: #00143d;
+  padding: 10px 0;
+}
+
+::v-deep .el-form-item__label {
+  color: #fff;
+}
+
+::v-deep .el-input__inner {
+  background-color: #062a48;
+  border: 1px solid #114260;
+  color: #fff;
+
+  &:hover {
+    border: 1px solid #0065d8;
+  }
+
+  &:focus {
+    border: 1px solid #1c84fa;
+    box-shadow: 0px 0px 8px #0a6bfc;
+  }
+}
+.el-button.is-disabled,
+.el-button.is-disabled:focus,
+.el-button.is-disabled:hover {
+  color: var(--el-button-disabled-text-color);
+  cursor: not-allowed;
+  background-image: none;
+  background-color: #808596;
+  border-color: var(--el-button-disabled-border-color);
+}
+::v-deep .el-input-group__append {
+  // background: #001238;
+  // border: 1px solid #03438b;
+  background-color: #062a48;
+  border: 1px solid #114260;
+  color: #fff;
+}
+
+::v-deep .el-select:hover:not(.el-select--disabled) .el-input__inner {
+  border: 1px solid #0065d8;
+}
+
+::v-deep .el-table {
+  background-color: rgba($color: #000000, $alpha: 0);
+  --el-table-border-color: #0a467e;
+  --el-table-row-hover-bg-color: #212e3e;
+}
+
+::v-deep .el-table th.el-table__cell {
+  background: rgba(6,42,72,.8);
+  color: rgb(99, 251, 255);
+}
+
+::v-deep .el-table tr {
+  background-color: rgba($color: #000000, $alpha: 0);
+}
+
+::v-deep .el-table td.el-table__cell {
+  color: #b9beca;
+  background: rgba(6,42,72,.8);
+  border-top: 1px solid #1f4164;
+}
+
+::v-deep .el-pagination button:disabled {
+  background-color: transparent;
+  color: #84a2be;
+}
+
+::v-deep .el-pagination button {
+  background-color: transparent;
+  color: rgb(255, 255, 255);
+}
+
+::v-deep .el-pager li {
+  background: transparent;
+  color: #8fceff;
+}
+
+::v-deep .el-pager li.active {
+  background: transparent;
+  color: #ffa861;
+  border-radius: 50%;
+}
+
+::v-deep .el-tree {
+  background: transparent;
+  color: #24b6dd;
+}
+
+::v-deep .el-checkbox {
+  color: #fff;
+}
+
+// ::v-deep .el-tree-node__content {
+//     background: none;
+// }
+
+::v-deep .is-focusable {
+  background:transparent !important;
+}
+
+::v-deep .el-tree-node__label {
+  background: #1f4164 !important;
+}
+
+::v-deep .el-tree-node__content:hover {
+  color: #61f9ff;
+  background: transparent;
+}
+
+.el-button--default {
+  color: #fff;
+  border: 1px solid #1558a4;
+  background: #052362;
+
+  &:hover {
+    border: 1px solid #07376d;
+  }
+}
+::v-deep .el-button--primary {
+  background: #1983e5;
+  border: 1px solid #1983e5;
+  &:hover {
+    background: #0084ff;
+    border: 1px solid #0084ff;
+  }
+}
+::v-deep .el-dialog__title {
+  color: #fff;
+}
+::v-deep .el-dialog__header,
+::v-deep .el-dialog__body,
+::v-deep .el-dialog__footer,
+::v-deep .el-card__body,
+::v-deep .el-table {
+  // background: #02163b;
+  background: #02163b00;
+}
+::v-deep .user-main-wrap {
+  border: 1px solid #07376d;
+}
+
+::v-deep .el-textarea__inner {
+  // background: #001238;
+  // border: 1px solid #03438b;
+  background-color: #062a48;
+  border: 1px solid #114260;
+  color: #fff;
+
+  &:hover {
+    border: 1px solid #0065d8;
+  }
+
+  &:focus {
+    border: 1px solid #1c84fa;
+    box-shadow: 0px 0px 8px #0a6bfc;
+  }
+}
+::v-deep .el-input .el-input__count .el-input__count-inner {
+  background: transparent;
+  color: #fff;
+}
+::v-deep .el-textarea .el-input__count {
+  background: transparent;
+  color: #fff;
+}
+::v-deep .el-select__popper.el-popper {
+  background: #16284c;
+  border: #16284c;
+}
+::v-deep .el-range-input {
+  background: transparent;
+  color: #fff;
+}
+::v-deep .el-range-separator {
+  color: #fff;
+}
+::v-deep .el-button--danger {
+  background: #f56c6c;
+  border: 1px solid #f56c6c;
+}
+::v-deep .el-tree {
+  --el-tree-node-hover-bg-color: #083960;
+}
+::v-deep .el-tree-node__label {
+  background: transparent !important;
+}
+::v-deep .el-card {
+  border: 1px solid #07539a;
+  color: #fff;
+}
+::v-deep .el-collapse {
+  background: transparent;
+  color: #fff;
+  --el-collapse-header-bg-color: transparent;
+  --el-collapse-header-text-color: #fff;
+  --el-collapse-content-bg-color: transparent;
+  --el-collapse-content-text-color: #fff;
+  --el-collapse-border-color: #0d3f6e;
+}
+::v-deep .el-tabs__item {
+  color: rgb(206, 208, 220);
+}
+::v-deep .el-tabs__nav-wrap::after {
+  background: #0d3f6e;
+}
+::v-deep .el-upload--picture-card {
+  background-color: #112b63;
+  border: 1px dashed #4579b5;
+}
+::v-deep .el-upload-list--picture-card .el-upload-list__item {
+  background-color: #10295b;
+  border: 1px solid #19538a;
+  color: #ced0dc;
+}
+.toastui-editor-defaultUI {
+  position: relative;
+  border: 1px solid #dadde6;
+  height: 100%;
+  font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial",
+    "나눔바른고딕", "Nanum Barun Gothic", "맑은고딕", "Malgun Gothic",
+    sans-serif;
+  border-radius: 4px;
+  background: #fff;
+  color: #303133;
+}
+::v-deep .el-select__popper.el-popper[role="tooltip"] {
+  background: #03163c;
+}
+::v-deep .el-dialog__body {
+  padding: 10px 20px;
+}
+::v-deep .el-pagination__total,
+::v-deep .el-pagination__jump {
+  color: #bdc7da;
+}
+::v-deep .el-radio {
+  color: rgb(206, 208, 220);
+}
+::v-deep .el-input-number__decrease,
+::v-deep .el-input-number__increase {
+  background: #03163c;
+}
+
+::v-deep .el-tag {
+  background: transparent;
+  border: 1px solid #19538a;
+  margin: 0 0.2rem;
+}
+::v-deep .el-select .el-select__tags .el-tag--info {
+  background: transparent;
+  border: 1px solid #19538a;
+  color: #0065d8;
+}
+
+// ::v-deep .el-overlay .el-overlay-dialog .el-dialog{
+//   border: 1px solid red;
+// }
+::v-deep .el-overlay .el-overlay-dialog .el-dialog .el-dialog__body .tabBox {
+  height: 450px;
+}
+::v-deep .el-date-editor .el-range-separator {
+  color: #fcfcfc;
+}
+::v-deep .el-date-editor .el-range-input {
+  color: #ffffff;
+}
+::v-deep .el-input.is-disabled .el-input__inner {
+  background-color: #062a48;
+  border: 1px solid #114260;
+  // background-color: #001238;
+  // border-color: #03438b;
+}
+::v-deep .el-input-number__decrease {
+  border-right: 1px solid #23466d;
+}
+::v-deep .el-input-number__increase {
+  border-left: 1px solid #23466d;
+}
+.el-input-number.is-disabled ::v-deep .el-input-number__decrease,
+.el-input-number.is-disabled ::v-deep .el-input-number__increase {
+  border-color: #23466d;
+}
+
+::v-deep .el-select {
+  width: 100%;
+}
+

src/assets/css/homeScreen.scss

@@ -0,0 +1,409 @@
+.bigScrenn {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+  background: #001022;
+  position: relative;
+  .headBox {
+    position: absolute;
+    height: 90px;
+    width: 100%;
+    background: #001022;
+    top: 0;
+    .top{
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      height: 100%;
+      background: url('~@/assets/my/top.png') no-repeat center center;
+      padding: 0 4px;
+      .top-left{
+          display: flex;
+          margin-top: 30px;
+          .qwbg{
+              width: 150px;
+              height: 48px;
+              background: url('~@/assets/my/rcqw.png') no-repeat center center;
+          }
+          .time{
+              margin-left: 38px;
+              font-style:italic;
+              font-weight: bolder;
+              .timer{
+                  font-size: 24px;
+                  letter-spacing: 3px;
+                  color: #fff;
+              }
+              .week{
+                  color: #00ADFF;
+                  font-size: 14px;
+              }
+
+          }
+      }
+      .top-right{
+          display: flex;
+          margin-top: 30px;
+          align-items: center;
+          .info{
+              display: flex;
+              align-items: center;
+              .text{
+                  color: #e6ffff;
+                  font-size: 15px;
+                  margin-left: 14px;
+                  line-height: 23px;
+                  .dept{
+                    max-width: 200px;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                  }
+              }
+          }
+          .meun{
+              margin-left: 30px;
+              margin-right: 4px;
+          }
+          .el-dropdown-tools{
+              display: inline-block;
+              width: 40px;
+              height: 40px;
+              border: 1px solid rgb(20, 135, 180);
+              border-radius: 50%;
+              text-align: center;
+              .el-dropdown-tools-n{
+                  display: inline-block;
+                  width: 34px;
+                  height: 34px;
+                  border: 1px solid #fff;
+                  border-radius: 50%;
+                  background: #9ec6fc;
+                  text-align: center;
+                  line-height: 32px;
+                  margin-top: 2px;
+                  padding-top: 2px;
+                  box-sizing: border-box;
+              }
+          }
+      }
+    }
+  }
+  .asideBox {
+    position: absolute;
+    top: 90px;
+    height: calc(100vh - 90px);
+    width: 386px;
+    background: #001022;
+    z-index: 2;
+    .boder-small{
+      height: 320px;
+      background: url('~@/assets/my/border-s.png') no-repeat center center;
+      background-size: 100% 100%;
+    }
+    .boder-middle{
+      height: calc(100% - 320px);
+      background: url('~@/assets/my/border-m.png') no-repeat center center;
+      background-size: 100% 100%;
+    }
+    .boder-big{
+      height: 100%;
+      background: url('~@/assets/my/border-b.png') no-repeat center center;
+      background-size: 100% 100%;
+    }
+    .boxContent{
+        height: 100%;
+        padding: 20px 20px 10px;
+        box-sizing: border-box;
+        .box-title{
+          position: relative;
+          height: 40px;
+          line-height: 40px;
+          font-size: 18px;
+          color: #e6ffff;
+          font-weight: 600;
+          letter-spacing: 2px;
+          text-shadow: 0 0 6px #fff;
+          padding-left: 10px;
+          box-sizing: border-box;
+        }
+        .box-title::after{
+          position: absolute;
+          content: '';
+          left: 10px;
+          bottom: 0px;
+          height: 1px;
+          width: 34px;
+          background: #e6ffff;
+          border-radius: 4px;
+          box-shadow: 0 0 1.6px 1.6px #fff;
+      }
+        .boxInfo{
+          height: calc(100% - 70px);
+          margin-top: 8px;
+        } 
+    }
+  }
+  .addBox {
+    position: absolute;
+    bottom: 52px;
+    pointer-events: auto;
+    cursor: pointer;
+    .imgBox{
+      width: 111px;
+      height: 112px;
+      background: url('~@/assets/images/qwddd.png') no-repeat center center;
+      text-align: center;
+      span{
+        display: inline-block;
+        width: 30px;
+        margin-top: 36px;
+        font-size: 14px;
+      }
+    }
+  }
+  @mixin sircle {
+    position: absolute;
+    width: 73px;
+    height: calc(100vh - 90px);
+    top: 90px;
+  } 
+  .leftSiecle{
+    @include sircle;
+    background: url('~@/assets/my/left-arrow.png') no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .rightSiecle{
+    @include sircle;
+    right: 370px;
+    background: url('~@/assets/my/right-arrow.png') no-repeat center center;
+    background-size: 100% 100%;
+  }
+
+  // 尾部
+  .footBox{
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 800px;
+    height: 54px;
+    .btnsBox{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      .btnsItem{
+        position: relative;
+        cursor: pointer;
+        .resourceBox{
+          display: none;
+          position: absolute;
+          bottom: 37px;
+          left: 50%;
+          transform: translateX(-50%);
+          padding: 10px 10px 24px 10px;
+          box-sizing: border-box;
+          .contant{
+            position: relative;
+            padding: 20px 10px;
+            box-sizing: border-box;
+            background: url('~@/assets/my/zy-b.png') no-repeat center center;
+            background-size: 100% 100%;
+            .name{
+              color: #00BFFF;
+            }
+            .footerCheck{
+              display: flex;
+              justify-content: center;
+              .el-checkbox-group{
+                text-align: center;
+              }
+            }
+          }
+          .contantAcross{
+            background: url('~@/assets/my/zy-s.png') no-repeat center center;
+            background-size: 100% 100%;
+          }
+        }
+        .resourceBoxOther{
+          display: block;
+        }
+      }
+      .btnsItem:hover .resourceBox{
+        display: block;
+      }
+    }
+  }
+  .popover{
+    position:absolute;
+    background:#08226a;
+    left: 264px;
+    top: 32px;
+    width: 220px;
+    padding: 6px;
+    box-sizing: border-box;
+    border-radius:4px;
+    .el-tag{
+      margin:4px 2px;
+    }
+  }
+  .popover::before{
+    content:'';
+    position: absolute;
+    top: 46px;
+    left: -15px;
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border: 8px solid transparent;
+    border-right-color: #08226a;
+    z-index:989;
+  }
+}
+.dialogBox {
+  // width: 360px;
+  // position: absolute;
+  // top: 91px;
+  // left: 388px;
+  padding: 0 0 10px 0;
+  box-sizing: border-box;
+  background: url('~@/assets/my/dialog-bg.png') no-repeat center center;
+  background-size: 100% 100%;
+  z-index: 999;
+  border-radius: 4px;
+  >.title {
+    height: 38px;
+    line-height: 38px;
+    margin: 0 4px;
+    display: flex;
+    border-bottom: 1px solid #275288;
+    margin-bottom: 6px;
+    justify-content: space-between;
+    align-items: center;
+    background-image: linear-gradient(to right,rgba(1,127,216,1),rgba(4,56,131,.5),rgba(1,130,218,.0));
+    .close {
+      font-size: 20px;
+      font-weight: 200;
+      cursor: pointer;
+      margin-right: 10px;
+    }
+    .mc {
+      margin-left: 10px;
+    }
+  }
+  .infoBox {
+    border: none;
+    position: relative;
+    // border: 1px solid #275288;
+    padding: 10px 0 4px;
+    box-sizing: border-box;
+  }
+
+  .addressBox {
+    border-top: 1px solid #162f55;
+    margin: 0 10px;
+    // height: 30px;
+    line-height: 24px;
+    display: flex;
+    justify-content: space-between;
+
+    img,
+    span {
+      vertical-align: middle;
+    }
+
+    img {
+      margin-right: 4px;
+    }
+  }
+
+  >.btnBox {
+    text-align: center;
+    padding-top: 8px;
+    padding-bottom: 12px;
+    margin-bottom: 10px;
+    button {
+      margin: 0 2px;
+    }
+  }
+}
+button.dp-default {
+  border: 1px solid #3180ea;
+  box-shadow: inset 0 0 18px #2b8ce6;
+  background: #001022;
+  color: #fff;
+  height: 30px;
+  padding: 0 15px;
+  border-radius: 3px;
+  cursor: pointer;
+
+  &.small {
+    height: 22px;
+    line-height: 20px;
+    vertical-align: middle;
+    padding: 0 6px;
+    box-shadow: inset 0 0 10px #2b8ce6;
+    font-size: 12px;
+
+    span,
+    svg {
+      vertical-align: middle;
+    }
+  }
+}
+
+.tag {
+  display: inline-block;
+  background-color: #999;
+  font-size: 11px;
+  border-radius: 2px;
+  margin-left: 3px;
+  color: #fff;
+  width: 40px;
+  text-align: center;
+  height: 20px;
+  line-height: 20px;
+  vertical-align: middle;
+  &.blue {
+    background-color: #0b9ff4;
+  }
+
+  &.orange {
+    background-color: #e15923;
+  }
+
+  &.red {
+    background-color: #e21c1c;
+  }
+
+  &.yellow {
+    background-color: #d6d301;
+  }
+
+  &.green {
+    background-color: #56db2d;
+  }
+
+  &.mj {
+    background-color: #4995fd;
+  }
+
+  &.fj {
+    background-color: #3ad2d4;
+  }
+}
+.xlStatus{
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 56px;
+  text-align: center;
+  height: 24px;
+  line-height: 24px;
+  border-bottom-left-radius: 10px;
+  cursor: pointer;
+}
+.line{ background: #00bc65; }
+.lineing{ background: #AB0F0B; }
+.unline{ background: #808080; }

src/assets/css/layout.scss

@@ -0,0 +1,366 @@
+header {
+  height: 88px;
+  background: top 10px center #001022;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: url('~@/assets/lz/top.png') no-repeat center center ;
+  .logo{ padding-left: 8px; }
+ 
+  .right {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    z-index: 1999;
+    position: relative;
+    padding-right: 10px;
+    .detail {
+      display: flex;
+      cursor: pointer;
+      .hd {
+        white-space: nowrap;
+        color: #ffffff;
+        font-size: 14px;
+        line-height: 20px;
+        margin: 10px 10px 0 10px;
+      }
+
+      .el-dropdown {
+        width: 30px;
+        height: 47px;
+        margin-top: 13px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+    
+  }
+
+}
+
+@keyframes rotateCircleSecondB {
+  from {
+    transform: rotate(-360deg);
+    -ms-transform: rotate(-360deg);
+    -moz-transform: rotate(-360deg);
+    -webkit-transform: rotate(-360deg);
+  }
+
+  to {
+    transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+  }
+}
+
+//新增弹窗样式
+.total {
+  color: #fff;
+  height: 34px;
+  line-height: 44px;
+
+  .numb {
+    font-size: 24px;
+    display: inline-block;
+    margin: 0 8px;
+  }
+}
+
+.dialog::-webkit-scrollbar-track {
+  background-color: rgb(2, 19, 74);
+}
+
+.dialog::-webkit-scrollbar {
+  width: 8px;
+}
+
+.dialog::-webkit-scrollbar-thumb {
+  background-color: rgb(26, 5, 132);
+}
+
+.dialog {
+  position: absolute;
+  height: calc(100vh - 137px);
+  overflow: auto;
+  border: 1px solid #07376d;
+  top: 10px;
+  right: 10px;
+  left: 10px;
+  background-color: #02163b;
+  z-index: 998;
+  color: #fff;
+  .zqjl {
+    box-sizing: border-box;
+    padding: 40px 40px 20px;
+    position: relative;
+    font-size: 14px;
+  }
+
+  .zqjl::after {
+    content: "";
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: #3f6bc2;
+    top: 10px;
+    left: 9px;
+  }
+
+  .zqjl::before {
+    content: "";
+    position: absolute;
+    width: 2px;
+    top: 10px;
+    left: 16px;
+    bottom: -10px;
+    background-color: #3f6bc2;
+  }
+
+  .txmap {
+    height: calc(100vh - 167px);
+    overflow: hidden;
+  }
+
+  .zqjlinfo {
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+    box-sizing: border-box;
+    background-color: #052f57;
+
+    > span {
+      position: absolute;
+      left: 0px;
+      top: -28px;
+    }
+
+    > div {
+      padding: 8px 16px;
+      color: rgb(45, 74, 238);
+
+      > span {
+        color: #ccc;
+      }
+    }
+  }
+
+  .head_box {
+    height: 48px;
+    margin: 0 20px;
+    border-bottom: 1px solid #07376d;
+    display: flex;
+    justify-content: space-between;
+    line-height: 48px;
+  }
+
+  &::v-deep .el-form--inline {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 2rem 12rem 0rem 12rem;
+  }
+
+  &::v-deep .el-form-item--default {
+    width: 23%;
+    padding-bottom: 20px;
+    margin: 0 1%;
+  }
+
+  &::v-deep .el-form-item--default.two {
+    width: 46%;
+    padding-bottom: 20px;
+    margin: 0 1%;
+  }
+
+  &::v-deep .el-form-item--default.one {
+    width: 92%;
+    padding-bottom: 20px;
+    margin: 0 1%;
+  }
+
+  &::v-deep .el-textarea__inner {
+    height: 7.5em;
+    border: 1px solid #07376d;
+    background-color: #02163b;
+  }
+}
+
+.searchBox {
+  border: 1px solid #07539a;
+  background: transparent;
+  padding: 15px 15px 0 15px;
+  border-radius: 1px;
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: -1px;
+    left: -1px;
+    width: 10px;
+    height: 10px;
+    border: solid #6fb2ff;
+    border-width: 0 0 2px 2px;
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    bottom: -1px;
+    right: -1px;
+    width: 10px;
+    height: 10px;
+    border: solid #6fb2ff;
+    border-width: 0 2px 2px 0;
+  }
+}
+
+.app-main {
+  height: calc(100vh - 126px);
+  position: relative;
+  overflow: hidden;
+  padding: 0px 20px 20px 20px;
+  box-sizing: border-box;
+
+  .titleBox {
+    height: 60px;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    z-index: 2;
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: -12px;
+      left: 0px;
+      width: 10px;
+      height: 10px;
+      border: solid #6fb2ff;
+      border-width: 2px 0 0 2px;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      bottom: -12px;
+      right: 0px;
+      width: 10px;
+      height: 10px;
+      border: solid #6fb2ff;
+      border-width: 2px 2px 0 0;
+    }
+    .title {
+      height: 60px;
+      line-height: 60px;
+      font-size: 18px;
+      color: #fff;
+    }
+
+    .btnBox {
+      margin-top: 14px;
+    }
+  }
+
+  .tabBox {
+    width: 100%;
+    position: relative;
+    .el-table--fit {
+      position: absolute;
+      top: 0;
+      right: 1px;
+      left: 0px;
+      height: calc(100% - 100px);
+      overflow: auto;
+    }
+
+    margin-top: 15px;
+
+    .fenye {
+      border: solid #0a467e;
+      border-width: 0 1px 1px 1px;
+      position: absolute;
+      right: 0px;
+      left: 0px;
+    }
+  }
+}
+
+::v-deep .el-card {
+  --el-card-border-color: #143578;
+  --el-card-border-radius: 4px;
+  --el-card-padding: 20px;
+  --el-card-bg-color: #17096130;
+}
+
+::v-deep .el-dialog {
+  --el-dialog-bg-color: #061639;
+}
+
+.main-box {
+  display: flex;
+  margin-top: 15px;
+
+  .treeBox {
+    // width: 280px;
+    flex-shrink: 0;
+    border: solid #0a467e;
+    border-width: 1px 0 1px 1px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .tabBox {
+    margin-top: 0;
+    width: calc(100% - 1px);
+  }
+
+  .user-main-wrap {
+    overflow: hidden;
+    width: calc(100% - 260px);
+
+    .el-table--fit {
+      float: right;
+      width: 800px;
+    }
+  }
+}
+
+.content-box-sun{
+  display: flex;
+  .org-box{
+    flex: 1;
+    .org-content-box {
+      width: 95%;
+      .org-search-box {
+        display: flex;
+      }
+      .tree-box{
+        height: 750px;
+        overflow: auto;
+      }
+    }
+  }
+  .right-box-sun{
+    flex: 4;
+  }
+}
+
+.titleBoxs {
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  z-index: 2;
+  .title {
+    height: 60px;
+    line-height: 60px;
+    font-size: 18px;
+    color: #fff;
+  }
+
+  .btnBox {
+    margin-top: 14px;
+  }
+}