'保安项目提交'

src/assets/bigHome/map-marker.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16 2C10.477 2 6 6.477 6 12C6 19.5 16 30 16 30C16 30 26 19.5 26 12C26 6.477 21.523 2 16 2ZM16 16C13.791 16 12 14.209 12 12C12 9.791 13.791 8 16 8C18.209 8 20 9.791 20 12C20 14.209 18.209 16 16 16Z" fill="#00f0ff" stroke="#ffffff" stroke-width="1"/>
+</svg>

src/assets/css/element-plus.scss

@@ -0,0 +1,270 @@
+::v-deep .el-button--default {
+  border: 1px solid #cccccc;
+}
+
+::v-deep .el-button {
+  border: 1px solid #cccccc;
+}
+
+:v-deep .el-card {
+  border: 1px solid #146bbe;
+  background: #00143d;
+  padding: 10px 0;
+}
+
+::v-deep .el-input__inner {
+  background-color: #fff;
+  border: 1px solid #e9e9e9;
+
+  &: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-color: #ffffff;
+  border: 1px solid #e9e9e9;
+  color: #000;
+}
+
+::v-deep .el-select:hover:not(.el-select--disabled) .el-input__inner {
+  border: 1px solid #0065d8;
+}
+
+::v-deep .el-table {
+  background-color: #ffffff;
+  --el-table-border-color: #e4e7ed;
+  --el-table-row-hover-bg-color: #f5f7fa;
+}
+
+::v-deep .el-table__inner-wrapper {
+  background: #fff;
+}
+
+::v-deep .el-table th.el-table__cell {
+  background: #ffffff;
+  color: #000;
+}
+
+::v-deep .el-table td.el-table__cell {
+  color: #000;
+  background: #ffffff;
+}
+
+::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 {
+  &:hover {
+    border: 1px solid #ccc;
+  }
+}
+
+::v-deep .el-button--primary {
+  background: #1983e5;
+  border: 1px solid #1983e5;
+
+  &:hover {
+    background: #0084ff;
+    border: 1px solid #0084ff;
+  }
+}
+
+::v-deep .user-main-wrap {
+  border: 1px solid #07376d;
+}
+
+::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;
+}
+
+::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-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-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 .el-dialog__body .tabBox {
+  height: 450px;
+}
+
+::v-deep .el-date-editor .el-range-separator {
+  color: #fcfcfc;
+}
+
+::v-deep .el-input.is-disabled .el-input__inner {
+  // background-color: #062a48;
+  // border: 1px solid #114260;
+}
+
+::v-deep .el-input-number__decrease {
+  border-right: 1px solid #d2d2d2;
+}
+
+::v-deep .el-input-number__increase {
+  border-left: 1px solid #d2d2d2;
+}
+
+.el-input-number.is-disabled ::v-deep .el-input-number__decrease,
+.el-input-number.is-disabled ::v-deep .el-input-number__increase {
+  border-color: #d2d2d2;
+}
+
+::v-deep .el-select {
+  width: 100%;
+}
+
+::v-deep .el-link {
+  margin: 0 5px;
+}

src/assets/css/homeBigScreen.scss

