From e5d031e56ce573fadbb7e5afca656be4dfbc4b07 Mon Sep 17 00:00:00 2001 From: expdsn <18111002318@163.com> Date: Wed, 20 Nov 2024 10:30:37 +0800 Subject: [PATCH] =?UTF-8?q?=E6=AC=A2=E8=BF=8E=E9=A1=B5=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E5=92=8C=E5=8A=A8=E7=94=BB=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/welcome/welcomeLeft.png | Bin 0 -> 1214 bytes src/layout/grid/WelcomePage.tsx | 72 ++++++++++++++++++++++----- 2 files changed, 60 insertions(+), 12 deletions(-) create mode 100644 public/icons/welcome/welcomeLeft.png diff --git a/public/icons/welcome/welcomeLeft.png b/public/icons/welcome/welcomeLeft.png new file mode 100644 index 0000000000000000000000000000000000000000..cc4218d3477bb3e1fbec9256f4eca8f5cd881945 GIT binary patch literal 1214 zcmV;v1VQ_WP)Px(cu7P-RCr$P+)I+$Fc1JxxqJbxKo#pbL=KY4iZZ8|+=2rnxee>!0&gjtEMYw% zrOY@32HW~~x4PNPMgsXw%aU4_3nd?Gf%SU*wXm+myn;qkO1%i2MIdx&x{AOV!fCX! zEMMmHxoVn5;7r^)w5O*hRhFgNY&HTn1$T`$o6Xeud=@xcG+kccCe-?o))g1H5x5~V zi8x0zfg6Aui!|w~9%vGAJv@_0lZf*`lZboAvxzi`I1e=T5$6(V>?6(xjcvsFqOpVv zfyNFl6dEhIkZ5e+LZh*Oi-DFsTr9M#;bNj?3l|$LOSlwh*}S!R_gQ?NB+wC8v)Mvf1(mjT1^LMDdNzZcSf|fMmazaZ6mm69VxE#@< z!{v&m;p)0pZQK3|zEH8=>`$53Sq zCup~G0wXvSj}tUAv>P}< zGe`Rmr_uDION+%q>23a)pVR52cDtQ-YRI&``h2P0Bk1STe6O+S(0sqhqJ9uG)88wK zA~>4$TGh0%9Li0u95^7jT%*9bsM)5K9DgIrY9NC{S(aax%jGv0QQN^R>fit|9SMPF zGJT3R9qIn-5EEcuJpC}UelB-v?m4tK>Jsr?otwcy@XRSuEb=Kv9-6cgH9S;_OiFm@ zQs-3gCRYwJU^r~n$W+B)v!-7~BJWmYva4Pf7rYM*D>z+E@ZRvO;RMeEPVgKfPDWc# zIL?vhbdQs%N`Q#t+HHeG97nvMaGdUW!QnXI9goM~QQ&gMOY$;<9G7QF;Bt(-WN^9R zC56igFF9N;cpz|4cp(o4gTYb9E6Y-CHXFA@rul;c!zCf6Dj_0oKA)?mY2e_fMxK6X z+c|X}BH|zu1HO?5{&G>uc+u9Xwoys#o`(jG+C2{y93?z-a8&S6!co9O3x^#KH5_I< z^l(`5NWfvlBLjyGj}#mxJaTYY@JPa8z#|I>jYk>|5|2DwYCL`Z_2271Z1ZMV%csic zf$nm}!cT#hC0vSbn=M>yysY73;$;sP3y%d{3_Lb)q48M3g~VeA7YdIhTnIe2aK3n~ z;e7De!@1%K+Wv3iTwQ# zp1>Jwd_2MvI0LvxlVpK2gzMvhpXIV>H;STNw?%Q53x$Y9Bd%W;p3P3a#r1m??eGN7 cfl=fA1z6BEcrHjV_5c6?07*qoM6N<$f_0fT%m4rY literal 0 HcmV?d00001 diff --git a/src/layout/grid/WelcomePage.tsx b/src/layout/grid/WelcomePage.tsx index 4137639..4c73ff0 100644 --- a/src/layout/grid/WelcomePage.tsx +++ b/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(() => { > 请选择您的初始模式 -
+
{DefaultPageSetting.map((item, idx) => (
{ 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' }} >
{ backgroundRepeat: 'no-repeat' }} >
+ {selectMode.value !== idx ? ( + (selectMode.value === 2 && idx === 0) || selectMode.value + 1 === idx ? ( +
+ +
+ ) : ( +
+ +
+ ) + ) : null}
))}
@@ -125,9 +173,10 @@ export default defineComponent(() => { {DefaultPageSetting[selectMode.value].desct}
{ 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}` })