综合展示图例修改

Surpriseplus

2023-03-02 199424032632105b571933d5049d9423c936a28a

综合展示图例修改

 src/assets/img/colors.png

 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;
        }
      }
    }