|
@@ -11,23 +11,26 @@ $vh_base: 2520;
|
|
}
|
|
}
|
|
|
|
|
|
:deep(.point-info) {
|
|
:deep(.point-info) {
|
|
- border: 4px solid #2a81fc;
|
|
|
|
- padding: 5px 15px 15px;
|
|
|
|
- width: 570px;
|
|
|
|
- font-size: 16px;
|
|
|
|
|
|
+ border: vw(7) solid #2a81fc;
|
|
|
|
+ padding: vw(5) vw(32) vw(32);
|
|
|
|
+ width: vw(1569);
|
|
|
|
+ font-size: vw(38);
|
|
display: flex;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
background-color: #1c294c;
|
|
background-color: #1c294c;
|
|
color: #d5dde3;
|
|
color: #d5dde3;
|
|
position: relative;
|
|
position: relative;
|
|
.table-box {
|
|
.table-box {
|
|
- max-height: 250px;
|
|
|
|
|
|
+ max-height: vw(800);
|
|
overflow-y: auto;
|
|
overflow-y: auto;
|
|
width: 100%;
|
|
width: 100%;
|
|
|
|
+ &::-webkit-scrollbar {
|
|
|
|
+ width: vw(6);
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.table {
|
|
.table {
|
|
- border-top: 1px solid #3d66ae;
|
|
|
|
- border-right: 1px solid #3d66ae;
|
|
|
|
|
|
+ border-top: vw(2) solid #3d66ae;
|
|
|
|
+ border-right: vw(2) solid #3d66ae;
|
|
display: flex;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -39,111 +42,111 @@ $vh_base: 2520;
|
|
.point-item {
|
|
.point-item {
|
|
display: flex;
|
|
display: flex;
|
|
width: 100%;
|
|
width: 100%;
|
|
- .td1 {
|
|
|
|
- width: 132.75px;
|
|
|
|
- }
|
|
|
|
- .td2 {
|
|
|
|
- width: 132.75px;
|
|
|
|
|
|
+ }
|
|
|
|
+ .point-item-hover {
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ &:hover {
|
|
|
|
+ background-color: #1a326e;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.point-item2 {
|
|
.point-item2 {
|
|
display: flex;
|
|
display: flex;
|
|
width: 100%;
|
|
width: 100%;
|
|
- .td1 {
|
|
|
|
- width: 132.75px;
|
|
|
|
- }
|
|
|
|
- .td2 {
|
|
|
|
- width: 398.25px;
|
|
|
|
- }
|
|
|
|
}
|
|
}
|
|
- .td1 {
|
|
|
|
|
|
+ .td1, {
|
|
|
|
+ width: vw(369);
|
|
|
|
+ }
|
|
|
|
+ .td1, .td3 {
|
|
background-color: #1a326e;
|
|
background-color: #1a326e;
|
|
- padding: 5px 10px;
|
|
|
|
|
|
+ padding: vw(15) vw(20);
|
|
color: #c6d1e6;
|
|
color: #c6d1e6;
|
|
- border-bottom: 1px solid #3d66ae;
|
|
|
|
- border-left: 1px solid #3d66ae;
|
|
|
|
|
|
+ border-bottom: vw(2) solid #3d66ae;
|
|
|
|
+ border-left: vw(2) solid #3d66ae;
|
|
|
|
+ }
|
|
|
|
+ .td2, .td4 {
|
|
|
|
+ padding: vw(15) vw(20);
|
|
|
|
+ border-bottom: vw(1) solid #3d66ae;
|
|
|
|
+ border-left: vw(1) solid #3d66ae;
|
|
}
|
|
}
|
|
- .td2 {
|
|
|
|
- padding: 5px 10px;
|
|
|
|
- border-bottom: 1px solid #3d66ae;
|
|
|
|
- border-left: 1px solid #3d66ae;
|
|
|
|
|
|
+ .td2, .td3, .td4 {
|
|
|
|
+ flex: 1;
|
|
}
|
|
}
|
|
.close {
|
|
.close {
|
|
position: absolute;
|
|
position: absolute;
|
|
- top: 8px;
|
|
|
|
- right: 12px;
|
|
|
|
- width: 10px;
|
|
|
|
- height: 10px;
|
|
|
|
|
|
+ top: vw(20);
|
|
|
|
+ right: vw(60);
|
|
|
|
+ width: vw(32);
|
|
|
|
+ height: vw(32);
|
|
background: url('@/assets/images/close.png') no-repeat;
|
|
background: url('@/assets/images/close.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.title-box {
|
|
.title-box {
|
|
- width: 550px;
|
|
|
|
- height: 40px;
|
|
|
|
|
|
+ width: vw(1354);
|
|
|
|
+ height: vw(175);
|
|
position: relative;
|
|
position: relative;
|
|
background: url('@/assets/images/line.png') no-repeat;
|
|
background: url('@/assets/images/line.png') no-repeat;
|
|
- background-size: 35px 15px;
|
|
|
|
|
|
+ background-size: vw(163) vw(69);
|
|
background-position: bottom left;
|
|
background-position: bottom left;
|
|
&::before {
|
|
&::before {
|
|
content: "";
|
|
content: "";
|
|
- width: 500px;
|
|
|
|
- height: 2px;
|
|
|
|
|
|
+ width: vw(1309);
|
|
|
|
+ height: vw(6.9);
|
|
background-image: linear-gradient(to right, rgba(0, 191, 252, 0.35) 0, rgba(0, 191, 252, 0) 100%);
|
|
background-image: linear-gradient(to right, rgba(0, 191, 252, 0.35) 0, rgba(0, 191, 252, 0) 100%);
|
|
display: block;
|
|
display: block;
|
|
position: absolute;
|
|
position: absolute;
|
|
- left: 38px;
|
|
|
|
- bottom: 6.5px;
|
|
|
|
|
|
+ left: vw(180);
|
|
|
|
+ bottom: vw(30);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.gradient-text {
|
|
.gradient-text {
|
|
- font-size: 24px;
|
|
|
|
|
|
+ font-size: vw(84);
|
|
}
|
|
}
|
|
.icon1, .icon2, .icon3, .icon4 {
|
|
.icon1, .icon2, .icon3, .icon4 {
|
|
position: absolute;
|
|
position: absolute;
|
|
- top: 2px;
|
|
|
|
- left: 2px;
|
|
|
|
- width: 12px;
|
|
|
|
- height: 12px;
|
|
|
|
|
|
+ top: vw(10);
|
|
|
|
+ left: vw(10);
|
|
|
|
+ width: vw(12);
|
|
|
|
+ height: vw(12);
|
|
background: url('@/assets/images/inputIcon1.png') no-repeat;
|
|
background: url('@/assets/images/inputIcon1.png') no-repeat;
|
|
}
|
|
}
|
|
.icon2 {
|
|
.icon2 {
|
|
left: unset;
|
|
left: unset;
|
|
- right: 2px;
|
|
|
|
|
|
+ right: vw(10);
|
|
transform: rotate(90deg);
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
.icon3 {
|
|
.icon3 {
|
|
left: unset;
|
|
left: unset;
|
|
top: unset;
|
|
top: unset;
|
|
- right: 2px;
|
|
|
|
- bottom: 2px;
|
|
|
|
|
|
+ right: vw(10);
|
|
|
|
+ bottom: vw(10);
|
|
transform: rotate(180deg);
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
.icon4 {
|
|
.icon4 {
|
|
top: unset;
|
|
top: unset;
|
|
- bottom: 2px;
|
|
|
|
|
|
+ bottom: vw(10);
|
|
transform: rotate(-90deg);
|
|
transform: rotate(-90deg);
|
|
}
|
|
}
|
|
.flex {
|
|
.flex {
|
|
width: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
justify-content: flex-end;
|
|
|
|
+ margin-top: vw(-20);
|
|
}
|
|
}
|
|
.btn {
|
|
.btn {
|
|
- width: 125px;
|
|
|
|
- height: 50px;
|
|
|
|
|
|
+ width: vw(300);
|
|
|
|
+ height:vw(120);
|
|
background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn2.png') no-repeat;
|
|
background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn2.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
- margin-left: 20px;
|
|
|
|
|
|
+ margin-left: vw(20);
|
|
color: #edfaff;
|
|
color: #edfaff;
|
|
- //font-size: 32px;
|
|
|
|
.video-icon {
|
|
.video-icon {
|
|
- width: 20.5px;
|
|
|
|
- height: 19px;
|
|
|
|
|
|
+ width: vw(41);
|
|
|
|
+ height: vw(38);
|
|
background: url('@/assets/images/map/rightMenu/potentialFloodHazard/video.png') no-repeat;
|
|
background: url('@/assets/images/map/rightMenu/potentialFloodHazard/video.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
display: flex;
|