泰国转盘

src/router/index.js

@@ -2,18 +2,18 @@ import { createRouter, createWebHistory } from 'vue-router'
 const routes = [
     {
         path: '/',
-        redirect: '/DZP1'
-    },
-    {
-        path: '/DZP1',
-        name: 'DZP1',
-        component: () => import('../views/DZP1.vue')
+        redirect: '/DZP3'
     },
     {
         path: '/DZP2',
         name: 'DZP2',
         component: () => import('../views/DZP2.vue')
     },
+    {
+        path: '/DZP3',
+        name: 'DZP3',
+        component: () => import('../views/DZP3.vue')
+    },
 ]
 // 创建路由实例
 const router = createRouter({

src/views/DZP1.vue → src/views/DZP3.vue

@@ -15,14 +15,14 @@ const isSpinning = ref(false)
 const wheelConfig = ref({
 })
 const prizes = ref([
-    { fonts: [{ text: '-199', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },  //0
-    { fonts: [{ text: '-55', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },   //1
-    { fonts: [{ text: '+200', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },   //2
-    { fonts: [{ text: '-88', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },    //3
-    { fonts: [{ text: '-11', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },    //4
-    { fonts: [{ text: '-299', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },   //5
-    { fonts: [{ text: '+200', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },   //6
-    { fonts: [{ text: '-66', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },    //7
+    { fonts: [{ text: '+200', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },  //0
+    { fonts: [{ text: '+99', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },   //1
+    { fonts: [{ text: '-300', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },   //2
+    { fonts: [{ text: '-200', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },    //3
+    { fonts: [{ text: '-100', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },    //4
+    { fonts: [{ text: '+300', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },   //5
+    { fonts: [{ text: '+55', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },   //6
+    { fonts: [{ text: '-400', top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },    //7
 ])
 const blocks = ref([{ padding: '13px', background: '	#FF2A00' }])
 const buttons = ref([{
@@ -39,12 +39,12 @@ const buttons = ref([{
 }])
 
 //自定义数组
-const customOrder = ref([0, 4, 3, 1, 2, 4, 5, 7, 3, 4, 0])
+const customOrder = ref([1, 2, 4, 0, 3, 6, 4, 5, 4, 0, 7,1,0])
 let orderIndex = 0;
 
 function startCallback() {
  // 检查转动条件和次数
- if (spinCount.value >= 11) { // 从0开始计数，11表示第12次
+ if (spinCount.value >= 13) { // 从0开始计数，11表示第12次
         alert('已达最大转动次数！')
         return
     }
@@ -115,9 +115,6 @@ onMounted(() => {
 <template>
     <div class="full-background">
         <!-- <img :src="jiantou" alt="111"> -->
-        <div class="art-text" :class="{ 'score-change': scoreAnimation }">
-            {{ totalScore }}金币
-        </div>
         <div class="luckyWheel">
             <LuckyWheel class="lucky" ref="myLucky" width="434px" height="434px" :default-config="wheelConfig"
                 :prizes="prizes" :blocks="blocks" :buttons="buttons" @start="startCallback" @end="endCallback" />
@@ -172,21 +169,21 @@ onMounted(() => {
 
 
     position: fixed;
-    left: 50%;
-    top: 45%;
+    left: 50.5%;
+    top: 60%;
     transform: translate(-50%, -50%);
 
     z-index: 1000;
 
     /* 背景图配置 */
     background:
-        url('/public/tanchuang.png') center/contain no-repeat;
+        url('/public/tanchuang1.png') center/contain no-repeat;
     padding: 120px 80px;
     /* 根据图片留出边距 */
 
     /* 尺寸控制 */
-    width: 800px;
-    height: 1000px;
+    width: 500px;
+    height: 550px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -267,17 +264,17 @@ onMounted(() => {
 .luckyWheel {
     position: fixed;
     z-index: 999;
-    left: 1140px;
-    top: 443px;
+    left: 740px;
+    top: 390px;
     pointer-events: auto;
 }
 
 /* 转盘底的样式 */
 .wheel-base {
-    background-image: url('/public/wheel-base.png');
+    background-image: url('/public/wheel-base1.png');
     position: fixed;
-    left: 1065px;
-    top: 350px;
+    left: 665px;
+    top: 300px;
     width: 568px;
     height: 600px;
     z-index: 990;