<!-- 自定义卡片红包封面 -->
<!-- todo：目前只有自定义奖品类型，货币类型待添加 -->
<template>
<!-- 改版之后的卡片 -->
<div class="not-open-custom-card custom-card">
<img class="customImg" v-if="posterType === 2 && !!customPosterInstalled" :src="customPosterInstalled" />
<div class="common-top" v-else>
<img class="cover" v-if="isLottaryCpd" :src="require('../static/svg/img-custom-lottary-bg.svg')" />
<img class="cover" v-else :src="require('../static/svg/img-custom-common-bg.svg')" />
<img class="gift" :src="require('../static/svg/icon-gift.gif')" />
<div class="prize">
<font-zoom width="340">
<img class="icon" :src="require('../static/svg/icon-gift-inline.svg')"/>
<span class="name" id="custom-name" >
{{customizedReward}}
<span class="total">X{{totalCount}}</span>
</span>
</font-zoom>
</div>
</div>
<!-- 底部公共模块 -->
<div class="common-bottom" v-if="showBottomInfo">
<div class="theme">
<img v-if="isLottaryCpd" class="theme-icon" :src="require('../static/svg/icon-last-time.svg')"/>
<span v-if="isLottaryCpd" class="theme-time" >{{validity || '00:00:00'}}</span>
<span class="theme-info">{{isLottaryCpd ? 'Left' : 'Instant Giveaway'}}</span>
</div>
<div class="winner-info">
<font-zoom width="340">
<span class="count">{{totalCount}}Winners</span>
<span>to Share </span>
<span class="prize-name">{{isMoneyRewardCpd ? amountValue + ' ' + tokenSymbol : customizedReward}}</span>
</font-zoom>
</div>
</div>
</div>
</template>
<script>
import { formatSecondsAsDaysOrTime } from "../utils/help";
import FontZoom from './FontZoom.vue';
import { RewardType, PlayType } from "../types";
export default {
name:'CustomCardCover',
props: {
totalCount: 0,
amountValue: 0,
tokenSymbol: "",
playType: 1,
validityDuration: "",
userInfo: {},
rewardType: 1,
customizedReward: "",
validity: "",
showBottomInfo: true,
customPosterInstalled: "",
posterType: 1
},
data() {
return {
amount_font_size: 22,
}
},
computed: {
isMoneyRewardCpd() {
return this.rewardType === RewardType.money
},
isLottaryCpd() {
return this.playType === PlayType.lottery
}
},
mounted() {
this.setFontSize()
},
methods: {
setFontSize() {
let lendom = document.querySelector('#custom-name');
if (lendom) {
let lenstr = lendom.innerText.length;
let num = parseInt(450 / lenstr);
this.amount_font_size = num < 22 ? num : 22;
}
}
},
components: { FontZoom }
}
</script>
<style scoped lang="scss">
.not-open-custom-card {
width: 100%;
height: 100%;
position: relative;
border-radius: 16px;
filter: drop-shadow(0px 2px 20px rgba(0, 0, 0, 0.1));
.customImg {
width: 100%;
min-height: 373px;
}
.common-top {
position: relative;
}
.money-area {
width: 100%;
position: absolute;
top: 65px;
.txt {
font-weight: 800;
font-size: 16px;
text-align: center;
letter-spacing: 0.3px;
color: #ffffff;
}
.coin {
text-align: center;
width: 100%;
padding: 6px 0;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
img {
width: 46px;
height: 46px;
border-radius: 50%;
border: 3px solid #ffffff;
}
span {
margin-left: 15px;
font-weight: 800;
font-size: 60px;
line-height: 76px;
color: #ffffff;
}
}
.people {
font-weight: 800;
font-size: 13px;
line-height: 16px;
letter-spacing: 0.05em;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.time-area {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 46px;
background: rgba(0,0,0,.15);
color: #FFCC4D;
font-weight: 900;
font-size: 26px;
margin-top: -10px;
.icon-clock {
width: 26px;
height: 26px;
margin-right: 10px;
}
}
}
.title {
position: absolute;
top: 15px;
left: 15px;
z-index: 3;
width: 100%;
display: flex;
align-items: center;
img {
width: 24px;
height: 24px;
border: 2px solid #fff;
border-radius: 50%;
}
span {
margin-left: 10px;
font-weight: 600;
font-size: 16px;
letter-spacing: 0.3px;
color: #fff;
}
}
// .txt {
// width: 100%;
// position: absolute;
// font-style: normal;
// font-weight: 700;
// font-size: 42px;
// line-height: 50px;
// text-align: center;
// color: #FFF2D3;
// top: 90px;
// z-index: 3;
// }
img {
width: 100%;
}
.cover {
border-radius: 16px;
}
.up {
position: absolute;
top: 0;
// box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.1);
z-index: 1;
}
.down {
position: absolute;
top: 253px;
}
.open {
width: 335px;
height: 50px;
cursor: pointer;
position: absolute;
bottom: 28px;
left: 50%;
margin-left: -167.5px;
z-index: 2;
}
.open-gif {
width: 200px;
height: 200px;
text-align: center;
position: absolute;
bottom: 90px;
left: 50%;
margin-left: -100px;
z-index: 3;
}
}
.custom-card {
position: relative;
background:#111214;
width: 100%;
position: relative;
border-radius: 10px;
filter: drop-shadow(0px 2px 20px rgba(0, 0, 0, 0.1));
.cover {
width: 100%;
border-radius: 10px 10px 0 0;
}
.gift {
width: 210px;
position: absolute;
left: 50%;
top: 83px;
transform: translateX(-50%);
}
.prize {
width: 100%;
position: absolute;
top: 76%;
left: 0;
height: 47px;
display: flex;
flex-direction: row;
justify-content: center;
font-style: normal;
font-weight: 800;
font-size: 22px;
line-height: 47px;
letter-spacing: 0.3px;
.icon {
width: 24px;
}
.name {
padding: 0 7px;
color: #fff;
}
.total {
color: #F5C03F;
}
}
.common-bottom {
width: 100%;
height: 62px;
background:#111214;
border-radius: 0 0 10px 10px;
padding: 10px 16px;
font-weight: 500;
font-size: 12px;
line-height: 14px;
letter-spacing: 0.3px;
color: #838383;
line-height: 20px;
.theme {
display: flex;
height: 20px;
align-items: center;
justify-content: flex-start;
&-icon {
width: 12px;
}
&-time {
margin: 0 4px;
color: #1D9BF0;
}
}
.winner-info {
display: flex;
height: 20px;
align-items: center;
justify-content: flex-start;
margin-bottom: 13px;
.count{
color: #1D9BF0;
margin-right: 4px;
}
.prize-name {
color: #1D9BF0;
margin-left: 4px;
}
}
.open-btn {
width: 100%;
height: 45px;
background: linear-gradient(180deg, #4AB6FF 0%, #1D9BF0 100%, #1D9BF0 100%);
border: 1.5px solid rgba(255, 255, 255, 0.15);
border-radius: 52px;
line-height: 45px;
text-align: center;
cursor: pointer;
font-weight: 800;
font-size: 16px;
color: #FFFFFF;
}
}
}
</style>