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
1 <!-- 1 <!--
2 * @Date: 2023-07-27 11:04:04 2 * @Date: 2023-07-27 11:04:04
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-08-10 17:13:50 4 + * @LastEditTime: 2023-08-11 09:42:52
5 * @FilePath: /map-demo/src/components/Floor/index.vue 5 * @FilePath: /map-demo/src/components/Floor/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -58,15 +58,16 @@ ...@@ -58,15 +58,16 @@
58 </div> 58 </div>
59 <div class="level_after">L{{ index + 1 }}</div> 59 <div class="level_after">L{{ index + 1 }}</div>
60 <div v-if="level_show && index === 3" class="level_btn"> 60 <div v-if="level_show && index === 3" class="level_btn">
61 - <div v-if="!svg_animate_status" @click="createSafeAnimation(true)" style="font-size: 0.75rem; transform: rotateZ(-15deg) rotateX(5deg) translateZ(40vmin);"> 61 + <div v-if="!svg_safe_animate_status" @click="createSafeAnimation(true)" style="font-size: 0.85rem; transform: rotateZ(-15deg) rotateX(5deg) translateZ(40vmin);">
62 查看安全路线 62 查看安全路线
63 </div> 63 </div>
64 - <div v-else @click="createSafeAnimation(false)" style="font-size: 0.75rem; transform: rotateZ(-15deg) rotateX(5deg) translateZ(40vmin);"> 64 + <div v-else @click="createSafeAnimation(false)" style="font-size: 0.85rem; transform: rotateZ(-15deg) rotateX(5deg) translateZ(40vmin);">
65 关闭安全路线 65 关闭安全路线
66 </div> 66 </div>
67 </div> 67 </div>
68 </div> 68 </div>
69 </div> 69 </div>
70 +
70 </div> 71 </div>
71 </div> 72 </div>
72 </div> 73 </div>
...@@ -156,10 +157,11 @@ export default { ...@@ -156,10 +157,11 @@ export default {
156 show: true 157 show: true
157 }, 158 },
158 ], 159 ],
159 - svg_animate_status: false, 160 + svg_safe_animate_status: false,
160 - svg_animate: ` 161 + svg_safe_animate: `
161 - <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> 162 + <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">
162 - <circle id="myCircle" cx="0" cy="0" r="10" fill="blue"> 163 + </path>
164 + <circle id="myCircle" cx="0" cy="0" r="8" fill="#6584c7">
163 <animateMotion dur="8s" repeatCount="indefinite"> 165 <animateMotion dur="8s" repeatCount="indefinite">
164 <mpath href="#myPath" /> 166 <mpath href="#myPath" />
165 </animateMotion> 167 </animateMotion>
...@@ -206,7 +208,7 @@ export default { ...@@ -206,7 +208,7 @@ export default {
206 onCloseLevelAll() { 208 onCloseLevelAll() {
207 this.onCloseLevel(); 209 this.onCloseLevel();
208 // 清除动画 210 // 清除动画
209 - if (this.svg_animate_status) { 211 + if (this.svg_safe_animate_status) {
210 this.createSafeAnimation(false); 212 this.createSafeAnimation(false);
211 } 213 }
212 }, 214 },
...@@ -316,16 +318,16 @@ export default { ...@@ -316,16 +318,16 @@ export default {
316 let insertString = ''; 318 let insertString = '';
317 let level = 4; 319 let level = 4;
318 if (flag) { // 打开 320 if (flag) { // 打开
319 - this.svg_animate_status = true; 321 + this.svg_safe_animate_status = true;
320 - insertString = this.svg_animate; 322 + insertString = this.svg_safe_animate;
321 let insertIndex = this.level_list[3].svg.indexOf('</svg>'); 323 let insertIndex = this.level_list[3].svg.indexOf('</svg>');
322 // 添加相应动画 324 // 添加相应动画
323 let modifiedString = this.level_list[3].svg.slice(0, insertIndex) + insertString; 325 let modifiedString = this.level_list[3].svg.slice(0, insertIndex) + insertString;
324 this.level_list[3].svg = modifiedString + '</svg>'; 326 this.level_list[3].svg = modifiedString + '</svg>';
325 } else { // 关闭 327 } else { // 关闭
326 - this.svg_animate_status = false; 328 + this.svg_safe_animate_status = false;
327 let originalString = this.level_list[3].svg; 329 let originalString = this.level_list[3].svg;
328 - let searchTerm = this.svg_animate; 330 + let searchTerm = this.svg_safe_animate;
329 let startIndex = originalString.indexOf(searchTerm); 331 let startIndex = originalString.indexOf(searchTerm);
330 let endIndex = startIndex + searchTerm.length - 1; 332 let endIndex = startIndex + searchTerm.length - 1;
331 // 删除相应动画 333 // 删除相应动画
...@@ -417,7 +419,7 @@ export default { ...@@ -417,7 +419,7 @@ export default {
417 } 419 }
418 420
419 .level_btn { 421 .level_btn {
420 - font-size: 0.75rem; 422 + font-size: 1rem;
421 line-height: 0; 423 line-height: 0;
422 position: absolute; 424 position: absolute;
423 z-index: 100; 425 z-index: 100;
......
...@@ -340,6 +340,11 @@ ...@@ -340,6 +340,11 @@
340 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"> 340 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">
341 </path> 341 </path>
342 </symbol> 342 </symbol>
343 + <symbol id="icon-arrow" viewBox="0 0 32 32">
344 + <title>arrow</title>
345 + <path d="M 0 0 L 62 42 M 65 9 L 83 10 L 73 26 L 65 9" fill="purple"/>
346 + </symbol>
347 +
343 </defs> 348 </defs>
344 </svg> 349 </svg>
345 </div></template> 350 </div></template>
......
1 <!-- 1 <!--
2 * @Date: 2023-05-19 14:54:27 2 * @Date: 2023-05-19 14:54:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-08-10 08:36:04 4 + * @LastEditTime: 2023-08-10 17:19:02
5 * @FilePath: /map-demo/src/views/inner.vue 5 * @FilePath: /map-demo/src/views/inner.vue
6 * @Description: 内部地图主体页面 6 * @Description: 内部地图主体页面
7 --> 7 -->
......