de-net-official/components/CustomCardCover.vue

<!-- 自定义卡片红包封面 -->
<!-- todo：目前只有自定义奖品类型，货币类型待添加 -->
<template>
    <!-- 改版之后的卡片 -->
    <div class="not-open-custom-card custom-card">
        <div class="common-top">
          <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}}</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
  },
  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));

    .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>