|
|
|
|
@ -263,6 +263,131 @@ onBeforeUnmount(() => { |
|
|
|
|
&.icon-zongxiaoliang { |
|
|
|
|
background-image: url("~@/assets/images/icon2.png"); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.icon-area, |
|
|
|
|
&.icon-town, |
|
|
|
|
&.icon-yield, |
|
|
|
|
&.icon-rate, |
|
|
|
|
&.icon-stack, |
|
|
|
|
&.icon-leaf, |
|
|
|
|
&.icon-risk { |
|
|
|
|
border: 1px solid rgba(48, 220, 255, 0.26); |
|
|
|
|
border-radius: 50%; |
|
|
|
|
background: |
|
|
|
|
radial-gradient(circle at 50% 50%, rgba(36, 246, 196, 0.2), rgba(48, 220, 255, 0.08) 54%, rgba(48, 220, 255, 0.02) 56%), |
|
|
|
|
linear-gradient(135deg, rgba(48, 220, 255, 0.16), rgba(36, 246, 196, 0.08)); |
|
|
|
|
box-shadow: |
|
|
|
|
inset 0 0 0 1px rgba(48, 220, 255, 0.08), |
|
|
|
|
0 0 12px rgba(48, 220, 255, 0.24); |
|
|
|
|
|
|
|
|
|
&::before, |
|
|
|
|
&::after { |
|
|
|
|
content: ""; |
|
|
|
|
position: absolute; |
|
|
|
|
pointer-events: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&::before { |
|
|
|
|
left: 11px; |
|
|
|
|
top: 11px; |
|
|
|
|
width: 20px; |
|
|
|
|
height: 20px; |
|
|
|
|
background: #30dcff; |
|
|
|
|
box-shadow: 0 0 10px rgba(48, 220, 255, 0.42); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&::after { |
|
|
|
|
left: 7px; |
|
|
|
|
top: 7px; |
|
|
|
|
width: 26px; |
|
|
|
|
height: 26px; |
|
|
|
|
border: 1px solid rgba(36, 246, 196, 0.28); |
|
|
|
|
border-radius: 50%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.icon-area::before { |
|
|
|
|
border: 2px solid #24f6c4; |
|
|
|
|
border-radius: 4px; |
|
|
|
|
background: transparent; |
|
|
|
|
clip-path: polygon(0 16%, 100% 0, 84% 100%, 0 82%); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.icon-town::before { |
|
|
|
|
left: 10px; |
|
|
|
|
top: 12px; |
|
|
|
|
width: 22px; |
|
|
|
|
height: 18px; |
|
|
|
|
background: #24f6c4; |
|
|
|
|
clip-path: polygon(0 100%, 0 45%, 22% 45%, 22% 22%, 48% 22%, 48% 0, 86% 0, 86% 100%); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.icon-yield::before, |
|
|
|
|
&.icon-leaf::before { |
|
|
|
|
left: 13px; |
|
|
|
|
top: 8px; |
|
|
|
|
width: 17px; |
|
|
|
|
height: 24px; |
|
|
|
|
border-radius: 16px 2px 16px 2px; |
|
|
|
|
background: #24f6c4; |
|
|
|
|
transform: rotate(-28deg); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.icon-yield::after, |
|
|
|
|
&.icon-leaf::after { |
|
|
|
|
left: 20px; |
|
|
|
|
top: 19px; |
|
|
|
|
width: 2px; |
|
|
|
|
height: 13px; |
|
|
|
|
border: 0; |
|
|
|
|
border-radius: 0; |
|
|
|
|
background: rgba(255, 224, 107, 0.88); |
|
|
|
|
transform: rotate(20deg); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.icon-rate::before { |
|
|
|
|
left: 10px; |
|
|
|
|
top: 20px; |
|
|
|
|
width: 22px; |
|
|
|
|
height: 12px; |
|
|
|
|
background: transparent; |
|
|
|
|
border-left: 3px solid #24f6c4; |
|
|
|
|
border-bottom: 3px solid #24f6c4; |
|
|
|
|
transform: skew(-18deg) rotate(-45deg); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.icon-stack::before { |
|
|
|
|
left: 11px; |
|
|
|
|
top: 10px; |
|
|
|
|
width: 20px; |
|
|
|
|
height: 22px; |
|
|
|
|
background: |
|
|
|
|
linear-gradient(#24f6c4 0 0) 0 0 / 100% 4px no-repeat, |
|
|
|
|
linear-gradient(#30dcff 0 0) 0 8px / 100% 4px no-repeat, |
|
|
|
|
linear-gradient(#ffe06b 0 0) 0 16px / 100% 4px no-repeat; |
|
|
|
|
box-shadow: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.icon-risk::before { |
|
|
|
|
left: 11px; |
|
|
|
|
top: 9px; |
|
|
|
|
width: 20px; |
|
|
|
|
height: 22px; |
|
|
|
|
background: #ffe06b; |
|
|
|
|
clip-path: polygon(50% 0, 100% 88%, 0 88%); |
|
|
|
|
box-shadow: 0 0 12px rgba(255, 224, 107, 0.38); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.icon-risk::after { |
|
|
|
|
left: 20px; |
|
|
|
|
top: 17px; |
|
|
|
|
width: 2px; |
|
|
|
|
height: 8px; |
|
|
|
|
border: 0; |
|
|
|
|
border-radius: 0; |
|
|
|
|
background: rgba(2, 16, 29, 0.88); |
|
|
|
|
box-shadow: 0 10px 0 rgba(2, 16, 29, 0.88); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&-title { |
|
|
|
|
.title-zh { |
|
|
|
|
|
