diff --git a/src/assets/fonts/SourceHanSerifCN-Bold-2.otf b/src/assets/fonts/SourceHanSerifCN-Bold-2.otf new file mode 100644 index 000000000..28e08c54f Binary files /dev/null and b/src/assets/fonts/SourceHanSerifCN-Bold-2.otf differ diff --git a/src/assets/fonts/SourceHanSerifCN-Heavy-4.otf b/src/assets/fonts/SourceHanSerifCN-Heavy-4.otf new file mode 100644 index 000000000..014238cd0 Binary files /dev/null and b/src/assets/fonts/SourceHanSerifCN-Heavy-4.otf differ diff --git a/src/assets/fonts/SourceHanSerifCN-Medium-6.otf b/src/assets/fonts/SourceHanSerifCN-Medium-6.otf new file mode 100644 index 000000000..da8ecf811 Binary files /dev/null and b/src/assets/fonts/SourceHanSerifCN-Medium-6.otf differ diff --git a/src/assets/fonts/SourceHanSerifCN-Regular-1.otf b/src/assets/fonts/SourceHanSerifCN-Regular-1.otf new file mode 100644 index 000000000..91b48b7fc Binary files /dev/null and b/src/assets/fonts/SourceHanSerifCN-Regular-1.otf differ diff --git a/src/assets/imgs/common/arrow-down.png b/src/assets/imgs/common/arrow-down.png new file mode 100644 index 000000000..ccfc9c29d Binary files /dev/null and b/src/assets/imgs/common/arrow-down.png differ diff --git a/src/assets/imgs/common/arrow-right.png b/src/assets/imgs/common/arrow-right.png new file mode 100644 index 000000000..fdb7d5c41 Binary files /dev/null and b/src/assets/imgs/common/arrow-right.png differ diff --git a/src/assets/imgs/common/message.png b/src/assets/imgs/common/message.png new file mode 100644 index 000000000..4cd795159 Binary files /dev/null and b/src/assets/imgs/common/message.png differ diff --git a/src/assets/imgs/common/nav-bg-center.png b/src/assets/imgs/common/nav-bg-center.png new file mode 100644 index 000000000..12e431812 Binary files /dev/null and b/src/assets/imgs/common/nav-bg-center.png differ diff --git a/src/assets/imgs/common/nav-bg-left.png b/src/assets/imgs/common/nav-bg-left.png new file mode 100644 index 000000000..5279f7c5b Binary files /dev/null and b/src/assets/imgs/common/nav-bg-left.png differ diff --git a/src/assets/imgs/common/nav-bg-on.png b/src/assets/imgs/common/nav-bg-on.png new file mode 100644 index 000000000..fdd69b144 Binary files /dev/null and b/src/assets/imgs/common/nav-bg-on.png differ diff --git a/src/assets/imgs/common/nav-bg-right.png b/src/assets/imgs/common/nav-bg-right.png new file mode 100644 index 000000000..b91027982 Binary files /dev/null and b/src/assets/imgs/common/nav-bg-right.png differ diff --git a/src/assets/imgs/common/sider-nav-on.png b/src/assets/imgs/common/sider-nav-on.png new file mode 100644 index 000000000..97195ffd1 Binary files /dev/null and b/src/assets/imgs/common/sider-nav-on.png differ diff --git a/src/assets/scss/aui.scss b/src/assets/scss/aui.scss index 1cb1c14b7..eb7f50d46 100644 --- a/src/assets/scss/aui.scss +++ b/src/assets/scss/aui.scss @@ -3,9 +3,4 @@ @import './variables.scss'; // 公共 @import './normalize.scss'; -@import './common.scss'; -// 页面 -@import './pages/login.scss'; -@import './pages/404.scss'; -// 模块 -@import './modules/home.scss'; +@import './common-dai.scss'; diff --git a/src/assets/scss/common-dai.scss b/src/assets/scss/common-dai.scss new file mode 100644 index 000000000..df30eac4c --- /dev/null +++ b/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; + } +} diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss index 171d57283..29365a909 100644 --- a/src/assets/scss/variables.scss +++ b/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; diff --git a/src/views/main-content.vue b/src/views/main-content.vue index cdb28ec92..56a425eaa 100644 --- a/src/views/main-content.vue +++ b/src/views/main-content.vue @@ -1,7 +1,7 @@