移动端

lixuliang

2024-05-08 f5233339920a59103d53e8efadc6f3f5d0b64f31

 src/components/poplayer/history.vue

@@ -1,27 +1,26 @@
<template>
  <div class="historyBox">
    <div class="leftBox">
      <div id="mapContainer" class="mapLeft"></div>
      <!-- <div class="colseBtn">
        <img class="searchBtn" src="@/assets/closeinput1.png" />
      </div> -->
      <div class="listBox">
        <ul>
          <li
            v-for="(item, index) in arr"
            :key="index"
            @click="changeLeftMap(item, index)"
            :class="{ active: currentIndex1 == index }"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    <div id="mapContainer" class="mapLeft"></div>
    <div class="closeWrapper" @click="close(false)">
      <img class="colseBtn" src="@/assets/closeinput1.png" />
    </div>
    <div class="listBox">
      <ul>
        <li
          v-for="(item, index) in arr"
          :key="index"
          @click="changeLeftMap(item, index)"
          :class="{ active: currentIndex1 == index }"
        >
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import store from "@/utils/store.js";
import mapType from "@/utils/maptype";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
@@ -33,6 +32,7 @@
let view = new View({
  center: olProj.fromLonLat([4.606512, 2.621472]),
  zoom: 13,
  enableRotation: false,
});
var topResolution = 896.0859375;
var resolutions = [];
@@ -108,6 +108,9 @@
      this.tileLayer1.setSource(this.mapList.find((e) => e.id == item).value);
      this.currentIndex1 = index;
    },
    close(val) {
      store.setHistoryShow(val);
    },
    // changeRightMap(item, index) {
    //   this.tileLayer2.setSource(this.mapList.find((e) => e.id == item).value);
    //   this.currentIndex2 = index;
@@ -127,56 +130,55 @@
<style scoped>
.historyBox {
  position: absolute;
  z-index: 2;
  z-index: 20;
  width: 100%;
  height: 100%;
  background-color: #fff;
  margin-top: 0.43rem;
  height: calc(100% - 0.43rem);
  display: flex;
}
.colseBtn {
  position: absolute;
  top: 10vh;
  left: 0;
}
.leftBox {
  position: relative;
  width: 100%;
}
.rightBox {
  position: relative;
  width: 50%;
}
.listBox {
  position: absolute;
  right: 20px;
  bottom: 10px;
  background-color: #373737;
}
.listBox li {
  padding: 2px;
  border: 1px solid #000;
  color: white;
}
.listBox li:hover {
  background-color: #00e1ff;
}
.mapLeft {
  width: 100% !important;
  float: left;
  position: absolute;
  height: 100%;
  background-color: #fff;
}
.mapRight {
  width: 100% !important;
  float: right;
.closeWrapper {
  position: absolute;
  height: 100%;
  background-color: #fff;
  top: 20px;
  right: 9px;
}
.active {
  background-color: #4590d7;
.colseBtn {
  width: 0.4rem;
  /* height: 40px; */
}

.listBox {
  position: absolute;
  right: 10px;
  bottom: 18px;
  width: 48px;
  background: #ffffff;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.21);
  border-radius: 13px;
}
.listBox ul {
  margin-top: 3px;
}
.listBox li {
  font-weight: bold;
  font-size: 0.12rem;
  line-height: 0.25rem;
  color: #1c222f;
  border-bottom: 1px solid #e5e5e5;
  text-align: center;
}
.listBox li:last-child {
  border: none;
}
.listBox li:hover {
  color: #127dff;
}

.listBox .active {
  color: #127dff;
}
</style>