登录，首页

chenhai-ui/package.json

@@ -28,6 +28,7 @@
     "axios": "0.30.3",
     "clipboard": "2.0.8",
     "core-js": "3.37.1",
+    "dayjs": "^1.11.20",
     "echarts": "5.4.0",
     "element-ui": "2.15.14",
     "file-saver": "2.0.5",
@@ -41,9 +42,11 @@
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "vue": "2.6.12",
+    "vue-animate-number": "^0.4.2",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-router": "3.4.9",
+    "vue-seamless-scroll": "^1.1.23",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0"
   },

chenhai-ui/src/assets/styles/chenhai.scss

@@ -0,0 +1,384 @@
+/**
+ * 通用css样式布局处理
+ * Copyright (c) 2019 chenhai
+ */
+
+/** 基础通用 **/
+.pt5 {
+    padding-top: 5px;
+}
+.pr5 {
+    padding-right: 5px;
+}
+.pb5 {
+    padding-bottom: 5px;
+}
+.mt5 {
+    margin-top: 5px;
+}
+.mr5 {
+    margin-right: 5px;
+}
+.mb5 {
+    margin-bottom: 5px;
+}
+.mb8 {
+    margin-bottom: 8px;
+}
+.ml5 {
+    margin-left: 5px;
+}
+.mt10 {
+    margin-top: 10px;
+}
+.mr10 {
+    margin-right: 10px;
+}
+.mb10 {
+    margin-bottom: 10px;
+}
+.ml0 {
+    margin-left: 10px;
+}
+.mt20 {
+    margin-top: 20px;
+}
+.mr20 {
+    margin-right: 20px;
+}
+.mb20 {
+    margin-bottom: 20px;
+}
+.m20 {
+    margin-left: 20px;
+}
+
+.el-dialog:not(.is-fullscreen) {
+    margin-top: 6vh !important;
+}
+
+.el-table {
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
+        th {
+            word-break: break-word;
+            background-color: #f8f8f9;
+            color: #515a6e;
+            height: 40px;
+            font-size: 13px;
+        }
+    }
+    .el-table__body-wrapper {
+        .el-button [class*="el-icon-"] + span {
+            margin-left: 1px;
+        }
+    }
+}
+
+/** 表单布局 **/
+.form-header {
+    font-size: 15px;
+    color: #6379bb;
+    border-bottom: 1px solid #ddd;
+    margin: 8px 10px 25px 10px;
+    padding-bottom: 5px;
+}
+
+/** 表格布局 **/
+.pagination-container {
+    position: relative;
+    height: 25px;
+    margin-bottom: 10px;
+    margin-top: 15px;
+    padding: 10px 20px !important;
+}
+
+/* tree border */
+.tree-border {
+    margin-top: 5px;
+    border: 1px solid #e5e6e7;
+    background: #ffffff none;
+    border-radius: 4px;
+}
+
+.pagination-container .el-pagination {
+    right: 0;
+    position: absolute;
+}
+
+.el-table .fixed-width .el-button--mini {
+    color: #409eff;
+    padding-left: 0;
+    padding-right: 0;
+    width: inherit;
+}
+
+.el-tree-node__content > .el-checkbox {
+    margin-right: 8px;
+}
+
+.list-group-striped > .list-group-item {
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.list-group {
+    padding-left: 0px;
+    list-style: none;
+}
+
+.list-group-item {
+    border-bottom: 1px solid #e7eaec;
+    border-top: 1px solid #e7eaec;
+    margin-bottom: -1px;
+    padding: 11px 0px;
+    font-size: 13px;
+}
+
+.pull-right {
+    float: right !important;
+}
+
+.el-card__header {
+    padding: 14px 15px 7px;
+    min-height: 40px;
+}
+
+.el-card__body {
+    padding: 15px 20px 20px 20px;
+}
+
+.card-box {
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-bottom: 10px;
+}
+
+/* button color */
+.el-button--cyan.is-active,
+.el-button--cyan:active {
+    background: #20b2aa;
+    border-color: #20b2aa;
+    color: #ffffff;
+}
+
+.el-button--cyan:focus,
+.el-button--cyan:hover {
+    background: #48d1cc;
+    border-color: #48d1cc;
+    color: #ffffff;
+}
+
+.el-button--cyan {
+    background-color: #20b2aa;
+    border-color: #20b2aa;
+    color: #ffffff;
+}
+
+.up {
+    position: relative;
+    // padding-right: 15px;
+    &::after {
+        content: '\279C';
+        position: absolute;
+        top: 0;
+        right: -20px;
+        bottom: 2px;
+        color: #00ac51;
+        font-size: 16px;
+        font-weight: bold;
+        transform: rotateZ(-90deg);
+    }
+}
+
+.down {
+    position: relative;
+    // padding-right: 15px;
+    &::after {
+        content: '\279C';
+        position: absolute;
+        top: 0;
+        right: -15px;
+        bottom: 2px;
+        color: #ef3248;
+        font-size: 16px;
+        font-weight: bold;
+        transform: rotateZ(90deg);
+    }
+}
+
+/* text color */
+.text-navy {
+    color: #00ac51;
+}
+
+.text-primary {
+    color: inherit;
+}
+
+.text-success {
+    color: #0095ff;
+}
+
+.text-info {
+    color: #525264;
+}
+
+.text-warning {
+    color: #f8ac59;
+}
+
+.text-danger {
+    color: #ef3248;
+}
+
+.text-muted {
+    color: #888888;
+}
+
+/* background color */
+.bg-navy {
+    background-color: #00ac51;
+}
+
+.bg-success {
+    background-color: #0095ff;
+}
+
+.bg-info {
+    background-color: #23c6c8;
+}
+
+.bg-warning {
+    background-color: #f8ac59;
+}
+
+.bg-danger {
+    background-color: #ef3248;
+}
+
+.bg-muted {
+    background-color: #888888;
+}
+
+.bg-success-opacity {
+    background-color: #0095ff20;
+}
+
+.bg-warning-opacity {
+    background-color: #f8ac5920;
+}
+
+.bg-danger-opacity {
+    background-color: #ef324820;
+}
+
+.bg-light-blue {
+    border: 1px solid #0095ff;
+    background: #e2f6ff;
+}
+.bg-light-grey {
+    border: 1px solid #525264;
+    background: #d7dbf2;
+}
+.bg-light-green {
+    border: 1px solid #00ac51;
+    background: #dcf7e9;
+}
+.bg-light-orange {
+    border: 1px solid #f8ac59;
+    background: #f6e8df;
+}
+
+.border-success {
+    border-color: #0095ff20;
+}
+
+.border-navy {
+    border-color: #00ac5120;
+}
+
+/* image */
+.img-circle {
+    border-radius: 50%;
+}
+
+.img-lg {
+    width: 120px;
+    height: 120px;
+}
+
+.avatar-upload-preview {
+    position: absolute;
+    top: 50%;
+    transform: translate(50%, -50%);
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    box-shadow: 0 0 4px #ccc;
+    overflow: hidden;
+}
+
+/* 拖拽列样式 */
+.sortable-ghost {
+    opacity: 0.8;
+    color: #fff !important;
+    background: #00ac51 !important;
+}
+
+.top-right-btn {
+    position: relative;
+    float: right;
+}
+
+.vue-treeselect--has-value .vue-treeselect__input {
+    vertical-align: middle !important;
+}
+
+.el-upload__tip {
+    font-size: 14px;
+}
+
+.el-select {
+    width: 100%;
+}
+
+.el-dialog {
+    .el-descriptions {
+        font-size: 16px;
+        margin-bottom: 15px;
+    }
+    .el-dialog__body {
+        overflow-y: auto;
+        padding-bottom: 75px;
+        max-height: 750px;
+    }
+    .el-dialog__footer {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #fff;
+    }
+}
+.el-tag + .el-tag {
+    margin-left: 10px;
+}
+.el-alert {
+    padding: 0px 16px !important;
+}
+.button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+.input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+}

chenhai-ui/src/assets/styles/cloud/custom-animation.css

