初始化页面结构

src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/Draw.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="DrawPage">
+        抽奖页面
+    </div>
+</template>  
+    
+<script setup>
+import { debounceTap } from '@/plugins'
+
+// 页面配置初始化
+const emit = defineEmits(["DrawPage"]);
+
+
+</script>
+
+<style lang="scss" scoped>
+.DrawPage {
+    @include fixed();
+    background-color: azure;
+}
+</style>

src/components/Result.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="ResultPage">
+        结果页
+    </div>
+</template>  
+    
+<script setup>
+import { debounceTap } from '@/plugins'
+
+// 页面配置初始化
+const emit = defineEmits(["ResultPage"]);
+
+
+</script>
+
+<style lang="scss" scoped>
+.ResultPage {
+    @include fixed();
+    background-color: azure;
+}
+</style>

src/components/Rule.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="RulePage">
+        规则页面
+    </div>
+</template>  
+    
+<script setup>
+import { debounceTap } from '@/plugins'
+
+// 页面配置初始化
+const emit = defineEmits(["RulePage"]);
+
+
+</script>
+
+<style lang="scss" scoped>
+.RulePage {
+    @include fixed();
+    background-color: azure;
+}
+</style>

src/components/test.vue

@@ -1,64 +0,0 @@
-<template>
-    <div>
-        <h2>随机题目与答案统计</h2>
-        <div v-for="question in shuffledQuestions" :key="question.id">
-            <h3>{{ question.question }}</h3>
-            <ul>
-                <li v-for="answer in question.answers" :key="answer">
-                    {{ answer }} <button @click="recordAnswer(question.id, answer)">提交</button>
-                </li>
-            </ul>
-        </div>
-        <h3>统计结果</h3>
-        <div v-for="stat in stats" :key="stat.id">
-            <h4>{{ stat.question }} 答案统计</h4>
-            <ul>
-                <li v-for="(count, answer) in stat.answers" :key="answer">
-                    {{ answer }}: {{ count }} 次
-                </li>
-            </ul>
-        </div>
-    </div>
-</template>  
-    
-<script>
-import { ref, computed } from 'vue';
-// import data from '../data'; // 引入题目和答案数据  
-let data = [
-
-
-]
-export default {
-    setup() {
-        const questions = ref([
-            { id: 1, question: "问题1", answers: ["答案A", "答案B", "答案C"] },
-            { id: 2, question: "问题2", answers: ["答案A", "答案B", "答案C"] },
-            { id: 3, question: "问题3", answers: ["答案A", "答案B", "答案C"] },
-            { id: 4, question: "问题4", answers: ["答案A", "答案B", "答案C"] },
-            { id: 5, question: "问题5", answers: ["答案A", "答案B", "答案C"] },
-            { id: 6, question: "问题6", answers: ["答案A", "答案B", "答案C"] },
-            { id: 7, question: "问题7", answers: ["答案A", "答案B", "答案C"] },
-            { id: 8, question: "问题8", answers: ["答案A", "答案B", "答案C"] },
-            { id: 9, question: "问题9", answers: ["答案A", "答案B", "答案C"] },
-            { id: 10, question: "问题10", answers: ["答案A", "答案B", "答案C"] },
-            { id: 11, question: "问题11", answers: ["答案A", "答案B", "答案C"] },
-            { id: 12, question: "问题12", answers: ["答案A", "答案B", "答案C"] },
-        ]); // 引用题目和答案数据  
-        const stats = ref([]); // 初始化统计结果数组为空数组  
-        const currentQuestion = ref(0); // 当前显示的题目索引，初始化为0  
-        const shuffledQuestions = computed(() => { // 计算属性，用于获取随机打乱的题目顺序  
-            const allQuestions = [...questions]; // 复制题目数组，防止修改原始数据  
-            allQuestions.sort(() => Math.random() - 0.5); // 随机打乱顺序  
-            return allQuestions;
-        });
-        const recordAnswer = (id, answer) => { // 方法，用于记录用户选择的答案并更新统计结果  
-            const question = shuffledQuestions.value.find(q => q.id === id); // 找到当前题目对象  
-            if (!stats.value[id]) { // 如果当前题目的统计结果为空，则初始化统计结果对象  
-                stats.value[id] = { question, answers: {} };
-            }
-            stats.value[id].answers[answer] = (stats.value[id].answers[answer] || 0) + 1; // 更新答案统计次数  
-        };
-        return { shuffledQuestions, stats, currentQuestion, recordAnswer }; // 将计算属性和方法暴露给模板使用  
-    }
-};
-</script>

