5 Commits

  1. 1
      .vercel/project.json
  2. 2
      src/views/choujiang/lottery/CardItem.vue
  3. 37
      src/views/choujiang/lottery/Lottery3D.vue
  4. 10
      src/views/choujiang/lottery/PrizePanel.vue

1
.vercel/project.json

@ -0,0 +1 @@
{"projectName":"trae_8qnxf0if"}

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

@ -173,7 +173,7 @@ onBeforeUnmount(() => {
/* ... */
}
.details {
font-size: 30px;
font-size: 26px;
color: white;
text-align: center;
display: flex;

37
src/views/choujiang/lottery/Lottery3D.vue

@ -64,7 +64,39 @@ const targets = {
table: [],
sphere: [],
};
function swapCardContents() {
//
if (threeDCards.length < 2 || globalCardIndexes.length > 0) return;
//
let indexA = Math.floor(Math.random() * threeDCards.length);
let indexB = Math.floor(Math.random() * threeDCards.length);
while (indexA === indexB) {
indexB = Math.floor(Math.random() * threeDCards.length);
}
const cardA = threeDCards[indexA].element;
const cardB = threeDCards[indexB].element;
// ()
if (!cardA.dataset.originalContent) {
cardA.dataset.originalContent = cardA.innerHTML;
}
if (!cardB.dataset.originalContent) {
cardB.dataset.originalContent = cardB.innerHTML;
}
//
[cardA.innerHTML, cardB.innerHTML] = [cardB.innerHTML, cardA.innerHTML];
cardA.classList.add('swap-animation');
cardB.classList.add('swap-animation');
//
setTimeout(() => {
cardA.classList.remove('swap-animation');
cardB.classList.remove('swap-animation');
}, 500);
}
function createElement(css = "", text = "") {
const dom = document.createElement("div");
dom.className = css;
@ -737,6 +769,7 @@ onMounted(async () => {
}, 500);
window.addEventListener("resize", onWindowResize);
// swapInterval.value = setInterval(swapCardContents, swapIntervalTime.value);
});
onBeforeUnmount(() => {
@ -747,6 +780,10 @@ onBeforeUnmount(() => {
clearTimeout(highlightTimeout);
highlightTimeout = null;
}
// if (swapInterval.value) {
// clearInterval(swapInterval.value);
// swapInterval.value = null;
// }
});
function render() {

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

@ -36,6 +36,9 @@
<span class="progress-bar-text">
{{ getLeftCount(prize) }}/{{ prize.count }}
</span>
</div>
</div>
</div>
@ -537,11 +540,12 @@ function getProgressPercent(prize) {
background-image: url("../../../assets/展开.png");
background-size: cover;
background-position: center;
transform: rotate(180deg);
}
.arrow-down {
position: fixed;
top: 120px;
left: 165px;
left: 181px;
width: 36px;
height: 38px;
margin-bottom: 4px;
@ -549,7 +553,7 @@ function getProgressPercent(prize) {
background-image: url("../../../assets/展开.png");
background-size: cover;
background-position: center;
transform: rotate(180deg);
}
.winner-btn {
background: rgba(255, 210, 131, 0.8);
@ -565,7 +569,7 @@ function getProgressPercent(prize) {
.winner-modal-mask {
position: fixed;
top: 155px;
left: 10px;
left:33px;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.01);

Loading…
Cancel
Save