[add][ui]

src/assets/svg/icon-green-yes.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6" cy="6" r="6" fill="#08B706"/>
+<path d="M3.6875 6L5.4783 7.79096L8.71773 3.34812" stroke="white" stroke-width="1.2"/>
+</svg>

src/assets/svg/icon-while-user.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="8" viewBox="0 0 9 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 4C5.60514 4 6.5 3.10514 6.5 2C6.5 0.894857 5.60514 8.16868e-08 4.5 8.16868e-08C4.23734 -7.49976e-05 3.97723 0.0516053 3.73454 0.152088C3.49186 0.252571 3.27135 0.399887 3.08562 0.585619C2.89989 0.771351 2.75257 0.991859 2.65209 1.23454C2.55161 1.47723 2.49992 1.73734 2.5 2C2.5 3.10514 3.39486 4 4.5 4ZM4.5 4.57143C3.16514 4.57143 0.5 5.33714 0.5 6.85714V8H8.5V6.85714C8.5 5.33714 5.83486 4.57143 4.5 4.57143Z" fill="white"/>
+</svg>

src/view/iframe/treasure-hunt/components/btn.vue

@@ -2,7 +2,7 @@
     <div class="btn-submit" @click="clickBtn" :class="{ 'no': loading, 'disabled': disabled }">
         <img :src="require('@/assets/svg/icon-iframe-loading.svg')" alt="" class="loading" v-if="loading && icon" />
         <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" v-if="!loading && icon" />
-        <span :style="{ 'font-size': fontSize }">{{ txt }}</span>
+        <span :style="{ 'font-size': fontSize, 'color': txtCorlor }">{{ txt }}</span>
     </div>
 </template>
 <script setup>
@@ -27,6 +27,9 @@ defineProps({
     disabled: {
         type: Boolean,
         default: false
+    },
+    txtCorlor: {
+        type: String
     }
 })
 const emit = defineEmits(['on-click'])

src/view/iframe/treasure-hunt/components/hover-tip.vue

@@ -1,10 +1,23 @@
 <template>
     <div class="hover-tip">
-        <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
-        <span>$0.02</span>
+        <img :src="icon" alt="" />
+        <span>{{ txt }}</span>
         <img :src="require('@/assets/svg/icon-tip-arrow.svg')" alt="" class="arrow" />
     </div>
 </template>
