feat(app): 添加地图组件动画效果
- 在 map.vue 中添加 openFlag 属性,控制地图容器和光标动画 - 在 Home.vue 中实现 openFlag 数据属性和 MapComp 组件的传递 -优化光标的样式和位置,添加动画效果
This commit is contained in:
@@ -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,
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user