shishengliang/log-lottery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: pattern config

Browse Source
This commit is contained in:
ex_zhangwenlei@exiot.cmcc
2024-01-11 23:53:53 +08:00
parent 53af03648e
commit 2ba3bb036b
18 changed files with 621 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/hooks/useElement.ts
View File

@@ -1,54 +1,91 @@
import { rgba } from '@/utils/color'
import { IPersonConfig } from '@/types/storeType'
export const useElementStyle=(element:any,cardColor:string,cardSize:{width:number,height:number},textSize:number,mod:'default'|'lucky'='default')=>{
element.style.backgroundColor = rgba(cardColor, mod=='default'?Math.random() * 0.5 + 0.25:0.8)
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.5 + 0.5)
}
else if(mod=='sphere'||mod=='default') {
element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25)
}
else if(mod=='lucky'){
element.style.backgroundColor = rgba(cardColor, 0.8)
}
element.style.border = `1px solid ${rgba(cardColor, 0.25)}`
element.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
element.style.width = `${cardSize.width}px`;
element.style.height = `${cardSize.height}px`;
if (mod == 'lucky') {
element.className = 'lucky-element-card'
}
else {
element.className = 'element-card'
}
// 等比放大
element.addEventListener('mouseenter', (ev:MouseEvent)=> {
// 子元素无效
// ev.stopPropagation()
// ev.preventDefault()
element.addEventListener('mouseenter', (ev: MouseEvent) => {
const target = ev.target as HTMLElement
target.style.border = `1px solid ${rgba(cardColor, 0.75)}`
target.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.75)}`
})
element.addEventListener('mouseleave', (ev:MouseEvent)=>{
// ev.stopPropagation()
// ev.preventDefault()
const target=ev.target as HTMLElement
element.addEventListener('mouseleave', (ev: MouseEvent) => {
const target = ev.target as HTMLElement
target.style.border = `1px solid ${rgba(cardColor, 0.25)}`
target.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
})
element.children[0].style.fontSize = textSize*0.5+'px'
element.children[1].style.fontSize = textSize+'px'
element.children[1].style.lineHeight = textSize*3+'px'
element.children[0].style.fontSize = textSize * 0.5 + 'px';
if (person.uid) {
element.children[0].textContent = person.uid;
}
element.children[1].style.fontSize = textSize + 'px'
element.children[1].style.lineHeight = textSize * 3 + 'px'
element.children[1].style.textShadow = `0 0 12px ${rgba(cardColor, 0.95)}`
element.children[2].style.fontSize = textSize*0.5+'px'
if (person.name) {
element.children[1].textContent = person.name
}
element.children[2].style.fontSize = textSize * 0.5 + 'px'
if (person.department || person.identity) {
element.children[2].innerHTML = `${person.department ? person.department : ''}<br/>${person.identity ? person.identity : ''}`
}
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
// 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) => {
let xTable = 0
let yTable = 0
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)
const index = cardIndex % 5
if (index == 0) {
xTable = centerPosition.x
yTable = 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)
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)
}
return element
return { xTable, yTable }
}