<template>
|
<!-- v-show="isOpenDrawALine" -->
|
<!-- 退出导航，右边按钮
|
mobileCloseRouter
|
-->
|
<div class="routers">
|
<div
|
:class="['mobileCloseRouter', isOpenDrawALine ? 'mobileCloseActive' : '']"
|
@click="mobileRouterClose"
|
>退出导航</div>
|
|
<!-- 路径{{ index + 1 }}：{{ item.titles }} -->
|
|
<!-- <div
|
v-for="(item, index) in routerS"
|
:key="item.Str"
|
:style="{ bottom: 357 + index * 37 + 'px' }"
|
:class="[
|
'mobileCloseRouterOpen',
|
index < lengthS && isOpenDrawALine ? 'mobileCloseActive' : '',
|
choiceRouterS == index ? 'mobileCloseActiveOpen' : '',
|
]"
|
@click="mobileRouterCloseOpen(item.Str, index)"
|
>路径{{ index + 1 }}</div>-->
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
export default {
|
name: 'mobileCloseRouter',
|
computed: {
|
...mapGetters(['isOpenDrawALine', 'routerS', 'choiceRouterS'])
|
},
|
data () {
|
return {
|
lengthS: 0
|
}
|
},
|
watch: {
|
isOpenDrawALine () {
|
if (this.isOpenDrawALine) {
|
} else {
|
}
|
},
|
routerS () {
|
if (this.routerS.length == 0) {
|
this.lengthS = 0
|
}
|
setTimeout(() => {
|
this.lengthS++
|
}, 200)
|
}
|
},
|
methods: {
|
mobileRouterClose () {
|
this.$store.commit('removePolyline')
|
this.$store.commit('removerPolyLineIcon')
|
|
this.$EventBus.$emit('clearTimoutTime')
|
},
|
mobileRouterCloseOpen (Str, index) {
|
if (this.choiceRouterS == index) {
|
return
|
}
|
this.$store.commit('set_choiceRouterS', index)
|
this.$store.dispatch('MSET_DRAWALINELAYER', [Str])
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.routers {
|
width: 0;
|
height: 0;
|
}
|
.mobileCloseRouter {
|
position: fixed;
|
width: 80px;
|
height: 32px;
|
background-color: #409eff;
|
z-index: 600;
|
right: -100px;
|
opacity: 0;
|
bottom: 320px;
|
font-size: 14px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: 8px 0 0 8px;
|
color: #fff;
|
transition: all 0.5s;
|
}
|
.mobileCloseRouterOpen {
|
position: fixed;
|
// width: 127px;
|
width: 50px;
|
height: 32px;
|
background-color: #fff;
|
z-index: 600;
|
right: -100px;
|
opacity: 0;
|
bottom: 357px;
|
font-size: 14px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: 8px 0 0 8px;
|
color: #000;
|
border-left: 1px solid #a4d1ff;
|
border-top: 1px solid #a4d1ff;
|
border-bottom: 1px solid #a4d1ff;
|
transition: all 0.5s;
|
}
|
.mobileCloseActive {
|
right: 0px;
|
opacity: 1;
|
}
|
.mobileCloseActiveOpen {
|
width: 80px;
|
border: 1px solid #409eff;
|
background-color: #409eff;
|
color: #fff;
|
}
|
</style>
|
