[add][结果页]

src/assets/subject/004-back-head-top.svg

@@ -0,0 +1,9 @@
+<svg width="375" height="150" viewBox="0 0 375 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H375V117.057C375 117.057 320.624 150 187.5 150C54.376 150 0 117.057 0 117.057V0Z" fill="url(#paint0_linear_27657_247702)"/>
+<defs>
+<linearGradient id="paint0_linear_27657_247702" x1="187" y1="-2.34963e-09" x2="187.045" y2="150" gradientUnits="userSpaceOnUse">
+<stop offset="0.367196" stop-color="#26180E"/>
+<stop offset="0.953767" stop-color="#51361D"/>
+</linearGradient>
+</defs>
+</svg>

src/view/iframe/publish/components/get-more.vue

@@ -1,23 +1,26 @@
 <template>
-    <div class="get-more-btns"  v-if="props.style_type == 3">
+    <div class="get-more-btns" v-if="props.style_type == 3">
         <div class="get-more-btn" @click="jumpMore">
             <img width="22" :src="require('@/assets/svg/icon-wallet-success.svg')" />
-            <font>View wallet</font>
+            <span>View wallet</span>
         </div>
         <div class="get-more-btn" @click="jumpMore">
             <img width="22" :src="require('@/assets/svg/icon-big-give.svg')" />
-            <font>Get More Giveaway</font>
+            <span>Get More Giveaway</span>
         </div>
     </div>
     <div class="getMore" @click="jumpMore" v-if="props.style_type == 1">
         <img width="20" :src="require('@/assets/svg/icon-big-give.svg')" />
-        <font>Get More Giveaway</font>
+        <span>Get More Giveaway</span>
         <img height="20" :src="require('@/assets/svg/icon-cell-arrow-right.svg')" />
     </div>
     <div class="get_more" v-if="props.style_type == 2" @click="jumpMore">
         <img width="18" :src="require('@/assets/svg/icon-big-give.svg')" />
         <span>Get More Giveaway</span>
     </div>
+    <div v-if="style_type == 4" @click="jumpMore">
+        <slot></slot>
+    </div>
 </template>
 
 <script setup>
