Initial commit

src/App.vue

@@ -0,0 +1,108 @@
+
+<template>
+    <router-view v-slot="{ Component }" v-if="isRouterAlive">
+      <keep-alive :include="store.getters.keepLiiveRoute">
+        <Component :is="Component"></Component>
+      </keep-alive>
+    </router-view>
+</template>
+<script setup>
+import { ref, nextTick, provide, onMounted } from "vue";
+import { useStore } from "vuex";
+import { getItem } from "@/utils/storage";
+import { qcckPost, qcckGet, qcckPut, qcckDelete } from "@/api/qcckApi.js";
+import { generateNewStyle, writeNewStyle } from "@/utils/theme";
+const store = useStore();
+generateNewStyle(store.getters.mainColor).then((newStyle) => {
+  writeNewStyle(newStyle);
+});
+const isRouterAlive = ref(true);
+const reload = () => {
+  isRouterAlive.value = false;
+  nextTick(() => {
+    isRouterAlive.value = true;
+  });
+};
+provide("reload", reload);
+onMounted(() => {
+  document.title ="兴蜀人力";
+});
+</script>
+<style lang="scss">
+@import "./styles/index.scss";
+body { margin: 0px; padding: 0px; font-size: 14px; }
+ul { margin: 0px; padding: 0px; }
+li { list-style-type: none; }
+#app {
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, icrosoft YaHei, SimSun, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #fff;
+  background: #000;
+}
+
+//只显示一排内容
+.one_text_detail {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+//只显示二排内容
+.two_text_detail {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+//只显示三排内容
+.text_detail {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// 不显示滚动条
+.noScollLine::-webkit-scrollbar {
+  width: 0 !important;
+}
+
+@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;
+}
+@font-face {
+  font-family: "YSBTH";
+  src: url("~@/assets/font/YSBTH.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "DigifaceRegular";
+  src: url("~@/assets/font/Digiface-Regular.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+
+v-deep .el-loading-mask {
+  background: rgba(0, 0, 0, 0.5) !important;
+}
+::v-deep .el-dialog {
+  background: #061639 !important;
+}
+
+</style>
+ 

src/api/qcckApi.js

@@ -0,0 +1,66 @@
+import request from "@/utils/request";
+import axios from "axios";
+const api = "/mosty-api";
+const egisSpace = "/egis-space";
+
+// 选择站口名称
+export function egisSpaceGet(fun,coords){
+  let params = {
+    pageNum: 1,
+    pageSize: 1000,
+    keyword: "",
+    geometry: `{"type":"Polygon","coordinates":${JSON.stringify(coords)}}`,
+  };
+  params.geometry =  encodeURIComponent(params.geometry)
+
+  let url = egisSpace + '/space/search/custom/ms-dy-intersections'
+  axios.get(url,{params}).then((res) => {
+    fun(res.data)
+  });
+}
+
+
+//get 请求
+export const qcckFlvGet = (params = {}, url) => {
+  return request({
+    url: url,
+    method: "get",
+    params
+  });
+};
+
+
+
+//get 请求
+export const qcckGet = (params = {}, url) => {
+  return request({
+    url: api + url,
+    method: "get",
+    params
+  });
+};
+//post 请求
+export const qcckPost = (data = {}, url) => {
+  return request({
+    url: api + url,
+    method: "post",
+    data
+  });
+};
+//put 请求
+export const qcckPut = (data = {}, url) => {
+  return request({
+    url: api + url,
+    method: "put",
+    data
+  });
+};
+//put 请求
+export const qcckDelete = (data = {}, url) => {
+  return request({
+    url: api + url,
+    method: "delete",
+    data
+  });
+};
+

src/api/sys.js

@@ -0,0 +1,108 @@
+import request from "@/utils/request";
+const api = "/mosty-api/mosty-base";
+/*
+ * 登录
+ *  return promise 实例对象
+ */
+export const login = (data) => {
+  return request({
+    url: api + "/login",
+    method: "POST",
+    data
+  });
+};
+
+/*
+ * 获取用户信息
+ *  return promise 实例对象
+ */
+export const getUserInfo = () => {
+  return request({
+    url: api + "/sys/profile",
+    method: "GET"
+  });
+};
+
+/*
+ * 获取用户信息
+ *  return promise 实例对象
+ */
+export const getKaptcha = () => {
+  return request({
+    url: api + "/kaptcha",
+    method: "GET"
+  });
+};
+
+/*
+ * 多部门时候 切换部门刷新token
+ *  return promise 实例对象
+ */
+export const refreshToken = (data) => {
+  return request({
+    url: api + `/token`,
+    method: "POST",
+    data
+  });
+};
+
+/*
+ *
+登出
+ *  return promise 实例对象
+ */
+export const loginOut = (data) => {
+  return request({
+    url: api + "/loginOut",
+    method: "POST",
+    data
+  });
+};
+
+/*
+ *
+修改密码
+ */
+export const editPassword = (data) => {
+  return request({
+    url: api + "/sysUser/editPassword",
+    method: "POST",
+    data
+  });
+};
+
+//  人员排名统计TOP10
+export const ryStatistics = (data) => {
+  return request({
+    url: api + "/monitor/operlog/ryStatistics",
+    method: "POST",
+    data
+  });
+};
+
+//  部门排名统计TOP10
+export const bmStatistics = (data) => {
+  return request({
+    url: api + "/monitor/operlog/bmStatistics",
+    method: "POST",
+    data
+  });
+};
+
+// 模块排名统计 
+export const mkStatistics = (data) => {
+  return request({
+    url: api + "/monitor/operlog/mkStatistics",
+    method: "POST",
+    data
+  });
+};
+
+//  系统使用情况统计数字
+export const useStatistics = (data) => {
+  return request({
+    url: api + "/monitor/operlog/statistics",
+    method: "POST",
+    data
+  });
+};

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: #02163b;
+// }
+::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,177 @@
+@mixin textColor($color1, $color2) {
+  background-image: linear-gradient(to top, $color1 0%, $color2 50%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.bigScrenn {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  position: relative;
+  background: url('~@/assets/images/home_bg.png') no-repeat center center;
+  background-size: 100% 100%;
+  color: #fff;
+
+  // 头部
+  .homeHead,.homeHeadsmall {
+    display: flex;
+    justify-content: space-between;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 400px;
+    background: url('~@/assets/images/home_head.png') no-repeat center center;
+    background-size: 100% 100%;
+
+    .left_Head {
+      position: absolute;
+      left: 1vw;
+      top: 1.5vh;
+      transform: rotate(3deg);
+      font-family: "DigifaceWide";
+    }
+
+    .center_head {
+      position: absolute;
+      top: 2vw;
+      left: 50%;
+      transform: translateX(-56%);
+      font-size: 4vw;
+      font-family: "YSBTH";
+      letter-spacing: 0.104vw;
+      font-weight: 400;
+      white-space: nowrap;
+
+      span {
+        background-image: linear-gradient(to top, #165493 10%, #ffffff 50%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+
+      &::before {
+        content: attr(text);
+        position: absolute;
+        z-index: -2;
+      }
+    }
+
+    .right_head {
+      position: absolute;
+      right: 1.875vw;
+      top: 0.848vw;
+      transform: rotate(-3deg);
+
+      .setting {
+        position: absolute;
+        top: -10px;
+        left: -78px;
+        width: 1.8vw;
+        height: 1.8vw;
+      }
+    }
+  }
+  .homeHeadsmall{
+    // background: url('~@/assets/images/home_head_small.png') no-repeat center center;
+    height: 6.771vw;
+    .center_head{
+      position: absolute;
+      top: 0.5vw;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 2.5vw;
+      font-family: "YSBTH";
+      letter-spacing: 0.104vw;
+      font-weight: 400;
+      white-space: nowrap;
+    }
+  }
+
+  // 侧边
+  .asidemodel {
+    position: absolute;
+    top: 4.688vw;
+    width: 22.396vw;
+    height: calc(100vh - 13.75vw);
+    transform: perspective(6.25vw) rotateY(2deg);
+
+    .asideHead {
+      position: relative;
+      height: 2.083vw;
+      line-height: 2.083vw;
+      margin-bottom: 1.042vw;
+      padding-left: 0.729vw;
+      padding-right: 0.729vw;
+      box-sizing: border-box;
+
+      span {
+        font-size: 1.458vw;
+        @include textColor(#499FF2, #ffffff);
+        font-family: "HANYILINGXINTIJIAN";
+      }
+
+      &::after {
+        position: absolute;
+        content: '';
+        width: 8.594vw;
+        height: 1.146vw;
+        left: 0.104vw;
+        top: 1.823vw;
+        background: url('~@/assets/images/bg_03.png') no-repeat left bottom;
+        background-size: 100%;
+      }
+    }
+
+    .asideHeadR {
+      position: relative;
+
+      &::after {
+        position: absolute;
+        content: '';
+        width: 8.594vw;
+        height: 1.146vw;
+        left: 13.333vw;
+        top: 1.823vw;
+        background: url('~@/assets/images/bg_03.png') no-repeat left bottom;
+        background-size: 100%;
+        transform: rotate(180deg);
+      }
+    }
+
+    .modelBox {
+      height: calc(100% - 3.125vw);
+    }
+
+    .asideItem {
+      flex: 1 0 0;
+      // margin: 0px 0.052vw;
+      margin: 0 0.052vw 1.5vh;
+      overflow: hidden;
+      // margin-bottom: 0.26vw;
+      background: url('~@/assets/images/bg_04.png') no-repeat left bottom;
+      background-size: 100%;
+    }
+  }
+
+  .asidemodelR {
+    transform: perspective(6.25vw) rotateY(-2deg);
+  }
+
+  // 展开-关闭按钮
+  .showNeun {
+    position: absolute;
+    top: 47%;
+    transform: translateY(-50%);
+    width: 4.313vw;
+    height: 22.802vw;
+    background: url('~@/assets/images/home_left.png') no-repeat center center;
+    background-size: 100% 100%;
+  }
+
+  .showNeunR {
+    background: url('~@/assets/images/home_right.png') no-repeat center center;
+    background-size: 100% 100%;
+  }
+
+}

src/assets/css/layout.scss

@@ -0,0 +1,365 @@
+header {
+  height: 88px;
+  background: top 10px center #001022;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: url('~@/assets/images/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;
+  }
+}

src/assets/css/pulic.scss

@@ -0,0 +1,368 @@
+.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;
+}
+.align-baseline {
+  align-items: baseline;
+}
+
+/**********文本省略***********/
+.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 100 {
+  .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);
+  }
+}
+
+@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;
+}