<template>
|
<view class="pop popMyPrize" :class="isShow?'show':''">
|
<view class="popMyPrize_wrapper">
|
<view class="popMyPrize_content">
|
<view class="popMyPrize_itemBox">
|
<view class="popMyPrize_item noData" v-if="myPrizeList.length<=0">暂无数据</view>
|
<view class="popMyPrize_item" v-for="mItem,mIndex in myPrizeList" :key="mIndex">
|
<image class="popMyPrize_itemImg" :src="mItem.prizeImgUrl" />
|
<view class="popMyPrize_itemText">
|
<view class="popMyPrize_itemName">{{mItem.prizeName}}</view>
|
<view class="popMyPrize_itemInfo"><text class="label">中奖时间：</text><text>{{mItem.prizeTime.replace('T',' ').split('.')[0]}}</text><br><text class="label">活动日：</text><text class="name">{{mItem.prizeSource}}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="popMyPrize_close" @click="hide()"></view>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: "popMyPrize",
|
props: {
|
myPrizeList:{
|
type: Array,
|
default: [],
|
}
|
},
|
data() {
|
return {
|
isShow: false,
|
};
|
},
|
methods: {
|
show() {
|
this.isShow = true;
|
},
|
hide() {
|
this.isShow = false;
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.popMyPrize {
|
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;
|
}
|
}
|
.popMyPrize_wrapper{
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
padding-bottom: 120rpx;
|
}
|
.popMyPrize_content {
|
width: 565rpx;
|
position: relative;
|
padding-top: 200rpx;
|
padding-bottom: 50rpx;
|
}
|
|
.popMyPrize_content:before {
|
content: '';
|
display: block;
|
width: 100%;
|
height: 51%;
|
position: absolute;
|
left: 0;
|
top: 0;
|
z-index: 0;
|
background: url(https://ossacmall.bluedeer.com.cn/app/static/images/popMyPrize_bg.png) center top/100% auto no-repeat;
|
}
|
|
.popMyPrize_content:after {
|
content: '';
|
display: block;
|
width: 100%;
|
height: 51%;
|
position: absolute;
|
left: 0;
|
bottom: 0;
|
z-index: 0;
|
background: url(https://ossacmall.bluedeer.com.cn/app/static/images/popMyPrize_bg.png) center bottom/100% auto no-repeat;
|
}
|
|
.popMyPrize_itemBox {
|
max-height: 800rpx;
|
overflow-y: scroll;
|
position: relative;
|
z-index: 2;
|
}
|
|
.popMyPrize_item {
|
width: 501rpx;
|
height: 180rpx;
|
margin: 0 auto;
|
margin-bottom: 20rpx;
|
position: relative;
|
background: url(https://ossacmall.bluedeer.com.cn/app/static/images/popMyPrize_itemBg.png) center top/contain no-repeat;
|
&:last-child{
|
margin-bottom: 0;
|
}
|
}
|
.noData{
|
font-size: 24rpx;
|
text-align: center;
|
line-height: 180rpx;
|
}
|
.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;
|
}
|
}
|
|
.popRule_box {
|
padding-bottom: 100rpx;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
|
.popRule_img {
|
width: 565rpx;
|
height: 609rpx;
|
}
|
|
|
}
|
|
.popMyPrize_close {
|
position: absolute;
|
left: 50%;
|
margin-left: -45rpx;
|
bottom: 0;
|
width: 90rpx;
|
height: 90rpx;
|
background: url("https://ossacmall.bluedeer.com.cn/app/static/images/pop_close2.png") center center/78rpx auto no-repeat;
|
|
}
|
</style>
|
