[add][ui]

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

@@ -0,0 +1,76 @@
+<template>
+    <div class="btn-submit" @click="clickBtn" :class="{ 'no': loading }">
+        <img :src="require('@/assets/svg/icon-iframe-loading.svg')" alt="" class="loading" v-if="loading" />
+        <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" v-else />
+        <span :style="{ 'font-size': fontSize }">{{ txt }}</span>
+    </div>
+</template>
+<script setup>
+import { defineProps } from 'vue'
+defineProps({
+    txt: {
+        type: String,
+        default: ''
+    },
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    fontSize: {
+        type: String,
+        default: '20px'
+    }
+})
+const clickBtn = () => {
+
+}
+</script>
+<style scoped lang="scss">
+.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;
+
+    }
+
+    img {
+        width: 20px;
+        height: 20px;
+    }
+
+
+
+    .loading {
+        animation: loading 1s infinite linear;
+    }
+}
+
+.no {
+    cursor: no-drop;
+}
+
+@keyframes loading {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+</style>

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

@@ -27,20 +27,19 @@
             <img :src="require('@/assets/svg/icon-three-line.svg')" alt="" />
             <span>to Hunt Treasure</span>
         </div>
-        <div class="btn-submit" @click="clickStart">
-            <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
-            <span>START</span>
-        </div>
+        <v-btn :txt="'Start'"></v-btn>
     </div>
 
 </template>
 <script setup>
 import { inject } from 'vue'
+import VBtn from '@/view/iframe/treasure-hunt/btn.vue'
 import VHead from '@/view/iframe/treasure-hunt/head.vue'
 let state = inject('state')
 
 const clickStart = () => {
     state.page = '邀请页'
+    console.log(state)
 }
 </script>
 <style lang="scss" scoped>
@@ -193,27 +192,5 @@ const clickStart = () => {
         }
     }
 
-    .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/index.vue

@@ -1,14 +1,15 @@
 <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>
 </template>
 <script setup>
-import { ref, provide } from 'vue'
+import { reactive, provide } from 'vue'
 import VCover from '@/view/iframe/treasure-hunt/cover.vue'
 import VInvite from '@/view/iframe/treasure-hunt/invite.vue'
-let state = ref({
-    page: '封面页'
+import VResult from '@/view/iframe/treasure-hunt/result.vue'
+let state = reactive({
+    page: '开奖页'
 })
 provide('state', state)
 

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

@@ -0,0 +1,48 @@
+<template>
+    <!-- 开奖页 -->
+    <div class="content">
+        <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
+        <p>You already followed Younan111 </p>
+        <p>Only new followers open silver chest</p>
+        <p class="txt">Invite people to</p>
+        <p class="txt">open golden chest！</p>
+        <v-btn :txt="'Invite friends for more treasures'" :font-size="'16px'"></v-btn>
+    </div>
+</template>
+<script setup>
+import { inject } from 'vue'
+import VBtn from '@/view/iframe/treasure-hunt/btn.vue'
+let state = inject('state')
+
+</script>
+<style lang="scss" scoped>
+.content {
+    width: 375px;
+    height: 500px;
+    background: linear-gradient(179.96deg, #876635 20.15%, #31251A 44.61%, #24180C 78.18%);
+
+    p {
+        margin: 0;
+        padding: 0;
+        text-align: center;
+
+    }
+
+    p:nth-child(1) {
+        color: #A9A49F;
+        font-weight: 400;
+        font-size: 12px;
+    }
+
+    p:nth-child(2) {
+        color: #FFFFFF;
+        font-weight: 800;
+        font-size: 18px;
+    }
+
+    .money {
+        color: #FFC83A;
+    }
+
+}
+</style>