diff --git a/src/assets/images/shuju/main/card-subtitle-icon.png b/src/assets/images/shuju/main/card-subtitle-icon.png new file mode 100644 index 000000000..7ee9dae3d Binary files /dev/null and b/src/assets/images/shuju/main/card-subtitle-icon.png differ diff --git a/src/assets/images/shuju/main/card-title-bg.png b/src/assets/images/shuju/main/card-title-bg-480.png similarity index 100% rename from src/assets/images/shuju/main/card-title-bg.png rename to src/assets/images/shuju/main/card-title-bg-480.png diff --git a/src/assets/images/shuju/main/card-title-bg-800.png b/src/assets/images/shuju/main/card-title-bg-800.png new file mode 100644 index 000000000..504cabc05 Binary files /dev/null and b/src/assets/images/shuju/main/card-title-bg-800.png differ diff --git a/src/assets/images/shuju/main/weather/dayu.png b/src/assets/images/shuju/main/weather/dayu.png new file mode 100644 index 000000000..a336bc15a Binary files /dev/null and b/src/assets/images/shuju/main/weather/dayu.png differ diff --git a/src/assets/images/shuju/main/weather/duoyun.png b/src/assets/images/shuju/main/weather/duoyun.png new file mode 100644 index 000000000..79cd13c2c Binary files /dev/null and b/src/assets/images/shuju/main/weather/duoyun.png differ diff --git a/src/assets/images/shuju/main/weather/feng.png b/src/assets/images/shuju/main/weather/feng.png new file mode 100644 index 000000000..0b5466db2 Binary files /dev/null and b/src/assets/images/shuju/main/weather/feng.png differ diff --git a/src/assets/images/shuju/main/weather/leibao.png b/src/assets/images/shuju/main/weather/leibao.png new file mode 100644 index 000000000..101420a83 Binary files /dev/null and b/src/assets/images/shuju/main/weather/leibao.png differ diff --git a/src/assets/images/shuju/main/weather/leiyu.png b/src/assets/images/shuju/main/weather/leiyu.png new file mode 100644 index 000000000..cb7ad5aa9 Binary files /dev/null and b/src/assets/images/shuju/main/weather/leiyu.png differ diff --git a/src/assets/images/shuju/main/weather/qing.png b/src/assets/images/shuju/main/weather/qing.png new file mode 100644 index 000000000..2a1ec987e Binary files /dev/null and b/src/assets/images/shuju/main/weather/qing.png differ diff --git a/src/assets/images/shuju/main/weather/wu.png b/src/assets/images/shuju/main/weather/wu.png new file mode 100644 index 000000000..e374951c1 Binary files /dev/null and b/src/assets/images/shuju/main/weather/wu.png differ diff --git a/src/assets/images/shuju/main/weather/xiaoyu.png b/src/assets/images/shuju/main/weather/xiaoyu.png new file mode 100644 index 000000000..4b376ca11 Binary files /dev/null and b/src/assets/images/shuju/main/weather/xiaoyu.png differ diff --git a/src/assets/images/shuju/main/weather/xue.png b/src/assets/images/shuju/main/weather/xue.png new file mode 100644 index 000000000..62b9f95e4 Binary files /dev/null and b/src/assets/images/shuju/main/weather/xue.png differ diff --git a/src/assets/images/shuju/main/weather/yin.png b/src/assets/images/shuju/main/weather/yin.png new file mode 100644 index 000000000..325be5aed Binary files /dev/null and b/src/assets/images/shuju/main/weather/yin.png differ diff --git a/src/assets/images/shuju/main/weather/yuxue.png b/src/assets/images/shuju/main/weather/yuxue.png new file mode 100644 index 000000000..75e1f17c2 Binary files /dev/null and b/src/assets/images/shuju/main/weather/yuxue.png differ diff --git a/src/assets/images/shuju/main/weather/zhongyu.png b/src/assets/images/shuju/main/weather/zhongyu.png new file mode 100644 index 000000000..ccb0bdef3 Binary files /dev/null and b/src/assets/images/shuju/main/weather/zhongyu.png differ diff --git a/src/assets/images/shuju/renfang/index/down.png b/src/assets/images/shuju/renfang/index/down.png new file mode 100644 index 000000000..2c2cd2494 Binary files /dev/null and b/src/assets/images/shuju/renfang/index/down.png differ diff --git a/src/assets/images/shuju/renfang/index/i-yujing.png b/src/assets/images/shuju/renfang/index/i-yujing.png new file mode 100644 index 000000000..17057c078 Binary files /dev/null and b/src/assets/images/shuju/renfang/index/i-yujing.png differ diff --git a/src/assets/images/shuju/renfang/index/up.png b/src/assets/images/shuju/renfang/index/up.png new file mode 100644 index 000000000..dd26a7215 Binary files /dev/null and b/src/assets/images/shuju/renfang/index/up.png differ diff --git a/src/assets/images/shuju/renfang/index/znyc.png b/src/assets/images/shuju/renfang/index/znyc.png new file mode 100644 index 000000000..998c232d6 Binary files /dev/null and b/src/assets/images/shuju/renfang/index/znyc.png differ diff --git a/src/assets/scss/dataBoard/c/common.scss b/src/assets/scss/dataBoard/c/common.scss new file mode 100644 index 000000000..7283636ba --- /dev/null +++ b/src/assets/scss/dataBoard/c/common.scss @@ -0,0 +1,44 @@ +@mixin scrollBar { + &::-webkit-scrollbar { + width: 4px; + height: 4px; + &:hover { + width: 8px; + height: 8px; + } + } + &::-webkit-scrollbar-thumb { + /*滚动条里面小方块*/ + border-radius: 4px; + // box-shadow: inset 0 0 5px rgba(#00023f, 0.2); + box-shadow: none; + background: #07266b; + } + &::-webkit-scrollbar-track { + /*滚动条里面轨道*/ + // box-shadow: inset 0 0 5px rgba(#00023f, 0.2); + box-shadow: none; + border-radius: 4px; + background: transparent; + } +} + +@mixin scrollBar2 { + &::-webkit-scrollbar { + /*滚动条整体样式*/ + width: 8px; /*高宽分别对应横竖滚动条的尺寸*/ + height: 1px; + } + &::-webkit-scrollbar-thumb { + /*滚动条里面小方块*/ + border-radius: 8px; + box-shadow: inset 0 0 5px rgba(#000, 0.1); + background: linear-gradient(270deg, #999, #ddd); + } + &::-webkit-scrollbar-track { + /*滚动条里面轨道*/ + box-shadow: inset 0 0 5px rgba(#000, 0.1); + border-radius: 8px; + background: darken(#999, 20); + } +} diff --git a/src/assets/scss/dataBoard/renfang/index.scss b/src/assets/scss/dataBoard/renfang/index.scss new file mode 100644 index 000000000..795a1683e --- /dev/null +++ b/src/assets/scss/dataBoard/renfang/index.scss @@ -0,0 +1,158 @@ +@import "../../c/config"; +@import "../../c/function"; +@import "../c/common"; + +.g-row { + padding: 10px 6px; + display: flex; + justify-content: space-between; + + .g-left { + width: 480px; + } + .g-center { + width: 800px; + } + .g-right { + width: 480px; + } +} + +.m-map { + width: 100%; + height: 650px; + margin-bottom: 10px; +} + +.m-box { + .box-title { + position: relative; + width: 100%; + height: 56px; + &-bg { + position: absolute; + top: 0; + left: 0; + z-index: 0; + right: 0; + bottom: 0; + height: 56px; + height: 100%; + } + &-txt { + position: relative; + display: block; + padding-top: 8px; + padding-left: 24px; + font-size: 20px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #ffffff; + line-height: 48px; + } + &-btn { + position: absolute; + z-index: 1; + top: 6px; + right: 24px; + display: flex; + align-items: center; + line-height: 48px; + font-size: 16px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #6fdeff; + img { + width: 16px; + height: 16px; + margin: 0 8px; + } + } + } +} + +.m-subbox { + @include scrollBar; + height: 380px; + overflow-y: auto; +} + +.m-cate { + .list { + @include scrollBar; + padding-right: 5px; + height: 245px; + overflow-y: auto; + + .item { + margin-top: 30px; + display: flex; + align-items: center; + font-size: 14px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: rgba(255, 255, 255, 0.85); + line-height: 24px; + cursor: pointer; + + &:hover { + color: #fff; + } + + .item-name { + margin-left: 5px; + width: 80px; + flex-shrink: 0; + } + + .item-div { + width: 1px; + height: 12px; + background: #d8d8d8; + border-radius: 1px; + } + + .item-count { + margin-left: 20px; + width: 80px; + flex-shrink: 0; + b { + font-size: 20px; + font-weight: bold; + } + } + + .item-per { + display: flex; + width: 160px; + align-items: center; + + b { + font-size: 20px; + font-weight: bold; + } + + img { + margin-left: 18px; + margin-right: 6px; + width: 16px; + height: 16px; + } + } + + .item-progress { + margin-right: 15px; + width: 416px; + height: 16px; + background: rgba(111, 222, 255, 0.15); + border-radius: 1px; + overflow: hidden; + b { + display: block; + height: 16px; + background: linear-gradient(270deg, #6fdeff 0%, rgba(111, 222, 255, 0.1) 100%); + } + } + } + } +} diff --git a/src/assets/scss/dataBoardMain.scss b/src/assets/scss/dataBoardMain.scss new file mode 100644 index 000000000..16752561e --- /dev/null +++ b/src/assets/scss/dataBoardMain.scss @@ -0,0 +1,157 @@ +@import "./c/config"; +@import "./c/function"; + +.g-fx { + background-color: #00023a; +} + +.g-pg { + position: relative; +} + +.i-corner { + position: absolute; + z-index: 0; + width: 121px; + &.z-left-top { + top: 15px; + left: 15px; + } + &.z-left-bottom { + bottom: 15px; + left: 15px; + } + &.z-right-top { + top: 15px; + right: 15px; + } + &.z-right-bottom { + bottom: 15px; + right: 15px; + } +} + +.m-topnav { + position: relative; + z-index: 1; + width: 100%; + height: 101px; + background-image: url(../images/shuju/main/top-bg.png); + background-repeat: no-repeat; + background-position: top center; + background-size: 100%; + .title { + position: absolute; + left: 0; + right: 0; + top: 0; + margin: 0 auto; + line-height: 70px; + text-align: center; + font-size: 32px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #ffffff; + } + + .nav-list { + position: absolute; + top: 40px; + left: 40px; + display: flex; + width: 500px; + + &.z-right { + left: auto; + right: 40px; + .nav-item { + background-image: url(../images/shuju/main/nav-right.png); + &.z-on { + &::before { + background-image: url(../images/shuju/main/nav-right-on.png); + } + } + } + } + + .nav-item { + position: relative; + width: 120px; + height: 40px; + line-height: 40px; + font-size: 16px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + background-image: url(../images/shuju/main/nav-left.png); + background-size: 100%; + text-align: center; + cursor: pointer; + color: rgba(#fff, 0.85); + + span { + position: relative; + z-index: 1; + } + + &:hover { + color: #fff; + } + + &.z-on { + background-image: none; + &::before { + position: absolute; + z-index: -1; + content: ""; + display: block; + top: -2px; + left: -5px; + width: 132px; + height: 47px; + background-image: url(../images/shuju/main/nav-left-on.png); + background-size: 100%; + } + } + } + } + + .msg { + position: absolute; + display: flex; + align-items: center; + top: 40px; + right: 40px; + font-size: 16px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #ffffff; + line-height: 22px; + .weather { + display: flex; + align-items: center; + img { + position: relative; + width: 20px; + } + div { + margin-left: 3px; + } + } + .date { + margin-left: 24px; + display: flex; + align-items: center; + .date-div { + margin: 0 10px; + height: 22px; + width: 1px; + background-color: #fff; + opacity: 0.8; + } + } + } +} + +.g-cnt { + padding: 15px; +} diff --git a/src/assets/scss/main-shuju.scss b/src/assets/scss/main-shuju.scss index 5c97ebc8f..a87d382e7 100644 --- a/src/assets/scss/main-shuju.scss +++ b/src/assets/scss/main-shuju.scss @@ -1,149 +1,684 @@ +@import "~@/element-ui/theme-variables.scss"; +@import "./shuju-variables.scss"; @import "./c/config"; @import "./c/function"; +@import "./modules/visual/c/common.scss"; -.g-fx { - background-color: #00023a; +.g-main { + padding: 10px 20px 10px; } -.i-corner { - position: absolute; - z-index: 0; - width: 121px; - &.z-left-top { - top: 15px; - left: 15px; +.m-iframe { + position: relative; + box-sizing: content-box; + width: calc(100% + 20px); + margin: -10px -20px -10px; + z-index: 100; +} + +/* Reset element-ui +------------------------------ */ +.g-bd { + background-image: url(../img/shuju/bg.jpg); + background-size: cover; + background-position: center 0; + height: 100%; + @include scrollBar; + + .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%; } - &.z-left-bottom { - bottom: 15px; - left: 15px; + .el-table th { + color: $--color-text-primary; + background-color: $--background-color-base; } - &.z-right-top { - top: 15px; - right: 15px; + .el-pagination { + margin-top: 15px; + text-align: right; } - &.z-right-bottom { - bottom: 15px; - right: 15px; + .el-table__expand-icon { + display: inline-block; + width: 14px; + vertical-align: middle; + margin-right: 5px; } } -.m-topnav { +/* 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 +------------------------------ */ +.g-bd { position: relative; - z-index: 1; - width: 100%; - height: 101px; - background-image: url(../images/shuju/main/top-bg.png); - background-repeat: no-repeat; - background-position: top center; - background-size: 100%; - .title { - position: absolute; - left: 0; - right: 0; - top: 0; - margin: 0 auto; - line-height: 70px; - text-align: center; - font-size: 32px; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - color: #ffffff; + padding-top: $navbar--height; + + /* Sidebar fold +------------------------------ */ + &.z-sidebar--fold { + .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; + } + } + .g-cnt { + &__wrapper { + margin-left: $sidebar--width-fold; + } + &--tabs > .el-tabs > .el-tabs__header { + left: $sidebar--width-fold; + } + } + } + + &.z-sidebar--noside { + .aui-sidebar { + display: none !important; + } + .g-cnt { + &__wrapper { + margin-left: 0 !important; + } + &--tabs > .el-tabs > .el-tabs__header { + left: 0 !important; + } + } } - .nav-list { - position: absolute; - top: 40px; - left: 40px; + &.z-iframe { + padding-top: 0; + .aui-content--tabs { + padding-top: 0; + } + } +} + +/* Navbar +------------------------------ */ +.m-navbar { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; + display: flex; + align-items: stretch; + height: $navbar--height; + // background-color: $--color-primary; + // box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05); + background: linear-gradient(180deg, #00023f, #176dec); + box-shadow: 0px 3px 16px 0px rgba(187, 187, 227, 0.35); + font-size: 19px; + .el-menu-item { + font-size: 19px; + } + + .navbar--colorful { + .navbar__body { + background-color: transparent; + } + .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; + } + } + .navbar__search { + &-txt { + .el-input__inner { + color: #fff; + border-color: #fff; + &::-webkit-input-placeholder { + color: #fff; + } + } + } + } + } + .navbar__header { + position: relative; + width: $sidebar--width; + height: $navbar--height; + transition: width 0.3s; + } + .navbar__brand { + position: relative; display: flex; - width: 500px; + justify-content: center; + align-items: center; + padding: 10px 20px; + margin: 0; + width: 100%; + height: 100%; + font-size: 28px; + font-weight: bold; + text-transform: uppercase; + white-space: nowrap; + // overflow: hidden; + transition: width 0.3s; + font-family: FZZCHJW; + color: #ffffff; + background: linear-gradient(0deg, #03c7ff 24.609375%, #ffffff 81.0791015625%); + -webkit-background-clip: text; + -webkit-text-fill-color: rgba(#fff, 0.7); + + &::before { + position: absolute; + content: ""; + z-index: 100000; + display: block; + bottom: -10px; + left: -920px; + right: -1000px; + margin: 0 auto; + width: 400px; + height: 20px; + // background-color: #fff; + background-image: url(../img/shuju/flash.png); + background-size: cover; + background-position: center center; + } + + &-lg, + &-mini { + max-width: 100%; + color: #fff; + cursor: pointer; + &:focus, + &:hover { + color: #fff; + text-decoration: none; + } + } + &-mini { + display: none; + } + } + .navbar__body { + position: relative; + display: flex; + flex: 1; + // background-color: #fff; + background-color: transparent; + // overflow: hidden; + } + .navbar__menu { + background-color: transparent; + border-bottom: 0 !important; + + a:focus, + a:hover { + text-decoration: none; + } + &.z-div { + .el-menu-item, + .sub-menu { + position: relative; - &.z-right { - left: auto; - right: 40px; - .nav-item { - background-image: url(../images/shuju/main/nav-right.png); + &.is-active, &.z-on { &::before { - background-image: url(../images/shuju/main/nav-right-on.png); + position: absolute; + content: ""; + display: block; + bottom: -6px; + left: 0; + right: 0; + margin: 0 auto; + width: 50px; + height: 4px; + border: 0; + border-radius: 0 0 2px 2px; + background: #1effff; } } + + &: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); + } } } - .nav-item { + .sub-menu { position: relative; - width: 120px; - height: 40px; - line-height: 40px; - font-size: 16px; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - background-image: url(../images/shuju/main/nav-left.png); - background-size: 100%; - text-align: center; + float: left; cursor: pointer; - color: rgba(#fff, 0.85); + &:hover { + .sub-menu-list { + display: block; + } + } - span { - position: relative; - z-index: 1; + .sub-menu-list { + position: absolute; + display: none; + padding: 0 10px; + width: 160px; + left: -100px; + right: -100px; + margin: 0 auto; + background-color: rgba(#176dec, 0.9); + text-align: center; + cursor: pointer; + > div { + border-top: 1px dashed rgba(#fff, 0.4); + color: rgba(#fff, 0.7); + transition: all ease 0.5s; + padding: 10px 0; + line-height: $navbar--height * 0.5; + + &.z-on { + font-weight: bold; + } + &.z-on, + &:hover { + color: #ffd; + } + } } + } - &:hover { + .el-menu-item, + .sub-menu { + height: $navbar--height; + padding: 0 15px; + line-height: $navbar--height; + border-color: transparent !important; + color: #fff; + } + .el-menu-item.is-active, + .sub-menu.z-on { + color: #fff; + font-weight: bold; + } + .el-menu-item, + .sub-menu { + i { color: #fff; } + &:focus, + &:hover { + color: #fff; + background-color: transparent !important; - &.z-on { - background-image: none; - &::before { - position: absolute; - z-index: -1; - content: ""; - display: block; - top: -2px; - left: -5px; - width: 132px; - height: 47px; - background-image: url(../images/shuju/main/nav-left-on.png); - background-size: 100%; + .navbar__icon-menu { + color: #fff; + } + .el-dropdown { + color: #fff; + .el-icon-arrow-down { + transform: rotateZ(180deg); + } + } + } + * { + vertical-align: initial; + } + .navbar__icon-menu { + vertical-align: middle; + font-size: 20px; + } + .el-dropdown { + color: #fff; + font-size: 16px; + .el-icon-arrow-down { + width: auto; + font-size: 16px; + margin: 0 0 0 5px; + transition: transform 0.3s; } } } + .el-badge { + display: inline; + z-index: 2; + &__content { + line-height: 16px; + } + } } - .msg { - position: absolute; - display: flex; - align-items: center; - top: 40px; - right: 40px; - font-size: 16px; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - color: #ffffff; - line-height: 22px; - .weather { - display: flex; - align-items: center; - img { - position: relative; - width: 16px; + .navbar__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; } - div { - margin-left: 3px; + .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; + } + } + } + .navbar__avatar { + .el-dropdown-link { + > img { + width: 42px; + height: auto; + margin-right: 7px; + border-radius: 100%; + vertical-align: middle; + } + } + } +} + +/* Content +------------------------------ */ +.g-cnt { + position: relative; + // padding: $content--padding; + min-height: calc(100vh - #{$navbar--height}); + background-color: transparent; + + &__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; + } + } + } } } - .date { - margin-left: 24px; - display: flex; - align-items: center; - .date-div { - margin: 0 10px; - height: 22px; - width: 1px; - background-color: #fff; - opacity: 0.8; + > .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); } } } diff --git a/src/assets/scss/main-shuju备份.scss b/src/assets/scss/main-shuju备份.scss deleted file mode 100644 index a87d382e7..000000000 --- a/src/assets/scss/main-shuju备份.scss +++ /dev/null @@ -1,684 +0,0 @@ -@import "~@/element-ui/theme-variables.scss"; -@import "./shuju-variables.scss"; -@import "./c/config"; -@import "./c/function"; -@import "./modules/visual/c/common.scss"; - -.g-main { - padding: 10px 20px 10px; -} - -.m-iframe { - position: relative; - box-sizing: content-box; - width: calc(100% + 20px); - margin: -10px -20px -10px; - z-index: 100; -} - -/* Reset element-ui ------------------------------- */ -.g-bd { - background-image: url(../img/shuju/bg.jpg); - background-size: cover; - background-position: center 0; - height: 100%; - @include scrollBar; - - .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 ------------------------------- */ -.g-bd { - position: relative; - padding-top: $navbar--height; - - /* Sidebar fold ------------------------------- */ - &.z-sidebar--fold { - .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; - } - } - .g-cnt { - &__wrapper { - margin-left: $sidebar--width-fold; - } - &--tabs > .el-tabs > .el-tabs__header { - left: $sidebar--width-fold; - } - } - } - - &.z-sidebar--noside { - .aui-sidebar { - display: none !important; - } - .g-cnt { - &__wrapper { - margin-left: 0 !important; - } - &--tabs > .el-tabs > .el-tabs__header { - left: 0 !important; - } - } - } - - &.z-iframe { - padding-top: 0; - .aui-content--tabs { - padding-top: 0; - } - } -} - -/* Navbar ------------------------------- */ -.m-navbar { - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: 1030; - display: flex; - align-items: stretch; - height: $navbar--height; - // background-color: $--color-primary; - // box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05); - background: linear-gradient(180deg, #00023f, #176dec); - box-shadow: 0px 3px 16px 0px rgba(187, 187, 227, 0.35); - font-size: 19px; - .el-menu-item { - font-size: 19px; - } - - .navbar--colorful { - .navbar__body { - background-color: transparent; - } - .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; - } - } - .navbar__search { - &-txt { - .el-input__inner { - color: #fff; - border-color: #fff; - &::-webkit-input-placeholder { - color: #fff; - } - } - } - } - } - .navbar__header { - position: relative; - width: $sidebar--width; - height: $navbar--height; - transition: width 0.3s; - } - .navbar__brand { - position: relative; - display: flex; - justify-content: center; - align-items: center; - padding: 10px 20px; - margin: 0; - width: 100%; - height: 100%; - font-size: 28px; - font-weight: bold; - text-transform: uppercase; - white-space: nowrap; - // overflow: hidden; - transition: width 0.3s; - font-family: FZZCHJW; - color: #ffffff; - background: linear-gradient(0deg, #03c7ff 24.609375%, #ffffff 81.0791015625%); - -webkit-background-clip: text; - -webkit-text-fill-color: rgba(#fff, 0.7); - - &::before { - position: absolute; - content: ""; - z-index: 100000; - display: block; - bottom: -10px; - left: -920px; - right: -1000px; - margin: 0 auto; - width: 400px; - height: 20px; - // background-color: #fff; - background-image: url(../img/shuju/flash.png); - background-size: cover; - background-position: center center; - } - - &-lg, - &-mini { - max-width: 100%; - color: #fff; - cursor: pointer; - &:focus, - &:hover { - color: #fff; - text-decoration: none; - } - } - &-mini { - display: none; - } - } - .navbar__body { - position: relative; - display: flex; - flex: 1; - // background-color: #fff; - background-color: transparent; - // overflow: hidden; - } - .navbar__menu { - background-color: transparent; - border-bottom: 0 !important; - - a:focus, - a:hover { - text-decoration: none; - } - &.z-div { - .el-menu-item, - .sub-menu { - position: relative; - - &.is-active, - &.z-on { - &::before { - position: absolute; - content: ""; - display: block; - bottom: -6px; - left: 0; - right: 0; - margin: 0 auto; - width: 50px; - height: 4px; - border: 0; - border-radius: 0 0 2px 2px; - background: #1effff; - } - } - - &: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); - } - } - } - - .sub-menu { - position: relative; - float: left; - cursor: pointer; - &:hover { - .sub-menu-list { - display: block; - } - } - - .sub-menu-list { - position: absolute; - display: none; - padding: 0 10px; - width: 160px; - left: -100px; - right: -100px; - margin: 0 auto; - background-color: rgba(#176dec, 0.9); - text-align: center; - cursor: pointer; - > div { - border-top: 1px dashed rgba(#fff, 0.4); - color: rgba(#fff, 0.7); - transition: all ease 0.5s; - padding: 10px 0; - line-height: $navbar--height * 0.5; - - &.z-on { - font-weight: bold; - } - &.z-on, - &:hover { - color: #ffd; - } - } - } - } - - .el-menu-item, - .sub-menu { - height: $navbar--height; - padding: 0 15px; - line-height: $navbar--height; - border-color: transparent !important; - color: #fff; - } - .el-menu-item.is-active, - .sub-menu.z-on { - color: #fff; - font-weight: bold; - } - .el-menu-item, - .sub-menu { - i { - color: #fff; - } - &:focus, - &:hover { - color: #fff; - background-color: transparent !important; - - .navbar__icon-menu { - color: #fff; - } - .el-dropdown { - color: #fff; - .el-icon-arrow-down { - transform: rotateZ(180deg); - } - } - } - * { - vertical-align: initial; - } - .navbar__icon-menu { - vertical-align: middle; - font-size: 20px; - } - .el-dropdown { - color: #fff; - font-size: 16px; - .el-icon-arrow-down { - width: auto; - font-size: 16px; - margin: 0 0 0 5px; - transition: transform 0.3s; - } - } - } - .el-badge { - display: inline; - z-index: 2; - &__content { - line-height: 16px; - } - } - } - - .navbar__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; - } - } - } - .navbar__avatar { - .el-dropdown-link { - > img { - width: 42px; - height: auto; - margin-right: 7px; - border-radius: 100%; - vertical-align: middle; - } - } - } -} - -/* Content ------------------------------- */ -.g-cnt { - position: relative; - // padding: $content--padding; - min-height: calc(100vh - #{$navbar--height}); - background-color: transparent; - - &__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); - } - } -} diff --git a/src/router/index.js b/src/router/index.js index 49c748be6..4dbf47817 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -176,6 +176,49 @@ function cookApiDataItem3(item, parent = []) { return item; } +// 新数据模块 +export const dataBoardRoutes = { + path: "/dataBoard", + component: () => import("@/views/dataBoardMain/main"), + name: "dataBoard", + redirect: { + path: "/dataBoard/renfang/index", + }, + meta: { + title: "主入口布局", + }, + children: [ + { + path: "renfang/index", + props: true, + component: () => import("@/views/dataBoard/renfang/index"), + name: "dataBoard-renfang-index", + meta: { + title: "人房总览", + isTab: false, + }, + }, + { + path: "404", + props: true, + component: () => import("@/views/dataBoard/404"), + name: "dataBoard-404", + meta: { + title: "页面未找到或无权访问", + isTab: false, + }, + beforeEnter(to, from, next) { + // 拦截处理特殊业务场景 + // 如果, 重定向路由包含__双下划线, 为临时添加路由 + if (/__.*/.test(to.redirectedFrom)) { + return next(to.redirectedFrom.replace(/__.*/, "")); + } + next(); + }, + }, + ], +}; + // 模块路由(基于主入口布局页面) 可视化数据 export const moduleShujuRoutes = { path: "/main-shuju", @@ -263,7 +306,7 @@ const router = new Router({ scrollBehavior: () => ({ y: 0, }), - routes: pageRoutes.concat(moduleRoutes, moduleShujuRoutes), + routes: pageRoutes.concat(moduleRoutes, moduleShujuRoutes, dataBoardRoutes), }); router.beforeEach((to, from, next) => { diff --git a/src/views/dataBoard/404.vue b/src/views/dataBoard/404.vue new file mode 100644 index 000000000..047aec709 --- /dev/null +++ b/src/views/dataBoard/404.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/src/views/dataBoard/cpts/map/index.vue b/src/views/dataBoard/cpts/map/index.vue new file mode 100644 index 000000000..23ce62ea2 --- /dev/null +++ b/src/views/dataBoard/cpts/map/index.vue @@ -0,0 +1,754 @@ + + + + + diff --git a/src/views/dataBoard/renfang/index.vue b/src/views/dataBoard/renfang/index.vue new file mode 100644 index 000000000..3d0e8fa38 --- /dev/null +++ b/src/views/dataBoard/renfang/index.vue @@ -0,0 +1,196 @@ + + + + + diff --git a/src/views/dataBoardMain/main-content.vue b/src/views/dataBoardMain/main-content.vue new file mode 100644 index 000000000..3a71d3a30 --- /dev/null +++ b/src/views/dataBoardMain/main-content.vue @@ -0,0 +1,129 @@ +