de-net/src/view/components/custom-card-cover.vue

<!-- 自定义卡片红包封面 -->
<template>
    <div class="custom-card" v-if="data.customPosterUrl">
        <img class="customImg" :src="data.customPosterUrl" />
        <div class="common-bottom">
            <div class="theme">
                <img v-if="isLottaryCpd" class="icon" :src="require('@/assets/svg/icon-last-time.svg')"/>
                <span v-if="isLottaryCpd" class="time" >{{data.countDown || formatSecondsAsDaysOrTime(data.validityDuration * 3600)}}</span>
                <span class="info">{{isLottaryCpd ? 'Left' : 'Instant Giveaway'}}</span>
            </div>
            <div class="winner-info">
                <component-zoom width="320" fontSize="12">
                    <span class="count">{{data.totalCount}} Winners</span>
                    <span>to Share </span>
                    <span class="prize-name">{{isMoneyRewardCpd ? data.amountValue + ' ' + data.tokenSymbol : data.customizedReward}}</span>
                </component-zoom>
            </div>
            <div class="open-btn" @click="open">
                {{isLottaryCpd ? 'Participate Now' : 'Open Now'}}
            </div>
        </div>
    </div>
    <div class="not-open" v-else-if="isMoneyRewardCpd">
        <img class="cover" v-if="data.type == 2" :src="require('@/assets/svg/img-preview-draw-bg.svg')"  />
        <img class="cover" v-else :src="require('@/assets/subject/001-card.png')"  />

        <img class="open-gif"
            v-if="data.type == 2"
            src="@/assets/img/img-preview-draw-box.png" />
        <img class="open-gif"
            v-else
            :src="require('@/assets/gif/001.gif')" />

        <img v-if="data.type == 2"
            :src="require('@/assets/svg/img-preview-draw-open.svg')"
            class="open"
            @click="open" />
        <img v-else
            :src="require('@/assets/svg/icon-open.svg')"
            class="open"
            @click="open"/>

        <div class="title" v-if="data.userInfo">
            <img :src="data.userInfo.avatarUrl" />
            <span>{{
                data.userInfo.nickName || ""
            }}</span>
        </div>
        <div class="money-area">
            <div class="txt">
                <span>{{data.currencyCode == 'USD' ? 'US Dollar' : data.tokenSymbol}} </span>
                &nbsp;GIVEAWAY
            </div>
            <div class="coin">
                <img :src="data.currencyIconUrl || imgHeaderCover" />
                <span id="preview-after-amount"
                    :style="{
                        fontSize: amount_font_size + 'px'
                    }">{{ data.amountValue }}</span>
            </div>
            <div class="time-area" v-if="data.type == 2">
                <img class="icon-clock" :src="require('@/assets/svg/icon-time.svg')" />
                {{data.countDown || formatSecondsAsDaysOrTime(data.validityDuration * 3600)}} 
            </div>
            <div class="people" v-else>
                {{ data.totalCount }} WINNERS TO SHARE
            </div>
        </div>
    </div>

    <!-- 改版之后的卡片 -->
    <div class="custom-card" v-else>
        <img class="cover" v-if="isLottaryCpd" :src="require('@/assets/subject/img-custom-lottary-bg.svg')"  />
        <img class="cover" v-else :src="require('@/assets/subject/img-custom-common-bg.svg')"  />        
        <img class="gift" :src="require('@/assets/subject/icon-gift.gif')" />        
        <div class="prize">
            <component-zoom width="300" fontSize="22">
                <img class="icon" :src="require('@/assets/subject/icon-gift-inline.svg')"/>
                <span class="name" id="custom-name" >
                    {{data.customizedReward}}
                    <span class="total" >X{{data.totalCount}}</span>
                </span>
            </component-zoom>
            
        </div>
        <!-- 底部公共模块 -->
        <div class="common-bottom">
            <div class="theme">
                <img v-if="isLottaryCpd" class="icon" :src="require('@/assets/svg/icon-last-time.svg')"/>
                <span v-if="isLottaryCpd" class="time" >{{data.countDown || formatSecondsAsDaysOrTime(data.validityDuration * 3600)}}</span>
                <span class="info">{{isLottaryCpd ? 'Left' : 'Instant Giveaway'}}</span>
            </div>
            <div class="winner-info">
                <component-zoom width="300" fontSize="12">
                    <span class="count">{{data.totalCount}}Winners</span>
                    <span>to Share </span>
                    <span class="prize-name">{{isMoneyRewardCpd ? data.amountValue + ' ' + data.tokenSymbol : data.customizedReward}}</span>
                
                </component-zoom>
            </div>
            <div class="open-btn" @click="open">
                {{isLottaryCpd ? 'Participate Now' : 'Open Now'}}
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, computed, onMounted } from "vue";
import { formatSecondsAsDaysOrTime } from "@/uilts/help";
import ComponentZoom from "./component-zoom.vue";
import { RewardType, PlayType } from "@/types";

const props = defineProps({
    data: {
        type: Object,
        default: () => {
            return {
                totalCount: 0,
                amountValue: 0,
                tokenSymbol: '',
                currencyCode: '',
                type: 1,
                validityDuration: '',
                countDown: '',
                customPosterUrl: '',
                userInfo: {
                    avatarUrl: "",
                    nickName: "",
                },
                rewardType: RewardType.money,
                customizedReward: "",
            };
        },
    },
});


let isMoneyRewardCpd =computed(() => {
    return props.data.rewardType === RewardType.money
});

let isLottaryCpd = computed(() => props.data.type === PlayType.lottery);

const defaultBaseWidth = isMoneyRewardCpd.value ? 56 : 22;
const defaultTotalWidth = isMoneyRewardCpd.value ? 360 : 450;

let amount_font_size = ref(defaultBaseWidth);

const setFontSize = () =>{
    let id = isMoneyRewardCpd.value ? 'preview-after-amount' : 'custom-name';
    let lendom = document.querySelector(`#${id}`);
    if (lendom) {
        let lenstr = lendom.innerText.length;
        let num = parseInt(defaultTotalWidth / lenstr);
        amount_font_size.value = num < defaultBaseWidth ? num : defaultBaseWidth;
    }
}

const emits = defineEmits(["clickOpenRedPacket"]);

const open = () => {
    emits("clickOpenRedPacket", {});
};

onMounted(() => {
    setFontSize()
})
</script>

<style scoped lang="scss">
.not-open {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 16px;
    filter: drop-shadow(0px 2px 20px rgba(0, 0, 0, 0.1));

    .money-area {
        width: 100%;
        position: absolute;
        top: 65px;

        .txt {
            font-weight: 800;
            font-size: 16px;
            letter-spacing: 0.3px;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;

            span {
                color: #F9C545;
            }
        }

        .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;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background:#111214;
    position: relative;
    border-radius: 10px;
    .customImg {
        width: 100%;
        min-height: calc(100% - 125px);
    }
    .cover {
        width: 100%;
        min-height: 350px;
        border-radius: 10px 10px 0 0;
    }
    .gift {
        width: 210px;
        position: absolute;
        left: 50%;
        top: 83px;
        transform: translateX(-50%);
    }
    .prize {
        width: 100%;
        position: absolute;
        top: 57%;
        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: 125px;
        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;
            font-size: 12px;
            .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>