<template>
|
<view class="pop popGetPrize" :class="isShow?'show':''">
|
<view class="popGetPrize_box" :class="prizeInfo.prizeName&&prizeInfo.prizeName!=='谢谢参与'?'':'noPrize'">
|
<view class="popGetPrize_light"></view>
|
<view class="popGetPrize_bg"></view>
|
<view class="popGetPrize_title"></view>
|
<view class="popMyPrize_item" v-if="prizeInfo.prizeName&&prizeInfo.prizeName!=='谢谢参与'">
|
<image class="popMyPrize_itemImg" :src="prizeInfo.prizeImgUrl" />
|
<view class="popMyPrize_itemText">
|
<view class="popMyPrize_itemName">{{prizeInfo.prizeName}}</view>
|
<view class="popMyPrize_itemInfo"><text
|
class="label">中奖时间：</text><text>{{prizeInfo.prizeTime.replace('T',' ').split('.')[0]}}</text><br><text
|
class="label">活动日：</text><text
|
class="name">{{prizeInfo.prizeSource?prizeInfo.prizeSource:mdayInfo.name}}</text>
|
</view>
|
</view>
|
</view>
|
<view class="noData">未中奖</view>
|
<view class="popGetPrize_icon"></view>
|
<view class="popGetPrize_close" @click="hide()"></view>
|
</view>
|
</view>
|
|
</template>
|
|
<script>
|
export default {
|
name: "popGetPrize",
|
props: {
|
mdayInfo: {
|
type: Object,
|
default: {},
|
},
|
prizeInfo: {
|
type: Object,
|
default: {},
|
}
|
},
|
data() {
|
return {
|
isShow: false,
|
};
|
},
|
methods: {
|
show() {
|
this.isShow = true;
|
},
|
hide() {
|
this.isShow = false;
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.popGetPrize {
|
position: fixed;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 11111;
|
background-color: rgba(0, 0, 0, .7);
|
display: none;
|
|
&.show {
|
display: block;
|
}
|
}
|
|
.popGetPrize_wrapper {
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
padding-bottom: 120rpx;
|
}
|
|
.popGetPrize_box {
|
width: 561rpx;
|
height: 487rpx;
|
position: absolute;
|
left: 50%;
|
margin-left: -280.0rpx;
|
top: 50%;
|
margin-top: -216.0rpx;
|
}
|
.popGetPrize_light{
|
width: 570rpx;
|
height: 420rpx;
|
position: absolute;
|
left: 50%;
|
margin-left: -280.0rpx;
|
top: -200rpx;
|
z-index: 0;
|
background: url(https://ossacmall.bluedeer.com.cn/app/static/images/popGetPrize_light.png) center top/contain no-repeat;
|
}
|
.popGetPrize_box .popGetPrize_bg{
|
width: 100%;
|
height: 100%;
|
background: linear-gradient(to bottom,#fdfbdf 0%,#fdfbdf 12%,#fff16e 70%,#ffca41 100%);
|
box-sizing: border-box;
|
border: 2rpx solid #ffffff;
|
border-radius: 48rpx;
|
position: relative;
|
}
|
.noPrize.popGetPrize_box{
|
height: 306rpx;
|
margin-top: -153rpx;
|
}
|
.noPrize.popGetPrize_box .popGetPrize_bg{
|
background: linear-gradient(to bottom,#ffffff 0%,#ffffff 12%,#fffab6 70%,#fdf9cc 100%);
|
}
|
.popGetPrize_title {
|
width: 224rpx;
|
height: 69rpx;
|
position: absolute;
|
left: 50%;
|
margin-left: -111.5rpx;
|
top: 126rpx;
|
background: url(https://ossacmall.bluedeer.com.cn/app/static/images/popGetPrize_title.png) center top/contain no-repeat;
|
}
|
|
.noPrize .popGetPrize_title {
|
background-image: url(https://ossacmall.bluedeer.com.cn/app/static/images/popGetPrize_title0.png);
|
}
|
|
.popMyPrize_item {
|
width: 501rpx;
|
height: 180rpx;
|
margin: 0 auto;
|
position: absolute;
|
left: 50%;
|
margin-left: -253.5rpx;
|
top: 218rpx;
|
background: url(https://ossacmall.bluedeer.com.cn/app/static/images/popMyPrize_itemBg.png) center top/contain no-repeat;
|
}
|
|
.noPrize .popMyPrize_item {
|
display: none;
|
}
|
|
.noData {
|
font-size: 32rpx;
|
text-align: center;
|
line-height: 3em;
|
display: none;
|
position: absolute;
|
top: 170rpx;
|
left: 0;
|
width: 100%;
|
font-weight: bold;
|
color: #471000;
|
}
|
|
.noPrize .noData {
|
display: block;
|
}
|
|
.popMyPrize_itemImg {
|
width: 116rpx;
|
height: 115rpx;
|
position: absolute;
|
left: 23rpx;
|
top: 29rpx;
|
}
|
|
.popMyPrize_itemText {
|
width: 320rpx;
|
position: absolute;
|
left: 167rpx;
|
top: 50%;
|
transform: translate(0, -50%);
|
}
|
|
.popMyPrize_itemName {
|
font-size: 24rpx;
|
line-height: 27rpx;
|
font-weight: bold;
|
padding-bottom: 8rpx;
|
}
|
|
.popMyPrize_itemInfo {
|
font-size: 21rpx;
|
line-height: 33rpx;
|
color: #4c4c4c;
|
|
.label {
|
color: #5e5e5e;
|
font-weight: bold;
|
}
|
|
.name {
|
color: #ff8612;
|
font-weight: bold;
|
}
|
}
|
|
.popGetPrize_icon {
|
width: 250rpx;
|
height: 252rpx;
|
position: absolute;
|
left: 50%;
|
margin-left: -115.0rpx;
|
top: -100rpx;
|
background: url(https://ossacmall.bluedeer.com.cn/app/static/images/popGetPrize_icon.png) center top/contain no-repeat;
|
}
|
|
.noPrize .popGetPrize_icon {
|
filter: contrast(0.35) brightness(1.8) grayscale(1);
|
}
|
|
.popGetPrize_close {
|
position: absolute;
|
left: 50%;
|
margin-left: -45rpx;
|
bottom: -100rpx;
|
width: 90rpx;
|
height: 90rpx;
|
background: url("https://ossacmall.bluedeer.com.cn/app/static/images/pop_close2.png") center center/60rpx auto no-repeat;
|
|
}
|
</style>
|
