12 Commits

  1. BIN
      src/assets/img/zhongchou/助力已达标.png
  2. 30
      src/views/choujiang/hxl-cj/cj.vue
  3. 10
      src/views/choujiang/index.vue
  4. 2
      src/views/choujiang/lottery/Lottery3D.vue
  5. 2
      src/views/choujiang/lottery/PrizePanel.vue
  6. 89
      src/views/zhongchou/index.vue

BIN
src/assets/img/zhongchou/助力已达标.png

After

Width: 402  |  Height: 88  |  Size: 13 KiB

30
src/views/choujiang/hxl-cj/cj.vue

@ -507,6 +507,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 +519,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 +552,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++;
}
@ -1389,8 +1407,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;

10
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%;
}
/* 透明弹窗样式 */

2
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.

2
src/views/choujiang/lottery/PrizePanel.vue

@ -147,7 +147,7 @@
>
<!-- <span>{{ user.id }}</span> - <span>{{ user.name }}</span> - -->
<span>{{ user.jwcode }}</span>
<span>{{ user.prizeName }}</span>
<span>{{ user.gradeName }}</span>
</li>
</ul>
<!-- 分页控件 -->

89
src/views/zhongchou/index.vue

@ -41,14 +41,21 @@
<!-- 美股剩余时间显示 -->
<div class="stock-info" :class="{ 'time-almost-up': isTimeAlmostUp }">
<h3>{{ marketName }}实时数据</h3>
<h3>还剩{{ numberToChinese(usDisplayTime) }}分钟</h3>
<template v-if="!isCompleted">
<h3>{{ marketName }}实时数据</h3>
<h3>还剩{{ numberToChinese(usDisplayTime) }}分钟</h3>
</template>
<template v-else>
<h3>{{ marketName }}实时数据</h3>
<h3> 助力成功</h3>
</template>
</div>
</div>
</div>
<!-- 美股助力按钮和底座 -->
<div class="boost-section">
<div class="boost-btn us-boost-btn" :class="{ 'boosted': usBoostStatus }"
<div class="boost-btn us-boost-btn"
:class="{ 'boosted': usBoostStatus && !isCompleted, 'completed': isCompleted }"
@click.stop="handleBoostClick('us')"></div>
<div class="base-image">
<img src="@/assets/img/zhongchou/底座.png" alt="底座" />
@ -132,7 +139,7 @@
<script setup>
import { addRecordAPI, getActivity1API } from '../../api/zhongchouApi'
import { ref, computed, onMounted, nextTick, watch } from 'vue'
const isCompleted = ref(false) // 1500
//
const activityPeriod = ref('加载中...')
// IDID
@ -168,15 +175,15 @@ async function fetchActivity() {
} else {
activityPeriod.value = '时间待定'
}
//
if (data && data.length > 1) { //
// 使1
const item = data[0] // 使
// ID
usMarketId.value = item.marketId
//
marketName.value = item.market
@ -192,25 +199,33 @@ async function fetchActivity() {
const totalPeople = 1500 // 1500
const currentCount = item.marketCount || 0 //
// (0-100)
const progressPercent = Math.min((currentCount / totalPeople) * 100, 100)
//
if (currentCount >= totalPeople) {
isCompleted.value = true //
usRemainingTime.value = 0 // 0
} else {
isCompleted.value = false
// (15100%)
const usedTime = (progressPercent / 100) * 15
const remainingTime = Math.max(0, 15 - usedTime)
// - 151001
const initialTime = 15 // 15
const hundredsCount = Math.floor(currentCount / 100) // 100
const remainingTime = Math.max(0, initialTime - hundredsCount) // 1001
usRemainingTime.value = remainingTime
}
usRemainingTime.value = Math.round(remainingTime)
console.log(`${marketName.value}助力人数: ${currentCount}/${totalPeople}, 进度: ${progressPercent.toFixed(1)}%, 剩余时间: ${remainingTime.toFixed(1)}分钟`)
// console.log(`${marketName.value}: ${currentCount}/${totalPeople}, : ${currentCount >= totalPeople ? '100' : progressPercent.toFixed(1)}%, : ${usRemainingTime.value}, : ${isCompleted.value}`)
//
nextTick(() => {
updateProgressDisplay()
})
}
}
} else {
console.error('获取活动失败:', response.message)
activityPeriod.value = '获取失败'
activityPeriod.value = response.message
}
} catch (error) {
console.error('请求错误:', error)
@ -259,7 +274,7 @@ const showRulesModal = ref(false)
//
const showBoostSuccess = ref(false)
// - marketTwoCount
const marketName = ref('美股') // API
const marketName = ref() // API
const usRemainingTime = ref(15) // 15
// const hkRemainingTime = ref(6) //
const usTotalTime = ref(15) // 15
@ -359,11 +374,16 @@ onMounted(() => {
// }
const handleBoostClick = async (area) => {
// 1500
if (isCompleted.value) {
return;
}
if (area === 'us' && !usBoostStatus.value) {
try {
// IDID
if (!activityId.value || !usMarketId.value) {
console.error('活动ID或市场ID未获取,请先获取活动数据')
await fetchActivity()
return
}
@ -382,15 +402,15 @@ const handleBoostClick = async (area) => {
setTimeout(() => {
showBoostSuccess.value = false
}, 1000)
//
await fetchActivity()
console.log(`${marketName.value}已助力状态:`, usBoostStatus.value, '剩余时间:', usRemainingTime.value)
} else {
console.error(`${marketName.value}助力失败:`, response.message)
}
} catch (error) {
console.error(`${marketName.value}助力请求失败:`, error)
} finally {
//
await fetchActivity()
console.log(`${marketName.value}已助力状态:`, usBoostStatus.value, '剩余时间:', usRemainingTime.value)
}
}
}
@ -832,6 +852,23 @@ const hideRules = () => {
background-image: url('@/assets/img/zhongchou/美股已助力.png');
}
/* 助力完成状态 - 当达到1500人时使用 */
.us-boost-btn.completed {
background-image: url('@/assets/img/zhongchou/助力已达标.png');
cursor: not-allowed;
/* 禁用鼠标指针 */
pointer-events: none;
/* 完全禁用鼠标事件 */
}
/* 修改悬浮效果,排除完成状态的按钮 */
.boost-btn:not(.completed):hover {
background-size: 110%;
}
/* 移除原有的通用悬浮效果 */
.boost-btn:hover {
/* 移除此样式或注释掉 */
}
/* 港股助力按钮 */
/* .hk-boost-btn {
background-image: url('@/assets/img/zhongchou/助力港股.png');
@ -1274,17 +1311,21 @@ const hideRules = () => {
.rules-list {
width: 100%;
line-height: 1.6; /* 增加行高 */
line-height: 1.6;
/* 增加行高 */
margin-top: 10%;
margin-left: 10%; /* 减少左边距 */
padding-right: 5%; /* 添加右边距 */
margin-left: 10%;
/* 减少左边距 */
padding-right: 5%;
/* 添加右边距 */
}
.rules-list p {
margin: 10px 0;
font-size: 16px;
color: #fff;
font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; /* 使用更清晰的中文字体 */
font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
/* 使用更清晰的中文字体 */
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
line-height: 1.7;
}

Loading…
Cancel
Save