更新

src/components/Result.vue

@@ -1,83 +1,95 @@
 <script setup>
-import { gsap } from 'gsap'
-import { debounceTap } from '@/plugins'
-import { useMainStore } from '@/store'
-import { mbtiList } from '@/data'
-
+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 userStore = useMainStore();
+let bgId = ref(1);
 const bgPic = computed(() => {
-    return new URL(`../assets/images/result/bg-${bgId.value}.jpg`, import.meta.url).href
-})
+  return new URL(
+    `../assets/images/result/bg-${bgId.value}.jpg`,
+    import.meta.url
+  ).href;
+});
 
-const mbti = ref(mbtiList.find((item) => item.type == 'INFJ') || '没结果')
+const mbti = ref(userStore.MBTI);
 
-console.log('mbti', mbti.value);
+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);
-    })
-}
+  let e = event.target;
+  if (number == bgId.value) return;
+  bgId.value = number;
+  debounceTap(
+    e,
+    () => {
+      console.log("bgId", bgId.value);
+    },
+    0.3
+  );
+};
 </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 class="ResultPage">
+    <div class="result-bg">
+      <img :src="bgPic" alt="" srcset="" />
     </div>
+    <div class="result-container">
+      结果页:{{ mbti || "没结果" }}
+      <div class="bg-tab">
+        <div
+          :class="{ active: bgId == item }"
+          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;
+  @include fixed();
+  background-color: azure;
 
-    .result-bg {
-        @include pos(750px, 100%, 0px, 50%);
-        transform: translateY(-50%);
-        pointer-events: none;
+  .result-bg {
+    @include pos(750px, 100%, 0px, 50%);
+    transform: translateY(-50%);
+    pointer-events: none;
 
-        img {
-            @include box(100%, 100%);
-        }
+    img {
+      @include box(100%, 100%);
     }
+  }
 
-    .result-container {
-        @include pos(750px, 100%, 0px, 50%);
-        transform: translateY(-50%);
+  .result-container {
+    @include pos(750px, 100%, 0px, 50%);
+    transform: translateY(-50%);
 
-        .bg-tab {
-            width: 90%;
-            display: flex;
-            flex-direction: row;
-            justify-content: space-around;
+    .bg-tab {
+      width: 90%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
 
-            .li {
-                @include box(80px, 80px);
-                background-color: aquamarine;
-                @include flexCen();
-            }
-        }
+      .li {
+        @include box(80px, 80px);
+        background-color: aquamarine;
+        @include flexCen();
+      }
+
+      .active {
+        background: #bc0000;
+      }
     }
-
-
-
-
-
+  }
 }
 </style>