Merge branch 'master' of http://39.101.133.168:8807/hongxilin/DZP into master

src/router/index.js

@@ -9,6 +9,11 @@ const routes = [
         name: 'DZP1',
         component: () => import('../views/DZP1.vue')
     },
+    {
+        path: '/DZP2',
+        name: 'DZP2',
+        component: () => import('../views/DZP2.vue')
+    },
 ]
 // 创建路由实例
 const router = createRouter({

src/views/DZP2.vue

@@ -0,0 +1,216 @@
+<script setup>
+
+import { ref, onBeforeMount,onMounted } from 'vue'
+import j from '../assets/img/j.png'
+
+const showPopup = ref(false);
+const popupMessage = ref('');
+const totalScore = ref(4000) // 初始分数
+const myLucky = ref()
+// 新增变量记录基础分数
+//const baseScore = 4000
+const wheelConfig = ref({
+})
+
+const prizes = ref([
+    { fonts: [{ text: '2' ,top:'10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },  //2
+    { fonts: [{ text: '4' ,top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },   //4
+    { fonts: [{ text: '6' ,top:'10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },  //6
+    { fonts: [{ text: '9' ,top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },    //9
+    { fonts: [{ text: '10' ,top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#FAF9F0' },    //10
+    { fonts: [{ text: '15' ,top: '10%', fontColor: '#FF2C29', fontSize: '40px' }], background: '#F5D7AD' },   //15
+])
+const blocks = ref([{ padding: '13px', background: '	#FF2A00' }])
+const buttons = ref([{
+    radius: '35%',
+    imgs: [{
+        src: 'src/assets/img/j.png',
+        width: '100%',
+        top: '-130%'
+    }],
+    //background: '#8a9bf3',
+
+    pointer: true,
+
+}])
+
+
+//修改一点
+function startCallback() {
+    // 调用抽奖组件的play方法开始游戏
+    myLucky.value.play()
+    // 模拟调用接口异步抽奖
+    setTimeout(() => {
+        // 假设后端返回的中奖索引是0
+        const index = 3
+        // 调用stop停止旋转并传递中奖索引
+        myLucky.value.stop(index)
+    }, 3000)
+}
+const scoreAnimation = ref(false)
+
+
+// 抽奖结束end回调
+function endCallback(prize) {
+    console.log(prize)
+}
+</script>
+
+<template>
+    <div class="full-background">
+       
+        <div class="luckyWheel">
+            <LuckyWheel class="lucky" ref="myLucky" width="354px" height="354px" :default-config="wheelConfig"
+                :prizes="prizes" :blocks="blocks" :buttons="buttons" @start="startCallback" @end="endCallback" />
+
+        </div>
+        <div class="wheel-base2" >
+        </div>
+
+    </div>
+</template>
+
+<style scoped>
+
+
+.score-popup {
+    /* 基础样式同上 */
+    position: fixed;
+    left: 50%;
+    top: 45%;
+    transform: translate(-50%, -50%);
+
+    z-index: 1000;
+
+    /* 背景图配置 */
+    background:
+        url('tanchaung.png') center/contain no-repeat;
+    padding: 240px 160px;
+    /* 根据图片留出边距 */
+
+    /* 尺寸控制 */
+    width: 800px;
+    height: 1000px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.score-popup::before {
+    background: rgba(255, 215, 0, 0.1);
+}
+
+.ziti {
+    /* 文字样式 */
+    font-family: '华康金文体', 'Arial Black', sans-serif;
+    font-size: 100px;
+    /* 根据图片调整字号 */
+    color: #0e0d0d;
+    /* 金色文字 */
+    line-height: 250px;
+    /* 垂直居中文字 */
+    text-shadow: 2px 2px 0 #B8860B;
+    /* 略微加粗文字 */
+    margin-bottom: 260px;
+}
+
+/* 添加艺术字样式 */
+.art-text {
+    position: fixed;
+    left: 450px;
+    bottom: 200px;
+    transform: translateX(-50%);
+    font-family: 'Arial Black', sans-serif;
+    font-size: 150px;
+    color: #FFD700;
+    /* 金色 */
+    text-shadow:
+        3px 3px 0 #FF0000,
+        /* 红色描边 */
+        -1px -1px 0 #000,
+        1px -1px 0 #000,
+        -1px 1px 0 #000,
+        1px 1px 0 #000;
+    transition: transform 0.3s ease;
+    z-index: 1000;
+}
+
+/* 添加分数变化动画 */
+.score-change {
+    transform: translateX(-50%) scale(1.2);
+    color: hwb(69 0% 0%);
+    /* 变化时的橙色 */
+}
+
+.full-background {
+    background-image: url('bg2.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 0;
+}
+
+.custom-text {
+    position: fixed;
+    left: 300px;
+    bottom: 200px;
+    color: black;
+    font-size: 150px;
+    z-index: 999;
+}
+
+.luckyWheel {
+    position: fixed;
+    z-index: 2000;
+    left: 826px;
+    top: 487px;
+    pointer-events: auto;
+}
+
+/* 转盘底的样式 */
+.wheel-base2 {
+    background-image: url('wheel-base2.png');
+    position: fixed;
+    left: 750px;
+    top: 395px;
+    width: 520px;
+    height: 600px;
+    z-index: 1190;
+
+}
+.pan {
+    background-image: url('pan.png');
+    position: fixed;
+    left: 822px;
+    top: 460px;
+    width: 360px;
+    height: 360px;
+    z-index: 1190;
+
+}
+
+
+
+.luckyWheel .lucky {
+    aspect-ratio: 1/1;
+    color: aqua;
+}
+
+h1 {
+    position: relative;
+    z-index: 1;
+    text-align: center;
+    /* 居中标题 */
+    width: 100%;
+    top: 50px;
+    /* 让标题占据整个宽度 */
+    font-size: 100px;
+    /* 文字大小 */
+
+}
+</style>