From f1f5e6a1130e0d97ebe06506e1452162404c8024 Mon Sep 17 00:00:00 2001 From: jiyuujin Date: Tue, 27 May 2025 23:36:31 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=E3=82=A2=E3=83=8B=E3=83=A1=E3=83=BC?= =?UTF-8?q?=E3=82=B7=E3=83=A7=E3=83=B3=E3=83=AD=E3=82=B8=E3=83=83=E3=82=AF?= =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/shapes/HeadCircle.vue | 6 ++--- app/components/shapes/HeadCross.vue | 21 +++++++---------- app/components/shapes/HeadHorizontal.vue | 11 ++++----- app/components/shapes/HeadPhoto.vue | 30 ++++++++++++------------ app/components/shapes/HeadSlash.vue | 11 ++++----- app/components/shapes/HeadTriangle.vue | 6 ++--- app/utils/feature.constants.ts | 2 +- nuxt.config.ts | 5 ++++ 8 files changed, 46 insertions(+), 46 deletions(-) diff --git a/app/components/shapes/HeadCircle.vue b/app/components/shapes/HeadCircle.vue index e350d03..21fe6f9 100644 --- a/app/components/shapes/HeadCircle.vue +++ b/app/components/shapes/HeadCircle.vue @@ -35,7 +35,7 @@ export default defineComponent({ setup(props, setupContext) { const { createAnimation, fadeAnimation, transformPosition } = useAnimationParts() - const shape = ref() + const refs = setupContext.refs const KEY_FRAME = [0, 60] @@ -43,12 +43,12 @@ export default defineComponent({ const createAnimations = () => { setTimeout(() => { - createAnimation(shape.value, { r: KEY_FRAME[1] }) + createAnimation(refs.value, { r: KEY_FRAME[1] }) }, 0) } const fadeAnimations = () => { - fadeAnimation(shape.value, { r: KEY_FRAME[0] }) + fadeAnimation(refs.value, { r: KEY_FRAME[0] }) } onMounted(() => { diff --git a/app/components/shapes/HeadCross.vue b/app/components/shapes/HeadCross.vue index 565c064..9597f34 100644 --- a/app/components/shapes/HeadCross.vue +++ b/app/components/shapes/HeadCross.vue @@ -49,10 +49,7 @@ export default defineComponent({ setup(props, setupContext) { const { createAnimation, fadeAnimation, transformPosition } = useAnimationParts() - const shape1 = ref() - const shape2 = ref() - const shape3 = ref() - const shape4 = ref() + const refs = setupContext.refs const KEY_FRAME1 = ['0 -60 0 -60 0 -60', '-54 -60 54 -60 0 -6'] const KEY_FRAME2 = ['-60 0 -60 0 -60 0', '-60 -54 -60 54 -6 0'] @@ -63,18 +60,18 @@ export default defineComponent({ const createAnimations = () => { setTimeout(() => { - createAnimation(shape1.value, { points: KEY_FRAME1[1] }) - createAnimation(shape2.value, { points: KEY_FRAME2[1] }) - createAnimation(shape3.value, { points: KEY_FRAME3[1] }) - createAnimation(shape4.value, { points: KEY_FRAME4[1] }) + createAnimation(refs.shape1, { points: KEY_FRAME1[1] }) + createAnimation(refs.shape2, { points: KEY_FRAME2[1] }) + createAnimation(refs.shape3, { points: KEY_FRAME3[1] }) + createAnimation(refs.shape4, { points: KEY_FRAME4[1] }) }, 0) } const fadeAnimations = () => { - fadeAnimation(shape1.value, { points:KEY_FRAME1[0] }) - fadeAnimation(shape2.value, { points:KEY_FRAME2[0] }) - fadeAnimation(shape3.value, { points:KEY_FRAME3[0] }) - fadeAnimation(shape4.value, { points:KEY_FRAME4[0] }) + fadeAnimation(refs.shape1, { points:KEY_FRAME1[0] }) + fadeAnimation(refs.shape2, { points:KEY_FRAME2[0] }) + fadeAnimation(refs.shape3, { points:KEY_FRAME3[0] }) + fadeAnimation(refs.shape4, { points:KEY_FRAME4[0] }) } onMounted(() => { diff --git a/app/components/shapes/HeadHorizontal.vue b/app/components/shapes/HeadHorizontal.vue index 861e0fe..3939c0b 100644 --- a/app/components/shapes/HeadHorizontal.vue +++ b/app/components/shapes/HeadHorizontal.vue @@ -44,22 +44,21 @@ export default defineComponent({ }, setup(props, setupContext) { const { createAnimation, fadeAnimation, transformPosition } = useAnimationParts() - const shape1 = ref() - const shape2 = ref() + const refs = setupContext.refs const transform = transformPosition(props) const createAnimations = () => { setTimeout(() => { - createAnimation(shape1.value, { height: 55 }) - createAnimation(shape2.value, { y: 5, height: 55 }) + createAnimation(refs.shape1, { height: 55 }) + createAnimation(refs.shape2, { y: 5, height: 55 }) }, 0) } const fadeAnimations = () => { - fadeAnimation(shape1.value, { y: -60, height: 0 }) - fadeAnimation(shape2.value, { y: 60, height: 0 }) + fadeAnimation(refs.shape1, { y: -60, height: 0 }) + fadeAnimation(refs.shape2, { y: 60, height: 0 }) } onMounted(() => { diff --git a/app/components/shapes/HeadPhoto.vue b/app/components/shapes/HeadPhoto.vue index 552d54d..4e6e11c 100644 --- a/app/components/shapes/HeadPhoto.vue +++ b/app/components/shapes/HeadPhoto.vue @@ -14,17 +14,17 @@ cx="0" cy="0" r="0" - :clip-path="`url(${urlBasePath}#clip-boundary)`" + clip-path="url(#clip-boundary)" /> @@ -33,12 +33,12 @@ import { urlBasePath } from '~/utils/constants' import type { CustomPropType } from '~/types/shims-vue' import { useAnimationParts } from '~/composables/useAnimationParts' -import Image01 from '!url-loader!~/assets/img/animation/image01.png' -import Image02 from '!url-loader!~/assets/img/animation/image02.png' -import Image03 from '!url-loader!~/assets/img/animation/image03.png' -import Image04 from '!url-loader!~/assets/img/animation/image04.png' -import Image05 from '!url-loader!~/assets/img/animation/image05.png' -import Image06 from '!url-loader!~/assets/img/animation/image06.png' +import Image01 from '~/assets/img/animation/image01.png' +import Image02 from '~/assets/img/animation/image02.png' +import Image03 from '~/assets/img/animation/image03.png' +import Image04 from '~/assets/img/animation/image04.png' +import Image05 from '~/assets/img/animation/image05.png' +import Image06 from '~/assets/img/animation/image06.png' interface IPropParts { type: string @@ -69,12 +69,12 @@ export default defineComponent({ const imageSrc = computed(() => { const images = { - 'image01.png': Image01, - 'image02.png': Image02, - 'image03.png': Image03, - 'image04.png': Image04, - 'image05.png': Image05, - 'image06.png': Image06, + 'image01.png': Image01.default || Image01, + 'image02.png': Image02.default || Image02, + 'image03.png': Image03.default || Image03, + 'image04.png': Image04.default || Image04, + 'image05.png': Image05.default || Image05, + 'image06.png': Image06.default || Image06, } return images[props.parts.src] }) diff --git a/app/components/shapes/HeadSlash.vue b/app/components/shapes/HeadSlash.vue index f7ed936..bdf8305 100644 --- a/app/components/shapes/HeadSlash.vue +++ b/app/components/shapes/HeadSlash.vue @@ -39,8 +39,7 @@ export default defineComponent({ setup(props, setupContext) { const { createAnimation, fadeAnimation, transformPosition } = useAnimationParts() - const shape1 = ref() - const shape2 = ref() + const refs = setupContext.refs const KEY_FRAME1 = ['-60 -60 -60 -60 -60 -60', '-60 -60 54 -60 -60 54'] const KEY_FRAME2 = ['60 60 60 60 60 60', '60 60 -54 60 60 -54'] @@ -59,14 +58,14 @@ export default defineComponent({ const createAnimations = () => { setTimeout(() => { - createAnimation(shape1.value, { points: KEY_FRAME1[1] }) - createAnimation(shape2.value, { points: KEY_FRAME2[1] }) + createAnimation(refs.shape1, { points: KEY_FRAME1[1] }) + createAnimation(refs.shape2, { points: KEY_FRAME2[1] }) }, 0) } const fadeAnimations = () => { - fadeAnimation(shape1.value, { points: KEY_FRAME1[0] }) - fadeAnimation(shape2.value, { points: KEY_FRAME2[0] }) + fadeAnimation(refs.shape1, { points: KEY_FRAME1[0] }) + fadeAnimation(refs.shape2, { points: KEY_FRAME2[0] }) } onMounted(() => { diff --git a/app/components/shapes/HeadTriangle.vue b/app/components/shapes/HeadTriangle.vue index 2b03dd0..6aae7dc 100644 --- a/app/components/shapes/HeadTriangle.vue +++ b/app/components/shapes/HeadTriangle.vue @@ -33,7 +33,7 @@ export default defineComponent({ setup(props, setupContext) { const { createAnimation, fadeAnimation, transformPosition } = useAnimationParts() - const shape = ref() + const refs = setupContext.refs const KEY_FRAME = ['60 60 60 60 60 60', '60 60 -52 60 60 -52'] @@ -41,12 +41,12 @@ export default defineComponent({ const createAnimations = () => { setTimeout(() => { - createAnimation(shape.value, { points: KEY_FRAME[1] }) + createAnimation(refs.shape, { points: KEY_FRAME[1] }) }, 0) } const fadeAnimations = () => { - fadeAnimation(shape.value, { points: KEY_FRAME[0] }) + fadeAnimation(refs.shape, { points: KEY_FRAME[0] }) } onMounted(() => { diff --git a/app/utils/feature.constants.ts b/app/utils/feature.constants.ts index b0ceaac..1828dde 100644 --- a/app/utils/feature.constants.ts +++ b/app/utils/feature.constants.ts @@ -1,4 +1,4 @@ -export const SHOW_ANIMATION = false +export const SHOW_ANIMATION = true export const SHOW_TICKET = true export const SHOW_TEAM = true export const SHOW_SPEAKER_LIST = true diff --git a/nuxt.config.ts b/nuxt.config.ts index 0ba43c8..6ae2eba 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -60,5 +60,10 @@ export default defineNuxtConfig({ }, build: { extractCSS: true, + loaders: { + imgUrl: { + esModule: false, + }, + }, }, })