@@ -0,0 +1,201 @@
+@mixin textColor($color1, $color2) {
+    background-image: linear-gradient(0deg, $color1 0%, $color2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+@mixin positon() {
+    content: "";
+    position: absolute;
+    top: $headHeight;
+    width: 30%;
+    height: calc(100vh - $headHeight);
+}
+
+$headHeight: 4vw; // 头部高度
+$asideWidth: 30vw; // 侧边菜单宽度
+$centerWidth: calc(100% - 60vw); // 中间模块宽度
+$asideMargin: 1vw; // 侧边菜单间距
+.bigScrenn {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    color: #fff;
+    background: url("~@/assets/bigHome/homeBg.png") no-repeat center center;
+    background-size: 100% 100%;
+    &::before {
+        @include positon();
+        left: 0;
+        background: url("~@/assets/bigHome/left.png") no-repeat left center;
+        background-size: 100% 100%;
+    }
+    &::after {
+        @include positon();
+        right: 0;
+        background: url("~@/assets/bigHome/right.png") no-repeat left center;
+        background-size: 100% 100%;
+    }
+    // 头部
+    .home-head-box {
+        position: absolute;
+        width: 100%;
+        height: $headHeight;
+        .top-left {
+            display: flex;
+            align-items: center;
+            position: absolute;
+            left: 2vw;
+            top: 40%;
+            transform: translateY(-50%);
+            font-size: 0.51vw;
+            font-family: "YSBTH";
+            .line{
+                width: 4px;
+                height: 1vw;
+                background: #0072FF;
+                border-radius: 2px 2px 2px 2px;
+                margin: 0 1vw;
+            }
+        }
+
+        .top-center {
+            position: absolute;
+            left: 50%;
+            top: 35%;
+            transform: translateX(-50%) translateY(-50%);
+            font-size: 2.3vw;
+            letter-spacing: 2px;
+            font-family: "YSBTH";
+            white-space: nowrap;
+            background-image: linear-gradient(72deg,#0072ff 0%,#00ffff 18%,#07e9ff 51%,#00ffff 83%,#0072ff 100% );
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-shadow: 4px 4px 4px rgba(54, 255, 243, 0.15);
+        }
+         
+        .topBtn-right {
+            right: 18%;
+            display: flex;
+            position: absolute;
+            top: 40%;
+            transform: translateY(-50%);
+            .topBtn-item {
+                width: 5vw;
+                height: 1.45vw;
+                text-align: center;
+                line-height: 1.35vw;
+                padding-left: 0.3vw;
+                box-sizing: border-box;
+                background: url("~@/assets/bigHome/home_btns_right.png") no-repeat center center;
+                background-size: 100% 100%;
+                font-size: 0.5vw;
+                span {
+                    font-family: "YSBTH";
+                    @include textColor(#a1d6ff, #ffffff);
+                }
+            }
+            .active-topBtn {
+                background: url("~@/assets/bigHome/home_btns_right_active.png") no-repeat center center;
+                background-size: 100% 100%;
+                span {
+                    @include textColor(#00ffff, #faff00);
+                }
+            }
+        }
+        .rightIcon {
+            position: absolute;
+            right: 2vw;
+            top: 20%;
+            font-size: 17px;
+            span {
+                color: #0bb7ff;
+                cursor: pointer;
+            }
+            img {
+                width: 20px;
+            }
+        }
+    }
+    // 侧边菜单
+    .asideBox {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        position: absolute;
+        top: $headHeight;
+        width: $asideWidth;
+        height: calc(100vh - $headHeight);
+        overflow: hidden;
+        padding: 1vw 0 0 0;
+        box-sizing: border-box;
+        z-index: 99;
+    }
+
+    .asideBoxL {
+        left: 0;
+        margin-left: $asideMargin;
+    }
+
+    .asideBoxR {
+        right: 0;
+        margin-right: $asideMargin;
+    }
+    .asideItem {
+        height: 100%;
+        width: 49%;
+        margin: 0px 1px;
+        padding: 2px 4px;
+        overflow: hidden;
+        margin-bottom: 5px;
+    }
+    // 中间模块
+    .centerBox{
+        position: absolute;
+        top: 4vw;
+        left: 50%;
+        width: calc(100% - 2*$asideWidth - 3vw);
+        height: calc(100% - $headHeight);
+        transform: translateX(-50%);
+        .mapBox{
+            width: 100%;
+            height: calc(100% - 110px);
+            margin-bottom: 20px;
+            background: url("~@/assets/bigHome/mapBg.png") no-repeat center center;
+            background-size: 100% 100%;
+            position: relative;
+            &::after{
+                content: "";
+                top: 0;
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                background: url("~@/assets/bigHome/center.png") no-repeat center center;
+                background-size: 100% 100%;
+            }
+        }
+        .mapSorce{
+            width: 100%;
+            height: 90px;
+        }
+    }
+}
+
+@mixin sircle {
+    position: absolute;
+    width: 1.3vw;
+    height: 509px;
+    top: 30%;
+    z-index: 9;
+}
+
+.leftSiecle {
+    @include sircle;
+    background: url("~@/assets/images/fold-bg.png") no-repeat center center;
+    transform: rotate(180deg);
+    background-size: 100% 100%;
+  }
+  .rightSiecle {
+    @include sircle;
+    background: url("~@/assets/images/fold-bg.png") no-repeat center center;
+    background-size: 100% 100%;
+  }

src/assets/css/homeScreen.scss

@@ -0,0 +1,506 @@
+.bigScrenn {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+  background: #001022;
+  position: relative;
+  color: #fff;
+
+  .headBox {
+    position: absolute;
+    height: 90px;
+    width: 100%;
+    background: #001022;
+    top: 0;
+    z-index: 9;
+
+    .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;
+
+        .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-center {
+        width: 340px;
+        height: 90px;
+      }
+
+      .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: 70px;
+    height: calc(100vh - 72px);
+    width: 442px;
+    background: #263445;
+    z-index: 2;
+
+    .boder-small {
+      height: 32.5%;
+      background: url("~@/assets/images/bi/L_B.png") no-repeat center center;
+      background-size: 100% 100%;
+      margin-bottom: 10px;
+    }
+
+    .boder-middle {
+      height: 66%;
+      background: url("~@/assets/images/bi/R_T.png") no-repeat center center;
+      background-size: 100% 100%;
+      margin-bottom: 10px;
+    }
+
+    .boder-big {
+      height: 100%;
+      background: url('~@/assets/my/border-b.png') no-repeat center center;
+      background-size: 100% 100%;
+    }
+
+    .boder-top {
+      height: 280px;
+      background: url('~@/assets/my/border-s.png') no-repeat center center;
+      background-size: 100% 100%;
+    }
+
+    .boder-center {
+      height: calc(100% - 510px);
+      background: url('~@/assets/my/border-s.png') no-repeat center center;
+      background-size: 100% 100%;
+    }
+
+    .boder-bottom {
+      height: 230px;
+      background: url('~@/assets/my/border-s.png') no-repeat center center;
+      background-size: 100% 100%;
+    }
+
+    .boxContent {
+      height: 100%;
+      padding: 6px 20px 10px;
+      box-sizing: border-box;
+
+      .box-title {
+        padding: 0 10px 0 30px;
+        box-sizing: border-box;
+        font-size: 22px;
+        font-family: "YSBTH";
+        background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
+        -webkit-background-clip: text;
+      }
+
+      .boxInfo {
+        height: calc(100% - 50px);
+        margin-top: 8px;
+      }
+
+      .cntBoxInfo {
+        height: calc(100% - 46px);
+        overflow: hidden;
+        overflow-y: auto;
+      }
+    }
+  }
+
+  .addBox {
+    position: absolute;
+    bottom: 70px;
+    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 - 72px);
+    top: 90px;
+  }
+
+  .leftSiecle {
+    @include sircle;
+    background: url('~@/assets/my/left-arrow.png') no-repeat center center;
+    background-size: 100% 100%;
+    z-index: 1;
+  }
+
+  .rightSiecle {
+    @include sircle;
+    right: 370px;
+    background: url('~@/assets/my/right-arrow.png') no-repeat center center;
+    background-size: 100% 100%;
+    z-index: 1;
+  }
+
+  // 尾部
+  .footBox {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 708px;
+    z-index: 10;
+
+    .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;
+    }
+
+    &::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;
+    }
+  }
+
+  .popoverKfd {
+    position: absolute;
+    background: #08226a;
+    left: -199px;
+    top: 100px;
+    width: 270px;
+    padding: 6px;
+    box-sizing: border-box;
+    border-radius: 4px;
+
+    .el-tag {
+      margin: 4px 2px;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 13px;
+      left: 270px;
+      display: inline-block;
+      width: 0;
+      height: 0;
+      border: 8px solid transparent;
+      border-left-color: #08226a;
+      z-index: 989;
+    }
+  }
+}
+
+.dialogBox {
+  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;
+  color: #000;
+}
+
+.line {
+  background: #00bc65;
+}
+
+.lineing {
+  background: #AB0F0B;
+}
+
+.unline {
+  background: #808080;
+}

src/assets/css/layout.scss

@@ -0,0 +1,350 @@
+header {
+  height: 88px;
+  background: url('~@/assets/images/top.png') no-repeat center center;
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .logo {
+    white-space: nowrap;
+    padding-left: 8px;
+    font-size: 55px;
+    letter-spacing: 1px;
+    font-family: "YSBTH";
+    background: linear-gradient(180deg, #FFFFFF 52.4658203125%, #89AFCF 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 4px 4px 4px rgba(255, 255, 255, 0.15);
+  }
+
+  .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: #000;
+  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 #ccc;
+  top: 10px;
+  right: 10px;
+  left: 10px;
+  background-color: #fff;
+  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 #ececec;
+    display: flex;
+    justify-content: space-between;
+    line-height: 48px;
+    color: #000;
+  }
+
+  &::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;
+  }
+}
+
+.searchBox {
+  padding: 15px 15px 0 15px;
+  border-radius: 1px;
+  position: relative;
+  color: #000;
+  background-color: #fff;
+}
+
+.app-main {
+  height: calc(100vh - 126px);
+  position: relative;
+  overflow: hidden;
+  padding: 0px 20px 20px 20px;
+  box-sizing: border-box;
+  background: #e9edf6;
+
+  .titleBox {
+    height: 50px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    z-index: 2;
+    background: #fff;
+    padding: 0 10px;
+    box-sizing: border-box;
+    border-radius: 4px;
+    margin: 5px 0;
+
+    .title {
+      height: 60px;
+      line-height: 60px;
+      font-size: 18px;
+      color: #000;
+    }
+
+    .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 #d2d2d2;
+      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;
+}
+
+.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: #000;
+  }
+
+  .btnBox {
+    margin-top: 14px;
+  }
+}
+.makerTitlezb{
+  color: orangered;
+}

