|
|
|
@ -120,7 +120,12 @@ |
|
|
|
<div class="btn">{{ cjText }}</div> |
|
|
|
</div> |
|
|
|
<div v-else> |
|
|
|
<div id="lottery" ref="lotteryRef" @click="lotteryBtn()" class="btn"> |
|
|
|
<div |
|
|
|
id="lottery" |
|
|
|
ref="lotteryRef" |
|
|
|
@click="throttledLotteryBtn()" |
|
|
|
class="btn" |
|
|
|
> |
|
|
|
{{ cjText }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -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); |
|
|
|
}); |
|
|
|
</script> |
|
|
|
@ -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; |
|
|
|
} |
|
|
|
|
|
|
|
|
宋杰
3 weeks ago
