完成抽奖页面，结果页面事件逻辑，待给到设计稿更新页面

src/components/Result.vue

@@ -1,21 +1,83 @@
-<template>
-    <div class="ResultPage">
-        结果页
-    </div>
-</template>  
-    
 <script setup>
+import { gsap } from 'gsap'
 import { debounceTap } from '@/plugins'
+import { useMainStore } from '@/store'
+import { mbtiList } from '@/data'
+
 
 // 页面配置初始化
 const emit = defineEmits(["ResultPage"]);
+const userStore = useMainStore()
+let bgId = ref(1)
+const bgPic = computed(() => {
+    return new URL(`../assets/images/result/bg-${bgId.value}.jpg`, import.meta.url).href
+})
 
+const mbti = ref(mbtiList.find((item) => item.type == 'INFJ') || '没结果')
 
+console.log('mbti', mbti.value);
+
+const changBg = (event, number) => {
+    let e = event.target
+    if (number == bgId.value) return
+    debounceTap(e, () => {
+        bgId.value = number
+        console.log('bgId', bgId.value);
+    })
+}
 </script>
 
+<template>
+    <div class="ResultPage">
+        <div class="result-bg">
+            <img :src="bgPic" alt="" srcset="">
+        </div>
+        <div class="result-container">
+            结果页:{{ mbti.type || '没结果' }}
+            <div class="bg-tab">
+                <div v-for="item in 4" class="li" @click="changBg($event, item)">{{ item }}</div>
+            </div>
+        </div>
+    </div>
+</template>  
+
+
 <style lang="scss" scoped>
 .ResultPage {
     @include fixed();
     background-color: azure;
+
+    .result-bg {
+        @include pos(750px, 100%, 0px, 50%);
+        transform: translateY(-50%);
+        pointer-events: none;
+
+        img {
+            @include box(100%, 100%);
+        }
+    }
+
+    .result-container {
+        @include pos(750px, 100%, 0px, 50%);
+        transform: translateY(-50%);
+
+        .bg-tab {
+            width: 90%;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+
+            .li {
+                @include box(80px, 80px);
+                background-color: aquamarine;
+                @include flexCen();
+            }
+        }
+    }
+
+
+
+
+
 }
 </style>