+<script setup>
+import { defineProps } from 'vue'
+defineProps({
+    txt: {
+        type: String,
+        default: ''
+    },
+    icon: {
+        type: String,
+        default: require('@/assets/svg/icon-green-yes.svg')
+    }
+})
+</script>
 <style lang="scss">
 .hover-tip {
     width: fit-content;
@@ -17,8 +30,8 @@
     align-items: center;
     position: relative;
     margin-bottom: 5px;
-    position: fixed;
-    top: 20px;
+    position: absolute;
+    top: -20px;
 
     img {
         width: 12px;

src/view/iframe/treasure-hunt/components/invite-friends.vue

@@ -17,9 +17,13 @@
             <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
             <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
         </div>
-        <div class="btn-chat">Invite a friend to open the chest</div>
+        <v-btn :txt="'Invite a friend to open the chest'" :font-size="'17px'" class="btn" :icon="false"
+            :disabled="true"></v-btn>
     </div>
 </template>
+<script setup>
+import VBtn from '@/view/iframe/treasure-hunt/components/btn.vue'
+</script>
 <style lang="scss" scoped>
 .invite-friends {
     padding: 18px 16px 25px 16px;
@@ -77,6 +81,7 @@
 
     .share-list {
         margin-top: 20px;
+        text-align: center;
 
         img {
             user-select: none;
@@ -88,18 +93,6 @@
         }
     }
 
-    .btn-chat {
-        margin-top: 20px;
-        cursor: pointer;
-        color: #AFAFAF;
-        background: #F1F1F1;
-        border-radius: 100px;
-        height: 53px;
-        line-height: 53px;
-        text-align: center;
-        font-weight: 600;
-        user-select: none;
-        font-size: 17px;
-    }
+
 }
 </style>

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

@@ -20,24 +20,15 @@
                 </div>
             </div>
         </div>
-        <div class="info">
-            Invite people to hunt treasure with you!
-        </div>
+        <v-btn :txt="'Invite a friend to open the chest'" :font-size="'17px'" class="btn" :icon="false"
+            :disabled="true"></v-btn>
     </div>
 </template>
 <script setup>
 import { reactive } from 'vue'
-let state = reactive({
-    page: '封面'
-})
+import VBtn from '@/view/iframe/treasure-hunt/components/btn.vue'
 </script>
 <style lang="scss" scoped>
-.info {
-    color: #BABABA;
-    font-weight: 500;
-    font-size: 15px;
-}
-
 .list {
     .item {
         height: 60px;

src/view/iframe/treasure-hunt/components/open-box.vue

@@ -3,12 +3,12 @@
     <!-- 开奖页 -->
     <div class="content">
 
-        <img :src="require('@/assets/svg/icon-silver-open-box.svg')" alt="" />
+        <img :src="require('@/assets/img/icon-silver-open-box.png')" alt="" />
         <div class="mark">
             <p>You Win</p>
             <div class="money">$0.22</div>
             <div class="mark2">
-                <img :src="require('@/assets/svg/icon-silver-open-box.svg')" alt="" />
+                <img :src="require('@/assets/img/icon-silver-open-box.png')" alt="" />
                 <div>14872 SHBI stored in your DeNet account</div>
             </div>
 

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

@@ -2,16 +2,16 @@
     <v-cover v-if="state.page == '封面页'"></v-cover>
     <v-invite v-if="state.page == '邀请页'"></v-invite>
     <v-result v-if="state.page == '开奖页'"></v-result>
-    <open-box v-if="state.page == '开奖'"></open-box>
+    <!-- <open-box v-if="state.page == '开奖'"></open-box> -->
 </template>
 <script setup>
 import { reactive, provide } from 'vue'
 import VCover from '@/view/iframe/treasure-hunt/cover.vue'
 import VInvite from '@/view/iframe/treasure-hunt/invite.vue'
 import VResult from '@/view/iframe/treasure-hunt/result.vue'
-import OpenBox from '@/view/iframe/treasure-hunt/components/dialog.vue'
+// import OpenBox from '@/view/iframe/treasure-hunt/components/dialog.vue'
 let state = reactive({
-    page: '开奖'
+    page: '邀请页'
 })
 provide('state', state)
 

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

@@ -3,15 +3,9 @@
     <div class="area-process">
         <v-head></v-head>
         <div class="box-process">
-            <div class="item">
-                <hover-tip></hover-tip>
-                <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" @mouseenter="mouseItem($event)" />
-            </div>
-            <div class="item">
-                <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
-            </div>
-            <div class="item">
-                <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
+            <div class="item" v-for="item, i in state.boxs">
+                <hover-tip :txt="item.txt" v-show="item.show"></hover-tip>
+                <img :src="item.icon" alt="" @mouseenter="mouseItem($event, i)" />
             </div>
             <div class="line">
                 <div class="full"></div>
@@ -29,29 +23,65 @@
     </div>
 
     <div class="area-nav">
-        <div class="item" :class="{ active: state.tab == 1 }" @click="clickSwicthTab(1)">invite friends</div>
-        <div class="item" :class="{ active: state.tab == 2 }" @click="clickSwicthTab(2)">invited</div>
+        <div class="item" :class="{ active: state.tab_index == i }" @click="clickSwicthTab(i)"
+            v-for="item, i in state.tabs">
+            {{ item.txt }}
+        </div>
     </div>
     <div class="area-info">
-        <invite-friends v-show="state.tab == 1"></invite-friends>
-        <invite-list v-show="state.tab == 2"></invite-list>
+        <invite-friends v-show="state.tab_index == 0"></invite-friends>
+        <invite-list v-show="state.tab_index == 1"></invite-list>
     </div>
 </template>
 <script setup>
-import { reactive, ref, onMounted, watch } from 'vue'
+import { reactive, ref, onMounted, watch, inject } from 'vue'
 import VHead from '@/view/iframe/treasure-hunt/components/head.vue'
 import InviteList from '@/view/iframe/treasure-hunt/components/invite-list.vue'
 import HoverTip from '@/view/iframe/treasure-hunt/components/hover-tip.vue'
 import InviteFriends from '@/view/iframe/treasure-hunt/components/invite-friends.vue'
 
 let content_success_message = ref(null)
+let state = inject('state')
+
+// ---- 走马灯
+
+state.success_message_list = []
+
+
+// ---- box 区域
+let silver_close_box = require('@/assets/img/icon-silver-close-box.png')
+let silver_open_box = require('@/assets/img/icon-silver-open-box.png')
+let gold_open_box = require('@/assets/img/icon-gold-open-box.png')
+let gold_close_box = require('@/assets/img/icon-gold-close-box.png')
+
+state.boxs = [
+    {
+        txt: '0/1',
+        icon: silver_close_box
+    },
+    {
+        txt: '123',
+        icon: silver_close_box
+    },
+    {
+        txt: '123',
+        icon: silver_close_box
+    }
+]
+
+
+
+
+// ---- tab区域 ----
+state.tab_index = 0
+state.tabs = [{
+    txt: 'invite friends'
+}, {
+    txt: 'invited'
+}]
+
+
 
-let state = reactive({
-    page: '封面',
-    tab: 1,
-    scroll: true,
-    success_message_list: []
-})
 watch(state, () => {
     if (content_success_message && content_success_message.value) {
         let dom = content_success_message.value
@@ -61,7 +91,7 @@ watch(state, () => {
     }
 })
 const clickSwicthTab = (tab) => {
-    state.tab = tab
+    state.tab_index = tab
 }
 
 onMounted(() => {
@@ -86,6 +116,8 @@ onMounted(() => {
 
 const mouseItem = (e) => {
     console.log(e)
+
+
 }
 
 const mouseOver = () => {
@@ -119,6 +151,9 @@ const mouseLeave = () => {
 
         .item {
             z-index: 2;
+            display: flex;
+            justify-content: center;
+            position: relative;
         }
 
         img {

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

@@ -1,14 +1,14 @@
 <template>
     <!-- 开奖页 -->
     <div class="content">
-        <img :src="require('@/assets/svg/icon-silver-open-box.svg')" alt="" />
+        <img :src="require('@/assets/img/icon-silver-open-box.png')" alt="" />
         <div class="mark">
             <p>You already followed Younan111 </p>
             <template v-if="state.status == '新粉给钱'">
                 <p>You Win</p>
                 <div class="money">$0.22</div>
                 <div class="mark2">
-                    <img :src="require('@/assets/svg/icon-silver-open-box.svg')" alt="" />
+                    <img :src="require('@/assets/img/icon-silver-open-box.png')" alt="" />
                     <div>14872 SHBI stored in your DeNet account</div>
                 </div>
             </template>