From f5233339920a59103d53e8efadc6f3f5d0b64f31 Mon Sep 17 00:00:00 2001
From: lixuliang <lixuliang_hd@126.com>
Date: 星期三, 08 五月 2024 14:45:37 +0800
Subject: [PATCH] 移动端
---
src/components/poplayer/history.vue | 113 ++++++++++++++++++++++++++++----------------------------
1 files changed, 57 insertions(+), 56 deletions(-)
diff --git a/src/components/poplayer/history.vue b/src/components/poplayer/history.vue
index 8519f2e..3d45518 100644
--- a/src/components/poplayer/history.vue
+++ b/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";
@@ -109,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;
@@ -128,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>
--
Gitblit v1.9.3