de-net-official/components/CustomCardCover.vue

<!-- 自定义卡片红包封面 -->
<!-- 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 FontZoom from './FontZoom.vue';
import { RewardType, PlayType } from '../types';
export default {
	name: 'CustomCardCover',
	props: {
		totalCount: {
			type: Number,
			default: 0,
		},
		amountValue: {
			type: Number,
			default: 0,
		},
		tokenSymbol: {
			type: String,
			default: '',
		},
		playType: {
			type: Number,
			default: 1,
		},
		validityDuration: {
			type: String,
			default: '',
		},
		userInfo: {
			type: Object,
			default: () => {},
		},
		rewardType: {
			type: Number,
			default: 1,
		},
		customizedReward: {
			type: String,
			default: '',
		},
		validity: {
			type: String,
			default: '',
		},
		showBottomInfo: {
			type: Boolean,
			default: true,
		},
		customPosterInstalled: {
			type: String,
			default: '',
		},
		posterType: {
			type: Number,
			default: 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, 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>