[edit] preview style

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

@@ -1,14 +1,25 @@
 <!-- 自定义卡片红包封面 -->
 <template>
     <div class="not-open">
-        <img class="cover" :src="require('@/assets/subject/001-card.png')"  />
-        <img class="open-gif" :src="require('@/assets/gif/001.gif')" />
-
-        <img
+        <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"
-        />
+            @click="open"/>
+
         <div class="title" v-if="data.userInfo">
             <img :src="data.userInfo.avatarUrl" />
             <span>{{
@@ -25,7 +36,15 @@
                     }">{{ data.amountValue }}</span>
             </div>
             <div class="people">
-                {{ data.totalCount }} WINNERS TO SHARE
+                <template  v-if="data.type == 2">
+                    <img class="icon-clock" 
+                    :src="require('@/assets/svg/icon-preview-clock.svg')" />  {{data.validityDuration}} H
+                    <img class="icon-trophy" 
+                    :src="require('@/assets/svg/icon-preview-trophy.svg')" /> <span class="trophy-count">{{data.totalCount}} WINNERS</span>
+                </template>
+                <template v-else>
+                    {{ data.totalCount }} WINNERS TO SHARE
+                </template>
             </div>
         </div>
     </div>
@@ -42,6 +61,8 @@ const props = defineProps({
                 totalCount: 0,
                 amountValue: 0,
                 tokenSymbol: "",
+                type: 1,
+                validityDuration: '',
                 userInfo: {
                     avatarUrl: "",
                     nickName: "",
@@ -118,8 +139,28 @@ const open = () => {
             font-size: 13px;
             line-height: 16px;
             letter-spacing: 0.05em;
-            text-align: center;
             color: #ffffff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .icon-clock, .icon-trophy  {
+                width: 16px;
+                height: 16px;
+            }
+
+            .icon-clock {
+                margin-right: 4px;
+            }
+
+            .icon-trophy {
+                margin-left: 8px;
+                margin-right: 4px;
+            }
+
+            .trophy-count {
+                color: #FFCC4D;
+            }
         }
     }
 

src/view/iframe/publish/components/paypal-button.vue

@@ -196,8 +196,9 @@ onMounted(() => {
             font-weight: 600;
             font-size: 18px;
             color: #fff;
-            cursor: pointer;
             padding: 0 30px;
+            word-break: break-all;
+            cursor: pointer;
             &.disabled {
                 background: #DEDEDE;
             }

src/view/iframe/publish/components/preview-card.vue

@@ -23,6 +23,8 @@
                             amountValue: baseFormData.amountValue,
                             tokenSymbol: currentCurrencyInfo.tokenSymbol,
                             currencyIconUrl: currentCurrencyInfo.iconPath,
+                            type: baseFormData.type,
+                            validityDuration: baseFormData.validityDuration,
                             userInfo: {
                                 nickName: userInfo.name,
                                 avatarUrl: userInfo.avatarUrl
@@ -51,7 +53,11 @@
                 </div>
                 <div class="card-wrapper" 
                     :style="{'zoom': reviewCanvasParams.zoom}">
+                    <img :src="require('@/assets/img/img-preview-draw-after-bg.png')"
+                        v-if="baseFormData.type == 2"
+                        class="card-cover">
                     <img :src="require('@/assets/subject/img-card-cover-blue.png')"
+                        v-else
                         class="card-cover"/>
                     <div class="bottom-bar">
                         <div class="title">
@@ -79,7 +85,15 @@
                             </span>
                         </div>
                         <div class="desc">
-                            {{baseFormData.totalCount}} WINNERS TO SHARE
+                            <template  v-if="baseFormData.type == 2">
+                                <img class="icon-clock" 
+                                :src="require('@/assets/svg/icon-preview-clock.svg')" />  {{baseFormData.validityDuration}} H
+                                <img class="icon-trophy" 
+                                :src="require('@/assets/svg/icon-preview-trophy.svg')" /> <span class="trophy-count">{{baseFormData.totalCount}} WINNERS</span>
+                            </template>
+                            <template v-else>
+                                {{baseFormData.totalCount}} WINNERS TO SHARE
+                            </template>
                         </div>
                     </div>
                 </div>
@@ -374,6 +388,21 @@ onUnmounted(() => {
                         font-weight: 800;
                         font-size: 13px;
                         color: #ffffff;
+                        display: flex;
+                        align-items: center;
+
+                        .icon-clock {
+                            margin-right: 4px;
+                        }
+
+                        .icon-trophy {
+                            margin-left: 8px;
+                            margin-right: 4px;
+                        }
+
+                        .trophy-count {
+                            color: #FFCC4D;
+                        }
                     }
                 }
                 .card-cover {

src/view/iframe/publish/give-dialog.vue

@@ -2208,6 +2208,7 @@ onMounted(() => {
             .price {
                 font-size: 16px;
                 font-weight: bold;
+                word-break: break-all;
             }
         }
         .refresh {

src/view/popup/tabbar-page/nft/detail.vue

@@ -255,7 +255,7 @@ onMounted(() => {
 
                 .prop-item {
                     width: 48%;
-                    height: 88px;
+                    min-height: 88px;
                     background: #f8f8f8;
                     border-radius: 10px;
                     display: flex;
@@ -275,6 +275,7 @@ onMounted(() => {
                         margin-top: 6px;
                         margin-bottom: 8px;
                         color: #000;
+                        word-break: break-all;
                     }
                 }
                 .prop-item:nth-child(odd) {