feat(app): 添加地图组件动画效果

- 在 map.vue 中添加 openFlag 属性,控制地图容器和光标动画
- 在 Home.vue 中实现 openFlag 数据属性和 MapComp 组件的传递
-优化光标的样式和位置,添加动画效果
This commit is contained in:
陈昱达
2025-07-03 19:42:24 +08:00
parent 469c23c8ea
commit 3c66c34e9e
2 changed files with 18 additions and 7 deletions

View File

@@ -7,12 +7,12 @@ http://www.ebiz-interactive.com/
<div class="container home-xfrs"> <div class="container home-xfrs">
<navbar></navbar> <navbar></navbar>
<div class="home-container"> <div class="home-container">
<div class="home-logo"> <div class="home-logo" @click="openFlag = !openFlag">
<img src="../../assets/images/home/homeLogo.png" alt="" /> <img src="../../assets/images/home/homeLogo.png" alt="" />
</div> </div>
<!--地图动画 --> <!--地图动画 -->
<div class="animate-map"> <div class="animate-map" :class="{ animateMapMove: openFlag }">
<MapComp></MapComp> <MapComp :openFlag="openFlag" class="map-box"></MapComp>
</div> </div>
<!-- 气球--> <!-- 气球-->
<div class="animate-boll"></div> <div class="animate-boll"></div>
@@ -32,7 +32,7 @@ export default {
props: {}, props: {},
data() { data() {
return { return {
formData: {}, openFlag: false,
} }
}, },
} }

View File

@@ -1,12 +1,12 @@
<template> <template>
<div id="map-container" class="container map-container flex"> <div id="map-container" class="container map-container flex" :class="{ moveMap: openFlag }">
<!-- 睿智财富 --> <!-- 睿智财富 -->
<div class="map-1 map"> <div class="map-1 map">
<div class="relative"> <div class="relative">
<img src="../../../assets/images/home/map-1-t1.png" alt="" class="map-1-t1" /> <img src="../../../assets/images/home/map-1-t1.png" alt="" class="map-1-t1" />
<img src="" alt="" class="map-1-t1-ban" /> <img src="" alt="" class="map-1-t1-ban" />
<img src="" alt="" class="map-1-t1-road" /> <img src="" alt="" class="map-1-t1-road" />
<div class="cursor"> <div class="cursor" :class="{ showOpacity: openFlag }">
<div class="cursor-title">睿智财富</div> <div class="cursor-title">睿智财富</div>
<div class="cursor-pointer"></div> <div class="cursor-pointer"></div>
</div> </div>
@@ -62,6 +62,12 @@
<script> <script>
export default { export default {
name: 'map', name: 'map',
props: {
openFlag: {
type: Boolean,
default: false,
},
},
data() { data() {
return {} return {}
}, },
@@ -91,13 +97,18 @@ export default {
.relative { .relative {
position: relative; position: relative;
} }
.showOpacity {
opacity: 1 !important;
}
.cursor { .cursor {
opacity: 0;
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
left: 0;
top: 0;
//width: 150px; //width: 150px;
& .cursor-pointer { & .cursor-pointer {
background: url('../../../assets/images/home/pointer.png') no-repeat 100% 100% / contain; background: url('../../../assets/images/home/pointer.png') no-repeat 100% 100% / contain;