xyyd
/
xyyd-fatfox
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

欢迎页样式和动画优化

This commit is contained in:
expdsn 2024-11-20 10:30:37 +08:00
parent 743d820bc8
commit e5d031e56c
2 changed files with 60 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/icons/welcome/welcomeLeft.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

72
src/layout/grid/WelcomePage.tsx
View File

@ -1,13 +1,16 @@
import { computed, defineComponent, onMounted, ref, Transition } from 'vue'
import { computed, defineComponent, onMounted, onUnmounted, ref, Transition } from 'vue'
import WelcomeImg from '~/icons/welcome/welcomeTitle.png'
import DivBgImg from '~/icons/welcome/back.png'
import startUseImg from '~/icons/welcome/startUse.png'
import LeftImg from '~/icons/welcome/welcomeLeft.png'
import RightImg from '~/icons/welcome/welcomeRight.png'
import useLayoutStore from '../useLayoutStore'
import request from '@/utils/request'
import useStatisticStore from '@/utils/useStatisticStore'
import { v4 as uuid } from 'uuid'
import { uploadLocal } from '@/utils/upload'
import { videoArr } from '@/config'
import clsx from 'clsx'
export const DefaultPageSetting = [
{
name: '游戏',
@ -40,6 +43,25 @@ export default defineComponent(() => {
const layout = useLayoutStore()
const isFirst = ref(false)
// 创建一个响应式变量来存储屏幕宽度
const width = ref(window.innerWidth)
const updateWidth = () => {
width.value = window.innerWidth
}
onMounted(() => {
// 监听窗口大小变化
window.addEventListener('resize', updateWidth)
})
onUnmounted(() => {
// 组件卸载时移除事件监听器
window.removeEventListener('resize', updateWidth)
})
const isBig = computed(() => {
return width.value > 1700
})
onMounted(() => {
// 检查 localStorage 是否已经有访问记录
const visited = localStorage.getItem('hasVisited')
@ -86,24 +108,39 @@ export default defineComponent(() => {
>
<span class={'leading-[20px] -mt-2 text-[20px] text-white '}>请选择您的初始模式</span>
</div>
<div class={'w-full h-[370px] flex justify-center'}>
<div
class={'w-full flex justify-center'}
style={
isBig.value
? {
width: 844 + 'px',
height: 433 + 'px'
}
: {
width: 709 + 'px',
height: 370 + 'px'
}
}
>
<div class={'w-[868px] h-[370px] '}>
<div class={'relative w-full h-full flex justify-center'}>
{DefaultPageSetting.map((item, idx) => (
<div
class={
' w-[709px] h-[370px] cursor-pointer duration-150 absolute top-0 left-0 bg-[#2c2e3e] p-3 overflow-hidden rounded-2xl'
' cursor-pointer duration-150 absolute top-0 left-0 bg-[#2c2e3e] p-3 rounded-2xl'
}
onClick={() => {
selectMode.value = idx
}}
style={{
transform: `translate(${idx === selectMode.value ? 80 : (selectMode.value === 2 && idx === 0) || selectMode.value + 1 === idx ? 219 : -52}px) scale(${
transform: `translate(${idx === selectMode.value ? (isBig.value ? 0 : 0) : (selectMode.value === 2 && idx === 0) || selectMode.value + 1 === idx ? (isBig.value ? 460 : 152) : isBig.value ? -382 : -152}px) scale(${
idx === selectMode.value ? 1 : 0.85
})`,
backgroundImage: `url('${DivBgImg}')`,
backgroundSize: '100% 100%',
zIndex: selectMode.value === idx ? 10 : 0
zIndex: selectMode.value === idx ? 10 : 0,
width: (isBig.value ? 844 : 709) + 'px',
height: (isBig.value ? 433 : 370) + 'px'
}}
>
<div
@ -115,6 +152,17 @@ export default defineComponent(() => {
backgroundRepeat: 'no-repeat'
}}
></div>
{selectMode.value !== idx ? (
(selectMode.value === 2 && idx === 0) || selectMode.value + 1 === idx ? (
<div class={'right-[-100px] absolute top-1/2 -translate-y-1/2'}>
<img src={RightImg} class={'w-[40px]'} alt="" />
</div>
) : (
<div class={'left-[-100px] absolute top-1/2 -translate-y-1/2'}>
<img src={LeftImg} class={'w-[40px]'} alt="" />
</div>
)
) : null}
</div>
))}
</div>
@ -125,9 +173,10 @@ export default defineComponent(() => {
<span class={'w-[180px]'}>{DefaultPageSetting[selectMode.value].desct}</span>
</div>
<div
class={
'w-[175px] h-[41px] mt-4 flex items-center justify-center text-[#333] cursor-pointer'
}
class={clsx(
' mt-4 flex items-center justify-center text-[#333] cursor-pointer',
isBig.value ? 'w-[300px] h-[66px] text-[22px]' : 'w-[175px] h-[41px] text-[16px]'
)}
onClick={() => {
localStorage.setItem('hasVisited', 'true')
isFirst.value = false
@ -145,10 +194,9 @@ export default defineComponent(() => {
const affix = val.background.split('.').pop()
if (!affix) return
console.log(`background${uuid()}.${affix}`);
console.log(`${res.type}`);
console.log(`background${uuid()}.${affix}`)
console.log(`${res.type}`)
const file = new File([res], `${uuid()}.${affix}`, {
type: `${res.type}`
})