- #cockpit {
- width: 100%;
- // height: 852px;
- height: 100%;
- background: #081540;
- position: relative;
-
- .entiretyBox {
- width: 100%;
- // height: calc(100vh - 64px);
- height: 100%;
- background: url('@/assets/images/home/bg.png') center no-repeat;
- position: relative;
- background-size: 100% 100%;
- }
-
- .entiretyBox::before {
- // backdrop-filter: blur(5px);
- background-color: rgba(0, 0, 0, 0.5);
- content: '';
- display: block;
- height: 100%;
- left: 0;
- position: absolute;
- top: 0;
- width: 100%;
- z-index: 0;
- }
- }
-
- .cockpit-box {
- width: 442px;
- height: calc(100% - 70px);
- // margin-top: 30px;
- position: absolute;
- z-index: 3;
- color: #fff;
- }
-
- .cockpit-box-item {
- width: 100%;
- height: 33%;
- margin-bottom: 2%;
- .box-head {
- height: 37px;
- width: 100%;
- background: url('@/assets/images/cockpit/head-title.png') no-repeat;
- background-size: 100% 100%;
- // position: relative;
- display: flex;
- align-items: center;
- position: relative;
-
- .head-title {
- width: 155px;
- text-align: center;
- font-size: 20px;
- color: #f6f9fe;
- font-weight: bold;
- font-style: italic;
- position: relative;
-
- .right-word {
- position: absolute;
- font-size: 12px;
- top: 10px;
- right: -10px;
- }
-
- .warn-right {
- position: absolute;
- top: -6px;
- left: 124px;
- width: 22px;
- height: 22px;
- background: #f55656;
- border-radius: 50%;
- text-align: center;
- }
- }
-
- .head-right {
- cursor: pointer;
- position: absolute;
- font-size: 14px;
- top: 14px;
- right: 10px;
- color: #00d8ff;
- }
- }
-
- .box-body {
- height: calc(100% - 37px);
- padding-left: 5px;
- position: relative;
-
- // 气象预报
- .echart-title {
- height: 32px;
- display: flex;
- align-items: center;
- padding: 0 15px 0 10px;
- background: url('@/assets/images/cockpit/yujing_img.png') no-repeat;
- background-size: 100% 100%;
- }
-
- .echart-word {
- padding-left: 10px;
- width: 87%;
- position: relative;
- .right-word {
- position: absolute;
- color: #28cfff;
- font-weight: bold;
- right: 5px;
- top: 50%;
- transform: translateY(-50%);
- }
- }
-
- .echartitem {
- height: calc(100% - 32px);
- }
-
- // 值班信息
- .box-body-zhiban {
- height: 90px;
- margin: 10px 0;
- display: flex;
- justify-content: space-between;
-
- .zhiban-box {
- height: 100%;
- width: 49%;
- border-radius: 10px;
- overflow: hidden;
- background: linear-gradient(
- 90deg,
- rgba(17, 40, 94, 1),
- rgba(12, 29, 68, 0.58)
- );
- border-radius: 4px;
- display: flex;
-
- .zhiban-left {
- width: 30px;
- height: 100%;
- color: #acf8ff;
- font-size: 18px;
- padding: 0 5px;
- display: flex;
- align-items: center;
- background: linear-gradient(
- 90deg,
- rgba(40, 82, 155.18),
- rgba(49, 98, 172, 0.18)
- );
- border-radius: 4px 0px 0px 4px;
- }
-
- .zhiban-right {
- height: 100%;
- width: calc(100% - 30px);
- color: rgba(194, 220, 252, 1);
-
- .right-box {
- height: 42%;
- padding: 0 10px;
- position: relative;
- display: flex;
- align-items: center;
-
- .daowei {
- margin-left: 10px;
- padding: 1px;
- color: #4aebb0;
- border: 1px solid #4aebb0;
- background: #163b57;
- }
-
- span {
- position: absolute;
- right: 10px;
- color: rgba(84, 165, 255, 1);
- }
- .right-line {
- position: absolute;
- bottom: 0;
- left: 3%;
- width: 94%;
- height: 1px;
- background: rgba(101, 136, 199, 0.5);
- }
-
- .zhiban-phone {
- position: absolute;
- right: 10px;
- cursor: pointer;
- }
- }
- }
- }
- }
-
- .zhiban-bottom {
- height: calc(100% - 110px);
- position: relative;
-
- .left {
- height: 100%;
- width: 50%;
- }
-
- .center {
- height: 100%;
- width: 34%;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
-
- .zhiban-centername {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- bottom: 12%;
- font-size: 12px;
- font-family: Source Han Sans CN;
- font-weight: 500;
- color: #3be3ff;
- }
-
- .zhiban-bottom-box {
- cursor: pointer;
- position: absolute;
- color: rgba(131, 158, 203, 1);
- text-align: center;
- font-size: 14px;
- font-family: Adobe Heiti Std;
- }
-
- .bengzhannumber {
- font-family: PangMenZhengDao;
- margin-top: 10px;
- color: #c3d4ee;
- font-size: 20px;
-
- .bengzhansize {
- font-weight: 400;
- color: #1ed6c3;
- }
-
- .weibanzheng {
- color: #ff5a5a;
- }
- }
-
- .zhibanleft {
- top: 50%;
- transform: translateY(-50%);
- left: 30px;
- }
-
- .zhibanright {
- top: 50%;
- transform: translateY(-50%);
- right: 30px;
- }
- }
-
- // 案件信息 //排水管网
-
- .table-head {
- display: flex;
- align-items: center;
- text-align: center;
- background: linear-gradient(180deg, rgb(7, 19, 58), rgba(37, 57, 109));
- height: 40px;
- border-bottom: 2px solid #6a8fe8;
-
- .one {
- flex: 1;
- }
-
- .two {
- flex: 1;
- }
- .three {
- flex: 1;
- }
- }
-
- .box-table {
- width: 100%;
- height: 100%;
- overflow: hidden;
- overflow-y: auto;
- padding-top: 10px;
-
- .table-item {
- height: 38px;
- background: rgba(26, 44, 92, 0.6);
- margin-bottom: 5px;
- display: flex;
- align-items: center;
- padding: 0 15px 0 10px;
- text-align: center;
- color: rgba(221, 229, 243, 1);
- cursor: pointer;
-
- .one {
- flex: 1;
- }
-
- .yellow {
- background: url('@/assets/images/cockpit/1.png') center no-repeat;
- background-size: 100% 100%;
- }
-
- .green {
- background: url('@/assets/images/cockpit/2.png') center no-repeat;
- background-size: 100% 100%;
- }
-
- .red {
- background: url('@/assets/images/cockpit/3.png') center no-repeat;
- background-size: 100% 100%;
- }
-
- .two {
- flex: 2;
- }
- .three {
- flex: 6;
- text-align: left;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .four {
- cursor: pointer;
- flex: 2;
- color: rgba(0, 216, 255, 1);
-
- .radio-box {
- height: 20px;
- border: 1px solid rgba(0, 216, 255, 1);
- background: rgba(21, 55, 115);
- border-radius: 10px;
- }
-
- .gray {
- height: 20px;
- border: 1px solid rgba(181, 181, 181, 1);
- background: rgba(35, 53, 92);
- color: rgba(181, 181, 181, 1);
- border-radius: 10px;
- }
- }
- }
-
- .table-item:hover {
- background: rgba(26, 44, 92, 0.3);
- }
- }
-
- // 排水管网
- .box-left {
- padding-top: 5px;
- width: 36px;
- height: 100%;
- color: rgba(246, 249, 254, 1);
-
- .left-item {
- cursor: pointer;
- width: 32px;
- text-align: center;
- height: 30%;
- margin-top: 4px;
-
- background: #0b2256;
- border-radius: 4px;
- display: flex;
- flex-direction: column;
- justify-content: center;
-
- .one {
- margin-left: 5px;
- width: 22px;
- height: 22px;
- line-height: 22px;
- text-align: center;
- border-radius: 50%;
- }
- .yellow {
- background: #886d53;
- }
- .blue {
- background: #1b74c1;
- }
- .red {
- background: #7f395d;
- }
- }
-
- .item-active {
- background: rgba(32, 96, 203, 0.5);
- border: 1px solid #009cff;
- }
- }
-
- .box-right {
- .table-item {
- height: 38px;
- background: rgba(26, 44, 92, 0.6);
- margin-bottom: 5px;
- display: flex;
- align-items: center;
- padding: 0 15px 0 10px;
- text-align: center;
- color: rgba(221, 229, 243, 1);
-
- .one {
- flex: 1;
- }
-
- .yellow {
- background: url('@/assets/images/cockpit/1.png') center no-repeat;
- background-size: 100% 100%;
- }
-
- .green {
- background: url('@/assets/images/cockpit/2.png') center no-repeat;
- background-size: 100% 100%;
- }
-
- .red {
- background: url('@/assets/images/cockpit/3.png') center no-repeat;
- background-size: 100% 100%;
- }
-
- .two {
- flex: 2;
- }
- .three {
- flex: 6;
- text-align: left;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .four {
- cursor: pointer;
- flex: 2;
- color: rgba(0, 216, 255, 1);
-
- .radio-box {
- height: 20px;
- border: 1px solid rgba(0, 216, 255, 1);
- background: rgba(21, 55, 115);
- border-radius: 10px;
- }
-
- .gray {
- height: 20px;
- border: 1px solid rgba(181, 181, 181, 1);
- background: rgba(35, 53, 92);
- color: rgba(181, 181, 181, 1);
- border-radius: 10px;
- }
- }
- }
- }
-
- .box-right {
- height: 100%;
- width: calc(100% - 46px);
- padding-top: 5px;
- }
-
- // 排水设施
- .facilityBox {
- display: flex;
- flex-wrap: wrap;
- height: 100%;
-
- .facility-item {
- width: 33%;
- height: 50%;
- text-align: center;
- display: flex;
- flex-direction: column;
- justify-content: center;
-
- .facilitydz {
- background: url('@/assets/images/cockpit/facility.png') center
- no-repeat;
- height: 70px;
- // display: flex;
- // align-items: center;
- // justify-content: center;
- position: relative;
-
- img {
- position: absolute;
- left: 50%;
- top: 32%;
- transform: translateX(-50%);
- }
- }
-
- .facility-name {
- color: rgba(197, 223, 239, 1);
- }
-
- .facility-value {
- color: rgba(33, 189, 245, 1);
- .value-one {
- font-size: 18px;
- }
- }
- }
- }
-
- //办证统计上部分
- .box-banzheng {
- height: calc(100% - 164px);
- margin: 8px 0;
- display: flex;
- align-items: center;
- justify-content: center;
- background: linear-gradient(
- 90deg,
- rgba(15, 42, 76),
- rgba(15, 42, 76, 0.18)
- );
- border-radius: 4px;
- color: #9ebef8;
- font-size: 18px;
- font-family: Source Han Sans CN;
- font-weight: 500;
- color: #9ebef8;
-
- .banzhenglv {
- font-size: 28px;
- font-family: PangMenZhengDao;
- font-weight: 400;
- color: #e3f5ff;
- margin-left: 20px;
- }
- }
-
- .box-banzheng-bottom {
- height: 148px;
- }
-
- // 区域统计
- .quyubox {
- margin-top: 2%;
- width: 48%;
- margin-right: 1%;
- height: 97%;
- .quyutitle {
- width: 100%;
- height: 30px;
- line-height: 30px;
- text-align: center;
- background: linear-gradient(
- 90deg,
- rgba(28, 61, 132),
- rgba(16, 35, 72, 0.9)
- );
- border-radius: 4px 4px 0px 0px;
- font-size: 16px;
- font-family: Source Han Sans CN;
- font-weight: 550;
- color: #9ebef8;
- }
-
- .quyutwo {
- color: #74f0ff;
- }
-
- .quyubody {
- position: relative;
- height: calc(100% - 30px);
- background: linear-gradient(
- 90deg,
- rgba(18, 41, 96),
- rgba(12, 29, 68, 0.9)
- );
- border-radius: 4px;
-
- .yhc {
- position: absolute;
- width: 6px;
- height: 6px;
- background: #cbddff;
- box-shadow: 0 1px 15px #fff;
- }
-
- .left {
- top: 43%;
- transform: translateY(-50%);
- left: 28%;
- }
-
- .right {
- top: 43%;
- transform: translateY(-50%);
- right: 28%;
- }
- }
- }
- }
-
- .box-flex {
- display: flex;
- }
- }
-
- .fieldLeft {
- left: 46px;
- top: 20px;
- background: url('@/assets/images/cockpit/masklayer_img.png') no-repeat;
- background-size: cover;
- }
-
- .fieldrigth {
- right: 16px;
- top: 20px;
- background: url('@/assets/images/cockpit/masklayer_img-right.png') no-repeat;
- background-size: cover;
- }
-
- .flexdvideo {
- width: 442px;
- height: calc(100% - 160px);
- position: fixed;
- right: 46px;
- top: 90px;
- background: url('@/assets/images/cockpit/masklayer_img-right.png') no-repeat;
- background-size: cover;
- }
-
- .line-l {
- position: absolute;
- left: 0px;
- top: 50%;
- transform: translateY(-50%);
- z-index: 999;
- }
-
- .line-R {
- position: absolute;
- right: 0px;
- top: 50%;
- transform: translateY(-50%);
- z-index: 999;
- }
-
- .line-bottom {
- position: absolute;
- bottom: -8px;
- left: 50%;
- transform: translate(-50%);
- z-index: 999;
- }
-
- .allmap {
- width: 100%;
- height: 100%;
- color: #fff;
- }
-
- .subassemblybox {
- width: 100%;
- height: 100%;
- }
-
- // 通用弹框样式 谨慎修改原有类名和样式 除非全局修改 否则新加样式修改
- #pop-up {
- position: fixed;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- width: 530px;
- height: 375px;
- background: #021534;
- border: 1px solid #114f89;
- z-index: 2000;
-
- .weather-head {
- position: relative;
- height: 36px;
- background: linear-gradient(0deg, #021f56 0%, #042d7b 100%);
-
- .head-bg {
- position: absolute;
- width: 180px;
- line-height: 46px;
- height: 46px;
- left: 0;
- bottom: 0;
- background: url('@/assets/images/cockpit/dia-head.png') center no-repeat;
- font-size: 18px;
- font-family: Source Han Sans CN;
- font-weight: 550;
- color: #ffffff;
- padding-left: 20px;
- }
-
- .weather-icon {
- cursor: pointer;
- position: absolute;
- right: 12px;
- top: 50%;
- transform: translateY(-50%);
- }
- }
-
- .weather-body {
- padding: 0 11px;
- height: calc(100% - 36px);
- background: #021534;
- border: 1px solid #114f89;
- border-top: 1px solid #1096db;
-
- .body-title {
- height: 46px;
- display: flex;
- align-items: center;
- padding-left: 11px;
-
- .title-item {
- cursor: pointer;
- color: #4678d4;
- background: linear-gradient(0deg, #032463 0%, #042d7a 100%);
- border-radius: 2px;
- height: 26px;
- padding: 3px 13px;
- font-size: 14px;
- font-family: Source Han Sans CN;
- font-weight: 500;
- margin-right: 10px;
-
- &.actived {
- border: 1px solid #50a3ff;
- color: #50a3ff;
- }
- }
- }
-
- .body-two {
- height: 40px;
- background: rgba(11, 83, 149, 0.2);
- display: flex;
- align-items: center;
- padding: 0 10px;
- position: relative;
-
- .ssd {
- font-size: 16px;
- font-family: Source Han Sans CN;
- font-weight: bold;
- color: #50a3ff;
- margin-left: 10px;
- }
-
- .ssdtwo {
- margin-left: 30px;
- }
-
- .ssdthree {
- font-size: 16px;
- font-family: Source Han Sans CN;
- font-weight: 500;
- color: #acd3ff;
- margin-right: 10px;
- }
-
- .ssdfour {
- position: absolute;
- right: 10px;
- width: 60px;
- height: 26px;
- background: #e2be4a;
- border-radius: 2px;
- font-size: 16px;
- font-family: Source Han Sans CN;
- font-weight: 500;
- color: #ffffff;
- text-align: center;
- }
- }
-
- .body-three {
- margin-top: 2px;
- height: calc(100% - 100px);
- background: rgba(11, 83, 149, 0.2);
- padding: 10px;
- position: relative;
-
- .three-title {
- display: flex;
- align-items: center;
-
- .three-item {
- cursor: pointer;
- width: 54px;
- height: 20px;
- line-height: 20px;
- background: rgba(11, 83, 149, 0.2);
- border-radius: 2px;
- text-align: center;
- font-size: 14px;
- font-family: Source Han Sans CN;
- font-weight: 500;
- color: #b4cded;
- margin-right: 4px;
-
- &.actived {
- color: #1fdac5;
- background-color: #0b5395;
- }
- }
- }
-
- .weather-echarts {
- margin-top: 5px;
- height: calc(100% - 25px);
- width: 100%;
- position: relative;
-
- .weather-position {
- position: absolute;
- width: 100%;
- height: 100%;
- display: flex;
-
- .zhuti {
- width: 10%;
- margin-left: 1.2%;
- height: 100%;
- background: #052c58;
- color: #b4cded;
- text-align: center;
- padding-top: 21px;
-
- .zhutivalue {
- color: #25aaff;
- margin-top: 20px;
- font-size: 12px;
- font-family: Source Han Sans CN;
- font-weight: 500;
- color: #25aaff;
- }
- }
-
- .zhuti:first-child {
- margin: 0;
- }
-
- .zhuti:first-child .zhutitime {
- // margin: 0;
- color: #1fdac5;
- }
- }
- }
- }
-
- .body-four {
- height: 60px;
- width: 100%;
- background: #042149;
- display: flex;
- align-items: center;
- padding: 0 10px;
-
- .four-item {
- width: 40px;
- height: 40px;
- background: #03326c;
- border-radius: 2px;
- font-size: 14px;
- font-family: Source Han Sans CN;
- font-weight: 500;
- color: #4f9bff;
- text-align: center;
- }
-
- .future-box {
- width: calc(100% - 40px);
- padding-left: 10px;
- display: flex;
- justify-content: space-between;
- text-align: center;
- }
-
- .future-item {
- width: 80px;
- height: 40px;
- background: linear-gradient(
- 0deg,
- rgba(84, 127, 184, 0.2) 0%,
- rgba(84, 128, 184, 0.2) 100%
- );
- border-radius: 2px;
- color: #a1bada;
- font-size: 14px;
- font-family: Source Han Sans CN;
- font-weight: 500;
-
- .future-value {
- color: #5681d2;
- }
- }
- }
-
- .body-five {
- width: 100%;
- margin-top: 10px;
- height: calc(100% - 126px);
- background: #042149;
- display: flex;
- align-items: center;
- padding: 10px;
- }
-
- ::v-deep .body-Custom {
- height: calc(100% - 60px);
- width: 100%;
-
- .calendar-click {
- border: 1px solid #1096db;
- color: #1096db;
- display: flex;
- }
- .actived {
- cursor: pointer;
- background: #1096db;
- color: #021534;
- }
-
- .clickitem {
- width: 50px;
- height: 24px;
- border-radius: 2px 0px 0px 2px;
- cursor: pointer;
- text-align: center;
- border-right: 1px solid #1096db;
- }
- .clickitem:last-child {
- border: none;
- }
-
- .el-calendar {
- height: 100%;
- background: transparent;
- color: #b4cded;
- }
-
- .el-calendar-table .el-calendar-day:hover {
- cursor: pointer;
- background-color: #064c7b;
- }
-
- .el-calendar-table td.is-selected {
- background-color: #384d62;
- }
-
- .el-calendar-table .el-calendar-day {
- width: 68px;
- height: 72px;
- padding: 0;
- text-align: center;
- background: #053a66;
- margin-right: 1px;
- margin-bottom: 1px;
- }
-
- .data-title {
- height: 16px;
- line-height: 16px;
- background: #064c7b;
- }
-
- .el-calendar-table:not(.is-range) td.prev {
- color: #b4cded;
- }
-
- .el-calendar-table tr td {
- border: none;
- }
-
- .el-calendar__body {
- padding: 10px;
- padding-top: 0;
- background: #052146;
- margin-bottom: 10px;
- }
-
- .el-calendar__header {
- border: none;
- font-size: 16px;
- padding: 12px 5px;
- }
-
- .el-calendar-table thead th {
- color: #50a3ff;
- }
-
- .daydiv {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 25px;
- color: #b4cded;
- }
-
- .head-title {
- font-size: 14px;
- display: flex;
- .daydiv {
- margin-right: 5px;
- }
- }
-
- .dayshift {
- margin-right: 7px;
- width: 6px;
- height: 6px;
- background: #e9d390;
- border-radius: 50%;
- }
-
- .nightshift {
- margin-right: 7px;
- width: 6px;
- height: 6px;
- background: #2186f6;
- border-radius: 50%;
- }
- }
-
- // 通用新增
- .no-padding-left {
- padding-left: 0;
- }
-
- // 通用body
- .body-detail {
- height: calc(100% - 51px);
- width: 100%;
- }
- }
-
- .imformation {
- padding: 11px;
- }
-
- .leftangle {
- position: absolute;
- width: 14px;
- height: 14px;
- left: 0;
- bottom: 0;
- background: url('@/assets/images/cockpit/zj.png') center no-repeat;
- }
-
- .rightangle {
- position: absolute;
- width: 14px;
- height: 14px;
- right: 0;
- bottom: 0;
- background: url('@/assets/images/cockpit/yj.png') center no-repeat;
- }
- }
-
- .dutyWH {
- width: 530px !important;
- // height: 521px !important;
- height: auto !important;
- }
-
- .Layercontrol {
- cursor: pointer;
- z-index: 999;
- position: absolute;
- right: 520px;
- top: 30px;
- width: 40px;
- height: 40px;
- background: url('@/assets/images/cockpit/Layercontrol.png') center no-repeat;
- }
-
- ::v-deep .LayerControlBox {
- position: absolute;
- top: 30px;
- right: 40px;
- z-index: 2000;
- width: 460px;
- height: 708px;
- border: 1px solid #2996da;
- background: linear-gradient(0deg, #07133b 0%, #0e275f 100%);
- border-radius: 2px;
-
- .ControlBox-head {
- position: relative;
- font-size: 18px;
- font-family: Source Han Sans CN;
- font-weight: bold;
- color: #f3fafe;
- height: 50px;
- padding-left: 20px;
- background: linear-gradient(
- 90deg,
- rgba(40, 182, 232, 0.2) 0%,
- rgba(40, 182, 232, 0) 100%
- );
- display: flex;
- align-items: center;
-
- .control-change {
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- right: 21px;
- width: 83px;
- height: 24px;
- line-height: 24px;
- border: 1px solid #1ba1ff;
- font-size: 14px;
- font-family: Source Han Sans CN;
- font-weight: 500;
- color: #839ecb;
- background: linear-gradient(
- 0deg,
- rgba(27, 161, 255, 0.2) 0%,
- rgba(27, 161, 255, 0.1) 100%
- );
- border-radius: 12px;
- text-align: center;
- }
- }
-
- .ControlBox-body {
- height: calc(100% - 50px);
-
- .one-controlbox {
- margin-bottom: 30px;
- }
-
- .body-title {
- padding-left: 21px;
-
- .el-checkbox__label {
- font-size: 16px;
- font-family: Source Han Sans CN;
- font-weight: 500;
- color: #54a5ff;
- }
- }
-
- .body-body {
- margin-left: 50px;
- }
- }
- }
-
- ::v-deep .el-checkbox__inner {
- background: #0d2357;
- border: 1px solid #54a5ff;
- }
-
- ::v-deep .el-checkbox__label {
- color: #b4cded;
- display: flex;
- align-items: center;
- }
-
- ::v-deep .el-radio__label {
- color: #b4cded;
- display: flex;
- align-items: center;
- }
-
- ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
- background: #0d2357;
- }
-
- ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
- color: #b4cded;
- }
-
- ::v-deep .el-radio__inner {
- border-radius: 0;
- background: #0d2357;
- border: 1px solid #54a5ff;
- }
-
- ::v-deep .el-radio__input.is-checked + .el-radio__label {
- color: #b4cded;
- }
-
- ::v-deep .el-radio__inner::after {
- width: 0;
- }
-
- .checkicon {
- margin-right: 5px;
- }
- ::v-deep .el-checkbox-group {
- width: 100%;
- display: flex;
- flex-wrap: wrap;
- }
-
- ::v-deep .el-checkbox {
- width: 33%;
- display: flex;
- margin: 0;
- }
-
- // 地图图例
- .legendtip {
- z-index: 999;
- position: absolute;
- background: linear-gradient(90deg, rgba(18, 41, 95), rgba(13, 29, 68));
- border: 1px solid #1475d8;
- border-radius: 4px;
- padding: 21px;
-
- .legend-item {
- height: 25px;
- margin-bottom: 20px;
- display: flex;
- align-items: center;
- font-size: 16px;
- font-family: Source Han Sans CN;
- font-weight: 400;
- color: #9ebef8;
-
- .legend-name {
- margin-left: 10px;
- }
- }
- .legend-item:last-child {
- margin: 0;
- }
- }
-
- // 管网工具栏
- #gongjulan {
- position: absolute;
- left: 52px;
- top: 140px;
- z-index: 999;
- }
-
- .gw-checkbtn {
- cursor: pointer;
- position: absolute;
- top: 36px;
- left: 52px;
- width: 40px;
- height: 40px;
- // background: rgba($color: #103c85, $alpha: 0.95);
- // border: 1px solid #fff;
- border-radius: 4px;
- text-align: center;
- line-height: 55px;
- z-index: 3;
-
- img {
- width: 100%;
- height: 100%;
- }
- }
-
- .gw-checkbtn2 {
- cursor: pointer;
- margin-bottom: 5px;
- width: 40px;
- height: 40px;
- // background: rgba($color: #103c85, $alpha: 0.95);
- // border: 1px solid #fff;
- border-radius: 4px;
- text-align: center;
- line-height: 55px;
- z-index: 3;
-
- img {
- width: 100%;
- height: 100%;
- }
-
- &.actived {
- background: rgba(5, 15, 22, 0.95);
- }
- }
-
- #rivermap-analyse {
- top: 80px;
- transition: all 0.5s ease-in;
- }
-
- .rivermap-analyse-check {
- filter: invert(20%);
- }
-
- // 管网底部图例
- .Gwlegend {
- display: flex;
- align-items: center;
- padding: 0 50px;
- justify-content: space-between;
- position: absolute;
- bottom: 35px;
- left: 20px;
- width: 1228px;
- height: 54px;
- background: rgba($color: #000000, $alpha: 0.8);
- border: 1px solid #1e1e1e;
- border-radius: 27px;
- color: #7f7f7f;
- font-size: 16px;
- z-index: 999;
- }
-
- .LegendClass {
- display: flex;
-
- .legend-img {
- width: 20px;
- height: 19px;
- margin-right: 5px;
- img {
- width: 100%;
- height: 100%;
- }
- }
- }
-
- .leftbtn {
- position: absolute;
- left: 485px;
- width: 16px;
- height: 12px;
- top: 23px;
- z-index: 999;
- }
- .rightbtn {
- position: absolute;
- right: 485px;
- width: 16px;
- height: 12px;
- top: 23px;
- z-index: 999;
- }
-
- /* 设置持续时间和动画函数 */
- .fade1-enter-active {
- animation: test1 0.6s linear;
- }
-
- .fade1-leave-active {
- animation: test1 0.6s linear reverse;
- }
-
- // 左边
- @keyframes test1 {
- 0% {
- left: -490px;
- opacity: 0;
- }
- 100% {
- left: 46px;
- opacity: 1;
- }
- }
-
- /* 设置持续时间和动画函数 */
- .fade2-enter-active {
- animation: test2 0.6s linear;
- }
-
- .fade2-leave-active {
- animation: test2 0.6s linear reverse;
- }
-
- // 左边
- @keyframes test2 {
- 0% {
- right: -490px;
- opacity: 0;
- }
- 100% {
- right: 46px;
- opacity: 1;
- }
- }
-
- .buttonleft {
- position: absolute !important;
- left: 50px !important;
- }
-
- .clearbuttonleft {
- position: absolute !important;
- left: 485px !important;
- }
-
- .buttonright {
- position: absolute !important;
- right: 50px !important;
- }
-
- .clearbuttonright {
- position: absolute !important;
- right: 485px !important;
- }
-
- ::v-deep .m-2 {
- width: 90px;
- height: 26px;
- border-radius: 1px;
- .select-trigger {
- height: 100%;
- }
-
- .el-input {
- height: 100%;
- }
-
- .el-input__wrapper {
- background: #02225e;
- border: 1px solid #0f4980;
- padding: 0 5px;
- }
- .el-input__inner {
- color: #b2c7de;
- }
- }