@@ -0,0 +1,623 @@
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeInLeft {
+    0% {
+        opacity: 0;
+        transform: translate3d(-200px, 0, 0);
+        transform: translate3d(-200px, 0, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+        transform: none;
+    }
+}
+
+@keyframes fadeInRight {
+    0% {
+        opacity: 0;
+        transform: translate3d(200px, 0, 0);
+        transform: translate3d(200px, 0, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+        transform: none;
+    }
+}
+
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        transform: translate3d(0, 200px, 0);
+        transform: translate3d(0, 200px, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+        transform: none;
+    }
+}
+
+@keyframes fadeInDown {
+    0% {
+        opacity: 0;
+        transform: translate3d(0, -200px, 0);
+        transform: translate3d(0, -200px, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+        transform: none;
+    }
+}
+
+@keyframes flipInY {
+    0% {
+        transform: perspective(400px) rotateY(90deg);
+        transform: perspective(400px) rotateY(90deg);
+        animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+        opacity: 0;
+    }
+
+    40% {
+        transform: perspective(400px) rotateY(-20deg);
+        transform: perspective(400px) rotateY(-20deg);
+        animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+
+    60% {
+        transform: perspective(400px) rotateY(10deg);
+        transform: perspective(400px) rotateY(10deg);
+        opacity: 1;
+    }
+
+    80% {
+        transform: perspective(400px) rotateY(-5deg);
+        transform: perspective(400px) rotateY(-5deg);
+    }
+
+    to {
+        transform: perspective(400px);
+        transform: perspective(400px);
+    }
+}
+
+@keyframes bounceInLeft {
+    0%,
+    60%,
+    75%,
+    90%,
+    to {
+        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+
+    0% {
+        opacity: 0;
+        transform: translate3d(-3000px, 0, 0);
+        transform: translate3d(-3000px, 0, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(25px, 0, 0);
+        transform: translate3d(25px, 0, 0);
+    }
+
+    75% {
+        transform: translate3d(-10px, 0, 0);
+        transform: translate3d(-10px, 0, 0);
+    }
+
+    90% {
+        transform: translate3d(5px, 0, 0);
+        transform: translate3d(5px, 0, 0);
+    }
+
+    to {
+        transform: none;
+        transform: none;
+    }
+}
+
+@keyframes bounceInRight {
+    0%,
+    60%,
+    75%,
+    90%,
+    to {
+        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+
+    0% {
+        opacity: 0;
+        transform: translate3d(3000px, 0, 0);
+        transform: translate3d(3000px, 0, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(-25px, 0, 0);
+        transform: translate3d(-25px, 0, 0);
+    }
+
+    75% {
+        transform: translate3d(10px, 0, 0);
+        transform: translate3d(10px, 0, 0);
+    }
+
+    90% {
+        transform: translate3d(-5px, 0, 0);
+        transform: translate3d(-5px, 0, 0);
+    }
+
+    to {
+        transform: none;
+        transform: none;
+    }
+}
+
+@keyframes bounceInUp {
+    0%,
+    60%,
+    75%,
+    90%,
+    to {
+        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+
+    0% {
+        opacity: 0;
+        transform: translate3d(0, 3000px, 0);
+        transform: translate3d(0, 3000px, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(0, -25px, 0);
+        transform: translate3d(0, -25px, 0);
+    }
+
+    75% {
+        transform: translate3d(0, 10px, 0);
+        transform: translate3d(0, 10px, 0);
+    }
+
+    90% {
+        transform: translate3d(0, -5px, 0);
+        transform: translate3d(0, -5px, 0);
+    }
+
+    to {
+        transform: none;
+        transform: none;
+    }
+}
+
+@keyframes bounceInDown {
+    0%,
+    60%,
+    75%,
+    90%,
+    to {
+        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+
+    0% {
+        opacity: 0;
+        transform: translate3d(0, -3000px, 0);
+        transform: translate3d(0, -3000px, 0);
+    }
+
+    60% {
+        opacity: 1;
+        transform: translate3d(0, 25px, 0);
+        transform: translate3d(0, 25px, 0);
+    }
+
+    75% {
+        transform: translate3d(0, -10px, 0);
+        transform: translate3d(0, -10px, 0);
+    }
+
+    90% {
+        transform: translate3d(0, 5px, 0);
+        transform: translate3d(0, 5px, 0);
+    }
+
+    to {
+        transform: none;
+        transform: none;
+    }
+}
+
+@keyframes wobble {
+    0% {
+        transform: none;
+        transform: none;
+    }
+
+    15% {
+        transform: translate3d(-25%, 0, 0) rotate(-5deg);
+        transform: translate3d(-25%, 0, 0) rotate(-5deg);
+    }
+
+    30% {
+        transform: translate3d(20%, 0, 0) rotate(3deg);
+        transform: translate3d(20%, 0, 0) rotate(3deg);
+    }
+
+    45% {
+        transform: translate3d(-15%, 0, 0) rotate(-3deg);
+        transform: translate3d(-15%, 0, 0) rotate(-3deg);
+    }
+
+    60% {
+        transform: translate3d(10%, 0, 0) rotate(2deg);
+        transform: translate3d(10%, 0, 0) rotate(2deg);
+    }
+
+    75% {
+        transform: translate3d(-5%, 0, 0) rotate(-1deg);
+        transform: translate3d(-5%, 0, 0) rotate(-1deg);
+    }
+
+    to {
+        transform: none;
+        transform: none;
+    }
+}
+
+@keyframes rubberBand {
+    0% {
+        transform: scaleX(1);
+        transform: scaleX(1);
+    }
+
+    30% {
+        transform: scale3d(1.25, 0.75, 1);
+        transform: scale3d(1.25, 0.75, 1);
+    }
+
+    40% {
+        transform: scale3d(0.75, 1.25, 1);
+        transform: scale3d(0.75, 1.25, 1);
+    }
+
+    50% {
+        transform: scale3d(1.15, 0.85, 1);
+        transform: scale3d(1.15, 0.85, 1);
+    }
+
+    65% {
+        transform: scale3d(0.95, 1.05, 1);
+        transform: scale3d(0.95, 1.05, 1);
+    }
+
+    75% {
+        transform: scale3d(1.05, 0.95, 1);
+        transform: scale3d(1.05, 0.95, 1);
+    }
+
+    to {
+        transform: scaleX(1);
+        transform: scaleX(1);
+    }
+}
+
+@keyframes rotateIn {
+    0% {
+        transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(1turn);
+        transform: rotate(1turn);
+    }
+}
+
+@keyframes flip {
+    0% {
+        transform: perspective(400px) rotateY(-1turn);
+        transform: perspective(400px) rotateY(-1turn);
+        animation-timing-function: ease-out;
+        animation-timing-function: ease-out;
+    }
+
+    40% {
+        transform: perspective(400px) translateZ(150px) rotateY(-190deg);
+        transform: perspective(400px) translateZ(150px) rotateY(-190deg);
+        animation-timing-function: ease-out;
+        animation-timing-function: ease-out;
+    }
+
+    50% {
+        transform: perspective(400px) translateZ(150px) rotateY(-170deg);
+        transform: perspective(400px) translateZ(150px) rotateY(-170deg);
+        animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+
+    80% {
+        transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+        transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+        animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+
+    to {
+        transform: perspective(400px);
+        transform: perspective(400px);
+        animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+}
+
+@keyframes swing {
+    20% {
+        transform: rotate(15deg);
+        transform: rotate(15deg);
+    }
+
+    40% {
+        transform: rotate(-10deg);
+        transform: rotate(-10deg);
+    }
+
+    60% {
+        transform: rotate(5deg);
+        transform: rotate(5deg);
+    }
+
+    80% {
+        transform: rotate(-5deg);
+        transform: rotate(-5deg);
+    }
+
+    to {
+        transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+}
+
+@keyframes flash {
+    0%,
+    50%,
+    to {
+        opacity: 1;
+    }
+
+    25%,
+    75% {
+        opacity: 0;
+    }
+}
+
+@keyframes slideDown {
+    0% {
+        transform-origin: 0 0;
+        transform-origin: 0 0;
+        transform: translateY(0);
+        transform: translateY(0);
+    }
+
+    to {
+        transform-origin: 0 0;
+        transform-origin: 0 0;
+        transform: translateY(100%);
+        transform: translateY(100%);
+    }
+}
+
+@keyframes slideUp {
+    0% {
+        transform-origin: 0 0;
+        transform-origin: 0 0;
+        transform: translateY(0);
+        transform: translateY(0);
+    }
+
+    to {
+        transform-origin: 0 0;
+        transform-origin: 0 0;
+        transform: translateY(-100%);
+        transform: translateY(-100%);
+    }
+}
+
+@keyframes tada {
+    0% {
+        transform: scaleX(1);
+        transform: scaleX(1);
+    }
+
+    10%,
+    20% {
+        transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
+        transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
+    }
+
+    30%,
+    50%,
+    70%,
+    90% {
+        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
+        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
+    }
+
+    40%,
+    60%,
+    80% {
+        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
+        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
+    }
+
+    to {
+        transform: scaleX(1);
+        transform: scaleX(1);
+    }
+}
+
+@keyframes fadeOut {
+    0% {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes fadeOutLeft {
+    0% {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(-100%, 0, 0);
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+
+@keyframes fadeOutRight {
+    0% {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(100%, 0, 0);
+        transform: translate3d(100%, 0, 0);
+    }
+}
+
+@keyframes fadeOutUp {
+    0% {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+    }
+}
+
+@keyframes fadeOutDown {
+    0% {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(0, 100%, 0);
+        transform: translate3d(0, 100%, 0);
+    }
+}
+
+@keyframes bounceOutLeft {
+    20% {
+        opacity: 1;
+        transform: translate3d(20px, 0, 0);
+        transform: translate3d(20px, 0, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(-2000px, 0, 0);
+        transform: translate3d(-2000px, 0, 0);
+    }
+}
+
+@keyframes bounceOutRight {
+    20% {
+        opacity: 1;
+        transform: translate3d(-20px, 0, 0);
+        transform: translate3d(-20px, 0, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(2000px, 0, 0);
+        transform: translate3d(2000px, 0, 0);
+    }
+}
+
+@keyframes bounceOutUp {
+    20% {
+        transform: translate3d(0, -10px, 0);
+        transform: translate3d(0, -10px, 0);
+    }
+
+    40%,
+    45% {
+        opacity: 1;
+        transform: translate3d(0, 20px, 0);
+        transform: translate3d(0, 20px, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(0, -2000px, 0);
+        transform: translate3d(0, -2000px, 0);
+    }
+}
+
+@keyframes bounceOutDown {
+    20% {
+        transform: translate3d(0, 10px, 0);
+        transform: translate3d(0, 10px, 0);
+    }
+
+    40%,
+    45% {
+        opacity: 1;
+        transform: translate3d(0, -20px, 0);
+        transform: translate3d(0, -20px, 0);
+    }
+
+    to {
+        opacity: 0;
+        transform: translate3d(0, 2000px, 0);
+        transform: translate3d(0, 2000px, 0);
+    }
+}
+
+@keyframes flipOutY {
+    0% {
+        transform: perspective(400px);
+        transform: perspective(400px);
+    }
+
+    30% {
+        transform: perspective(400px) rotateY(-15deg);
+        transform: perspective(400px) rotateY(-15deg);
+        opacity: 1;
+    }
+
+    to {
+        transform: perspective(400px) rotateY(90deg);
+        transform: perspective(400px) rotateY(90deg);
+        opacity: 0;
+    }
+}

chenhai-ui/src/assets/styles/cloud/reset.css

@@ -0,0 +1,34 @@
+@font-face {
+    font-family: "led";
+    src: url("../../fonts/led.ttf");
+}
+
+/* @font-face {
+    font-family: "PingFang-SC-Semibold";
+    src: url("../../fonts/PingFang-SC-Semibold.ttf");
+}
+
+@font-face {
+    font-family: "PingFang-Light";
+    src: url("../../fonts/PingFang-Light.ttf");
+}
+
+@font-face {
+    font-family: "PingFang-Bold";
+    src: url("../../fonts/PingFang-Bold.ttf");
+} */
+
+@font-face {
+    font-family: "PingFang-SC";
+    src: url("../../fonts/PingFang-SC.ttf");
+}
+/*
+@font-face {
+    font-family: "PingFang-JT";
+    src: url("../../fonts/PingFang-JT.ttf");
+}
+
+@font-face {
+    font-family: "PingFang-JC";
+    src: url("../../fonts/PingFang-JC.ttf");
+} */

chenhai-ui/src/assets/styles/index.css

@@ -0,0 +1,688 @@
+/**
+$base-menu-color:hsla(0,0%,100%,.65);
+$base-menu-color-active:#fff;
+$base-menu-background:#001529;
+$base-logo-title-color: #ffffff;
+
+$base-menu-light-color:rgba(0,0,0,.70);
+$base-menu-light-background:#ffffff;
+$base-logo-light-title-color: #001529;
+
+$base-sub-menu-background:#000c17;
+$base-sub-menu-hover:#001528;
+*/
+:export {
+  menuColor: #fff;
+  menuLightColor: rgba(0, 0, 0, 0.7);
+  menuColorActive: #e78361;
+  menuBackground: #4383cc;
+  menuLightBackground: #ffffff;
+  subMenuBackground: #529add;
+  subMenuHover: #FEC171;
+  sideBarWidth: 200px;
+  logoTitleColor: #ffffff;
+  logoLightTitleColor: #4ea7fa;
+}
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform--move,
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-upload input[type="file"] {
+  display: none !important;
+}
+
+.el-upload__input {
+  display: none;
+}
+
+.cell .el-tag {
+  margin-right: 0px;
+}
+
+.small-padding .cell {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.fixed-width .el-button--mini {
+  padding: 7px 10px;
+  width: 60px;
+}
+
+.status-col .cell {
+  padding: 0 10px;
+  text-align: center;
+}
+
+.status-col .cell .el-tag {
+  margin-right: 0px;
+}
+
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+.upload-container .el-upload {
+  width: 100%;
+}
+
+.upload-container .el-upload .el-upload-dragger {
+  width: 100%;
+  height: 200px;
+}
+
+.el-dropdown-menu a {
+  display: block;
+}
+
+.el-range-editor.el-input__inner {
+  display: inline-flex !important;
+}
+
+.el-range-separator {
+  box-sizing: content-box;
+}
+
+.el-menu--collapse
+> div
+> .el-submenu
+> .el-submenu__title
+.el-submenu__icon-arrow {
+  display: none;
+}
+
+#app .main-container {
+  height: 100%;
+  transition: margin-left .28s;
+  margin-left: 200px;
+  position: relative;
+}
+
+#app .sidebarHide {
+  margin-left: 0 !important;
+}
+
+#app .el-menu-item.is-active {
+  color: #e78361 !important;
+  background-color: rgba(255, 255, 255, 0.3) !important;
+}
+
+#app .el-menu-item.is-active:hover {
+  background-color: #4383cc;
+}
+
+#app .sidebar-container {
+  -webkit-transition: width .28s;
+  transition: width 0.28s;
+  width: 200px !important;
+  background-color: #4383cc;
+  height: 100%;
+  position: fixed;
+  font-size: 0px;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  overflow: hidden;
+  -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+}
+
+#app .sidebar-container .horizontal-collapse-transition {
+  transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+}
+
+#app .sidebar-container .scrollbar-wrapper {
+  overflow-x: hidden !important;
+}
+
+#app .sidebar-container .el-scrollbar__bar.is-vertical {
+  right: 0px;
+}
+
+#app .sidebar-container .el-scrollbar {
+  height: 100%;
+}
+
+#app .sidebar-container.has-logo .el-scrollbar {
+  height: calc(100% - 50px);
+}
+
+#app .sidebar-container .is-horizontal {
+  display: none;
+}
+
+#app .sidebar-container a {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+}
+
+#app .sidebar-container .svg-icon {
+  margin-right: 16px;
+}
+
+#app .sidebar-container .el-menu {
+  border: none;
+  height: 100%;
+  width: 100% !important;
+}
+
+#app .sidebar-container .el-menu-item, #app .sidebar-container .el-submenu__title {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+#app .sidebar-container .submenu-title-noDropdown:hover,
+#app .sidebar-container .el-submenu__title:hover {
+  background-color: rgba(0, 0, 0, 0.06) !important;
+}
+
+#app .sidebar-container .theme-dark .is-active > .el-submenu__title {
+  color: #e78361 !important;
+}
+
+#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title,
+#app .sidebar-container .el-submenu .el-menu-item {
+  min-width: 200px !important;
+}
+
+#app .sidebar-container .nest-menu .el-submenu > .el-submenu__title:hover,
+#app .sidebar-container .el-submenu .el-menu-item:hover {
+  background-color: rgba(0, 0, 0, 0.06) !important;
+}
+
+#app .sidebar-container .theme-dark .nest-menu .el-submenu > .el-submenu__title,
+#app .sidebar-container .theme-dark .el-submenu .el-menu-item {
+  background-color: #529add !important;
+}
+
+#app .sidebar-container .theme-dark .nest-menu .el-submenu > .el-submenu__title:hover,
+#app .sidebar-container .theme-dark .el-submenu .el-menu-item:hover {
+  background-color: #FEC171 !important;
+}
+
+#app .hideSidebar .sidebar-container {
+  width: 54px !important;
+}
+
+#app .hideSidebar .main-container {
+  margin-left: 54px;
+}
+
+#app .hideSidebar .submenu-title-noDropdown {
+  padding: 0 !important;
+  position: relative;
+}
+
+#app .hideSidebar .submenu-title-noDropdown .el-tooltip {
+  padding: 0 !important;
+}
+
+#app .hideSidebar .submenu-title-noDropdown .el-tooltip .svg-icon {
+  margin-left: 20px;
+}
+
+#app .hideSidebar .el-submenu {
+  overflow: hidden;
+}
+
+#app .hideSidebar .el-submenu > .el-submenu__title {
+  padding: 0 !important;
+}
+
+#app .hideSidebar .el-submenu > .el-submenu__title .svg-icon {
+  margin-left: 20px;
+}
+
+#app .hideSidebar .el-menu--collapse .el-submenu > .el-submenu__title > span {
+  height: 0;
+  width: 0;
+  overflow: hidden;
+  visibility: hidden;
+  display: inline-block;
+}
+
+#app .el-menu--collapse .el-menu .el-submenu {
+  min-width: 200px !important;
+}
+
+#app .mobile .main-container {
+  margin-left: 0px;
+}
+
+#app .mobile .sidebar-container {
+  transition: transform .28s;
+  width: 200px !important;
+}
+
+#app .mobile.hideSidebar .sidebar-container {
+  pointer-events: none;
+  transition-duration: 0.3s;
+  transform: translate3d(-200px, 0, 0);
+}
+
+#app .withoutAnimation .main-container,
+#app .withoutAnimation .sidebar-container {
+  transition: none;
+}
+
+.el-menu--vertical > .el-menu .svg-icon {
+  margin-right: 16px;
+}
+
+.el-menu--vertical .nest-menu .el-submenu > .el-submenu__title:hover,
+.el-menu--vertical .el-menu-item:hover {
+  background-color: rgba(0, 0, 0, 0.06) !important;
+}
+
+.el-menu--vertical > .el-menu--popup {
+  max-height: 100vh;
+  overflow-y: auto;
+}
+
+.el-menu--vertical > .el-menu--popup::-webkit-scrollbar-track-piece {
+  background: #d3dce6;
+}
+
+.el-menu--vertical > .el-menu--popup::-webkit-scrollbar {
+  width: 6px;
+}
+
+.el-menu--vertical > .el-menu--popup::-webkit-scrollbar-thumb {
+  background: #99a9bf;
+  border-radius: 20px;
+}
+
+/**
+$base-menu-color:hsla(0,0%,100%,.65);
+$base-menu-color-active:#fff;
+$base-menu-background:#001529;
+$base-logo-title-color: #ffffff;
+
+$base-menu-light-color:rgba(0,0,0,.70);
+$base-menu-light-background:#ffffff;
+$base-logo-light-title-color: #001529;
+
+$base-sub-menu-background:#000c17;
+$base-sub-menu-hover:#001528;
+*/
+:export {
+  menuColor: #fff;
+  menuLightColor: rgba(0, 0, 0, 0.7);
+  menuColorActive: #e78361;
+  menuBackground: #4383cc;
+  menuLightBackground: #ffffff;
+  subMenuBackground: #529add;
+  subMenuHover: #FEC171;
+  sideBarWidth: 200px;
+  logoTitleColor: #ffffff;
+  logoLightTitleColor: #4ea7fa;
+}
+
+.blue-btn {
+  background: #324157;
+}
+
+.blue-btn:hover {
+  color: #324157;
+}
+
+.blue-btn:hover:before, .blue-btn:hover:after {
+  background: #324157;
+}
+
+.light-blue-btn {
+  background: #3A71A8;
+}
+
+.light-blue-btn:hover {
+  color: #3A71A8;
+}
+
+.light-blue-btn:hover:before, .light-blue-btn:hover:after {
+  background: #3A71A8;
+}
+
+.red-btn {
+  background: #C03639;
+}
+
+.red-btn:hover {
+  color: #C03639;
+}
+
+.red-btn:hover:before, .red-btn:hover:after {
+  background: #C03639;
+}
+
+.pink-btn {
+  background: #E65D6E;
+}
+
+.pink-btn:hover {
+  color: #E65D6E;
+}
+
+.pink-btn:hover:before, .pink-btn:hover:after {
+  background: #E65D6E;
+}
+
+.green-btn {
+  background: #30B08F;
+}
+
+.green-btn:hover {
+  color: #30B08F;
+}
+
+.green-btn:hover:before, .green-btn:hover:after {
+  background: #30B08F;
+}
+
+.tiffany-btn {
+  background: #4AB7BD;
+}
+
+.tiffany-btn:hover {
+  color: #4AB7BD;
+}
+
+.tiffany-btn:hover:before, .tiffany-btn:hover:after {
+  background: #4AB7BD;
+}
+
+.yellow-btn {
+  background: #FEC171;
+}
+
+.yellow-btn:hover {
+  color: #FEC171;
+}
+
+.yellow-btn:hover:before, .yellow-btn:hover:after {
+  background: #FEC171;
+}
+
+.pan-btn {
+  font-size: 14px;
+  color: #fff;
+  padding: 14px 36px;
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  transition: 600ms ease all;
+  position: relative;
+  display: inline-block;
+}
+
+.pan-btn:hover {
+  background: #fff;
+}
+
+.pan-btn:hover:before, .pan-btn:hover:after {
+  width: 100%;
+  transition: 600ms ease all;
+}
+
+.pan-btn:before, .pan-btn:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 2px;
+  width: 0;
+  transition: 400ms ease all;
+}
+
+.pan-btn::after {
+  right: inherit;
+  top: inherit;
+  left: 0;
+  bottom: 0;
+}
+
+.custom-button {
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background: #fff;
+  color: #fff;
+  -webkit-appearance: none;
+  text-align: center;
+  box-sizing: border-box;
+  outline: 0;
+  margin: 0;
+  padding: 10px 15px;
+  font-size: 14px;
+  border-radius: 4px;
+}
+
+body {
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+  font-weight: 700;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+.no-padding {
+  padding: 0px !important;
+}
+
+.padding-content {
+  padding: 4px 0;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+.fr {
+  float: right;
+}
+
+.fl {
+  float: left;
+}
+
+.pr-5 {
+  padding-right: 5px;
+}
+
+.pl-5 {
+  padding-left: 5px;
+}
+
+.block {
+  display: block;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.inlineBlock {
+  display: block;
+}
+
+.clearfix:after {
+  visibility: hidden;
+  display: block;
+  font-size: 0;
+  content: " ";
+  clear: both;
+  height: 0;
+}
+
+aside {
+  background: #eef1f6;
+  padding: 8px 24px;
+  margin-bottom: 20px;
+  border-radius: 2px;
+  display: block;
+  line-height: 32px;
+  font-size: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  color: #2c3e50;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+aside a {
+  color: #337ab7;
+  cursor: pointer;
+}
+
+aside a:hover {
+  color: #20a0ff;
+}
+
+.app-container {
+  padding: 20px;
+}
+
+.components-container {
+  margin: 30px 50px;
+  position: relative;
+}
+
+.pagination-container {
+  margin-top: 30px;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.sub-navbar {
+  height: 50px;
+  line-height: 50px;
+  position: relative;
+  width: 100%;
+  text-align: right;
+  padding-right: 20px;
+  transition: 600ms ease position;
+  background: linear-gradient(90deg, #20b6f9 0%, #20b6f9 0%, #2178f1 100%, #2178f1 100%);
+}
+
+.sub-navbar .subtitle {
+  font-size: 20px;
+  color: #fff;
+}
+
+.sub-navbar.draft {
+  background: #d0d0d0;
+}
+
+.sub-navbar.deleted {
+  background: #d0d0d0;
+}
+
+.link-type,
+.link-type:focus {
+  color: #337ab7;
+  cursor: pointer;
+}
+
+.link-type:hover,
+.link-type:focus:hover {
+  color: #20a0ff;
+}
+
+.filter-container {
+  padding-bottom: 10px;
+}
+
+.filter-container .filter-item {
+  display: inline-block;
+  vertical-align: middle;
+  margin-bottom: 10px;
+}

chenhai-ui/src/assets/styles/index.scss

@@ -129,6 +129,10 @@ aside {
   position: relative;
 }
 
+.pagination-container {
+  margin-top: 30px;
+}
+
 .text-center {
   text-align: center
 }

chenhai-ui/src/assets/styles/map-theme/default/style.css

@@ -0,0 +1,434 @@
+div.olMap {
+    z-index: 0;
+    padding: 0 !important;
+    margin: 0 !important;
+    cursor: default;
+}
+
+div.olMapViewport {
+    text-align: left;
+}
+
+div.olLayerDiv {
+   -moz-user-select: none;
+   -khtml-user-select: none;
+}
+
+.olLayerGoogleCopyright {
+    left: 2px;
+    bottom: 2px;
+}
+.olLayerGoogleV3.olLayerGoogleCopyright {
+    right: auto !important;
+}
+.olLayerGooglePoweredBy {
+    left: 2px;
+    bottom: 15px;
+}
+.olLayerGoogleV3.olLayerGooglePoweredBy {
+    bottom: 15px !important;
+}
+.olControlAttribution {
+    font-size: smaller;
+    right: 3px;
+    bottom: 4.5em;
+    position: absolute;
+    display: block;
+}
+.olControlScale {
+    right: 3px;
+    bottom: 3em;
+    display: block;
+    position: absolute;
+    font-size: smaller;
+}
+.olControlScaleLine {
+   display: block;
+   position: absolute;
+   left: 10px;
+   bottom: 15px;
+   font-size: xx-small;
+}
+.olControlScaleLineBottom {
+   border: solid 2px black;
+   border-bottom: none;
+   margin-top:-2px;
+   text-align: center;
+}
+.olControlScaleLineTop {
+   border: solid 2px black;
+   border-top: none;
+   text-align: center;
+}
+
+.olControlPermalink {
+    right: 3px;
+    bottom: 1.5em;
+    display: block;
+    position: absolute;
+    font-size: smaller;
+}
+
+div.olControlMousePosition {
+    bottom: 0em;
+    right: 3px;
+    display: block;
+    position: absolute;
+    font-family: Arial;
+    font-size: smaller;
+}
+
+.olControlOverviewMapContainer {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}
+
+.olControlOverviewMapElement {
+    padding: 10px 18px 10px 10px;
+    background-color: #00008B;
+    -moz-border-radius: 1em 0 0 0;
+}
+
+.olControlOverviewMapMinimizeButton {
+    right: 0;
+    bottom: 80px;
+    cursor: pointer;
+}
+
+.olControlOverviewMapMaximizeButton {
+    right: 0;
+    bottom: 80px;
+    cursor: pointer;
+}
+
+.olControlOverviewMapExtentRectangle {
+    overflow: hidden;
+    background-image: url("img/blank.gif");
+    cursor: move;
+    border: 2px dotted red;
+}
+.olControlOverviewMapRectReplacement {
+    overflow: hidden;
+    cursor: move;
+    background-image: url("img/overview_replacement.gif");
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.olLayerGeoRSSDescription {
+    float:left;
+    width:100%;
+    overflow:auto;
+    font-size:1.0em;
+}
+.olLayerGeoRSSClose {
+    float:right;
+    color:gray;
+    font-size:1.2em;
+    margin-right:6px;
+    font-family:sans-serif;
+}
+.olLayerGeoRSSTitle {
+    float:left;font-size:1.2em;
+}
+
+.olPopupContent {
+    padding:10px;
+    overflow-y: auto;
+    box-shadow: 0px 2px 2px 0px rgba(174, 174, 174, 0.5);
+}
+
+.olControlNavigationHistory {
+   background-image: url("img/navigation_history.png");
+   background-repeat: no-repeat;
+   width:  24px;
+   height: 24px;
+
+}
+.olControlNavigationHistoryPreviousItemActive {
+  background-position: 0 0;
+}
+.olControlNavigationHistoryPreviousItemInactive {
+   background-position: 0 -24px;
+}
+.olControlNavigationHistoryNextItemActive {
+   background-position: -24px 0;
+}
+.olControlNavigationHistoryNextItemInactive {
+   background-position: -24px -24px;
+}
+
+div.olControlSaveFeaturesItemActive {
+    background-image: url(img/save_features_on.png);
+    background-repeat: no-repeat;
+    background-position: 0 1px;
+}
+div.olControlSaveFeaturesItemInactive {
+    background-image: url(img/save_features_off.png);
+    background-repeat: no-repeat;
+    background-position: 0 1px;
+}
+
+.olHandlerBoxZoomBox {
+    border: 2px solid red;
+    position: absolute;
+    background-color: white;
+    opacity: 0.50;
+    font-size: 1px;
+    filter: alpha(opacity=50);
+}
+.olHandlerBoxSelectFeature {
+    border: 2px solid blue;
+    position: absolute;
+    background-color: white;
+    opacity: 0.50;
+    font-size: 1px;
+    filter: alpha(opacity=50);
+}
+
+.olControlPanPanel {
+    top: 10px;
+    left: 5px;
+}
+
+.olControlPanPanel div {
+    background-image: url(img/pan-panel.png);
+    height: 18px;
+    width: 18px;
+    cursor: pointer;
+    position: absolute;
+}
+
+.olControlPanPanel .olControlPanNorthItemInactive {
+    top: 0;
+    left: 9px;
+    background-position: 0 0;
+}
+.olControlPanPanel .olControlPanSouthItemInactive {
+    top: 36px;
+    left: 9px;
+    background-position: 18px 0;
+}
+.olControlPanPanel .olControlPanWestItemInactive {
+    position: absolute;
+    top: 18px;
+    left: 0;
+    background-position: 0 18px;
+}
+.olControlPanPanel .olControlPanEastItemInactive {
+    top: 18px;
+    left: 18px;
+    background-position: 18px 18px;
+}
+
+.olControlZoomPanel {
+    top: 71px;
+    left: 14px;
+}
+
+.olControlZoomPanel div {
+    background-image: url(img/zoom-panel.png);
+    position: absolute;
+    height: 18px;
+    width: 18px;
+    cursor: pointer;
+}
+
+.olControlZoomPanel .olControlZoomInItemInactive {
+    top: 0;
+    left: 0;
+    background-position: 0 0;
+}
+
+.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
+    top: 18px;
+    left: 0;
+    background-position: 0 -18px;
+}
+
+.olControlZoomPanel .olControlZoomOutItemInactive {
+    top: 36px;
+    left: 0;
+    background-position: 0 18px;
+}
+
+/*
+ * When a potential text is bigger than the image it move the image
+ * with some headers (closes #3154)
+ */
+.olControlPanZoomBar div {
+    font-size: 1px;
+}
+
+.olPopupCloseBox {
+  background: url("img/close.gif") no-repeat;
+  cursor: pointer;
+}
+
+.olFramedCloudPopupContent {
+    padding: 5px;
+    overflow: auto;
+}
+
+.olControlNoSelect {
+ -moz-user-select: none;
+ -khtml-user-select: none;
+}
+
+.olImageLoadError {
+    background-color: pink;
+    opacity: 0.5;
+    filter: alpha(opacity=50); /* IE */
+}
+
+/**
+ * Cursor styles
+ */
+
+.olCursorWait {
+    cursor: wait;
+}
+.olDragDown {
+    cursor: move;
+}
+.olDrawBox {
+    cursor: crosshair;
+}
+.olControlDragFeatureOver {
+    cursor: move;
+}
+.olControlDragFeatureActive.olControlDragFeatureOver.olDragDown {
+    cursor: -moz-grabbing;
+}
+
+/**
+ * Layer switcher
+ */
+.olControlLayerSwitcher {
+    position: absolute;
+    top: 25px;
+    right: 0;
+    width: 20em;
+    font-family: sans-serif;
+    font-weight: bold;
+    margin-top: 3px;
+    margin-left: 3px;
+    margin-bottom: 3px;
+    font-size: smaller;
+    color: white;
+    background-color: transparent;
+}
+
+.olControlLayerSwitcher .layersDiv {
+    padding-top: 5px;
+    padding-left: 10px;
+    padding-bottom: 5px;
+    padding-right: 75px;
+    background-color: darkblue;
+    width: 100%;
+    height: 100%;
+}
+
+.olControlLayerSwitcher .layersDiv .baseLbl,
+.olControlLayerSwitcher .layersDiv .dataLbl {
+    margin-top: 3px;
+    margin-left: 3px;
+    margin-bottom: 3px;
+}
+
+.olControlLayerSwitcher .layersDiv .baseLayersDiv,
+.olControlLayerSwitcher .layersDiv .dataLayersDiv {
+    padding-left: 10px;
+}
+
+.olControlLayerSwitcher .maximizeDiv,
+.olControlLayerSwitcher .minimizeDiv {
+    top: 5px;
+    right: 0;
+    cursor: pointer;
+}
+
+.olBingAttribution {
+    color: #DDD;
+}
+.olBingAttribution.road {
+    color: #333;
+}
+
+.olGoogleAttribution.hybrid, .olGoogleAttribution.satellite {
+    color: #EEE;
+}
+.olGoogleAttribution {
+    color: #333;
+}
+span.olGoogleAttribution a {
+    color: #77C;
+}
+span.olGoogleAttribution.hybrid a, span.olGoogleAttribution.satellite a {
+    color: #EEE;
+}
+
+/**
+ * Editing and navigation icons.
+ * (using the editing_tool_bar.png sprint image)
+ */
+.olControlNavToolbar ,
+.olControlEditingToolbar {
+    margin: 5px 5px 0 0;
+}
+.olControlNavToolbar div,
+.olControlEditingToolbar div {
+    background-image: url("img/editing_tool_bar.png");
+    background-repeat: no-repeat;
+    margin: 0 0 5px 5px;
+    width: 24px;
+    height: 22px;
+    cursor: pointer
+}
+/* positions */
+.olControlEditingToolbar {
+    right: 0;
+    top: 0;
+}
+.olControlNavToolbar {
+    top: 295px;
+    left: 9px;
+}
+/* layouts */
+.olControlEditingToolbar div {
+    float: right;
+}
+/* individual controls */
+.olControlNavToolbar .olControlNavigationItemInactive,
+.olControlEditingToolbar .olControlNavigationItemInactive {
+    background-position: -103px -1px;
+}
+.olControlNavToolbar .olControlNavigationItemActive ,
+.olControlEditingToolbar .olControlNavigationItemActive  {
+    background-position: -103px -24px;
+}
+.olControlNavToolbar .olControlZoomBoxItemInactive {
+    background-position: -128px -1px;
+}
+.olControlNavToolbar .olControlZoomBoxItemActive  {
+    background-position: -128px -24px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePointItemInactive {
+    background-position: -77px -1px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePointItemActive {
+    background-position: -77px -24px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePathItemInactive {
+    background-position: -51px -1px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePathItemActive {
+    background-position: -51px -24px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive{
+    background-position: -26px -1px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePolygonItemActive {
+    background-position: -26px -24px;
+}

chenhai-ui/src/assets/styles/ruoyi.scss

@@ -81,10 +81,6 @@
   margin-top: 6vh !important;
 }
 
-.el-dialog__body {
-  padding: 8px 20px !important;
-}
-
 .el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
   overflow: auto;
   overflow-x: hidden;
@@ -121,9 +117,11 @@
 
 /** 表格布局 **/
 .pagination-container {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 20px;
+  position: relative;
+  height: 25px;
+  margin-bottom: 10px;
+  margin-top: 15px;
+  padding: 10px 20px !important;
 }
 
 /* tree border */
@@ -134,14 +132,9 @@
   border-radius: 4px;
 }
 
-/* horizontal el menu */
-.el-menu--horizontal .el-menu-item .svg-icon + span,
-.el-menu--horizontal .el-submenu__title .svg-icon + span {
-  margin-left: 3px;
-}
-
-.el-menu--horizontal .el-menu--popup {
-  min-width: 120px !important;
+.pagination-container .el-pagination {
+  right: 0;
+  position: absolute;
 }
 
 @media (max-width: 768px) {
@@ -208,6 +201,8 @@
 }
 
 .card-box {
+  padding-right: 15px;
+  padding-left: 15px;
   margin-bottom: 10px;
 }
 
@@ -232,191 +227,6 @@
   color: #FFFFFF;
 }
 
-/** 详细卡片样式 */
-.detail-drawer {
-  .el-drawer__header {
-    margin-bottom: 6px;
-    padding: 8px 12px 6px;
-    font-size: 15px;
-    color: #303133;
-    background: #f8f8f8;
-  }
-  .section-header {
-    font-size: 15px;
-    color: #6379bb;
-    border-bottom: 1px solid #ddd;
-    margin: 12px 0 16px 0;
-    padding-bottom: 8px;
-  }
-  .drawer-content {
-    padding: 0 20px 20px 20px;
-    .info-item {
-      display: flex;
-      align-items: flex-start;
-      padding: 8px 0;
-      min-height: 40px;
-    }
-    .info-label {
-      flex-shrink: 0;
-      width: 200px;
-      color: #606266;
-      font-size: 13px;
-      line-height: 1.6;
-      padding-top: 4px;
-      text-align: right;
-      margin-right: 14px;
-    }
-    .info-value {
-      flex: 1;
-      color: #303133;
-      font-size: 13px;
-      font-weight: 500;
-      line-height: 1.6;
-      word-break: break-all;
-      padding-top: 4px;
-      min-height: 1.6em;
-      &.plaintext {
-        border-bottom: 1px dashed #dde1e6;
-      }
-    }
-  }
-}
-
-.detail-wrap { padding: 0 4px; }
-
-.detail-card {
-  border: 1px solid #ebeef5;
-  border-radius: 6px;
-  margin-bottom: 14px;
-  overflow: hidden;
-}
-
-.detail-card-title {
-  background: #f7f9fb;
-  padding: 8px 16px;
-  font-size: 13px;
-  font-weight: 600;
-  color: #333;
-  border-bottom: 1px solid #ebeef5;
-}
-.detail-card-title i { margin-right: 5px; color: #409EFF; }
-
-.detail-row { padding: 0 8px; }
-
-.detail-item {
-  display: flex;
-  align-items: flex-start;
-  padding: 10px 8px;
-  font-size: 13px;
-  border-bottom: 1px solid #f5f7fa;
-}
-.detail-item:last-child { border-bottom: none; }
-
-.detail-label {
-  flex-shrink: 0;
-  width: 72px;
-  color: #909399;
-  margin-right: 12px;
-}
-.detail-value { color: #303133; flex: 1; word-break: break-all; }
-.detail-location { color: #999; font-size: 12px; }
-
-.method-tag {
-  display: inline-block;
-  padding: 1px 7px;
-  border-radius: 3px;
-  font-size: 11px;
-  font-weight: 700;
-  margin-right: 6px;
-  vertical-align: middle;
-}
-.mono { font-family: Consolas, 'SFMono-Regular', monospace; font-size: 12px; }
-.code-body { padding: 14px; }
-.code-wrap {
-  background: #f7f9fb;
-  border: 1px solid #e8ecf0;
-  border-radius: 4px;
-  overflow: hidden;
-  max-height: 260px;
-  position: relative;
-}
-.code-action {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 10;
-  margin: 0;
-  padding: 0;
-}
-.code-action .el-button { 
-  height: 24px; 
-  font-size: 12px; 
-  padding: 4px 8px; 
-  background: rgba(255, 255, 255, 0.9);
-  border: 1px solid #dcdcdc;
-}
-.code-action .el-button:hover { 
-  background: #ffffff;
-  border-color: #409EFF;
-}
-.code-pre {
-  margin: 0;
-  padding: 12px 14px;
-  font-size: 12px;
-  line-height: 1.6;
-  font-family: Consolas, 'SFMono-Regular', monospace;
-  color: #444;
-  white-space: pre-wrap;
-  word-break: break-all;
-  overflow: auto;
-  max-height: 240px;
-  display: block;
-}
-
-/* tree-sidebar content */
-.tree-sidebar-manage-wrap {
-  display: flex;
-  gap: 0;
-  min-height: calc(100vh - 130px);
-  padding: 0 !important;
-  overflow: hidden;
-}
-
-.tree-sidebar-content {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  background: #fff;
-
-  .content-inner {
-    padding: 12px 16px;
-    height: 100%;
-    overflow-y: auto;
-  }
-}
-
-/* error */
-.error-title { color: #c0392b !important; }
-.error-title i { color: #c0392b !important; }
-.error-body { padding: 12px 16px; }
-.error-msg {
-  background: #fff8f8;
-  border-left: 3px solid #e74c3c;
-  border-radius: 3px;
-  padding: 8px 12px;
-  color: #c0392b;
-  font-size: 12px;
-  line-height: 1.7;
-  word-break: break-all;
-  white-space: pre-wrap;
-}
-
-/* http method */
-.method-GET    { background: #e8f5e9; color: #27ae60; }
-.method-POST   { background: #e3f2fd; color: #1565c0; }
-.method-PUT    { background: #fff3e0; color: #e65100; }
-.method-DELETE { background: #ffebee; color: #c62828; }
-
 /* text color */
 .text-navy {
   color: #1ab394;

chenhai-ui/src/assets/styles/sidebar.scss

@@ -1,14 +1,14 @@
 #app {
 
   .main-container {
-    height: 100%;
+    min-height: 100%;
     transition: margin-left .28s;
     margin-left: $base-sidebar-width;
     position: relative;
   }
 
   .sidebarHide {
-    margin-left: 0!important;
+    margin-left: 0 !important;
   }
 
   .sidebar-container {
@@ -24,8 +24,8 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
-    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+    -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
+    box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -61,7 +61,7 @@
     }
 
     .svg-icon {
-      margin-right: 10px !important;
+      margin-right: 16px;
     }
 
     .el-menu {
@@ -70,25 +70,38 @@
       width: 100% !important;
     }
 
-    .el-menu-item, .el-submenu__title {
+    .el-menu-item,
+    .el-submenu__title {
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
-      height: 44px !important;
-      line-height: 44px !important;
     }
 
+
+    .el-menu-item.is-active {
+      color: #e78361 !important;
+      background-color: $base-sub-menu-hover !important; // 点击菜单的颜色
+      &:hover {
+      background-color: $base-sub-menu-hover !important;
+      }
+    }
+
+
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
+      font-family: '微软雅黑 Light' !important;
+      font-weight: bolder !important;
+      font-size: 13px !important;
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: #4293e4 !important;
+        color: #fff !important;
       }
     }
 
-    & .theme-dark .is-active > .el-submenu__title {
-      color: $base-menu-color-active !important;
-    }
+    // & .theme-dark .is-active>.el-submenu__title {
+    //   color: $base-menu-color-active !important;
+    // }
 
     & .nest-menu .el-submenu>.el-submenu__title,
     & .el-submenu .el-menu-item {
@@ -102,101 +115,14 @@
     & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
     & .theme-dark .el-submenu .el-menu-item {
       background-color: $base-sub-menu-background !important;
+      font-family: '微软雅黑 Light' !important;
+      font-weight: bolder !important;
+      font-size: 12px !important;
 
       &:hover {
         background-color: $base-sub-menu-hover !important;
       }
     }
-
-    // theme-dark 深色主题
-    &.theme-dark {
-      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4);
-      border-right: none;
-
-      .el-menu-item.is-active {
-        position: relative;
-
-        &::before {
-          content: '';
-          position: absolute;
-          inset: 0;
-          background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));
-          border-right: 3px solid var(--current-color, #409eff);
-          pointer-events: none;
-          z-index: 1;
-        }
-      }
-
-      .el-submenu.is-active > .el-submenu__title {
-        color: var(--current-color, #409eff) !important;
-      }
-
-      .el-menu-item:not(.is-active),
-      .submenu-title-noDropdown,
-      .el-submenu__title {
-        position: relative;
-
-        &::before {
-          content: '';
-          position: absolute;
-          inset: 0;
-          background-color: transparent;
-          pointer-events: none;
-          z-index: 1;
-          transition: background-color 0.2s;
-        }
-
-        &:hover::before {
-          background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));
-        }
-      }
-    }
-    
-    // theme-light 浅色主题
-    &.theme-light {
-      border-right: 1px solid #e8eaf0;
-      box-shadow: none;
-
-      .el-menu-item,
-      .el-submenu__title {
-        color: rgba(0, 0, 0, 0.65);
-      }
-
-      .el-menu-item.is-active {
-        color: var(--current-color, #409eff) !important;
-        position: relative;
-
-        &::before {
-          content: '';
-          position: absolute;
-          inset: 0;
-          background-color: var(--current-color-light, #ecf5ff);
-          border-right: 3px solid var(--current-color, #409eff);
-          pointer-events: none;
-          z-index: 1;
-        }
-      }
-
-      .el-submenu.is-active > .el-submenu__title {
-        color: var(--current-color, #409eff) !important;
-      }
-
-      .el-menu-item:not(.is-active):hover,
-      .submenu-title-noDropdown:hover,
-      .el-submenu__title:hover {
-        background-color: #f5f7fa !important;
-        color: rgba(0, 0, 0, 0.85) !important;
-      }
-
-      .nest-menu .el-submenu > .el-submenu__title,
-      .el-submenu .el-menu-item {
-        background-color: #fafafa !important;
-
-        &:hover {
-          background-color: #f0f5ff !important;
-        }
-      }
-    }
   }
 
   .hideSidebar {
@@ -208,17 +134,15 @@
       margin-left: 54px;
     }
 
-    .el-menu:not(.el-menu--horizontal) {
-      .submenu-title-noDropdown {
-        padding: 0 !important;
-        position: relative;
+    .submenu-title-noDropdown {
+      padding: 0 !important;
+      position: relative;
 
-        .el-tooltip {
-          padding: 0 !important;
+      .el-tooltip {
+        padding: 0 !important;
 
-          .svg-icon {
-            margin-left: 20px;
-          }
+        .svg-icon {
+          margin-left: 20px;
         }
       }
     }

chenhai-ui/src/assets/styles/variables.css

@@ -0,0 +1,25 @@
+/**
+$base-menu-color:hsla(0,0%,100%,.65);
+$base-menu-color-active:#fff;
+$base-menu-background:#001529;
+$base-logo-title-color: #ffffff;
+
+$base-menu-light-color:rgba(0,0,0,.70);
+$base-menu-light-background:#ffffff;
+$base-logo-light-title-color: #001529;
+
+$base-sub-menu-background:#000c17;
+$base-sub-menu-hover:#001528;
+*/
+:export {
+  menuColor: #4DAEFE;
+  menuLightColor: rgba(0, 0, 0, 0.7);
+  menuColorActive: #4DAEFE;
+  menuBackground: #ffffff;
+  menuLightBackground: #4DAEFE;
+  subMenuBackground: #d5e3f3;
+  subMenuHover: #a1cef3;
+  sideBarWidth: 210px;
+  logoTitleColor: #4DAEFE;
+  logoLightTitleColor: #4DAEFE;
+}

chenhai-ui/src/assets/styles/variables.min.css

@@ -0,0 +1 @@
+:export{menuColor:#4DAEFE;menuLightColor:rgba(0,0,0,0.7);menuColorActive:#4DAEFE;menuBackground:#fff;menuLightBackground:#4DAEFE;subMenuBackground:#d5e3f3;subMenuHover:#a1cef3;sideBarWidth:210px;logoTitleColor:#4DAEFE;logoLightTitleColor:#4DAEFE}

chenhai-ui/src/assets/styles/variables.scss

@@ -8,20 +8,36 @@ $tiffany: #4AB7BD;
 $yellow:#FEC171;
 $panGreen: #30B08F;
 
+
 // 默认菜单主题风格
-$base-menu-color: #bfcbd9;
-$base-menu-color-active: #ffffff;
-$base-menu-background: #1a1f2e;
+$base-menu-color:#4DAEFE;
+$base-menu-color-active:#4DAEFE;
+$base-menu-background:#ffffff;
+$base-logo-title-color: #4DAEFE;
+
+$base-menu-light-color:rgba(0,0,0,.70);
+$base-menu-light-background:#4DAEFE;
+$base-logo-light-title-color: #4DAEFE;
+
+$base-sub-menu-background:#d5e3f3;
+$base-sub-menu-hover:#a1cef3;
+
+// 自定义暗色菜单风格
+/**
+$base-menu-color:hsla(0,0%,100%,.65);
+$base-menu-color-active:#fff;
+$base-menu-background:#001529;
 $base-logo-title-color: #ffffff;
 
 $base-menu-light-color:rgba(0,0,0,.70);
 $base-menu-light-background:#ffffff;
 $base-logo-light-title-color: #001529;
 
-$base-sub-menu-background: #141824;
-$base-sub-menu-hover: rgba(255,255,255,.06);
+$base-sub-menu-background:#000c17;
+$base-sub-menu-hover:#001528;
+*/
 
-$base-sidebar-width: 200px;
+$base-sidebar-width: 210px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

chenhai-ui/src/assets/styles1/btn.scss

@@ -0,0 +1,99 @@
+@import './variables.scss';
+
+@mixin colorBtn($color) {
+  background: $color;
+
+  &:hover {
+    color: $color;
+
+    &:before,
+    &:after {
+      background: $color;
+    }
+  }
+}
+
+.blue-btn {
+  @include colorBtn($blue)
+}
+
+.light-blue-btn {
+  @include colorBtn($light-blue)
+}
+
+.red-btn {
+  @include colorBtn($red)
+}
+
+.pink-btn {
+  @include colorBtn($pink)
+}
+
+.green-btn {
+  @include colorBtn($green)
+}
+
+.tiffany-btn {
+  @include colorBtn($tiffany)
+}
+
+.yellow-btn {
+  @include colorBtn($yellow)
+}
+
+.pan-btn {
+  font-size: 14px;
+  color: #fff;
+  padding: 14px 36px;
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  transition: 600ms ease all;
+  position: relative;
+  display: inline-block;
+
+  &:hover {
+    background: #fff;
+
+    &:before,
+    &:after {
+      width: 100%;
+      transition: 600ms ease all;
+    }
+  }
+
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 2px;
+    width: 0;
+    transition: 400ms ease all;
+  }
+
+  &::after {
+    right: inherit;
+    top: inherit;
+    left: 0;
+    bottom: 0;
+  }
+}
+
+.custom-button {
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background: #fff;
+  color: #fff;
+  -webkit-appearance: none;
+  text-align: center;
+  box-sizing: border-box;
+  outline: 0;
+  margin: 0;
+  padding: 10px 15px;
+  font-size: 14px;
+  border-radius: 4px;
+}

chenhai-ui/src/assets/styles1/element-ui.scss

@@ -0,0 +1,92 @@
+// cover some element-ui styles
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+.cell {
+  .el-tag {
+    margin-right: 0px;
+  }
+}
+
+.small-padding {
+  .cell {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+
+.fixed-width {
+  .el-button--mini {
+    padding: 7px 10px;
+    width: 60px;
+  }
+}
+
+.status-col {
+  .cell {
+    padding: 0 10px;
+    text-align: center;
+
+    .el-tag {
+      margin-right: 0px;
+    }
+  }
+}
+
+// to fixed https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+// refine element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+
+// dropdown
+.el-dropdown-menu {
+  a {
+    display: block
+  }
+}
+
+// fix date-picker ui bug in filter-item
+.el-range-editor.el-input__inner {
+  display: inline-flex !important;
+}
+
+// to fix el-date-picker css style
+.el-range-separator {
+  box-sizing: content-box;
+}
+
+.el-menu--collapse
+  > div
+  > .el-submenu
+  > .el-submenu__title
+  .el-submenu__icon-arrow {
+  display: none;
+}

chenhai-ui/src/assets/styles1/element-variables.scss

@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #1890ff;
+$--color-success: #13ce66;
+$--color-warning: #ffba00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+
+$--border-color-light: #dfe4ed;
+$--border-color-lighter: #e6ebf5;
+
+$--table-border: 1px solid #dfe6ec;
+
+/* icon font path, required */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}

chenhai-ui/src/assets/styles1/index.scss

@@ -0,0 +1,178 @@
+@import './variables.scss';
+@import './mixin.scss';
+@import './transition.scss';
+@import './element-ui.scss';
+@import './sidebar.scss';
+@import './btn.scss';
+
+body {
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+  font-weight: 700;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+.no-padding {
+  padding: 0px !important;
+}
+
+.padding-content {
+  padding: 4px 0;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+.fr {
+  float: right;
+}
+
+.fl {
+  float: left;
+}
+
+.pr-5 {
+  padding-right: 5px;
+}
+
+.pl-5 {
+  padding-left: 5px;
+}
+
+.block {
+  display: block;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.inlineBlock {
+  display: block;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+aside {
+  background: #eef1f6;
+  padding: 8px 24px;
+  margin-bottom: 20px;
+  border-radius: 2px;
+  display: block;
+  line-height: 32px;
+  font-size: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  color: #2c3e50;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  a {
+    color: #337ab7;
+    cursor: pointer;
+
+    &:hover {
+      color: rgb(32, 160, 255);
+    }
+  }
+}
+
+//main-container全局样式
+.app-container {
+  padding: 20px;
+}
+
+.components-container {
+  margin: 30px 50px;
+  position: relative;
+}
+
+.text-center {
+  text-align: center
+}
+
+.sub-navbar {
+  height: 50px;
+  line-height: 50px;
+  position: relative;
+  width: 100%;
+  text-align: right;
+  padding-right: 20px;
+  transition: 600ms ease position;
+  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+
+  .subtitle {
+    font-size: 20px;
+    color: #fff;
+  }
+
+  &.draft {
+    background: #d0d0d0;
+  }
+
+  &.deleted {
+    background: #d0d0d0;
+  }
+}
+
+.link-type,
+.link-type:focus {
+  color: #337ab7;
+  cursor: pointer;
+
+  &:hover {
+    color: rgb(32, 160, 255);
+  }
+}
+
+.filter-container {
+  padding-bottom: 10px;
+
+  .filter-item {
+    display: inline-block;
+    vertical-align: middle;
+    margin-bottom: 10px;
+  }
+}

chenhai-ui/src/assets/styles1/mixin.scss

@@ -0,0 +1,66 @@
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin scrollBar {
+  &::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 20px;
+  }
+}
+
+@mixin relative {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+@mixin pct($pct) {
+  width: #{$pct};
+  position: relative;
+  margin: 0 auto;
+}
+
+@mixin triangle($width, $height, $color, $direction) {
+  $width: $width/2;
+  $color-border-style: $height solid $color;
+  $transparent-border-style: $width solid transparent;
+  height: 0;
+  width: 0;
+
+  @if $direction==up {
+    border-bottom: $color-border-style;
+    border-left: $transparent-border-style;
+    border-right: $transparent-border-style;
+  }
+
+  @else if $direction==right {
+    border-left: $color-border-style;
+    border-top: $transparent-border-style;
+    border-bottom: $transparent-border-style;
+  }
+
+  @else if $direction==down {
+    border-top: $color-border-style;
+    border-left: $transparent-border-style;
+    border-right: $transparent-border-style;
+  }
+
+  @else if $direction==left {
+    border-right: $color-border-style;
+    border-top: $transparent-border-style;
+    border-bottom: $transparent-border-style;
+  }
+}

chenhai-ui/src/assets/styles1/ruoyi.scss

@@ -0,0 +1,481 @@
+/**
+* 通用css样式布局处理
+* Copyright (c) 2019 ruoyi
+*/
+
+/** 基础通用 **/
+.pt5 {
+  padding-top: 5px;
+}
+
+.pr5 {
+  padding-right: 5px;
+}
+
+.pb5 {
+  padding-bottom: 5px;
+}
+
+.mt5 {
+  margin-top: 5px;
+}
+
+.mr5 {
+  margin-right: 5px;
+}
+
+.mb5 {
+  margin-bottom: 5px;
+}
+
+.mb8 {
+  margin-bottom: 8px;
+}
+
+.ml5 {
+  margin-left: 5px;
+}
+
+.mt10 {
+  margin-top: 10px;
+}
+
+.mr10 {
+  margin-right: 10px;
+}
+
+.mb10 {
+  margin-bottom: 10px;
+}
+.ml10 {
+	margin-left: 10px;
+}
+
+.mt20 {
+  margin-top: 20px;
+}
+
+.mr20 {
+  margin-right: 20px;
+}
+
+.mb20 {
+  margin-bottom: 20px;
+}
+.ml20 {
+	margin-left: 20px;
+}
+
+.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.1;
+  color: inherit;
+}
+
+.el-message-box__status + .el-message-box__message{
+  word-break: break-word;
+}
+
+.el-dialog:not(.is-fullscreen) {
+  margin-top: 6vh !important;
+}
+
+.el-dialog__body {
+  padding: 8px 20px !important;
+}
+
+.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
+  overflow: auto;
+  overflow-x: hidden;
+  max-height: 70vh;
+  padding: 10px 20px 0;
+}
+
+.el-table {
+  .el-table__header-wrapper, .el-table__fixed-header-wrapper {
+    th {
+      word-break: break-word;
+      background-color: #f8f8f9;
+      color: #515a6e;
+      height: 40px;
+      font-size: 13px;
+    }
+  }
+
+  .el-table__body-wrapper {
+    .el-button [class*="el-icon-"] + span {
+      margin-left: 1px;
+    }
+  }
+}
+
+/** 表单布局 **/
+.form-header {
+  font-size: 15px;
+  color: #6379bb;
+  border-bottom: 1px solid #ddd;
+  margin: 8px 10px 25px 10px;
+  padding-bottom: 5px
+}
+
+/** 表格布局 **/
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+
+/* tree border */
+.tree-border {
+  margin-top: 5px;
+  border: 1px solid #e5e6e7;
+  background: #FFFFFF none;
+  border-radius: 4px;
+}
+
+/* horizontal el menu */
+.el-menu--horizontal .el-menu-item .svg-icon + span,
+.el-menu--horizontal .el-submenu__title .svg-icon + span {
+  margin-left: 3px;
+}
+
+.el-menu--horizontal .el-menu--popup {
+  min-width: 120px !important;
+}
+
+@media (max-width: 768px) {
+  .pagination-container .el-pagination > .el-pagination__jump {
+    display: none !important;
+  }
+  .pagination-container .el-pagination > .el-pagination__sizes {
+    display: none !important;
+  }
+}
+
+.el-table .fixed-width .el-button--mini {
+  padding-left: 0;
+  padding-right: 0;
+  width: inherit;
+}
+
+/** 表格更多操作下拉样式 */
+.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine {
+	cursor: pointer;
+	margin-left: 5px;
+}
+
+.el-table .el-dropdown, .el-icon-arrow-down {
+  font-size: 12px;
+}
+
+.el-tree-node__content > .el-checkbox {
+  margin-right: 8px;
+}
+
+.list-group-striped > .list-group-item {
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.list-group {
+  padding-left: 0px;
+  list-style: none;
+}
+
+.list-group-item {
+  border-bottom: 1px solid #e7eaec;
+  border-top: 1px solid #e7eaec;
+  margin-bottom: -1px;
+  padding: 11px 0px;
+  font-size: 13px;
+}
+
+.pull-right {
+  float: right !important;
+}
+
+.el-card__header {
+  padding: 14px 15px 7px;
+  min-height: 40px;
+}
+
+.el-card__body {
+  padding: 15px 20px 20px 20px;
+}
+
+.card-box {
+  margin-bottom: 10px;
+}
+
+/* button color */
+.el-button--cyan.is-active,
+.el-button--cyan:active {
+  background: #20B2AA;
+  border-color: #20B2AA;
+  color: #FFFFFF;
+}
+
+.el-button--cyan:focus,
+.el-button--cyan:hover {
+  background: #48D1CC;
+  border-color: #48D1CC;
+  color: #FFFFFF;
+}
+
+.el-button--cyan {
+  background-color: #20B2AA;
+  border-color: #20B2AA;
+  color: #FFFFFF;
+}
+
+/** 详细卡片样式 */
+.detail-drawer {
+  .el-drawer__header {
+    margin-bottom: 6px;
+    padding: 8px 12px 6px;
+    font-size: 15px;
+    color: #303133;
+    background: #f8f8f8;
+  }
+  .section-header {
+    font-size: 15px;
+    color: #6379bb;
+    border-bottom: 1px solid #ddd;
+    margin: 12px 0 16px 0;
+    padding-bottom: 8px;
+  }
+  .drawer-content {
+    padding: 0 20px 20px 20px;
+    .info-item {
+      display: flex;
+      align-items: flex-start;
+      padding: 8px 0;
+      min-height: 40px;
+    }
+    .info-label {
+      flex-shrink: 0;
+      width: 200px;
+      color: #606266;
+      font-size: 13px;
+      line-height: 1.6;
+      padding-top: 4px;
+      text-align: right;
+      margin-right: 14px;
+    }
+    .info-value {
+      flex: 1;
+      color: #303133;
+      font-size: 13px;
+      font-weight: 500;
+      line-height: 1.6;
+      word-break: break-all;
+      padding-top: 4px;
+      min-height: 1.6em;
+      &.plaintext {
+        border-bottom: 1px dashed #dde1e6;
+      }
+    }
+  }
+}
+
+.detail-wrap { padding: 0 4px; }
+
+.detail-card {
+  border: 1px solid #ebeef5;
+  border-radius: 6px;
+  margin-bottom: 14px;
+  overflow: hidden;
+}
+
+.detail-card-title {
+  background: #f7f9fb;
+  padding: 8px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #333;
+  border-bottom: 1px solid #ebeef5;
+}
+.detail-card-title i { margin-right: 5px; color: #409EFF; }
+
+.detail-row { padding: 0 8px; }
+
+.detail-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 10px 8px;
+  font-size: 13px;
+  border-bottom: 1px solid #f5f7fa;
+}
+.detail-item:last-child { border-bottom: none; }
+
+.detail-label {
+  flex-shrink: 0;
+  width: 72px;
+  color: #909399;
+  margin-right: 12px;
+}
+.detail-value { color: #303133; flex: 1; word-break: break-all; }
+.detail-location { color: #999; font-size: 12px; }
+
+.method-tag {
+  display: inline-block;
+  padding: 1px 7px;
+  border-radius: 3px;
+  font-size: 11px;
+  font-weight: 700;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+.mono { font-family: Consolas, 'SFMono-Regular', monospace; font-size: 12px; }
+.code-body { padding: 14px; }
+.code-wrap {
+  background: #f7f9fb;
+  border: 1px solid #e8ecf0;
+  border-radius: 4px;
+  overflow: hidden;
+  max-height: 260px;
+  position: relative;
+}
+.code-action {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  margin: 0;
+  padding: 0;
+}
+.code-action .el-button { 
+  height: 24px; 
+  font-size: 12px; 
+  padding: 4px 8px; 
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid #dcdcdc;
+}
+.code-action .el-button:hover { 
+  background: #ffffff;
+  border-color: #409EFF;
+}
+.code-pre {
+  margin: 0;
+  padding: 12px 14px;
+  font-size: 12px;
+  line-height: 1.6;
+  font-family: Consolas, 'SFMono-Regular', monospace;
+  color: #444;
+  white-space: pre-wrap;
+  word-break: break-all;
+  overflow: auto;
+  max-height: 240px;
+  display: block;
+}
+
+/* tree-sidebar content */
+.tree-sidebar-manage-wrap {
+  display: flex;
+  gap: 0;
+  min-height: calc(100vh - 130px);
+  padding: 0 !important;
+  overflow: hidden;
+}
+
+.tree-sidebar-content {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  background: #fff;
+
+  .content-inner {
+    padding: 12px 16px;
+    height: 100%;
+    overflow-y: auto;
+  }
+}
+
+/* error */
+.error-title { color: #c0392b !important; }
+.error-title i { color: #c0392b !important; }
+.error-body { padding: 12px 16px; }
+.error-msg {
+  background: #fff8f8;
+  border-left: 3px solid #e74c3c;
+  border-radius: 3px;
+  padding: 8px 12px;
+  color: #c0392b;
+  font-size: 12px;
+  line-height: 1.7;
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+
+/* http method */
+.method-GET    { background: #e8f5e9; color: #27ae60; }
+.method-POST   { background: #e3f2fd; color: #1565c0; }
+.method-PUT    { background: #fff3e0; color: #e65100; }
+.method-DELETE { background: #ffebee; color: #c62828; }
+
+/* text color */
+.text-navy {
+  color: #1ab394;
+}
+
+.text-primary {
+  color: inherit;
+}
+
+.text-success {
+  color: #1c84c6;
+}
+
+.text-info {
+  color: #23c6c8;
+}
+
+.text-warning {
+  color: #f8ac59;
+}
+
+.text-danger {
+  color: #ed5565;
+}
+
+.text-muted {
+  color: #888888;
+}
+
+/* image */
+.img-circle {
+  border-radius: 50%;
+}
+
+.img-lg {
+  width: 120px;
+  height: 120px;
+}
+
+.avatar-upload-preview {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  box-shadow: 0 0 4px #ccc;
+  overflow: hidden;
+}
+
+/* 拖拽列样式 */
+.sortable-ghost {
+  opacity: .8;
+  color: #fff !important;
+  background: #42b983 !important;
+}
+
+.top-right-btn {
+  position: relative;
+  float: right;
+}

chenhai-ui/src/assets/styles1/sidebar.scss

@@ -0,0 +1,321 @@
+#app {
+
+  .main-container {
+    height: 100%;
+    transition: margin-left .28s;
+    margin-left: $base-sidebar-width;
+    position: relative;
+  }
+
+  .sidebarHide {
+    margin-left: 0!important;
+  }
+
+  .sidebar-container {
+    -webkit-transition: width .28s;
+    transition: width 0.28s;
+    width: $base-sidebar-width !important;
+    background-color: $base-menu-background;
+    height: 100%;
+    position: fixed;
+    font-size: 0px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    overflow: hidden;
+    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+
+    // reset element-ui css
+    .horizontal-collapse-transition {
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+    }
+
+    .scrollbar-wrapper {
+      overflow-x: hidden !important;
+    }
+
+    .el-scrollbar__bar.is-vertical {
+      right: 0px;
+    }
+
+    .el-scrollbar {
+      height: 100%;
+    }
+
+    &.has-logo {
+      .el-scrollbar {
+        height: calc(100% - 50px);
+      }
+    }
+
+    .is-horizontal {
+      display: none;
+    }
+
+    a {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    .svg-icon {
+      margin-right: 10px !important;
+    }
+
+    .el-menu {
+      border: none;
+      height: 100%;
+      width: 100% !important;
+    }
+
+    .el-menu-item, .el-submenu__title {
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+      white-space: nowrap !important;
+      height: 44px !important;
+      line-height: 44px !important;
+    }
+
+    // menu hover
+    .submenu-title-noDropdown,
+    .el-submenu__title {
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.06) !important;
+      }
+    }
+
+    & .theme-dark .is-active > .el-submenu__title {
+      color: $base-menu-color-active !important;
+    }
+
+    & .nest-menu .el-submenu>.el-submenu__title,
+    & .el-submenu .el-menu-item {
+      min-width: $base-sidebar-width !important;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.06) !important;
+      }
+    }
+
+    & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
+    & .theme-dark .el-submenu .el-menu-item {
+      background-color: $base-sub-menu-background !important;
+
+      &:hover {
+        background-color: $base-sub-menu-hover !important;
+      }
+    }
+
+    // theme-dark 深色主题
+    &.theme-dark {
+      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4);
+      border-right: none;
+
+      .el-menu-item.is-active {
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));
+          border-right: 3px solid var(--current-color, #409eff);
+          pointer-events: none;
+          z-index: 1;
+        }
+      }
+
+      .el-submenu.is-active > .el-submenu__title {
+        color: var(--current-color, #409eff) !important;
+      }
+
+      .el-menu-item:not(.is-active),
+      .submenu-title-noDropdown,
+      .el-submenu__title {
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background-color: transparent;
+          pointer-events: none;
+          z-index: 1;
+          transition: background-color 0.2s;
+        }
+
+        &:hover::before {
+          background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));
+        }
+      }
+    }
+    
+    // theme-light 浅色主题
+    &.theme-light {
+      border-right: 1px solid #e8eaf0;
+      box-shadow: none;
+
+      .el-menu-item,
+      .el-submenu__title {
+        color: rgba(0, 0, 0, 0.65);
+      }
+
+      .el-menu-item.is-active {
+        color: var(--current-color, #409eff) !important;
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background-color: var(--current-color-light, #ecf5ff);
+          border-right: 3px solid var(--current-color, #409eff);
+          pointer-events: none;
+          z-index: 1;
+        }
+      }
+
+      .el-submenu.is-active > .el-submenu__title {
+        color: var(--current-color, #409eff) !important;
+      }
+
+      .el-menu-item:not(.is-active):hover,
+      .submenu-title-noDropdown:hover,
+      .el-submenu__title:hover {
+        background-color: #f5f7fa !important;
+        color: rgba(0, 0, 0, 0.85) !important;
+      }
+
+      .nest-menu .el-submenu > .el-submenu__title,
+      .el-submenu .el-menu-item {
+        background-color: #fafafa !important;
+
+        &:hover {
+          background-color: #f0f5ff !important;
+        }
+      }
+    }
+  }
+
+  .hideSidebar {
+    .sidebar-container {
+      width: 54px !important;
+    }
+
+    .main-container {
+      margin-left: 54px;
+    }
+
+    .el-menu:not(.el-menu--horizontal) {
+      .submenu-title-noDropdown {
+        padding: 0 !important;
+        position: relative;
+
+        .el-tooltip {
+          padding: 0 !important;
+
+          .svg-icon {
+            margin-left: 20px;
+          }
+        }
+      }
+    }
+
+    .el-submenu {
+      overflow: hidden;
+
+      &>.el-submenu__title {
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 20px;
+        }
+
+      }
+    }
+
+    .el-menu--collapse {
+      .el-submenu {
+        &>.el-submenu__title {
+          &>span {
+            height: 0;
+            width: 0;
+            overflow: hidden;
+            visibility: hidden;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+
+  .el-menu--collapse .el-menu .el-submenu {
+    min-width: $base-sidebar-width !important;
+  }
+
+  // mobile responsive
+  .mobile {
+    .main-container {
+      margin-left: 0px;
+    }
+
+    .sidebar-container {
+      transition: transform .28s;
+      width: $base-sidebar-width !important;
+    }
+
+    &.hideSidebar {
+      .sidebar-container {
+        pointer-events: none;
+        transition-duration: 0.3s;
+        transform: translate3d(-$base-sidebar-width, 0, 0);
+      }
+    }
+  }
+
+  .withoutAnimation {
+
+    .main-container,
+    .sidebar-container {
+      transition: none;
+    }
+  }
+}
+
+// when menu collapsed
+.el-menu--vertical {
+  &>.el-menu {
+    .svg-icon {
+      margin-right: 16px;
+    }
+  }
+
+  .nest-menu .el-submenu>.el-submenu__title,
+  .el-menu-item {
+    &:hover {
+      // you can use $subMenuHover
+      background-color: rgba(0, 0, 0, 0.06) !important;
+    }
+  }
+
+  // the scroll bar appears when the subMenu is too long
+  >.el-menu--popup {
+    max-height: 100vh;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar-track-piece {
+      background: #d3dce6;
+    }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #99a9bf;
+      border-radius: 20px;
+    }
+  }
+}

chenhai-ui/src/assets/styles1/transition.scss

@@ -0,0 +1,49 @@
+// global transition css
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform--move,
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}

chenhai-ui/src/assets/styles1/variables.scss

@@ -0,0 +1,39 @@
+// base color
+$blue:#324157;
+$light-blue:#3A71A8;
+$red:#C03639;
+$pink: #E65D6E;
+$green: #30B08F;
+$tiffany: #4AB7BD;
+$yellow:#FEC171;
+$panGreen: #30B08F;
+
+// 默认菜单主题风格
+$base-menu-color: #bfcbd9;
+$base-menu-color-active: #ffffff;
+$base-menu-background: #1a1f2e;
+$base-logo-title-color: #ffffff;
+
+$base-menu-light-color:rgba(0,0,0,.70);
+$base-menu-light-background:#ffffff;
+$base-logo-light-title-color: #001529;
+
+$base-sub-menu-background: #141824;
+$base-sub-menu-hover: rgba(255,255,255,.06);
+
+$base-sidebar-width: 200px;
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  menuColor: $base-menu-color;
+  menuLightColor: $base-menu-light-color;
+  menuColorActive: $base-menu-color-active;
+  menuBackground: $base-menu-background;
+  menuLightBackground: $base-menu-light-background;
+  subMenuBackground: $base-sub-menu-background;
+  subMenuHover: $base-sub-menu-hover;
+  sideBarWidth: $base-sidebar-width;
+  logoTitleColor: $base-logo-title-color;
+  logoLightTitleColor: $base-logo-light-title-color
+}

chenhai-ui/src/main.js

@@ -36,6 +36,9 @@ import DictTag from '@/components/DictTag'
 // 字典数据组件
 import DictData from '@/components/DictData'
 
+import VueAnimateNumber from 'vue-animate-number'
+import scroll from 'vue-seamless-scroll'
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
@@ -56,6 +59,8 @@ Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
 
+Vue.use(VueAnimateNumber)
+Vue.use(scroll)
 Vue.use(directive)
 Vue.use(plugins)
 DictData.install()

chenhai-ui/src/router/index.js

@@ -61,6 +61,14 @@ export const constantRoutes = [
     component: () => import('@/views/error/401'),
     hidden: true
   },
+
+  // 首页
+  {
+    path: '/Home',
+    component: () => import('@/views/Home'),
+    hidden: true
+  },
+
   {
     path: '',
     component: Layout,

chenhai-ui/src/views/Home.vue

@@ -0,0 +1,269 @@
+<template>
+    <div class="box">
+        <div class="cen_box">
+            <div id="head">
+                <div class="title">园林事务中心可视化</div>
+                <!-- 头部左侧时间和日期 -->
+                <div id="timeContainer">
+                    <!-- 日期 -->
+                    <div id="cloudDate" :style="{
+                        fontSize: '20px',
+                        color: 'rgba(255, 255, 255, 0.77)',
+                        textShadow: '6 5 5 rgba(15, 146, 255, 1)',
+                        lineHeight: '65px',
+                        fontWeight: 'normal',
+                        letterSpacing: '2px'
+                    }" />
+                    <!-- 时间 -->
+                    <div id="cloudTime" :style="{
+                        fontSize: '26px',
+                        color: 'rgba(255, 255, 255,1)',
+                        textShadow: '6 5 5 rgba(15, 146, 255, 1)',
+                        lineHeight: '60px',
+                        textAlign: 'center',
+                        fontWeight: 'normal',
+                        letterSpacing: '2px'
+                    }" />
+                    <i class="el-icon-switch-button" @click="logout()" />
+                </div>
+            </div>
+            <div id="cen_content">
+                <div id="left">
+                     <div class="left_content">
+                              <div class="tit">资产总览</div>
+                              <div id="nr"></div>
+                     </div>  
+                </div>
+                <div id="center"></div>
+                <div id="right"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import '@/assets/styles/cloud/index.css'
+import '@/assets/styles/cloud/reset.css'
+import '@/assets/styles/cloud/custom-animation.css'
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'
+
+
+export default {
+    components: {
+
+    },
+    data() {
+        return {
+            baseUrl: process.env.VUE_APP_BASE_API,
+        }
+    },
+
+    mounted() {
+        this.$nextTick(() => {
+            playAnimation('#timeContainer', [
+                {
+                    type: 'fadeIn',
+                    name: '淡入',
+                    delayed: 0.5,
+                    loop: false,
+                    frequency: 1,
+                    duration: 2,
+                    isPlayer: false,
+                    isDisabled: false
+                }
+            ])
+
+            playAnimation('#head', [
+                {
+                    type: 'fadeInDown',
+                    name: '向下移入',
+                    delayed: 0,
+                    loop: false,
+                    frequency: 1,
+                    duration: 1,
+                    isPlayer: false,
+                    isDisabled: false
+                }
+            ])
+
+            playAnimation('#cen_content', [
+                {
+                    type: 'fadeInUp',
+                    name: '向上移入',
+                    delayed: 1,
+                    loop: false,
+                    frequency: 1,
+                    duration: 1,
+                    isPlayer: false,
+                    isDisabled: false
+                }
+            ])
+
+            function playAnimation(id, animations) {
+                let index = 0
+                const ele = document.querySelector(id)
+                if (!ele) return
+                setAnimation(ele, animations[index])
+                ele.addEventListener('webkitAnimationEnd', function () {
+                    if (index < animations.length - 1) {
+                        index++
+                        setAnimation(ele, animations[index])
+                    }
+                })
+            }
+
+            function setAnimation(element, animation) {
+                const action = `${animation.duration * 1000}ms ease ${animation.delayed * 1000}ms ${animation.loop ? 'infinite' : animation.frequency} normal both running ${animation.type}`
+                element.style.animation = action
+            }
+        })
+
+        this.getCurrentDate()
+        this.getCurrentTime()
+    },
+
+    methods: {
+        async logout() {
+            this.$confirm("确定要退出系统吗？", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    this.$store.dispatch("LogOut").then(() => {
+                        location.href = "/index";
+                    });
+                })
+                .catch(() => { });
+        },
+
+        async logout() {
+            this.$confirm("确定要退出系统吗？", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    this.$store.dispatch("LogOut").then(() => {
+                        location.href = "/index";
+                    });
+                })
+                .catch(() => { });
+        },
+
+
+        getCurrentDate() {
+            const timeDom = document.querySelector('#cloudDate')
+            if (!timeDom) return
+
+            const updateDate = () => {
+                const value = dayjs().locale('zh-cn').format('MM月DD日 dddd')
+                timeDom.innerHTML = value
+            }
+            updateDate()
+            setInterval(updateDate, 1000)
+        },
+
+        getCurrentTime() {
+            const timeDom = document.querySelector('#cloudTime')
+            if (!timeDom) return
+
+            const updateTime = () => {
+                const value = dayjs().locale('zh-cn').format('HH:mm:ss')
+                timeDom.innerHTML = value
+            }
+            updateTime()
+            setInterval(updateTime, 1000)
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.box {
+    width: 100%;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
+
+    .cen_box {
+        width: 100%;
+        height: 100vh;
+        box-sizing: border-box;
+        background-image: url('../assets/images/bjt.png');
+        background-size: 100% 100%;
+        display: grid;
+        grid-template-rows:80px 1fr;
+        row-gap: 10px;
+
+        #head {
+            width: 100%;
+            background-image: url('../assets/images/head.png');
+            background-size: 100% 100%;
+            position: relative;
+
+            .title {
+                text-align: center;
+                color: #fff;
+                font-size: 35px;
+                letter-spacing: 0.2em;
+                margin-top: 5px;
+            }
+
+
+            #timeContainer {
+                width: 350px;
+                position: absolute;
+                bottom: 0;
+                right: 20px;
+                left: auto;
+                top: auto;
+                display: grid;
+                grid-template-columns: 1fr 1fr 50px;
+
+                div {
+                    width: auto;
+                }
+
+                .el-icon-switch-button {
+                    position: absolute;
+                    color: #fff;
+                    right: 0;
+                    bottom: 15px;
+                    display: inline-block;
+                    font-size: 20px;
+                    cursor: pointer;
+                }
+
+                .el-icon-switch-button:hover {
+                    color: #5DACE1;
+                }
+            }
+
+
+        }
+        #cen_content{
+            width: 100%;
+            display: grid;
+            grid-template-columns: 1fr 2fr 1fr;
+            padding: 20px 20px 10px;
+            column-gap: 20px;
+            #left{
+                   display: grid;
+                   grid-template-rows: 1fr 1fr 1fr;
+                   row-gap: 10px;
+                   .left_content{
+                        display: grid;
+                        grid-template-rows: 35px 1fr;
+                        row-gap: 10px;
+                        .tit{
+                             background-image: url('../assets/images/11.png');
+                             background-size: 100% 100%;
+                             padding: 5px 0 0 20px;
+                             color: #fff;
+                        }
+                   }
+            }
+        }
+    }
+}
+</style>

chenhai-ui/src/views/login.vue

@@ -1,223 +1,776 @@
 <template>
   <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">{{title}}</h3>
-      <el-form-item prop="username">
-        <el-input
-          v-model="loginForm.username"
-          type="text"
-          auto-complete="off"
-          placeholder="账号"
-        >
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input
-          v-model="loginForm.password"
-          type="password"
-          auto-complete="off"
-          placeholder="密码"
-          @keyup.enter.native="handleLogin"
-        >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="code" v-if="captchaEnabled">
-        <el-input
-          v-model="loginForm.code"
-          auto-complete="off"
-          placeholder="验证码"
-          style="width: 63%"
-          @keyup.enter.native="handleLogin"
-        >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+    <!-- 动态背景层 - 园林景观背景 -->
+    <div class="bg-layer">
+      <div class="bg-overlay"></div>
+    </div>
+
+    <!-- 装饰性植物元素 -->
+    <div class="plant-deco plant-left">
+      <div class="leaf leaf-1"></div>
+      <div class="leaf leaf-2"></div>
+      <div class="leaf leaf-3"></div>
+      <div class="branch branch-1"></div>
+    </div>
+    <div class="plant-deco plant-right">
+      <div class="leaf leaf-4"></div>
+      <div class="leaf leaf-5"></div>
+      <div class="leaf leaf-6"></div>
+      <div class="branch branch-2"></div>
+    </div>
+
+    <!-- 浮动摄像头装饰元素（监控主题） -->
+    <div class="camera-deco">
+      <div class="camera-icon">
+        <i class="el-icon-video-camera"></i>
+      </div>
+      <div class="camera-ring"></div>
+    </div>
+
+    <!-- 主登录卡片 -->
+    <div class="login-card">
+      <div class="card-header">
+        <div class="logo-area">
+          <div class="logo-icon">
+            <span class="logo-leaf">🌿</span>
+            <span class="logo-camera">📹</span>
+          </div>
+          <h3 class="title">园林事务中心</h3>
         </div>
-      </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-      <el-form-item style="width:100%;">
-        <el-button
-          :loading="loading"
-          size="medium"
-          type="primary"
-          style="width:100%;"
-          @click.native.prevent="handleLogin"
-        >
-          <span v-if="!loading">登 录</span>
-          <span v-else>登 录 中...</span>
-        </el-button>
-        <div style="float: right;" v-if="register">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
+        <p class="subtitle">视频监控系统</p>
+        <div class="title-divider"></div>
+      </div>
+
+      <el-form
+        ref="loginForm"
+        :model="loginForm"
+        :rules="loginRules"
+        class="login-form"
+      >
+        <el-form-item prop="username">
+          <el-input
+            v-model="loginForm.username"
+            type="text"
+            auto-complete="off"
+            placeholder="账号 / 手机号"
+            class="custom-input"
+          >
+            <template slot="prefix">
+              <i class="el-icon-user"></i>
+            </template>
+          </el-input>
+        </el-form-item>
+
+        <el-form-item prop="password">
+          <el-input
+            v-model="loginForm.password"
+            type="password"
+            auto-complete="off"
+            placeholder="密码"
+            class="custom-input"
+            @keyup.enter.native="handleLogin"
+          >
+            <template slot="prefix">
+              <i class="el-icon-lock"></i>
+            </template>
+          </el-input>
+        </el-form-item>
+
+        <!-- <el-form-item prop="code" v-if="captchaEnabled" class="captcha-item">
+          <el-input
+            v-model="loginForm.code"
+            auto-complete="off"
+            placeholder="验证码"
+            class="captcha-input"
+            @keyup.enter.native="handleLogin"
+          >
+            <template slot="prefix">
+              <i class="el-icon-key"></i>
+            </template>
+          </el-input>
+          <div class="login-code">
+            <img
+              :src="codeUrl"
+              @click="getCode"
+              class="login-code-img"
+              alt="验证码"
+            />
+          </div>
+        </el-form-item> -->
+
+        <div class="options-area">
+          <el-checkbox v-model="loginForm.rememberMe" class="remember-checkbox"
+            >记住密码</el-checkbox
+          >
+          <router-link class="forget-link" to="/forget">忘记密码？</router-link>
         </div>
-      </el-form-item>
-    </el-form>
-    <!--  底部  -->
-    <div class="el-login-footer">
-      <span>{{ footerContent }}</span>
+
+        <el-form-item style="width: 100%; margin-bottom: 12px">
+          <el-button
+            :loading="loading"
+            type="primary"
+            class="login-btn"
+            @click.native.prevent="handleLogin"
+          >
+            <span v-if="!loading">登 录</span>
+            <span v-else>登 录 中...</span>
+          </el-button>
+        </el-form-item>
+
+        <div class="register-area" v-if="register">
+          <span class="register-tip">还没有账号？</span>
+          <router-link class="register-link" :to="'/register'"
+            >立即注册</router-link
+          >
+        </div>
+      </el-form>
     </div>
+
   </div>
 </template>
 
 <script>
-import { getCodeImg } from "@/api/login"
-import Cookies from "js-cookie"
-import { encrypt, decrypt } from '@/utils/jsencrypt'
-import defaultSettings from '@/settings'
+import { getCodeImg } from "@/api/login";
+import Cookies from "js-cookie";
+import { encrypt, decrypt } from "@/utils/jsencrypt";
 
 export default {
   name: "Login",
   data() {
     return {
-      title: process.env.VUE_APP_TITLE,
-      footerContent: defaultSettings.footerContent,
+      title: "园林事务中心视频监控系统",
       codeUrl: "",
       loginForm: {
-        username: "admin",
-        password: "admin123",
+        username: "",
+        password: "",
         rememberMe: false,
         code: "",
-        uuid: ""
+        uuid: "",
       },
       loginRules: {
         username: [
-          { required: true, trigger: "blur", message: "请输入您的账号" }
+          { required: true, trigger: "blur", message: "请输入您的账号" },
         ],
         password: [
-          { required: true, trigger: "blur", message: "请输入您的密码" }
+          { required: true, trigger: "blur", message: "请输入您的密码" },
         ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+        // code: [{ required: true, trigger: "change", message: "请输入验证码" }],
       },
       loading: false,
-      // 验证码开关
       captchaEnabled: true,
-      // 注册开关
       register: false,
-      redirect: undefined
-    }
+      redirect: undefined,
+    };
   },
   watch: {
     $route: {
-      handler: function(route) {
-        this.redirect = route.query && route.query.redirect
+      handler: function (route) {
+        this.redirect = route.query && route.query.redirect;
       },
-      immediate: true
-    }
+      immediate: true,
+    },
   },
   created() {
-    this.getCode()
-    this.getCookie()
+    this.getCode();
+    this.getCookie();
   },
   methods: {
     getCode() {
-      getCodeImg().then(res => {
-        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
+      getCodeImg().then((res) => {
+        this.captchaEnabled =
+          res.captchaEnabled === undefined ? true : res.captchaEnabled;
         if (this.captchaEnabled) {
-          this.codeUrl = "data:image/gif;base64," + res.img
-          this.loginForm.uuid = res.uuid
+          this.codeUrl = "data:image/gif;base64," + res.img;
+          this.loginForm.uuid = res.uuid;
         }
-      })
+      });
     },
     getCookie() {
-      const username = Cookies.get("username")
-      const password = Cookies.get("password")
-      const rememberMe = Cookies.get('rememberMe')
+      const username = Cookies.get("username");
+      const password = Cookies.get("password");
+      const rememberMe = Cookies.get("rememberMe");
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
-        password: password === undefined ? this.loginForm.password : decrypt(password),
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
-      }
+        password:
+          password === undefined
+            ? this.loginForm.password
+            : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
+      };
     },
     handleLogin() {
-      this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
-          this.loading = true
+          this.loading = true;
           if (this.loginForm.rememberMe) {
-            Cookies.set("username", this.loginForm.username, { expires: 30 })
-            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 })
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 })
+            Cookies.set("username", this.loginForm.username, { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), {
+              expires: 30,
+            });
+            Cookies.set("rememberMe", this.loginForm.rememberMe, {
+              expires: 30,
+            });
           } else {
-            Cookies.remove("username")
-            Cookies.remove("password")
-            Cookies.remove('rememberMe')
+            Cookies.remove("username");
+            Cookies.remove("password");
+            Cookies.remove("rememberMe");
           }
-          this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{})
-          }).catch(() => {
-            this.loading = false
-            if (this.captchaEnabled) {
-              this.getCode()
-            }
-          })
+          this.$store
+            .dispatch("Login", this.loginForm)
+            .then(() => {
+              this.$router.push({ path: "/Home" }).catch(() => {});
+            })
+            .catch(() => {
+              this.loading = false;
+              if (this.captchaEnabled) {
+                this.getCode();
+              }
+            });
         }
-      })
-    }
-  }
-}
+      });
+    },
+  },
+};
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style lang="scss" scoped>
+// 定义柔和的自然色调
+$primary-green: #2a6b3c;
+$primary-light: #4a9e6e;
+$primary-dark: #1a4d2a;
+$accent-gold: #d4a056;
+$text-dark: #1e3525;
+$text-light: #4a6741;
+$shadow-sm: 0 10px 25px -5px rgba(0, 0, 0, 0.08),
+  0 8px 10px -6px rgba(0, 0, 0, 0.02);
+$shadow-lg: 0 20px 35px -8px rgba(0, 0, 0, 0.15),
+  0 4px 12px rgba(0, 0, 0, 0.05);
+$transition-base: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+
 .login {
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
+  min-height: 100vh;
+  overflow: hidden;
+  font-family: "Segoe UI", "PingFang SC", Roboto, "Helvetica Neue", sans-serif;
+}
+
+// 动态背景层 - 园林景观
+.bg-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
   height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1080'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%231a3a2a'/%3E%3Cstop offset='40%25' stop-color='%232d5a3d'/%3E%3Cstop offset='100%25' stop-color='%233d7a4d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1920' height='1080' fill='url(%23sky)'/%3E%3Cpath d='M0,800 Q200,750 400,780 T800,760 T1200,790 T1600,770 T1920,800 L1920,1080 L0,1080 Z' fill='%231a4a2a' opacity='0.5'/%3E%3Cpath d='M0,850 Q300,820 600,840 T1200,830 T1800,860 L1920,850 L1920,1080 L0,1080 Z' fill='%231e5a2e' opacity='0.4'/%3E%3C/svg%3E");
   background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  animation: slowZoom 25s ease-in-out infinite alternate;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      135deg,
+      rgba(25, 55, 35, 0.55) 0%,
+      rgba(15, 40, 25, 0.65) 100%
+    );
+  }
 }
-.title {
-  margin: 0px auto 30px auto;
-  text-align: center;
-  color: #707070;
+
+@keyframes slowZoom {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(1.06);
+  }
 }
 
-.login-form {
-  border-radius: 6px;
-  background: #ffffff;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
-  z-index: 1;
-  .el-input {
-    height: 38px;
-    input {
-      height: 38px;
+// 植物装饰元素
+.plant-deco {
+  position: absolute;
+  z-index: 2;
+  pointer-events: none;
+
+  .leaf {
+    position: absolute;
+    background: rgba(100, 160, 110, 0.35);
+    border-radius: 80% 0 75% 0;
+    backdrop-filter: blur(3px);
+    box-shadow: 0 0 15px rgba(70, 130, 80, 0.25);
+  }
+
+  .branch {
+    position: absolute;
+    background: rgba(80, 70, 50, 0.3);
+    border-radius: 4px;
+  }
+
+  &.plant-left {
+    bottom: 0;
+    left: 0;
+    width: 280px;
+    height: 280px;
+
+    .leaf-1 {
+      width: 90px;
+      height: 90px;
+      transform: rotate(45deg);
+      bottom: 30px;
+      left: 20px;
+      animation: floatLeaf 6s ease-in-out infinite;
+    }
+    .leaf-2 {
+      width: 65px;
+      height: 65px;
+      transform: rotate(-15deg);
+      bottom: 80px;
+      left: 70px;
+      animation: floatLeaf 8s ease-in-out infinite 0.5s;
+    }
+    .leaf-3 {
+      width: 50px;
+      height: 50px;
+      transform: rotate(70deg);
+      bottom: 50px;
+      left: 140px;
+      animation: floatLeaf 5s ease-in-out infinite 1s;
+    }
+    .branch-1 {
+      width: 120px;
+      height: 6px;
+      transform: rotate(25deg);
+      bottom: 65px;
+      left: 100px;
+      animation: swayBranch 7s ease-in-out infinite;
     }
   }
-  .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 2px;
+
+  &.plant-right {
+    top: 0;
+    right: 0;
+    width: 300px;
+    height: 320px;
+
+    .leaf-4 {
+      width: 110px;
+      height: 110px;
+      transform: rotate(-35deg);
+      top: 30px;
+      right: 20px;
+      animation: floatLeaf 7s ease-in-out infinite;
+    }
+    .leaf-5 {
+      width: 70px;
+      height: 70px;
+      transform: rotate(25deg);
+      top: 110px;
+      right: 80px;
+      animation: floatLeaf 9s ease-in-out infinite 0.8s;
+    }
+    .leaf-6 {
+      width: 55px;
+      height: 55px;
+      transform: rotate(-60deg);
+      top: 170px;
+      right: 30px;
+      animation: floatLeaf 6.5s ease-in-out infinite 1.5s;
+    }
+    .branch-2 {
+      width: 140px;
+      height: 7px;
+      transform: rotate(-20deg);
+      top: 100px;
+      right: 110px;
+      animation: swayBranch 8s ease-in-out infinite;
+    }
   }
 }
-.login-tip {
-  font-size: 13px;
-  text-align: center;
-  color: #bfbfbf;
-}
-.login-code {
-  width: 33%;
-  height: 38px;
-  float: right;
-  img {
-    cursor: pointer;
-    vertical-align: middle;
-  }
-}
-.el-login-footer {
-  height: 40px;
-  line-height: 40px;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
+
+// 浮动摄像头装饰
+.camera-deco {
+  position: absolute;
+  bottom: 12%;
+  right: 5%;
+  z-index: 2;
+  opacity: 0.5;
+  animation: cameraFloat 6s ease-in-out infinite;
+
+  .camera-icon {
+    width: 48px;
+    height: 48px;
+    background: rgba(30, 50, 35, 0.6);
+    backdrop-filter: blur(4px);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(100, 180, 120, 0.5);
+    box-shadow: 0 0 15px rgba(80, 160, 90, 0.3);
+
+    i {
+      font-size: 24px;
+      color: rgba(120, 200, 130, 0.8);
+    }
+  }
+
+  .camera-ring {
+    position: absolute;
+    top: -8px;
+    left: -8px;
+    right: -8px;
+    bottom: -8px;
+    border-radius: 50%;
+    border: 1px solid rgba(100, 180, 120, 0.4);
+    animation: pulseRing 2s ease-out infinite;
+  }
+}
+
+@keyframes cameraFloat {
+  0%,
+  100% {
+    transform: translateY(0) translateX(0);
+  }
+  50% {
+    transform: translateY(-12px) translateX(5px);
+  }
+}
+
+@keyframes pulseRing {
+  0% {
+    transform: scale(0.9);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(1.4);
+    opacity: 0;
+  }
+}
+
+@keyframes floatLeaf {
+  0%,
+  100% {
+    transform: translateY(0) rotate(var(--rot, 0deg));
+  }
+  50% {
+    transform: translateY(-10px) rotate(var(--rot, 0deg));
+  }
+}
+
+@keyframes swayBranch {
+  0%,
+  100% {
+    transform: rotate(25deg);
+  }
+  50% {
+    transform: rotate(30deg);
+  }
+}
+
+// 登录卡片
+.login-card {
+  position: relative;
+  z-index: 10;
+  width: 460px;
+  max-width: 90%;
+  background: rgba(255, 255, 255, 0.97);
+  backdrop-filter: blur(4px);
+  border-radius: 40px;
+  padding: 32px 38px 44px;
+  box-shadow: $shadow-lg;
+  transition: transform 0.4s ease, box-shadow 0.4s ease;
+  animation: cardAppear 0.6s ease-out;
+  border: 1px solid rgba(120, 180, 120, 0.2);
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 30px 45px -12px rgba(0, 0, 0, 0.25);
+  }
+}
+
+@keyframes cardAppear {
+  from {
+    opacity: 0;
+    transform: translateY(35px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.card-header {
   text-align: center;
-  color: #fff;
-  font-family: Arial;
-  font-size: 12px;
-  letter-spacing: 1px;
+  margin-bottom: 32px;
+
+  .logo-area {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    margin-bottom: 8px;
+
+    .logo-icon {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      background: linear-gradient(135deg, #2a6b3c20, #4a9e6e10);
+      padding: 8px 14px;
+      border-radius: 50px;
+
+      .logo-leaf {
+        font-size: 28px;
+        display: inline-block;
+        animation: gentleSwing 3s ease-in-out infinite;
+        filter: drop-shadow(0 2px 6px rgba(44, 122, 77, 0.3));
+      }
+
+      .logo-camera {
+        font-size: 24px;
+        display: inline-block;
+        animation: gentlePulse 2s ease-in-out infinite;
+      }
+    }
+
+    .title {
+      font-size: 22px;
+      font-weight: 600;
+      color: $primary-dark;
+      margin: 0;
+      letter-spacing: 2px;
+    }
+  }
+
+  .subtitle {
+    font-size: 15px;
+    font-weight: 500;
+    color: $primary-green;
+    margin: 4px 0 0 0;
+    letter-spacing: 3px;
+  }
+
+  .title-divider {
+    width: 50px;
+    height: 3px;
+    background: linear-gradient(90deg, $primary-light, $accent-gold);
+    margin: 14px auto 0;
+    border-radius: 3px;
+  }
+}
+
+@keyframes gentleSwing {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(10deg);
+  }
+}
+
+@keyframes gentlePulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 0.9;
+  }
+  50% {
+    transform: scale(1.08);
+    opacity: 1;
+  }
 }
-.login-code-img {
-  height: 38px;
+
+// 表单样式
+.login-form {
+  .custom-input {
+    ::v-deep .el-input__inner {
+      height: 50px;
+      line-height: 50px;
+      border-radius: 30px;
+      border: 1.5px solid #e2ece4;
+      background-color: #fafefb;
+      padding-left: 48px;
+      font-size: 14px;
+      color: $text-dark;
+      transition: $transition-base;
+
+      &:focus {
+        border-color: $primary-green;
+        box-shadow: 0 0 0 4px rgba(44, 122, 77, 0.1);
+        background-color: #fff;
+      }
+    }
+
+    ::v-deep .el-input__prefix {
+      left: 18px;
+      line-height: 50px;
+
+      i {
+        font-size: 18px;
+        color: #a8c4ae;
+        transition: color 0.2s;
+      }
+    }
+
+    &:hover ::v-deep .el-input__prefix i {
+      color: $primary-green;
+    }
+  }
+
+  .captcha-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    .captcha-input {
+      flex: 1;
+
+      ::v-deep .el-input__inner {
+        height: 50px;
+        line-height: 50px;
+        border-radius: 30px;
+      }
+    }
+
+    .login-code {
+      width: 120px;
+      height: 50px;
+      flex-shrink: 0;
+
+      .login-code-img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 24px;
+        cursor: pointer;
+        border: 1.5px solid #e2ece4;
+        transition: all 0.2s;
+        background: #f5f9f7;
+
+        &:hover {
+          transform: scale(0.96);
+          box-shadow: $shadow-sm;
+          border-color: $primary-light;
+        }
+      }
+    }
+  }
+
+  .options-area {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 18px 0 28px 0;
+
+    .remember-checkbox {
+      ::v-deep .el-checkbox__inner {
+        border-radius: 5px;
+        border-color: #cbdcd2;
+        background-color: #fefefe;
+      }
+      ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
+        background-color: $primary-green;
+        border-color: $primary-green;
+      }
+      color: $text-light;
+      font-weight: 400;
+    }
+
+    .forget-link {
+      color: $primary-green;
+      font-size: 13px;
+      text-decoration: none;
+      transition: color 0.2s;
+
+      &:hover {
+        color: $primary-dark;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .login-btn {
+    width: 100%;
+    height: 50px;
+    border-radius: 35px;
+    font-size: 16px;
+    font-weight: 500;
+    background: linear-gradient(105deg, $primary-green, $primary-light);
+    border: none;
+    box-shadow: 0 8px 20px rgba(44, 122, 77, 0.35);
+    transition: all 0.25s ease;
+    letter-spacing: 3px;
+
+    &:hover,
+    &:focus {
+      background: linear-gradient(105deg, $primary-dark, $primary-green);
+      transform: translateY(-2px);
+      box-shadow: 0 12px 25px rgba(44, 122, 77, 0.45);
+    }
+
+    &:active {
+      transform: translateY(1px);
+    }
+  }
+
+  .register-area {
+    text-align: center;
+    margin-top: 16px;
+
+    .register-tip {
+      font-size: 13px;
+      color: $text-light;
+    }
+
+    .register-link {
+      color: $primary-green;
+      font-weight: 500;
+      text-decoration: none;
+      margin-left: 6px;
+      transition: color 0.2s;
+
+      &:hover {
+        color: $primary-dark;
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+
+// 响应式调整
+@media (max-width: 540px) {
+  .login-card {
+    padding: 24px 22px 32px;
+  }
+
+  .plant-deco {
+    opacity: 0.35;
+    transform: scale(0.7);
+  }
+
+  .camera-deco {
+    transform: scale(0.8);
+    right: 3%;
+    bottom: 8%;
+  }
+
+  .card-header {
+    .logo-area .title {
+      font-size: 18px;
+    }
+    .subtitle {
+      font-size: 13px;
+      letter-spacing: 2px;
+    }
+  }
 }
-</style>
+</style>

chenhai-ui/vue.config.js

@@ -9,7 +9,7 @@ const CompressionPlugin = require('compression-webpack-plugin')
 
 const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题
 
-const baseUrl = 'http://localhost:8081' // 后端接口
+const baseUrl = 'http://192.168.101.109:8081' // 后端接口
 
 const port = process.env.port || process.env.npm_config_port || 81 // 端口
 

package-lock.json

@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}