zhangwei 3 éve
szülő
commit
5ffad72c5e
2 módosított fájl, 48 hozzáadás és 4 törlés
  1. 31 0
      src/view/components/font-amount.vue
  2. 17 4
      src/view/red-packet.vue

+ 31 - 0
src/view/components/font-amount.vue

@@ -0,0 +1,31 @@
+<template>
+    <span :style="{ fontSize: amount_font_size + 'px' }">{{ amount }}</span>
+</template>
+<script setup>
+import { ref, defineProps, onMounted } from 'vue'
+
+let props = defineProps({
+    amount: String,
+    width: {
+        type: Number,
+        default: 360
+    },
+    fontSize: {
+        type: Number,
+        default: 56
+    },
+    
+})
+
+let amount_font_size = ref(60);
+
+onMounted(() => {
+    console.log(props.amount.length)
+    let _num = parseInt(props.width / props.amount.length);
+    console.log(_num)
+    amount_font_size.value = _num < props.fontSize ? _num : props.fontSize;
+})
+
+</script>
+<style lang="scss">
+</style>

+ 17 - 4
src/view/red-packet.vue

@@ -7,7 +7,8 @@
         <div class="title">Awesome! You Will Get</div>
         <div class="money">
           <img :src="data.detail.currencyIconPath" alt />
-          <span class="big">{{ data.money }}</span>
+          <!-- <span class="big">{{ data.money }}</span> -->
+          <font-amount :amount="data.money" class="big" :fontSize="46"></font-amount>
           <!-- <span class="small">{{ data.detail.amountCurrencyCode || '' }}</span> -->
         </div>
       </div>
@@ -89,7 +90,7 @@
       <div class="header" :style="{ 'backgroundImage': `url(${require('@/assets/subject/001-back-head-top.svg')})` }">
         <div class="money">
           <img :src="data.detail.currencyIconPath" alt />
-          <span class="big">{{ data.money }}</span>
+          <font-amount :amount="data.money" class="big" :fontSize="46"></font-amount>
           <!-- <span class="small">{{ data.detail.amountCurrencyCode }}</span> -->
         </div>
         <div class="done" @click="clickDone">
@@ -141,7 +142,7 @@
         <div class="txt">{{ data.detail.amountCurrencyCode }} GIVEAWAY</div>
         <div class="coin">
           <img :src="data.detail.currencyIconPath" alt />
-          <span>{{ data.detail.amountValue }}</span>
+          <font-amount :amount="data.detail.amountValue"></font-amount>
         </div>
         <div class="people">{{ data.detail.totalCount }} WINNERS TO SHARE</div>
       </div>
@@ -244,6 +245,7 @@ import { onMounted, reactive } from "vue";
 import { getPostDetail, getRedPacket, finishRedPacket, oneKeyLike, oneKeyReTweet, oneKeyFollow, getTaskDetail, getReceivedList } from '@/http/redPacket.js'
 import { getQueryString } from '@/uilts/help.js'
 import { message } from 'ant-design-vue';
+import FontAmount from '@/view/components/font-amount.vue'
 import { getChromeStorage } from '@/uilts/chromeExtension.js'
 var moment = require('moment');
 
@@ -591,7 +593,7 @@ function handleRedPacket() {
         data.status = 'error'
         data.retry = true
         break
-      case "2023":
+      case "2029":
         message.error('推文未发布')
         break
       default:
@@ -879,6 +881,9 @@ body {
       .money {
         margin-bottom: 30px;
         width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
         img {
           width: 40px;
@@ -1051,10 +1056,15 @@ body {
         font-size: 18px;
         line-height: 21px;
         letter-spacing: -0.3px;
+        margin-bottom: 10px;
       }
 
       .money {
         width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
 
         img {
           margin-right: 9px;
@@ -1308,6 +1318,9 @@ body {
         text-align: center;
         margin-top: 6px;
         margin-bottom: 7px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
         img {
           width: 46px;