|
@@ -77,20 +77,31 @@
|
|
|
<div class="comprehensive-analysis-infobox">
|
|
|
当前显示的疑点数 : <span>{{ currentTotal }}</span>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="comprehensive-analysis-leftjuanlianInfo"
|
|
|
- :style="basemap == 1 ? 'color:#e6a23c' : 'color:#303133'"
|
|
|
- @click="changeBase(1)"
|
|
|
- >
|
|
|
- {{ basemapName }}
|
|
|
+ <div class="comprehensive-analysis-leftjuanlianInfo" @click="changeBase(1)">
|
|
|
+ <div class="top"></div>
|
|
|
+ <div class="bottom"></div>
|
|
|
+ <div class="mapTitle">
|
|
|
+ <div>
|
|
|
+ <div></div>
|
|
|
+ <div></div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ <div></div>
|
|
|
+ <div :class="basemap == 1 ? 'mapTitlective' : 'unMapTitlective'">{{ basemapName }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="comprehensive-analysis-rightjuanlianInfo"
|
|
|
- :style="basemap == 2 ? 'color:#e6a23c' : 'color:#303133'"
|
|
|
- v-show="showJLInfo"
|
|
|
- @click="changeBase(2)"
|
|
|
- >
|
|
|
- {{ basemapName2 }}
|
|
|
+ <div class="comprehensive-analysis-rightjuanlianInfo" v-show="showJLInfo" @click="changeBase(2)">
|
|
|
+ <div class="top"></div>
|
|
|
+ <div class="bottom"></div>
|
|
|
+ <div class="mapTitle">
|
|
|
+ <div>
|
|
|
+ <div></div>
|
|
|
+ <div></div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ <div></div>
|
|
|
+ <div :class="basemap == 2 ? 'mapTitlective' : 'unMapTitlective'">{{ basemapName2 }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 属性弹窗 -->
|
|
|
<AttributePopup
|
|
@@ -2384,7 +2395,8 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
-@commonBorderColor: rgb(0, 170, 255);
|
|
|
+@commonBorderColor: #00aaff64;
|
|
|
+@mapTitleBgColor: #00476b;
|
|
|
.comprehensive-analysis {
|
|
|
&-law-popup {
|
|
|
position: fixed;
|
|
@@ -2454,41 +2466,157 @@ export default {
|
|
|
|
|
|
&-leftjuanlianInfo {
|
|
|
position: absolute;
|
|
|
- border: none;
|
|
|
- left: 0.5%;
|
|
|
+ width: 250px;
|
|
|
+ border-left: 5px solid #2fb8ff;
|
|
|
+ left: 0px;
|
|
|
top: 15px;
|
|
|
pointer-events: auto;
|
|
|
color: #e6a23c;
|
|
|
font-size: 20px;
|
|
|
- background-color: #ffffff;
|
|
|
+ background-image: linear-gradient(90deg, @mapTitleBgColor, #00000000);
|
|
|
padding: 5px 10px;
|
|
|
- border-radius: 5px;
|
|
|
-moz-user-select: none;
|
|
|
-webkit-user-select: none;
|
|
|
-ms-user-select: none;
|
|
|
-khtml-user-select: none;
|
|
|
user-select: none;
|
|
|
- text-shadow: 1px 1px #000000;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+ &-leftjuanlianInfo .top {
|
|
|
+ position: absolute;
|
|
|
+ height: 3px;
|
|
|
+ left: -5px;
|
|
|
+ width: 100%;
|
|
|
+ top: -6px;
|
|
|
+ background-image: linear-gradient(90deg, @mapTitleBgColor, #00000000);
|
|
|
+ border-left: 5px solid #2fb8ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-leftjuanlianInfo .bottom {
|
|
|
+ position: absolute;
|
|
|
+ height: 3px;
|
|
|
+ left: -5px;
|
|
|
+ width: 100%;
|
|
|
+ bottom: -6px;
|
|
|
+ background-image: linear-gradient(90deg, @mapTitleBgColor, #00000000);
|
|
|
+ border-left: 5px solid #2fb8ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-leftjuanlianInfo .mapTitle {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+ & > div:nth-child(1) {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-content: space-around;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ align-items: center;
|
|
|
+ & div {
|
|
|
+ width: 3px;
|
|
|
+ height: 3px;
|
|
|
+ background-color: #2fb8ff;
|
|
|
+ transform: rotate(45deg);
|
|
|
+ margin: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & > div:nth-child(2) {
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ background-color: #2fb8ff;
|
|
|
+ transform: rotate(45deg);
|
|
|
+ margin: 6px;
|
|
|
+ }
|
|
|
+ & > div:nth-child(3) {
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: pingfangSC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-rightjuanlianInfo .mapTitle {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row-reverse;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+ & > div:nth-child(1) {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-content: space-around;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ align-items: center;
|
|
|
+ & div {
|
|
|
+ width: 3px;
|
|
|
+ height: 3px;
|
|
|
+ background-color: #2fb8ff;
|
|
|
+ transform: rotate(45deg);
|
|
|
+ margin: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & > div:nth-child(2) {
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ background-color: #2fb8ff;
|
|
|
+ transform: rotate(45deg);
|
|
|
+ margin: 6px;
|
|
|
+ }
|
|
|
+ & > div:nth-child(3) {
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: pingfangSC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .unMapTitlective {
|
|
|
+ color: #2fb8ff;
|
|
|
+ }
|
|
|
+ .mapTitlective {
|
|
|
+ background-image: linear-gradient(0deg, #33eeff, #ffffff);
|
|
|
+ text-shadow: 0 0 5px #fff;
|
|
|
+ background-clip: text;
|
|
|
+ color: transparent;
|
|
|
+ }
|
|
|
+ &-rightjuanlianInfo .top {
|
|
|
+ position: absolute;
|
|
|
+ height: 3px;
|
|
|
+ right: -5px;
|
|
|
+ width: 100%;
|
|
|
+ top: -6px;
|
|
|
+ background-image: linear-gradient(-90deg, @mapTitleBgColor, #00000000);
|
|
|
+ border-right: 5px solid #2fb8ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-rightjuanlianInfo .bottom {
|
|
|
+ position: absolute;
|
|
|
+ height: 3px;
|
|
|
+ right: -5px;
|
|
|
+ width: 100%;
|
|
|
+ bottom: -6px;
|
|
|
+ background-image: linear-gradient(-90deg, @mapTitleBgColor, #00000000);
|
|
|
+ border-right: 5px solid #2fb8ff;
|
|
|
+ }
|
|
|
|
|
|
&-rightjuanlianInfo {
|
|
|
position: absolute;
|
|
|
- border: none;
|
|
|
- right: 0.5%;
|
|
|
+ width: 250px;
|
|
|
+ border-right: 5px solid #2fb8ff;
|
|
|
+ right: 0;
|
|
|
top: 15px;
|
|
|
pointer-events: auto;
|
|
|
color: #303133;
|
|
|
font-size: 20px;
|
|
|
- background-color: #ffffff;
|
|
|
+ background-image: linear-gradient(-90deg, @mapTitleBgColor, #00000000);
|
|
|
padding: 5px 10px;
|
|
|
- border-radius: 5px;
|
|
|
-moz-user-select: none;
|
|
|
-webkit-user-select: none;
|
|
|
-ms-user-select: none;
|
|
|
-khtml-user-select: none;
|
|
|
user-select: none;
|
|
|
- text-shadow: 1px 1px #000000;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
@@ -2592,10 +2720,12 @@ export default {
|
|
|
color: #fff;
|
|
|
border-radius: 3px;
|
|
|
position: absolute;
|
|
|
- left: 160px;
|
|
|
- top: 15px;
|
|
|
+ left: 15px;
|
|
|
+ bottom: 15px;
|
|
|
pointer-events: auto;
|
|
|
+ transition: 0.6s;
|
|
|
cursor: pointer;
|
|
|
+ z-index: 999;
|
|
|
.left-arrow {
|
|
|
width: 7px;
|
|
|
height: 7px;
|
|
@@ -2613,6 +2743,9 @@ export default {
|
|
|
position: absolute;
|
|
|
left: 34px;
|
|
|
}
|
|
|
+ &:hover {
|
|
|
+ background: #00aaff;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
&-legendbox {
|