[add][ui]

src/assets/svg/icon-tip-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 0H9.5L4.5 5L0.5 0Z" fill="black" fill-opacity="0.6"/>
+</svg>

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

@@ -0,0 +1,214 @@
+<template>
+    <!-- 封面页 -->
+    <div class="cover">
+        <v-head></v-head>
+        <!-- 邀请人 -->
+        <div class="invite">
+            <img :src="require('@/assets/svg/icon-warning.svg')" alt="" />
+            <span>@Younan666 invite you to</span>
+        </div>
+        <div class="treasure">
+            <span>Treasure</span>
+            <span>$100</span>
+        </div>
+        <div class="gain">
+            <span>Your Gain Up to</span>
+            <span>$</span>
+            <span>1</span>
+        </div>
+        <div class="coin">
+            <img :src="require('@/assets/svg/icon-warning.svg')" alt="" />
+            <span>SHIB equivalent (Crypto)</span>
+        </div>
+        <div class="box">
+            <img :src="require('@/assets/img/icon-treasure-box.png')" alt="" />
+        </div>
+        <div class="mark">
+            <img :src="require('@/assets/svg/icon-three-line.svg')" alt="" />
+            <span>to Hunt Treasure</span>
+        </div>
+        <div class="btn-submit">
+            <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
+            <span>START</span>
+        </div>
+    </div>
+
+</template>
+<script setup>
+import VHead from '@/view/iframe/treasure-hunt/head.vue'
+
+</script>
+<style lang="scss" scoped>
+.cover {
+    width: 375px;
+    height: 500px;
+    background: linear-gradient(179.96deg, #25180D 38.82%, #5E4025 55.4%, #876635 61.6%, #24180C 71.59%);
+    border-radius: 20px;
+
+    .head {
+        padding: 10px;
+        display: flex;
+        align-items: center;
+
+        img {
+            width: 16px;
+            height: 16px;
+            border-radius: 100px;
+        }
+
+        span {
+            color: #B69882;
+            font-weight: 400;
+            margin-left: 5px;
+            font-size: 11px;
+            flex-grow: 0;
+        }
+    }
+
+    .invite {
+        background: rgba(255, 255, 255, 0.1);
+        height: 28px;
+        display: flex;
+        align-items: center;
+        margin: 0 auto;
+        margin-top: 20px;
+        margin-bottom: 10px;
+        border-radius: 100px;
+        width: fit-content;
+        padding-right: 11px;
+
+
+        img {
+            width: 18px;
+            height: 18px;
+            border-radius: 100px;
+            margin-left: 11px;
+            margin-right: 6px;
+        }
+
+        span {
+            color: #BE9F89;
+        }
+    }
+
+    .treasure {
+        text-align: center;
+
+        span {
+            font-size: 34px;
+            font-weight: 900;
+            line-height: 40px;
+        }
+
+        span:first-child {
+            color: #FFC83A;
+            margin-right: 10px;
+        }
+
+        span:last-child {
+            color: #FFFFFF;
+        }
+    }
+
+    .gain {
+        width: 100%;
+        background: #332319;
+        height: 37px;
+        margin-top: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        span {
+            color: #fff;
+            font-weight: 500;
+            font-size: 16px;
+            line-height: 16px;
+
+        }
+
+        span:first-child {
+            font-size: 15px;
+            line-height: 15px;
+            margin-right: 10px;
+        }
+
+        span:last-child {
+            margin-left: 2px;
+            font-weight: 800;
+            font-size: 24px;
+            line-height: 24px;
+        }
+    }
+
+    .coin {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 10px;
+
+        img {
+            width: 17px;
+            height: 17px;
+        }
+
+        span {
+            margin-left: 4px;
+            font-weight: 400;
+            font-size: 11px;
+            line-height: 15px;
+            color: #FFFFFF;
+
+            opacity: 0.7;
+        }
+    }
+
+    .box {
+        text-align: center;
+
+        img {
+            width: 160px;
+            height: 160px;
+        }
+
+    }
+
+    .mark {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 24px;
+
+        span {
+            font-weight: 500;
+            font-size: 12px;
+            line-height: 17px;
+            color: #65C1FF;
+
+        }
+    }
+
+    .btn-submit {
+        background: #1D9BF0;
+        border-radius: 100px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 53px;
+        width: 343px;
+        margin: 0 auto;
+        cursor: pointer;
+        margin-top: 16px;
+        user-select: none;
+
+        span {
+            font-weight: 800;
+            color: #FFFFFF;
+            font-size: 20px;
+            line-height: 24px;
+            margin-left: 6px;
+
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,62 @@
+<template>
+    <div class="head">
+        <div class="left">
+            <img :src="require('@/assets/svg/icon-warning.svg')" alt="" />
+            <span>from</span>
+            <span>@Alden777</span>
+        </div>
+        <div class="right">
+            <span>
+                Remaining
+            </span>
+            <span>$37.5</span>
+        </div>
+
+    </div>
+</template>
+<script setup>
+
+</script>
+<style lang="scss" scoped>
+.head {
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+
+    .left {
+        display: flex;
+        align-items: center;
+
+        img {
+            width: 16px;
+            height: 16px;
+            border-radius: 100px;
+        }
+
+        span {
+            color: #B69882;
+            font-weight: 400;
+            margin-left: 5px;
+            font-size: 11px;
+            flex-grow: 0;
+        }
+    }
+
+    .right {
+        span {
+            font-weight: 400;
+            font-size: 11px;
+            line-height: 15px;
+        }
+
+        span:first-child {
+            color: #FFFFFF;
+            opacity: 0.7;
+        }
+
+        span:last-child {
+            color: #FFD23B;
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,44 @@
+<template>
+    <div class="hover-tip">
+        <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
+        <span>$0.02</span>
+        <img :src="require('@/assets/svg/icon-tip-arrow.svg')" alt="" class="arrow" />
+    </div>
+</template>
+<style lang="scss">
+.hover-tip {
+    width: fit-content;
+    height: 20px;
+    line-height: 20px;
+    padding: 0 7px;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    position: relative;
+    margin-bottom: 5px;
+    position: fixed;
+    top: 20px;
+
+    img {
+        width: 12px;
+        height: 12px;
+    }
+
+    span {
+        margin-left: 4px;
+        font-weight: 500;
+        font-size: 12px;
+        color: #FFFFFF;
+    }
+
+    .arrow {
+        position: absolute;
+        width: 9px;
+        height: 5px;
+        bottom: -5px;
+        left: 50%;
+        margin-left: -4.5px;
+    }
+}
+</style>

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

@@ -1,22 +1,14 @@
 <template>
-    <!-- 封面页 -->
-    <div class="cover">
-        <div class="head">
-            <img :src="require('@/assets/svg/icon-warning.svg')" alt="" />
-            <span>from</span>
-            <span>@Alden777</span>
-        </div>
-        <!-- 邀请人 -->
-        <div class="invite">
-            <img :src="require('@/assets/svg/icon-warning.svg')" alt="" />
-            <span>@Younan666 invite you to</span>
-        </div>
-
-    </div>
-    <!-- 任务状态 -->
-    <!-- 分享页面 -->
+    <!-- <v-cover v-if="state.page = '封面'"></v-cover> -->
+    <!-- 邀请页 -->
+    <v-invite></v-invite>
 </template>
-<script>
+<script setup>
+import { reactive } from 'vue'
+import VInvite from '@/view/iframe/treasure-hunt/invite.vue'
+let state = reactive({
+    page: '封面'
+})
 
 </script>
 <style lang="scss" >
@@ -24,56 +16,5 @@ html,
 body {
     margin: 0;
     padding: 0;
-
-}
-
-.cover {
-    width: 375px;
-    height: 500px;
-    background: linear-gradient(179.96deg, #25180D 38.82%, #5E4025 55.4%, #876635 61.6%, #24180C 71.59%);
-    border-radius: 20px;
-
-    .head {
-        padding: 10px;
-        display: flex;
-        align-items: center;
-
-        img {
-            width: 16px;
-            height: 16px;
-            border-radius: 100px;
-        }
-
-        span {
-            color: #B69882;
-            font-weight: 400;
-            margin-left: 5px;
-            font-size: 11px;
-            flex-grow: 0;
-        }
-    }
-
-    .invite {
-        background: rgba(255, 255, 255, 0.1);
-        height: 28px;
-        display: flex;
-        align-items: center;
-        border-radius: 100px;
-        width: 187px;
-
-
-        img {
-            width: 18px;
-            height: 18px;
-            border-radius: 100px;
-            margin-left: 11px;
-            margin-right: 6px;
-        }
-
-        span {
-            color: #BE9F89;
-        }
-
-    }
 }
 </style>

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

@@ -0,0 +1,102 @@
+<template>
+    <div class="invite-friends">
+        <div class="txt">To open the treasure chest you need to share the URL to your friends. Make sure they finish
+            the
+            tasks.</div>
+        <div class="area-url">
+            <div class="url">h5.denetme.net/aac465147b12I8ac46531994</div>
+            <div class="btn">
+                Copy
+            </div>
+        </div>
+        <div class="share-list">
+            <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
+            <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
+            <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
+            <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
+            <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>
+    </div>
+</template>
+<style lang="scss" scoped>
+.invite-friends {
+    padding: 18px 16px 25px 16px;
+
+    .txt {
+        font-style: normal;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 18px;
+        /* or 129% */
+
+        letter-spacing: 0.3px;
+
+        color: #000000;
+    }
+
+    .area-url {
+        height: 70px;
+        background: rgba(29, 155, 240, 0.01);
+        border: 1px solid #1D9BF0;
+        border-radius: 5px;
+        display: flex;
+        align-items: center;
+        padding-left: 15px;
+        padding-right: 11px;
+        justify-content: space-between;
+
+        .url {
+            width: 194px;
+
+            color: #737373;
+            font-weight: 400;
+            font-size: 13px;
+            white-space: normal;
+
+            word-wrap: break-word;
+
+            word-break: break-all;
+        }
+
+        .btn {
+            background: #1D9BF0;
+            border-radius: 35px;
+            width: 100px;
+            text-align: center;
+            line-height: 37px;
+            height: 37px;
+            font-weight: 700;
+            font-size: 15px;
+            color: #fff;
+            cursor: pointer;
+        }
+    }
+
+    .share-list {
+        margin-top: 20px;
+
+        img {
+            cursor: pointer;
+            width: 33px;
+            height: 33px;
+            margin-right: 14px;
+            border-radius: 100px;
+        }
+    }
+
+    .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;
+        font-size: 17px;
+    }
+}
+</style>

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

@@ -0,0 +1,80 @@
+<template>
+    <div class="list">
+        <div class="item">
+            <div class="left">
+                <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
+            </div>
+            <div class="right">
+                <div>@Ambrose1283</div>
+                <div>3 min ago</div>
+            </div>
+        </div>
+        <div class="item">
+            <div class="left">
+                <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
+            </div>
+            <div class="right">
+                <div>@Ambrose1283</div>
+                <div>3 min ago</div>
+            </div>
+        </div>
+    </div>
+    <div class="info">
+        Invite people to hunt treasure with you!
+    </div>
+</template>
+<script setup>
+import { reactive } from 'vue'
+let state = reactive({
+    page: '封面'
+})
+</script>
+<style lang="scss" scoped>
+.info {
+    color: #BABABA;
+    font-weight: 500;
+    font-size: 15px;
+}
+
+.list {
+    .item {
+        height: 60px;
+        display: flex;
+        align-items: center;
+
+        .left {
+            width: 58px;
+            text-align: center;
+
+            img {
+                width: 30px;
+                height: 30px;
+            }
+        }
+
+        .right {
+            flex: 1;
+            border-bottom: 1px solid #D9D9D9;
+            display: flex;
+            align-items: center;
+            height: 100%;
+            justify-content: space-between;
+
+            div:nth-child(1) {
+                color: #000000;
+                font-weight: 500;
+                font-size: 15px;
+
+            }
+
+            div:nth-child(2) {
+                color: #A6A6A6;
+                font-weight: 400;
+                font-size: 12px;
+                margin-right: 17px;
+
+            }
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,191 @@
+<template>
+    <!-- 邀请页 -->
+    <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>
+            <div class="line">
+                <div class="full"></div>
+            </div>
+        </div>
+        <div class="area-success-message">
+            <div class="success-message">
+                <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
+                <span>@JACK1985 </span> &nbsp;
+                <span>Opened Treasure Chest</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="area-nav">
+        <div class="item active">invite friends</div>
+        <div class="item">invited</div>
+    </div>
+    <div class="area-info">
+        <!-- <invite-friends></invite-friends> -->
+        <invite-list></invite-list>
+    </div>
+
+</template>
+<script setup>
+import { reactive } from 'vue'
+import VHead from '@/view/iframe/treasure-hunt/head.vue'
+import InviteList from '@/view/iframe/treasure-hunt/invite-list.vue'
+
+import HoverTip from '@/view/iframe/treasure-hunt/hover-tip.vue'
+import InviteFriends from '@/view/iframe/treasure-hunt/invite-friends.vue'
+let state = reactive({
+    page: '封面'
+})
+
+const mouseItem = (e) => {
+    console.log(e)
+}
+</script>
+<style lang="scss"  scoped>
+.area-process {
+    width: 375px;
+    height: 170px;
+    background: linear-gradient(179.96deg, #735931 0.04%, #0E0803 53.64%);
+    position: relative;
+
+    .box-process {
+        width: 350px;
+        height: 90px;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        position: absolute;
+        top: 32px;
+        left: 13px;
+
+        .item {
+            z-index: 2;
+        }
+
+        img {
+            width: 60px;
+            height: 60px;
+        }
+
+        .item:nth-child(1) {
+
+            margin-left: 56px;
+        }
+
+        .item:nth-child(2) {
+            width: 60px;
+            height: 60px;
+            margin-left: 40px;
+        }
+
+        .item:nth-child(3) {
+            img {
+                width: 90px;
+                height: 90px;
+            }
+
+            margin-left: 40px;
+        }
+
+        .line {
+            width: 330px;
+            height: 4px;
+            background: rgba(255, 210, 59, 0.2);
+            position: absolute;
+            border-radius: 100px;
+            overflow: hidden;
+            left: 13px;
+            top: 38px;
+
+            .full {
+                position: absolute;
+                left: 0;
+                top: 0;
+                height: 4px;
+                width: 100px;
+                background: #FFD23B;
+            }
+        }
+
+    }
+
+    .area-success-message {
+        width: 100%;
+        height: 30px;
+        position: absolute;
+        bottom: 13px;
+
+        .success-message {
+            width: fit-content;
+            height: 30px;
+            padding: 0 9px;
+            border-radius: 100px;
+            background: rgba(255, 255, 255, 0.1);
+            display: flex;
+            align-items: center;
+
+            img {
+                width: 20px;
+                height: 20px;
+                border-radius: 100px;
+                margin-right: 8px;
+
+            }
+
+            span {
+                font-style: normal;
+                font-weight: 500;
+                font-size: 12px;
+                line-height: 14px;
+            }
+
+            span:nth-child(2) {
+                color: #1D9BF0;
+            }
+
+            span:nth-child(3) {
+                color: #A8A8A8;
+            }
+        }
+
+    }
+}
+
+.area-nav {
+    width: 375px;
+    height: 38px;
+    display: flex;
+
+    .item {
+        color: #757575;
+        background: #F0F0F0;
+        text-align: center;
+        width: 50%;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 38px;
+        cursor: pointer;
+    }
+
+    .active {
+        background: #FFFFFF;
+        color: #000000;
+    }
+}
+
+.area-info {
+    width: 375px;
+
+
+}
+</style>