diff --git a/README.md b/README.md index 784c4f5..4599864 100644 --- a/README.md +++ b/README.md @@ -9,4 +9,5 @@ npm install vue-router npm install axios npm install element-plus --save npm install pinia -npm install three \ No newline at end of file +npm install three +c 安装 lodash 组件,解决数据处理问题 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 8ffd2f7..6ff8660 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "axios": "^1.10.0", "dayjs": "^1.11.13", "element-plus": "^2.10.3", + "lodash": "^4.17.21", "pinia": "^3.0.3", "pinia-plugin-persistedstate": "^4.4.1", "three": "^0.178.0", @@ -1987,8 +1988,9 @@ }, "node_modules/lodash": { "version": "4.17.21", - "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + "resolved": "https://mirrors.huaweicloud.com/repository/npm/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "license": "MIT" }, "node_modules/lodash-es": { "version": "4.17.21", @@ -4055,7 +4057,7 @@ }, "lodash": { "version": "4.17.21", - "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz", + "resolved": "https://mirrors.huaweicloud.com/repository/npm/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "lodash-es": { diff --git a/package.json b/package.json index 6c45d82..55d8a65 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "axios": "^1.10.0", "dayjs": "^1.11.13", "element-plus": "^2.10.3", + "lodash": "^4.17.21", "pinia": "^3.0.3", "pinia-plugin-persistedstate": "^4.4.1", "three": "^0.178.0", diff --git a/src/assets/img/zhongchou/助力已达标.png b/src/assets/img/zhongchou/助力已达标.png new file mode 100644 index 0000000..e45907d Binary files /dev/null and b/src/assets/img/zhongchou/助力已达标.png differ diff --git a/src/views/choujiang/hxl-cj/cj.vue b/src/views/choujiang/hxl-cj/cj.vue index aea345e..35e73f0 100644 --- a/src/views/choujiang/hxl-cj/cj.vue +++ b/src/views/choujiang/hxl-cj/cj.vue @@ -120,7 +120,12 @@
{{ cjText }}
-
+
{{ cjText }}
@@ -142,6 +147,7 @@ import { TrackballControls } from "../../../utils/TrackballControls.js"; import TWEEN from "@tweenjs/tween.js"; import worldcup from "../../../assets/worldcup.mp3"; import dong from "../../../assets/dong.mp3"; +import _ from "lodash"; import { getPrizeListApi, @@ -507,6 +513,11 @@ const initAll = async () => { }; const initCards = () => { + const screenWidth = window.innerWidth; + const isLaptop = screenWidth < 1600; // 判断 + const baseSpacingX = isLaptop ? 120 : 140; + const baseSpacingY = isLaptop ? 150 : 180; + let member = users.value.slice(), showCards = [], length = member.length; @@ -514,9 +525,14 @@ const initCards = () => { let isBold = false; let index = 0; let totalMember = member.length; + // let position = { + // x: (140 * COLUMN_COUNT - 20) / 2, + // y: (180 * ROW_COUNT - 20) / 2, + // }; + let position = { - x: (140 * COLUMN_COUNT - 20) / 2, - y: (180 * ROW_COUNT - 20) / 2, + x: (baseSpacingX * COLUMN_COUNT - 20) / 2, + y: (baseSpacingY * ROW_COUNT - 20) / 2, }; camera = new THREE.PerspectiveCamera( @@ -542,9 +558,17 @@ const initCards = () => { threeDCards.push(object); // + // 在initCards函数开始处添加 + + const cardSpacingX = isLaptop ? 130 : 155; + const cardSpacingY = isLaptop ? 160 : 195; + var object = new THREE.Object3D(); - object.position.x = j * 155 - position.x; - object.position.y = -(i * 195) + position.y; + // object.position.x = j * 155 - position.x; + // object.position.y = -(i * 195) + position.y; + // 使用动态间距 + object.position.x = j * cardSpacingX - position.x; + object.position.y = -(i * cardSpacingY) + position.y; targets.table.push(object); index++; } @@ -587,9 +611,10 @@ const initCards = () => { // 判断是否进入抽奖 let joinLottery = false; // 进入抽奖 -const enterLottery = () => { +const enterLottery = async () => { joinLottery = true; removeHighlight(); + await nextTick(); // rotate = !rotate; rotate = true; switchScreen("lottery"); @@ -653,11 +678,14 @@ const createCard = (user, isBold, id) => { return element; }; -function removeHighlight() { +const removeHighlight = async () => { document.querySelectorAll(".highlight").forEach((node) => { - node.classList.remove("highlight"); + console.log(node.id); + node.className = ""; + node.classList.add("element"); + node.style.backgroundColor = "rgb(255,170,22)"; }); -} +}; function addHighlight() { document.querySelectorAll(".lightitem").forEach((node) => { @@ -1078,7 +1106,7 @@ const lotteryBtn = () => { // console.log("isLotting", isLotting); // console.log("currentPrize.value", currentPrize.value); if (isLotting) { - stopLottery(); + throttledStopLottery(); return; } @@ -1132,9 +1160,10 @@ const lotteryBtn = () => { const text = "正在抽取[" + currentPrize.value.prizeName + "],调整好姿势"; // addQipao(text); }; -/** - * 抽奖 - */ + +const throttledLotteryBtn = _.throttle(lotteryBtn, 1000, { + trailing: false, +}); const lottery = () => { rotateBall().then(() => { @@ -1174,6 +1203,10 @@ const stopLottery = () => { playDongAudio(); }; +const throttledStopLottery = _.throttle(stopLottery, 1000, { + trailing: false, +}); + const changePrize = async () => { let type = currentPrize.value.type; @@ -1216,13 +1249,15 @@ function changeSelectedCard(cardIndex, user) { /** * 切换名牌背景 */ -function changeBackground(cardIndex, color) { +const changeBackground = async (cardIndex) => { let card = threeDCards[cardIndex].element; // card.style.backgroundColor = // color || "rgba(255,170,22," + (Math.random() * 0.7 + 0.25) + ")"; - card.style.backgroundColor = color || "rgba(255,170,22,1)"; - card.style.border = "2px solid rgba(255, 255, 255, 1)"; -} + card.style.backgroundColor = "rgb(255,170,22) !important"; + card.style.border = "2px solid rgb(255, 255, 255)"; + + // await nextTick(); +}; /** * 随机切换背景和人员信息 @@ -1246,7 +1281,7 @@ function shineCard() { continue; } - changeBackground(cardIndex); + // changeBackground(cardIndex); changeCard(cardIndex, users.value[index]); } }, 500); @@ -1279,7 +1314,6 @@ function onWindowResize() { onMounted(async () => { initAll(); - window.addEventListener("resize", onWindowResize, false); }); @@ -1389,8 +1423,8 @@ a { } .element { - width: 15vh; - height: 19vh; + width: 7.5vw; + height: 18.5vh; /* box-shadow: 0 0 12px rgba(0, 255, 255, 0.5); */ border: 1px solid rgba(127, 255, 255, 0.25); text-align: center; @@ -1423,11 +1457,11 @@ button { height: 70px; color: #fff; border: 0; - font-size: 2.5vh; + font-size: 20px; font-weight: bold; cursor: pointer; text-align: center; - padding-top: 5px; + padding-top: 12px; } .highlight { @@ -1521,7 +1555,7 @@ button { justify-content: center; flex-wrap: nowrap; /* color: rgba(127, 255, 255, 0.75); */ - width: 30vh; + width: 29vh; height: 9.5vh; box-sizing: border-box; transition: transform 1s ease-in; @@ -2005,7 +2039,7 @@ button { } .shine.prize-item { - /* width: 24vh; */ + /* width: 29.5vh; */ margin: 1.2vh 0; } diff --git a/src/views/choujiang/index.vue b/src/views/choujiang/index.vue index bad391e..f0d53d7 100644 --- a/src/views/choujiang/index.vue +++ b/src/views/choujiang/index.vue @@ -333,9 +333,10 @@ async function handleLotteryClick() { break; case "rotating": + setTimeout(() => { isDisabled.value = false; - }, 2000); + }, 2700); // toggleMusic(); @@ -344,13 +345,12 @@ async function handleLotteryClick() { await lottery3DRef.value?.rotateBallStop?.(); toggleMusic(); playMusic1(); - + lotteryState.value = "result"; await lotteryEngine.executeLottery(); await nextTick(); showLotteryQipao(); console.log("lotteryState 变更前:", lotteryState.value, "-> idle"); - lotteryState.value = "result"; console.log("lotteryState 变更后:", lotteryState.value); @@ -413,8 +413,8 @@ function handleNextPrize() { left: 0; overflow: hidden; /* 添加背景图片 */ - background: url("../../assets/bg@2x.png"); - background-size: 1920px 980px; + background: url("../../assets/bg@2x.png") ; + background-size: 100% 100%; } /* 透明弹窗样式 */ diff --git a/src/views/choujiang/lottery/Lottery3D.vue b/src/views/choujiang/lottery/Lottery3D.vue index 464d930..bfbe84a 100644 --- a/src/views/choujiang/lottery/Lottery3D.vue +++ b/src/views/choujiang/lottery/Lottery3D.vue @@ -756,7 +756,7 @@ onMounted(async () => { const length = member.length; const showTable = true; const position = { - x: (100 * config.COLUMN_COUNT - 20) / 2, + x: (115 * config.COLUMN_COUNT - 20) / 2, y: (120 * config.ROW_COUNT - 20) / 2, }; createCards(member, length, showTable, position, config); // 3. 传递高亮配置 diff --git a/src/views/choujiang/lottery/PrizePanel.vue b/src/views/choujiang/lottery/PrizePanel.vue index 2cfa917..cac316c 100644 --- a/src/views/choujiang/lottery/PrizePanel.vue +++ b/src/views/choujiang/lottery/PrizePanel.vue @@ -147,7 +147,7 @@ > {{ user.jwcode }} - {{ user.prizeName }} + {{ user.gradeName }} diff --git a/src/views/zhongchou/index.vue b/src/views/zhongchou/index.vue index 4de3aa5..66c0274 100644 --- a/src/views/zhongchou/index.vue +++ b/src/views/zhongchou/index.vue @@ -41,14 +41,21 @@
-

距{{ marketName }}实时数据

-

还剩{{ numberToChinese(usDisplayTime) }}分钟

+ +
-
底座 @@ -132,7 +139,7 @@