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/leftMenu/sousuo.vue | 161 ++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 109 insertions(+), 52 deletions(-)
diff --git a/src/components/leftMenu/sousuo.vue b/src/components/leftMenu/sousuo.vue
index 6a81383..9e6d294 100644
--- a/src/components/leftMenu/sousuo.vue
+++ b/src/components/leftMenu/sousuo.vue
@@ -5,7 +5,10 @@
<span
@click="ssjmxs"
style="float: left; height: 100%; width: 80%; overflow: hidden"
- ><i class="el-icon-search" style="padding: 0px 15px 0px 20px"></i
+ ><i
+ class="el-icon-search"
+ style="padding: 0px 15px 0px 20px; font-size: 0.15rem"
+ ></i
>{{ syssval }}</span
>
<span
@@ -25,13 +28,9 @@
right: -3px;
"
>
- <img
- src="@/assets/img/navigation/addf.png"
- style="width: 20px"
- @click.stop="AddFavorite"
- />
+ <!-- <img src="@/assets/img/navigation/addf.png" style="width: 20px" @click.stop="AddFavorite" /> -->
</span>
- <span
+ <!-- <span
v-show="syssval == '璇疯緭鍏ュ叧閿瘝鎼滅储鍦板浘'"
style="float: right; height: 100%; width: 10%"
>
@@ -40,17 +39,13 @@
style="width: 20px"
@click.stop="showAddFavorite"
/>
- </span>
+ </span> -->
</div>
<!-- 鎼滅储鐣岄潰 -->
- <div class="ssjm" v-show="ssjm">
- <!-- 鎼滅储鐣岄潰椤堕儴 -->
- <div class="menutop">
- <div class="menutitle">鎼滅储</div>
- <div class="menuback" @click="cancless">鍏抽棴</div>
- </div>
+ <div class="ssjm" v-if="ssjm">
<!-- 鎼滅储妗� -->
- <div style="margin: 0.1rem 0">
+ <div class="search-container">
+ <div class="back" @click="cancless"></div>
<el-input
placeholder="杈撳叆鍏抽敭瀛楁悳绱㈠湴鍥�"
autofocus
@@ -66,11 +61,7 @@
:value="item.value"
></el-option>
</el-select>
- <el-button
- slot="append"
- icon="el-icon-search"
- @click="search"
- ></el-button>
+ <el-button slot="append" @click="search">鎼滅储</el-button>
</el-input>
</div>
<!-- 缁撴灉鏄剧ず -->
@@ -82,17 +73,12 @@
:key="index"
@click="flyTo(item)"
>
- <div style="margin: 0.05rem 0">
- <i class="el-icon-map-location"></i>{{ item.name }}
+ <div class="poiName" style="margin: 0.05rem 0">
+ <img src="@/assets/img/navigation/location.png" alt="" />
+ <span>{{ item.name }}</span>
</div>
- <div style="font-size: 0.12rem; color: black">
- <!-- <span>鍦板潃:{{ item.address ? item.address : "鏆傛棤璇︾粏鍦板潃" }}</span><br />
- <span>鐢佃瘽:{{ item.telphone ? item.telphone : "鏆傛棤鑱旂郴鏂瑰紡" }}</span> -->
- <!-- <span>鍖哄煙:{{ item.area ? item.area : "鏆傛棤鍖哄煙淇℃伅" }}</span> -->
- <!-- <br /> -->
- <span
- >鍦板潃:{{ item.address ? item.address : "鏆傛棤璇︾粏鍦板潃" }}</span
- >
+ <div class="addressBox">
+ <span>{{ item.address ? item.address : "鏆傛棤璇︾粏鍦板潃" }}</span>
</div>
</div>
</div>
@@ -104,25 +90,19 @@
</div>
</template>
<style scoped>
-/* 鎼滅储鎸夐挳鐨勬牱寮� */
-.iszd {
- position: absolute;
- left: 0.2rem;
- top: 0.3rem;
-}
/* 鎼滅储妗嗙殑鏍峰紡 */
.ssk {
position: absolute;
/* text-align: center; */
left: 2.5%;
- bottom: 0.2rem;
+ top: 0.15rem;
width: 95%;
border: 1px solid white;
height: 0.4rem;
line-height: 0.4rem;
background: #fff;
- border-radius: 0.2rem;
+ border-radius: 0.14rem;
color: black;
font-size: 0.14rem;
}
@@ -135,31 +115,109 @@
width: 100%;
height: 100%;
top: 0;
+ left: 0;
background-color: #f3f3f3;
- z-index: 99;
+ z-index: 1099;
+}
+.search-container {
+ /* background-color: #fff; */
+ background-color: #fff;
+ display: flex;
+ height: 52px;
+ align-items: center;
+}
+.back {
+ background: url("~@/assets/img/search/back.png") center center no-repeat;
+ background-size: 10px 17px;
+ height: 40px;
+ width: 50px;
+}
+
+.el-input {
+ width: 85%;
+ background-color: #eee;
+ border-radius: 13px;
+}
+.el-input /deep/ .el-input-group__append,
+.el-input /deep/ .el-input-group__prepend {
+ background-color: transparent;
+ border: none;
+}
+
+.el-input /deep/ .el-input__inner {
+ border: none;
+ font-weight: 500;
+ font-size: 0.14rem;
+ color: #3e3d3d;
}
.el-select {
- width: 80px;
+ width: 0.8rem;
+ position: relative;
+ font-size: 0.14rem;
+}
+.el-select:after {
+ content: "";
+ position: absolute;
+ right: 0;
+ height: 24px;
+ border-left: 1px solid #dcdcdc;
+ top: 50%;
+ transform: translateY(-50%);
+}
+.el-input /deep/ .el-input-group__append {
+ width: 50px;
+ padding-right: 25px;
+}
+.el-input /deep/ .el-input-group__append .el-button {
+ font-size: 0.14rem;
+ color: #ffffff;
+ background: #2477ff;
+ border-radius: 13px;
+ padding: 10px;
}
-/* 姣忔潯鎼滅储缁撴灉 */
-.everyinfo {
- color: #409eff;
- padding: 0.05rem;
- font-size: 0.16rem;
- border-bottom: 1px solid lightgray;
+.el-scrollbar .hover {
+ background: none;
}
+/*
+ 鎼滅储缁撴灉
+*/
.ssjg {
overflow-x: hidden;
overflow-y: scroll;
/* max-height: 4rem; */
- max-height: 80vh;
+ max-height: calc(98vh - 50px);
background: white;
padding: 0.2rem;
border-radius: 0.05rem;
}
+.ssjg .everyinfo {
+ color: #409eff;
+ padding: 0.05rem;
+ font-size: 0.16rem;
+ border-bottom: 1px solid lightgray;
+}
+.ssjg .poiName {
+ display: flex;
+ align-items: center;
+ height: 20px;
+}
+.ssjg .poiName img {
+ width: 20px;
+}
+.ssjg .poiName span {
+ margin-left: 7px;
+ line-height: 20px;
+}
+.ssjg .addressBox {
+ margin-left: 27px;
+ margin-top: 5px;
+ color: #000;
+ font-weight: 500;
+ font-size: 13px;
+}
.ssjg::-webkit-scrollbar {
/*婊氬姩鏉℃暣浣撴牱寮�*/
width: 8px;
@@ -184,7 +242,6 @@
}
</style>
-
<script>
let timers = null;
import axios from "axios";
@@ -206,7 +263,7 @@
showList: false,
total: 0,
poiList: [],
- select: "鍏ㄩ儴",
+ select: "POI",
options: [
{
label: "鍏ㄩ儴",
@@ -282,7 +339,7 @@
rectangle.maxy > 31.182515322 && (rectangle.maxy = 31.182515322);
return `RECT(${rectangle.minx} ${rectangle.miny},${rectangle.maxx} ${rectangle.maxy})`;
},
- getPoi() {
+ getGdPoi() {
axios
.get(common.poiserve, {
params: {
@@ -386,7 +443,7 @@
this.poiList = [];
switch (this.select) {
case "鍏ㄩ儴":
- this.getPoi();
+ this.getGdPoi();
this.getData();
// axios
// .all([
@@ -512,7 +569,7 @@
// );
break;
case "POI":
- this.getPoi();
+ this.getGdPoi();
break;
case "鍦板潡":
this.getData();
--
Gitblit v1.9.3