user_xiaochengxu_vue3/src/components/CXBDialogSignIn/SignRedPacket.vue

<script setup lang="ts">
import {CDN_URL} from "~/config/app";

const signInRedPacketImage = CDN_URL + 'https://cdn.bjtdba.com/chuxubao/static/assets/sign_in_red_packet.png'
const props = defineProps({
  day: {
    type: Number,
    required: true
  },
  text: {
    type: String,
  }
})

const getScore =computed(() => {
  if (props.day == 1) {
    return '+2'
  } else if (props.day == 2) {
    return '+4'
  } else if (props.day == 3) {
    return '+6'
  } else if (props.day == 4) {
    return '+10'
  } else if (props.day == 5) {
    return '+14'
  } else if (props.day == 6) {
    return '+20'
  }
})
</script>
<template>
   <div class=" flex flex-col   items-center  text-xs gap-2" >
        <div class=" flex flex-col items-center justify-end "
             :class="[text ? 'activeBg' : 'defaultBg', 'h-29 w-20']"
        >
          <div class="text-[11px] text-white mb-1">{{ getScore }}</div>
        </div>
        <div>
          <div class="relative text-[10px]" v-if="text"> {{ text}} </div>
          <div class="relative text-[10px]" v-else> 第 {{ day }} 天</div>
        </div>

      </div>

</template>

<style>
.defaultBg {
  width: 80rpx;
  height: 116rpx;
  background-image: url('https://cdn.bjtdba.com/chuxubao/static/assets/sign_in_red_packet.png');
  background-size: 100% 100%;
}
.activeBg {
  width: 80rpx;
  height: 116rpx;
  background-image: url('https://cdn.bjtdba.com/chuxubao/static/assets/hb_yiqiandao_220908.png');
  background-size: 100% 100%;
}
</style>