src/assets/css/pulic.scss

@@ -0,0 +1,372 @@
+.font10 {
+  font-size: 10px;
+}
+
+.font12 {
+  font-size: 12px;
+}
+
+.font14 {
+  font-size: 14px;
+}
+
+.font16 {
+  font-size: 16px;
+}
+
+.font18 {
+  font-size: 18px;
+}
+
+.font20 {
+  font-size: 20px;
+}
+
+.font22 {
+  font-size: 22px;
+}
+
+.font24 {
+  font-size: 24px;
+}
+
+.font28 {
+  font-size: 28px;
+}
+
+.font36 {
+  font-size: 36px;
+}
+
+.upColor {
+  color: #d9001b;
+}
+
+.downColor {
+  color: #95f204;
+}
+
+// 分割线
+.divider {
+  background: linear-gradient(
+    90.143958942072deg,
+    rgba(14, 48, 115, 1) 0%,
+    rgba(70, 159, 251, 1) 50%,
+    rgba(14, 48, 115, 1) 100%
+  );
+  height: 1px;
+}
+
+// 不显示滚动条
+.noScollLine::-webkit-scrollbar {
+  width: 0 !important;
+}
+
+.cardBorder {
+  border: 1px solid rgba(24, 99, 232, 1);
+}
+
+//   echarts背景样式
+.echartBoxBg1 {
+  background-color: rgba(0, 0, 0, 0.266666666666667);
+  border-radius: 10px;
+  padding: 5px;
+}
+
+//状态栏
+.warning {
+  background-color: #fff4f6;
+  color: #f4002c;
+}
+
+.finish {
+  background-color: #e7f8f0;
+  color: #0acf83;
+}
+
+.waiting {
+  background-color: #fff6e8;
+  color: #fe7f2e;
+}
+
+.ellipsis2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// 表格里面给人的名字加边框
+.tableUserName {
+  line-height: 24px;
+  font-size: 14px;
+  padding: 2px 0px;
+  border: 1px solid #4d67eb;
+  color: #4d67eb;
+  width: 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.relative {
+  position: relative;
+}
+.absolute {
+  position: absolute;
+}
+
+// 滚动
+.scrollbar {
+  overflow: overlay;
+}
+
+// 浮动
+.fl {
+  float: left;
+}
+
+.fr {
+  float: right;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+/**************文字位置**************/
+.tl {
+  text-align: left;
+}
+
+.tc {
+  text-align: center;
+}
+
+.tr {
+  text-align: right;
+}
+
+.strong {
+  font-weight: bold;
+}
+
+/**************flex************/
+.flex {
+  display: flex;
+}
+.flex-grow1 {
+  flex-grow: 1;
+}
+.shrink0 {
+  flex-shrink: 0;
+}
+
+.flex-warp {
+  flex-wrap: wrap;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.dir-column {
+  flex-direction: column;
+}
+
+.just-between {
+  justify-content: space-between;
+}
+.just-around {
+  justify-content: space-around;
+}
+
+.just-center {
+  justify-content: center;
+}
+
+.just-end {
+  justify-content: flex-end;
+}
+
+.just-start {
+  justify-content: flex-start;
+}
+
+.align-start {
+  align-items: start;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.align-bottom {
+  align-items: flex-end;
+}
+.flexcb {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/**********文本省略***********/
+.nowrap {
+  white-space: nowrap;
+}
+
+.text1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.text2 {
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.text3 {
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+.hidden {
+  overflow: hidden;
+}
+
+.hide {
+  display: none;
+}
+
+.show {
+  display: block;
+}
+
+/**********字体大小和边距***********/
+@for $i from 1 through 1000 {
+  .f#{$i} {
+    font-size: #{$i}px;
+  }
+
+  //外边距
+  .mg#{$i} {
+    margin: #{$i}px;
+  }
+
+  .mt#{$i} {
+    margin-top: #{$i}px;
+  }
+
+  .mr#{$i} {
+    margin-right: #{$i}px;
+  }
+
+  .mb#{$i} {
+    margin-bottom: #{$i}px;
+  }
+
+  .ml#{$i} {
+    margin-left: #{$i}px;
+  }
+
+  //内边距
+  .pd#{$i} {
+    padding: #{$i}px;
+  }
+
+  .pt#{$i} {
+    padding-top: #{$i}px;
+  }
+
+  .pr#{$i} {
+    padding-right: #{$i}px;
+  }
+
+  .pb#{$i} {
+    padding-bottom: #{$i}px;
+  }
+
+  .pl#{$i} {
+    padding-left: #{$i}px;
+  }
+
+  .br#{$i} {
+    border-radius: #{$i}px;
+  }
+
+  //宽度
+  .w#{$i} {
+    width: #{$i}px;
+  }
+
+  .ww#{$i} {
+    width: #{$i}+ "%";
+  }
+
+  .hh#{$i} {
+    height: #{$i}+ "%";
+  }
+
+  //高度
+  .h#{$i} {
+    height: #{$i}px;
+  }
+
+  //行高
+  .lh#{$i} {
+    line-height: #{$i}px;
+  }
+  //自适应大号字体(通常为统计数字 18-30)
+  .font_size_big {
+    font-size: clamp(1.125rem, -0.894rem + 2.31vw, 1.875rem);
+  }
+  //自适应一号字体(通常为一级标题 14-18)
+  .font_size_title {
+    font-size: clamp(0.875rem, 0.37rem + 0.58vw, 1.063rem);
+  }
+  //自适应统计字体(通常为统计数字 14-22)
+  .font_size1 {
+    font-size: clamp(0.875rem, -0.471rem + 1.54vw, 1.375rem);
+  }
+  //自适应二号字体(通常为二级标题 14-16)
+  .font_size2 {
+    font-size: clamp(0.75rem, 0.077rem + 0.77vw, 1rem);
+  }
+  //自适应普通字体(通常为默认大小 10-14)
+  .font_size_default {
+    font-size: clamp(0.625rem, -0.048rem + 0.77vw, 0.875rem);
+  }
+  .flex#{$i} {
+    flex: #{$i};
+  }
+}
+
+@font-face {
+  font-family: "DigifaceWide";
+  src: url("~@/assets/font/DigifaceWide.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "HANYILINGXINTIJIAN";
+  src: url("~@/assets/font/HANYILINGXINTIJIAN-1.TTF");
+  font-weight: normal;
+  font-style: normal;
+}