@@ -48,12 +51,15 @@ onBeforeMount(() => {
 })
 
 const jumpMore = () => {
-    Report.reportLog({
-      pageSource: props.reportData.pageSource,
-      businessType: Report.businessType.buttonClick,
-      objectType: Report.objectType.getMoreGiveaway,
-      postId: props.reportData.postId
-    });
+    if (props.reportData) {
+        Report.reportLog({
+            pageSource: props.reportData.pageSource,
+            businessType: Report.businessType.buttonClick,
+            objectType: Report.objectType.getMoreGiveaway,
+            postId: props.reportData.postId
+        });
+    }
+
     if (moreUrl.value) {
         window.open(moreUrl.value)
     }
@@ -75,7 +81,7 @@ const jumpMore = () => {
         margin: 0 5px;
     }
 
-    font {
+    span {
         color: #000;
         font-size: 15px;
         font-weight: 500;
@@ -99,7 +105,8 @@ const jumpMore = () => {
         margin-right: 8px;
     }
 }
-.get-more-btns  {
+
+.get-more-btns {
     display: flex;
     cursor: pointer;
     user-select: none;
@@ -108,6 +115,7 @@ const jumpMore = () => {
     padding: 13px 0;
     box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.06);
     position: relative;
+
     .get-more-btn {
         flex: 1;
         display: flex;
@@ -117,6 +125,7 @@ const jumpMore = () => {
         align-items: center;
         justify-content: center;
         height: 44px;
+
         font {
             font-weight: 600;
             font-size: 14px;
@@ -126,6 +135,7 @@ const jumpMore = () => {
             color: #000000;
         }
     }
+
     &::after {
         content: "";
         width: 1px;
@@ -133,7 +143,7 @@ const jumpMore = () => {
         position: absolute;
         left: 50%;
         top: 13px;
-        background-color: rgba(0,0,0,.2);
+        background-color: rgba(0, 0, 0, .2);
         transform: scale(0.5);
         transform-origin: 0 0;
     }

src/view/iframe/treasure-hunt/all-receive-list.vue

@@ -2,79 +2,45 @@
     <div class="invite-list">
         <div class="head">
             <div class="left">
-              <img height="20" :src="require('@/assets/svg/icon-back-2.svg')" @click="clickBack" />
-              <span>{{ state.detail.receiveCountWithAmount }} People Get Money</span>
+                <img height="20" :src="require('@/assets/svg/icon-back-2.svg')" @click="clickBack" />
+                <span>{{ state.detail.receiveCountWithAmount }} People Get Money</span>
             </div>
             <div class="right">
-              <img @click="showOptionSheet = true" :src="sortTypeIcon" alt="">
+                <img @click="clickOption" :src="sortTypeIcon" alt="">
             </div>
         </div>
-        <div class="content">
-            <img v-show="state.receive.loading && state.receive.list.length == 0"
-                :src="require('@/assets/svg/icon-loading-gray.svg')" alt="" class="loading" />
-            <img v-if="state.receive.list.length == 0 && state.receive.end"
-                :src="require('@/assets/svg/icon-empty-list.svg')" alt="" class="empty" />
-            <div class="list" v-else @scroll="handleScroll($event)">
-                <div class="item" v-for="item in state.receive.list" :key="item.userInfo.uid">
-                    <div class="left">
-                        <img :src="item.userInfo.avatarUrl" alt="" @click="clickItem(item)" />
-                    </div>
-                    <div class="right">
-                        <div>
-                            <div class="name" @click="clickItem(item)">{{ item.userInfo.nickName }}</div>
-                            <div class="time">{{ getBeforeTimeFormat(item.timestamp) }}</div>
-                        </div>
-                        <div class="money">${{ item.amountUsdValue }}</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="option-sheet" v-if="showOptionSheet">
-          <div class="item" v-for="(item, index) in optionList" :key="index" @click="clickOption(item)">
-            <img :src="item.icon" >
-            <div class="label">
-              {{item.label}}
-            </div>
-          </div>
-        </div>
-        <div class="option-mask" v-if="showOptionSheet" @click="showOptionSheet = false"></div>
+        <receive-list :sortType="sortType"></receive-list>
     </div>
 </template>
 <script setup>
 import { receiveListV2 } from '@/http/treasure'
 import { inject, onMounted, ref } from 'vue'
-import { getBeforeTimeFormat } from "@/uilts/help"
-import Report from "@/log-center/log"
+import ReceiveList from '@/view/iframe/treasure-hunt/components/receive-list.vue'
 
 let amountIcon = require('@/assets/svg/icon-sort-amount.svg');
 let timeIcon = require('@/assets/svg/icon-sort-time.svg');
 
-
 let sortTypeIcon = ref(amountIcon);
 
 let state = inject('state')
-state.receive = {
-    end: false,
-    list: []
-}
 
 let optionList = ref([
-  {
-    icon: amountIcon,
-    label: 'Amount',
-    type: 2
-  },
-  {
-    icon: timeIcon,
-    label: 'Time',
-    type: 1
-  }
+    {
+        icon: amountIcon,
+        label: 'Amount',
+        type: 2
+    },
+    {
+        icon: timeIcon,
+        label: 'Time',
+        type: 1
+    }
 ])
 
 
 let page_num = 1
 let page_size = 10
-let sortType = 2;
+let sortType = ref(2);
 let list_end = false
 
 let showOptionSheet = ref(false);
@@ -83,58 +49,19 @@ const clickBack = () => {
     state.page_show = ''
 }
 
-onMounted(() => {
-    list()
-})
 
-const clickItem = (item) => {
-    window.open(`https://twitter.com/${item.userInfo.nickName}`)
-}
 
-const clickOption = (params) => {
-  showOptionSheet.value = false;
-  sortTypeIcon.value = params.icon;
-  page_num = 1;
-  sortType = params.type;
-  list()
-}
-
-function handleScroll(e) {
-    if (list_end) {
-        return
-    }
-    e = e.target
-    if ((e.clientHeight + e.scrollTop) / e.scrollHeight > .8) {
-        if (page_num * page_size == state.receive.list.length) {
-            page_num++
-            list()
-        }
-        list_end = true
+const clickOption = () => {
+    if (sortType.value == 1) {
+        sortType.value = 2
+    } else if (sortType.value == 2) {
+        sortType.value = 1
     }
+    // 切换图标
+    sortTypeIcon.value = optionList.value.filter((item) => { return item.type == sortType.value })[0].icon;
+    page_num = 1;
 }
 
-const list = () => {
-    state.receive.loading = true
-    receiveListV2({
-        params: {
-            postId: state.postId,
-            pageNum: page_num,
-            pageSize: page_size,
-            sortType
-        }
-    }).then((res) => {
-        if (res.code == 0) {
-            state.receive.loading = false
-            if(page_num < 2) {
-              state.receive.list = res.data || [];
-            } else {
-              state.receive.list = state.receive.list.concat(res.data)
-            }
-            state.receive.end = true
-            list_end = false
-        }
-    })
-}
 </script>
 <style lang="scss" scoped>
 .invite-list {
@@ -154,8 +81,8 @@ const list = () => {
         box-shadow: inset 0px -1px 0px #F2F2F2;
 
         .left {
-          display: flex;
-          align-items: center;
+            display: flex;
+            align-items: center;
         }
 
         img {
@@ -253,49 +180,50 @@ const list = () => {
     }
 
     .option-mask {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 800;
-    }
-    .option-sheet {
-      width: 200px;
-      background: #FFFFFF;
-      box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
-      border-radius: 14px;
-      position: absolute;
-      top: 40px;
-      right: 8px;
-      z-index: 1000;
-      cursor: pointer;
-
-      .item {
         width: 100%;
-        height: 40px;
-        display: flex;
-        align-items: center;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 800;
+    }
 
-        img {
-          width: 24px;
-          margin: 0 12px;
-        }
+    .option-sheet {
+        width: 200px;
+        background: #FFFFFF;
+        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
+        border-radius: 14px;
+        position: absolute;
+        top: 40px;
+        right: 8px;
+        z-index: 1000;
+        cursor: pointer;
+
+        .item {
+            width: 100%;
+            height: 40px;
+            display: flex;
+            align-items: center;
+
+            img {
+                width: 24px;
+                margin: 0 12px;
+            }
 
-        .label {
-          font-weight: 500;
-          font-size: 15px;
-          width: calc(100% - 52px);
-          height: 100%;
-          display: flex;
-          align-items: center;
+            .label {
+                font-weight: 500;
+                font-size: 15px;
+                width: calc(100% - 52px);
+                height: 100%;
+                display: flex;
+                align-items: center;
+            }
         }
-      }
 
-       .item:first-child {
-          .label {
-            box-shadow: inset 0px -1px 0px #F2F2F2;
-          }
+        .item:first-child {
+            .label {
+                box-shadow: inset 0px -1px 0px #F2F2F2;
+            }
         }
     }
 }

src/view/iframe/treasure-hunt/components/receive-list.vue

@@ -0,0 +1,210 @@
+<!-- 领取人列表组件 -->
+<template>
+    <div class="content">
+        <img v-show="receive.loading && receive.list.length == 0" :src="require('@/assets/svg/icon-loading-gray.svg')"
+            alt="" class="loading" />
+        <img v-if="receive.list.length == 0 && receive.end" :src="require('@/assets/svg/icon-empty-list.svg')" alt=""
+            class="empty" />
+        <div class="list" v-else @scroll="handleScroll($event)">
+            <div class="item" v-for="item in receive.list" :key="item.userInfo.uid">
+                <div class="left">
+                    <img :src="item.userInfo.avatarUrl" alt="" @click="clickItem(item)" />
+                </div>
+                <div class="right">
+                    <div>
+                        <div class="name" @click="clickItem(item)">{{ item.userInfo.nickName }}</div>
+                        <div class="time">{{ getBeforeTimeFormat(item.timestamp) }}</div>
+                    </div>
+                    <div>
+                        <div class="money">${{ item.amountUsdValue }}</div>
+                        <div class="count">invited:{{ item.inviteNewFansCount }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { receiveListV2 } from '@/http/treasure'
+import { onMounted, reactive, inject, defineProps } from 'vue'
+import { getBeforeTimeFormat } from "@/uilts/help"
+let state = inject('state')
+let receive = reactive({
+    end: false,
+    list: []
+})
+let props = defineProps({
+    sortType: {
+        type: Number,
+        default: 2,
+    }
+})
+
+let page_num = 1
+let page_size = 10
+let sortType = 2;
+let list_end = false
+onMounted(() => {
+    list()
+})
+
+const clickItem = (item) => {
+    window.open(`https://twitter.com/${item.userInfo.nickName}`)
+}
+
+function handleScroll(e) {
+    if (list_end) {
+        return
+    }
+    e = e.target
+    if ((e.clientHeight + e.scrollTop) / e.scrollHeight > .8) {
+        if (page_num * page_size == receive.list.length) {
+            page_num++
+            list()
+        }
+        list_end = true
+    }
+}
+
+const list = () => {
+    receive.loading = true
+    receiveListV2({
+        params: {
+            postId: state.postId,
+            pageNum: page_num,
+            pageSize: page_size,
+            sortType
+        }
+    }).then((res) => {
+        if (res.code == 0) {
+            receive.loading = false
+            if (page_num < 2) {
+                receive.list = res.data || [];
+            } else {
+                receive.list = receive.list.concat(res.data)
+            }
+            receive.end = true
+            list_end = false
+        }
+    })
+}
+</script>
+<style lang="scss" scoped>
+.content {
+    position: relative;
+    height: 100%;
+    overflow-y: auto;
+
+    .footer {
+        background: #fff;
+        padding: 10px 16px 25px 16px;
+    }
+
+    .error {
+        height: 204px;
+        color: #BABABA;
+        background-color: #fff;
+        font-weight: 500;
+        font-size: 15px;
+        line-height: 204px;
+        text-align: center;
+
+    }
+
+    .list {
+        background: #fff;
+        overflow-y: auto;
+
+        .item {
+            height: 60px;
+            display: flex;
+            align-items: center;
+
+            .left {
+                width: 58px;
+                text-align: center;
+
+                img {
+                    cursor: pointer;
+                    border-radius: 50px;
+                    width: 30px;
+                    height: 30px;
+                }
+            }
+
+            .right {
+                flex: 1;
+                box-shadow: inset 0px -1px 0px #F2F2F2;
+
+                display: flex;
+                align-items: center;
+                height: 100%;
+                justify-content: space-between;
+
+                .name {
+                    color: #000000;
+                    font-weight: 500;
+                    font-size: 15px;
+                    cursor: pointer;
+                }
+
+                .time {
+                    color: #A6A6A6;
+                    font-weight: 400;
+                    font-size: 12px;
+                    margin-right: 17px;
+                }
+
+                .money {
+                    color: #FCB936;
+                    font-weight: 500;
+                    font-size: 13px;
+                    margin-right: 16px;
+                    text-align: right;
+
+                }
+
+                .count {
+                    margin-right: 16px;
+                    color: #A9A9A9;
+                    font-weight: 400;
+                    font-size: 12px;
+                    text-align: right;
+                    margin-top: 5px;
+                }
+            }
+        }
+    }
+}
+
+.loading {
+    width: 100px;
+    height: 100px;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    margin-left: -50px;
+    margin-top: -50px;
+    animation: rotation 1s linear infinite;
+}
+
+.empty {
+    width: 100px;
+    height: 100px;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    margin-left: -50px;
+    margin-top: -50px;
+}
+
+@keyframes rotation {
+    from {
+        -webkit-transform: rotate(0deg);
+    }
+
+    to {
+        -webkit-transform: rotate(360deg);
+    }
+}
+</style>

src/view/iframe/treasure-hunt/index.vue

@@ -1,7 +1,7 @@
 <template>
     <v-cover v-if="state.page == '封面页'"></v-cover>
     <v-invite v-if="state.page == '邀请页'"></v-invite>
-    <v-result v-if="state.page == '开奖页'"></v-result>
+    <v-result v-if="state.page == '结果页'"></v-result>
 
     <open-box v-show="state.open_box.show"></open-box>
     <v-toast :show="state.toast.show" :txt="state.toast.txt" :has_icon="state.toast.has_icon"></v-toast>
@@ -308,8 +308,8 @@ const handleStatus = (callback) => {
     // 如果 夺宝状态 = 已结束
     else {
         state.open_btn.txt = 'Look for more treasures'
-        state.page = '封面页'
-        state.cover_status = '奖励已被领光'
+        state.page = '结果页'
+        // state.cover_status = '奖励已被领光'
         state.btn_loading = false
         return
     }

src/view/iframe/treasure-hunt/result.vue

@@ -1,168 +1,214 @@
 <template>
-    <!-- 开奖页 -->
-    <div class="content" v-show-log="state.log_result_show">
-        <img :src="require('@/assets/img/icon-silver-open-box-big.png')" alt="" />
-        <div class="mark">
-
-            <!-- 新粉 -->
-            <template v-if="Number(state.start_task.amountValue) > 0">
-                <p>You are now following
-                    <template v-for="item, i in state.follows">
-                        <span v-if="i == 0">@{{ item.name }}</span>
-                        <span v-else>, @{{ item.name }}</span>
-                    </template>
-                </p>
-                <p>You Win</p>
-                <component-zoom width="335" fontSize="34" style="margin:0 auto;">
-                    <div class="money">${{ state.start_task.usdAmountValue }}</div>
-                </component-zoom>
-                <div class="mark2">
-                    <img :src="state.start_task.currencyIcon" alt="" />
-                    <div>{{ state.start_task.amountValue }} {{ state.start_task.currencySymbol }} stored in your DeNet
-                        account</div>
+    <div class="content">
+        <!-- 结果页 -->
+        <div class="header">
+            <img :src="require('@/assets/subject/004-back-head-top.svg')" alt class="back" />
+            <!-- 领到钱了 -->
+            <template v-if="Number(state.detail.amountUsdValue) > 0">
+                <div class="tip1">This Giveaway Expired on {{ moment(state.detail.endTimestamp).format('MM-DD') }}</div>
+                <div class="tip2">🎉 Awesome! You are the Winner!</div>
+                <div class="tip3">+${{ state.detail.amountUsdValue }}</div>
+                <div class="tip3-back"></div>
+            </template>
+            <!-- 没有领到钱 -->
+            <template v-else>
+                <div class="rabbit">
+                    <img :src="require('@/assets/subject/001-icon-rabbit.svg')" alt />
+                    <p>Sorry, you missed this treasure</p>
+                </div>
+            </template>
+
+        </div>
+        <div class="list">
+            <receive-list></receive-list>
+        </div>
+        <div class="footer">
+            <!-- 领取到钱了 -->
+            <template v-if="Number(state.detail.amountUsdValue) > 0">
+                <div class="btn btn1" @click="clickDone">
+                    <img :src="require('@/assets/svg/icon-wallet-success.svg')" alt />
+                    <span>Wallet</span>
                 </div>
+                <get-more :style_type="4">
+                    <div class="btn btn2">
+                        <img :src="require('@/assets/svg/icon-gold-box-close.svg')" alt />
+                        <span>Get More</span>
+                    </div>
+                </get-more>
             </template>
-            <!-- 老粉不给钱 -->
+            <!-- 没有领到钱 -->
             <template v-else>
-                <p>You already followed
-                    <template v-for="item, i in state.follows">
-                        <span v-if="i == 0">@{{ item.name }}</span>
-                        <span v-else>, @{{ item.name }}</span>
-                    </template>
-                </p>
-                <p>Only new followers open silver chest</p>
-                <p class="txt">Invite people to</p>
-                <p class="txt">open golden chest！</p>
+                <div class="btn btn2 btn3" @click="clickBtn">
+                    <img :src="require('@/assets/svg/icon-gold-box-close.svg')" alt />
+                    <span>Look for more treasures</span>
+                </div>
             </template>
         </div>
-        <v-btn :txt="'Invite friends for more treasures'" :font-size="'16px'" class="btn"
-            v-if="Number(state.start_task.amountValue) > 0" v-click-log="state.log_result_click" @onClick="clickBtn"
-            :disabled="false"></v-btn>
-        <v-btn :txt="'Invite'" :font-size="'16px'" class="btn" v-else @onClick="clickBtn" :disabled="false"
-            v-click-log="state.log_result_click"></v-btn>
     </div>
 </template>
 <script setup>
 import { inject, onMounted } from 'vue'
-import VBtn from '@/view/iframe/treasure-hunt/components/btn.vue'
+import ReceiveList from '@/view/iframe/treasure-hunt/components/receive-list.vue'
+import { chromeExtensionUrl } from '@/uilts/chromeExtension.js'
+import GetMore from '@/view/iframe/publish/components/get-more.vue'
 import Report from "@/log-center/log"
 
 let state = inject('state')
+var moment = require('moment')
 
-state.log_result_show = {
-    businessType: Report.businessType.pageView,
-    pageSource: Report.pageSource.newFansRewardPage,
-    redPacketType: Report.redPacketType.treasure,
-    shareLinkId: state.invite_code,
-    postId: state.postId,
-    extParams: {
-        isNewFans: Number(state.start_task.amountValue) > 0 ? true : false
-    }
-}
-
-state.log_result_click = {
-    businessType: Report.businessType.buttonClick,
-    pageSource: Report.pageSource.newFansRewardPage,
-    objectType: Report.objectType.nextButton,
-    redPacketType: Report.redPacketType.treasure,
-    shareLinkId: state.invite_code,
-    postId: state.postId,
-    extParams: {
-        isNewFans: Number(state.start_task.amountValue) > 0 ? true : false
-    }
+function clickDone() {
+    window.open(`${chromeExtensionUrl + ('iframe/home.html')}`)
 }
 
-async function clickBtn() {
-    let _userInfo = await state.checkIsLogin()
-    if (!_userInfo) {
-        return
-    }
-    state.init(() => {
-        state.page = '邀请页'
-    })
+const clickBtn = () => {
+    // Report.reportLog({
+    //     pageSource: Report.pageSource.pending_page,
+    //     businessType: Report.businessType.buttonClick,
+    //     objectType: Report.objectType.getMoreGiveaway,
+    //     postId: state.postId
+    // });
+    window.open('https://twitter.com/search?q=%23denet');
 }
-JSON.parse('[{\"type\":2},{\"type\":10},{\"relatedUsers\":[{\"name\":\"Ice17619765\",\"twitterUserId\":\"1502254505236525056\"},{\"name\":\"IanDuddyUK\",\"twitterUserId\":\"556285604\"},{\"name\":\"ffvc\",\"twitterUserId\":\"285917234\"}],\"type\":1}]')
-
 </script>
 <style lang="scss" scoped>
 .content {
     width: 375px;
-    height: 500px;
-    background: linear-gradient(179.96deg, #876635 20.15%, #31251A 44.61%, #24180C 78.18%);
-    text-align: center;
-    position: relative;
-
-    img {
-        margin-top: 15px;
-        width: 250px;
-        height: 250px;
-    }
-
-    .mark {
-        position: absolute;
-        top: 246px;
-        width: 375px;
 
-        p {
-            margin: 0;
-            padding: 0 16px;
-            text-align: center;
+    .header {
+        width: 100%;
+        min-height: 150px;
+        position: relative;
 
+        .back {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: -1;
         }
 
-        p:nth-child(1) {
-            color: #A9A49F;
-            font-weight: 400;
-            font-size: 12px;
-            margin-bottom: 10px;
+        .tip1 {
+            color: #FFFFFF;
+            opacity: 0.5;
+            text-align: center;
+            padding-top: 16px;
+            font-weight: 700;
+            font-size: 13px;
+            width: 100%;
         }
 
-        p:nth-child(2) {
-            margin-bottom: 10px;
+        .tip2 {
             color: #FFFFFF;
+            text-align: center;
             font-weight: 800;
-            font-size: 18px;
-        }
+            font-size: 16px;
+            margin-top: 11px;
 
-        .txt {
-            color: #FFC83A;
-            font-weight: 800;
-            font-size: 24px;
+        }
 
+        .tip3-back {
+            width: 100%;
+            height: 43px;
+            position: absolute;
+            top: 74px;
+            left: 0;
+            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.826667) 26.4%, #FFFFFF 71.47%, rgba(255, 255, 255, 0) 100%);
+            opacity: 0.15;
+            z-index: 1;
         }
 
-        .money {
-            color: #FFC83A;
+        .tip3 {
+            position: absolute;
+            top: 74px;
+            z-index: 2;
+            left: 0;
+            width: 100%;
+            line-height: 43px;
+            height: 43px;
+            color: #F5C03F;
+            text-align: center;
+            font-size: 26px;
             font-weight: 800;
-            font-size: 34px;
         }
 
-        .mark2 {
-            margin-top: 10px;
+
+        .rabbit {
+            width: 100%;
+            height: 100%;
             display: flex;
-            justify-content: center;
             align-items: center;
+            align-content: center;
+            flex-wrap: wrap;
+            justify-content: center;
 
             img {
-                width: 17px;
-                height: 17px;
-                margin: 0;
-                margin-right: 5px;
+                width: 150px;
+                height: 80px;
+                margin-top: 14px;
+                margin-bottom: 4px;
             }
 
-            div {
-                color: #A9A49F;
-                font-weight: 400;
-                font-size: 12px;
+            .flower {
+                width: 62px;
+                height: 62px;
+            }
 
+            p {
+                width: 100%;
+                margin: 0;
+                padding: 0;
+                font-weight: 800;
+                font-size: 16px;
+                color: #fff;
+                text-align: center;
+                letter-spacing: 0.3px;
             }
         }
     }
 
-    .btn {
-        position: absolute;
-        bottom: 25px;
-        left: 15px;
+    .list {
+        height: 336px;
+        margin-top: 10px;
+    }
+
+    .footer {
+        height: 84px;
+        display: flex;
+        padding: 16px;
+        justify-content: space-between;
+
+        .btn {
+            width: 166.5px;
+            height: 52px;
+            border-radius: 100px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 800;
+            font-size: 18px;
+            user-select: none;
+            cursor: pointer;
+
+            img {
+                width: 24px;
+                height: 24px;
+                margin-right: 7px;
+            }
+        }
+
+        .btn1 {
+            background: #FFFFFF;
+            border: 1px solid #DEDEDE;
+            color: #585858;
+        }
+
+        .btn2 {
+            color: #FFFFFF;
+            background: #1D9BF0;
+        }
+
+        .btn3 {
+            width: 100%;
+        }
     }
 }
 </style>