-
-
-
-
-
-
-
-
+
+
+
+
\ No newline at end of file
diff --git a/src/router/modules/screen.js b/src/router/modules/screen.js
new file mode 100644
index 0000000..d3ffed0
--- /dev/null
+++ b/src/router/modules/screen.js
@@ -0,0 +1,6 @@
+export default {
+ path: `/screen`,
+ name: 'screen',
+ component: () => import('@/pages/screen'),
+ meta: { title: '数据看板' }
+}
\ No newline at end of file
diff --git a/src/setting.js b/src/setting.js
index ba65697..d937f37 100644
--- a/src/setting.js
+++ b/src/setting.js
@@ -23,7 +23,7 @@ if (isPro) {
jumpPath = "http://192.168.31.125:8087/";
bankPath = `http://192.168.31.125:8093`
host = "http://121.37.12.51/"; // 中台测试服
- host = "http://192.168.31.151:9000/"; // 榕
+ // host = "http://192.168.31.151:9000/"; // 榕
// host = 'http://192.168.31.137:9000/'; // 赓
}
@@ -84,7 +84,7 @@ const Setting = {
// 相同路由，不同参数间进行切换，是否强力更新
sameRouteForceUpdate: false,
// 是否使用动态路由(即角色权限,开启了的话就会取后端返回的权限树来显示头部导肮和页面按钮)
- dynamicRoute: true,
+ dynamicRoute: false,
// 文件上传
upload: {
apiURL: uploadURL,
diff --git a/src/styles/common.scss b/src/styles/common.scss
index bcaf4d9..9845bea 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -255,20 +255,20 @@
}
}
- &:not(.normal) {
- .el-button--primary {
- color: #606266;
- background: #fff;
- border-color: #DCDFE6;
-
- &:hover {
- color: $--color-primary;
- border-color: #efbdbb;
- background-color: #fae9e8;
- }
- }
-
- }
+ // &:not(.normal) {
+ // .el-button--primary {
+ // color: #606266;
+ // background: #fff;
+ // border-color: #DCDFE6;
+
+ // &:hover {
+ // color: $--color-primary;
+ // border-color: #efbdbb;
+ // background-color: #fae9e8;
+ // }
+ // }
+
+ // }
}
.el-dialog__wrapper {
diff --git a/src/styles/page/screen.scss b/src/styles/page/screen.scss
new file mode 100644
index 0000000..1a85f19
--- /dev/null
+++ b/src/styles/page/screen.scss
@@ -0,0 +1,429 @@
+@import "../var.scss";
+// ::-webkit-scrollbar-thumb {
+// display: none;
+// }
+body {
+ min-width: 1480px;
+}
+// ::-webkit-scrollbar {
+// width: 8px;
+// height: 8px;
+// }
+// ::-webkit-scrollbar-thumb {
+// width: 5px;
+// border-radius: 6px;
+// background: rgba(85, 219, 255, .8);
+// }
+.video {
+ position: absolute;
+ top: 0;
+ left: -500px;
+ width: 100vw;
+ // height: 720px;
+}
+.wrap {
+ width: 100%;
+ height: 100vh;
+ color:#333;
+ background: url('../../assets/img/screen/screen1.jpg') no-repeat;
+ background-size: 100% 100%;
+ overflow: auto;
+ .full {
+ z-index: 10;
+ position: absolute;
+ top: 20px;
+ right: 30px;
+ cursor: pointer;
+ transition: .5s;
+ &:hover {
+ transform: scale(1.2);
+ }
+ }
+ .l_t_line{
+ width: 5px;
+ height: 24px;
+ left: -3px;
+ top: -3px;
+ }
+ .t_l_line{
+ height: 5px;
+ width: 26px;
+ left: -3px;
+ top: -3px;
+ }
+ .t_line_box {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ }
+ .t_line_box i{
+ background-color: #4788fb;
+ box-shadow: 0px 0px 10px #4788fb;
+ position: absolute;
+ }
+ .t_r_line{
+ height: 5px;
+ width: 26px;
+ right: -3px;
+ top: -3px;
+ }
+ .r_t_line{
+ width: 5px;
+ height: 24px;
+ right: -3px;
+ top: -3px;
+ }
+ .l_b_line{
+ width: 5px;
+ height: 24px;
+ left: -3px;
+ bottom: -3px;
+ }
+ .b_l_line{
+ height: 5px;
+ width: 26px;
+ left: -3px;
+ bottom: -3px;
+ }
+ .r_b_line{
+ width: 5px;
+ height: 24px;
+ right: -3px;
+ bottom: -3px;
+ }
+ .b_r_line{
+ height: 5px;
+ width: 26px;
+ right: -3px;
+ bottom: -3px;
+ }
+ .earth {
+ z-index: 0;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ img {
+ position: absolute;
+ top: 52%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ opacity: .4;
+ }
+ .lbx {
+ z-index: 2;
+ max-width: 95%;
+ max-height: 95%;
+ animation: rotate 15s linear infinite;
+ }
+ .jt {
+ z-index: 3;
+ max-width: 90%;
+ max-height: 90%;
+ opacity: .3;
+ animation: rotate-reverse 15s linear infinite;
+ }
+ .map {
+ z-index: 1;
+ max-width: 85%;
+ max-height: 85%;
+ }
+ }
+ @keyframes rotate {
+ 0% {
+ transform: translate(-50%, -50%) rotate(0);
+ }
+ 50% {
+ transform: translate(-50%, -50%) rotate(180deg);
+ }
+ 100% {
+ transform: translate(-50%, -50%) rotate(360deg);
+ }
+ }
+ @keyframes rotate-reverse {
+ 0% {
+ transform: translate(-50%, -50%) rotate(0360deg);
+ }
+ 50% {
+ transform: translate(-50%, -50%) rotate(180deg);
+ }
+ 100% {
+ transform: translate(-50%, -50%) rotate(0);
+ }
+ }
+}
+.time-switch {
+ z-index: 2;
+ position: absolute;
+ display: flex;
+ top: 24px;
+ right: 10px;
+ li {
+ padding: 0 14px;
+ line-height: 24px;
+ color: #fff;
+ background-color: #0a111c;
+ border-radius: 8px;
+ cursor: pointer;
+ &.active {
+ background-color: #00d8ff;
+ }
+ }
+}
+.active-number {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ padding: 10px 40px;
+ background: url(../../assets/img/screen/title-bg.png) 0 0/cover no-repeat;
+ .val {
+ font-size: 50px;
+ font-family: 'yjsz';
+ color: #00f3ff;
+ text-shadow: 0 0 25px #00d8ff;
+ text-align: center;
+ }
+ .name {
+ font-size: 16px;
+ color: #fff;
+ text-shadow: 0 0 25px #00d8ff;
+ }
+}
+.stat-mask {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, .65);
+}
+.stat-wrap {
+ position: relative;
+ height: 100%;
+ background: url(../../assets/img/screen/stat.png) 0 0/100% auto no-repeat;
+ .num {
+ position: absolute;
+ width: 100px;
+ text-align: center;
+ font-size: 32px;
+ font-weight: bold;
+ color: #00d8ff;
+ white-space: nowrap;
+ }
+ .num1 {
+ top: 140px;
+ left: 12px;
+ }
+ .num2 {
+ top: 49px;
+ right: 187px;
+ }
+ .num3 {
+ top: 260px;
+ left: 200px;
+ }
+ .num4 {
+ top: 296px;
+ right: 368px;
+ }
+ .num5 {
+ bottom: 319px;
+ right: 36px;
+ }
+}
+.main_table {
+ width: 100%;
+ margin-top: 25px;
+ table {
+ width: 100%;
+ }
+ tr{
+ height: 42px;
+ }
+ th{
+ font-size: 12px;
+ font-weight: 600;
+ color:#61d2f7;
+ text-align: center;
+ }
+ td{
+ color:#fff;
+ font-size: 10px;
+ text-align: center;
+ }
+ tbody tr:nth-child(odd) {
+ background-color: #072951;
+ box-shadow:-10px 0px 15px #2C58A6 inset, 10px 0px 15px #2C58A6 inset;
+ }
+ .percent {
+ width: 64px;
+ margin: 0 auto;
+ line-height: 24px;
+ color: #fff;
+ text-align: center;
+ background-color: #0faf7d;
+ border-radius: 2px;
+ &.fall {
+ background-color: #db4154;
+ }
+ }
+}
+.header{
+ z-index: 2;
+ position: relative;
+ width: 100%;
+ height: 80px;
+ padding:0 20px;
+}
+.bg_header{
+ width: 100%;
+ height: 80px;
+ background: url(../../assets/img/screen/screen2.png) no-repeat;
+ background-size: 100% 100%;
+}
+.t_title{
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ font-size: 2.5em;
+ line-height: 80px;
+ color: #fff;
+}
+$height: 250px;
+.content{
+ display: flex;
+ padding: 20px;
+ .left, .right {
+ min-width: 300px;
+ width: 24%;
+ }
+ .middle {
+ width: 913px;
+ min-width: 913px;
+ margin: 0 30px;
+ overflow: hidden;
+ }
+ .item {
+ position: relative;
+ height: $height;
+ margin-bottom: 30px;
+ border: 1px solid #2C58A6;
+ box-shadow: 0 0 10px #2C58A6;
+ }
+}
+.chart {
+ height: $height;
+}
+.popular-wrap {
+ height: 170px;
+ margin-top: 45px;
+ overflow: auto;
+ &::-webkit-scrollbar-thumb {
+ display: none;
+ }
+}
+.list {
+ padding: 0 15px;
+ margin-top: 25px;
+ overflow: auto;
+ li {
+ position: relative;
+ padding: 10px 10px;
+ &:nth-child(2) {
+ .index {
+ background-color: #67a0ff;
+ }
+ }
+ &:nth-child(3) {
+ .index {
+ background-color: #2b71ff;
+ }
+ }
+ &:nth-child(4) {
+ .index {
+ background-color: #8c2bff;
+ }
+ }
+ &:nth-child(5) {
+ .index {
+ background-color: #ff612b;
+ }
+ }
+ &:nth-child(6) {
+ .index {
+ background-color: #4152f1;
+ }
+ }
+ &:nth-child(7) {
+ .index {
+ background-color: #d14cc9;
+ }
+ }
+ &:nth-child(8) {
+ .index {
+ background-color: #f52c8d;
+ }
+ }
+ &:nth-child(9) {
+ .index {
+ background-color: #f1561b;
+ }
+ }
+ &:nth-child(10) {
+ .index {
+ background-color: #f50000;
+ }
+ }
+ }
+ &.popular {
+ margin-top: 0;
+ li:nth-child(odd) {
+ background-color: #072951;
+ box-shadow:-10px 0px 15px #2C58A6 inset, 10px 0px 15px #2C58A6 inset;
+ }
+ }
+ .index {
+ position: absolute;
+ width: 20px;
+ line-height: 20px;
+ color: #fff;
+ font-size: 12px;
+ text-align: center;
+ border-radius: 50%;
+ background-color: #2defe2;
+ }
+ .text {
+ width: 60%;
+ margin: 0 auto;
+ color: #61d2f7;
+ text-align: center;
+ @include ellipsis;
+ }
+ .icon {
+ position: absolute;
+ top: 10px;
+ right: 10%;
+ }
+}
+.main_title{
+ display: flex;
+ align-items: center;
+ height: 35px;
+ line-height: 33px;
+ background-color: #2C58A6;
+ border-radius: 18px;
+ position: absolute;
+ top: -17px;
+ left: 50%;
+ color:#fff;
+ font-size: 18px;
+ font-weight: 600;
+ white-space: nowrap;
+ padding: 0 20px;
+ z-index: 1000;
+ text-align: center;
+ transform: translateX(-50%);
+ img {
+ margin-right: 10px;
+ }
+}
上传资源