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 @@
-
@@ -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) }}分钟
+
+ 距{{ marketName }}实时数据
+ 还剩{{ numberToChinese(usDisplayTime) }}分钟
+
+
+ {{ marketName }}实时数据
+ 助力成功!
+