字体及首页

src/assets/scss/aui.scss

@@ -3,9 +3,4 @@
 @import './variables.scss';
 // 公共
 @import './normalize.scss';
-@import './common.scss';
+@import './common-dai.scss';
-// 页面
-@import './pages/login.scss';
-@import './pages/404.scss';
-// 模块
-@import './modules/home.scss';

src/assets/scss/common-dai.scss

@@ -0,0 +1,893 @@
+@font-face {
+    font-family: "思源宋体";
+    src: local("思源宋体"), url(../fonts/SourceHanSerifCN-Regular-1.otf) format("opentype");
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: "思源宋体";
+    src: local("思源宋体"), url(../fonts/SourceHanSerifCN-Heavy-4.otf) format("opentype");
+    font-weight: 800;
+    font-style: normal;
+}
+@font-face {
+    font-family: "思源宋体";
+    src: local("思源宋体"), url(../fonts/SourceHanSerifCN-Medium-6.otf) format("opentype");
+    font-weight: 500;
+    font-style: normal;
+}
+@font-face {
+    font-family: "思源宋体";
+    src: local("思源宋体"), url(../fonts/SourceHanSerifCN-Medium-6.otf) format("opentype");
+    font-weight: 600;
+    font-style: normal;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+body {
+    font-family: "思源宋体", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+        "微软雅黑", Arial, sans-serif;
+    font-size: $--font-size-base;
+    line-height: $base--line-height;
+    color: $--color-text-primary;
+    background-color: #e8f6ff;
+}
+a {
+    color: mix(#fff, $--color-primary, 20%);
+    text-decoration: none;
+    &:focus,
+    &:hover {
+        color: $--color-primary;
+        text-decoration: underline;
+    }
+}
+img {
+    vertical-align: middle;
+}
+:focus,
+:hover {
+    outline: none;
+}
+
+/* Utils
+------------------------------ */
+[v-cloak] {
+    display: none;
+}
+.clearfix:before,
+.clearfix:after {
+    content: " ";
+    display: table;
+}
+.clearfix:after {
+    clear: both;
+}
+.fr {
+    float: right !important;
+}
+.fl {
+    float: left !important;
+}
+.fi {
+    float: initial !important;
+}
+.m-auto {
+    margin: auto !important;
+}
+.mt-auto {
+    margin-top: auto !important;
+}
+.mr-auto {
+    margin-right: auto !important;
+}
+.mb-auto {
+    margin-bottom: auto !important;
+}
+.ml-auto {
+    margin-left: auto !important;
+}
+.text-right {
+    text-align: right !important;
+}
+.text-center {
+    text-align: center !important;
+}
+.text-left {
+    text-align: left !important;
+}
+.w-percent-100 {
+    width: 100% !important;
+}
+.base-line-height {
+    line-height: $base--line-height !important;
+}
+
+/* Reset element-ui
+------------------------------ */
+.aui-wrapper {
+    .el-card + .el-card {
+        margin-top: 15px;
+    }
+    .el-input__prefix .el-input__icon {
+        display: inline-block;
+        vertical-align: middle;
+    }
+    .el-date-editor .el-range-separator {
+        width: 8%;
+    }
+    .el-table th {
+        color: $--color-text-primary;
+        background-color: $--background-color-base;
+    }
+    .el-pagination {
+        margin-top: 15px;
+        text-align: right;
+    }
+    .el-table__expand-icon {
+        display: inline-block;
+        width: 14px;
+        vertical-align: middle;
+        margin-right: 5px;
+    }
+}
+
+/* Common
+------------------------------ */
+// 图标
+.icon-svg {
+    width: 1em;
+    height: 1em;
+    fill: currentColor;
+    vertical-align: middle;
+    overflow: hidden;
+}
+// 卡片
+.aui-card--fill .el-card__header {
+    height: $content--card-header-height;
+    line-height: $content--card-header-height - 36px;
+}
+.aui-card__title {
+    font-size: 16px;
+}
+// 表单
+.aui-form__label-icon {
+    display: inline-block;
+    margin: 0 3px;
+    vertical-align: middle;
+    font-size: 18px;
+    color: $--color-text-secondary;
+}
+// 按钮
+.aui-button--dashed {
+    border-style: dashed;
+    &:focus,
+    &:hover {
+        background-color: transparent;
+    }
+    &-add {
+        > span > *[class*="el-icon-"],
+        > span > *[class*="icon"] {
+            vertical-align: middle;
+            font-size: 18px;
+            margin-right: 5px;
+        }
+    }
+}
+
+/* Layout
+------------------------------ */
+.aui-wrapper {
+    position: relative;
+    padding-top: $navbar--height;
+    &.z-iframe {
+        padding-top: 0;
+        .aui-content--tabs {
+            padding-top: 0;
+        }
+    }
+}
+
+/* Sidebar fold
+------------------------------ */
+.aui-sidebar--fold {
+    .aui-navbar {
+        &__header,
+        &__brand {
+            width: $sidebar--width-fold;
+        }
+        &__brand {
+            &-lg {
+                display: none;
+            }
+            &-mini {
+                display: inline-block;
+            }
+        }
+        &__icon-menu--switch {
+            transform: rotateZ(180deg);
+        }
+    }
+    .aui-sidebar {
+        &__inner {
+            width: $sidebar--width-fold + 20px;
+        }
+        &,
+        &__menu {
+            width: $sidebar--width-fold;
+        }
+        &__menu > li > .el-submenu__title {
+            text-align: center;
+        }
+        &__menu-icon {
+            margin-right: 0;
+            font-size: 18px;
+        }
+    }
+    .aui-content {
+        &__wrapper {
+            margin-left: $sidebar--width-fold;
+        }
+        &--tabs > .el-tabs > .el-tabs__header {
+            left: $sidebar--width-fold;
+        }
+    }
+}
+
+.aui-sidebar--noside {
+    .aui-sidebar {
+        display: none !important;
+    }
+    .aui-content {
+        &__wrapper {
+            margin-left: 0 !important;
+        }
+        &--tabs > .el-tabs > .el-tabs__header {
+            left: 0 !important;
+        }
+    }
+}
+
+/* Navbar
+------------------------------ */
+.aui-navbar {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 1030;
+    display: flex;
+    align-items: stretch;
+    height: $navbar--height;
+    background-color: $--color-primary;
+    background: linear-gradient(180deg, #02245f, #008efb);
+    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05);
+
+    &--colorful {
+        .aui-navbar__body {
+            background-color: transparent;
+        }
+        .aui-navbar__menu {
+            > .el-menu-item,
+            > .el-submenu > .el-submenu__title {
+                color: #fff;
+                &:focus,
+                &:hover {
+                    color: #fff;
+                    background-color: mix(#000, $--color-primary, 15%);
+                }
+            }
+            > .el-menu-item.is-active,
+            > .el-submenu.is-active > .el-submenu__title {
+                color: #fff;
+                &:focus,
+                &:hover {
+                    color: #fff;
+                }
+            }
+            .el-menu-item i,
+            .el-submenu__title i,
+            .el-menu-item svg,
+            .el-submenu__title svg,
+            .el-menu-item .el-dropdown {
+                color: #fff !important;
+            }
+            .el-button {
+                color: #fff;
+                background-color: transparent;
+            }
+        }
+        .aui-navbar__search {
+            &-txt {
+                .el-input__inner {
+                    color: #fff;
+                    border-color: #fff;
+                    &::-webkit-input-placeholder {
+                        color: #fff;
+                    }
+                }
+            }
+        }
+    }
+    &__header {
+        position: relative;
+        width: $sidebar--width;
+        height: $navbar--height;
+        transition: width 0.3s;
+    }
+    &__brand {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 5px;
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        font-size: 20px;
+        text-transform: uppercase;
+        white-space: nowrap;
+        color: #fff;
+        overflow: hidden;
+        transition: width 0.3s;
+        font-size: 33px;
+        font-weight: 800;
+        color: transparent;
+        // text-shadow: 0px 1px 4px rgba(2, 39, 100, 0.1);
+        background: linear-gradient(180deg, #ffffff 30%, #98cafd 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        -webkit-box-reflect: below -45% -webkit-linear-gradient(transparent, transparent 50%, rgba(255, 255, 255, 0.5));
+        &-lg,
+        &-mini {
+            max-width: 100%;
+            color: #fff;
+            cursor: pointer;
+            &:focus,
+            &:hover {
+                color: #fff;
+                text-decoration: none;
+            }
+        }
+        &-mini {
+            display: none;
+        }
+    }
+    &__body {
+        position: relative;
+        display: flex;
+        flex: 1;
+        background-color: #fff;
+        overflow: hidden;
+    }
+    &__menu {
+        background-color: transparent;
+        border-bottom: 0 !important;
+        a:focus,
+        a:hover {
+            text-decoration: none;
+        }
+        &.z-div {
+            .el-menu-item {
+                position: relative;
+
+                &:last-child {
+                    &::after {
+                        display: none;
+                    }
+                }
+
+                &::after {
+                    position: absolute;
+                    content: "";
+                    right: 0;
+                    top: 0;
+                    bottom: 0;
+                    margin: auto 0;
+                    width: 1px;
+                    height: 18px;
+                    background-color: rgba(#ffffff, 0.6);
+                }
+            }
+        }
+        .el-menu-item,
+        .el-submenu > .el-submenu__title {
+            height: $navbar--height;
+            padding: 0 15px;
+            line-height: $navbar--height;
+            border-color: transparent !important;
+        }
+        .el-menu-item.is-active,
+        .el-submenu.is-active > .el-submenu__title {
+            color: $--color-text-secondary;
+            &:focus,
+            &:hover {
+                color: $--color-text-primary;
+            }
+        }
+        .el-menu-item {
+            &:focus,
+            &:hover {
+                .aui-navbar__icon-menu {
+                    color: $--color-text-primary;
+                }
+                .el-dropdown {
+                    color: $--color-text-primary;
+                    .el-icon-arrow-down {
+                        transform: rotateZ(180deg);
+                    }
+                }
+            }
+            * {
+                vertical-align: initial;
+            }
+            .aui-navbar__icon-menu {
+                vertical-align: middle;
+                font-size: 16px;
+            }
+            .el-dropdown {
+                color: $--color-text-secondary;
+                .el-icon-arrow-down {
+                    width: auto;
+                    font-size: 12px;
+                    margin: 0 0 0 5px;
+                    transition: transform 0.3s;
+                }
+            }
+        }
+        .el-badge {
+            display: inline;
+            z-index: 2;
+            &__content {
+                line-height: 16px;
+            }
+        }
+    }
+    &__search {
+        > *[class*="el-icon-"],
+        > *[class*="icon"] {
+            display: inline-block;
+            vertical-align: middle;
+        }
+        &-txt {
+            width: 0;
+            transition: width 0.3s, margin-left 0.3s;
+            &.is-show {
+                width: 210px;
+                margin-left: 8px;
+            }
+            .el-input__inner {
+                height: $navbar--height - 20px;
+                padding: 0;
+                line-height: $navbar--height - 20px;
+                border-color: $--color-text-primary;
+                border-top: 0;
+                border-right: 0;
+                border-left: 0;
+                border-radius: 0;
+                background: transparent;
+            }
+        }
+    }
+    &__avatar {
+        .el-dropdown-link {
+            > img {
+                width: 36px;
+                height: auto;
+                margin-right: 5px;
+                border-radius: 100%;
+                vertical-align: middle;
+            }
+        }
+    }
+}
+
+/* Sidebar
+------------------------------ */
+.aui-sidebar {
+    position: fixed;
+    top: $navbar--height;
+    left: 0;
+    bottom: 0;
+    z-index: 1020;
+    width: $sidebar--width;
+    overflow: hidden;
+    transition: width 0.3s;
+    background-color: transparent;
+    padding: 8px;
+
+    .aui-sidebar_wrap {
+        height: 100%;
+        overflow: hidden;
+        background: #00213f;
+        border: 1px solid #b8c5d5;
+        border-radius: 3px;
+    }
+
+    &__inner {
+        position: relative;
+        z-index: 1;
+        width: $sidebar--width + 20px;
+        height: 100%;
+        padding-bottom: 15px;
+        overflow-x: hidden;
+        overflow-y: scroll;
+        transition: width 0.3s;
+    }
+
+    &__menu {
+        width: $sidebar--width;
+        border-right: 0;
+        transition: width 0.3s;
+
+        &.el-menu {
+            background-color: transparent;
+
+            .el-menu {
+                background-color: transparent;
+                .el-menu-item {
+                    &:hover {
+                        background-color: transparent;
+                    }
+                    &.is-active {
+                        background-color: transparent;
+                        background-image: url("~@/assets/imgs/common/sider-nav-on.png");
+                        background-size: 210px 30px;
+                        background-position: -7px center;
+                        background-repeat: no-repeat;
+                    }
+                }
+            }
+            > div {
+                > .el-menu-item,
+                > .el-submenu > .el-submenu__title {
+                    margin-bottom: 3px;
+                    height: 42px;
+                    line-height: 42px;
+                    background: linear-gradient(0deg, #a6c3d0, #ffffff);
+                    border: 1px solid #b8c5d5;
+                    border-radius: 3px;
+                    font-size: 18px;
+                    font-weight: 800;
+                    color: #002765;
+                    font-family: "思源宋体";
+                    * {
+                        vertical-align: inherit;
+                        line-height: 42px;
+                    }
+                }
+                > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
+                    display: none;
+                }
+
+                > .el-submenu {
+                    .i-arrow {
+                        width: 11px;
+                        margin-left: 3px;
+                        margin-right: 7px;
+                    }
+                    .i-down {
+                        display: none;
+                    }
+                    &.is-opened {
+                        .i-down {
+                            display: inline-block;
+                        }
+                        .i-right {
+                            display: none;
+                        }
+                    }
+                }
+            }
+        }
+        .el-menu-item,
+        .el-submenu__title {
+            height: $sidebar--menu-item-height;
+            line-height: $sidebar--menu-item-height;
+            color: #fff;
+        }
+    }
+    &__menu-icon {
+        display: inline-block;
+        vertical-align: middle;
+        width: 16px !important;
+        margin-right: 5px;
+        text-align: center;
+        font-size: 16px;
+        color: inherit !important;
+        transition: font-size 0.3s;
+    }
+}
+
+/* Content
+------------------------------ */
+.aui-content {
+    position: relative;
+    padding: $content--padding;
+    // min-height: calc(100vh - #{$navbar--height});
+    &__wrapper {
+        position: relative;
+        margin-left: $sidebar--width;
+        min-height: calc(100vh - #{$navbar--height});
+        // background-color: $content--background-color;
+        transition: margin-left 0.3s;
+    }
+    > .aui-card--fill > .el-card__body {
+        min-height: calc(#{$content--fill-height} - 2px);
+    }
+    > .aui-card--fill > .el-card__header + .el-card__body {
+        min-height: calc(#{$content--fill-height} - #{$content--card-header-height} - 2px);
+    }
+    &--tabs {
+        padding: $content--tabs-header-height 0 0;
+    }
+    &--tabs-tools {
+        position: fixed;
+        top: $navbar--height;
+        right: 0;
+        z-index: 931;
+        min-width: $content--tabs-header-height;
+        height: $content--tabs-header-height;
+        padding: 0 12px;
+        text-align: center;
+        font-size: 16px;
+        line-height: $content--tabs-header-height;
+        background-color: $--background-color-base;
+        cursor: pointer;
+    }
+    &--tabs-icon-nav {
+        display: inline-block;
+        vertical-align: middle;
+        font-size: 16px;
+    }
+    > .el-tabs {
+        > .el-tabs__header {
+            position: fixed;
+            top: $navbar--height;
+            left: $sidebar--width;
+            right: 0;
+            z-index: 930;
+            padding: 0 55px 0 15px;
+            margin: 0;
+            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+            background-color: #fff;
+            transition: left 0.3s;
+            > .el-tabs__nav-wrap {
+                margin-bottom: 0;
+                &:after {
+                    display: none;
+                }
+                > .el-tabs__nav-next,
+                > .el-tabs__nav-prev {
+                    line-height: $content--tabs-header-height;
+                }
+                > .el-tabs__nav-scroll > .el-tabs__nav {
+                    & > .el-tabs__active-bar {
+                        display: none;
+                    }
+                    & > .el-tabs__item {
+                        height: $content--tabs-header-height;
+                        padding: 0 15px;
+                        line-height: $content--tabs-header-height;
+                        border: 0;
+                        color: $--color-text-regular;
+                        &:focus,
+                        &:hover,
+                        &.is-active {
+                            color: $--color-text-primary;
+                            background-color: $--background-color-base;
+                            &:after {
+                                display: block;
+                            }
+                            > .el-icon-close {
+                                color: $--color-text-primary;
+                            }
+                        }
+                        &:after {
+                            display: none;
+                            position: absolute;
+                            bottom: 0;
+                            left: 0;
+                            content: "";
+                            width: 100%;
+                            height: 2px;
+                            background-color: $--color-primary;
+                        }
+                        + .el-tabs__item {
+                            margin-left: 1px;
+                        }
+                        > .el-icon-close {
+                            width: 14px;
+                            margin-left: 15px;
+                            color: $--color-text-secondary;
+                        }
+                        > i.icon {
+                            display: inline-block;
+                            vertical-align: middle;
+                            font-size: 18px;
+                        }
+                    }
+                }
+            }
+        }
+        > .el-tabs__content {
+            padding: $content--padding;
+            .el-loading-mask {
+                z-index: 830;
+            }
+            > .el-tab-pane {
+                min-height: calc(#{$content--fill-height-tabs});
+                > .aui-card--fill > .el-card__body {
+                    min-height: calc(#{$content--fill-height-tabs} - 2px);
+                }
+                > .aui-card--fill > .el-card__header + .el-card__body {
+                    min-height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px);
+                }
+                &.is-iframe {
+                    height: calc(#{$content--fill-height-tabs} + #{$content--padding * 2});
+                    margin: -$content--padding;
+                    min-height: auto;
+                    > .aui-card--fill {
+                        background-color: transparent;
+                    }
+                    > .aui-card--fill > .el-card__header {
+                        background-color: #fff;
+                    }
+                    > .aui-card--fill > .el-card__body {
+                        height: calc(#{$content--fill-height-tabs} - 2px);
+                        margin: $content--padding;
+                        min-height: auto;
+                        border: $--border-base;
+                        border-color: $--border-color-lighter;
+                        border-radius: $--border-radius-base;
+                        background-color: #fff;
+                    }
+                    > .aui-card--fill > .el-card__header + .el-card__body {
+                        height: calc(#{$content--fill-height-tabs} - #{$content--card-header-height} - 2px);
+                    }
+                }
+            }
+        }
+    }
+    // quill富文本编辑器
+    .ql-toolbar {
+        line-height: 20px;
+        &.ql-snow {
+            border-color: $--border-color-base;
+        }
+        .ql-formats {
+            margin: 0 5px;
+        }
+    }
+    .ql-container {
+        height: 150px;
+        &.ql-snow {
+            border-color: $--border-color-base;
+        }
+    }
+}
+
+.el-loading-mask {
+    z-index: 5001 !important;
+}
+
+/* Page
+------------------------------ */
+*[class*="aui-page__"] {
+    padding-top: 0;
+    .aui-content {
+        min-height: auto;
+        &__wrapper {
+            min-height: 100vh;
+            margin-left: 0;
+        }
+        > .aui-card--fill > .el-card__body {
+            min-height: calc(100vh - #{$content--padding * 2} - 2px);
+        }
+        > .aui-card--fill > .el-card__header + .el-card__body {
+            min-height: calc(100vh - #{$content--padding * 2} - #{$content--card-header-height} - 2px);
+        }
+    }
+}
+
+.el-button--green {
+    color: #fff;
+    background-color: #22c1c3;
+    border-color: #22c1c3;
+}
+.el-button--green:hover {
+    color: #fff;
+    background-color: #05b1b4;
+    border-color: #05b1b4;
+}
+.el-button--green:focus {
+    color: #fff;
+    background-color: #22c1c3;
+    border-color: #22c1c3;
+}
+
+.el-button--yellow:hover {
+    color: #fff;
+    background-color: #fa9200;
+    border-color: #fa9200;
+}
+.el-button--yellow:focus {
+    color: #fff;
+    background-color: #feb349;
+    border-color: #feb349;
+}
+.el-button--yellow {
+    color: #fff;
+    background-color: #feb349;
+    border-color: #feb349;
+}
+.el-button--blue:focus {
+    color: #fff;
+    background-color: #2195fe;
+    border-color: #2195fe;
+}
+.el-button--blue:hover {
+    color: #fff;
+    background-color: #0083fd;
+    border-color: #0083fd;
+}
+.el-button--blue {
+    color: #fff;
+    background-color: #2195fe;
+    border-color: #2195fe;
+}
+.el-button--red:focus {
+    color: #fff;
+    background-color: #fe6252;
+    border-color: #fe6252;
+}
+.el-button--red:hover {
+    color: #fff;
+    background-color: #fd341e;
+    border-color: #fd341e;
+}
+.el-button--red {
+    color: #fff;
+    background-color: #fe6252;
+    border-color: #fe6252;
+}
+
+// 修改表格不换行的问题
+div.el-table div.cell {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-wrap: normal;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+}
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+// 默认输入框placeholder样式
+html .el-input.is-disabled .el-input__inner,
+html .el-textarea.is-disabled textarea.el-textarea__inner {
+    color: #333;
+    background-color: rgba(#000, 0.01);
+    border-color: rgba(#000, 0.02);
+    resize: none;
+    &::placeholder {
+        // color: rgba(#fff, 0);
+    }
+}
+html .el-checkbox.is-disabled.is-checked .el-checkbox__label {
+    color: #333;
+}
+html .el-form-item__label {
+    &::after {
+        content: " :";
+        display: inline;
+        color: #333;
+    }
+}

src/assets/scss/variables.scss

@@ -2,11 +2,11 @@
 $base--line-height: 1.15;
 
 // Navbar
-$navbar--height: 50px;
+$navbar--height: 68px;
 
 // Sidebar
 $sidebar--width: 230px;
-$sidebar--width-fold: 64px;
+$sidebar--width-fold: 80px;
 $sidebar--background-color-dark: #263238;
 $sidebar--text-color-dark: #8a979e;
 $sidebar--menu-item-height: 48px;

src/views/main-content.vue

@@ -1,7 +1,7 @@
 <template>
   <main :class="['aui-content', { 'aui-content--tabs': $route.meta.isTab }]">
     <!-- tab展示内容 -->
-    <template v-if="$route.meta.isTab && !$store.state.inIframe">
+    <template v-if="false && $route.meta.isTab && !$store.state.inIframe">
       <el-dropdown class="aui-content--tabs-tools">
         <i class="el-icon-arrow-down"></i>
         <el-dropdown-menu slot="dropdown" :show-timeout="0">
@@ -30,15 +30,6 @@
           :closable="item.name !== 'indexWork'"
           :class="{ 'is-iframe': tabIsIframe(item.iframeURL) }"
         >
-          <template v-if="item.name === 'indexWork'">
-            <svg
-              slot="label"
-              class="icon-svg aui-content--tabs-icon-nav"
-              aria-hidden="true"
-            >
-              <use xlink:href="#icon-home"></use>
-            </svg>
-          </template>
           <template v-if="tabIsIframe(item.iframeURL)">
             <iframe
               :src="
@@ -65,34 +56,65 @@
     </template>
     <!-- 其他方式, 展示内容 -->
     <template v-else>
+      <div class="g-cnt">
+        <div class="m-crumb">
+          <div class="item">
+            杀杀杀
+            <i class="el-icon-arrow-right"></i>
+          </div>
+          <div class="item">嘻嘻嘻</div>
+        </div>
         <keep-alive>
           <router-view />
         </keep-alive>
+      </div>
     </template>
 
     <template v-for="(item, index) in msgList">
-      <Tips  :key="item.memoId" 
+      <Tips
+        :key="item.memoId"
         :info="item"
         :show="msgList.length > 0 ? true : false"
-      @look="handleLook(item, index)" @close="handleClose(item, index)" />
+        @look="handleLook(item, index)"
+        @close="handleClose(item, index)"
+      />
     </template>
 
-    <el-dialog :title="dialogTitle" 
+    <el-dialog
+      :title="dialogTitle"
       :visible.sync="dialogFormVisible"
       :close-on-click-modal="false"
       top="5vh"
       width="950px"
       class="dialog-h"
-      append-to-body>
+      append-to-body
-      <work-form v-if="formType == 'work_diary'" ref="ref_form" 
+    >
-      @dialogCancle="dialogFormVisible = false; formType=''" />
+      <work-form
-      
+        v-if="formType == 'work_diary'"
-      <h-form v-if="formType == 'concern'" ref="concern_form" 
+        ref="ref_form"
-      @dialogCancle="dialogFormVisible = false; formType=''" />
+        @dialogCancle="
+          dialogFormVisible = false;
+          formType = '';
+        "
+      />
 
-      <d-form v-if="formType == 'difficulty'" ref="difficulty_form" 
+      <h-form
-      @dialogCancle="dialogFormVisible = false; formType=''" />
+        v-if="formType == 'concern'"
+        ref="concern_form"
+        @dialogCancle="
+          dialogFormVisible = false;
+          formType = '';
+        "
+      />
 
+      <d-form
+        v-if="formType == 'difficulty'"
+        ref="difficulty_form"
+        @dialogCancle="
+          dialogFormVisible = false;
+          formType = '';
+        "
+      />
     </el-dialog>
   </main>
 </template>
@@ -100,29 +122,29 @@
 <script>
 import { isURL } from "@/utils/validate";
 import Cookie from "js-cookie";
-import Tips from './tips.vue'
+import Tips from "./tips.vue";
 import { requestPost } from "@/js/dai/request";
-import workForm from './modules/secretaryLog/workLog/form.vue'
+import workForm from "./modules/secretaryLog/workLog/form.vue";
-import dForm from './modules/secretaryLog/difficulty/difficultyForm.vue'
+import dForm from "./modules/secretaryLog/difficulty/difficultyForm.vue";
-import hForm from './modules/secretaryLog/humanisticCare/careForm.vue'
+import hForm from "./modules/secretaryLog/humanisticCare/careForm.vue";
 export default {
   components: {
     Tips,
     workForm,
     dForm,
-    hForm
+    hForm,
   },
   data() {
     return {
-      dialogTitle: '',
+      dialogTitle: "",
       dialogFormVisible: false,
       iframeUrl: "",
       token: "",
       customerId: "",
       form: {},
-      formType: '',
+      formType: "",
-      formLabelWidth: '120px',
+      formLabelWidth: "120px",
-      tipsList: []
+      tipsList: [],
     };
   },
   created() {
@@ -132,15 +154,15 @@ export default {
     this.token = localStorage.getItem("token");
     this.customerId = localStorage.getItem("customerId");
 
-    this.loopTips()
+    this.loopTips();
   },
   destroyed() {
-    this.$store.dispatch('clearInter')
+    this.$store.dispatch("clearInter");
   },
   computed: {
     msgList() {
-      return this.$store.state.tipsList
+      return this.$store.state.tipsList;
-    }
+    },
   },
   methods: {
     changeCustomerName(customerName) {
@@ -227,8 +249,8 @@ export default {
       iframe.postMessage({ name: "lalalal" }, "*");
     },
     loopTips() {
-      this.$store.dispatch('setTipsList')
+      this.$store.dispatch("setTipsList");
-      this.$store.dispatch('setTipsTime')
+      this.$store.dispatch("setTipsTime");
       // let id = 1
       // this.timer = setInterval(() => {
       //   id = id + 1
@@ -238,54 +260,53 @@ export default {
       // }, 1000)
     },
     async closeTips(memoId) {
-      const url = '/gov/project/memoAttr/setReaded'
+      const url = "/gov/project/memoAttr/setReaded";
       const params = {
-        memoId
+        memoId,
-      }
+      };
-      const { data, code, msg } = await requestPost(url, params)
+      const { data, code, msg } = await requestPost(url, params);
-      if (code != 0) this.$message.error(msg)
+      if (code != 0) this.$message.error(msg);
     },
     async getInfo(item) {
       const urls = {
-        work_diary: '/gov/project/memoWorkDiary',
+        work_diary: "/gov/project/memoWorkDiary",
-        concern: '/gov/project/memoConcern',
+        concern: "/gov/project/memoConcern",
-        difficulty: '/gov/project/memoDifficulty/detail'
+        difficulty: "/gov/project/memoDifficulty/detail",
-      }
+      };
       const params = {
         id: item.memoId,
-        readFlag: 0
+        readFlag: 0,
-      }
+      };
-      const { data, code, msg } = await requestPost(urls[item.type], params)
+      const { data, code, msg } = await requestPost(urls[item.type], params);
       if (code == 0) {
-        this.form = { ...data }
+        this.form = { ...data };
-      } else this.$message.error(msg)
+      } else this.$message.error(msg);
     },
     handleClose(item, index) {
-      console.log('close-----', item)
+      console.log("close-----", item);
-      this.$store.state.tipsList.splice(index, 1)
+      this.$store.state.tipsList.splice(index, 1);
-      this.closeTips(item.memoId)
+      this.closeTips(item.memoId);
     },
     async handleLook(item, index) {
-      console.log('look-----', item)
+      console.log("look-----", item);
       const formType = {
-        work_diary: 'ref_form',
+        work_diary: "ref_form",
-        concern: 'concern_form',
+        concern: "concern_form",
-        difficulty: 'difficulty_form'
+        difficulty: "difficulty_form",
-      }
+      };
-      this.dialogTitle = item.typeName
+      this.dialogTitle = item.typeName;
       // await this.getInfo(item)
-      this.formType = item.type
+      this.formType = item.type;
-      this.dialogFormVisible = true
+      this.dialogFormVisible = true;
 
-      console.log('ref0-----', this.formType)
+      console.log("ref0-----", this.formType);
       this.$nextTick(() => {
-        console.log('this.$refs-----', this.$refs)
+        console.log("this.$refs-----", this.$refs);
-        this.$refs[formType[item.type]].initForm('look', item.memoId)
+        this.$refs[formType[item.type]].initForm("look", item.memoId);
-        this.$store.state.tipsList.splice(index, 1)
+        this.$store.state.tipsList.splice(index, 1);
-        this.closeTips(item.memoId)
+        this.closeTips(item.memoId);
-      })
+      });
-      
+    },
-    }
   },
 };
 </script>
@@ -297,4 +318,40 @@ export default {
   overflow: hidden;
 }
 
+.g-cnt {
+  background: #ffffff;
+  border-radius: 3px;
+  margin-top: -30px;
+  margin-right: 8px;
+
+  .m-crumb {
+    padding-left: 10px;
+    height: 35px;
+    background: linear-gradient(0deg, #a6c3d0, #ffffff);
+    border: 1px solid #b8c5d5;
+    border-radius: 3px 3px 0px 0px;
+    font-size: 17px;
+    font-weight: 600;
+    color: #3d4c64;
+    line-height: 35px;
+    overflow: hidden;
+    .item {
+      float: left;
+      margin-left: 5px;
+      line-height: 35px;
+      color: #888;
+      &.z-on {
+        color: #333333;
+      }
+      i {
+        position: relative;
+        top: 2px;
+        display: inline-block;
+        vertical-align: bottom;
+        font-size: 16px;
+        line-height: 35px;
+      }
+    }
+  }
+}
 </style>

src/views/main-navbar.vue

@@ -15,6 +15,7 @@
           }}</a>
         </h1>
       </div>
+
       <div class="aui-navbar__body">
         <el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
           <el-menu-item
@@ -36,12 +37,13 @@
           </el-menu-item>
         </el-menu>
 
+        <div class="m-nav mr-auto z-div">
           <el-menu
             :default-active="$store.state.LevelOneMenuActiveName"
             :unique-opened="true"
             :collapseTransition="false"
             mode="horizontal"
-          class="aui-navbar__menu mr-auto z-div"
+            class="nav"
           >
             <el-menu-item @click="toIndexPage">
               <span>首页</span>
@@ -58,37 +60,21 @@
               <span>{{ menu.name }}</span>
             </el-menu-item>
           </el-menu>
+        </div>
 
-        <el-menu class="aui-navbar__menu" mode="horizontal">
+        <el-menu
-          <!-- <el-menu-item index="1">
+          class="aui-navbar__menu"
-            <el-dropdown placement="bottom"
+          mode="horizontal"
-                         :show-timeout="0">
+          style="min-width: 180px"
-              <el-button size="mini">{{ $t('_lang') }}</el-button>
+        >
-              <el-dropdown-menu slot="dropdown">
+          <el-menu-item index="2" @click="fullscreenHandle()">
-                <el-dropdown-item v-for="(val, key) in i18nMessages"
+            <img
-                                  :key="key"
+              style="position: relative; top: 5px; width: 18px; height: 18px"
-                                  @click.native="$i18n.locale = key">{{ val._lang }}</el-dropdown-item>
+              src="~@/assets/imgs/common/message.png"
-              </el-dropdown-menu>
+            />
-            </el-dropdown>
+          </el-menu-item>
-          </el-menu-item> -->
-          <!-- <el-menu-item index="2">
-            <a href="//www.renren.io/"
-               target="_blank">
-              <svg class="icon-svg aui-navbar__icon-menu"
-                   aria-hidden="true">
-                <use xlink:href="#icon-earth"></use>
-              </svg>
-            </a>
-          </el-menu-item> -->
-          <!-- <el-menu-item index="3"
-                        @click="fullscreenHandle()">
-            <svg class="icon-svg aui-navbar__icon-menu"
-                 aria-hidden="true">
-              <use xlink:href="#icon-fullscreen"></use>
-            </svg>
-          </el-menu-item> -->
 
-          <el-menu-item index="4" class="aui-navbar__avatar">
+          <el-menu-item index="1" class="aui-navbar__avatar">
             <el-dropdown placement="bottom" :show-timeout="0">
               <span class="el-dropdown-link">
                 <img
@@ -247,4 +233,86 @@ export default {
   height: 50px;
   background: #eeeeee;
 }
+
+.m-nav {
+  position: relative;
+  bottom: 0;
+  padding: 0 75px;
+  margin-top: 30px;
+
+  .nav {
+    height: 38px;
+    line-height: 38px;
+    background-image: url("~@/assets/imgs/common/nav-bg-center.png");
+    background-size: 225px 38px;
+    background-repeat: repeat no-repeat;
+    color: #ffffff;
+    border-bottom: none;
+
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      z-index: -1;
+      background-image: url("~@/assets/imgs/common/nav-bg-left.png");
+      background-size: 90px 38px;
+      left: -75px;
+      width: 90px;
+      height: 38px;
+      background-repeat: no-repeat;
+    }
+
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      z-index: -1;
+      background-image: url("~@/assets/imgs/common/nav-bg-right.png");
+      background-size: 90px 38px;
+      right: -75px;
+      width: 90px;
+      height: 38px;
+      background-repeat: no-repeat;
+    }
+    ::v-deep .el-menu-item {
+      position: relative;
+      height: 38px;
+      line-height: 34px;
+      color: #ffffff;
+      font-size: 13px;
+      border-bottom: none;
+      text-align: center;
+      span {
+        position: relative;
+        z-index: 2;
+      }
+
+      &.is-active {
+        background-color: transparent;
+        border-bottom: none;
+        &::before {
+          position: absolute;
+          z-index: 0;
+          width: 105px;
+          height: 30px;
+          display: block;
+          content: "";
+          top: -100px;
+          left: -100px;
+          right: -100px;
+          bottom: -100px;
+          margin: auto;
+          background-image: url("~@/assets/imgs/common/nav-bg-on.png");
+          background-size: 105px 30px;
+          background-position: center;
+          background-repeat: no-repeat;
+        }
+      }
+      &:hover,
+      &:active {
+        background-color: transparent;
+      }
+    }
+  }
+}
 </style>

src/views/main-shuju/main-theme-tools.vue

@@ -1,85 +0,0 @@
-<template>
-  <div class="aui-theme-tools" v-show="false" :class="{ 'aui-theme-tools--open': isOpen }">
-    <div class="aui-theme-tools__toggle" @click="isOpen = !isOpen">
-      <svg class="icon-svg" aria-hidden="true">
-        <use xlink:href="#icon-setting"></use>
-      </svg>
-    </div>
-    <div class="aui-theme-tools__content">
-      <div class="aui-theme-tools__item">
-        <h3>Navbar</h3>
-        <el-checkbox
-          v-model="$store.state.navbarLayoutType"
-          true-label="colorful"
-          >colorful 鲜艳</el-checkbox
-        >
-      </div>
-      <div class="aui-theme-tools__item">
-        <h3>Sidebar</h3>
-        <el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark"
-          >dark 黑色</el-checkbox
-        >
-      </div>
-      <div class="aui-theme-tools__item">
-        <h3>Theme</h3>
-        <el-radio-group v-model="themeColor" @change="themeColorChangeHandle">
-          <el-radio
-            v-for="item in themeList"
-            :key="item.name"
-            :label="item.name"
-            >{{ `${item.name} ${item.desc}` }}</el-radio
-          >
-        </el-radio-group>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      isOpen: false,
-      themeList: require('@/element-ui/config.js'),
-      themeColor: ''
-    }
-  },
-  created() {
-    let color = window.localStorage.getItem('themeColor') || 'blue'
-    this.themeColorChangeHandle(color)
-    this.themeColor = color
-  },
-  methods: {
-    themeColorChangeHandle(val) {
-      window.localStorage.setItem('themeColor', val)
-
-      var styleList = [
-        {
-          id: 'J_elementTheme',
-          url: `${
-            process.env.BASE_URL
-          }element-theme/${val}/index.css?t=${new Date().getTime()}`
-        },
-        {
-          id: 'J_auiTheme',
-          url: `${
-            process.env.BASE_URL
-          }element-theme/${val}/aui.css?t=${new Date().getTime()}`
-        }
-      ]
-      for (var i = 0; i < styleList.length; i++) {
-        var el = document.querySelector(`#${styleList[i].id}`)
-        if (el) {
-          el.href = styleList[i].url
-          continue
-        }
-        el = document.createElement('link')
-        el.id = styleList[i].id
-        el.href = styleList[i].url
-        el.rel = 'stylesheet'
-        document.querySelector('head').appendChild(el)
-      }
-    }
-  }
-}
-</script>

src/views/main-shuju/main.vue

@@ -21,7 +21,6 @@
             @changeCustomerName="changeCustomerName"
           />
         </div>
-        <main-theme-tools />
       </template>
     </div>
   </fixed1920>
@@ -35,7 +34,6 @@ import { mapGetters } from "vuex";
 import nextTick from "dai-js/tools/nextTick";
 import { requestPost } from "@/js/dai/request";
 import fixed1920 from "@/views/components/fixed1920.vue";
-import MainThemeTools from "./main-theme-tools";
 
 export default {
   provide() {
@@ -59,7 +57,6 @@ export default {
     MainNavbar,
     MainContent,
     fixed1920,
-    MainThemeTools,
   },
 
   watch: {

src/views/main-sidebar-sub-menu.vue

@@ -8,12 +8,27 @@
       popper-append-to-body
     >
       <template slot="title">
-        <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
+        <svg
+          v-if="!root"
+          class="icon-svg aui-sidebar__menu-icon"
+          aria-hidden="true"
+        >
           <use :xlink:href="`#${menu.icon}`" />
         </svg>
+        <img
+          v-if="root"
+          class="i-arrow i-right"
+          src="~@/assets/imgs/common/arrow-right.png"
+        />
+        <img
+          v-if="root"
+          class="i-arrow i-down"
+          src="~@/assets/imgs/common/arrow-down.png"
+        />
         <span>{{ menu.name }}</span>
       </template>
       <sub-menu
+        :root="false"
         v-show="item.showFlag == 1"
         v-for="item in menu.children"
         :key="item.id"
@@ -38,6 +53,10 @@ export default {
       type: Object,
       required: true,
     },
+    root: {
+      type: Boolean,
+      default: true,
+    },
   },
   components: {
     SubMenu,

src/views/main-sidebar.vue

@@ -2,6 +2,7 @@
   <aside
     :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}`]"
   >
+    <div class="aui-sidebar_wrap">
       <div class="aui-sidebar__inner">
         <el-menu
           :default-active="$store.state.sidebarMenuActiveName"
@@ -17,29 +18,30 @@
           />
         </el-menu>
       </div>
+    </div>
   </aside>
 </template>
 
 <script>
-import SubMenu from './main-sidebar-sub-menu'
+import SubMenu from "./main-sidebar-sub-menu";
 
 export default {
   data() {
-    return {}
+    return {};
   },
   components: {
-    SubMenu
+    SubMenu,
   },
   computed: {
     userType() {
-      return localStorage.getItem('userType')
+      return localStorage.getItem("userType");
-    }
+    },
   },
   created() {
-    this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']
+    this.$store.state.sidebarMenuList = window.SITE_CONFIG["menuList"];
-    console.log(this.$store.state.sidebarMenuList)
+    console.log(this.$store.state.sidebarMenuList);
-  }
+  },
-}
+};
 </script>
 <style>
 .el-menu--collapse .el-submenu__title span,

src/views/main-theme-tools.vue

@@ -1,85 +0,0 @@
-<template>
-  <div class="aui-theme-tools" v-show="false" :class="{ 'aui-theme-tools--open': isOpen }">
-    <div class="aui-theme-tools__toggle" @click="isOpen = !isOpen">
-      <svg class="icon-svg" aria-hidden="true">
-        <use xlink:href="#icon-setting"></use>
-      </svg>
-    </div>
-    <div class="aui-theme-tools__content">
-      <div class="aui-theme-tools__item">
-        <h3>Navbar</h3>
-        <el-checkbox
-          v-model="$store.state.navbarLayoutType"
-          true-label="colorful"
-          >colorful 鲜艳</el-checkbox
-        >
-      </div>
-      <div class="aui-theme-tools__item">
-        <h3>Sidebar</h3>
-        <el-checkbox v-model="$store.state.sidebarLayoutSkin" true-label="dark"
-          >dark 黑色</el-checkbox
-        >
-      </div>
-      <div class="aui-theme-tools__item">
-        <h3>Theme</h3>
-        <el-radio-group v-model="themeColor" @change="themeColorChangeHandle">
-          <el-radio
-            v-for="item in themeList"
-            :key="item.name"
-            :label="item.name"
-            >{{ `${item.name} ${item.desc}` }}</el-radio
-          >
-        </el-radio-group>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      isOpen: false,
-      themeList: require('@/element-ui/config.js'),
-      themeColor: ''
-    }
-  },
-  created() {
-    let color = window.localStorage.getItem('themeColor') || 'blue'
-    this.themeColorChangeHandle(color)
-    this.themeColor = color
-  },
-  methods: {
-    themeColorChangeHandle(val) {
-      window.localStorage.setItem('themeColor', val)
-
-      var styleList = [
-        {
-          id: 'J_elementTheme',
-          url: `${
-            process.env.BASE_URL
-          }element-theme/${val}/index.css?t=${new Date().getTime()}`
-        },
-        {
-          id: 'J_auiTheme',
-          url: `${
-            process.env.BASE_URL
-          }element-theme/${val}/aui.css?t=${new Date().getTime()}`
-        }
-      ]
-      for (var i = 0; i < styleList.length; i++) {
-        var el = document.querySelector(`#${styleList[i].id}`)
-        if (el) {
-          el.href = styleList[i].url
-          continue
-        }
-        el = document.createElement('link')
-        el.id = styleList[i].id
-        el.href = styleList[i].url
-        el.rel = 'stylesheet'
-        document.querySelector('head').appendChild(el)
-      }
-    }
-  }
-}
-</script>

src/views/main.vue

@@ -22,7 +22,6 @@
           @changeCustomerName="changeCustomerName"
         />
       </div>
-      <main-theme-tools />
 
       <!-- <secretary-log-notice v-if="!$store.state.inIframe" /> -->
     </template>
@@ -33,7 +32,6 @@
 import MainNavbar from "./main-navbar";
 import MainSidebar from "./main-sidebar";
 import MainContent from "./main-content";
-import MainThemeTools from "./main-theme-tools";
 import SecretaryLogNotice from "./modules/secretaryLog/cpts/notice";
 import debounce from "lodash/debounce";
 import { mapGetters } from "vuex";
@@ -62,7 +60,6 @@ export default {
     MainNavbar,
     MainSidebar,
     MainContent,
-    MainThemeTools,
     SecretaryLogNotice,
   },