[EDIT] STYLE

src/assets/svg/img-preview-treasure-01-bg.svg

@@ -0,0 +1,11 @@
+<svg width="375" height="500" viewBox="0 0 375 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="375" height="500" fill="url(#paint0_linear_24395_274606)"/>
+<defs>
+<linearGradient id="paint0_linear_24395_274606" x1="187" y1="-7.83211e-09" x2="187.5" y2="500" gradientUnits="userSpaceOnUse">
+<stop offset="0.388068" stop-color="#25180D"/>
+<stop offset="0.554041" stop-color="#5E4025"/>
+<stop offset="0.616047" stop-color="#876635"/>
+<stop offset="0.716041" stop-color="#24180C"/>
+</linearGradient>
+</defs>
+</svg>

src/view/components/component-zoom.vue

@@ -5,7 +5,7 @@
     </span>
 </template>
 <script setup>
-import { ref, defineProps, onMounted, getCurrentInstance } from 'vue'
+import { ref, defineProps, onMounted, watch } from 'vue'
 
 let props = defineProps({
     width: {
@@ -15,16 +15,28 @@ let props = defineProps({
     fontSize: {
         type: String,
         default: '22'
+    },
+    txt: {
+        type: String,
+        default: ''
     }
 })
 
+watch(() => props.txt, (newVal) => {
+    setFontZoom(300)
+},
+{
+    deep: true
+})
+
 let zoom = ref(1);
-let currentInstance;
+let zoomDom = ref({});
 
-const setFontZoom = () => {
-    const currentInstance = getCurrentInstance()
-    let offsetWidth = currentInstance.ctx.$refs.zoomDom.offsetWidth;
-    zoom.value = offsetWidth > props.width ? +props.width / offsetWidth : 1
+const setFontZoom = (time = 600) => {
+    setTimeout(() => {
+        let offsetWidth = zoomDom.value && zoomDom.value.offsetWidth || props.width;
+        zoom.value = offsetWidth > props.width ? +props.width / offsetWidth : 1
+    }, time)
 }
 
 onMounted(() => {

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

@@ -21,51 +21,83 @@
         </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="cover" v-if="data.type == PlayType.lottery" :src="require('@/assets/svg/img-preview-draw-bg.svg')"  />
+        <img class="cover" v-else-if="data.type == PlayType.common" src="@/assets/subject/001-card.png"  />
+        <img class="cover" v-else-if="data.type == PlayType.treasure" :src="require('@/assets/svg/img-preview-treasure-01-bg.svg')"  />
 
         <img class="open-gif"
-            v-if="data.type == 2"
+            v-if="data.type == PlayType.lottery"
             src="@/assets/img/img-preview-draw-box.png" />
         <img class="open-gif"
-            v-else
+            v-else-if="data.type == PlayType.common"
             :src="require('@/assets/gif/001.gif')" />
 
-        <img v-if="data.type == 2"
+        <img v-if="data.type == PlayType.lottery"
             :src="require('@/assets/svg/img-preview-draw-open.svg')"
             class="open"
             @click="open" />
-        <img v-else
+        <img v-else-if="data.type == PlayType.common"
             :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>
+            <span v-if="data.type != PlayType.treasure">
+                {{data.userInfo.nickName || ""}}
+            </span>
+            <span class="treasure-info" v-else>
+                from @{{data.userInfo.nickName || ""}}
+            </span>
         </div>
-        <div class="money-area">
+
+        <div class="money-area" v-if="data.type != PlayType.treasure">
             <div class="txt">
                 <span>{{data.currencyCode == 'USD' ? 'US Dollar' : data.tokenSymbol}} </span>
                 &nbsp;GIVEAWAY
             </div>
             <div class="coin">
-                <img :src="data.currencyIconUrl || imgHeaderCover" />
+                <img v-if="data.currencyIconUrl" :src="data.currencyIconUrl || imgHeaderCover" />
                 <span id="preview-after-amount"
                     :style="{
                         fontSize: amount_font_size + 'px'
-                    }">{{ data.amountValue }}</span>
+                    }">{{ data.amountValue || 0 }}</span>
             </div>
-            <div class="time-area" v-if="data.type == 2">
+            <div class="time-area" v-if="data.type == PlayType.lottery">
                 <img class="icon-clock" :src="require('@/assets/svg/icon-time.svg')" />
                 {{data.countDown || formatSecondsAsDaysOrTime(data.validityDuration * 3600)}} 
             </div>
-            <div class="people" v-else>
+            <div class="people" v-else-if="data.type == PlayType.common">
                 {{ data.totalCount }} WINNERS TO SHARE
             </div>
         </div>
+        <div class="treasure-card-info" v-else>
+            <div class="treasure-row-1">
+                <div class="left">Treasure</div>
+                <component-zoom :width="160" :txt="data.amountValue || 0">
+                    <div class="right">${{ data.amountValue || 0 }}</div>
+                </component-zoom>
+            </div>
+
+            <div class="treasure-row-2">
+                Your Gain Up to $ <div class="amount">1</div>
+            </div>
+
+            <div class="treasure-row-3" :style="{'visibility': data.currencyCode? 'visible' : 'hidden'}">
+                <img class="img" :src="data.currencyIconUrl" /> <span class="txt"> SHIB equivalent (Crypto)</span>
+            </div>
+
+            <img class="img-treasure-big" :src="require('@/assets/img/icon-card-cover-treasure-big.png')">
+
+            <div class="treasure-row-4">
+               <img class="img" :src="require('@/assets/svg/icon-card-cover-treasure-tasks.svg')"> to Hunt Treasure
+            </div>
+
+            <div class="open-btn" @click="open">
+                <img :src="require('@/assets/svg/icon-card-cover-treasure-small.svg')" alt="">
+                START
+            </div>
+        </div>
     </div>
 
     <!-- 改版之后的卡片 -->
@@ -250,6 +282,105 @@ onMounted(() => {
         }
     }
 
+    .treasure-card-info {
+        color: #fff; 
+        position: absolute; 
+        top: 86px;
+        width: 100%;
+        text-align: center;
+
+        .treasure-row-1 {
+            display: flex; 
+            align-items: center;
+            justify-content: center;
+            font-weight: 900;
+            font-size: 25px;
+
+            .left {
+                margin-right: 7px;
+                color: #FFC83A;
+            }
+
+            .right {
+                 font-weight: 900;
+                font-size: 25px;
+            }
+        }
+
+        .treasure-row-2 {
+            margin: 6px 0; 
+            background: rgba(255, 255, 255, .1); 
+            width: 100%; 
+            height: 27px;
+            display: flex; 
+            align-items: center;
+            justify-content: center;
+            font-weight: 500;
+            font-size: 12px;
+
+            .amount {
+                font-weight: 800;
+                font-size: 17px;
+                margin-top: -3px;
+            }
+        }
+
+        .treasure-row-3 {
+            display: flex; 
+            align-items: center;
+            justify-content: center;
+
+            .img {
+                width: 13px; 
+                margin-right: 3px;
+            }
+
+            .txt {
+                zoom: .8;
+                opacity: 0.7;
+            }
+        }
+
+        .treasure-row-4 {
+            display: flex;
+            align-items:center;
+            justify-content: center;
+            color: #65C1FF;
+            margin-top: 18px;
+            font-size: 16px;
+
+            .img {
+                width: 76px;
+            }
+        }
+
+        .img-treasure-big {
+            width: 200px;
+        }
+
+        .open-btn {
+            width: 88%;
+            height: 40px;
+            background: #1D9BF0;
+            border-radius: 75px;
+            display: flex;
+            align-items:center;
+            justify-content: center;
+            cursor: pointer;
+            font-weight: 800;
+            font-size: 15px;
+            margin-top: 12px;
+            position: relative; 
+            left: 50%; 
+            transform: translateX(-50%);
+
+            img {
+                width: 18px;
+                margin-right: 5px;
+            }
+        }
+    }
+
     .title {
         position: absolute;
         top: 15px;
@@ -273,6 +404,12 @@ onMounted(() => {
             letter-spacing: 0.3px;
             color: #fff;
         }
+
+        .treasure-info {
+            color: #fff; 
+            opacity: 0.7;
+            font-weight: 300;
+        }
     }
 
     // .txt {

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

@@ -6,11 +6,15 @@
         </template>
         <template v-else-if="isMoneyRewardCpd">
             <img :src="require('@/assets/img/img-preview-draw-after-bg.png')"
-                v-if="data.type == 2"
+                v-if="data.type == PlayType.lottery"
                 class="card-cover">
             <img :src="require('@/assets/subject/img-card-cover-blue.png')"
-                v-else
+                v-else-if="data.type == PlayType.common"
                 class="card-cover"/>
+            <img :src="require('@/assets/img/img-preview-treasure-link-bg.png')"
+                v-else-if="data.type == PlayType.treasure"
+                class="card-cover"/>
+
             <div class="bottom-bar">
                 <div class="title">
                     DeNet.me
@@ -19,34 +23,65 @@
                     🎁 <template v-if="data.tokenSymbol=='USD'">$</template>{{data.amountValue}} GIVEAWAY
                 </div>
             </div>
+
             <div class="user-info">
                 <img :src="data.userInfo.avatarUrl" 
-                class="avatar"/> {{data.userInfo.name}}
+                class="avatar"/> 
+                <template v-if="data.type != PlayType.treasure">
+                    {{data.userInfo.name}}
+                </template>
+                <span class="treasure-info" style="color: #fff; opacity: 0.7;font-weight: 300;" v-else>
+                    from @{{data.userInfo.name || ""}}
+                </span>
             </div>
+
             <div class="content-text">
-                <div class="title">
-                    <span>{{data.currencyCode == 'USD' ? 'US Dollar' : data.tokenSymbol}} </span>
-                    &nbsp;GIVEAWAY
-                </div>
-                <div class="center"
-                    :style="{
-                        fontSize: amountFontSize + 'px'
-                    }">
-                    <img :src="data.currencyIconUrl" class="icon">
-                    <span id="preview-before-amount">
-                        {{data.amountValue}}
-                    </span>
-                </div>
-                <div class="desc">
-                    <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>
+                <template v-if="data.type != PlayType.treasure">
+                    <div class="title">
+                        <span>{{data.currencyCode == 'USD' ? 'US Dollar' : data.tokenSymbol}} </span>
+                        &nbsp;GIVEAWAY
+                    </div>
+
+                    <div class="center"
+                        :style="{
+                            fontSize: amountFontSize + 'px'
+                        }">
+                        <img :src="data.currencyIconUrl" class="icon">
+                        <span id="preview-before-amount">
+                            {{data.amountValue}}
+                        </span>
+                    </div>
+
+                    <div class="desc">
+                        <template  v-if="data.type == PlayType.lottery">
+                            <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-if="data.type == PlayType.common">
+                            {{data.totalCount}} WINNERS TO SHARE
+                        </template>
+                    </div>
+                </template>
+                <div class="treasure-layout" v-else>
+                    <div class="treasure-row-1">
+                        <span class="left">Treasure</span>
+                        <component-zoom :width="160">
+                            <span class="right">${{data.amountValue}}</span>
+                        </component-zoom>
+                    </div>
+                    <div class="treasure-desc-data">
+                        <div class="item">
+                            <img class="icon" 
+                                :src="require('@/assets/svg/icon-preview-trophy.svg')" />
+                            5000 Winners
+                        </div>
+                        <div class="item">
+                            <img class="icon" :src="data.currencyIconUrl">
+                            {{data.currencyCode == 'USD' ? 'US Dollar' : data.tokenSymbol}} equivalent
+                        </div>
+                    </div>
                 </div>
             </div>
         </template>
@@ -169,6 +204,12 @@ watch(() => props.data, () => {
             border-radius: 50%;
             margin-right: 10px;
         }
+
+        .treasure-info {
+            color: #fff; 
+            opacity: 0.7;
+            font-weight: 300;
+        }
     }
     .content-text {
         position: absolute;
@@ -219,6 +260,48 @@ watch(() => props.data, () => {
                 color: #FFCC4D;
             }
         }
+
+        .treasure-layout {
+            margin-top: -8px;
+
+            .treasure-row-1 {
+                display: flex; 
+                align-items: center;
+                justify-content: center;
+                font-weight: 900;
+                font-size: 35px;
+                color: #fff;
+
+                .left {
+                    margin-right: 7px;
+                    color: #FFC83A;
+                }
+
+                .right {
+                    font-weight: 900;
+                    font-size: 35px;
+                    color: #fff;
+                }
+            }
+
+            .treasure-desc-data {
+                margin-top: 18px;
+
+                .item {
+                    font-weight: 500;
+                    font-size: 14px;
+                    color: #E1D4C5;
+                    margin-bottom: 10px;
+                    display: flex; 
+                    align-items: center;
+
+                    .icon {
+                        width: 20px;
+                        margin-right: 8px;
+                    }
+                }
+            }
+        }
     }
     .card-cover {
         width: 100%;

src/view/iframe/publish/components/form-input.vue

@@ -4,14 +4,17 @@
             {{prefix}}
         </div>
         <slot name="content"></slot>
-        <div class="suffix" v-if="suffix">
-            {{suffix}}
-        </div>
+        <component-zoom :width="50" fontSize="14" :txt="suffix" v-if="suffix">
+            <div class="suffix">
+                {{suffix}}
+            </div>
+        </component-zoom>
     </div>
 </template>
 
 <script setup>
 import { onMounted, ref, defineProps, defineEmits } from "vue";
+import ComponentZoom from '@/view/components/component-zoom.vue'
 
 const props = defineProps({
     prefix: {
@@ -49,8 +52,9 @@ onMounted(() => {
 
     .suffix {
         margin-left: 4px;
-        max-width: 50px;
         white-space: nowrap;
+        color: #999999;
+        font-weight: 400;
     }
 }
 </style>

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

@@ -93,7 +93,7 @@
                         </template>
                         <template v-else>
                         <div class="form-wrapper"  v-if="showComType == 'default'">
-                            <div class="form-left-sheet">
+                            <div class="form-left-sheet" style="width: 500px">
                                 <div class="form-cell-item base-form-wrapper">
                                     <div class="form-cell-content">
                                         <div class="select-mode-ele">
@@ -119,14 +119,15 @@
                                                         <img class="icon"
                                                             v-if="currentIconCpd"
                                                             :src="currentIconCpd"/>
-                                                        <div class="text">
-                                                            {{currentPrizeCpd}}
-                                                        </div>
+                                                        <component-zoom :width="100" :txt="currentPrizeCpd">
+                                                            <div class="text">
+                                                                {{currentPrizeCpd}}
+                                                            </div>
+                                                        </component-zoom>
                                                         <img class="arrow"
                                                             :src="currentArrowCpd"/>
                                                     </div>
-                                                    <form-input 
-                                                        class="margin-left-10"
+                                                    <form-input class="margin-left-10"
                                                         :suffix="baseFormData.rewardType === RewardType.custom || currentCurrencyInfo.currencyCode ? currentPrizeCpd : ''">
                                                         <template v-slot:content>
                                                             <input style="width: 100px"
@@ -310,6 +311,18 @@
                                 </div>
                             </div> 
                             <div class="form-right-sheet">
+                                <div style="width: 375px;height: 500px; zoom: .74;margin-left: 80px">
+                                    <custom-card-cover :data="{
+                                        ...baseFormData,
+                                        ...currentCurrencyInfo,
+                                        currencyIconUrl: currentCurrencyInfo.iconPath,
+                                        customPosterUrl: customPosterInfo && customPosterInfo.after && customPosterInfo.after.imagePath || '',
+                                        userInfo: {
+                                            nickName: userInfo.name,
+                                            avatarUrl: userInfo.avatarUrl
+                                        },
+                                    }"></custom-card-cover>
+                                </div>
                                 
                             </div>
                             <div class="submit-btn-wrapper">
@@ -436,7 +449,7 @@
 
 <script setup>
 import { ref, watch, reactive, defineProps, defineEmits, onMounted, nextTick, provide, computed } from "vue";
-import { postPublish, syncChainTokenRechargeRecord, getCurrencyInfoByCode } from "@/http/publishApi";
+import { postPublish, syncChainTokenRechargeRecord, getCurrencyInfoByCode, getUser } from "@/http/publishApi";
 import { getInviteGuildInfo, getInviteGuildInfoByOpenApi, saveInviteGuildInfo } from "@/http/discordApi";
 import { payCalcFee, getPayConfig } from "@/http/pay";
 import { getFrontConfig, calcRechargePayAmount } from "@/http/account";
@@ -468,6 +481,7 @@ import GlobalTip from '@/view/components/global-tip.vue'
 import customCardCover from '@/view/components/custom-card-cover.vue'
 
 import CustomizedRewardEditPopup from '@/view/iframe/publish/components/customized-reward-edit';
+import ComponentZoom from '@/view/components/component-zoom.vue'
 
 const config = {
     number: 'BigNumber',
@@ -488,6 +502,8 @@ let publishRes = reactive({});
 let visible = ref(true);
 let publishType = ref('REDPACKET');
 
+let userInfo = ref({})
+
 
 //弹窗高度
 let dialogStyle = reactive({
@@ -1786,10 +1802,26 @@ const setFrontConfig = () => {
     });
 };
 
+const getUserName = (screenName) => {
+    getUser({
+        params:{
+            screenName
+        }
+    }).then(res => {
+        if(res.code == 0) {
+            userInfo.value.name = res.data.name || ''
+        }
+        console.log(userInfo.value, 'userinfo')
+    });
+}
+
 /**
  * 默认获取上次选中的货币信息
  */
-const getLocalCurrencyInfoByCode = () => {
+const getLocalCurrencyInfoByCode = async () => {
+    let storageUserInfo = await getChromeStorage('userInfo') || {};
+    userInfo.value = storageUserInfo;
+    getUserName(storageUserInfo.nickName);
     if(!currentCurrencyInfo.value.currencyCode) {
         getCurrencyInfo();
     }
@@ -1797,8 +1829,7 @@ const getLocalCurrencyInfoByCode = () => {
 
 const getCurrencyInfo = async (_params) => {
     let { loop = false} = _params || {};
-    let {accessToken = ''} = await getChromeStorage('userInfo') || {};
-    if (accessToken) {
+    if (userInfo.value && userInfo.value.accessToken) {
         let {currencyCode = ''} = await getChromeStorage('selectCurrencyInfo') || {};
 
         if(currencyCode) {
@@ -2170,7 +2201,7 @@ onMounted(() => {
                 border-left: 1px solid #ececec;
 
                 .form-wrapper {
-                    padding: 18px 18px 18px 18px;
+                    padding: 18px 80px 18px 80px;
                     height: calc(100% - 80px);
                     overflow: auto;
                     box-sizing: border-box;
@@ -2280,7 +2311,7 @@ onMounted(() => {
                                     }
 
                                     .text {
-                                        word-break: break-all;
+                                        white-space: nowrap;
                                         font-weight: 500;
                                         font-size: 14px;
                                     }
@@ -2291,8 +2322,11 @@ onMounted(() => {
                                 }
                                 .selected {
                                     background: #FFF !important;
-                                    color: #000 !important;
                                     border: 1px solid #D9D9D9;
+
+                                    .text {
+                                        color: #000 !important;
+                                    }
                                 }
 
                                 .automatically-input {