[edit][夺宝]

package.json

@@ -65,4 +65,4 @@
     "not dead",
     "not ie 11"
   ]
-}
+}

src/iframe/tool-box.js

@@ -1,5 +1,4 @@
 import { createApp } from 'vue'
 import App from '@/view/iframe/tool-box/index.vue'
-
 const app = createApp(App);
-app.mount('#app');
+app.mount('#app');

src/iframe/treasure-hunt.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from '@/view/iframe/test/index.vue'
+
+const app = createApp(App);
+app.mount('#app');

src/manifest.json

@@ -100,7 +100,8 @@
                 "/iframe/tool-box.html",
                 "/iframe/test.html",
                 "/iframe/ach-cashier.html",
-                "/img/icon-denet-logo.svg"
+                "/img/icon-denet-logo.svg",
+                "/iframe/treasure-hunt.html"
             ],
             "matches": [
                 "<all_urls>"

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

@@ -27,7 +27,7 @@
             <img :src="require('@/assets/svg/icon-three-line.svg')" alt="" />
             <span>to Hunt Treasure</span>
         </div>
-        <div class="btn-submit">
+        <div class="btn-submit" @click="clickStart">
             <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
             <span>START</span>
         </div>
@@ -35,8 +35,13 @@
 
 </template>
 <script setup>
+import { inject } from 'vue'
 import VHead from '@/view/iframe/treasure-hunt/head.vue'
+let state = inject('state')
 
+const clickStart = () => {
+    state.page = '邀请页'
+}
 </script>
 <style lang="scss" scoped>
 .cover {

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

@@ -1,14 +1,16 @@
 <template>
-    <!-- <v-cover v-if="state.page = '封面'"></v-cover> -->
+    <v-cover v-if="state.page == '封面页'"></v-cover>
     <!-- 邀请页 -->
-    <v-invite></v-invite>
+    <v-invite v-if="state.page == '邀请页'"></v-invite>
 </template>
 <script setup>
-import { reactive } from 'vue'
+import { ref, provide } from 'vue'
+import VCover from '@/view/iframe/treasure-hunt/cover.vue'
 import VInvite from '@/view/iframe/treasure-hunt/invite.vue'
-let state = reactive({
-    page: '封面'
+let state = ref({
+    page: '封面页'
 })
+provide('state', state)
 
 </script>
 <style lang="scss" >

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

@@ -17,16 +17,13 @@
                 <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 class="success-message">
-                <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
-                <span>@JACK1985 </span> &nbsp;
-                <span>Opened Treasure Chest</span>
+        <div class="area-success-message" @mouseover="mouseOver" @mouseleave="mouseLeave">
+            <div class="content-success-message" ref="content_success_message">
+                <div class="success-message" v-for="item, index in state.success_message_list" :key="index">
+                    <img :src="require('@/assets/svg/icon-btn-box.svg')" alt="" />
+                    <span>{{ item.name }} </span> &nbsp;
+                    <span>Opened Treasure Chest</span>
+                </div>
             </div>
         </div>
     </div>
@@ -41,23 +38,67 @@
     </div>
 </template>
 <script setup>
-import { reactive } from 'vue'
+import { reactive, ref, onMounted, watch } 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 content_success_message = ref(null)
+
 let state = reactive({
     page: '封面',
-    tab: 1
+    tab: 1,
+    scroll: true,
+    success_message_list: []
+})
+watch(state, () => {
+    if (content_success_message && content_success_message.value) {
+        let dom = content_success_message.value
+        let width = dom.clientWidth
+        let s = parseInt(width / 80)
+        dom.style.animationDuration = s + 's'
+    }
 })
 const clickSwicthTab = (tab) => {
     state.tab = tab
 }
 
+onMounted(() => {
+    setTimeout(() => {
+        state.success_message_list = [{
+            name: '1',
+            date: Date.now(),
+        }, {
+            name: '2',
+            date: Date.now(),
+        },
+        {
+            name: '3',
+            date: Date.now(),
+        }, {
+            name: '4',
+            date: Date.now(),
+        }]
+    })
+
+})
+
 const mouseItem = (e) => {
     console.log(e)
 }
+
+const mouseOver = () => {
+    if (content_success_message && content_success_message.value && content_success_message.value.style) {
+        content_success_message.value.style.animationPlayState = 'paused'
+    }
+}
+const mouseLeave = () => {
+    if (content_success_message && content_success_message.value && content_success_message.value.style) {
+        content_success_message.value.style.animationPlayState = 'running'
+    }
+}
+
 </script>
 <style lang="scss"  scoped>
 .area-process {
@@ -128,49 +169,65 @@ const mouseItem = (e) => {
     }
 
     .area-success-message {
-        width: 100%;
         height: 30px;
+        width: 100%;
         position: absolute;
         bottom: 13px;
-        display: flex;
         overflow: hidden;
-        /* align-items: center; */
-        flex-direction: column-reverse;
-        flex-wrap: wrap;
 
-        .success-message {
+        .content-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;
+            animation: rolling 18s linear infinite;
 
-            img {
-                width: 20px;
-                height: 20px;
+            .success-message {
+                cursor: auto;
+                width: fit-content;
+                height: 30px;
+                padding: 0 9px;
                 border-radius: 100px;
-                margin-right: 8px;
+                background: rgba(255, 255, 255, 0.1);
+                display: flex;
+                align-items: center;
+                overflow: hidden;
+                margin-right: 15px;
 
-            }
+                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 {
+                    font-style: normal;
+                    font-weight: 500;
+                    font-size: 12px;
+                    line-height: 14px;
+                    white-space: nowrap;
+                }
 
-            span:nth-child(3) {
-                color: #A8A8A8;
+                span:nth-child(2) {
+                    color: #1D9BF0;
+                }
+
+                span:nth-child(3) {
+                    color: #A8A8A8;
+                }
             }
         }
+    }
+}
+
+@keyframes rolling {
+    from {
+        transform: translateX(0);
+    }
 
+    to {
+        transform: translateX(-50%);
     }
 }