地图标记更改，地图路线详情显示，标签样式，搜索框内容间距，滚动条样式

shuishen

2022-03-07 a3f7347964b80ec3162f8af634d4d1c47378729b

地图标记更改，地图路线详情显示，标签样式，搜索框内容间距，滚动条样式

 public/img/navicon/add.png

 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


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

 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>

 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");

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

 src/styles/index.scss

@@ -1,6 +1,12 @@
html,
body {
    font-size: 16px;


    div {
        scrollbar-width: thin;
    }

}



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

 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;

        }
    }
}