958 lines
21 KiB
Vue
958 lines
21 KiB
Vue
<template>
|
||
<view>
|
||
<block v-if="isPage">
|
||
<view v-if="outdated" class="box">
|
||
<view class="remainingcount">您还有{{ RemainingCount }}次机会</view>
|
||
<view class="egg-box">
|
||
<view class="hammer" animation="(animationData)"></view>
|
||
<view class="egg-top">
|
||
<view class="egg (move?'move1':'')" @click="knock">
|
||
<image
|
||
lazy-load
|
||
:src="
|
||
ImgPath + 'goldenEggs' + (selectImg == 1 ? '-1' : '') + '.png'
|
||
"
|
||
mode="widthFix"
|
||
:data-num="1"
|
||
></image>
|
||
</view>
|
||
<view class="egg (move?'move2':'')" @click="knock">
|
||
<image
|
||
lazy-load
|
||
:src="
|
||
ImgPath + 'goldenEggs' + (selectImg == 2 ? '-1' : '') + '.png'
|
||
"
|
||
mode="widthFix"
|
||
:data-num="2"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
<view class="egg-bottom">
|
||
<view class="egg (move?'move3':'')" @click="knock">
|
||
<image
|
||
lazy-load
|
||
:src="
|
||
ImgPath + 'goldenEggs' + (selectImg == 3 ? '-1' : '') + '.png'
|
||
"
|
||
mode="widthFix"
|
||
:data-num="3"
|
||
></image>
|
||
</view>
|
||
<view class="egg (move?'move4':'')" @click="knock">
|
||
<image
|
||
lazy-load
|
||
:src="
|
||
ImgPath + 'goldenEggs' + (selectImg == 4 ? '-1' : '') + '.png'
|
||
"
|
||
mode="widthFix"
|
||
:data-num="4"
|
||
></image>
|
||
</view>
|
||
<view class="egg (move?'move5':'')" @click="knock">
|
||
<image
|
||
lazy-load
|
||
:src="
|
||
ImgPath + 'goldenEggs' + (selectImg == 5 ? '-1' : '') + '.png'
|
||
"
|
||
mode="widthFix"
|
||
:data-num="5"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="winner-box">
|
||
<view class="winner-title">本期中奖名单</view>
|
||
<image
|
||
lazy-load
|
||
:src="ImgPath + 'tip-1.png'"
|
||
class="winner-img"
|
||
mode="widthFix"
|
||
></image>
|
||
<view class="winner-list">
|
||
<block v-if="DrawInfo.winner_rows.items.length > 0">
|
||
<swiper
|
||
autoplay="true"
|
||
interval="4000"
|
||
duration="2000"
|
||
vertical="false"
|
||
circular="true"
|
||
class="m-luckylist"
|
||
>
|
||
<swiper-item v-for="(items, i) in rows" :key="i">
|
||
<block
|
||
v-for="(item, j) in DrawInfo.winner_rows.items"
|
||
:key="j"
|
||
>
|
||
<view
|
||
v-if="j >= i * 5 && j <= (i + 1) * 5"
|
||
class="m-winner-item"
|
||
>{{ item.user_nickname }}砸中
|
||
<label class="prize-name">{{ item.awards_name }}</label>
|
||
</view>
|
||
</block>
|
||
</swiper-item>
|
||
</swiper>
|
||
</block>
|
||
<view class="m-winner-item" style="background: #fee39f" v-else
|
||
>暂无中奖名单数据</view
|
||
>
|
||
</view>
|
||
</view>
|
||
<view class="rule-box">
|
||
<image
|
||
lazy-load
|
||
:src="ImgPath + 'tip-2.png'"
|
||
class="winner-img"
|
||
mode="widthFix"
|
||
></image>
|
||
<wxParse :content="DrawInfo.activity_rule.activity_intro + ''" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="activity-outdated" v-else>
|
||
<view class="m-nullcontent">
|
||
<view class="m-nullpage-middle">
|
||
<label class="iconfont icon-meiyougengduo"></label>
|
||
<view class="m-null-tip">
|
||
<text>亲~您来晚了哦</text>
|
||
<text>该砸金蛋活动已经失效啦~</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<view class="u-tap-btn">
|
||
<navigator url="/member/member/prize?category=2" class="u-go-home">
|
||
<view class="iconfont icon-iconcanjiahuodong01"></view>
|
||
</navigator>
|
||
<view class="red-dot"></view>
|
||
<navigator
|
||
url="/pages/index/index"
|
||
open-type="switchTab"
|
||
class="u-go-home"
|
||
>
|
||
<view
|
||
class="iconfont icon-shouyeshouye"
|
||
style="font-size: 50rpx"
|
||
></view>
|
||
</navigator>
|
||
</view>
|
||
<view class="mskprize" v-if="clickmsk" @click="cancelprize">
|
||
<view
|
||
class="m-result-box bounceIn animated"
|
||
@click.stop="nothing"
|
||
v-if="PrizeResult.index >= 0"
|
||
>
|
||
<view class="m-result-cancel" @click="cancelprize">✕</view>
|
||
|
||
<block v-if="PrizeResult.awards_enable">
|
||
<view class="m-success-text">{{ __("恭喜你获得了") }}</view>
|
||
</block>
|
||
<block v-if="!PrizeResult.awards_enable">
|
||
<view class="m-success-text">{{ __("未中奖") }}</view>
|
||
</block>
|
||
|
||
<image
|
||
lazy-load
|
||
:src="PrizeResult.awards_image"
|
||
class="m-success-img"
|
||
/>
|
||
<view class="m-success-name">{{ PrizeResult.prize }}</view>
|
||
<view class="m-success-name">{{ PrizeResult.awards_title }}</view>
|
||
<view class="m-success-bottom">
|
||
<navigator
|
||
url="/member/member/prize?category=2"
|
||
class="succes-checkprice"
|
||
>查看奖品</navigator
|
||
>
|
||
<view class="succes-continue" @click="cancelprize">继续抽奖</view>
|
||
</view>
|
||
</view>
|
||
<view class="m-result-box wobble animated" @click.stop="nothing" v-else>
|
||
<view class="m-result-cancel" @click="cancelprize">✕</view>
|
||
<view class="m-failimg-bg">
|
||
<image
|
||
lazy-load
|
||
src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/img/nothing.png"
|
||
class="m-fail-img"
|
||
/>
|
||
</view>
|
||
<view class="m-fail-name">{{ DrawInfo.LosingDesc }}</view>
|
||
<view class="m-fail-button" @click="cancelprize">继续抽奖</view>
|
||
</view>
|
||
</view>
|
||
<view class="mskshare" v-if="clickshare" @click="cancelshare">
|
||
<!-- <image lazy-load src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/images/share.png" class="share-oncemore" mode="widthFix"></image> -->
|
||
<view class="share-text">
|
||
<view>你今天已经没有砸蛋机会了</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import $ from "../../helpers/util";
|
||
|
||
import dayCountdown from "../../components/day-countdown.vue";
|
||
|
||
import wxParse from "@/components/u-parse/u-parse.vue";
|
||
|
||
import { mapState, mapMutations } from "vuex";
|
||
|
||
export default {
|
||
data: function () {
|
||
return {
|
||
options: {},
|
||
click: false,
|
||
clickmsk: false,
|
||
clickshare: false,
|
||
drawdesc: [],
|
||
DrawInfo: {},
|
||
RemainingCount: 0,
|
||
PrizeResult: {},
|
||
rows: [],
|
||
Coupons: [],
|
||
isCancelSuccess: true,
|
||
isCancel: true,
|
||
CouponAmount: 0,
|
||
user_is_new: 0,
|
||
isPage: false,
|
||
outdated: false,
|
||
ImgPath: "",
|
||
animationData: {},
|
||
selectImg: 0,
|
||
move: false,
|
||
activity_id: 0,
|
||
};
|
||
},
|
||
components: {
|
||
dayCountdown,
|
||
wxParse,
|
||
},
|
||
computed: mapState([
|
||
"Config",
|
||
"StateCode",
|
||
"notice",
|
||
"plantformInfo",
|
||
"shopInfo",
|
||
"userInfo",
|
||
"hasLogin",
|
||
]),
|
||
onLoad: function (options) {
|
||
uni.setNavigationBarTitle({
|
||
title: this.__("砸金蛋"),
|
||
});
|
||
|
||
var that = this;
|
||
that.setData({
|
||
activity_id: options.activity_id || 0,
|
||
options: options,
|
||
});
|
||
|
||
that.getPlantformInfo(function (plantformInfo) {
|
||
$.isNull(that.userInfo)
|
||
? that.getUserInfo(function () {
|
||
that.setData({
|
||
user_is_new: that.userInfo.user_is_new,
|
||
CouponAmount: that.userInfo.CouponAmount,
|
||
}),
|
||
that.initData();
|
||
}, options.uid)
|
||
: that.initData();
|
||
});
|
||
},
|
||
onShow: function () {
|
||
var e = $.createAnimation({
|
||
duration: 500,
|
||
timingFunction: "ease",
|
||
});
|
||
(this.animation = e),
|
||
this.animation.top(0).left(0).step(),
|
||
this.setData({
|
||
animationData: this.animation.export(),
|
||
});
|
||
},
|
||
methods: {
|
||
...mapMutations([
|
||
"login",
|
||
"logout",
|
||
"getPlantformInfo",
|
||
"forceUserInfo",
|
||
"getUserInfo",
|
||
]),
|
||
|
||
knock: function (e) {
|
||
if (!this.click) {
|
||
this.setData({
|
||
click: true,
|
||
});
|
||
if (this.RemainingCount > 0) {
|
||
this.getPosition();
|
||
} else if (this.RemainingCount == 0) {
|
||
this.setData({
|
||
clickshare: true,
|
||
});
|
||
return;
|
||
}
|
||
this.animation
|
||
.top(e.changedTouches[0].pageY - 375)
|
||
.left(e.changedTouches[0].pageX - 75)
|
||
.step(),
|
||
this.setData({
|
||
animationData: this.animation.export(),
|
||
}),
|
||
setTimeout(
|
||
function () {
|
||
this.animation.translateX(-25).rotate(-120).step(),
|
||
this.setData({
|
||
animationData: this.animation.export(),
|
||
});
|
||
}.bind(this),
|
||
500
|
||
),
|
||
setTimeout(
|
||
function () {
|
||
this.animation.translateX(25).rotate(60).step(),
|
||
this.setData({
|
||
animationData: this.animation.export(),
|
||
});
|
||
}.bind(this),
|
||
1e3
|
||
),
|
||
setTimeout(
|
||
function () {
|
||
this.setData({
|
||
selectImg: e.target.dataset.num,
|
||
});
|
||
}.bind(this),
|
||
1200
|
||
);
|
||
}
|
||
},
|
||
|
||
onShareAppMessage: function () {
|
||
var e = this;
|
||
return (
|
||
this.setData({
|
||
clickshare: false,
|
||
click: false,
|
||
}),
|
||
{
|
||
title: "我已经中奖啦，你也赶紧来砸金蛋吧~",
|
||
desc: "幸运砸金蛋，快来参与吧~",
|
||
path:
|
||
"/activity/smashgoldeneggs/smashgoldeneggs?uid=" +
|
||
this.userInfo.user_id,
|
||
success: function (t) {
|
||
e.sharefriend();
|
||
},
|
||
}
|
||
);
|
||
},
|
||
sharefriend: function () {
|
||
var e = {
|
||
Category: 2,
|
||
},
|
||
t = this;
|
||
$.xsr1($.makeUrl(activityapi.ShareLuckyDraw, e), function (e) {
|
||
e.Code == 0 &&
|
||
e.Info != null &&
|
||
(t.setData({
|
||
RemainingCount: t.RemainingCount,
|
||
}),
|
||
t.initData());
|
||
});
|
||
},
|
||
|
||
initData: function () {
|
||
let that = this;
|
||
// 2砸金蛋，1大转盘
|
||
var params = {
|
||
activity_type: 2,
|
||
activity_type_id: this.StateCode.ACTIVITY_TYPE_LOTTERY,
|
||
activity_id: this.activity_id,
|
||
};
|
||
|
||
// 等级规则
|
||
$.request({
|
||
url: this.Config.URL.user.listsLottery,
|
||
data: params,
|
||
success: function (data, status, msg, code) {
|
||
that.setData({
|
||
isPage: true,
|
||
ImgPath: that.plantformInfo.AppIconPath,
|
||
});
|
||
//console.log(that.plantformInfo.AppIconPath);
|
||
if (status == 200) {
|
||
that.setData({
|
||
DrawInfo: data,
|
||
RemainingCount: data.remaining_count,
|
||
outdated: data.outdated,
|
||
activity_id: data.activity_id,
|
||
});
|
||
if (that.DrawInfo.winner_rows.items.length > 0) {
|
||
var n =
|
||
that.DrawInfo.winner_rows.items.length % 5 > 0
|
||
? parseInt(that.DrawInfo.winner_rows.items.length / 5 + 1)
|
||
: that.DrawInfo.winner_rows.items.length / 5,
|
||
r = [];
|
||
for (var i = 0; i < n; i++) {
|
||
r.push(i);
|
||
}
|
||
that.setData({
|
||
rows: r,
|
||
});
|
||
}
|
||
|
||
if ($.isNull(data.activity_rule.activity_intro)) {
|
||
this.drawdesc = data.activity_rule.activity_intro
|
||
.replace(/\\/g, "")
|
||
.replace(/<img/g, '<img style="display:none;"');
|
||
|
||
this.setData({
|
||
drawdesc: drawdesc,
|
||
});
|
||
}
|
||
} else {
|
||
that.setData({
|
||
outdated: false,
|
||
});
|
||
}
|
||
},
|
||
});
|
||
},
|
||
getPosition: function () {
|
||
var params = {
|
||
activity_id: this.activity_id,
|
||
},
|
||
t = this;
|
||
// 等级规则
|
||
$.request({
|
||
url: this.Config.URL.user.doLottery,
|
||
data: params,
|
||
success: function (data, status, msg, code) {
|
||
if (status == 200) {
|
||
t.setData({
|
||
PrizeResult: data,
|
||
});
|
||
setTimeout(function () {
|
||
t.setData({
|
||
clickmsk: true,
|
||
});
|
||
}, 2e3);
|
||
} else {
|
||
$.alert("抽奖失败"),
|
||
t.setData({
|
||
click: false,
|
||
});
|
||
}
|
||
},
|
||
});
|
||
},
|
||
cancelprize: function () {
|
||
this.animation.top(0).left(0).translateX(0).rotate(0).step(),
|
||
this.setData({
|
||
clickmsk: false,
|
||
selectImg: 0,
|
||
animationData: this.animation.export(),
|
||
move: true,
|
||
});
|
||
var e = this;
|
||
setTimeout(function () {
|
||
e.setData({
|
||
move: false,
|
||
});
|
||
}, 1e3),
|
||
setTimeout(function () {
|
||
e.setData({
|
||
click: false,
|
||
});
|
||
}, 1200),
|
||
this.initData();
|
||
},
|
||
cancelshare: function () {
|
||
this.setData({
|
||
clickshare: false,
|
||
}),
|
||
this.setData({
|
||
prize: -1,
|
||
times: 0,
|
||
click: false,
|
||
});
|
||
},
|
||
nothing: function () {},
|
||
doReceive: function () {
|
||
this.cancel(), this.userReceiveCoupon();
|
||
},
|
||
cancel: function () {
|
||
this.setData({
|
||
isCancel: false,
|
||
});
|
||
},
|
||
cancelsuccess: function () {
|
||
this.setData({
|
||
isCancelSuccess: true,
|
||
});
|
||
},
|
||
innertouch: function () {},
|
||
userReceiveCoupon: function () {
|
||
var params = {
|
||
activity_id: this.activity_id,
|
||
activity_type: 2,
|
||
activity_type_id: this.StateCode.ACTIVITY_TYPE_LOTTERY,
|
||
};
|
||
var t = this;
|
||
$.request({
|
||
url: this.Config.URL.user.listsLotteryHistory,
|
||
data: params,
|
||
success: function (data, status, msg, code) {
|
||
if (status == 200) {
|
||
t.setData({
|
||
isCancelSuccess: false,
|
||
Coupons: data.items,
|
||
});
|
||
} else {
|
||
$.alert(msg);
|
||
}
|
||
},
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
|
||
|
||
<style lang="scss">
|
||
@import "../../styles/_variables";
|
||
|
||
page {
|
||
background: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/smashingEggs-bg.png)
|
||
center top no-repeat #cb1944;
|
||
background-size: cover;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.activity-outdated {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #f8f8f8;
|
||
}
|
||
|
||
.box {
|
||
margin: 0 30rpx 30rpx;
|
||
}
|
||
|
||
.remainingcount {
|
||
position: relative;
|
||
margin-top: 435rpx;
|
||
color: yellow;
|
||
font-size: 36rpx;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.egg-box {
|
||
margin-top: 120rpx;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.egg {
|
||
width: 230rpx;
|
||
display: inline-block;
|
||
}
|
||
|
||
.egg image {
|
||
width: 100%;
|
||
}
|
||
|
||
.hammer {
|
||
position: absolute;
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
background: url(https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/Hammer.png)
|
||
center top no-repeat;
|
||
background-size: cover;
|
||
z-index: 5;
|
||
}
|
||
|
||
.egg-top {
|
||
margin-bottom: 22rpx;
|
||
}
|
||
|
||
.winner-box {
|
||
background: #fee39f;
|
||
position: relative;
|
||
padding-bottom: 20rpx;
|
||
margin-top: 130rpx;
|
||
}
|
||
|
||
.winner-title {
|
||
text-align: center;
|
||
color: $default-skin-bg;
|
||
font-size: 28rpx;
|
||
line-height: 70rpx;
|
||
height: 70rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.winner-img {
|
||
width: 150rpx;
|
||
position: absolute;
|
||
left: -12rpx;
|
||
top: 8rpx;
|
||
}
|
||
|
||
.winner-list {
|
||
max-height: 300rpx;
|
||
border: 1px solid $default-skin-bg;
|
||
margin: 0 20rpx;
|
||
overflow: scroll;
|
||
position: relative;
|
||
}
|
||
|
||
.m-winner-item {
|
||
height: 50rpx;
|
||
color: $default-skin-bg;
|
||
font-size: 26rpx;
|
||
line-height: 50rpx;
|
||
padding-left: 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.m-winner-item:nth-child(odd) {
|
||
background: #fad97c;
|
||
}
|
||
|
||
.m-winner-item:nth-child(even) {
|
||
background: #fee39f;
|
||
}
|
||
|
||
.prize-name {
|
||
position: absolute;
|
||
left: 380rpx;
|
||
}
|
||
|
||
.rule-box {
|
||
background: #fee39f;
|
||
position: relative;
|
||
margin-top: 20rpx;
|
||
padding: 70rpx 30rpx 30rpx;
|
||
font-size: 26rpx;
|
||
line-height: 40rpx;
|
||
color: $default-skin-bg;
|
||
}
|
||
|
||
.mskprize {
|
||
position: fixed;
|
||
height: 100%;
|
||
width: 100%;
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
z-index: 5;
|
||
top: 0;
|
||
left: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: white;
|
||
text-align: center;
|
||
}
|
||
|
||
.mskshare {
|
||
position: fixed;
|
||
height: 100%;
|
||
width: 100%;
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
z-index: 5;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.share-oncemore {
|
||
width: 700rpx;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.share-text {
|
||
margin: 0 auto;
|
||
font-size: 40rpx;
|
||
line-height: 80rpx;
|
||
color: white;
|
||
text-align: center;
|
||
margin-top: 45%;
|
||
}
|
||
|
||
.m-result-box {
|
||
width: 500rpx;
|
||
height: 600rpx;
|
||
background: #db384b;
|
||
position: relative;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.m-result-cancel {
|
||
position: absolute;
|
||
right: 25rpx;
|
||
top: 15rpx;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.m-success-text {
|
||
line-height: 80rpx;
|
||
margin-top: 50rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.m-success-img {
|
||
width: 250rpx;
|
||
height: 250rpx;
|
||
background: white;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.m-success-name {
|
||
color: #ffac33;
|
||
font-size: 26rpx;
|
||
line-height: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
|
||
.m-success-bottom {
|
||
position: absolute;
|
||
bottom: 40rpx;
|
||
line-height: 65rpx;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.succes-continue {
|
||
height: 65rpx;
|
||
width: 200rpx;
|
||
background: #ffca3a;
|
||
display: inline-block;
|
||
border-radius: 5rpx;
|
||
}
|
||
|
||
.succes-checkprice {
|
||
height: 65rpx;
|
||
width: 200rpx;
|
||
background: white;
|
||
color: black;
|
||
display: inline-block;
|
||
border-radius: 5rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.m-failimg-bg {
|
||
width: 350rpx;
|
||
height: 350rpx;
|
||
border-radius: 175rpx;
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
margin: 40rpx auto 20rpx;
|
||
padding: 50rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.m-fail-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 150rpx;
|
||
background-color: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.m-fail-name {
|
||
font-size: 26rpx;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.m-fail-button {
|
||
width: 300rpx;
|
||
height: 65rpx;
|
||
line-height: 65rpx;
|
||
position: absolute;
|
||
bottom: 40rpx;
|
||
background: #ffca3a;
|
||
border-radius: 5rpx;
|
||
font-size: 28rpx;
|
||
left: 100rpx;
|
||
}
|
||
|
||
.red-dot {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border-radius: 10rpx;
|
||
background: $default-skin-bg;
|
||
position: fixed;
|
||
bottom: 220rpx;
|
||
right: 20rpx;
|
||
z-index: 5;
|
||
}
|
||
|
||
.u-tap-btn {
|
||
position: fixed;
|
||
right: 20rpx;
|
||
bottom: 40rpx;
|
||
}
|
||
|
||
.u-go-home {
|
||
border-radius: 100%;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border: 1px solid #eee;
|
||
font-size: 20rpx;
|
||
text-align: center;
|
||
background-color: #fff;
|
||
box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.35);
|
||
z-index: 2;
|
||
opacity: 0.8;
|
||
line-height: 80rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.u-go-home .iconfont {
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.move1 {
|
||
position: relative;
|
||
animation: mymove1 1s;
|
||
-webkit-animation: mymove1 1s reverse;
|
||
}
|
||
|
||
@keyframes mymove1 {
|
||
from {
|
||
left: 0px;
|
||
}
|
||
|
||
to {
|
||
left: 230rpx;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes mymove1 {
|
||
from {
|
||
left: 0px;
|
||
}
|
||
|
||
to {
|
||
left: 230rpx;
|
||
}
|
||
}
|
||
|
||
.move2 {
|
||
position: relative;
|
||
animation: mymove2 1s reverse;
|
||
-webkit-animation: mymove2 1s reverse;
|
||
}
|
||
|
||
@keyframes mymove2 {
|
||
from {
|
||
top: 0px;
|
||
left: 0;
|
||
}
|
||
|
||
to {
|
||
top: 285rpx;
|
||
left: 115rpx;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes mymove2 {
|
||
from {
|
||
top: 0px;
|
||
left: 0;
|
||
}
|
||
|
||
to {
|
||
top: 285rpx;
|
||
left: 115rpx;
|
||
}
|
||
}
|
||
|
||
.move3 {
|
||
position: relative;
|
||
animation: mymove3 1s reverse;
|
||
-webkit-animation: mymove3 1s reverse;
|
||
}
|
||
|
||
@keyframes mymove3 {
|
||
from {
|
||
bottom: 0px;
|
||
left: 0;
|
||
}
|
||
|
||
to {
|
||
bottom: 285rpx;
|
||
left: 115rpx;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes mymove3 {
|
||
from {
|
||
bottom: 0px;
|
||
left: 0;
|
||
}
|
||
|
||
to {
|
||
bottom: 285rpx;
|
||
left: 115rpx;
|
||
}
|
||
}
|
||
|
||
.move4 {
|
||
position: relative;
|
||
animation: mymove4 1s reverse;
|
||
-webkit-animation: mymove4 1s reverse;
|
||
}
|
||
|
||
@keyframes mymove4 {
|
||
from {
|
||
right: 0px;
|
||
}
|
||
|
||
to {
|
||
right: 230rpx;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes mymove4 {
|
||
from {
|
||
right: 0px;
|
||
}
|
||
|
||
to {
|
||
right: 230rpx;
|
||
}
|
||
}
|
||
|
||
.move5 {
|
||
position: relative;
|
||
animation: mymove5 1s reverse;
|
||
-webkit-animation: mymove5 1s reverse;
|
||
}
|
||
|
||
@keyframes mymove5 {
|
||
from {
|
||
right: 0px;
|
||
}
|
||
|
||
to {
|
||
right: 230rpx;
|
||
}
|
||
}
|
||
|
||
@-webkit-keyframes mymove5 {
|
||
from {
|
||
right: 0px;
|
||
}
|
||
|
||
to {
|
||
right: 230rpx;
|
||
}
|
||
}
|
||
</style> |