|
@@ -3,26 +3,33 @@
|
|
|
<view class="result-popup">
|
|
<view class="result-popup">
|
|
|
<view :class="['prize', explode && 'show']">
|
|
<view :class="['prize', explode && 'show']">
|
|
|
<view class="prize_box">
|
|
<view class="prize_box">
|
|
|
- <view class="prize_close" @click="close()"><image src="https://www.chaomangdao.com/image/home/guanbi@2x.png" mode=""></image></view>
|
|
|
|
|
|
|
+ <view class="prize_close" @click="close()">
|
|
|
|
|
+ <image src="https://www.chaomangdao.com/image/home/guanbi@2x.png" mode=""></image>
|
|
|
|
|
+ </view>
|
|
|
<!-- <view class="prize-top" :class="`prize-top-${mode}`">
|
|
<!-- <view class="prize-top" :class="`prize-top-${mode}`">
|
|
|
<image src="/static/image/result/gaizi@2x.png" mode="aspectFit"></image>
|
|
<image src="/static/image/result/gaizi@2x.png" mode="aspectFit"></image>
|
|
|
</view -->
|
|
</view -->
|
|
|
>
|
|
>
|
|
|
<!-- 1开 -->
|
|
<!-- 1开 -->
|
|
|
- <view :class="['prize_shop', 'center', 'onebox', 'tag-' + tag, scale && 'prize_shop_scale']" v-if="mode == 0">
|
|
|
|
|
|
|
+ <view :class="['prize_shop', 'center', 'onebox', 'tag-' + tag, scale && 'prize_shop_scale']"
|
|
|
|
|
+ v-if="mode == 0">
|
|
|
<view class="spining"></view>
|
|
<view class="spining"></view>
|
|
|
<view class="left-top-tag">
|
|
<view class="left-top-tag">
|
|
|
<image class="tag-img" :src="tagImg" mode="aspectFit"></image>
|
|
<image class="tag-img" :src="tagImg" mode="aspectFit"></image>
|
|
|
<text class="tag-text">{{ tagText }}</text>
|
|
<text class="tag-text">{{ tagText }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
- <image class="one" v-if="prizedata && prizedata.prizeInfo" :src="prizedata.prizeInfo[0].image" mode="widthFix"></image>
|
|
|
|
|
- <text class="colorblack" v-if="prizedata && prizedata.prizeInfo">{{ prizedata.prizeInfo[0].goods_name }}</text>
|
|
|
|
|
- <text class="colorblack" v-if="prizedata && prizedata.prizeInfo">¥{{ prizedata.prizeInfo[0].coin_price }}</text>
|
|
|
|
|
|
|
+ <image class="one" v-if="prizedata && prizedata.prizeInfo" :src="prizedata.prizeInfo[0].image"
|
|
|
|
|
+ mode="widthFix"></image>
|
|
|
|
|
+ <text class="colorblack"
|
|
|
|
|
+ v-if="prizedata && prizedata.prizeInfo">{{ prizedata.prizeInfo[0].goods_name }}</text>
|
|
|
|
|
+ <text class="colorblack"
|
|
|
|
|
+ v-if="prizedata && prizedata.prizeInfo">¥{{ prizedata.prizeInfo[0].coin_price }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
<!-- 5开or10开 -->
|
|
<!-- 5开or10开 -->
|
|
|
<view class="prize_ul" :class="'prize_ul-' + mode" v-else>
|
|
<view class="prize_ul" :class="'prize_ul-' + mode" v-else>
|
|
|
<!-- <scroll-view scroll-x="true" class="scroll-view"> -->
|
|
<!-- <scroll-view scroll-x="true" class="scroll-view"> -->
|
|
|
- <view :class="['prize_ul_li', 'twobox', 'flex', 'tag-' + tagFun(item)]" v-for="(item, index) in prizedata.prizeInfo" :key="index">
|
|
|
|
|
|
|
+ <view :class="['prize_ul_li', 'twobox', 'flex', 'tag-' + tagFun(item)]"
|
|
|
|
|
+ v-for="(item, index) in prizedata.prizeInfo" :key="index">
|
|
|
<view class="left-top-tag">
|
|
<view class="left-top-tag">
|
|
|
<image class="tag-img" :src="tagImgFun(item)" mode="aspectFit"></image>
|
|
<image class="tag-img" :src="tagImgFun(item)" mode="aspectFit"></image>
|
|
|
<text class="tag-text">{{ tagTextFun(item) }}</text>
|
|
<text class="tag-text">{{ tagTextFun(item) }}</text>
|
|
@@ -45,7 +52,8 @@
|
|
|
<view v-show="!hide" class="loading-mask">
|
|
<view v-show="!hide" class="loading-mask">
|
|
|
<view :animation="boxAnimation" :class="['animation-wrapper', explode && 'explode']">
|
|
<view :animation="boxAnimation" :class="['animation-wrapper', explode && 'explode']">
|
|
|
<image :src="boxImg" mode="heightFix" class="box"></image>
|
|
<image :src="boxImg" mode="heightFix" class="box"></image>
|
|
|
- <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>
|
|
</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>
|
|
@@ -54,563 +62,617 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
-export default {
|
|
|
|
|
- name: 'show-result',
|
|
|
|
|
- props: {
|
|
|
|
|
- //数量
|
|
|
|
|
- num: Number,
|
|
|
|
|
- /**
|
|
|
|
|
- * 类型 0:正式开盒 1:试玩
|
|
|
|
|
- */
|
|
|
|
|
- type: {
|
|
|
|
|
- type: Number,
|
|
|
|
|
- default: 0
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- data() {
|
|
|
|
|
- return {
|
|
|
|
|
- //奖品列表
|
|
|
|
|
- prizedata: [],
|
|
|
|
|
- //特效
|
|
|
|
|
- scale: false,
|
|
|
|
|
- //开盒动画
|
|
|
|
|
- openLoading: true,
|
|
|
|
|
- boxImg: 'https://www.chaomangdao.com/image/result/box.png',
|
|
|
|
|
- //动画
|
|
|
|
|
- boxAnimation: {},
|
|
|
|
|
- animationTime: 100,
|
|
|
|
|
- explode: false,
|
|
|
|
|
- hide: false
|
|
|
|
|
- };
|
|
|
|
|
- },
|
|
|
|
|
- computed: {
|
|
|
|
|
- //开盒模式 0:1抽 1:5抽 2:9抽
|
|
|
|
|
- mode() {
|
|
|
|
|
- switch (this.num) {
|
|
|
|
|
- case 5:
|
|
|
|
|
- return 1;
|
|
|
|
|
- case 9:
|
|
|
|
|
- return 2;
|
|
|
|
|
- }
|
|
|
|
|
- return 0;
|
|
|
|
|
- },
|
|
|
|
|
- //当前单抽商品
|
|
|
|
|
- currPrizedata() {
|
|
|
|
|
- if (!this.prizedata) {
|
|
|
|
|
- return null;
|
|
|
|
|
- }
|
|
|
|
|
- if (!this.prizedata.prizeInfo || this.prizedata.length < 1) {
|
|
|
|
|
- return null;
|
|
|
|
|
|
|
+ export default {
|
|
|
|
|
+ name: 'show-result',
|
|
|
|
|
+ props: {
|
|
|
|
|
+ //数量
|
|
|
|
|
+ num: Number,
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 类型 0:正式开盒 1:试玩
|
|
|
|
|
+ */
|
|
|
|
|
+ type: {
|
|
|
|
|
+ type: Number,
|
|
|
|
|
+ default: 0
|
|
|
}
|
|
}
|
|
|
- return this.prizedata.prizeInfo[0];
|
|
|
|
|
- },
|
|
|
|
|
- //单抽商品品质
|
|
|
|
|
- tag() {
|
|
|
|
|
- return this.tagFun(this.currPrizedata);
|
|
|
|
|
},
|
|
},
|
|
|
- //单抽品质文本
|
|
|
|
|
- tagText() {
|
|
|
|
|
- return this.tagTextFun(this.currPrizedata);
|
|
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ //奖品列表
|
|
|
|
|
+ prizedata: [],
|
|
|
|
|
+ //特效
|
|
|
|
|
+ scale: false,
|
|
|
|
|
+ //开盒动画
|
|
|
|
|
+ openLoading: true,
|
|
|
|
|
+ boxImg: 'https://www.chaomangdao.com/image/result/box.png',
|
|
|
|
|
+ //动画
|
|
|
|
|
+ boxAnimation: {},
|
|
|
|
|
+ animationTime: 100,
|
|
|
|
|
+ explode: false,
|
|
|
|
|
+ hide: false
|
|
|
|
|
+ };
|
|
|
},
|
|
},
|
|
|
- //单抽品质角标
|
|
|
|
|
- tagImg() {
|
|
|
|
|
- return this.tagImgFun(this.currPrizedata);
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- methods: {
|
|
|
|
|
- //盒子抖动
|
|
|
|
|
- shake: function(animation) {
|
|
|
|
|
- let time = 0;
|
|
|
|
|
- const duration = 90;
|
|
|
|
|
- for (var i = 0; i < 20; i++) {
|
|
|
|
|
- let rotate = -10;
|
|
|
|
|
- let scaleY = 1.1;
|
|
|
|
|
- if (i % 2 != 0) {
|
|
|
|
|
- rotate = 0;
|
|
|
|
|
- scaleY = 1;
|
|
|
|
|
|
|
+ computed: {
|
|
|
|
|
+ //开盒模式 0:1抽 1:5抽 2:9抽
|
|
|
|
|
+ mode() {
|
|
|
|
|
+ switch (this.num) {
|
|
|
|
|
+ case 5:
|
|
|
|
|
+ return 1;
|
|
|
|
|
+ case 9:
|
|
|
|
|
+ return 2;
|
|
|
}
|
|
}
|
|
|
- animation
|
|
|
|
|
- .rotate(rotate)
|
|
|
|
|
- .scaleY(scaleY)
|
|
|
|
|
- .step({ duration });
|
|
|
|
|
- time += duration;
|
|
|
|
|
|
|
+ return 0;
|
|
|
|
|
+ },
|
|
|
|
|
+ //当前单抽商品
|
|
|
|
|
+ currPrizedata() {
|
|
|
|
|
+ if (!this.prizedata) {
|
|
|
|
|
+ return null;
|
|
|
|
|
+ }
|
|
|
|
|
+ if (!this.prizedata.prizeInfo || this.prizedata.length < 1) {
|
|
|
|
|
+ return null;
|
|
|
|
|
+ }
|
|
|
|
|
+ return this.prizedata.prizeInfo[0];
|
|
|
|
|
+ },
|
|
|
|
|
+ //单抽商品品质
|
|
|
|
|
+ tag() {
|
|
|
|
|
+ return this.tagFun(this.currPrizedata);
|
|
|
|
|
+ },
|
|
|
|
|
+ //单抽品质文本
|
|
|
|
|
+ tagText() {
|
|
|
|
|
+ return this.tagTextFun(this.currPrizedata);
|
|
|
|
|
+ },
|
|
|
|
|
+ //单抽品质角标
|
|
|
|
|
+ tagImg() {
|
|
|
|
|
+ return this.tagImgFun(this.currPrizedata);
|
|
|
}
|
|
}
|
|
|
- return time;
|
|
|
|
|
- },
|
|
|
|
|
- //盒子压缩
|
|
|
|
|
- compress: function(animation) {
|
|
|
|
|
- const duration = 100;
|
|
|
|
|
- animation
|
|
|
|
|
- .translateY('5vh')
|
|
|
|
|
- .scaleY(0.9)
|
|
|
|
|
- .scaleX(1.2)
|
|
|
|
|
- .step({ duration });
|
|
|
|
|
- return duration;
|
|
|
|
|
- },
|
|
|
|
|
- //盒子跳跃
|
|
|
|
|
- jump: function(animation) {
|
|
|
|
|
- const duration = 150;
|
|
|
|
|
- animation
|
|
|
|
|
- .translateY('-50vh')
|
|
|
|
|
- .scaleY(1.1)
|
|
|
|
|
- .scaleX(0.9)
|
|
|
|
|
- .step({ duration });
|
|
|
|
|
- return duration;
|
|
|
|
|
},
|
|
},
|
|
|
- open(prizedata) {
|
|
|
|
|
- prizedata.boxImg && (this.boxImg = prizedata.boxImg);
|
|
|
|
|
- //播放音乐
|
|
|
|
|
- // this.startAudio();
|
|
|
|
|
- //打开结果
|
|
|
|
|
- this.$refs.prize.open();
|
|
|
|
|
- //加载动画
|
|
|
|
|
- this.prizedata = prizedata;
|
|
|
|
|
- this.showAnimation();
|
|
|
|
|
- },
|
|
|
|
|
- //播放音乐
|
|
|
|
|
- startAudio() {
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- let audio = document.getElementById('result-audio').querySelector('audio');
|
|
|
|
|
- audio.play();
|
|
|
|
|
- });
|
|
|
|
|
- },
|
|
|
|
|
- showAnimation() {
|
|
|
|
|
- let animation = uni.createAnimation();
|
|
|
|
|
- this.animationTime += this.shake(animation);
|
|
|
|
|
- this.animationTime += this.compress(animation);
|
|
|
|
|
- this.animationTime += this.jump(animation);
|
|
|
|
|
- this.animation = animation;
|
|
|
|
|
- this.boxAnimation = this.animation.export();
|
|
|
|
|
- console.log(this.animationTime, '动画时长');
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- // this.explode = true;
|
|
|
|
|
- // this.hideAnimation();
|
|
|
|
|
- if (this.tag != 'normal') {
|
|
|
|
|
- //开启震动
|
|
|
|
|
- try {
|
|
|
|
|
- uni.vibrateShort({
|
|
|
|
|
- success: function() {
|
|
|
|
|
- console.log('震动');
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ //盒子抖动
|
|
|
|
|
+ shake: function(animation) {
|
|
|
|
|
+ let time = 0;
|
|
|
|
|
+ const duration = 90;
|
|
|
|
|
+ for (var i = 0; i < 20; i++) {
|
|
|
|
|
+ let rotate = -10;
|
|
|
|
|
+ let scaleY = 1.1;
|
|
|
|
|
+ if (i % 2 != 0) {
|
|
|
|
|
+ rotate = 0;
|
|
|
|
|
+ scaleY = 1;
|
|
|
|
|
+ }
|
|
|
|
|
+ animation
|
|
|
|
|
+ .rotate(rotate)
|
|
|
|
|
+ .scaleY(scaleY)
|
|
|
|
|
+ .step({
|
|
|
|
|
+ duration
|
|
|
});
|
|
});
|
|
|
- } catch (e) {
|
|
|
|
|
- console.log(e);
|
|
|
|
|
|
|
+ time += duration;
|
|
|
|
|
+ }
|
|
|
|
|
+ return time;
|
|
|
|
|
+ },
|
|
|
|
|
+ //盒子压缩
|
|
|
|
|
+ compress: function(animation) {
|
|
|
|
|
+ const duration = 100;
|
|
|
|
|
+ animation
|
|
|
|
|
+ .translateY('5vh')
|
|
|
|
|
+ .scaleY(0.9)
|
|
|
|
|
+ .scaleX(1.2)
|
|
|
|
|
+ .step({
|
|
|
|
|
+ duration
|
|
|
|
|
+ });
|
|
|
|
|
+ return duration;
|
|
|
|
|
+ },
|
|
|
|
|
+ //盒子跳跃
|
|
|
|
|
+ jump: function(animation) {
|
|
|
|
|
+ const duration = 150;
|
|
|
|
|
+ animation
|
|
|
|
|
+ .translateY('-50vh')
|
|
|
|
|
+ .scaleY(1.1)
|
|
|
|
|
+ .scaleX(0.9)
|
|
|
|
|
+ .step({
|
|
|
|
|
+ duration
|
|
|
|
|
+ });
|
|
|
|
|
+ return duration;
|
|
|
|
|
+ },
|
|
|
|
|
+ open(prizedata) {
|
|
|
|
|
+ prizedata.boxImg && (this.boxImg = prizedata.boxImg);
|
|
|
|
|
+ //播放音乐
|
|
|
|
|
+ // this.startAudio();
|
|
|
|
|
+ //打开结果
|
|
|
|
|
+ this.$refs.prize.open();
|
|
|
|
|
+ //加载动画
|
|
|
|
|
+ this.prizedata = prizedata;
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ this.showAnimation();
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ //播放音乐
|
|
|
|
|
+ startAudio() {
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ let audio = document.getElementById('result-audio').querySelector('audio');
|
|
|
|
|
+ audio.play();
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ showAnimation() {
|
|
|
|
|
+ let animation = uni.createAnimation();
|
|
|
|
|
+ this.animationTime += this.shake(animation);
|
|
|
|
|
+ this.animationTime += this.compress(animation);
|
|
|
|
|
+ this.animationTime += this.jump(animation);
|
|
|
|
|
+ this.animation = animation;
|
|
|
|
|
+ this.boxAnimation = this.animation.export();
|
|
|
|
|
+ console.log(this.animationTime, '动画时长');
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ this.explode = true;
|
|
|
|
|
+ // this.hideAnimation();
|
|
|
|
|
+ if (this.tag != 'normal') {
|
|
|
|
|
+ //开启震动
|
|
|
|
|
+ try {
|
|
|
|
|
+ uni.vibrateShort({
|
|
|
|
|
+ success: function() {
|
|
|
|
|
+ console.log('震动');
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ } catch (e) {
|
|
|
|
|
+ console.log(e);
|
|
|
|
|
+ }
|
|
|
|
|
+ //开启效果
|
|
|
|
|
+ // this.scale = true
|
|
|
|
|
+ // setTimeout(() => {
|
|
|
|
|
+ // this.scale = false
|
|
|
|
|
+ // }, 1000)
|
|
|
}
|
|
}
|
|
|
- //开启效果
|
|
|
|
|
- // this.scale = true
|
|
|
|
|
- // setTimeout(() => {
|
|
|
|
|
- // this.scale = false
|
|
|
|
|
- // }, 1000)
|
|
|
|
|
|
|
+ }, this.animationTime);
|
|
|
|
|
+ },
|
|
|
|
|
+ hideAnimation() {
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ this.hide = true;
|
|
|
|
|
+ }, 1300);
|
|
|
|
|
+ },
|
|
|
|
|
+ //关闭
|
|
|
|
|
+ close() {
|
|
|
|
|
+ this.animationTime = 0;
|
|
|
|
|
+ this.explode = false;
|
|
|
|
|
+ this.hide = false;
|
|
|
|
|
+ this.$emit('close');
|
|
|
|
|
+ this.$refs.prize.close();
|
|
|
|
|
+ },
|
|
|
|
|
+ //商品品质
|
|
|
|
|
+ tagFun(prizeInfo) {
|
|
|
|
|
+ if (!prizeInfo) return null;
|
|
|
|
|
+ return prizeInfo.tag;
|
|
|
|
|
+ },
|
|
|
|
|
+ //品质文本
|
|
|
|
|
+ tagTextFun(prizeInfo) {
|
|
|
|
|
+ if (!prizeInfo) return null;
|
|
|
|
|
+ if (prizeInfo.tag == 'normal') {
|
|
|
|
|
+ return '普通';
|
|
|
}
|
|
}
|
|
|
- }, this.animationTime);
|
|
|
|
|
- },
|
|
|
|
|
- hideAnimation() {
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- this.hide = true;
|
|
|
|
|
- }, 1300);
|
|
|
|
|
- },
|
|
|
|
|
- //关闭
|
|
|
|
|
- close() {
|
|
|
|
|
- this.animationTime = 0;
|
|
|
|
|
- this.explode = false;
|
|
|
|
|
- this.hide = false;
|
|
|
|
|
- this.$emit('close');
|
|
|
|
|
- this.$refs.prize.close();
|
|
|
|
|
- },
|
|
|
|
|
- //商品品质
|
|
|
|
|
- tagFun(prizeInfo) {
|
|
|
|
|
- if (!prizeInfo) return null;
|
|
|
|
|
- return prizeInfo.tag;
|
|
|
|
|
- },
|
|
|
|
|
- //品质文本
|
|
|
|
|
- tagTextFun(prizeInfo) {
|
|
|
|
|
- if (!prizeInfo) return null;
|
|
|
|
|
- if (prizeInfo.tag == 'normal') {
|
|
|
|
|
- return '普通';
|
|
|
|
|
- }
|
|
|
|
|
- if (prizeInfo.tag == 'rare') {
|
|
|
|
|
- return '稀有';
|
|
|
|
|
- }
|
|
|
|
|
- if (prizeInfo.tag == 'supreme') {
|
|
|
|
|
- return '史诗';
|
|
|
|
|
- }
|
|
|
|
|
- if (prizeInfo.tag == 'legend') {
|
|
|
|
|
- return '传说';
|
|
|
|
|
|
|
+ if (prizeInfo.tag == 'rare') {
|
|
|
|
|
+ return '稀有';
|
|
|
|
|
+ }
|
|
|
|
|
+ if (prizeInfo.tag == 'supreme') {
|
|
|
|
|
+ return '史诗';
|
|
|
|
|
+ }
|
|
|
|
|
+ if (prizeInfo.tag == 'legend') {
|
|
|
|
|
+ return '传说';
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ //品质角标
|
|
|
|
|
+ tagImgFun(prizeInfo) {
|
|
|
|
|
+ if (!prizeInfo) return null;
|
|
|
|
|
+ if (prizeInfo.tag == 'normal') {
|
|
|
|
|
+ return 'https://www.chaomangdao.com/image/tag-1.png';
|
|
|
|
|
+ }
|
|
|
|
|
+ if (prizeInfo.tag == 'rare') {
|
|
|
|
|
+ return 'https://www.chaomangdao.com/image/tag-2.png';
|
|
|
|
|
+ }
|
|
|
|
|
+ if (prizeInfo.tag == 'supreme') {
|
|
|
|
|
+ return 'https://www.chaomangdao.com/image/tag-3.png';
|
|
|
|
|
+ }
|
|
|
|
|
+ if (prizeInfo.tag == 'legend') {
|
|
|
|
|
+ return 'https://www.chaomangdao.com/image/tag-4.png';
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ recycle() {
|
|
|
|
|
+ this.$refs.prize.close();
|
|
|
|
|
+ uni.showModal({
|
|
|
|
|
+ cancelText: '取消',
|
|
|
|
|
+ confirmText: '确认',
|
|
|
|
|
+ title: '一键回收',
|
|
|
|
|
+ content: '是否确认一键回收?',
|
|
|
|
|
+ success: res => {
|
|
|
|
|
+ if (res.confirm) {
|
|
|
|
|
+ this.$emit('recycle', this.prizedata);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- //品质角标
|
|
|
|
|
- tagImgFun(prizeInfo) {
|
|
|
|
|
- if (!prizeInfo) return null;
|
|
|
|
|
- if (prizeInfo.tag == 'normal') {
|
|
|
|
|
- return 'https://www.chaomangdao.com/image/tag-1.png';
|
|
|
|
|
- }
|
|
|
|
|
- if (prizeInfo.tag == 'rare') {
|
|
|
|
|
- return 'https://www.chaomangdao.com/image/tag-2.png';
|
|
|
|
|
- }
|
|
|
|
|
- if (prizeInfo.tag == 'supreme') {
|
|
|
|
|
- return 'https://www.chaomangdao.com/image/tag-3.png';
|
|
|
|
|
- }
|
|
|
|
|
- if (prizeInfo.tag == 'legend') {
|
|
|
|
|
- return 'https://www.chaomangdao.com/image/tag-4.png';
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ created() {
|
|
|
|
|
+ // let animation = uni.createAnimation();
|
|
|
|
|
+ // this.animationTime = 0;
|
|
|
|
|
+ // this.animationTime += shake(animation);
|
|
|
|
|
+ // this.animationTime += compress(animation);
|
|
|
|
|
+ // this.animationTime += jump(animation);
|
|
|
|
|
+ // this.animation = animation;
|
|
|
},
|
|
},
|
|
|
- recycle() {
|
|
|
|
|
- this.$refs.prize.close();
|
|
|
|
|
- uni.showModal({
|
|
|
|
|
- cancelText: '取消',
|
|
|
|
|
- confirmText: '确认',
|
|
|
|
|
- title: '一键回收',
|
|
|
|
|
- content: '是否确认一键回收?',
|
|
|
|
|
- success: res => {
|
|
|
|
|
- if (res.confirm) {
|
|
|
|
|
- this.$emit('recycle', this.prizedata);
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ destroyed() {
|
|
|
|
|
+ console.log(111);
|
|
|
}
|
|
}
|
|
|
- },
|
|
|
|
|
- created() {
|
|
|
|
|
- // let animation = uni.createAnimation();
|
|
|
|
|
- // this.animationTime = 0;
|
|
|
|
|
- // this.animationTime += shake(animation);
|
|
|
|
|
- // this.animationTime += compress(animation);
|
|
|
|
|
- // this.animationTime += jump(animation);
|
|
|
|
|
- // this.animation = animation;
|
|
|
|
|
- },
|
|
|
|
|
- destroyed() {
|
|
|
|
|
- console.log(111);
|
|
|
|
|
- }
|
|
|
|
|
-};
|
|
|
|
|
|
|
+ };
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
|
-.onebox {
|
|
|
|
|
- height: 372rpx;
|
|
|
|
|
- width: 352rpx;
|
|
|
|
|
- border-radius: 26rpx;
|
|
|
|
|
- background-color: #fff;
|
|
|
|
|
-}
|
|
|
|
|
-.twobox {
|
|
|
|
|
- width: 176rpx;
|
|
|
|
|
- border-radius: 13rpx;
|
|
|
|
|
- background-color: #fff;
|
|
|
|
|
-}
|
|
|
|
|
-.result-popup-main {
|
|
|
|
|
- z-index: 9999;
|
|
|
|
|
- .result-popup {
|
|
|
|
|
- background-image: url('https://www.chaomangdao.com/image/kjbg.jpg');
|
|
|
|
|
- position: fixed;
|
|
|
|
|
- bottom: 0;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- background-repeat: no-repeat;
|
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
|
|
|
+ .onebox {
|
|
|
|
|
+ height: 372rpx;
|
|
|
|
|
+ width: 352rpx;
|
|
|
|
|
+ border-radius: 26rpx;
|
|
|
|
|
+ background-color: #fff;
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
-.prize {
|
|
|
|
|
- transform: scale(0);
|
|
|
|
|
- opacity: 0;
|
|
|
|
|
- transition: 0.2s;
|
|
|
|
|
- width: 750rpx;
|
|
|
|
|
- height: 100vh;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- &.show {
|
|
|
|
|
- transform: scale(1);
|
|
|
|
|
- opacity: 1;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .twobox {
|
|
|
|
|
+ width: 176rpx;
|
|
|
|
|
+ border-radius: 13rpx;
|
|
|
|
|
+ background-color: #fff;
|
|
|
}
|
|
}
|
|
|
- .prize_box {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 1120rpx;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- // background: url(static/image/result/guang@2x.png) no-repeat;
|
|
|
|
|
- background-size: 100% auto;
|
|
|
|
|
- background-position: top;
|
|
|
|
|
- background-repeat: no-repeat;
|
|
|
|
|
- .prize_close {
|
|
|
|
|
- width: 64rpx;
|
|
|
|
|
- height: 64rpx;
|
|
|
|
|
- top: 280rpx;
|
|
|
|
|
- right: 30rpx;
|
|
|
|
|
- position: absolute;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .result-popup-main {
|
|
|
|
|
+ z-index: 9999;
|
|
|
|
|
+
|
|
|
|
|
+ .result-popup {
|
|
|
|
|
+ background-image: url('https://www.chaomangdao.com/image/kjbg.jpg');
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
}
|
|
|
- .prize-top {
|
|
|
|
|
- width: 528rpx;
|
|
|
|
|
- height: 270rpx;
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 120rpx;
|
|
|
|
|
- left: 118rpx;
|
|
|
|
|
- &-2 {
|
|
|
|
|
- top: 40rpx;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .prize {
|
|
|
|
|
+ transform: scale(0);
|
|
|
|
|
+ opacity: 0;
|
|
|
|
|
+ transition: 0.2s;
|
|
|
|
|
+ width: 750rpx;
|
|
|
|
|
+ height: 100vh;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+
|
|
|
|
|
+ &.show {
|
|
|
|
|
+ transform: scale(1);
|
|
|
|
|
+ opacity: 1;
|
|
|
}
|
|
}
|
|
|
- .prize_footer {
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .prize_box {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- &-2 {
|
|
|
|
|
- bottom: -200rpx;
|
|
|
|
|
- }
|
|
|
|
|
- .btn {
|
|
|
|
|
- height: 84rpx;
|
|
|
|
|
- border-radius: 16rpx;
|
|
|
|
|
|
|
+ height: 1120rpx;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ // background: url(static/image/result/guang@2x.png) no-repeat;
|
|
|
|
|
+ background-size: 100% auto;
|
|
|
|
|
+ background-position: top;
|
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
|
+
|
|
|
|
|
+ .prize_close {
|
|
|
|
|
+ width: 64rpx;
|
|
|
|
|
+ height: 64rpx;
|
|
|
|
|
+ top: 280rpx;
|
|
|
|
|
+ right: 30rpx;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
}
|
|
}
|
|
|
- .btn-1 {
|
|
|
|
|
- bottom: 0rpx;
|
|
|
|
|
- background-image: -webkit-linear-gradient(0deg, #89f7fe 0%, #66a6ff 100%);
|
|
|
|
|
- font-size: 38rpx;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- line-height: 86rpx;
|
|
|
|
|
- width: 159px;
|
|
|
|
|
- border-radius: 8px;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .prize-top {
|
|
|
|
|
+ width: 528rpx;
|
|
|
|
|
+ height: 270rpx;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- left: 40rpx;
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
|
|
+ top: 120rpx;
|
|
|
|
|
+ left: 118rpx;
|
|
|
|
|
+
|
|
|
|
|
+ &-2 {
|
|
|
|
|
+ top: 40rpx;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- .btn-0 {
|
|
|
|
|
- bottom: 0rpx;
|
|
|
|
|
- background-image: -webkit-linear-gradient(60deg, #ffc8de 0%, #ff67a4 100%);
|
|
|
|
|
- font-size: 38rpx;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- line-height: 86rpx;
|
|
|
|
|
- right: 40rpx;
|
|
|
|
|
- width: 159px;
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .prize_footer {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+
|
|
|
|
|
+ &-2 {
|
|
|
|
|
+ bottom: -200rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btn {
|
|
|
|
|
+ height: 84rpx;
|
|
|
|
|
+ border-radius: 16rpx;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btn-1 {
|
|
|
|
|
+ bottom: 0rpx;
|
|
|
|
|
+ background-image: -webkit-linear-gradient(0deg, #89f7fe 0%, #66a6ff 100%);
|
|
|
|
|
+ font-size: 38rpx;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height: 86rpx;
|
|
|
|
|
+ width: 159px;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: 40rpx;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btn-0 {
|
|
|
|
|
+ bottom: 0rpx;
|
|
|
|
|
+ background-image: -webkit-linear-gradient(60deg, #ffc8de 0%, #ff67a4 100%);
|
|
|
|
|
+ font-size: 38rpx;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height: 86rpx;
|
|
|
|
|
+ right: 40rpx;
|
|
|
|
|
+ width: 159px;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
- .shiwan {
|
|
|
|
|
- background: url(https://www.chaomangdao.com/image/open/tanchuangbeijing@2x.png) no-repeat;
|
|
|
|
|
- background-size: cover;
|
|
|
|
|
- }
|
|
|
|
|
- .prize_ul {
|
|
|
|
|
- width: 566rpx;
|
|
|
|
|
- // padding: 0 92rpx;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-wrap: wrap;
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 336rpx;
|
|
|
|
|
- left: 92rpx;
|
|
|
|
|
- &-2 {
|
|
|
|
|
- top: 360rpx;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .shiwan {
|
|
|
|
|
+ background: url(https://www.chaomangdao.com/image/open/tanchuangbeijing@2x.png) no-repeat;
|
|
|
|
|
+ background-size: cover;
|
|
|
}
|
|
}
|
|
|
- &::after {
|
|
|
|
|
- content: '';
|
|
|
|
|
- width: 176rpx;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .prize_ul {
|
|
|
|
|
+ width: 566rpx;
|
|
|
|
|
+ // padding: 0 92rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 336rpx;
|
|
|
|
|
+ left: 92rpx;
|
|
|
|
|
+
|
|
|
|
|
+ &-2 {
|
|
|
|
|
+ top: 360rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &::after {
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ width: 176rpx;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
- // .scroll-view {
|
|
|
|
|
- // width: 522rpx;
|
|
|
|
|
- // white-space:nowrap;
|
|
|
|
|
- .prize_ul_li {
|
|
|
|
|
- margin-bottom: 16rpx;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- width: 176rpx;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- padding: 8rpx;
|
|
|
|
|
- // margin-right: 20rpx;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
- .two {
|
|
|
|
|
|
|
+ // .scroll-view {
|
|
|
|
|
+ // width: 522rpx;
|
|
|
|
|
+ // white-space:nowrap;
|
|
|
|
|
+ .prize_ul_li {
|
|
|
|
|
+ margin-bottom: 16rpx;
|
|
|
|
|
+ position: relative;
|
|
|
width: 176rpx;
|
|
width: 176rpx;
|
|
|
- height: 176rpx;
|
|
|
|
|
- }
|
|
|
|
|
- .a {
|
|
|
|
|
- font-size: 24rpx;
|
|
|
|
|
- // font-family: PingFangSC-Medium, PingFang SC;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- color: #171a20;
|
|
|
|
|
- width: 146rpx;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
|
- }
|
|
|
|
|
- .price {
|
|
|
|
|
- margin-top: 6rpx;
|
|
|
|
|
- font-size: 24rpx;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- color: #171a20;
|
|
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ padding: 8rpx;
|
|
|
|
|
+ // margin-right: 20rpx;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+
|
|
|
|
|
+ .two {
|
|
|
|
|
+ width: 176rpx;
|
|
|
|
|
+ height: 176rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .a {
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ // font-family: PingFangSC-Medium, PingFang SC;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #171a20;
|
|
|
|
|
+ width: 146rpx;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .price {
|
|
|
|
|
+ margin-top: 6rpx;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #171a20;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .left-top-tag {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ z-index: 9999999;
|
|
|
|
|
+ width: 3rem;
|
|
|
|
|
+ height: 3rem;
|
|
|
|
|
+
|
|
|
|
|
+ .tag-img {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tag-text {
|
|
|
|
|
+ font-size: 0.6rem !important;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 30%;
|
|
|
|
|
+ left: 30%;
|
|
|
|
|
+ color: #fff !important;
|
|
|
|
|
+ width: auto !important;
|
|
|
|
|
+ transform: translateX(-50%) translateY(-50%) rotate(-45deg);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- .left-top-tag {
|
|
|
|
|
|
|
+
|
|
|
|
|
+ // }
|
|
|
|
|
+ .prize_shop {
|
|
|
|
|
+ transition: 1s;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- top: 0;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- z-index: 9999999;
|
|
|
|
|
- width: 3rem;
|
|
|
|
|
- height: 3rem;
|
|
|
|
|
- .tag-img {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- }
|
|
|
|
|
- .tag-text {
|
|
|
|
|
- font-size: 0.6rem !important;
|
|
|
|
|
|
|
+ top: 336rpx;
|
|
|
|
|
+ left: 198rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+
|
|
|
|
|
+ .spining {
|
|
|
|
|
+ z-index: -1;
|
|
|
|
|
+ height: 150vh;
|
|
|
|
|
+ width: 150vh;
|
|
|
|
|
+ background-image: url(https://www.chaomangdao.com/image/result/spining.png);
|
|
|
|
|
+ background-repeat: no-repeat;
|
|
|
|
|
+ background-size: 100% 100%;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ image {
|
|
|
|
|
+ width: 174rpx;
|
|
|
|
|
+ height: 235rpx;
|
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ text {
|
|
|
|
|
+ width: 70%;
|
|
|
|
|
+ font-size: 16rpx;
|
|
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #171a20;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .colorblack {
|
|
|
|
|
+ font-size: 32rpx !important;
|
|
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: #171a20;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .left-top-tag {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- top: 30%;
|
|
|
|
|
- left: 30%;
|
|
|
|
|
- color: #fff !important;
|
|
|
|
|
- width: auto !important;
|
|
|
|
|
- transform: translateX(-50%) translateY(-50%) rotate(-45deg);
|
|
|
|
|
|
|
+ top: -2rpx;
|
|
|
|
|
+ left: -2rpx;
|
|
|
|
|
+ z-index: 9999999;
|
|
|
|
|
+ width: 5rem;
|
|
|
|
|
+ height: 5rem;
|
|
|
|
|
+
|
|
|
|
|
+ .tag-img {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tag-text {
|
|
|
|
|
+ font-size: 1rem;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 30%;
|
|
|
|
|
+ left: 30%;
|
|
|
|
|
+ color: #fff !important;
|
|
|
|
|
+ width: auto !important;
|
|
|
|
|
+ transform: translateX(-50%) translateY(-50%) rotate(-45deg);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
- // }
|
|
|
|
|
- .prize_shop {
|
|
|
|
|
- transition: 1s;
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 336rpx;
|
|
|
|
|
- left: 198rpx;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- flex-direction: column;
|
|
|
|
|
- .spining {
|
|
|
|
|
- z-index: -1;
|
|
|
|
|
- height: 150vh;
|
|
|
|
|
- width: 150vh;
|
|
|
|
|
- background-image: url(https://www.chaomangdao.com/image/result/spining.png);
|
|
|
|
|
- background-repeat: no-repeat;
|
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
|
- position: absolute;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .tag-normal {
|
|
|
|
|
+ box-shadow: 0 0 40rpx 18rpx #9d85ff;
|
|
|
}
|
|
}
|
|
|
- image {
|
|
|
|
|
- width: 174rpx;
|
|
|
|
|
- height: 235rpx;
|
|
|
|
|
- margin-bottom: 20rpx;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .tag-rare {
|
|
|
|
|
+ box-shadow: 0 0 40rpx 18rpx #47a8ff;
|
|
|
}
|
|
}
|
|
|
- text {
|
|
|
|
|
- width: 70%;
|
|
|
|
|
- font-size: 16rpx;
|
|
|
|
|
- font-family: PingFangSC-Medium, PingFang SC;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- color: #171a20;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .tag-supreme {
|
|
|
|
|
+ box-shadow: 0 0 40rpx 32rpx #feb337;
|
|
|
}
|
|
}
|
|
|
- .colorblack {
|
|
|
|
|
- font-size: 32rpx !important;
|
|
|
|
|
- font-family: PingFangSC-Medium, PingFang SC;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- color: #171a20;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .tag-legend {
|
|
|
|
|
+ box-shadow: 0 0 40rpx 32rpx #fe615e;
|
|
|
}
|
|
}
|
|
|
- .left-top-tag {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: -2rpx;
|
|
|
|
|
- left: -2rpx;
|
|
|
|
|
- z-index: 9999999;
|
|
|
|
|
- width: 5rem;
|
|
|
|
|
- height: 5rem;
|
|
|
|
|
- .tag-img {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- }
|
|
|
|
|
- .tag-text {
|
|
|
|
|
- font-size: 1rem;
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 30%;
|
|
|
|
|
- left: 30%;
|
|
|
|
|
- color: #fff !important;
|
|
|
|
|
- width: auto !important;
|
|
|
|
|
- transform: translateX(-50%) translateY(-50%) rotate(-45deg);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .shiwan {
|
|
|
|
|
+ width: 399rpx;
|
|
|
|
|
+ height: 48rpx;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
|
+ margin-top: 40rpx;
|
|
|
|
|
+ background: #000000;
|
|
|
|
|
+ border-radius: 27rpx 27rpx 27rpx 27rpx;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- .tag-normal {
|
|
|
|
|
- box-shadow: 0 0 40rpx 18rpx #9d85ff;
|
|
|
|
|
- }
|
|
|
|
|
- .tag-rare {
|
|
|
|
|
- box-shadow: 0 0 40rpx 18rpx #47a8ff;
|
|
|
|
|
- }
|
|
|
|
|
- .tag-supreme {
|
|
|
|
|
- box-shadow: 0 0 40rpx 32rpx #feb337;
|
|
|
|
|
- }
|
|
|
|
|
- .tag-legend {
|
|
|
|
|
- box-shadow: 0 0 40rpx 32rpx #fe615e;
|
|
|
|
|
- }
|
|
|
|
|
- .shiwan {
|
|
|
|
|
- width: 399rpx;
|
|
|
|
|
- height: 48rpx;
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- font-size: 30rpx;
|
|
|
|
|
- margin-top: 40rpx;
|
|
|
|
|
- background: #000000;
|
|
|
|
|
- border-radius: 27rpx 27rpx 27rpx 27rpx;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ // .left-top-tag {
|
|
|
|
|
+ // z-index: 999999;
|
|
|
|
|
+ // position: absolute;
|
|
|
|
|
+ // left: -2px;
|
|
|
|
|
+ // top: -3px;
|
|
|
|
|
+ // .tag-img {
|
|
|
|
|
+ // height: 100% !important;
|
|
|
|
|
+ // width: 100% !important;
|
|
|
|
|
+ // }
|
|
|
|
|
+ // .tag-text {
|
|
|
|
|
+ // position: absolute;
|
|
|
|
|
+ // top: 30%;
|
|
|
|
|
+ // left: 30%;
|
|
|
|
|
+ // color: #fff !important;
|
|
|
|
|
+ // width: auto !important;
|
|
|
|
|
+ // transform: translateX(-50%) translateY(-50%) rotate(-45deg);
|
|
|
|
|
+ // }
|
|
|
|
|
+ // }
|
|
|
|
|
+ .prize_shop_scale {
|
|
|
|
|
+ transform: scale(1.3);
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
-// .left-top-tag {
|
|
|
|
|
-// z-index: 999999;
|
|
|
|
|
-// position: absolute;
|
|
|
|
|
-// left: -2px;
|
|
|
|
|
-// top: -3px;
|
|
|
|
|
-// .tag-img {
|
|
|
|
|
-// height: 100% !important;
|
|
|
|
|
-// width: 100% !important;
|
|
|
|
|
-// }
|
|
|
|
|
-// .tag-text {
|
|
|
|
|
-// position: absolute;
|
|
|
|
|
-// top: 30%;
|
|
|
|
|
-// left: 30%;
|
|
|
|
|
-// color: #fff !important;
|
|
|
|
|
-// width: auto !important;
|
|
|
|
|
-// transform: translateX(-50%) translateY(-50%) rotate(-45deg);
|
|
|
|
|
-// }
|
|
|
|
|
-// }
|
|
|
|
|
-.prize_shop_scale {
|
|
|
|
|
- transform: scale(1.3);
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.loading-mask {
|
|
|
|
|
- z-index: 999;
|
|
|
|
|
- position: fixed;
|
|
|
|
|
- top: -180rpx;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- height: 100vh;
|
|
|
|
|
- width: 100vw;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: flex-end;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- .animation-wrapper {
|
|
|
|
|
- margin-bottom: 10vh;
|
|
|
|
|
- image {
|
|
|
|
|
- height: 360rpx;
|
|
|
|
|
- }
|
|
|
|
|
- .halo {
|
|
|
|
|
- opacity: 1;
|
|
|
|
|
- transform: scale(0);
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 0;
|
|
|
|
|
- }
|
|
|
|
|
- &.explode {
|
|
|
|
|
- .box {
|
|
|
|
|
- transition: 0.3s;
|
|
|
|
|
- opacity: 0;
|
|
|
|
|
- transform: scale(0);
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .loading-mask {
|
|
|
|
|
+ z-index: 999;
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ top: -180rpx;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ height: 100vh;
|
|
|
|
|
+ width: 100vw;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: flex-end;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+
|
|
|
|
|
+ .animation-wrapper {
|
|
|
|
|
+ margin-bottom: 10vh;
|
|
|
|
|
+
|
|
|
|
|
+ image {
|
|
|
|
|
+ height: 360rpx;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
.halo {
|
|
.halo {
|
|
|
- transition: 1.2s;
|
|
|
|
|
- opacity: 0;
|
|
|
|
|
- transform: scale(5);
|
|
|
|
|
|
|
+ opacity: 1;
|
|
|
|
|
+ transform: scale(0);
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ &.explode {
|
|
|
|
|
+ .box {
|
|
|
|
|
+ transition: 0.3s;
|
|
|
|
|
+ opacity: 0;
|
|
|
|
|
+ transform: scale(0);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .halo {
|
|
|
|
|
+ transition: 1.2s;
|
|
|
|
|
+ opacity: 0;
|
|
|
|
|
+ transform: scale(5);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
-@keyframes rotate {
|
|
|
|
|
- from {
|
|
|
|
|
- transform: rotate(0deg);
|
|
|
|
|
- }
|
|
|
|
|
- to {
|
|
|
|
|
- transform: rotate(360deg);
|
|
|
|
|
|
|
+
|
|
|
|
|
+ @keyframes rotate {
|
|
|
|
|
+ from {
|
|
|
|
|
+ transform: rotate(0deg);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ to {
|
|
|
|
|
+ transform: rotate(360deg);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
|
|
|
|
|
-.spining {
|
|
|
|
|
- transition: 0.3s;
|
|
|
|
|
- animation: rotate 10s linear infinite; /*开始动画后无限循环,用来控制rotate*/
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ .spining {
|
|
|
|
|
+ transition: 0.3s;
|
|
|
|
|
+ animation: rotate 10s linear infinite;
|
|
|
|
|
+ /*开始动画后无限循环,用来控制rotate*/
|
|
|
|
|
+ }
|
|
|
</style>
|
|
</style>
|