From a3f7347964b80ec3162f8af634d4d1c47378729b Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 07 Mar 2022 17:37:27 +0800
Subject: [PATCH] 地图标记更改，地图路线详情显示，标签样式，搜索框内容间距，滚动条样式
---
public/img/navicon/add.png | 0
src/components/campusNav/index.vue | 19 +++++
src/components/map/components/campusBuildingSearch.vue | 15 +++--
src/styles/divforms/divForms.scss | 16 ++++-
src/styles/pcpage/tool/sign.scss | 24 ++++---
src/components/map/components/mapPopup.vue | 31 ++++++++--
src/styles/index.scss | 6 ++
src/styles/pcpage/campus-nav.scss | 33 +++++++++-
src/pcviews/tool/sign.vue | 12 +---
9 files changed, 115 insertions(+), 41 deletions(-)
diff --git a/public/img/navicon/add.png b/public/img/navicon/add.png
new file mode 100644
index 0000000..8e08d26
--- /dev/null
+++ b/public/img/navicon/add.png
Binary files differ
diff --git a/src/components/campusNav/index.vue b/src/components/campusNav/index.vue
index 154acd8..ee06236 100644
--- a/src/components/campusNav/index.vue
+++ b/src/components/campusNav/index.vue
@@ -59,6 +59,12 @@
<el-button @click="startNavigation" type="primary">导航</el-button>
</div>
</div>
+
+ <div class="path-box" v-show="pathBoxShow">
+ <ul>
+ <li v-for="(item, index) in pathBoxList" :key="index">{{item.instruction}}</li>
+ </ul>
+ </div>
</template>
</public-box>
</template>
@@ -87,6 +93,9 @@
butChouse: '',
startLayer: null,
endLayer: null,
+
+ pathBoxShow: false,
+ pathBoxList: [],
isOverRouter: false // 是否启用了导航
}
@@ -201,7 +210,7 @@
tooltip.enable = true
let title = ''
if (val == 'start') {
- title = '点击放置起点'
+ title = '点击选择起点'
// 初始化图标图层
if (this.startLayer == null) {
this.startLayer = new this.DC.VectorLayer('startLayer')
@@ -210,7 +219,7 @@
this.startLayer.clear()
}
} else if (val == 'end') {
- title = '点击放置终点'
+ title = '点击选择终点'
// 初始化图标图层
if (this.endLayer == null) {
this.endLayer = new this.DC.VectorLayer('endLayer')
@@ -386,7 +395,11 @@
})
}
+ this.pathBoxList = []
+
res.data.route.paths[0].steps.forEach((item) => {
+ this.pathBoxList.push({ instruction: item.instruction, orientation: item.orientation, action: item.action })
+
item.polyline = item.polyline.split(';')
var lineArr = []
@@ -405,6 +418,8 @@
routes += lineArr
})
+ this.pathBoxShow = true
+
routes =
startLog + ',' + startLat + ';' + routes + endLog + ',' + endLat
diff --git a/src/components/map/components/campusBuildingSearch.vue b/src/components/map/components/campusBuildingSearch.vue
index f0c0af6..1d747bf 100644
--- a/src/components/map/components/campusBuildingSearch.vue
+++ b/src/components/map/components/campusBuildingSearch.vue
@@ -386,7 +386,7 @@
}
.map-campus-shortcut {
- margin-top: 20px;
+ margin-top: 40px;
width: 100%;
// height: 330px;
height: auto;
@@ -394,19 +394,18 @@
border-radius: 5px;
.shortcut-box {
- padding-top: 36px;
height: auto;
ul {
display: flex;
width: 100%;
height: auto;
- justify-content: flex-start;
+ // justify-content: space-around;
flex-wrap: wrap;
li {
- margin: 0 13px;
- width: 84px;
- height: 76px;
+ margin: 22.5px 0 0 22.5px;
+ width: 80px;
+ height: 70px;
.el-button {
width: 80px;
@@ -440,6 +439,10 @@
border: 1px solid #000;
}
}
+
+ li:last-child {
+ margin-bottom: 22.5px;
+ }
}
}
}
diff --git a/src/components/map/components/mapPopup.vue b/src/components/map/components/mapPopup.vue
index a9c7f5f..c11d181 100644
--- a/src/components/map/components/mapPopup.vue
+++ b/src/components/map/components/mapPopup.vue
@@ -297,7 +297,7 @@
</div>
<!-- 新增编辑标签 -->
- <div v-if="addIconsLayerIconPopup" class="monitor-dom" id="leftNavsAdd">
+ <div v-if="addIconsLayerIconPopup" class="monitor-dom add-sign-box-style" id="leftNavsAdd">
<div style="width: 100%; height: 100%">
<div class="divForms divForms-theme">
<div class="divForms-wrap">
@@ -316,10 +316,6 @@
class="addIconFromInput"
>
<template slot="prepend">标题:</template>
- <i
- slot="suffix"
- class="el-icon-edit el-input__icon addIconFromInputicon"
- ></i>
</el-input>
<img
@click="closeaddIconsLayerIconPopup"
@@ -1144,9 +1140,32 @@
}
</script>
-<style>
+<style lang="scss">
.labelLayeridewm {
width: 250px !important;
height: 250px !important;
}
+
+.add-sign-box-style {
+ input:-moz-placeholder,
+ textarea:-moz-placeholder {
+ color: #fff;
+ }
+ input:-ms-input-placeholder,
+ textarea:-ms-input-placeholder {
+ color: #fff;
+ }
+ input::-webkit-input-placeholder,
+ textarea::-webkit-input-placeholder {
+ color: #fff;
+ }
+
+ .addIconsLayerinimgs {
+ margin-top: 4px;
+ }
+
+ .addIconsLayerin {
+ padding: 0 10px;
+ }
+}
</style>
diff --git a/src/pcviews/tool/sign.vue b/src/pcviews/tool/sign.vue
index dbfd369..0862603 100644
--- a/src/pcviews/tool/sign.vue
+++ b/src/pcviews/tool/sign.vue
@@ -5,6 +5,7 @@
<img class="icon deblurring" src="/img/icon/tool-sign.png" alt />
<span>地图标记</span>
</div>
+ <img class="btn-box" @click.stop="addSign" src="/img/navicon/add.png" alt />
<img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
</template>
<template slot="public-box-content">
@@ -26,15 +27,6 @@
<img src="/img/icon/no-data.png" alt />
<div>暂无数据</div>
</div>
- </div>
- <div class="btn-box">
- <el-button type="primary" size="mini" @click.stop="addSign">新增</el-button>
- </div>
- <div>
- <img
- src=""/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAFeAV4DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6er…sf2r7P5P76OTdt8zd9xjjG5evrXsFFFABXj/x08E+IvGP9g/2Bp/2z7L9o8799HHt3eXt++wzna3T0r2CigD5A/wCFJfEP/oXv/J23/wDjlfR/xS0TUfEfw41bSdJt/tF9P5Plxb1TdtmRjyxAHAJ5NdhRQB4/8C/BPiLwd/b39v6f9j+1fZ/J/fRybtvmbvuMcY3L19a5D4pfC3xl4j+I+ratpOjfaLGfyfLl+1Qpu2wop4ZwRyCORX0fRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAH//2Q==""
- alt
- />
</div>
</template>
</public-box>
@@ -96,6 +88,7 @@
deleteIcon (id) {
const that = this
deletelabel(id).then((res) => {
+ console.log(res)
if (res.data.code == 200) {
that.$message({
message: '删除标签成功',
@@ -113,6 +106,7 @@
getData () {
const that = this
getlabel().then((res) => {
+ console.log(res)
const data = res.data.data.records
that.signList = data
// that.$store.commit("clearLabelLayerIcon");
diff --git a/src/styles/divforms/divForms.scss b/src/styles/divforms/divForms.scss
index d242196..76073ff 100644
--- a/src/styles/divforms/divForms.scss
+++ b/src/styles/divforms/divForms.scss
@@ -214,7 +214,7 @@
height: 120px;
text-align: center;
- & > div {
+ &>div {
line-height: 48px;
}
}
@@ -227,41 +227,49 @@
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
+
.addIconsLayerin {
margin: 5px 0;
background-color: #29baf1;
+
.el-icon--right {
color: #fff !important;
}
}
}
+
.addIconsLayerBut {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 5px 0;
+
.el-button--primary {
background-color: #29baf1 !important;
border: 1px solid #29baf1 !important;
}
}
+
.addIconFromInput {
width: 90%;
background-color: transparent !important;
color: #fff !important;
+
input {
background-color: transparent !important;
color: #fff !important;
border: 1px solid transparent !important;
- border-bottom: 2px solid #fff !important;
+
&::-webkit-input-placeholder {
color: #0378d6;
}
}
+
.addIconFromInputicon {
color: #fff !important;
}
+
.el-input-group__prepend {
padding-left: 5px;
width: 60px !important;
@@ -276,8 +284,10 @@
.el-dropdown-menu.el-popper {
background-color: #29baf1 !important;
border: 1px solid #29baf1 !important;
+
li {
color: #fff !important;
+
&:hover {
color: #0378d6 !important;
background-color: #fff !important;
@@ -297,4 +307,4 @@
.isOverImgs .el-upload--picture-card {
display: none;
-}
+}
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4669ec8..b1524c5 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,6 +1,12 @@
html,
body {
font-size: 16px;
+
+
+ div {
+ scrollbar-width: thin;
+ }
+
}
diff --git a/src/styles/pcpage/campus-nav.scss b/src/styles/pcpage/campus-nav.scss
index 79979d6..1f50dd4 100644
--- a/src/styles/pcpage/campus-nav.scss
+++ b/src/styles/pcpage/campus-nav.scss
@@ -3,7 +3,8 @@
top: 20%;
left: 20%;
width: 320px;
- height: 186px;
+ min-height: 186px;
+ max-height: 546px;
z-index: 99;
color: #fff;
background: #fff;
@@ -117,19 +118,19 @@
align-items: center;
height: calc(100% - 44px);
- & > div:nth-child(1) {
+ &>div:nth-child(1) {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
- & > div {
+ &>div {
flex: 1;
line-height: 53px;
}
}
- & > div:nth-child(2) {
+ &>div:nth-child(2) {
width: 100px;
text-align: center;
}
@@ -167,13 +168,35 @@
top: 100px;
}
}
+
+ .path-box {
+ margin: 2.5px 10px 9px 10px;
+ height: auto;
+ box-sizing: border-box;
+ overflow-y: auto;
+ color: #000;
+ border-radius: 8px;
+ box-shadow: 0 0 4px 1px #dddddd;
+
+ li {
+ padding: 0 10px;
+ height: 36px;
+ line-height: 36px;
+
+ }
+
+ }
+
}
+
}
+
.el-input-group__prepend {
cursor: pointer;
+
&:hover {
.mydingwei.el-icon-location {
font-size: 25px;
}
}
-}
+}
\ No newline at end of file
diff --git a/src/styles/pcpage/tool/sign.scss b/src/styles/pcpage/tool/sign.scss
index 7fdebc1..78d931a 100644
--- a/src/styles/pcpage/tool/sign.scss
+++ b/src/styles/pcpage/tool/sign.scss
@@ -33,6 +33,18 @@
}
}
+ .btn-box {
+ position: absolute;
+ right: 26px;
+ top: 0;
+ left: auto;
+ bottom: 0;
+ margin: auto;
+ width: 14px;
+ height: 14px;
+ cursor: pointer;
+ }
+
.close {
position: absolute;
right: 6px;
@@ -54,7 +66,7 @@
.list-box {
position: absolute;
width: 100%;
- height: calc(100% - 40px);
+ height: 100%;
ul {
padding: 6px 8px;
@@ -67,7 +79,7 @@
position: relative;
border-bottom: 1px dashed #ccc;
line-height: 40px;
-
+ cursor: pointer;
&>img {
margin: 0 4px;
@@ -109,14 +121,6 @@
}
}
- .btn-box {
- position: absolute;
- bottom: 0;
- width: 100%;
- height: 40px;
- line-height: 40px;
- text-align: center;
- }
}
}
\ No newline at end of file
--
Gitblit v1.9.3