部分公用代码提取，导航路线的逻辑优化

shuishen

2022-02-15 ff7b7d4b3e46f943b46efda7aba309b7a818929a

部分公用代码提取，导航路线的逻辑优化

 src/components/arcNavBar/index.vue

@@ -1,33 +1,31 @@
<template>
    <div class="public-org-nav-bar" ref="publicOrgNavBar">
        <div class="container">
            <div class="header" @mousedown="move" :class="{'move': moveFlag}">
                <div class="title">
                    <img class="icon deblurring" src="/img/icon/xyjz.png" alt />
                    <span>{{arcNavBarTitle}}</span>
                </div>
                <img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
    <public-box class="public-org-nav-bar">
        <template slot="public-box-header">
            <div class="title">
                <img class="icon deblurring" src="/img/icon/xyjz.png" alt />
                <span>{{arcNavBarTitle}}</span>
            </div>
            <div class="content">
                <div class="tab" v-show="false">
                    <ul>
                        <li
                            :class="{'on': item.flag}"
                            v-for="(item, index) in titleList"
                            :key="index"
                            @click="topNavClick(item, index)"
                        >{{ item.title }}</li>
                    </ul>
                </div>
            <img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
        </template>
        <template slot="public-box-content">
            <div class="tab" v-show="false">
                <ul>
                    <li v-for="(item, index) in itemNavList" :key="index" @click="mapPopup(item)">
                        <img :src="item.icon" alt />
                        <span>{{item.navTitle}}</span>
                    </li>
                    <li
                        :class="{'on': item.flag}"
                        v-for="(item, index) in titleList"
                        :key="index"
                        @click="topNavClick(item, index)"
                    >{{ item.title }}</li>
                </ul>
            </div>
        </div>
    </div>
            <ul>
                <li v-for="(item, index) in itemNavList" :key="index" @click="mapPopup(item)">
                    <img :src="item.icon" alt />
                    <span>{{item.navTitle}}</span>
                </li>
            </ul>
        </template>
    </public-box>
</template>

