From f640ed9e0b1ae5ba002ef5ffe99fdb00b77d8a86 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Sat, 17 Jul 2021 10:08:35 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/zhba_regulatory
---
src/views/home/index.scss | 655 ++++++++++++++++++++++++++++++++---------------------------
1 files changed, 352 insertions(+), 303 deletions(-)
diff --git a/src/views/home/index.scss b/src/views/home/index.scss
index 7728c52..64302d2 100644
--- a/src/views/home/index.scss
+++ b/src/views/home/index.scss
@@ -4,334 +4,383 @@
// width: 1920px;
// height: 1080px;
background: url("../../../public/img/bajgxt/backimg.png") no-repeat;
- background-size: cover;
-}
-.head-title {
- background: url("../../../public/img/bajgxt/title2.png") no-repeat;
- background-size: cover;
- width: 100%;
- text-align: center;
- position: relative;
- span {
- font-family: "Arial Normal", "Arial", sans-serif;
- font-size: 36px;
- color: #ffffff;
- text-align: center;
- line-height: 77px;
- }
- img {
- position: absolute;
- margin-top: 22px;
- margin-left: 29%;
- }
-}
-.side {
- width: 440px;
- height: 100%;
-}
-.content {
- margin: 5px 20px 20px 20px;
- // height: calc(100% - 77px);
- // width: 100%;
- height: calc(100% - 102px);
- width: calc(100% - 40px);
- display: flex;
- .left,
- .right {
- @extend .side;
- }
- .middle {
- width: calc(100% - 930px);
- height: 100%;
- margin: 0px 25px;
- position: relative;
- }
-}
-.leftimg {
- background: url("../../../public/img/bajgxt/left1.png") no-repeat;
- background-size: contain;
- width: 100%;
- height: 260px;
-}
-.echartClass {
- height: 100%;
- width: 100%;
- height: calc(100% - 90px);
-}
-.left {
- .left1 {
- background: url("../../../public/img/bajgxt/left1.png") no-repeat;
- background-size: contain;
- width: 440px;
- height: 533px;
- #left1Echart {
- @extend .echartClass;
- }
- }
- .left2 {
- background: url("../../../public/img/bajgxt/left1.png") no-repeat;
- background-size: 440px 392px;
- height: 392px;
- width: 440px;
- margin-top: 25px;
- #left2Echart {
- @extend .echartClass;
- }
- }
-}
-.right {
- .right1 {
- background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
- background-size: 440px 251px;
- width: 440px;
- height: 251px;
- position: relative;
- #right1Echart {
- @extend .echartClass;
- }
- }
- .right2 {
- background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
- background-size: 440px 251px;
- width: 440px;
- height: 251px;
- margin-top: 30px;
- position: relative;
- #right2Echart {
- @extend .echartClass;
- }
- }
- .right3 {
- background: url("../../../public/img/bajgxt/left1.png") no-repeat;
- background-size: 440px 392px;
- height: 392px;
- width: 440px;
- margin-top: 25px;
- #right3Echart {
- @extend .echartClass;
- }
- }
-}
-.title-pane {
- display: inline-flex;
- height: 55px;
- img {
- width: 30px;
- height: 30px;
- margin: 15px 10px 0px 10px;
- }
- span {
- line-height: 68px;
- color: #fff;
- font-size: 20px;
- }
-}
-.title-pane1 {
- display: inline-flex;
- height: 44px;
- img {
- width: 30px;
- height: 30px;
- margin: 10px 10px 0px 10px;
- }
- span {
- line-height: 55px;
- color: #fff;
- font-size: 20px;
- }
-}
+ background-size: 100% 100%;
-.middle {
- .mapimg {
- background: url("../../../public/img/bajgxt/mapimg.png") no-repeat;
+ .head-title {
+ background: url("../../../public/img/bajgxt/title2.png") no-repeat;
background-size: 100% 100%;
- height: 543px;
width: 100%;
- #map {
- width: calc(100% - 40px);
- height: calc(100% - 40px);
- margin: 0px 20px;
- top: 20px;
+ height: 77px;
+ text-align: center;
+ position: relative;
+ span {
+ font-family: "Arial Normal", "Arial", sans-serif;
+ font-size: 36px;
+ color: #ffffff;
+ text-align: center;
+ line-height: 77px;
+ }
+ span:nth-child(2) {
+ position: absolute;
+ margin-top: 22px;
+ margin-left: 26%;
+ font-size: 22px;
+ cursor: pointer;
+ &:hover {
+ color: #90cef0;
+ }
+ }
+ img {
+ position: absolute;
+ margin-top: 22px;
+ margin-left: 29%;
+ }
+ }
+ .side {
+ width: 27%;
+ height: 100%;
+ }
+ .content {
+ margin: 5px 20px 20px 20px;
+ // height: calc(100% - 77px);
+ // width: 100%;
+ height: calc(100% - 102px);
+ width: calc(100% - 40px);
+ display: flex;
+ .left,
+ .right {
+ @extend .side;
+ }
+ .middle {
+ width: calc(46% - 50px);
+ height: 100%;
+ margin: 0px 25px;
position: relative;
}
}
-
- .table {
- margin-top: 25px;
+ .leftimg {
+ background: url("../../../public/img/bajgxt/left1.png") no-repeat;
+ background-size: contain;
width: 100%;
- height: 392px;
- background: url("../../../public/img/bajgxt/table.png") no-repeat;
- background-size: 100% 100%;
- position: relative;
- .table-title {
- background: url("../../../public/img/bajgxt/tabletitle.png") no-repeat;
+ height: 260px;
+ }
+ .echartClass {
+ height: 100%;
+ width: 100%;
+ height: calc(100% - 70px);
+ }
+ .left {
+ .left1 {
+ background: url("../../../public/img/bajgxt/left1.png") no-repeat;
+ height: 60%;
+ width: 100%;
background-size: 100% 100%;
- position: absolute;
- width: 267px;
- margin-top: -13px;
- height: 50px;
- margin-left: 39%;
+ #left1Echart {
+ @extend .echartClass;
+ }
+ }
+ .left2 {
+ background: url("../../../public/img/bajgxt/left1.png") no-repeat;
+ height: calc(40% - 25px);
+ width: 100%;
+ background-size: 100% 100%;
+ margin-top: 25px;
+ #left2Echart {
+ @extend .echartClass;
+ }
+ }
+ }
+ .right {
+ .right1 {
+ background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
+ background-size: 100% 100%;
+ width: 100%;
+ height: 28%;
+ position: relative;
+ #right1Echart {
+ @extend .echartClass;
+ }
+ }
+ .right2 {
+ background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
+ background-size: 100% 100%;
+ width: 100%;
+ height: 28%;
+ margin-top: 30px;
+ position: relative;
+ #right2Echart {
+ @extend .echartClass;
+ }
+ }
+ .right3 {
+ background: url("../../../public/img/bajgxt/left1.png") no-repeat;
+ height: calc(40% - 25px);
+ width: 100%;
+ background-size: 100% 100%;
+ margin-top: 25px;
+ #right3Echart {
+ @extend .echartClass;
+ }
+ }
+ }
+ .title-pane {
+ display: inline-flex;
+ height: 55px;
+ img {
+ width: 30px;
+ height: 30px;
+ margin: 15px 10px 0px 10px;
+ }
+ span {
+ line-height: 68px;
color: #fff;
font-size: 20px;
- text-align: center;
- line-height: 54px;
}
- .lefttop {
- background: url("../../../public/img/bajgxt/lefttop.png") no-repeat;
+ }
+ .title-pane1 {
+ display: inline-flex;
+ height: 44px;
+ img {
+ width: 30px;
+ height: 30px;
+ margin: 10px 10px 0px 10px;
+ }
+ span {
+ line-height: 55px;
+ color: #fff;
+ font-size: 20px;
+ }
+ }
+
+ .middle {
+ .mapimg {
+ background: url("../../../public/img/bajgxt/mapimg.png") no-repeat;
background-size: 100% 100%;
- width: 44px;
- height: 56px;
- position: absolute;
- margin-left: -6px;
- margin-top: -7px;
+ height: 60%;
+ width: 100%;
+ #map {
+ width: calc(100% - 40px);
+ height: calc(100% - 40px);
+ margin: 0px 20px;
+ top: 20px;
+ position: relative;
+ }
}
- .leftbottom {
- background: url("../../../public/img/bajgxt/leftbottom.png") no-repeat;
+
+ .table {
+ margin-top: 25px;
+ height: calc(40% - 25px);
+ width: 100%;
+ background: url("../../../public/img/bajgxt/table.png") no-repeat;
background-size: 100% 100%;
- width: 44px;
- height: 56px;
- position: absolute;
- margin-left: -6px;
- margin-top: 340px;
- }
- .righttop {
- background: url("../../../public/img/bajgxt/righttop.png") no-repeat;
- background-size: 100% 100%;
- width: 44px;
- height: 56px;
- position: absolute;
- margin-left: calc(100% - 39px);
- margin-top: -7px;
- }
- .rightbottom {
- background: url("../../../public/img/bajgxt/rightbottom.png") no-repeat;
- background-size: 100% 100%;
- width: 44px;
- height: 56px;
- position: absolute;
- margin-left: calc(100% - 39px);
- margin-top: 340px;
+ position: relative;
+ .table-title {
+ background: url("../../../public/img/bajgxt/tabletitle.png") no-repeat;
+ background-size: 100% 100%;
+ position: absolute;
+ width: 267px;
+ margin-top: -13px;
+ height: 50px;
+ margin-left: calc(50% - 135.5px);
+ color: #fff;
+ font-size: 20px;
+ text-align: center;
+ line-height: 54px;
+ }
+ .lefttop {
+ background: url("../../../public/img/bajgxt/lefttop.png") no-repeat;
+ background-size: 100% 100%;
+ width: 44px;
+ height: 56px;
+ position: absolute;
+ margin-left: -6px;
+ margin-top: -7px;
+ }
+ .leftbottom {
+ background: url("../../../public/img/bajgxt/leftbottom.png") no-repeat;
+ background-size: 100% 100%;
+ width: 44px;
+ height: 56px;
+ position: absolute;
+ margin-left: -6px;
+ margin-top: calc(40% - 88px);
+ }
+ .righttop {
+ background: url("../../../public/img/bajgxt/righttop.png") no-repeat;
+ background-size: 100% 100%;
+ width: 44px;
+ height: 56px;
+ position: absolute;
+ margin-left: calc(100% - 39px);
+ margin-top: -7px;
+ }
+ .rightbottom {
+ background: url("../../../public/img/bajgxt/rightbottom.png") no-repeat;
+ background-size: 100% 100%;
+ width: 44px;
+ height: 56px;
+ position: absolute;
+ margin-left: calc(100% - 39px);
+ margin-top: calc(40% - 88px);
+ }
}
}
-}
-.el-table {
- width: calc(100% - 40px);
- height: calc(100% - 70px);
- margin: 0px 20px 15px;
- top: 60px;
-}
-/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
- background: #18458f;
-}
-/deep/ .el-table--enable-row-transition .el-table__body td,
-/deep/ .el-table th,
-.el-table tr {
- background: #3457b1;
-}
-/deep/ .el-table .cell {
- color: #fff;
-}
-/deep/ .el-table td,
-.el-table th.is-leaf {
- border-bottom-color: transparent;
-}
-/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
- background-color: #b0caf3;
-}
-/deep/ .el-input__inner {
- height: 27px;
- color: #fff;
- font-size: 14px;
- background-color: transparent;
- border-color: transparent;
- border-radius: 2px;
-}
-/deep/ .el-input {
- width: 94px;
-}
-/deep/ .el-select {
- line-height: 55px;
- position: absolute;
- right: 14px;
-}
-/deep/ .el-input__icon {
- line-height: 56px;
-}
-/deep/ .el-select:hover .el-input__inner,
-/deep/ .el-select .el-input.is-focus .el-input__inner {
- border: none;
-}
-/deep/ .el-table,
-/deep/ .el-table__expanded-cell,
-/deep/ .el-table--border::after,
-/deep/ .el-table--group::after,
-/deep/ .el-table::before {
- background-color: transparent;
-}
-.card-text {
- height: 30px;
- padding: 8px 10px;
- color: #fff;
- font-size: 14px;
- text-align: center;
- span:nth-child(2) {
- color: red;
- font-size: 21px;
- margin: 0px 10px;
- font-weight: bold;
+ .el-table {
+ width: calc(100% - 40px);
+ height: calc(100% - 70px);
+ margin: 0px 20px 15px;
+ top: 60px;
}
- span:nth-child(4) {
- margin-left: 15px;
+ /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
+ background: #18458f;
}
- span:nth-child(5) {
- margin: 0px 10px;
- color: red;
- font-size: 20px;
+ /deep/ .el-table--enable-row-transition .el-table__body td,
+ /deep/ .el-table th,
+ .el-table tr {
+ background: #3457b1;
}
-}
-.mapBtn,
-.mapBtn:nth-child(2),
-.mapBtn:nth-child(3) {
- position: absolute;
- z-index: 99;
- color: #fff;
- background: #4162a2;
- margin-top: 38px;
- margin-left: 85%;
- border-radius: 11px;
- height: 43px;
- display: inline-flex;
- width: 107px;
- cursor: pointer;
- img {
- margin: 8px 3px 8px 5px;
- height: 28px;
- width: 30px;
+ /deep/ .el-table .cell {
+ color: #fff;
}
- .text {
- width: 100px;
+ /deep/ .el-table td,
+ .el-table th.is-leaf {
+ border-bottom-color: transparent;
+ }
+ /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
+ background-color: #b0caf3;
+ }
+ /deep/ .el-input__inner {
+ height: 27px;
+ color: #fff !important;
+ font-size: 14px;
+ background-color: transparent !important;
+ border-color: transparent !important;
+ border-radius: 2px;
+ }
+ /deep/ .el-input {
+ width: 94px;
+ }
+ /deep/ .el-select {
+ line-height: 55px;
+ position: absolute;
+ right: 14px;
+ }
+ /deep/ .el-input__icon {
+ line-height: 56px;
+ }
+ /deep/ .el-select:hover .el-input__inner,
+ /deep/ .el-select .el-input.is-focus .el-input__inner {
+ border: none;
+ }
+ /deep/ .el-table,
+ /deep/ .el-table__expanded-cell,
+ /deep/ .el-table--border::after,
+ /deep/ .el-table--group::after,
+ /deep/ .el-table::before {
+ background-color: transparent;
+ }
+ .card-text {
+ height: 30px;
+ padding: 8px 10px;
+ color: #fff;
+ font-size: 14px;
text-align: center;
- margin: 3px;
- span:nth-child(1) {
- width: 100%;
- display: block;
- font-size: 10px;
- }
span:nth-child(2) {
- width: 100%;
- display: block;
color: red;
- font-size: 17px;
+ font-size: 21px;
+ margin: 0px 10px;
font-weight: bold;
}
+ span:nth-child(4) {
+ margin-left: 15px;
+ }
+ span:nth-child(5) {
+ margin: 0px 10px;
+ color: red;
+ font-size: 20px;
+ }
}
- &:hover {
- box-shadow: 0px 0px 10px #568df3;
+ .right-content {
+ height: calc(100% - 44px);
+ width: 100%;
}
-}
-.mapBtn:nth-child(2) {
- margin-top: 100px;
-}
-.mapBtn:nth-child(3) {
- margin-top: 160px;
+ .card-list {
+ margin: 20px 60px;
+ display: flex;
+ height: 55px;
+ line-height: 55px;
+ img:first-child {
+ height: 55px;
+ }
+ img:nth-child(2) {
+ position: absolute;
+ margin-left: 13px;
+ width: 35px;
+ height: 35px;
+ margin-top: 9px;
+ }
+ span:nth-child(3) {
+ color: red;
+ font-size: 30px;
+ display: block;
+ width: 71px;
+ margin: 0px 20px;
+ }
+ span:nth-child(4) {
+ color: #7ff3f4;
+ font-size: 18px;
+ display: block;
+ width: 129px;
+ }
+ }
+ .mapBtn,
+ .mapBtn:nth-child(2),
+ .mapBtn:nth-child(3) {
+ position: absolute;
+ z-index: 99;
+ color: #fff;
+ background: #4162a2;
+ margin-top: 38px;
+ margin-left: calc(100% - 140px);
+ border-radius: 11px;
+ height: 43px;
+ display: inline-flex;
+ width: 107px;
+ cursor: pointer;
+ img {
+ margin: 8px 3px 8px 5px;
+ height: 28px;
+ width: 30px;
+ }
+ .text {
+ width: 100px;
+ text-align: center;
+ margin: 3px;
+ span:nth-child(1) {
+ width: 100%;
+ display: block;
+ font-size: 10px;
+ }
+ span:nth-child(2) {
+ width: 100%;
+ display: block;
+ color: red;
+ font-size: 17px;
+ font-weight: bold;
+ }
+ }
+ &:hover {
+ box-shadow: 0px 0px 10px #568df3;
+ }
+ }
+ .mapBtn:nth-child(2) {
+ margin-top: 100px;
+ }
+ .mapBtn:nth-child(3) {
+ margin-top: 160px;
+ }
+ /deep/ .el-table__body-wrapper {
+ overflow: auto;
+ height: 100%;
+ }
}
--
Gitblit v1.9.3