版本号

src/assets/styles/home.scss

@@ -1,737 +1,738 @@
-/* home */
-.home {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: auto;
-}
-
-.home-body {
-  position: absolute;
-  left: 0;
-  top: 50px;
-  right: 0;
-  bottom: 0;
-  overflow: auto;
-  background: $--color-background;
-  z-index: 98;
-}
-
-.home-body-content {
-  position: relative;
-  padding: 20px 20px 50px 240px;
-  min-height: 100%;
-}
-
-.home-page-main {
-  .home-navs {
-    bottom: auto;
-    height: 50px;
-    border-radius: 0;
-    background-color: transparent;
-
-    &::before {
-      display: none;
-    }
-
-    .head-logo-content {
-      display: none;
-      padding: 5px 0;
-      border: none;
-    }
-
-    .el-menu {
-      display: none;
-    }
-  }
-
-  .home-breadcrumb {
-    display: none;
-  }
-
-  .home-body-content {
-    padding-left: 30px;
-  }
-}
-
-/* navs */
-.home-navs {
-  position: absolute;
-  width: 220px;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 100;
-  overflow: auto;
-  font-size: 14px;
-  background: $--color-white;
-  border-top-right-radius: $--border-radius-huge;
-  border-bottom-right-radius: $--border-radius-huge;
-
-  &::before {
-    content: "";
-    display: block;
-    position: absolute;
-    height: 100%;
-    width: 1px;
-    right: 0;
-    bottom: 0;
-    z-index: 9;
-    background: rgba(229, 229, 229, 1);
-  }
-
-  .head-logo {
-    padding: 0 40px;
-    font-size: 20px;
-    line-height: 40px;
-    text-align: center;
-
-    &-content {
-      display: block;
-      padding: 30px 0;
-      border-bottom: 1px solid #eff0f5;
-      cursor: pointer;
-
-      &:hover {
-        opacity: 0.8;
-      }
-    }
-
-    img {
-      display: block;
-      max-width: 160px;
-      height: 40px;
-    }
-  }
-
-  .nav-part {
-    padding: 20px 0;
-    border-top: 1px solid $--color-border;
-  }
-
-  .nav-head {
-    padding: 10px 0;
-    color: $--color-text-gray-2;
-    font-size: $--font-size-base;
-    line-height: 20px;
-    position: relative;
-    font-weight: 500;
-
-    > span {
-      display: inline-block;
-      vertical-align: top;
-      font-weight: 600;
-    }
-
-    &-right-icon {
-      position: absolute;
-      right: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      color: #d3d5e0;
-      font-size: 12px;
-    }
-  }
-
-  // .nav-list {
-  //   padding: 0 0 0 23px;
-  // }
-  .nav-item {
-    overflow: hidden;
-    color: $--color-text-dark-1;
-
-    &-main {
-      padding: 10px 0;
-      line-height: 20px;
-      position: relative;
-      font-weight: 500;
-      cursor: pointer;
-
-      &-act,
-      &:hover {
-        font-weight: 600;
-        color: $--color-primary;
-      }
-    }
-
-    &-icon {
-      display: block;
-      position: absolute;
-      width: 20px;
-      height: 20px;
-      top: 50%;
-      margin-top: -10px;
-      text-align: center;
-      line-height: 20px;
-    }
-
-    &-icon-right {
-      right: 5px;
-    }
-
-    &-info {
-      display: block;
-      position: absolute;
-      padding: 0 3px;
-      min-width: 16px;
-      height: 16px;
-      font-size: 12px;
-      line-height: 16px;
-      top: 12px;
-      right: 40px;
-      background-color: $--color-warning;
-      color: #fff;
-      text-align: center;
-      border-radius: 3px;
-    }
-  }
-}
-
-.el-menu-home {
-  padding-top: 20px;
-
-  .el-submenu {
-    margin-bottom: 20px;
-  }
-
-  .el-submenu__title {
-    padding: 0 40px !important;
-    height: 50px;
-    line-height: 50px;
-    font-weight: 600;
-
-    > .icon {
-      margin-right: 12px;
-    }
-  }
-
-  .el-menu-item {
-    height: auto;
-    min-height: 40px;
-    line-height: 20px;
-    padding: 10px 40px !important;
-    white-space: normal;
-  }
-
-  .el-menu-item.is-active {
-    font-weight: 600;
-  }
-
-  .el-submenu__icon-arrow {
-    right: 40px;
-  }
-}
-
-/* head */
-.home-header {
-  position: absolute;
-  width: 100%;
-  height: 50px;
-  top: 0;
-  left: 0;
-  z-index: 99;
-  color: #fff;
-  padding-left: 220px;
-  background-color: $--color-text-dark;
-
-  display: flex;
-  align-items: stretch;
-  justify-content: space-between;
-
-  .menu-list {
-    li {
-      position: relative;
-      display: inline-block;
-      vertical-align: top;
-      padding: 10px;
-      height: 50px;
-      line-height: 30px;
-      opacity: 0.4;
-      font-size: 16px;
-      position: relative;
-      text-align: center;
-      cursor: pointer;
-
-      &:hover {
-        opacity: 1;
-      }
-
-      &.menu-item-act {
-        opacity: 1;
-
-        &::after {
-          content: "";
-          display: block;
-          position: absolute;
-          left: 5px;
-          right: 5px;
-          bottom: 0;
-          border-top: 5px solid #fff;
-          border-radius: 5px;
-          z-index: 8;
-        }
-      }
-
-      span {
-        display: inline-block;
-        vertical-align: top;
-      }
-
-      .icon {
-        margin-top: -3px;
-        margin-right: 6px;
-      }
-
-      > i {
-        margin-right: 6px;
-      }
-    }
-  }
-
-  .head-menu {
-    flex-grow: 1;
-    overflow-y: hidden;
-    overflow-x: auto;
-
-    ul {
-      white-space: nowrap;
-    }
-  }
-
-  .head-user {
-    flex-grow: 0;
-    flex-shrink: 0;
-
-    .menu-item-account {
-      white-space: nowrap;
-      padding: 10px;
-
-      span {
-        max-width: 156px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-
-  // .head-menu-btn
-  .head-menu-btn {
-    display: none;
-    float: right;
-    line-height: 36px;
-    padding: 12px 15px;
-    text-align: center;
-
-    > span {
-      display: block;
-      height: 36px;
-      width: 36px;
-      border-radius: 5px;
-      background-color: rgba($color: #fff, $alpha: 0.3);
-    }
-
-    i {
-      font-size: 22px;
-      vertical-align: middle;
-    }
-  }
-}
-
-// menu-dialog
-.menu-dialog {
-  .el-dialog.is-fullscreen {
-    border-radius: 0;
-    box-shadow: none;
-
-    .el-dialog__body {
-      padding: 10px;
-
-      &::after {
-        display: none;
-      }
-    }
-  }
-
-  .menu-logout {
-    padding: 10px;
-    width: 52px;
-    height: 52px;
-    margin: 0 auto;
-    border: 1px solid $--color-text-gray-3;
-    border-radius: 50%;
-    font-size: 30px;
-    text-align: center;
-    color: $--color-text-gray-3;
-    cursor: pointer;
-
-    &:hover {
-      border-color: $--color-danger;
-      color: $--color-danger;
-    }
-  }
-}
-
-// home-breadcrumb
-.home-breadcrumb {
-  margin-bottom: 18px;
-  font-size: 12px;
-  font-weight: 500;
-  color: $--color-text-gray-2;
-
-  .breadcrumb-tips {
-    display: inline-block;
-    vertical-align: middle;
-
-    > i {
-      margin-top: -2px;
-      margin-right: 8px;
-    }
-  }
-
-  .el-breadcrumb {
-    line-height: 16px;
-    display: inline-block;
-    vertical-align: middle;
-    font-size: 12px;
-
-    .el-breadcrumb__item {
-      .el-breadcrumb__inner {
-        color: $--color-text-gray-2;
-      }
-    }
-
-    .el-breadcrumb__separator {
-      margin: 0 5px;
-    }
-  }
-}
-
-// home-view
-
-/* view-footer */
-.home-footer {
-  position: absolute;
-  width: 100%;
-  height: 60px;
-  bottom: 0;
-  left: 0;
-  z-index: auto;
-  padding: 20px 0;
-  line-height: 20px;
-  color: $--color-text-gray-3;
-  text-align: center;
-  font-size: 13px;
-
-  a {
-    color: $--color-text-gray-3;
-  }
-
-  a:hover {
-    color: $--color-text-gray;
-  }
-}
-
-// home-page
-.home-page {
-  width: 1200px;
-  margin: 0 auto;
-
-  .hp-top {
-    display: flex;
-    justify-content: space-between;
-    align-items: stretch;
-
-    &-left {
-      flex-grow: 0;
-      flex-shrink: 0;
-      width: 340px;
-      margin-right: 20px;
-    }
-
-    &-right {
-      flex-grow: 2;
-    }
-  }
-
-  .tab-summary {
-    margin-bottom: 10px;
-    font-size: 0;
-
-    &-item {
-      position: relative;
-      display: inline-block;
-      width: 100%;
-      vertical-align: top;
-      margin-right: 10px;
-      border-radius: 12px;
-      padding: 16px 20px 16px;
-      color: #fff;
-      text-align: right;
-      background: #3a5ae5;
-
-      &.item-done {
-        background: #9877ff;
-      }
-
-      &.item-wait {
-        cursor: pointer;
-        &:hover {
-          opacity: 0.8;
-        }
-      }
-    }
-
-    &-rp {
-      display: block;
-      position: absolute;
-      width: 10px;
-      height: 10px;
-      background: #fe646a;
-      border: 2px solid #eff0f5;
-      top: -2px;
-      left: -2px;
-      border-radius: 50%;
-      z-index: 9;
-    }
-
-    &-icon {
-      display: block;
-      position: absolute;
-      top: 16px;
-      left: 16px;
-      z-index: auto;
-    }
-
-    &-title {
-      font-size: 12px;
-      margin-bottom: 7px;
-      opacity: 0.6;
-    }
-
-    &-cont {
-      height: 38px;
-      font-size: 32px;
-      font-weight: bold;
-      line-height: 38px;
-    }
-  }
-
-  .tab-box {
-    border-radius: 12px;
-    background-color: #fff;
-    margin-bottom: 20px;
-    min-height: 100px;
-    padding: 20px;
-
-    &-title {
-      font-weight: bold;
-      font-size: 16px;
-      line-height: 1;
-      color: #1f222f;
-      margin-bottom: 10px;
-    }
-  }
-
-  .shortcut-list {
-    font-size: 0;
-    margin-top: 20px;
-  }
-
-  .shortcut-item {
-    display: inline-block;
-    vertical-align: top;
-    padding: 0 18px;
-    width: 180px;
-    border-radius: 8px;
-    border: 1px solid #eff0f5;
-    height: 52px;
-    line-height: 50px;
-    margin: 10px;
-    text-align: left;
-    cursor: pointer;
-
-    &:hover {
-      opacity: 0.7;
-    }
-
-    > * {
-      display: inline-block;
-      vertical-align: middle;
-    }
-  }
-
-  .icon {
-    margin-right: 18px;
-  }
-
-  .shortcut-name {
-    font-size: 14px;
-    font-weight: 500;
-    color: #434656;
-  }
-
-  .tab-task {
-    min-height: 190px;
-  }
-  .tab-task-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 0;
-
-    &:not(:last-child) {
-      border-bottom: 1px solid #eff0f5;
-    }
-
-    &-cont {
-      flex-grow: 2;
-      margin: 0 10px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      line-height: 24px;
-      cursor: pointer;
-
-      &:hover {
-        opacity: 0.7;
-      }
-    }
-
-    &-type {
-      flex-shrink: 0;
-      flex-grow: 0;
-      font-size: 12px;
-      color: rgba(58, 90, 229, 1);
-      border-radius: 6px;
-      text-align: center;
-      width: 36px;
-      height: 24px;
-      line-height: 24px;
-      background: rgba(58, 90, 229, 0.1);
-    }
-  }
-
-  .guide-map {
-    padding: 40px 0;
-    text-align: center;
-  }
-  .guide-item {
-    display: inline-block;
-    vertical-align: middle;
-    position: relative;
-    margin: 0 10px;
-
-    &:not(:last-child):after {
-      content: "";
-      display: block;
-      position: absolute;
-      width: 20px;
-      height: 10px;
-      background-image: url(../images/icon-narrow.png);
-      background-size: 100% 100%;
-      background-repeat: no-repeat;
-
-      top: 50%;
-      right: -20px;
-      margin-top: -5px;
-    }
-  }
-
-  .guide-spin {
-    width: 136px;
-    height: 136px;
-    background: #afb3c7;
-    border-radius: 68px;
-    display: table-cell;
-    vertical-align: middle;
-    text-align: center;
-    color: #1f222f;
-    font-size: 14px;
-    font-weight: bold;
-
-    &.spin-large {
-      width: 192px;
-      height: 192px;
-      border-radius: 96px;
-    }
-
-    &.spin-small {
-      width: 108px;
-      height: 108px;
-      border-radius: 54px;
-    }
-
-    &.spin-light {
-      background: #e1e3eb;
-    }
-  }
-  .island-item {
-    width: 282px;
-    background: #afb3c7;
-    border-radius: 20px;
-    padding: 30px;
-    border: 2px solid #fff;
-    position: relative;
-  }
-  .island-bottom {
-    background: #e1e3eb;
-    &::after {
-      content: "";
-      display: block;
-      position: absolute;
-      width: 40px;
-      border-width: 10px 20px;
-      border-style: solid;
-      border-color: transparent #e1e3eb transparent transparent;
-      top: -10px;
-      right: 50%;
-      z-index: 9;
-    }
-  }
-  .island-top {
-    &::after {
-      content: "";
-      display: block;
-      position: absolute;
-      width: 40px;
-      border-width: 10px 20px;
-      border-style: solid;
-      border-color: transparent transparent transparent #afb3c7;
-      bottom: -10px;
-      left: 50%;
-      z-index: 9;
-    }
-
-    .island-btn {
-      width: 100%;
-    }
-  }
-  .island-title {
-    font-size: 14px;
-    font-weight: bold;
-    color: #1f222f;
-    line-height: 21px;
-    margin-bottom: 20px;
-    text-align: left;
-  }
-  .island-cont {
-    font-size: 0;
-  }
-  .island-btn {
-    display: inline-block;
-    vertical-align: top;
-    height: 40px;
-    background: #ffffff;
-    border-radius: 6px;
-    font-weight: 500;
-    color: #434656;
-    padding: 14px 20px;
-    font-size: 12px;
-    line-height: 1;
-    text-align: center;
-
-    & + .island-btn {
-      margin-left: 10px;
-    }
-  }
-}
+/* home */
+.home {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: auto;
+}
+
+.home-body {
+  position: absolute;
+  left: 0;
+  top: 50px;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+  background: $--color-background;
+  z-index: 98;
+}
+
+.home-body-content {
+  position: relative;
+  padding: 20px 20px 50px 240px;
+  min-height: 100%;
+}
+
+.home-page-main {
+  .home-navs {
+    bottom: auto;
+    height: 50px;
+    border-radius: 0;
+    background-color: transparent;
+
+    &::before {
+      display: none;
+    }
+
+    .head-logo-content {
+      display: none;
+      padding: 5px 0;
+      border: none;
+    }
+
+    .el-menu {
+      display: none;
+    }
+  }
+
+  .home-breadcrumb {
+    display: none;
+  }
+
+  .home-body-content {
+    padding-left: 30px;
+  }
+}
+
+/* navs */
+.home-navs {
+  position: absolute;
+  width: 220px;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 100;
+  overflow: auto;
+  font-size: 14px;
+  background: $--color-white;
+  border-top-right-radius: $--border-radius-huge;
+  border-bottom-right-radius: $--border-radius-huge;
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    height: 100%;
+    width: 1px;
+    right: 0;
+    bottom: 0;
+    z-index: 9;
+    background: rgba(229, 229, 229, 1);
+  }
+
+  .head-logo {
+    padding: 0 40px;
+    font-size: 20px;
+    line-height: 40px;
+    text-align: center;
+
+    &-content {
+      display: block;
+      padding: 30px 0;
+      border-bottom: 1px solid #eff0f5;
+      cursor: pointer;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    img {
+      display: block;
+      max-width: 160px;
+      height: 40px;
+    }
+  }
+
+  .nav-part {
+    padding: 20px 0;
+    border-top: 1px solid $--color-border;
+  }
+
+  .nav-head {
+    padding: 10px 0;
+    color: $--color-text-gray-2;
+    font-size: $--font-size-base;
+    line-height: 20px;
+    position: relative;
+    font-weight: 500;
+
+    > span {
+      display: inline-block;
+      vertical-align: top;
+      font-weight: 600;
+    }
+
+    &-right-icon {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #d3d5e0;
+      font-size: 12px;
+    }
+  }
+
+  // .nav-list {
+  //   padding: 0 0 0 23px;
+  // }
+  .nav-item {
+    overflow: hidden;
+    color: $--color-text-dark-1;
+
+    &-main {
+      padding: 10px 0;
+      line-height: 20px;
+      position: relative;
+      font-weight: 500;
+      cursor: pointer;
+
+      &-act,
+      &:hover {
+        font-weight: 600;
+        color: $--color-primary;
+      }
+    }
+
+    &-icon {
+      display: block;
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      top: 50%;
+      margin-top: -10px;
+      text-align: center;
+      line-height: 20px;
+    }
+
+    &-icon-right {
+      right: 5px;
+    }
+
+    &-info {
+      display: block;
+      position: absolute;
+      padding: 0 3px;
+      min-width: 16px;
+      height: 16px;
+      font-size: 12px;
+      line-height: 16px;
+      top: 12px;
+      right: 40px;
+      background-color: $--color-warning;
+      color: #fff;
+      text-align: center;
+      border-radius: 3px;
+    }
+  }
+}
+
+.el-menu-home {
+  padding-top: 20px;
+
+  .el-submenu {
+    margin-bottom: 20px;
+  }
+
+  .el-submenu__title {
+    padding: 0 40px !important;
+    height: 50px;
+    line-height: 50px;
+    font-weight: 600;
+
+    > .icon {
+      margin-right: 12px;
+    }
+  }
+
+  .el-menu-item {
+    height: auto;
+    min-height: 40px;
+    line-height: 20px;
+    padding: 10px 40px !important;
+    white-space: normal;
+  }
+
+  .el-menu-item.is-active {
+    font-weight: 600;
+  }
+
+  .el-submenu__icon-arrow {
+    right: 40px;
+  }
+}
+
+/* head */
+.home-header {
+  position: absolute;
+  width: 100%;
+  height: 50px;
+  top: 0;
+  left: 0;
+  z-index: 99;
+  color: #fff;
+  padding-left: 220px;
+  background-color: $--color-text-dark;
+
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+
+  .menu-list {
+    li {
+      position: relative;
+      display: inline-block;
+      vertical-align: top;
+      padding: 10px;
+      height: 50px;
+      line-height: 30px;
+      opacity: 0.4;
+      font-size: 16px;
+      position: relative;
+      text-align: center;
+      cursor: pointer;
+
+      &:hover {
+        opacity: 1;
+      }
+
+      &.menu-item-act {
+        opacity: 1;
+
+        &::after {
+          content: "";
+          display: block;
+          position: absolute;
+          left: 5px;
+          right: 5px;
+          bottom: 0;
+          border-top: 5px solid #fff;
+          border-radius: 5px;
+          z-index: 8;
+        }
+      }
+
+      span {
+        display: inline-block;
+        vertical-align: top;
+      }
+
+      .icon {
+        margin-top: -3px;
+        margin-right: 6px;
+      }
+
+      > i {
+        margin-right: 6px;
+      }
+    }
+  }
+
+  .head-menu {
+    flex-grow: 1;
+    overflow-y: hidden;
+    overflow-x: auto;
+
+    ul {
+      white-space: nowrap;
+    }
+  }
+
+  .head-user {
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    .menu-item-account {
+      white-space: nowrap;
+      padding: 10px;
+
+      span {
+        max-width: 156px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  // .head-menu-btn
+  .head-menu-btn {
+    display: none;
+    float: right;
+    line-height: 36px;
+    padding: 12px 15px;
+    text-align: center;
+
+    > span {
+      display: block;
+      height: 36px;
+      width: 36px;
+      border-radius: 5px;
+      background-color: rgba($color: #fff, $alpha: 0.3);
+    }
+
+    i {
+      font-size: 22px;
+      vertical-align: middle;
+    }
+  }
+}
+
+// menu-dialog
+.menu-dialog {
+  .el-dialog.is-fullscreen {
+    border-radius: 0;
+    box-shadow: none;
+
+    .el-dialog__body {
+      padding: 10px;
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  .menu-logout {
+    padding: 10px;
+    width: 52px;
+    height: 52px;
+    margin: 0 auto;
+    border: 1px solid $--color-text-gray-3;
+    border-radius: 50%;
+    font-size: 30px;
+    text-align: center;
+    color: $--color-text-gray-3;
+    cursor: pointer;
+
+    &:hover {
+      border-color: $--color-danger;
+      color: $--color-danger;
+    }
+  }
+}
+
+// home-breadcrumb
+.home-breadcrumb {
+  margin-bottom: 18px;
+  font-size: 12px;
+  font-weight: 500;
+  color: $--color-text-gray-2;
+
+  .breadcrumb-tips {
+    display: inline-block;
+    vertical-align: middle;
+
+    > i {
+      margin-top: -2px;
+      margin-right: 8px;
+    }
+  }
+
+  .el-breadcrumb {
+    line-height: 16px;
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 12px;
+
+    .el-breadcrumb__item {
+      .el-breadcrumb__inner {
+        color: $--color-text-gray-2;
+      }
+    }
+
+    .el-breadcrumb__separator {
+      margin: 0 5px;
+    }
+  }
+}
+
+// home-view
+
+/* view-footer */
+.home-footer {
+  position: absolute;
+  width: 100%;
+  height: 30px;
+  bottom: 0;
+  left: 0;
+  z-index: 9;
+  padding: 5px 0;
+  line-height: 20px;
+  color: $--color-text-gray-3;
+  text-align: center;
+  font-size: 13px;
+  background-color: $--color-background;
+
+  a {
+    color: $--color-text-gray-3;
+  }
+
+  a:hover {
+    color: $--color-text-gray;
+  }
+}
+
+// home-page
+.home-page {
+  width: 1200px;
+  margin: 0 auto;
+
+  .hp-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+
+    &-left {
+      flex-grow: 0;
+      flex-shrink: 0;
+      width: 340px;
+      margin-right: 20px;
+    }
+
+    &-right {
+      flex-grow: 2;
+    }
+  }
+
+  .tab-summary {
+    margin-bottom: 10px;
+    font-size: 0;
+
+    &-item {
+      position: relative;
+      display: inline-block;
+      width: 100%;
+      vertical-align: top;
+      margin-right: 10px;
+      border-radius: 12px;
+      padding: 16px 20px 16px;
+      color: #fff;
+      text-align: right;
+      background: #3a5ae5;
+
+      &.item-done {
+        background: #9877ff;
+      }
+
+      &.item-wait {
+        cursor: pointer;
+        &:hover {
+          opacity: 0.8;
+        }
+      }
+    }
+
+    &-rp {
+      display: block;
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      background: #fe646a;
+      border: 2px solid #eff0f5;
+      top: -2px;
+      left: -2px;
+      border-radius: 50%;
+      z-index: 9;
+    }
+
+    &-icon {
+      display: block;
+      position: absolute;
+      top: 16px;
+      left: 16px;
+      z-index: auto;
+    }
+
+    &-title {
+      font-size: 12px;
+      margin-bottom: 7px;
+      opacity: 0.6;
+    }
+
+    &-cont {
+      height: 38px;
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 38px;
+    }
+  }
+
+  .tab-box {
+    border-radius: 12px;
+    background-color: #fff;
+    margin-bottom: 20px;
+    min-height: 100px;
+    padding: 20px;
+
+    &-title {
+      font-weight: bold;
+      font-size: 16px;
+      line-height: 1;
+      color: #1f222f;
+      margin-bottom: 10px;
+    }
+  }
+
+  .shortcut-list {
+    font-size: 0;
+    margin-top: 20px;
+  }
+
+  .shortcut-item {
+    display: inline-block;
+    vertical-align: top;
+    padding: 0 18px;
+    width: 180px;
+    border-radius: 8px;
+    border: 1px solid #eff0f5;
+    height: 52px;
+    line-height: 50px;
+    margin: 10px;
+    text-align: left;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.7;
+    }
+
+    > * {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+
+  .icon {
+    margin-right: 18px;
+  }
+
+  .shortcut-name {
+    font-size: 14px;
+    font-weight: 500;
+    color: #434656;
+  }
+
+  .tab-task {
+    min-height: 190px;
+  }
+  .tab-task-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 0;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid #eff0f5;
+    }
+
+    &-cont {
+      flex-grow: 2;
+      margin: 0 10px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      line-height: 24px;
+      cursor: pointer;
+
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+
+    &-type {
+      flex-shrink: 0;
+      flex-grow: 0;
+      font-size: 12px;
+      color: rgba(58, 90, 229, 1);
+      border-radius: 6px;
+      text-align: center;
+      width: 36px;
+      height: 24px;
+      line-height: 24px;
+      background: rgba(58, 90, 229, 0.1);
+    }
+  }
+
+  .guide-map {
+    padding: 40px 0;
+    text-align: center;
+  }
+  .guide-item {
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    margin: 0 10px;
+
+    &:not(:last-child):after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 20px;
+      height: 10px;
+      background-image: url(../images/icon-narrow.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+
+      top: 50%;
+      right: -20px;
+      margin-top: -5px;
+    }
+  }
+
+  .guide-spin {
+    width: 136px;
+    height: 136px;
+    background: #afb3c7;
+    border-radius: 68px;
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+    color: #1f222f;
+    font-size: 14px;
+    font-weight: bold;
+
+    &.spin-large {
+      width: 192px;
+      height: 192px;
+      border-radius: 96px;
+    }
+
+    &.spin-small {
+      width: 108px;
+      height: 108px;
+      border-radius: 54px;
+    }
+
+    &.spin-light {
+      background: #e1e3eb;
+    }
+  }
+  .island-item {
+    width: 282px;
+    background: #afb3c7;
+    border-radius: 20px;
+    padding: 30px;
+    border: 2px solid #fff;
+    position: relative;
+  }
+  .island-bottom {
+    background: #e1e3eb;
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 40px;
+      border-width: 10px 20px;
+      border-style: solid;
+      border-color: transparent #e1e3eb transparent transparent;
+      top: -10px;
+      right: 50%;
+      z-index: 9;
+    }
+  }
+  .island-top {
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 40px;
+      border-width: 10px 20px;
+      border-style: solid;
+      border-color: transparent transparent transparent #afb3c7;
+      bottom: -10px;
+      left: 50%;
+      z-index: 9;
+    }
+
+    .island-btn {
+      width: 100%;
+    }
+  }
+  .island-title {
+    font-size: 14px;
+    font-weight: bold;
+    color: #1f222f;
+    line-height: 21px;
+    margin-bottom: 20px;
+    text-align: left;
+  }
+  .island-cont {
+    font-size: 0;
+  }
+  .island-btn {
+    display: inline-block;
+    vertical-align: top;
+    height: 40px;
+    background: #ffffff;
+    border-radius: 6px;
+    font-weight: 500;
+    color: #434656;
+    padding: 14px 20px;
+    font-size: 12px;
+    line-height: 1;
+    text-align: center;
+
+    & + .island-btn {
+      margin-left: 10px;
+    }
+  }
+}

src/components/ViewFooter.vue

@@ -3,7 +3,7 @@
     <p>
       Copyright © 2018-2021
       <a href="http://www.qmth.com.cn" target="_blank">www.qmth.com.cn</a> , All
-      Rights Reserved.
+      Rights Reserved.<span v-if="version">v{{ version }}</span>
     </p>
   </div>
 </template>
@@ -11,5 +11,11 @@
 <script>
 export default {
   name: "view-footer",
+  data() {
+    const user = this.$ls.get("user", { version: "" });
+    return {
+      version: user.version || "",
+    };
+  },
 };
 </script>

src/views/Home.vue

@@ -107,6 +107,7 @@
           <router-view />
         </div>
       </div>
+      <view-footer></view-footer>
     </div>
 
     <!-- 修改密码 -->
@@ -129,12 +130,13 @@ import ResetPwd from "../modules/base/components/ResetPwd";
 import { SYS_ADMIN_NAME } from "@/constants/enumerate";
 import staticMenu from "../constants/staticMenu";
 import SwitchSchoolDialog from "../modules/login/components/SwitchSchoolDialog.vue";
+import ViewFooter from "../components/ViewFooter.vue";
 
 const HOME_PAGE_ROUTE = "HomePage";
 
 export default {
   name: "home",
-  components: { ResetPwd, SwitchSchoolDialog },
+  components: { ResetPwd, SwitchSchoolDialog, ViewFooter },
   data() {
     const user = this.$ls.get("user", {
       id: "",

vue.config.js

@@ -1,6 +1,10 @@
 // 配置手册： https://cli.vuejs.org/zh/config/#vue-config-js
 
 const { defineConfig } = require("@vue/cli-service");
+var package = require("./package.json");
+var v = package.version;
+const timestamp = Date.now();
+
 module.exports = defineConfig({
   transpileDependencies: true,
   // publicPath: './',
@@ -17,4 +21,16 @@ module.exports = defineConfig({
       overlay: false,
     },
   },
+  configureWebpack: {
+    output: {
+      filename: `js/[name].${v}.${timestamp}.js`,
+      chunkFilename: `js/[name].${v}.${timestamp}.js`,
+    },
+  },
+  css: {
+    extract: {
+      filename: `css/[name].${v}.${timestamp}.css`,
+      chunkFilename: `css/[name].${v}.${timestamp}.css`,
+    },
+  },
 });