From 34329606d6b66b561ea9e9b266306386c013cab3 Mon Sep 17 00:00:00 2001 From: log1997 <2694233102@qq.com> Date: Mon, 23 Dec 2024 17:27:20 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E6=8A=BD=E4=B8=AD?= =?UTF-8?q?=E5=8D=A1=E7=89=87=E6=97=B6=E7=9A=84=E6=8E=92=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 一行中的卡片数量为偶数时，卡片未居中 --- src/hooks/useElement.ts | 62 +++++++++++++++++++++------------------- src/views/Home/index.vue | 3 +- 2 files changed, 34 insertions(+), 31 deletions(-) diff --git a/src/hooks/useElement.ts b/src/hooks/useElement.ts index 35c92d5..bc99bdb 100644 --- a/src/hooks/useElement.ts +++ b/src/hooks/useElement.ts @@ -1,14 +1,14 @@ import { rgba } from '@/utils/color' import { IPersonConfig } from '@/types/storeType' -export const useElementStyle = (element: any, person: IPersonConfig, index: number, patternList: number[], patternColor: string, cardColor: string, cardSize: { width: number, height: number }, textSize: number, mod: 'default' | 'lucky'|'sphere' = 'default') => { - if (patternList.includes(index+1)&&mod=='default') { +export const useElementStyle = (element: any, person: IPersonConfig, index: number, patternList: number[], patternColor: string, cardColor: string, cardSize: { width: number, height: number }, textSize: number, mod: 'default' | 'lucky' | 'sphere' = 'default') => { + if (patternList.includes(index + 1) && mod == 'default') { element.style.backgroundColor = rgba(patternColor, Math.random() * 0.2 + 0.8) } - else if(mod=='sphere'||mod=='default') { + else if (mod == 'sphere' || mod == 'default') { element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25) } - else if(mod=='lucky'){ + else if (mod == 'lucky') { element.style.backgroundColor = rgba(cardColor, 0.8) } element.style.border = `1px solid ${rgba(cardColor, 0.25)}` @@ -52,40 +52,42 @@ export const useElementStyle = (element: any, person: IPersonConfig, index: numb return element } -// export const useElementPosition=(element:any,count:number,cardSize:{width:number,height:number},windowSize:{width:number,height:number},cardIndex:number)=>{ -// const centerPosition={ -// x:0, -// y:windowSize.height/2-cardSize.height/2 -// } -// const index =cardIndex%5 -// if(index==0){ -// element.position.x=centerPosition.x -// element.position.y=centerPosition.y-Math.floor(cardIndex/5)*(cardSize.height+60) -// } -// else{ -// element.position.x=index%2===0?Math.ceil(index/2)*(cardSize.width+100):-Math.ceil(index/2)*(cardSize.width+100) -// element.position.y=centerPosition.y-Math.floor(cardIndex/5)*(cardSize.height+60) -// } - -// return element -// } - -export const useElementPosition = (element: any, count: number, cardSize: { width: number, height: number }, windowSize: { width: number, height: number }, cardIndex: number) => { +/** + * @description 设置抽中卡片的位置 + * 最少一个，最大十个 + */ +// TODO:不超过5个时：单行排列；超过5个时，6：上3下3；7：上3下4；8：上3下5；9：上4下5；10：上5下5 +export const useElementPosition = (element: any, count: number, totalCount: number, cardSize: { width: number, height: number }, windowSize: { width: number, height: number }, cardIndex: number) => { let xTable = 0 let yTable = 0 const centerPosition = { x: 0, y: windowSize.height / 2 - cardSize.height / 2 } - const index = cardIndex % 5 - if (index == 0) { - xTable = centerPosition.x - yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60) + // 有一行为偶数的特殊数量 + const specialPosition = [2, 4, 7, 9] + // 不包含特殊值的 和 分两行中第一行为奇数值的 + if (!specialPosition.includes(totalCount) || (totalCount > 5 && cardIndex < 5)) { + const index = cardIndex % 5 + if (index == 0) { + xTable = centerPosition.x + yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60) + } + else { + xTable = index % 2 === 0 ? Math.ceil(index / 2) * (cardSize.width + 100) : -Math.ceil(index / 2) * (cardSize.width + 100) + yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60) + } } else { - xTable = index % 2 === 0 ? Math.ceil(index / 2) * (cardSize.width + 100) : -Math.ceil(index / 2) * (cardSize.width + 100) - yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60) + const index = cardIndex % 5 + if (index == 0) { + xTable = centerPosition.x + (cardSize.width + 100) / 2 + yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60) + } + else { + xTable = index % 2 === 0 ? Math.ceil(index / 2) * (cardSize.width + 100) + (cardSize.width + 100) / 2 : -(Math.ceil(index / 2) * (cardSize.width + 100)) + (cardSize.width + 100) / 2 + yTable = centerPosition.y - Math.floor(cardIndex / 5) * (cardSize.height + 60) + } } - return { xTable, yTable } } diff --git a/src/views/Home/index.vue b/src/views/Home/index.vue index c6bafd4..ad6769d 100644 --- a/src/views/Home/index.vue +++ b/src/views/Home/index.vue @@ -452,8 +452,9 @@ const stopLottery = async () => { luckyTargets.value.forEach((person: IPersonConfig, index: number) => { let cardIndex = selectCard(luckyCardList.value, tableData.value.length, person.id) luckyCardList.value.push(cardIndex) + const totalLuckyCount=luckyTargets.value.length let item = objects.value[cardIndex] - const { xTable, yTable } = useElementPosition(item, rowCount.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, windowSize, index) + const { xTable, yTable } = useElementPosition(item, rowCount.value,totalLuckyCount, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, windowSize, index) new TWEEN.Tween(item.position) .to({ x: xTable,