From bf58722dfd03ea1513f3acc7331d4d4403fca76e Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 18 Mar 2022 11:48:37 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/school-web
---
src/components/mobileCloseRouter/index.vue | 80 +++++++++++++++++++++++++++++++++++++---
1 files changed, 74 insertions(+), 6 deletions(-)
diff --git a/src/components/mobileCloseRouter/index.vue b/src/components/mobileCloseRouter/index.vue
index 8d48d09..8efd9d1 100644
--- a/src/components/mobileCloseRouter/index.vue
+++ b/src/components/mobileCloseRouter/index.vue
@@ -1,10 +1,26 @@
<template>
<!-- v-show="isOpenDrawALine" -->
- <div
- :class="['mobileCloseRouter', isOpenDrawALine ? 'mobileCloseActive' : '']"
- @click="mobileRouterClose"
- >
- 退出导航
+ <div class="routers">
+ <div
+ :class="['mobileCloseRouter', isOpenDrawALine ? 'mobileCloseActive' : '']"
+ @click="mobileRouterClose"
+ >
+ 退出导航
+ </div>
+ <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 }}：{{ item.titles }} -->
+ 路径{{ index + 1 }}
+ </div>
</div>
</template>
@@ -13,7 +29,12 @@
export default {
name: "mobileCloseRouter",
computed: {
- ...mapGetters(["isOpenDrawALine"]),
+ ...mapGetters(["isOpenDrawALine", "routerS", "choiceRouterS"]),
+ },
+ data() {
+ return {
+ lengthS: 0,
+ };
},
watch: {
isOpenDrawALine() {
@@ -21,16 +42,36 @@
} else {
}
},
+ routerS() {
+ if (this.routerS.length == 0) {
+ this.lengthS = 0;
+ }
+ setTimeout(() => {
+ this.lengthS++;
+ }, 200);
+ },
},
methods: {
mobileRouterClose() {
this.$store.commit("removePolyline");
+ this.$store.commit("removerPolyLineIcon");
+ },
+ 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;
@@ -48,8 +89,35 @@
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>
--
Gitblit v1.9.3