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

View File

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