|
|
@ -93,9 +93,13 @@ |
|
|
</div> |
|
|
</div> |
|
|
</el-scrollbar> |
|
|
</el-scrollbar> |
|
|
<div class="tableFoot"> |
|
|
<div class="tableFoot"> |
|
|
<span @click="leftPage()" id="leftPage" class="leftPage"><</span> |
|
|
|
|
|
|
|
|
<span @click="throttledleftPage()" id="leftPage" class="leftPage" |
|
|
|
|
|
><</span |
|
|
|
|
|
> |
|
|
{{ currentPage }}/<span>{{ totalPage }}</span> |
|
|
{{ currentPage }}/<span>{{ totalPage }}</span> |
|
|
<span @click="rightPage()" id="rightPage" class="rightPage">></span> |
|
|
|
|
|
|
|
|
<span @click="throttledrightPage()" id="rightPage" class="rightPage" |
|
|
|
|
|
>></span |
|
|
|
|
|
> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
@ -120,7 +124,12 @@ |
|
|
<div class="btn">{{ cjText }}</div> |
|
|
<div class="btn">{{ cjText }}</div> |
|
|
</div> |
|
|
</div> |
|
|
<div v-else> |
|
|
<div v-else> |
|
|
<div id="lottery" ref="lotteryRef" @click="lotteryBtn()" class="btn"> |
|
|
|
|
|
|
|
|
<div |
|
|
|
|
|
id="lottery" |
|
|
|
|
|
ref="lotteryRef" |
|
|
|
|
|
@click="throttledLotteryBtn()" |
|
|
|
|
|
class="btn" |
|
|
|
|
|
> |
|
|
{{ cjText }} |
|
|
{{ cjText }} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
@ -142,6 +151,7 @@ import { TrackballControls } from "../../../utils/TrackballControls.js"; |
|
|
import TWEEN from "@tweenjs/tween.js"; |
|
|
import TWEEN from "@tweenjs/tween.js"; |
|
|
import worldcup from "../../../assets/worldcup.mp3"; |
|
|
import worldcup from "../../../assets/worldcup.mp3"; |
|
|
import dong from "../../../assets/dong.mp3"; |
|
|
import dong from "../../../assets/dong.mp3"; |
|
|
|
|
|
import _ from "lodash"; |
|
|
|
|
|
|
|
|
import { |
|
|
import { |
|
|
getPrizeListApi, |
|
|
getPrizeListApi, |
|
|
@ -276,14 +286,19 @@ const totalPage = ref(10); |
|
|
|
|
|
|
|
|
const openGetPrize = async () => { |
|
|
const openGetPrize = async () => { |
|
|
if (!prizes.value[prizes.value.length - 1].isLook) { |
|
|
if (!prizes.value[prizes.value.length - 1].isLook) { |
|
|
addQipao("请先揭晓奖品。"); |
|
|
|
|
|
|
|
|
addQipao("请先揭晓奖品"); |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
pageObj.value = { |
|
|
|
|
|
pageNum: 1, |
|
|
|
|
|
pageSize: 14, |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
let res = await getGetPrizeUserListApi(pageObj.value); |
|
|
let res = await getGetPrizeUserListApi(pageObj.value); |
|
|
getPrizeUserList.value = res.data.list; |
|
|
getPrizeUserList.value = res.data.list; |
|
|
currentPage.value = res.data.pageNum; |
|
|
currentPage.value = res.data.pageNum; |
|
|
totalPage.value = res.data.pages; |
|
|
|
|
|
|
|
|
totalPage.value = res.data.pages == 0 ? 1 : res.data.pages; |
|
|
isOpen.value = true; |
|
|
isOpen.value = true; |
|
|
// console.log("currentPrize", currentPrize.value); |
|
|
// console.log("currentPrize", currentPrize.value); |
|
|
prizes.value.forEach((item) => { |
|
|
prizes.value.forEach((item) => { |
|
|
@ -295,6 +310,13 @@ const openGetPrize = async () => { |
|
|
}); |
|
|
}); |
|
|
let scroll = document.getElementById("prizeBar"); |
|
|
let scroll = document.getElementById("prizeBar"); |
|
|
// scroll.style.height = "110px"; |
|
|
// scroll.style.height = "110px"; |
|
|
|
|
|
|
|
|
|
|
|
await nextTick(); |
|
|
|
|
|
if (totalPage.value == 1) { |
|
|
|
|
|
const rightPageBtn = document.getElementById("rightPage"); |
|
|
|
|
|
rightPageBtn.style.cursor = "not-allowed"; |
|
|
|
|
|
rightPageBtn.style.background = "#ccc"; |
|
|
|
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const closeGetPrize = () => { |
|
|
const closeGetPrize = () => { |
|
|
@ -314,61 +336,78 @@ const leftPage = async (item) => { |
|
|
if (currentPage.value == 1) { |
|
|
if (currentPage.value == 1) { |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
if (currentPage.value == totalPage.value) { |
|
|
|
|
|
const rightPageBtn = document.getElementById("rightPage"); |
|
|
|
|
|
rightPageBtn.style.cursor = "pointer"; |
|
|
|
|
|
rightPageBtn.style.setProperty( |
|
|
|
|
|
"background", |
|
|
|
|
|
"linear-gradient(90deg, #ff9800 0%, #ff5722 100%)", |
|
|
|
|
|
"important" |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
currentPage.value--; |
|
|
|
|
|
pageObj.value.pageNum = currentPage; |
|
|
|
|
|
let res = await getGetPrizeUserListApi(pageObj.value); |
|
|
|
|
|
getPrizeUserList.value = res.data.list; |
|
|
|
|
|
currentPage.value = res.data.pageNum; |
|
|
|
|
|
|
|
|
|
|
|
if (currentPage.value == 1) { |
|
|
|
|
|
const leftPageBtn = document.getElementById("leftPage"); |
|
|
|
|
|
leftPageBtn.style.cursor = "not-allowed"; |
|
|
|
|
|
leftPageBtn.style.background = "#ccc"; |
|
|
|
|
|
|
|
|
try { |
|
|
|
|
|
if (currentPage.value == totalPage.value) { |
|
|
|
|
|
const rightPageBtn = document.getElementById("rightPage"); |
|
|
|
|
|
rightPageBtn.style.cursor = "pointer"; |
|
|
|
|
|
rightPageBtn.style.setProperty( |
|
|
|
|
|
"background", |
|
|
|
|
|
"linear-gradient(90deg, #ff9800 0%, #ff5722 100%)", |
|
|
|
|
|
"important" |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
currentPage.value--; |
|
|
|
|
|
pageObj.value.pageNum = currentPage; |
|
|
|
|
|
let res = await getGetPrizeUserListApi(pageObj.value); |
|
|
|
|
|
getPrizeUserList.value = res.data.list; |
|
|
|
|
|
currentPage.value = res.data.pageNum; |
|
|
|
|
|
|
|
|
|
|
|
if (currentPage.value == 1) { |
|
|
|
|
|
const leftPageBtn = document.getElementById("leftPage"); |
|
|
|
|
|
leftPageBtn.style.cursor = "not-allowed"; |
|
|
|
|
|
leftPageBtn.style.background = "#ccc"; |
|
|
|
|
|
} |
|
|
|
|
|
} catch (e) { |
|
|
|
|
|
console.log("error", e); |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const throttledleftPage = _.throttle(leftPage, 500, { |
|
|
|
|
|
trailing: false, |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
const rightPage = async (item) => { |
|
|
const rightPage = async (item) => { |
|
|
if (currentPage.value == totalPage.value) { |
|
|
|
|
|
|
|
|
if (currentPage.value >= totalPage.value) { |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (currentPage.value == 1) { |
|
|
|
|
|
const leftPageBtn = document.getElementById("leftPage"); |
|
|
|
|
|
console.log("leftPageBtn", leftPageBtn); |
|
|
|
|
|
leftPageBtn.style.cursor = "pointer"; |
|
|
|
|
|
leftPageBtn.style.setProperty( |
|
|
|
|
|
"background", |
|
|
|
|
|
"linear-gradient(90deg, #ff9800 0%, #ff5722 100%)", |
|
|
|
|
|
"important" |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
try { |
|
|
|
|
|
if (currentPage.value == 1) { |
|
|
|
|
|
const leftPageBtn = document.getElementById("leftPage"); |
|
|
|
|
|
console.log("leftPageBtn", leftPageBtn); |
|
|
|
|
|
leftPageBtn.style.cursor = "pointer"; |
|
|
|
|
|
leftPageBtn.style.setProperty( |
|
|
|
|
|
"background", |
|
|
|
|
|
"linear-gradient(90deg, #ff9800 0%, #ff5722 100%)", |
|
|
|
|
|
"important" |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
currentPage.value++; |
|
|
|
|
|
pageObj.value.pageNum = currentPage; |
|
|
|
|
|
let res = await getGetPrizeUserListApi(pageObj.value); |
|
|
|
|
|
getPrizeUserList.value = res.data.list; |
|
|
|
|
|
currentPage.value = res.data.pageNum; |
|
|
|
|
|
|
|
|
currentPage.value++; |
|
|
|
|
|
pageObj.value.pageNum = currentPage; |
|
|
|
|
|
let res = await getGetPrizeUserListApi(pageObj.value); |
|
|
|
|
|
getPrizeUserList.value = res.data.list; |
|
|
|
|
|
currentPage.value = res.data.pageNum; |
|
|
|
|
|
|
|
|
if (currentPage.value == totalPage.value) { |
|
|
|
|
|
const rightPageBtn = document.getElementById("rightPage"); |
|
|
|
|
|
rightPageBtn.style.cursor = "not-allowed"; |
|
|
|
|
|
rightPageBtn.style.background = "#ccc"; |
|
|
|
|
|
|
|
|
if (currentPage.value == totalPage.value) { |
|
|
|
|
|
const rightPageBtn = document.getElementById("rightPage"); |
|
|
|
|
|
rightPageBtn.style.cursor = "not-allowed"; |
|
|
|
|
|
rightPageBtn.style.background = "#ccc"; |
|
|
|
|
|
} |
|
|
|
|
|
} catch (e) { |
|
|
|
|
|
console.log("error", e); |
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const throttledrightPage = _.throttle(rightPage, 500, { |
|
|
|
|
|
trailing: false, |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
//揭示奖品 |
|
|
//揭示奖品 |
|
|
const lookPrize = async (item) => { |
|
|
const lookPrize = async (item) => { |
|
|
// 未进入抽奖禁止揭晓 |
|
|
// 未进入抽奖禁止揭晓 |
|
|
if (!joinLottery) { |
|
|
if (!joinLottery) { |
|
|
addQipao("请先进入抽奖。"); |
|
|
|
|
|
|
|
|
addQipao("请先进入抽奖"); |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
// 如果已经揭示，那返回 |
|
|
// 如果已经揭示，那返回 |
|
|
@ -507,6 +546,11 @@ const initAll = async () => { |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
const initCards = () => { |
|
|
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(), |
|
|
let member = users.value.slice(), |
|
|
showCards = [], |
|
|
showCards = [], |
|
|
length = member.length; |
|
|
length = member.length; |
|
|
@ -514,18 +558,25 @@ const initCards = () => { |
|
|
let isBold = false; |
|
|
let isBold = false; |
|
|
let index = 0; |
|
|
let index = 0; |
|
|
let totalMember = member.length; |
|
|
let totalMember = member.length; |
|
|
|
|
|
// let position = { |
|
|
|
|
|
// x: (140 * COLUMN_COUNT - 20) / 2, |
|
|
|
|
|
// y: (180 * ROW_COUNT - 20) / 2, |
|
|
|
|
|
// }; |
|
|
|
|
|
|
|
|
let position = { |
|
|
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( |
|
|
camera = new THREE.PerspectiveCamera( |
|
|
40, |
|
|
40, |
|
|
window.innerWidth / window.innerHeight, |
|
|
|
|
|
|
|
|
// window.innerWidth / window.innerHeight, |
|
|
|
|
|
10, |
|
|
1, |
|
|
1, |
|
|
10000 |
|
|
10000 |
|
|
); |
|
|
); |
|
|
camera.position.z = 3000; |
|
|
camera.position.z = 3000; |
|
|
|
|
|
// camera.position.y = 1000; |
|
|
|
|
|
|
|
|
scene = new THREE.Scene(); |
|
|
scene = new THREE.Scene(); |
|
|
|
|
|
|
|
|
@ -542,9 +593,17 @@ const initCards = () => { |
|
|
threeDCards.push(object); |
|
|
threeDCards.push(object); |
|
|
// |
|
|
// |
|
|
|
|
|
|
|
|
|
|
|
// 在initCards函数开始处添加 |
|
|
|
|
|
|
|
|
|
|
|
const cardSpacingX = isLaptop ? 130 : 155; |
|
|
|
|
|
const cardSpacingY = isLaptop ? 160 : 195; |
|
|
|
|
|
|
|
|
var object = new THREE.Object3D(); |
|
|
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); |
|
|
targets.table.push(object); |
|
|
index++; |
|
|
index++; |
|
|
} |
|
|
} |
|
|
@ -565,8 +624,8 @@ const initCards = () => { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
renderer = new CSS3DRenderer(); |
|
|
renderer = new CSS3DRenderer(); |
|
|
renderer.setSize(window.innerWidth * 1, window.innerHeight * 0.9); |
|
|
|
|
|
renderer.domElement.style.margin = "7% 0 0 1%"; |
|
|
|
|
|
|
|
|
renderer.setSize(window.innerWidth * 0.8, window.innerHeight * 0.8); |
|
|
|
|
|
renderer.domElement.style.margin = "12% 0 0 0 "; |
|
|
// document.getElementById("container").appendChild(renderer.domElement); |
|
|
// document.getElementById("container").appendChild(renderer.domElement); |
|
|
|
|
|
|
|
|
if (threeContainer.value) { |
|
|
if (threeContainer.value) { |
|
|
@ -587,9 +646,10 @@ const initCards = () => { |
|
|
// 判断是否进入抽奖 |
|
|
// 判断是否进入抽奖 |
|
|
let joinLottery = false; |
|
|
let joinLottery = false; |
|
|
// 进入抽奖 |
|
|
// 进入抽奖 |
|
|
const enterLottery = () => { |
|
|
|
|
|
|
|
|
const enterLottery = async () => { |
|
|
joinLottery = true; |
|
|
joinLottery = true; |
|
|
removeHighlight(); |
|
|
removeHighlight(); |
|
|
|
|
|
await nextTick(); |
|
|
// rotate = !rotate; |
|
|
// rotate = !rotate; |
|
|
rotate = true; |
|
|
rotate = true; |
|
|
switchScreen("lottery"); |
|
|
switchScreen("lottery"); |
|
|
@ -653,11 +713,13 @@ const createCard = (user, isBold, id) => { |
|
|
return element; |
|
|
return element; |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
function removeHighlight() { |
|
|
|
|
|
|
|
|
const removeHighlight = async () => { |
|
|
document.querySelectorAll(".highlight").forEach((node) => { |
|
|
document.querySelectorAll(".highlight").forEach((node) => { |
|
|
node.classList.remove("highlight"); |
|
|
|
|
|
|
|
|
node.className = ""; |
|
|
|
|
|
node.classList.add("element"); |
|
|
|
|
|
node.style.backgroundColor = "rgb(255,170,22)"; |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
function addHighlight() { |
|
|
function addHighlight() { |
|
|
document.querySelectorAll(".lightitem").forEach((node) => { |
|
|
document.querySelectorAll(".lightitem").forEach((node) => { |
|
|
@ -1078,16 +1140,21 @@ const lotteryBtn = () => { |
|
|
// console.log("isLotting", isLotting); |
|
|
// console.log("isLotting", isLotting); |
|
|
// console.log("currentPrize.value", currentPrize.value); |
|
|
// console.log("currentPrize.value", currentPrize.value); |
|
|
if (isLotting) { |
|
|
if (isLotting) { |
|
|
stopLottery(); |
|
|
|
|
|
|
|
|
throttledStopLottery(); |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (!currentPrize.value.isLook) { |
|
|
if (!currentPrize.value.isLook) { |
|
|
addQipao("请先揭秘礼品。"); |
|
|
|
|
|
|
|
|
addQipao("请先揭秘礼品"); |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
if (currentPrize.value.leftCount <= 0) { |
|
|
if (currentPrize.value.leftCount <= 0) { |
|
|
addQipao("该礼品已抽取完毕，请揭秘下一个礼品。"); |
|
|
|
|
|
|
|
|
if (currentPrize.value.type == 0) { |
|
|
|
|
|
addQipao("所以礼品都已抽取完毕"); |
|
|
|
|
|
} else { |
|
|
|
|
|
addQipao("该礼品已抽取完毕，请揭秘下一个礼品"); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -1132,9 +1199,10 @@ const lotteryBtn = () => { |
|
|
const text = "正在抽取[" + currentPrize.value.prizeName + "],调整好姿势"; |
|
|
const text = "正在抽取[" + currentPrize.value.prizeName + "],调整好姿势"; |
|
|
// addQipao(text); |
|
|
// addQipao(text); |
|
|
}; |
|
|
}; |
|
|
/** |
|
|
|
|
|
* 抽奖 |
|
|
|
|
|
*/ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const throttledLotteryBtn = _.throttle(lotteryBtn, 1000, { |
|
|
|
|
|
trailing: false, |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
const lottery = () => { |
|
|
const lottery = () => { |
|
|
rotateBall().then(() => { |
|
|
rotateBall().then(() => { |
|
|
@ -1174,6 +1242,10 @@ const stopLottery = () => { |
|
|
playDongAudio(); |
|
|
playDongAudio(); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const throttledStopLottery = _.throttle(stopLottery, 1000, { |
|
|
|
|
|
trailing: false, |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
const changePrize = async () => { |
|
|
const changePrize = async () => { |
|
|
let type = currentPrize.value.type; |
|
|
let type = currentPrize.value.type; |
|
|
|
|
|
|
|
|
@ -1216,13 +1288,15 @@ function changeSelectedCard(cardIndex, user) { |
|
|
/** |
|
|
/** |
|
|
* 切换名牌背景 |
|
|
* 切换名牌背景 |
|
|
*/ |
|
|
*/ |
|
|
function changeBackground(cardIndex, color) { |
|
|
|
|
|
|
|
|
const changeBackground = async (cardIndex) => { |
|
|
let card = threeDCards[cardIndex].element; |
|
|
let card = threeDCards[cardIndex].element; |
|
|
// card.style.backgroundColor = |
|
|
// card.style.backgroundColor = |
|
|
// color || "rgba(255,170,22," + (Math.random() * 0.7 + 0.25) + ")"; |
|
|
// 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 +1320,7 @@ function shineCard() { |
|
|
continue; |
|
|
continue; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
changeBackground(cardIndex); |
|
|
|
|
|
|
|
|
// changeBackground(cardIndex); |
|
|
changeCard(cardIndex, users.value[index]); |
|
|
changeCard(cardIndex, users.value[index]); |
|
|
} |
|
|
} |
|
|
}, 500); |
|
|
}, 500); |
|
|
@ -1279,7 +1353,6 @@ function onWindowResize() { |
|
|
|
|
|
|
|
|
onMounted(async () => { |
|
|
onMounted(async () => { |
|
|
initAll(); |
|
|
initAll(); |
|
|
|
|
|
|
|
|
window.addEventListener("resize", onWindowResize, false); |
|
|
window.addEventListener("resize", onWindowResize, false); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</script> |
|
|
@ -1300,12 +1373,15 @@ body, |
|
|
background-repeat: no-repeat; |
|
|
background-repeat: no-repeat; |
|
|
background-size: 100% 100%; |
|
|
background-size: 100% 100%; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
|
|
|
align-items: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.hllogo { |
|
|
.hllogo { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
right: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
bottom: 0; |
|
|
|
|
|
width: 20%; |
|
|
|
|
|
height: auto; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.qipao { |
|
|
.qipao { |
|
|
@ -1389,8 +1465,8 @@ a { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.element { |
|
|
.element { |
|
|
width: 15vh; |
|
|
|
|
|
height: 19vh; |
|
|
|
|
|
|
|
|
width: 7.5vw; |
|
|
|
|
|
height: 18.5vh; |
|
|
/* box-shadow: 0 0 12px rgba(0, 255, 255, 0.5); */ |
|
|
/* box-shadow: 0 0 12px rgba(0, 255, 255, 0.5); */ |
|
|
border: 1px solid rgba(127, 255, 255, 0.25); |
|
|
border: 1px solid rgba(127, 255, 255, 0.25); |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
@ -1423,11 +1499,11 @@ button { |
|
|
height: 70px; |
|
|
height: 70px; |
|
|
color: #fff; |
|
|
color: #fff; |
|
|
border: 0; |
|
|
border: 0; |
|
|
font-size: 2.5vh; |
|
|
|
|
|
|
|
|
font-size: 20px; |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
padding-top: 5px; |
|
|
|
|
|
|
|
|
padding-top: 12px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.highlight { |
|
|
.highlight { |
|
|
@ -1521,7 +1597,7 @@ button { |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
flex-wrap: nowrap; |
|
|
flex-wrap: nowrap; |
|
|
/* color: rgba(127, 255, 255, 0.75); */ |
|
|
/* color: rgba(127, 255, 255, 0.75); */ |
|
|
width: 30vh; |
|
|
|
|
|
|
|
|
width: 29vh; |
|
|
height: 9.5vh; |
|
|
height: 9.5vh; |
|
|
box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
|
transition: transform 1s ease-in; |
|
|
transition: transform 1s ease-in; |
|
|
@ -1541,7 +1617,7 @@ button { |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
background-color: #ffd283; |
|
|
background-color: #ffd283; |
|
|
opacity: 0.8; |
|
|
opacity: 0.8; |
|
|
margin-left: 2vh; |
|
|
|
|
|
|
|
|
margin-left: 0.8vh; |
|
|
margin-top: 3.5vh; |
|
|
margin-top: 3.5vh; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
position: relative; |
|
|
position: relative; |
|
|
@ -1679,6 +1755,7 @@ button { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.tableFoot { |
|
|
.tableFoot { |
|
|
|
|
|
font-size: 18px; |
|
|
color: #e64f39; |
|
|
color: #e64f39; |
|
|
display: flex; |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
gap: 10px; |
|
|
@ -1691,8 +1768,8 @@ button { |
|
|
/* background: linear-gradient(90deg, #ff9800 0%, #ff5722 100%); */ |
|
|
/* background: linear-gradient(90deg, #ff9800 0%, #ff5722 100%); */ |
|
|
border-radius: 50%; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
display: flex; |
|
|
width: 35px; |
|
|
|
|
|
height: 35px; |
|
|
|
|
|
|
|
|
width: 30px; |
|
|
|
|
|
height: 30px; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
/* align-items: center; */ |
|
|
/* align-items: center; */ |
|
|
} |
|
|
} |
|
|
@ -1703,8 +1780,8 @@ button { |
|
|
background: linear-gradient(90deg, #ff9800 0%, #ff5722 100%); |
|
|
background: linear-gradient(90deg, #ff9800 0%, #ff5722 100%); |
|
|
border-radius: 50%; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
display: flex; |
|
|
width: 35px; |
|
|
|
|
|
height: 35px; |
|
|
|
|
|
|
|
|
width: 30px; |
|
|
|
|
|
height: 30px; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -2005,7 +2082,7 @@ button { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.shine.prize-item { |
|
|
.shine.prize-item { |
|
|
/* width: 24vh; */ |
|
|
|
|
|
|
|
|
/* width: 29.5vh; */ |
|
|
margin: 1.2vh 0; |
|
|
margin: 1.2vh 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
Ethereal
no99
zhangjiahao