|
@@ -42,11 +42,12 @@
|
|
<view class="shiwan center" v-else>试玩结果仅供展示哦~</view>
|
|
<view class="shiwan center" v-else>试玩结果仅供展示哦~</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- <view v-show="!hide" class="loading-mask">
|
|
|
|
- <view :animation="boxAnimation" :class="['animation-wrapper', explode && 'explode']">
|
|
|
|
- <image :src="boxImg" mode="heightFix" class="box"></image>
|
|
|
|
|
|
+ <view v-show="!hide" class="loading-mask" @click="showAnimation">
|
|
|
|
+ <view :class="['animation-wrapper', explode && 'explode']">
|
|
|
|
+ <view :animation="boxAnimation"><image :src="boxImg" mode="heightFix" class="box"></image></view>
|
|
<image src="https://www.chaomangdao.com/image/result/halo.png" mode="heightFix" class="halo"></image>
|
|
<image src="https://www.chaomangdao.com/image/result/halo.png" mode="heightFix" class="halo"></image>
|
|
</view>
|
|
</view>
|
|
|
|
+ <view class="shouzhi" v-if="!isopen"><image src="https://www.chaomangdao.com/image/ss.gif" mode=""></image></view>
|
|
</view>
|
|
</view>
|
|
<audio id="result-audio" src="https://www.chaomangdao.com/image/result/1.mp3"></audio>
|
|
<audio id="result-audio" src="https://www.chaomangdao.com/image/result/1.mp3"></audio>
|
|
</view>
|
|
</view>
|
|
@@ -80,7 +81,8 @@ export default {
|
|
boxAnimation: {},
|
|
boxAnimation: {},
|
|
animationTime: 100,
|
|
animationTime: 100,
|
|
explode: false,
|
|
explode: false,
|
|
- hide: false
|
|
|
|
|
|
+ hide: false,
|
|
|
|
+ isopen: false
|
|
};
|
|
};
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
@@ -132,7 +134,9 @@ export default {
|
|
animation
|
|
animation
|
|
.rotate(rotate)
|
|
.rotate(rotate)
|
|
.scaleY(scaleY)
|
|
.scaleY(scaleY)
|
|
- .step({ duration });
|
|
|
|
|
|
+ .step({
|
|
|
|
+ duration
|
|
|
|
+ });
|
|
time += duration;
|
|
time += duration;
|
|
}
|
|
}
|
|
return time;
|
|
return time;
|
|
@@ -144,7 +148,9 @@ export default {
|
|
.translateY('5vh')
|
|
.translateY('5vh')
|
|
.scaleY(0.9)
|
|
.scaleY(0.9)
|
|
.scaleX(1.2)
|
|
.scaleX(1.2)
|
|
- .step({ duration });
|
|
|
|
|
|
+ .step({
|
|
|
|
+ duration
|
|
|
|
+ });
|
|
return duration;
|
|
return duration;
|
|
},
|
|
},
|
|
//盒子跳跃
|
|
//盒子跳跃
|
|
@@ -154,7 +160,9 @@ export default {
|
|
.translateY('-50vh')
|
|
.translateY('-50vh')
|
|
.scaleY(1.1)
|
|
.scaleY(1.1)
|
|
.scaleX(0.9)
|
|
.scaleX(0.9)
|
|
- .step({ duration });
|
|
|
|
|
|
+ .step({
|
|
|
|
+ duration
|
|
|
|
+ });
|
|
return duration;
|
|
return duration;
|
|
},
|
|
},
|
|
open(prizedata) {
|
|
open(prizedata) {
|
|
@@ -165,7 +173,9 @@ export default {
|
|
this.$refs.prize.open();
|
|
this.$refs.prize.open();
|
|
//加载动画
|
|
//加载动画
|
|
this.prizedata = prizedata;
|
|
this.prizedata = prizedata;
|
|
- this.showAnimation();
|
|
|
|
|
|
+ // this.$nextTick(() => {
|
|
|
|
+ // this.showAnimation();
|
|
|
|
+ // });
|
|
},
|
|
},
|
|
//播放音乐
|
|
//播放音乐
|
|
startAudio() {
|
|
startAudio() {
|
|
@@ -175,15 +185,17 @@ export default {
|
|
});
|
|
});
|
|
},
|
|
},
|
|
showAnimation() {
|
|
showAnimation() {
|
|
|
|
+ this.isopen = true;
|
|
let animation = uni.createAnimation();
|
|
let animation = uni.createAnimation();
|
|
this.animationTime += this.shake(animation);
|
|
this.animationTime += this.shake(animation);
|
|
this.animationTime += this.compress(animation);
|
|
this.animationTime += this.compress(animation);
|
|
this.animationTime += this.jump(animation);
|
|
this.animationTime += this.jump(animation);
|
|
this.animation = animation;
|
|
this.animation = animation;
|
|
- this.boxAnimation = this.animation.export();
|
|
|
|
|
|
+ this.boxAnimation = animation.export();
|
|
console.log(this.animationTime, '动画时长');
|
|
console.log(this.animationTime, '动画时长');
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
- // this.explode = true;
|
|
|
|
|
|
+ this.explode = true;
|
|
|
|
+ this.hide = true;
|
|
// this.hideAnimation();
|
|
// this.hideAnimation();
|
|
if (this.tag != 'normal') {
|
|
if (this.tag != 'normal') {
|
|
//开启震动
|
|
//开启震动
|
|
@@ -214,6 +226,7 @@ export default {
|
|
this.animationTime = 0;
|
|
this.animationTime = 0;
|
|
this.explode = false;
|
|
this.explode = false;
|
|
this.hide = false;
|
|
this.hide = false;
|
|
|
|
+ this.isopen = false;
|
|
this.$emit('close');
|
|
this.$emit('close');
|
|
this.$refs.prize.close();
|
|
this.$refs.prize.close();
|
|
},
|
|
},
|
|
@@ -290,13 +303,16 @@ export default {
|
|
border-radius: 26rpx;
|
|
border-radius: 26rpx;
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
|
|
+
|
|
.twobox {
|
|
.twobox {
|
|
width: 176rpx;
|
|
width: 176rpx;
|
|
border-radius: 13rpx;
|
|
border-radius: 13rpx;
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
|
|
+
|
|
.result-popup-main {
|
|
.result-popup-main {
|
|
z-index: 9999;
|
|
z-index: 9999;
|
|
|
|
+
|
|
.result-popup {
|
|
.result-popup {
|
|
background-image: url('https://www.chaomangdao.com/image/kjbg.jpg');
|
|
background-image: url('https://www.chaomangdao.com/image/kjbg.jpg');
|
|
position: fixed;
|
|
position: fixed;
|
|
@@ -306,6 +322,7 @@ export default {
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.prize {
|
|
.prize {
|
|
transform: scale(0);
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
opacity: 0;
|
|
@@ -314,10 +331,12 @@ export default {
|
|
height: 100vh;
|
|
height: 100vh;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
|
+
|
|
&.show {
|
|
&.show {
|
|
transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
+
|
|
.prize_box {
|
|
.prize_box {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 1120rpx;
|
|
height: 1120rpx;
|
|
@@ -327,33 +346,41 @@ export default {
|
|
background-size: 100% auto;
|
|
background-size: 100% auto;
|
|
background-position: top;
|
|
background-position: top;
|
|
background-repeat: no-repeat;
|
|
background-repeat: no-repeat;
|
|
|
|
+
|
|
.prize_close {
|
|
.prize_close {
|
|
width: 64rpx;
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
height: 64rpx;
|
|
top: 280rpx;
|
|
top: 280rpx;
|
|
right: 30rpx;
|
|
right: 30rpx;
|
|
position: absolute;
|
|
position: absolute;
|
|
|
|
+ z-index: 999999;
|
|
}
|
|
}
|
|
|
|
+
|
|
.prize-top {
|
|
.prize-top {
|
|
width: 528rpx;
|
|
width: 528rpx;
|
|
height: 270rpx;
|
|
height: 270rpx;
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 120rpx;
|
|
top: 120rpx;
|
|
left: 118rpx;
|
|
left: 118rpx;
|
|
|
|
+
|
|
&-2 {
|
|
&-2 {
|
|
top: 40rpx;
|
|
top: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.prize_footer {
|
|
.prize_footer {
|
|
width: 100%;
|
|
width: 100%;
|
|
|
|
+
|
|
&-2 {
|
|
&-2 {
|
|
bottom: -200rpx;
|
|
bottom: -200rpx;
|
|
}
|
|
}
|
|
|
|
+
|
|
.btn {
|
|
.btn {
|
|
height: 84rpx;
|
|
height: 84rpx;
|
|
border-radius: 16rpx;
|
|
border-radius: 16rpx;
|
|
position: absolute;
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
+
|
|
.btn-1 {
|
|
.btn-1 {
|
|
bottom: 0rpx;
|
|
bottom: 0rpx;
|
|
background-image: -webkit-linear-gradient(0deg, #89f7fe 0%, #66a6ff 100%);
|
|
background-image: -webkit-linear-gradient(0deg, #89f7fe 0%, #66a6ff 100%);
|
|
@@ -367,6 +394,7 @@ export default {
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
+
|
|
.btn-0 {
|
|
.btn-0 {
|
|
bottom: 0rpx;
|
|
bottom: 0rpx;
|
|
background-image: -webkit-linear-gradient(60deg, #ffc8de 0%, #ff67a4 100%);
|
|
background-image: -webkit-linear-gradient(60deg, #ffc8de 0%, #ff67a4 100%);
|
|
@@ -380,10 +408,12 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.shiwan {
|
|
.shiwan {
|
|
background: url(https://www.chaomangdao.com/image/open/tanchuangbeijing@2x.png) no-repeat;
|
|
background: url(https://www.chaomangdao.com/image/open/tanchuangbeijing@2x.png) no-repeat;
|
|
background-size: cover;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
|
|
+
|
|
.prize_ul {
|
|
.prize_ul {
|
|
width: 566rpx;
|
|
width: 566rpx;
|
|
// padding: 0 92rpx;
|
|
// padding: 0 92rpx;
|
|
@@ -393,14 +423,17 @@ export default {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 336rpx;
|
|
top: 336rpx;
|
|
left: 92rpx;
|
|
left: 92rpx;
|
|
|
|
+
|
|
&-2 {
|
|
&-2 {
|
|
top: 360rpx;
|
|
top: 360rpx;
|
|
}
|
|
}
|
|
|
|
+
|
|
&::after {
|
|
&::after {
|
|
content: '';
|
|
content: '';
|
|
width: 176rpx;
|
|
width: 176rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
// .scroll-view {
|
|
// .scroll-view {
|
|
// width: 522rpx;
|
|
// width: 522rpx;
|
|
// white-space:nowrap;
|
|
// white-space:nowrap;
|
|
@@ -421,6 +454,7 @@ export default {
|
|
width: 176rpx;
|
|
width: 176rpx;
|
|
height: 176rpx;
|
|
height: 176rpx;
|
|
}
|
|
}
|
|
|
|
+
|
|
.a {
|
|
.a {
|
|
font-size: 24rpx;
|
|
font-size: 24rpx;
|
|
// font-family: PingFangSC-Medium, PingFang SC;
|
|
// font-family: PingFangSC-Medium, PingFang SC;
|
|
@@ -431,12 +465,14 @@ export default {
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
+
|
|
.price {
|
|
.price {
|
|
margin-top: 6rpx;
|
|
margin-top: 6rpx;
|
|
font-size: 24rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
color: #171a20;
|
|
color: #171a20;
|
|
}
|
|
}
|
|
|
|
+
|
|
.left-top-tag {
|
|
.left-top-tag {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 0;
|
|
top: 0;
|
|
@@ -444,10 +480,12 @@ export default {
|
|
z-index: 9999999;
|
|
z-index: 9999999;
|
|
width: 3rem;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
height: 3rem;
|
|
|
|
+
|
|
.tag-img {
|
|
.tag-img {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
+
|
|
.tag-text {
|
|
.tag-text {
|
|
font-size: 0.6rem !important;
|
|
font-size: 0.6rem !important;
|
|
position: absolute;
|
|
position: absolute;
|
|
@@ -460,6 +498,7 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
// }
|
|
// }
|
|
.prize_shop {
|
|
.prize_shop {
|
|
transition: 1s;
|
|
transition: 1s;
|
|
@@ -468,6 +507,7 @@ export default {
|
|
left: 198rpx;
|
|
left: 198rpx;
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
|
+
|
|
.spining {
|
|
.spining {
|
|
z-index: -1;
|
|
z-index: -1;
|
|
height: 150vh;
|
|
height: 150vh;
|
|
@@ -477,11 +517,13 @@ export default {
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
+
|
|
image {
|
|
image {
|
|
width: 174rpx;
|
|
width: 174rpx;
|
|
height: 235rpx;
|
|
height: 235rpx;
|
|
margin-bottom: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
|
|
+
|
|
text {
|
|
text {
|
|
width: 70%;
|
|
width: 70%;
|
|
font-size: 16rpx;
|
|
font-size: 16rpx;
|
|
@@ -493,12 +535,14 @@ export default {
|
|
text-overflow: ellipsis;
|
|
text-overflow: ellipsis;
|
|
text-align: center;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
+
|
|
.colorblack {
|
|
.colorblack {
|
|
font-size: 32rpx !important;
|
|
font-size: 32rpx !important;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
color: #171a20;
|
|
color: #171a20;
|
|
}
|
|
}
|
|
|
|
+
|
|
.left-top-tag {
|
|
.left-top-tag {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: -2rpx;
|
|
top: -2rpx;
|
|
@@ -506,10 +550,12 @@ export default {
|
|
z-index: 9999999;
|
|
z-index: 9999999;
|
|
width: 5rem;
|
|
width: 5rem;
|
|
height: 5rem;
|
|
height: 5rem;
|
|
|
|
+
|
|
.tag-img {
|
|
.tag-img {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
+
|
|
.tag-text {
|
|
.tag-text {
|
|
font-size: 1rem;
|
|
font-size: 1rem;
|
|
position: absolute;
|
|
position: absolute;
|
|
@@ -521,18 +567,23 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.tag-normal {
|
|
.tag-normal {
|
|
box-shadow: 0 0 40rpx 18rpx #9d85ff;
|
|
box-shadow: 0 0 40rpx 18rpx #9d85ff;
|
|
}
|
|
}
|
|
|
|
+
|
|
.tag-rare {
|
|
.tag-rare {
|
|
box-shadow: 0 0 40rpx 18rpx #47a8ff;
|
|
box-shadow: 0 0 40rpx 18rpx #47a8ff;
|
|
}
|
|
}
|
|
|
|
+
|
|
.tag-supreme {
|
|
.tag-supreme {
|
|
box-shadow: 0 0 40rpx 32rpx #feb337;
|
|
box-shadow: 0 0 40rpx 32rpx #feb337;
|
|
}
|
|
}
|
|
|
|
+
|
|
.tag-legend {
|
|
.tag-legend {
|
|
box-shadow: 0 0 40rpx 32rpx #fe615e;
|
|
box-shadow: 0 0 40rpx 32rpx #fe615e;
|
|
}
|
|
}
|
|
|
|
+
|
|
.shiwan {
|
|
.shiwan {
|
|
width: 399rpx;
|
|
width: 399rpx;
|
|
height: 48rpx;
|
|
height: 48rpx;
|
|
@@ -543,6 +594,7 @@ export default {
|
|
border-radius: 27rpx 27rpx 27rpx 27rpx;
|
|
border-radius: 27rpx 27rpx 27rpx 27rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
// .left-top-tag {
|
|
// .left-top-tag {
|
|
// z-index: 999999;
|
|
// z-index: 999999;
|
|
// position: absolute;
|
|
// position: absolute;
|
|
@@ -575,23 +627,33 @@ export default {
|
|
display: flex;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
|
+ .shouzhi {
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 100rpx;
|
|
|
|
+ width: 400rpx;
|
|
|
|
+ height: 400rpx;
|
|
|
|
+ }
|
|
.animation-wrapper {
|
|
.animation-wrapper {
|
|
margin-bottom: 10vh;
|
|
margin-bottom: 10vh;
|
|
|
|
+
|
|
image {
|
|
image {
|
|
height: 360rpx;
|
|
height: 360rpx;
|
|
}
|
|
}
|
|
|
|
+
|
|
.halo {
|
|
.halo {
|
|
opacity: 1;
|
|
opacity: 1;
|
|
transform: scale(0);
|
|
transform: scale(0);
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
+
|
|
&.explode {
|
|
&.explode {
|
|
.box {
|
|
.box {
|
|
transition: 0.3s;
|
|
transition: 0.3s;
|
|
opacity: 0;
|
|
opacity: 0;
|
|
transform: scale(0);
|
|
transform: scale(0);
|
|
}
|
|
}
|
|
|
|
+
|
|
.halo {
|
|
.halo {
|
|
transition: 1.2s;
|
|
transition: 1.2s;
|
|
opacity: 0;
|
|
opacity: 0;
|
|
@@ -600,10 +662,12 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
@keyframes rotate {
|
|
@keyframes rotate {
|
|
from {
|
|
from {
|
|
transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
+
|
|
to {
|
|
to {
|
|
transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@@ -611,6 +675,7 @@ export default {
|
|
|
|
|
|
.spining {
|
|
.spining {
|
|
transition: 0.3s;
|
|
transition: 0.3s;
|
|
- animation: rotate 10s linear infinite; /*开始动画后无限循环,用来控制rotate*/
|
|
|
|
|
|
+ animation: rotate 10s linear infinite;
|
|
|
|
+ /*开始动画后无限循环,用来控制rotate*/
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|