@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<view class="wrap">
|
||||
<view class="index1" :animation="animationData" 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">
|
||||
<u-image :fade="false" :src="item.content" :width="item.width" :height="item.height"></u-image>
|
||||
</gal-css-animate>
|
||||
</view>
|
||||
</view>
|
||||
<view class="index2" :animation="animationData1" @click="towhere(true)">
|
||||
<view :animation="animationData20" class="logo20">
|
||||
<u-image :fade="false" :src="logo20" width="135rpx" height="119rpx"></u-image>
|
||||
</view>
|
||||
<view :animation="animationData21" class="logo21">
|
||||
<u-image :fade="false" :src="logo21" width="143rpx" height="255rpx"></u-image>
|
||||
</view>
|
||||
<view :animation="animationData22" class="logo22">
|
||||
<u-image :fade="false" :src="logo22" width="53rpx" height="457rpx"></u-image>
|
||||
</view>
|
||||
<view :animation="animationData23" class="logo23">
|
||||
<u-image :fade="false" :src="logo23" width="750rpx" height="594rpx"></u-image>
|
||||
</view>
|
||||
<view :animation="animationData24" class="logo24">
|
||||
<u-image :fade="false" :src="logo24" width="135rpx" height="100rpx"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLogin:false,//是否注册
|
||||
isEnd:false,//是否结束
|
||||
animations: [{
|
||||
name: 'fadeIn',
|
||||
duration: '1s',
|
||||
timer: 1000,
|
||||
content: require('../../static/index/shine.png'),
|
||||
autoplay:false,
|
||||
class:'logo0',
|
||||
show:false,
|
||||
width:'750rpx',
|
||||
height:'1650rpx'
|
||||
},
|
||||
// {
|
||||
// name: 'heartBeat',
|
||||
// duration: '1.5s',
|
||||
// timer: 1000,
|
||||
// content: require('../../static/index/logo.png'),
|
||||
// autoplay:false,
|
||||
// class:'logo',
|
||||
// show:false,
|
||||
// width:'285rpx',
|
||||
// height:'202rpx'
|
||||
// },
|
||||
{
|
||||
name: 'fadeIn',
|
||||
duration: '1s',
|
||||
timer: 1000,
|
||||
content: require('../../static/index/logo1.png'),
|
||||
autoplay:false,
|
||||
class:'logo1',
|
||||
show:false,
|
||||
width:'242rpx',
|
||||
height:'432rpx'
|
||||
},
|
||||
{
|
||||
name: 'fadeInUp',
|
||||
duration: '1s',
|
||||
timer: 1000,
|
||||
content: require('../../static/index/logo2.png'),
|
||||
autoplay:false,
|
||||
class:'logo2',
|
||||
show:false,
|
||||
width:'750rpx',
|
||||
height:'605rpx'
|
||||
}
|
||||
],
|
||||
logo20:require('../../static/index/2logo.png'),
|
||||
logo21:require('../../static/index/2logo1.png'),
|
||||
logo22:require('../../static/index/2logo2.png'),
|
||||
logo23:require('../../static/index/2logo3.png'),
|
||||
logo24:require('../../static/index/2logo4.png'),
|
||||
animationData:{},
|
||||
animationData0:{},
|
||||
animationData1:{},
|
||||
animationData20:{},
|
||||
animationData21:{},
|
||||
animationData22:{},
|
||||
animationData23:{},
|
||||
animationData24:{},
|
||||
animations2: [{
|
||||
name: 'fadeIn',
|
||||
duration: '1.5s',
|
||||
timer: 1500,
|
||||
content: require('../../static/index/2logo.png'),
|
||||
autoplay:false,
|
||||
class:'logo20',
|
||||
show:false,
|
||||
width:'135rpx',
|
||||
height:'100rpx'
|
||||
},
|
||||
],
|
||||
userInfo:{}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// this.play2(0)
|
||||
// this.getUserInfo()
|
||||
this.userInfo = uni.getStorageSync('userInfo')
|
||||
this.getConfig()
|
||||
this.play(2)
|
||||
},
|
||||
methods: {
|
||||
play(index){
|
||||
// 第一屏结束
|
||||
if(index<0){
|
||||
// 第一屏结束
|
||||
let that = this
|
||||
var animation = uni.createAnimation({
|
||||
duration: 1500,
|
||||
timingFunction: 'ease-in',
|
||||
})
|
||||
// this.animations[1]['show'] = true
|
||||
setTimeout(function(){
|
||||
that.animations[1]['show'] = false
|
||||
},500)
|
||||
animation.opacity(0).width("135rpx").height("100rpx").top('106rpx').left('55rpx').step()
|
||||
this.animationData = animation.export()
|
||||
// 第二屏logo
|
||||
var animation20 = uni.createAnimation({
|
||||
duration: 2500,
|
||||
timingFunction: 'ease-in'
|
||||
})
|
||||
animation20.opacity(1).step()
|
||||
this.animationData20 = animation20.export()
|
||||
//
|
||||
// 第二屏logo xietang
|
||||
var animation24 = uni.createAnimation({
|
||||
duration: 2500,
|
||||
timingFunction: 'ease-in'
|
||||
})
|
||||
this.animationData24 = animation24.export()
|
||||
// 第二屏
|
||||
var animation1 = uni.createAnimation({
|
||||
duration: 2000,
|
||||
timingFunction: 'ease-in',
|
||||
})
|
||||
animation1.opacity(1).step()
|
||||
this.animationData1 = animation1.export()
|
||||
this.play2()
|
||||
return
|
||||
}
|
||||
this.animations[index]['show'] = true
|
||||
this.animations[index]['autoplay'] = true
|
||||
setTimeout(()=>{
|
||||
this.play(index-1);
|
||||
}, this.animations[index].timer)
|
||||
},
|
||||
play2(index){
|
||||
// 标题1
|
||||
var animation21 = uni.createAnimation({
|
||||
duration: 1000,
|
||||
timingFunction: 'ease-in',
|
||||
delay:1000
|
||||
})
|
||||
animation21.height("255rpx").step()
|
||||
this.animationData21 = animation21.export()
|
||||
// 标题2
|
||||
var animation22 = uni.createAnimation({
|
||||
duration: 1000,
|
||||
timingFunction: 'ease-in',
|
||||
delay:2000
|
||||
})
|
||||
animation22.height("457rpx").step()
|
||||
this.animationData22 = animation22.export()
|
||||
// 水八仙
|
||||
var animation23 = uni.createAnimation({
|
||||
duration: 1000,
|
||||
timingFunction: 'ease-in',
|
||||
delay:3000
|
||||
})
|
||||
animation23.opacity(1).step()
|
||||
this.animationData23 = animation23.export()
|
||||
this.towhere()
|
||||
},
|
||||
getConfig(){
|
||||
// /
|
||||
let that = this
|
||||
this.util.request({
|
||||
api: '/api/mobile/user/wechat-login-url',
|
||||
method: 'GET',
|
||||
data:{
|
||||
activity_tag:'bbfc'
|
||||
},
|
||||
utilSuccess: (res) => {
|
||||
that.isEnd = that.isCurrentTimeBetween(res.start_time,res.end_time)
|
||||
let config = res.config
|
||||
config.map(item=>{
|
||||
if(item.key==='active_tip'){
|
||||
uni.setStorageSync('active_tip',item.value)
|
||||
}
|
||||
})
|
||||
uni.setStorageSync('activeConfig',res)
|
||||
uni.setStorageSync('isEnd',that.isEnd)
|
||||
// this.userInfo = res;
|
||||
// uni.setStorageSync("userInfo",res)
|
||||
},
|
||||
utilFail: (res) => {
|
||||
// this.util.toast(res)
|
||||
uni.clearStorageSync()
|
||||
}
|
||||
})
|
||||
},
|
||||
isCurrentTimeBetween(startTime, endTime) {
|
||||
let that = this
|
||||
const now = that.$moment().valueOf()
|
||||
const start = that.$moment(startTime).valueOf();
|
||||
const end =that.$moment(endTime).valueOf();
|
||||
console.log("123",now,start,end)
|
||||
return now >= start && now <= end;
|
||||
},
|
||||
towhere(isclick){
|
||||
let userinfo = uni.getStorageSync('userInfo')
|
||||
let url = '/pages/me/me'
|
||||
console.log("userinfo.mobile",userinfo.mobile)
|
||||
console.log("this.util.isNull(userinfo.mobile)",this.util.isNull(userinfo.mobile))
|
||||
if(this.util.isNull(userinfo.mobile)){
|
||||
url = '/pages/login/index'
|
||||
}
|
||||
console.log("url",url)
|
||||
// return
|
||||
// 不点击 动画结束后延时进入
|
||||
if(isclick){
|
||||
uni.navigateTo({
|
||||
url:url
|
||||
})
|
||||
}else{
|
||||
setTimeout(function(){
|
||||
uni.navigateTo({
|
||||
url:url
|
||||
})
|
||||
},4500)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.index1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('../../static/index/bg.png');
|
||||
position: absolute;
|
||||
/* display: none; */
|
||||
background-size: 100% 100%;
|
||||
top:0;
|
||||
left:0;
|
||||
z-index:2;
|
||||
overflow: hidden;
|
||||
}
|
||||
.logo0{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.logo {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 235rpx;
|
||||
}
|
||||
|
||||
.logo1 {
|
||||
position: absolute;
|
||||
bottom: 670rpx;
|
||||
left: 270rpx;
|
||||
}
|
||||
|
||||
.logo2 {
|
||||
position: absolute;
|
||||
bottom: 0rpx;
|
||||
left: 0rpx;
|
||||
}
|
||||
.index2 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('../../static/index/2bg.png');
|
||||
position: absolute;
|
||||
background-size: 100% 100%;
|
||||
top:0;
|
||||
left:0;
|
||||
z-index:1;
|
||||
opacity: 0;
|
||||
}
|
||||
.logo20{
|
||||
position: absolute;
|
||||
top: 52rpx;
|
||||
left: 70rpx;
|
||||
opacity: 0;
|
||||
/* opacity: 0;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%); */
|
||||
}
|
||||
.logo21 {
|
||||
position: absolute;
|
||||
top: 220rpx;
|
||||
right: 70rpx;
|
||||
height:0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.logo22 {
|
||||
position: absolute;
|
||||
top: 220rpx;
|
||||
right: 230rpx;
|
||||
height:0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.logo23 {
|
||||
position: absolute;
|
||||
bottom: 4%;
|
||||
left: 0rpx;
|
||||
opacity: 0;
|
||||
}
|
||||
.logo24{
|
||||
position: absolute;
|
||||
top: 58rpx;
|
||||
right: 70rpx;
|
||||
opacity: 1;
|
||||
/* opacity: 0;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%); */
|
||||
}
|
||||
</style>
|
||||
|
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 278 KiB |
|
After Width: | Height: | Size: 813 KiB |
|
Before Width: | Height: | Size: 272 KiB After Width: | Height: | Size: 321 KiB |
|
Before Width: | Height: | Size: 321 KiB |
|
After Width: | Height: | Size: 627 B |