欢迎页样式和动画优化

src/layout/grid/WelcomePage.tsx

@@ -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={
+              class={clsx(
-                'w-[175px] h-[41px] mt-4 flex items-center justify-center text-[#333] cursor-pointer'
+                ' 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,9 +194,8 @@ export default defineComponent(() => {
                       const affix = val.background.split('.').pop()
                       if (!affix) return
 
-                      console.log(`background${uuid()}.${affix}`);
+                      console.log(`background${uuid()}.${affix}`)
-                      console.log(`${res.type}`);
+                      console.log(`${res.type}`)
-                      
 
                       const file = new File([res], `${uuid()}.${affix}`, {
                         type: `${res.type}`