新增首页页面

src/components/Index.vue

@@ -4,8 +4,8 @@ import { debounceTap } from "@/plugins";
 
 const emit = defineEmits(["IndexPage"]);
 
-const count = ref(0);
-const show = (event) => {
+
+const start = (event) => {
   debounceTap(event.target, () => {
     Toast.success("开发中！");
   });
@@ -16,7 +16,11 @@ const show = (event) => {
   <div class="IndexPage">
     <div class="index-bg"></div>
     <div class="index-container">
-      <Button @click="show">首页</Button>
+      <div class="index-title"></div>
+      <div class="index-rule-btn"></div>
+      <div class="index-prize-btn"></div>
+      <div class="index-start-btn" @click="start"></div>
+      <div class="index-agreement"></div>
     </div>
   </div>
 </template>
@@ -24,14 +28,43 @@ const show = (event) => {
 <style lang="scss" scoped>
 .IndexPage {
   @include pos(100%, 100vh, 0px, 0px);
-  background-color: rgb(0, 7, 198);
+  overflow: hidden;
+
   .index-bg {
     @include pos(750px, 1624px, 0px, 50%);
     transform: translateY(-50%);
+    @include bg_pos("index/bg.jpg");
   }
+
   .index-container {
     @include pos(750px, 1624px, 0px, 50%);
     transform: translateY(-50%);
+
+    .index-title {
+      @include pos(552px, 131px, 101px, 331px);
+      @include bg_pos("index/title.png");
+
+    }
+
+    .index-rule-btn {
+      @include pos(101px, 51px, 0px, 474px);
+      @include bg_pos("index/rule-btn.png");
+    }
+
+    .index-prize-btn {
+      @include pos(101px, 51px, 0px, 536px);
+      @include bg_pos("index/prize-btn.png");
+    }
+
+    .index-start-btn {
+      @include pos(278px, 79px, 226px, 1117px);
+      @include bg_pos("index/start-btn.png");
+    }
+
+    .index-agreement {
+      @include pos(736px, 172px, 7px, 1219px);
+      @include bg_pos("index/agreement.png");
+    }
   }
 }
 </style>

src/components/Question.vue

@@ -1,24 +1,3 @@
-<template>
-    <div class="QuestionPage">
-        <div class="question-bg"></div>
-        <div class="question-container">
-            <div class="question-content">
-                <div class="question">{{ currentId + 1 }}.{{ questionList[currentId].question }}</div>
-                <div class="answer-box">
-                    <div class="answer" :class="activeId == item.aid ? 'active' : ''"
-                        v-for="item in   questionList[currentId].answer  " @click="answerFn(item, $event)">{{ item.aid }}.{{
-                            item.text }}
-                    </div>
-                </div>
-                <!-- 查看结果 -->
-                <Button v-if="showResultBtn" @click="showResult">查看结果</Button>
-                <!-- 下一页 -->
-                <Button v-show="currentId != 0" @click="prevePage">上一页</Button>
-            </div>
-        </div>
-    </div>
-</template>
-
 <script setup name="Question">
 import { Button, Toast } from 'vant'
 import gsap from 'gsap'
@@ -97,10 +76,29 @@ const prevePage = (event) => {
     })
 }
 
-
-
 </script>
 
+<template>
+    <div class="QuestionPage">
+        <div class="question-bg"></div>
+        <div class="question-container">
+            <div class="question-content">
+                <div class="question">{{ currentId + 1 }}.{{ questionList[currentId].question }}</div>
+                <div class="answer-box">
+                    <div class="answer" :class="activeId == item.aid ? 'active' : ''"
+                        v-for="item in   questionList[currentId].answer  " @click="answerFn(item, $event)">{{ item.aid }}.{{
+                            item.text }}
+                    </div>
+                </div>
+                <!-- 查看结果 -->
+                <Button v-if="showResultBtn" @click="showResult">查看结果</Button>
+                <!-- 下一页 -->
+                <Button v-show="currentId != 0" @click="prevePage">上一页</Button>
+            </div>
+        </div>
+    </div>
+</template>
+
 <style lang='scss' scope>
 .QuestionPage {
     @include pos(100%, 100%, 0px, 0px);
@@ -110,6 +108,8 @@ const prevePage = (event) => {
     .question-bg {
         @include pos(750px, 100%, 0px, 50%);
         transform: translateY(-50%);
+        @include bg_pos("qa/bg.jpg");
+
     }
 
     .question-container {
@@ -118,29 +118,30 @@ const prevePage = (event) => {
         @include flexCen();
 
         .question-content {
-            width: 80%;
-        }
+            @include box(100%, 100%);
+            @include flexCen();
 
-        .answer-box {
-            display: flex;
-            flex-direction: column;
-            margin-top: 30px;
-            // width: 80%;
-
-            .answer {
-                padding: 10px;
-                border-radius: 50px;
-                background-color: #fff;
-                color: rgb(68, 208, 112);
-                margin-bottom: 20px;
-                width: 100%;
+            .question {
+                @include box(713px, 428px);
+                @include bg_pos("qa/question.png");
             }
 
-            .active {
-                background-color: #ff2020;
-                color: rgb(255, 255, 255);
+            .answer-box {
+                display: flex;
+                flex-direction: column;
+                margin-top: 30px;
+                // width: 80%;
+
+                .answer {}
+
+                .active {
+                    background-color: #ff2020;
+                    color: rgb(255, 255, 255);
+                }
             }
         }
+
+
     }
 }
 </style>

src/page/Home/App.vue

@@ -11,7 +11,7 @@ import gsap from "gsap";
 import Loading from "@/components/Loading";
 import Index from "@/components/Index";
 import Question from "@/components/Question";
-import { bgm } from "@/plugins";
+import { createBGM } from "@/plugins";
 
 const showLoad = ref(false);
 const loadFn = (item) => {
@@ -36,7 +36,7 @@ const questionFn = (item) => {
 };
 
 onMounted(() => {
-  bgm();
+  // createBGM();
 });
 </script>
 
@@ -48,13 +48,21 @@ onMounted(() => {
 
 #musicBtn {
   @include pos(60px, 60px, 80px, 40px);
-  @include bg_pos("music-icon.png");
   z-index: 99;
 }
 
+// 音乐-on样式
+.music-on {
+  @include bg_pos("music-on.png");
+}
+
+// 音乐-off样式
+.music-off {
+  @include bg_pos("music-off.png");
+}
+
 .home {
   @include box(750px, 100vh);
-  // position: relative;
   overflow: hidden;
   margin: 0 auto;
 }

src/plugins/index.js

@@ -13,7 +13,7 @@ const sound = new Howl({
 });
 
 // 背景音乐
-export function bgm(autoPlay) {
+export function createBGM() {
     const musicNode = createVNode(
         'div',
         {
@@ -21,18 +21,23 @@ export function bgm(autoPlay) {
             id: 'musicBtn',
             onClick: () => {
                 let auduoEle = document.querySelector("#audio")
+                let musicBox = document.querySelector("#musicBtn")
                 if (auduoEle.paused) {
                     auduoEle.play()
                     audioAni.play()
+                    musicBox.classList.add('music-on')
+                    musicBox.classList.remove('music-off')
                 } else {
+                    gsap.set('#musicBtn', { rotation: '0deg' })
                     auduoEle.pause()
                     audioAni.pause()
+                    musicBox.classList.add('music-off')
+                    musicBox.classList.remove('music-on')
                 }
             },
 
         },
     )
-
     const audioNode = createVNode(
         'audio',
         {
@@ -41,12 +46,12 @@ export function bgm(autoPlay) {
             src: new URL(`@/assets/media/bgm.mp3`, import.meta.url).href,
             autoPlay: true,
             loop: true,
-
         },
     )
 
     render(musicNode, document.body);
     render(audioNode, document.querySelector("#musicBtn"));
+    document.querySelector("#musicBtn").classList.add('music-on')
     let audioAni = gsap.timeline({ paused: true })
     audioAni.to('#musicBtn', { duration: 10, rotation: "+=360", repeat: -1, ease: 'none' })
     setTimeout(() => {