Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
794afa77 1 parent 62c2e8aa

fix

Inline Side-by-side
Showing 3 changed files with 21 additions and 14 deletions
<!--
* @Date: 2023-07-27 11:04:04
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-10 17:13:50
* @LastEditTime: 2023-08-11 09:42:52
* @FilePath: /map-demo/src/components/Floor/index.vue
* @Description: 文件描述
-->
......@@ -58,15 +58,16 @@
</div>
<div class="level_after">L{{ index + 1 }}</div>
<div v-if="level_show && index === 3" class="level_btn">
<div v-if="!svg_animate_status" @click="createSafeAnimation(true)" style="font-size: 0.75rem; transform: rotateZ(-15deg) rotateX(5deg) translateZ(40vmin);">
<div v-if="!svg_safe_animate_status" @click="createSafeAnimation(true)" style="font-size: 0.85rem; transform: rotateZ(-15deg) rotateX(5deg) translateZ(40vmin);">
查看安全路线
</div>
<div v-else @click="createSafeAnimation(false)" style="font-size: 0.75rem; transform: rotateZ(-15deg) rotateX(5deg) translateZ(40vmin);">
<div v-else @click="createSafeAnimation(false)" style="font-size: 0.85rem; transform: rotateZ(-15deg) rotateX(5deg) translateZ(40vmin);">
关闭安全路线
</div>
</div>
</div>
</div>
</div>
</div>
</div>
......@@ -156,10 +157,11 @@ export default {
show: true
},
],
svg_animate_status: false,
svg_animate: `
<path id="myPath" d="M 689 525 L 889 474 L 670 230 L 473 223 L 462 95" fill="none" stroke="#D49333" stroke-width="5"></path>
<circle id="myCircle" cx="0" cy="0" r="10" fill="blue">
svg_safe_animate_status: false,
svg_safe_animate: `
<path id="myPath" d="M 689 525 L 889 474 L 670 230 L 473 223 L 462 95" fill="none" stroke="#D49333" stroke-width="5">
</path>
<circle id="myCircle" cx="0" cy="0" r="8" fill="#6584c7">
<animateMotion dur="8s" repeatCount="indefinite">
<mpath href="#myPath" />
</animateMotion>
......@@ -206,7 +208,7 @@ export default {
onCloseLevelAll() {
this.onCloseLevel();
// 清除动画
if (this.svg_animate_status) {
if (this.svg_safe_animate_status) {
this.createSafeAnimation(false);
}
},
......@@ -316,16 +318,16 @@ export default {
let insertString = '';
let level = 4;
if (flag) { // 打开
this.svg_animate_status = true;
insertString = this.svg_animate;
this.svg_safe_animate_status = true;
insertString = this.svg_safe_animate;
let insertIndex = this.level_list[3].svg.indexOf('</svg>');
// 添加相应动画
let modifiedString = this.level_list[3].svg.slice(0, insertIndex) + insertString;
this.level_list[3].svg = modifiedString + '</svg>';
} else { // 关闭
this.svg_animate_status = false;
this.svg_safe_animate_status = false;
let originalString = this.level_list[3].svg;
let searchTerm = this.svg_animate;
let searchTerm = this.svg_safe_animate;
let startIndex = originalString.indexOf(searchTerm);
let endIndex = startIndex + searchTerm.length - 1;
// 删除相应动画
......@@ -417,7 +419,7 @@ export default {
}
.level_btn {
font-size: 0.75rem;
font-size: 1rem;
line-height: 0;
position: absolute;
z-index: 100;
......
......@@ -340,6 +340,11 @@
d="M25.482 12.661l-10.964-6.893 1.643-2.696h15.268zM7.232 17.393l-3.286-2.071v-15.321l21.125 13.268zM25.429 14.982l2.625 1.696v15.321l-9.5-5.982zM24.768 14.607l-8.929 14.321h-15.268l6.357-10.196z">
</path>
</symbol>
<symbol id="icon-arrow" viewBox="0 0 32 32">
<title>arrow</title>
<path d="M 0 0 L 62 42 M 65 9 L 83 10 L 73 26 L 65 9" fill="purple"/>
</symbol>
</defs>
</svg>
</div></template>
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-10 08:36:04
* @LastEditTime: 2023-08-10 17:19:02
* @FilePath: /map-demo/src/views/inner.vue
* @Description: 内部地图主体页面
-->
......