[add][ui]

src/view/iframe/test/index.vue

@@ -1,31 +1,8 @@
 <template>
-    <!-- <div class="denet-toolbox" @click.stop="clickHead">
-        
-    </div> -->
-    <input type="button" value="点击" @click="state.show = !state.show">
-    <p v-if="state.show" :data-view="1" :data-click="'按钮'" @click.stop="clickTest">1</p>
-    <p v-else :data-view="2">2</p>
-
+    <treasure-hunt></treasure-hunt>
 </template>
 <script setup>
-import { onMounted, reactive } from "vue";
-
-let state = reactive({
-    show: false
-})
-onMounted(() => {
-    var io = new IntersectionObserver((e) => {
-        console.log(e[0].target)
-    });
-    io.observe(document.querySelector('p[data-view]'))
-
-})
-
-function clickTest() {
-    console.log('clickTest')
-}
-
+import TreasureHunt from '@/view/iframe/treasure-hunt/index.vue'
 </script>
-
-<style lang="scss">
+<style lang="scss" scoped>
 </style>

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

@@ -0,0 +1,79 @@
+<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>
+    <!-- 任务状态 -->
+    <!-- 分享页面 -->
+</template>
+<script>
+
+</script>
+<style lang="scss" >
+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>