src/page/Home/App.vue

@@ -4,12 +4,6 @@
     <Question v-if="showQuestion" @QuestionPage="questionFn"></Question>
     <Loading v-if="showLoad" @LoadPage="loadFn"></Loading>
   </div>
-  <div id="transition" class="transition">
-    <div class="t-i" v-for="i in 8">
-      <div class="i" :class="'i-' + i % 2">LOADING</div>
-      <div class="i" :class="'i-' + i % 2">LOADING</div>
-    </div>
-  </div>
 </template>
 
 <script setup>
@@ -42,8 +36,7 @@ const questionFn = (item) => {
 
 
 onMounted(() => {
-  gsap.to('.i-0', { duration: 5, x: "100%", repeat: -1 })
+
-  gsap.to('.i-1', { duration: 5, x: "-100%", repeat: -1 })
 });
 </script>
 
@@ -59,43 +52,4 @@ onMounted(() => {
   overflow: hidden;
   margin: 0 auto;
 }
-
-#transition {
-  @include fixed();
-  background-color: rgba($color: #000000, $alpha: .7);
-  display: flex;
-  flex-direction: column;
-  pointer-events: none;
-  // transform: rotate(-45deg);
-  // transform: translateX(-25%) translateY(15%) rotate(-45deg);
-
-  .t-i {
-    width: 100%;
-    height: calc(100% / 8);
-    text-align: center;
-    font-size: 120px;
-    display: flex;
-    align-items: center;
-    font-weight: 700;
-
-    .i {
-      width: 750px;
-      margin-left: 5%;
-    }
-  }
-
-  .t-i:nth-child(odd) {
-    background-color: #feed01;
-    color: #07b8ba;
-  }
-
-  .t-i:nth-child(even) {
-    background-color: #07b8ba;
-    color: #feed01;
-
-    .i {
-      transform: translateX(-80%);
-    }
-  }
-}
 </style>

src/plugins/index.js

@@ -1,6 +1,14 @@
 // 常用的方法
 import gsap from 'gsap'
+import { Howl, Howler } from 'howler';
 
+// 初始化
+const btnEnable = ref(true)  //按钮可点击状态
+
+// 音效初始化
+const sound = new Howl({
+    src: [new URL(`@/assets/media/click.mp3`, import.meta.url).href]
+});
 
 //是否在微信环境
 export function isWX() {
@@ -269,13 +277,14 @@ export function addPointByBd(des) {
 }
 
 // 防抖函数
-const btnEnable = ref(true)
 export function debounceTap(target, callbacks, timeScale = 1) {
     if (!btnEnable.value) return false
     btnEnable.value = false;
     let createAni = () => {
         let timeline = new gsap.timeline({
-            onStart: () => { },
+            onStart: () => {
+                sound.play()
+            },
             onComplete: () => {
                 callbacks && callbacks();
                 btnEnable.value = true;

vite.config.js

@@ -122,9 +122,9 @@ export default defineConfig(({ command, mode }) => {
       chunkSizeWarningLimit: 1500,
       terserOptions: {
         compress: {
-          //生产环境时移除console.log()
+          //生产环境时移除打印日志
-          drop_console: false,
+          drop_console: mode == 'production' ? true : false,
-          drop_debugger: true,
+          drop_debugger: mode == 'production' ? true : false,
         },
       },