|
|
<template>
|
|
|
<view class="container">
|
|
|
<view class="animations" ref="apiAnimateDemo">
|
|
|
<view v-for="(item,index) in animations">
|
|
|
<gal-css-animate v-if="item.show" :animateName="item.name" :class='item.class' :duration="item.duration"
|
|
|
:autoPlay="item.autoplay" timingFunction="ease-in">
|
|
|
<image @click="toMap(item.click)" :src="item.content"
|
|
|
:style="{'width':item.width,'height':item.height}"></image>
|
|
|
</gal-css-animate>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view>
|
|
|
<image class="boat" :src="boat"></image>
|
|
|
</view>
|
|
|
<view class="support">
|
|
|
<view>
|
|
|
<p>主办单位：中共苏州工业园区斜塘街道工作委员会</p>
|
|
|
<p>承办单位：江苏有线苏州分公司</p>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
<view class="bg-bottom"></view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import galCssAnimate from "@/GAL/components/gal-css-animate.vue"
|
|
|
export default {
|
|
|
components:{
|
|
|
galCssAnimate
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
boat: require('../../static/xtdk/index-boat.png'),
|
|
|
animations: [{
|
|
|
name: 'fadeIn',
|
|
|
duration: '1s',
|
|
|
timer: 1000,
|
|
|
content: require('../../static/xtdk/index-logo.png'),
|
|
|
autoplay: false,
|
|
|
class: 'logo',
|
|
|
show: false,
|
|
|
width: '135rpx',
|
|
|
height: '100rpx'
|
|
|
}, {
|
|
|
name: 'zoomIn',
|
|
|
duration: '1.5s',
|
|
|
timer: 1500,
|
|
|
content: require('../../static/xtdk/index-title.png'),
|
|
|
autoplay: false,
|
|
|
class: 'title',
|
|
|
show: false,
|
|
|
width: '514rpx',
|
|
|
height: '274rpx'
|
|
|
},
|
|
|
{
|
|
|
name: 'wobble',
|
|
|
duration: '1.5s',
|
|
|
timer: 1500,
|
|
|
content: require('../../static/xtdk/index-btn.png'),
|
|
|
autoplay: false,
|
|
|
class: 'btn',
|
|
|
show: false,
|
|
|
width: '349rpx',
|
|
|
height: '98rpx',
|
|
|
click: true,
|
|
|
}
|
|
|
],
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
this.play(0)
|
|
|
},
|
|
|
methods: {
|
|
|
toMap(click) {
|
|
|
if (click) {
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/map/map'
|
|
|
})
|
|
|
}
|
|
|
|
|
|
},
|
|
|
play(index) {
|
|
|
if (index > this.animations.length - 1) {
|
|
|
return
|
|
|
}
|
|
|
this.animations[index]['show'] = true
|
|
|
this.animations[index]['autoplay'] = true
|
|
|
setTimeout(() => {
|
|
|
this.play(index + 1);
|
|
|
}, this.animations[index].timer)
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.container {
|
|
|
height: 100vh;
|
|
|
width: 100vw;
|
|
|
background: url(../../static/xtdk/index-bg.png) no-repeat top left;
|
|
|
background-size: 100% 100%;
|
|
|
position: relative;
|
|
|
|
|
|
// z-index:1;
|
|
|
.animations {
|
|
|
position: absolute;
|
|
|
z-index: 9;
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
|
|
|
.logo {
|
|
|
position: absolute;
|
|
|
top: 100rpx;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, 0);
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
position: absolute;
|
|
|
top: 240rpx;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, 0);
|
|
|
}
|
|
|
|
|
|
.btn {
|
|
|
position: absolute;
|
|
|
top: 560rpx;
|
|
|
left: 200rpx;
|
|
|
// transform: translate(-50%, 0);
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// .boat {
|
|
|
// }
|
|
|
.boat {
|
|
|
position: absolute;
|
|
|
bottom: 100rpx;
|
|
|
left: 0rpx;
|
|
|
width: 207rpx;
|
|
|
height: 160rpx;
|
|
|
z-index: 9;
|
|
|
animation: slide-in 5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
|
|
}
|
|
|
|
|
|
@keyframes slide-in {
|
|
|
0% {
|
|
|
transform: translateX(-100%);
|
|
|
}
|
|
|
// 50% {
|
|
|
// transform: translateX(236rpx);
|
|
|
// }
|
|
|
100% {
|
|
|
transform: translateX(469rpx);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.bg-bottom {
|
|
|
height: 628rpx;
|
|
|
width: 100vw;
|
|
|
background: url(../../static/xtdk/index-bg-bottom.png) no-repeat top left;
|
|
|
background-size: 100% 100%;
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
}
|
|
|
.support{
|
|
|
position: absolute;
|
|
|
bottom:10rpx;
|
|
|
width:100%;
|
|
|
font-size: 24rpx;
|
|
|
color:#666;
|
|
|
font-family: '宋体';
|
|
|
opacity: 1;
|
|
|
text-align: center;
|
|
|
z-index:9;
|
|
|
}
|
|
|
}
|
|
|
</style> |
