From 199424032632105b571933d5049d9423c936a28a Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期四, 02 三月 2023 18:26:09 +0800
Subject: [PATCH] 综合展示图例修改
---
src/components/mapsdk.vue | 81 +++++++++++++++++++++++-----------------
1 files changed, 47 insertions(+), 34 deletions(-)
diff --git a/src/components/mapsdk.vue b/src/components/mapsdk.vue
index 098015f..ce5fc51 100644
--- a/src/components/mapsdk.vue
+++ b/src/components/mapsdk.vue
@@ -327,31 +327,47 @@
</div> -->
<div class="lengendBox">
- <div class="lengendSpan">
- <div style="left:10px">0掳</div>
- <div style="align-self: flex-end;left:10px; position: absolute;
- bottom: 8%; ">70掳</div>
+
+ <div>
+ <img
+ class="lengendImg"
+ src="../assets/img/colors.png"
+ />
</div>
- <div
- class="lengend_color"
- style="height:205px; width:30px "
- ></div>
+ <div class="lengendSpan">
+ <div>0掳</div>
+ <div>17.5掳</div>
+ <div>35掳</div>
+ <div>52.5掳</div>
+ <div>70掳</div>
+ </div>
+
</div>
</el-card>
</div>
- <div class="propertiesPop" v-if="$store.state.propertiesFlag == '1'">
+ <div
+ class="propertiesPop"
+ v-if="$store.state.propertiesFlag == '1'"
+ >
<el-card class="box-card">
<div slot="header">
<span>{{$store.state.propertiesName}}</span>
<div style="float: right; cursor: pointer">
<i
- class="el-icon-close"
- @click="closeBufferBox(6)"
+ class="el-icon-close"
+ @click="closeBufferBox(6)"
></i>
</div>
</div>
- <div class="pointInfoBoxContext" style="height:250px;overflow-y: auto">
- <div style="line-height: 20px" v-for="(value, key) in $store.state.propertiesInfo" :key="key">
+ <div
+ class="pointInfoBoxContext"
+ style="height:250px;overflow-y: auto"
+ >
+ <div
+ style="line-height: 20px"
+ v-for="(value, key) in $store.state.propertiesInfo"
+ :key="key"
+ >
<span style="font-size: 14px;font-weight: bold;margin-right: 5px">{{key}}:</span>
<span>{{value}}</span>
</div>
@@ -1103,14 +1119,14 @@
right: 8%;
bottom: 1%;
}
- .propertiesPop{
+ .propertiesPop {
width: 350px;
height: 370px;
z-index: 40;
position: absolute;
right: 8%;
bottom: 1%;
- /deep/ .el-card__header{
+ /deep/ .el-card__header {
padding: 10px 20px;
}
/deep/ .el-card__body {
@@ -1158,32 +1174,29 @@
position: absolute;
z-index: 40;
}
- .lengend {
- width: 80px;
+ .lengend {
+ width: 300px;
z-index: 40;
position: absolute;
- right: 8%;
- bottom: 1%;
+ right: 1%;
+ bottom: 13%;
+ transform: rotate(90deg);
.lengendBox {
- width: 100%;
- height: 100%;
- display: flex;
.lengendSpan {
- flex-direction: column;
- align-items: center;
+ display: flex;
justify-content: space-between;
+ margin-top: 10px;
+ div {
+ transform: rotate(-90deg);
+ }
}
- .lengend_color {
- background-image: linear-gradient(
- #0055ff,
- #2448da,
- #483cb6,
- #6d3091,
- #91246d,
- #b61848,
- #da0c24
- );
+ .lengendImg {
+ -ms-transform: rotate(180deg); /* IE 9 */
+ -webkit-transform: rotate(180deg); /* Safari and Chrome */
+ transform: rotate(180deg);
+ width: 100%;
+ height: 30px;
}
}
}
--
Gitblit v1.9.3