<script>
@@ -38,7 +36,6 @@
    name: 'ArcNavBar',
    data () {
        return {
            moveFlag: false,
            itemNavList: [],
            titleList: [],
            DC: null
@@ -90,53 +87,6 @@
        }
    },
    methods: {
        move (e) {
            const that = this
            const odiv = this.$refs.publicOrgNavBar // 获取目标元素
            // 算出鼠标相对元素的位置
            const disX = e.clientX - odiv.offsetLeft
            const disY = e.clientY - odiv.offsetTop

            const disH = odiv.offsetHeight
            const disW = odiv.offsetWidth

            document.onmousemove = (e) => {
                that.moveFlag = true
                // 鼠标按下并移动的事件
                // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - disX
                let top = e.clientY - disY

                // 绑定元素位置到positionX和positionY上面

                if (left >= window.innerWidth - disW) {
                    left = window.innerWidth - disW
                }

                if (left <= 0) {
                    left = 0
                }

                if (top >= window.innerHeight - disH) {
                    top = window.innerHeight - disH
                }

                if (top <= 60) {
                    top = 60
                }

                // 移动当前元素
                odiv.style.left = (left) + 'px'
                odiv.style.top = (top) + 'px'
                odiv.style.bottom = 'auto'
            }
            document.onmouseup = (e) => {
                that.moveFlag = false
                document.onmousemove = null
                document.onmouseup = null
            }
        },

        topNavClick (item, index) {
            this.titleList.forEach(item => {
                item.flag = false
@@ -235,137 +185,4 @@
</script>

<style scoped lang='scss'>
.public-org-nav-bar {
    position: fixed;
    width: 322px;
    height: auto;
    border-radius: 8px;
    top: 140px;
    left: 140px;
    background-color: transparent;
    z-index: 99;
    font-size: 14px;
    .container {
        .header {
            position: relative;
            border-radius: 8px 8px 0 0;
            width: 100%;
            height: 36px;
            line-height: 36px;
            background: rgba(0, 131, 176, 0.7); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

            .title {
                padding-left: 10px;
                img {
                    width: 20px;
                    height: 20px;
                    vertical-align: middle;
                }
                span {
                    margin-left: 6px;
                    display: inline-block;
                    vertical-align: middle;
                    color: #fff;
                }
            }
            .close {
                position: absolute;
                right: 6px;
                top: 0;
                left: auto;
                bottom: 0;
                margin: auto;
                width: 14px;
                height: 14px;
                cursor: pointer;
            }
        }
        .move {
            cursor: move;
        }
        .content {
            clear: both;
            width: 100%;
            height: 440px;
            margin-top: 0px;
            text-align: center;
            overflow-y: auto;
            background: rgba(0, 131, 176, 0.7); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            border-radius: 0 0 8px 8px;

            .tab {
                height: 42px;
                border-bottom: 1px solid #ccc;
                ul {
                    display: flex;
                    padding: 0;
                    li {
                        padding: 0;
                        flex: 1;
                        height: 42px;
                        line-height: 42px;
                        color: #fff;
                        text-align: center;
                        border: none;
                        cursor: pointer;
                    }

                    li.on {
                        border-bottom: 1px solid yellow;
                        color: yellow;
                    }
                }
            }
            ul {
                padding: 15px;
                padding-top: 4px;
                li {
                    padding-left: 24px;
                    position: relative;
                    height: 40px;
                    line-height: 40px;
                    list-style: none;
                    border-bottom: 1px dashed #ccc;
                    text-align: left;
                    img {
                        position: absolute;
                        left: 0;
                        right: auto;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        width: 14px;
                    }
                    span {
                        color: #fff;
                        cursor: pointer;
                    }
                    span:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}
</style>

 src/components/campusNav/index.vue

@@ -1,83 +1,66 @@
<template>
    <div class="campus-nav-box"
         ref="campusNavBox">
        <div class="header"
             @mousedown="move"
             :class="{'move': moveFlag}">
    <tool-small-box class="campus-nav-box">
        <template slot="tool-small-box-header">
            <div class="title">
                <img class="icon deblurring"
                     src="/img/icon/xndh.png"
                     alt="">
                <span>
                    社区内导航
                </span>
                <img class="icon deblurring" src="/img/icon/xndh.png" alt />
                <span>社区内导航</span>
            </div>
            <img class="close"
                 src="/img/navicon/close.png"
                 alt=""
                 @click="closeModel">
        </div>
        <div class="container">
            <img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
        </template>
        <template slot="tool-small-box-content">
            <div class="tab">
                <ul>
                    <li @click="tabClick('步行')"
                        :class="{on:tabOneFlag}">
                    <li @click="tabClick('步行')" :class="{on:tabOneFlag}">
                        <i></i>
                        步行
                    </li>
                    <li @click="tabClick('驾车')"
                        :class="{on:tabTwoFlag}">
                    <li @click="tabClick('驾车')" :class="{on:tabTwoFlag}">
                        <i></i>
                        驾车
                    </li>
                </ul>
            </div>
            <div class="content">
            <div class="container">
                <div>
                    <div id="ToNameContainer">
                        <el-input v-model="toNameText"
                                  @input="toNameChange"
                                  placeholder="起点……">
                            <template slot="prepend"><i class="el-icon-location"
                                   style="color: green;"></i></template>
                        <el-input v-model="toNameText" @input="toNameChange" placeholder="起点……">
                            <template slot="prepend">
                                <i class="el-icon-location" style="color: green;"></i>
                            </template>
                        </el-input>
                        <div v-show="toNameShow"
                             class="toname-value-box">
                        <div v-show="toNameShow" class="toname-value-box">
                            <ul>
                                <li v-for="(item, index) in toNameList"
                                <li
                                    v-for="(item, index) in toNameList"
                                    :key="index"
                                    @click="originChange(item)">
                                    {{item.mechanismname}}
                                </li>
                                    @click="originChange(item)"
                                >{{item.mechanismname}}</li>
                            </ul>
                        </div>
                    </div>
                    <div id="ComeNameContainer">
                        <el-input v-model="comeNameText"
                                  @input="comeNameChange"
                                  placeholder="终点……">
                            <template slot="prepend"><i class="el-icon-location"
                                   style="color: red;"></i></template>
                        <el-input v-model="comeNameText" @input="comeNameChange" placeholder="终点……">
                            <template slot="prepend">
                                <i class="el-icon-location" style="color: red;"></i>
                            </template>
                        </el-input>
                        <div v-show="comeNameShow"
                             class="comename-value-box">
                        <div v-show="comeNameShow" class="comename-value-box">
                            <ul>
                                <li v-for="(item, index) in comeNameList"
                                <li
                                    v-for="(item, index) in comeNameList"
                                    :key="index"
                                    @click="terminusChange(item)">
                                    {{item.mechanismname}}
                                </li>
                                    @click="terminusChange(item)"
                                >{{item.mechanismname}}</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div>
                    <el-button @click="startNavigation"
                               type="primary">导航</el-button>
                    <el-button @click="startNavigation" type="primary">导航</el-button>
                </div>
            </div>
        </div>
    </div>
        </template>
    </tool-small-box>
</template>

<script>
@@ -88,7 +71,6 @@
    name: 'campusNav',
    data () {
        return {
            moveFlag: false,
            tabOneFlag: true,
            tabTwoFlag: false,
            DC: null,
@@ -116,7 +98,8 @@
            // 到达名称
            'comeName',
            // 点信息
            'pointPosition'
            'pointPosition',
            'campusNavFlag'
        ])
    },
    watch: {
@@ -131,59 +114,22 @@
            handler (newCode, oldCode) {
                this.comeNameText = newCode
            }
        },
        campusNavFlag: {
            immediate: true,
            handler (newCode, oldCode) {
                if (newCode == false) {
                    this.navigationWay = '步行'
                    this.tabOneFlag = true
                    this.tabTwoFlag = false
                }
            }
        }
    },
    created () {
        this.DC = global.DC
    },
    methods: {
        move (e) {
            const that = this
            const odiv = this.$refs.campusNavBox // 获取目标元素
            // 算出鼠标相对元素的位置
            const disX = e.clientX - odiv.offsetLeft
            const disY = e.clientY - odiv.offsetTop

            const disH = odiv.offsetHeight
            const disW = odiv.offsetWidth

            document.onmousemove = (e) => {
                that.moveFlag = true
                // 鼠标按下并移动的事件
                // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - disX
                let top = e.clientY - disY

                // 绑定元素位置到positionX和positionY上面

                if (left >= window.innerWidth - disW) {
                    left = window.innerWidth - disW
                }

                if (left <= 0) {
                    left = 0
                }

                if (top >= window.innerHeight - disH) {
                    top = window.innerHeight - disH
                }

                if (top <= 60) {
                    top = 60
                }

                // 移动当前元素
                odiv.style.left = (left) + 'px'
                odiv.style.top = (top) + 'px'
                odiv.style.bottom = 'auto'
            }
            document.onmouseup = (e) => {
                that.moveFlag = false
                document.onmousemove = null
                document.onmouseup = null
            }
        },

        closeModel () {
            if (this.$route.path.indexOf('/campusnavi') != -1) {
                this.$store.dispatch('delVisitedViews', this.$route)
@@ -487,178 +433,4 @@
</script>

<style lang='scss' scope>
.campus-nav-box {
    position: fixed;
    top: 20%;
    left: 20%;
    width: 320px;
    height: 186px;
    z-index: 99;
    color: #fff;
    background: #fff;
    border-radius: 8px;

    .header {
        position: relative;
        border-radius: 8px 8px 0 0;
        width: 100%;
        height: 36px;
        line-height: 36px;
        background-color: #2196f3;

        .title {
            padding-left: 10px;

            img {
                width: 20px;
                height: 20px;
                vertical-align: middle;
            }

            span {
                margin-left: 6px;
                display: inline-block;
                vertical-align: middle;
                color: #fff;
            }
        }

        .close {
            position: absolute;
            right: 6px;
            top: 0;
            left: auto;
            bottom: 0;
            margin: auto;
            width: 14px;
            height: 14px;
            cursor: pointer;
        }
    }

    .move {
        cursor: move;
    }

    .container {
        height: calc(100% - 36px);

        .tab {
            height: 44px;
            line-height: 44px;

            ul {
                display: flex;

                li {
                    text-align: center;
                    flex: 1;
                    color: #337ab7;
                    cursor: pointer;
                    border-bottom: 1px solid #ccc;

                    i {
                        display: inline-block;
                        width: 16px;
                        height: 16px;
                        vertical-align: text-bottom;
                    }
                }

                li:nth-child(1) {
                    border-right: 1px solid #ccc;

                    i {
                        background: url(/img/navicon/walk-one.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }

                li:nth-child(2) {
                    i {
                        background: url(/img/navicon/drive-one.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }

                li.on {
                    color: #a40000;
                    border-bottom: none;
                }

                li.on:nth-child(1) {
                    i {
                        background: url(/img/navicon/walk-two.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }

                li.on:nth-child(2) {
                    i {
                        background: url(/img/navicon/drive-two.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }
            }
        }

        .content {
            position: relative;
            padding: 0 10px;
            display: flex;
            align-items: center;
            height: calc(100% - 44px);

            & > div:nth-child(1) {
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 100%;

                & > div {
                    flex: 1;
                    line-height: 53px;
                }
            }

            & > div:nth-child(2) {
                width: 100px;
                text-align: center;
            }

            .toname-value-box,
            .comename-value-box {
                position: absolute;
                top: 48px;
                left: 65px;
                width: auto;
                min-width: 160px;
                max-height: 520px;
                color: #2c3e50;
                background: #fff;
                overflow-y: auto;
                box-shadow: 0 0 14px 2px rgb(221, 221, 221);
                border-radius: 5px;
                z-index: 11;

                ul {
                    li {
                        padding-left: 20px;
                        height: 36px;
                        line-height: 36px;
                        cursor: pointer;
                    }

                    li:hover {
                        background: #f5f5f5;
                    }
                }
            }

            .comename-value-box {
                top: 100px;
            }
        }
    }
}
</style>

 src/components/orgNavBar/index.vue

@@ -1,38 +1,21 @@
<template>
    <div class="public-org-nav-bar"
         ref="publicOrgNavBar">
        <div class="container">
            <div class="header"
                 @mousedown="move"
                 :class="{'move': moveFlag}">
                <div class="title">
                    <img class="icon deblurring"
                         src="/img/icon/jg.png"
                         alt="">
                    <span>
                        {{orgNavBarTitle}}
                    </span>
                </div>
                <img class="close"
                     src="/img/navicon/close.png"
                     alt=""
                     @click="closeModel">
    <public-box class="public-org-nav-bar">
        <template slot="public-box-header">
            <div class="title">
                <img class="icon deblurring" src="/img/icon/jg.png" alt />
                <span>{{orgNavBarTitle}}</span>
            </div>
            <div class="content">
                <ul>
                    <li v-for="(item, index) in orgNavBarList"
                        :key="index"
                        @click="mapPopup(item)">
                        <img :src="item.icon"
                             alt="">
                        <span>
                            {{item.navTitle}}
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
            <img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
        </template>
        <template slot="public-box-content">
            <ul>
                <li v-for="(item, index) in orgNavBarList" :key="index" @click="mapPopup(item)">
                    <img :src="item.icon" alt />
                    <span>{{item.navTitle}}</span>
                </li>
            </ul>
        </template>
    </public-box>
</template>

<script>
@@ -42,7 +25,6 @@
    name: 'OrgNavBar',
    data () {
        return {
            moveFlag: false,
            DC: null
        }
    },
@@ -69,53 +51,6 @@
        ])
    },
    methods: {
        move (e) {
            const that = this
            const odiv = this.$refs.publicOrgNavBar // 获取目标元素
            // 算出鼠标相对元素的位置
            const disX = e.clientX - odiv.offsetLeft
            const disY = e.clientY - odiv.offsetTop

            const disH = odiv.offsetHeight
            const disW = odiv.offsetWidth

            document.onmousemove = (e) => {
                that.moveFlag = true
                // 鼠标按下并移动的事件
                // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - disX
                let top = e.clientY - disY

                // 绑定元素位置到positionX和positionY上面

                if (left >= window.innerWidth - disW) {
                    left = window.innerWidth - disW
                }

                if (left <= 0) {
                    left = 0
                }

                if (top >= window.innerHeight - disH) {
                    top = window.innerHeight - disH
                }

                if (top <= 60) {
                    top = 60
                }

                // 移动当前元素
                odiv.style.left = (left) + 'px'
                odiv.style.top = (top) + 'px'
                odiv.style.bottom = 'auto'
            }
            document.onmouseup = (e) => {
                that.moveFlag = false
                document.onmousemove = null
                document.onmouseup = null
            }
        },

        mapPopup (item) {
            this.$store.commit('CLEAR_ALL', null)

@@ -175,124 +110,4 @@
</script>

<style scoped lang='scss'>
.public-org-nav-bar {
    position: fixed;
    width: 322px;
    height: auto;
    border-radius: 8px;
    top: 140px;
    left: 140px;
    background-color: transparent;
    z-index: 999;
    font-size: 14px;

    .container {
        .header {
            position: relative;
            border-radius: 8px 8px 0 0;
            width: 100%;
            height: 36px;
            line-height: 36px;
            background: rgba(0, 131, 176, 0.7); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

            .title {
                padding-left: 10px;

                img {
                    width: 20px;
                    height: 20px;
                    vertical-align: middle;
                }

                span {
                    margin-left: 6px;
                    display: inline-block;
                    vertical-align: middle;
                    color: #fff;
                }
            }

            .close {
                position: absolute;
                right: 6px;
                top: 0;
                left: auto;
                bottom: 0;
                margin: auto;
                width: 14px;
                height: 14px;
                cursor: pointer;
            }
        }

        .move {
            cursor: move;
        }

        .content {
            clear: both;
            width: 100%;
            height: 440px;
            margin-top: 0px;
            text-align: center;
            overflow-y: auto;
            background: rgba(0, 131, 176, 0.7); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            border-radius: 0 0 8px 8px;

            ul {
                padding: 15px;
                padding-top: 4px;

                li {
                    padding-left: 24px;
                    position: relative;
                    height: 40px;
                    line-height: 40px;
                    list-style: none;
                    border-bottom: 1px dashed #ccc;
                    text-align: left;

                    img {
                        position: absolute;
                        left: 0;
                        right: auto;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        width: 14px;
                    }

                    span {
                        color: #fff;
                        cursor: pointer;
                    }

                    span:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}
</style>

 src/components/publicBox/index.vue

New file
@@ -0,0 +1,80 @@
<template>
    <div ref="publicBox">
        <div class="container">
            <div class="header" @mousedown="move" :class="{'move': moveFlag}">
                <slot name="public-box-header"></slot>
            </div>
            <div class="content">
                <slot name="public-box-content"></slot>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'PublicBox',
    data () {
        return {
            moveFlag: false
        }
    },
    created () {
    },
    methods: {
        move (e) {
            const that = this
            const odiv = this.$refs.publicBox // 获取目标元素
            // 算出鼠标相对元素的位置
            const disX = e.clientX - odiv.offsetLeft
            const disY = e.clientY - odiv.offsetTop

            const disH = odiv.offsetHeight
            const disW = odiv.offsetWidth

            document.onmousemove = (e) => {
                that.moveFlag = true
                // 鼠标按下并移动的事件
                // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - disX
                let top = e.clientY - disY

                // 绑定元素位置到positionX和positionY上面

                if (left >= window.innerWidth - disW) {
                    left = window.innerWidth - disW
                }

                if (left <= 0) {
                    left = 0
                }

                if (top >= window.innerHeight - disH) {
                    top = window.innerHeight - disH
                }

                if (top <= 60) {
                    top = 60
                }

                // 移动当前元素
                odiv.style.left = (left) + 'px'
                odiv.style.top = (top) + 'px'
                odiv.style.bottom = 'auto'
            }
            document.onmouseup = (e) => {
                that.moveFlag = false
                document.onmousemove = null
                document.onmouseup = null
            }
        }
    }
}
</script>

<style scoped lang='scss'>
.move {
    cursor: move;
}
</style>

 src/components/serviceNavBar/index.vue

@@ -1,46 +1,35 @@
<template>
    <div class="public-org-nav-bar"
         ref="publicOrgNavBar">
        <div class="container">
            <div class="header"
                 @mousedown="move"
                 :class="{'move': moveFlag}">
                <div class="title">
                    <img class="icon deblurring"
                         :src="headerLog"
                         alt="">
                    <span>
                        {{title}}
                    </span>
                </div>
                <img class="close"
                     src="/img/navicon/close.png"
                     alt=""
                     @click="closeModel">
    <public-box class="public-org-nav-bar">
        <template slot="public-box-header">
            <div class="title">
                <img class="icon deblurring" :src="headerLog" alt />
                <span>{{title}}</span>
            </div>
            <div class="content">
                <div class="tab" v-show="false">
                    <ul>
                        <li :class="{'on': item.flag}"
                            v-for="(item, index) in titleList"
                            :key="index"
                            @click="topNavClick(item, index)">{{ item.title }}</li>
                    </ul>
                </div>
            <img class="close" src="/img/navicon/close.png" alt @click="closeModel" />
        </template>
        <template slot="public-box-content">
            <div class="tab" v-show="false">
                <ul>
                    <li v-for="(item, index) in itemNavList"
                    <li
                        :class="{'on': item.flag}"
                        v-for="(item, index) in titleList"
                        :key="index"
                        @click="mapPopup(item.details)">
                        <img :src="item.icon"
                             alt="">
                        <span>
                            {{item.navTitle}}
                        </span>
                    </li>
                        @click="topNavClick(item, index)"
                    >{{ item.title }}</li>
                </ul>
            </div>
        </div>
    </div>
            <ul>
                <li
                    v-for="(item, index) in itemNavList"
                    :key="index"
                    @click="mapPopup(item.details)"
                >
                    <img :src="item.icon" alt />
                    <span>{{item.navTitle}}</span>
                </li>
            </ul>
        </template>
    </public-box>
</template>

<script>
@@ -54,7 +43,6 @@
    name: 'ServiceNavBar',
    data () {
        return {
            moveFlag: false,
            itemNavList: [],
            DC: null
        }
@@ -103,52 +91,6 @@
    mounted () {
    },
    methods: {
        move (e) {
            const that = this
            const odiv = this.$refs.publicOrgNavBar // 获取目标元素
            // 算出鼠标相对元素的位置
            const disX = e.clientX - odiv.offsetLeft
            const disY = e.clientY - odiv.offsetTop

            const disH = odiv.offsetHeight
            const disW = odiv.offsetWidth

            document.onmousemove = (e) => {
                that.moveFlag = true
                // 鼠标按下并移动的事件
                // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - disX
                let top = e.clientY - disY

                // 绑定元素位置到positionX和positionY上面

                if (left >= window.innerWidth - disW) {
                    left = window.innerWidth - disW
                }

                if (left <= 0) {
                    left = 0
                }

                if (top >= window.innerHeight - disH) {
                    top = window.innerHeight - disH
                }

                if (top <= 60) {
                    top = 60
                }

                // 移动当前元素
                odiv.style.left = (left) + 'px'
                odiv.style.top = (top) + 'px'
                odiv.style.bottom = 'auto'
            }
            document.onmouseup = (e) => {
                that.moveFlag = false
                document.onmousemove = null
                document.onmouseup = null
            }
        },
        closeModel () {
            this.$parent.closeModel()
        },
@@ -221,137 +163,4 @@
</script>

<style scoped lang='scss'>
.public-org-nav-bar {
    position: fixed;
    width: 322px;
    height: auto;
    border-radius: 8px;
    top: 140px;
    left: 140px;
    background-color: transparent;
    z-index: 999;
    font-size: 14px;
    .container {
        .header {
            position: relative;
            border-radius: 8px 8px 0 0;
            width: 100%;
            height: 36px;
            line-height: 36px;
            background: rgba(0, 131, 176, 0.7); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

            .title {
                padding-left: 10px;
                img {
                    width: 20px;
                    height: 20px;
                    vertical-align: middle;
                }
                span {
                    margin-left: 6px;
                    display: inline-block;
                    vertical-align: middle;
                    color: #fff;
                }
            }
            .close {
                position: absolute;
                right: 6px;
                top: 0;
                left: auto;
                bottom: 0;
                margin: auto;
                width: 14px;
                height: 14px;
                cursor: pointer;
            }
        }
        .move {
            cursor: move;
        }
        .content {
            clear: both;
            width: 100%;
            height: 440px;
            margin-top: 0px;
            text-align: center;
            overflow-y: auto;
            background: rgba(0, 131, 176, 0.7); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            border-radius: 0 0 8px 8px;

            .tab {
                height: 42px;
                border-bottom: 1px solid #ccc;
                ul {
                    display: flex;
                    padding: 0;
                    li {
                        padding: 0;
                        flex: 1;
                        height: 42px;
                        line-height: 42px;
                        color: #fff;
                        text-align: center;
                        border: none;
                        cursor: pointer;
                    }

                    li.on {
                        border-bottom: 1px solid yellow;
                        color: yellow;
                    }
                }
            }
            ul {
                padding: 15px;
                padding-top: 4px;
                li {
                    padding-left: 24px;
                    position: relative;
                    height: 40px;
                    line-height: 40px;
                    list-style: none;
                    border-bottom: 1px dashed #ccc;
                    text-align: left;
                    img {
                        position: absolute;
                        left: 0;
                        right: auto;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        width: 14px;
                    }
                    span {
                        color: #fff;
                        cursor: pointer;
                    }
                    span:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}
</style>

 src/styles/pcpage/campus-nav.scss

New file
@@ -0,0 +1,170 @@
.campus-nav-box {
    position: fixed;
    top: 20%;
    left: 20%;
    width: 320px;
    height: 186px;
    z-index: 99;
    color: #fff;
    background: #fff;
    border-radius: 8px;

    .header {
        position: relative;
        border-radius: 8px 8px 0 0;
        width: 100%;
        height: 36px;
        line-height: 36px;
        background-color: #2196f3;

        .title {
            padding-left: 10px;

            img {
                width: 20px;
                height: 20px;
                vertical-align: middle;
            }

            span {
                margin-left: 6px;
                display: inline-block;
                vertical-align: middle;
                color: #fff;
            }
        }

        .close {
            position: absolute;
            right: 6px;
            top: 0;
            left: auto;
            bottom: 0;
            margin: auto;
            width: 14px;
            height: 14px;
            cursor: pointer;
        }
    }

    .content {
        height: calc(100% - 36px);

        .tab {
            height: 44px;
            line-height: 44px;

            ul {
                display: flex;

                li {
                    text-align: center;
                    flex: 1;
                    color: #337ab7;
                    cursor: pointer;
                    border-bottom: 1px solid #ccc;

                    i {
                        display: inline-block;
                        width: 16px;
                        height: 16px;
                        vertical-align: text-bottom;
                    }
                }

                li:nth-child(1) {
                    border-right: 1px solid #ccc;

                    i {
                        background: url(/img/navicon/walk-one.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }

                li:nth-child(2) {
                    i {
                        background: url(/img/navicon/drive-one.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }

                li.on {
                    color: #a40000;
                    border-bottom: none;
                }

                li.on:nth-child(1) {
                    i {
                        background: url(/img/navicon/walk-two.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }

                li.on:nth-child(2) {
                    i {
                        background: url(/img/navicon/drive-two.png) no-repeat;
                        background-size: 100% 100%;
                    }
                }
            }
        }

        .container {
            position: relative;
            padding: 0 10px;
            display: flex;
            align-items: center;
            height: calc(100% - 44px);

            &>div:nth-child(1) {
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 100%;

                &>div {
                    flex: 1;
                    line-height: 53px;
                }
            }

            &>div:nth-child(2) {
                width: 100px;
                text-align: center;
            }

            .toname-value-box,
            .comename-value-box {
                position: absolute;
                top: 48px;
                left: 65px;
                width: auto;
                min-width: 160px;
                max-height: 520px;
                color: #2c3e50;
                background: #fff;
                overflow-y: auto;
                box-shadow: 0 0 14px 2px rgb(221, 221, 221);
                border-radius: 5px;
                z-index: 11;

                ul {
                    li {
                        padding-left: 20px;
                        height: 36px;
                        line-height: 36px;
                        cursor: pointer;
                    }

                    li:hover {
                        background: #f5f5f5;
                    }
                }
            }

            .comename-value-box {
                top: 100px;
            }
        }
    }
}

 src/styles/pcpage/index.scss

@@ -1,6 +1,10 @@
@import './campus-nav.scss';
@import './element-ui.scss';
@import './dc-ui.scss';

@import './tool/ranging.scss';
@import './tool/sign.scss';
@import './tool/layer-manage.scss';
@import './tool/layer-manage.scss';
@import './publicBox/arc-nav-bar.scss';
@import './publicBox/org-nav-bar.scss';
@import './publicBox/service-nav-bar.scss';

 src/styles/pcpage/publicBox/arc-nav-bar.scss

New file
@@ -0,0 +1,140 @@
.public-org-nav-bar {
    position: fixed;
    width: 322px;
    height: auto;
    border-radius: 8px;
    top: 140px;
    left: 140px;
    background-color: transparent;
    z-index: 99;
    font-size: 14px;

    .container {
        .header {
            position: relative;
            border-radius: 8px 8px 0 0;
            width: 100%;
            height: 36px;
            line-height: 36px;
            background: rgba(0, 131, 176, 0.7);
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to left,
                    rgba(0, 180, 219, 0.7),
                    rgba(0, 131, 176, 0.7));
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to left,
                    rgba(0, 180, 219, 0.7),
                    rgba(0, 131, 176, 0.7));
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

            .title {
                padding-left: 10px;

                img {
                    width: 20px;
                    height: 20px;
                    vertical-align: middle;
                }

                span {
                    margin-left: 6px;
                    display: inline-block;
                    vertical-align: middle;
                    color: #fff;
                }
            }

            .close {
                position: absolute;
                right: 6px;
                top: 0;
                left: auto;
                bottom: 0;
                margin: auto;
                width: 14px;
                height: 14px;
                cursor: pointer;
            }
        }

        .content {
            clear: both;
            width: 100%;
            height: 440px;
            margin-top: 0px;
            text-align: center;
            overflow-y: auto;
            background: rgba(0, 131, 176, 0.7);
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to left,
                    rgba(0, 180, 219, 0.7),
                    rgba(0, 131, 176, 0.7));
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to left,
                    rgba(0, 180, 219, 0.7),
                    rgba(0, 131, 176, 0.7));
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            border-radius: 0 0 8px 8px;

            .tab {
                height: 42px;
                border-bottom: 1px solid #ccc;

                ul {
                    display: flex;
                    padding: 0;

                    li {
                        padding: 0;
                        flex: 1;
                        height: 42px;
                        line-height: 42px;
                        color: #fff;
                        text-align: center;
                        border: none;
                        cursor: pointer;
                    }

                    li.on {
                        border-bottom: 1px solid yellow;
                        color: yellow;
                    }
                }
            }

            ul {
                padding: 15px;
                padding-top: 4px;

                li {
                    padding-left: 24px;
                    position: relative;
                    height: 40px;
                    line-height: 40px;
                    list-style: none;
                    border-bottom: 1px dashed #ccc;
                    text-align: left;

                    img {
                        position: absolute;
                        left: 0;
                        right: auto;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        width: 14px;
                    }

                    span {
                        color: #fff;
                        cursor: pointer;
                    }

                    span:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}

 src/styles/pcpage/publicBox/org-nav-bar.scss

New file
@@ -0,0 +1,115 @@
.public-org-nav-bar {
    position: fixed;
    width: 322px;
    height: auto;
    border-radius: 8px;
    top: 140px;
    left: 140px;
    background-color: transparent;
    z-index: 999;
    font-size: 14px;

    .container {
        .header {
            position: relative;
            border-radius: 8px 8px 0 0;
            width: 100%;
            height: 36px;
            line-height: 36px;
            background: rgba(0, 131, 176, 0.7); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

            .title {
                padding-left: 10px;

                img {
                    width: 20px;
                    height: 20px;
                    vertical-align: middle;
                }

                span {
                    margin-left: 6px;
                    display: inline-block;
                    vertical-align: middle;
                    color: #fff;
                }
            }

            .close {
                position: absolute;
                right: 6px;
                top: 0;
                left: auto;
                bottom: 0;
                margin: auto;
                width: 14px;
                height: 14px;
                cursor: pointer;
            }
        }

        .content {
            clear: both;
            width: 100%;
            height: 440px;
            margin-top: 0px;
            text-align: center;
            overflow-y: auto;
            background: rgba(0, 131, 176, 0.7); /* fallback for old browsers */
            background: -webkit-linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(
                to left,
                rgba(0, 180, 219, 0.7),
                rgba(0, 131, 176, 0.7)
            ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            border-radius: 0 0 8px 8px;

            ul {
                padding: 15px;
                padding-top: 4px;

                li {
                    padding-left: 24px;
                    position: relative;
                    height: 40px;
                    line-height: 40px;
                    list-style: none;border-bottom: 1px dashed #ccc;
                    text-align: left;

                    img {
                        position: absolute;
                        left: 0;
                        right: auto;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        width: 14px;
                    }

                    span {
                        color: #fff;
                        cursor: pointer;
                    }

                    span:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}

 src/styles/pcpage/publicBox/service-nav-bar.scss

New file
@@ -0,0 +1,140 @@
.public-org-nav-bar {
    position: fixed;
    width: 322px;
    height: auto;
    border-radius: 8px;
    top: 140px;
    left: 140px;
    background-color: transparent;
    z-index: 999;
    font-size: 14px;

    .container {
        .header {
            position: relative;
            border-radius: 8px 8px 0 0;
            width: 100%;
            height: 36px;
            line-height: 36px;
            background: rgba(0, 131, 176, 0.7);
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to left,
                    rgba(0, 180, 219, 0.7),
                    rgba(0, 131, 176, 0.7));
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to left,
                    rgba(0, 180, 219, 0.7),
                    rgba(0, 131, 176, 0.7));
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

            .title {
                padding-left: 10px;

                img {
                    width: 20px;
                    height: 20px;
                    vertical-align: middle;
                }

                span {
                    margin-left: 6px;
                    display: inline-block;
                    vertical-align: middle;
                    color: #fff;
                }
            }

            .close {
                position: absolute;
                right: 6px;
                top: 0;
                left: auto;
                bottom: 0;
                margin: auto;
                width: 14px;
                height: 14px;
                cursor: pointer;
            }
        }

        .content {
            clear: both;
            width: 100%;
            height: 440px;
            margin-top: 0px;
            text-align: center;
            overflow-y: auto;
            background: rgba(0, 131, 176, 0.7);
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to left,
                    rgba(0, 180, 219, 0.7),
                    rgba(0, 131, 176, 0.7));
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to left,
                    rgba(0, 180, 219, 0.7),
                    rgba(0, 131, 176, 0.7));
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            border-radius: 0 0 8px 8px;

            .tab {
                height: 42px;
                border-bottom: 1px solid #ccc;

                ul {
                    display: flex;
                    padding: 0;

                    li {
                        padding: 0;
                        flex: 1;
                        height: 42px;
                        line-height: 42px;
                        color: #fff;
                        text-align: center;
                        border: none;
                        cursor: pointer;
                    }

                    li.on {
                        border-bottom: 1px solid yellow;
                        color: yellow;
                    }
                }
            }

            ul {
                padding: 15px;
                padding-top: 4px;

                li {
                    padding-left: 24px;
                    position: relative;
                    height: 40px;
                    line-height: 40px;
                    list-style: none;
                    border-bottom: 1px dashed #ccc;
                    text-align: left;

                    img {
                        position: absolute;
                        left: 0;
                        right: auto;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        width: 14px;
                    }

                    span {
                        color: #fff;
                        cursor: pointer;
                    }

                    span:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}