Skip to content

Commit 8961f44

Browse files
jiyuujinjiyuujin
committed
refactor: EventCard
1 parent 5fa0f24 commit 8961f44

File tree

2 files changed

+142
-103
lines changed

2 files changed

+142
-103
lines changed

‎app/components/event/EventCard.vue

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<script setup lang="ts">
2+
import RoundButton from '~/components/button/RoundButton.vue'
3+
4+
const props = defineProps({
5+
src: {
6+
type: String,
7+
required: true,
8+
},
9+
alt: {
10+
type: String,
11+
required: true,
12+
},
13+
registerUrl: {
14+
type: String,
15+
default: '',
16+
},
17+
registerText: {
18+
type: String,
19+
default: '',
20+
},
21+
})
22+
</script>
23+
24+
<template>
25+
<div class="event-card">
26+
<img width="690" height="388" :alt="alt" :src="src" decoding="async" />
27+
<div class="title">
28+
<slot name="title" />
29+
</div>
30+
<div class="description">
31+
<slot name="description" />
32+
</div>
33+
<div v-if="registerUrl && registerText" class="register">
34+
<RoundButton :href="registerUrl">{{ registerText }}</RoundButton>
35+
</div>
36+
</div>
37+
</template>
38+
39+
<style lang="ts" scoped>
40+
css({
41+
'.event-card': {
42+
'--img-size': '475px',
43+
maxWidth: '475px',
44+
display: 'flex',
45+
flexDirection: 'column',
46+
gap: '0.6em',
47+
'.title': {
48+
fontWeight: 'bold',
49+
fontSize: '22px',
50+
whiteSpace: 'pre-wrap',
51+
lineHeight: '1.2',
52+
},
53+
'.description': {
54+
fontSize: '16px',
55+
'::v-deep(a)': {
56+
color: '{color.vue.green}',
57+
textDecoration: 'underline',
58+
'&:hover': {
59+
opacity: 0.4,
60+
transition: '.2s',
61+
},
62+
},
63+
},
64+
'.register': {
65+
display: 'flex',
66+
justifyContent: 'center',
67+
marginTop: 'calc({space.8} * 5)',
68+
'& a': {
69+
color: '#fff',
70+
textDecoration: 'none',
71+
},
72+
},
73+
},
74+
'@tablet': {
75+
'.event-card': {
76+
'--img-size': '368px',
77+
maxWidth: '368px',
78+
},
79+
},
80+
'@mobile': {
81+
'.event-card': {
82+
'--img-size': '690px',
83+
maxWidth: '690px',
84+
'.title': {
85+
fontSize: '16px',
86+
},
87+
'.description': {
88+
marginTop: 'calc({space.8} * 1)',
89+
},
90+
},
91+
},
92+
})
93+
</style>

‎app/components/event/EventSection.vue

+49-103
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script setup lang="ts">
2+
import EventCard from '~/components/event/EventCard.vue'
23
import SectionTitle from '~/components/SectionTitle.vue'
34
import MarkDownText from '~/components/MarkDownText.vue'
45
import CommentTitle from '~/components/CommentTitle.vue'
@@ -48,70 +49,47 @@ import { panelers } from '~/utils/events-panel-discussion.constants'
4849
<h3>{{ $t('top.various_other_events') }}</h3>
4950
</div>
5051
<div class="event-menu">
51-
<div class="event-card">
52-
<img
53-
width="690"
54-
height="388"
55-
:alt="`${$t('top.refreshment')} supported by giftee, HENNGE, TAM`"
56-
src="/event/refreshment_space.png"
57-
decoding="async"
58-
/>
59-
<div class="title">
52+
<EventCard
53+
src="/event/refreshment_space.png"
54+
:alt="`${$t('top.refreshment')} supported by giftee, HENNGE, TAM`"
55+
>
56+
<template #title>
6057
{{ $t('top.refreshment') }}
6158
<br />
6259
supported by giftee, HENNGE, TAM
63-
</div>
64-
<div class="description">
60+
</template>
61+
<template #description>
6562
{{ $t('top.refreshment_explain') }}
66-
</div>
67-
</div>
68-
<div class="event-card">
69-
<img
70-
width="690"
71-
height="388"
72-
:alt="$t('top.creative_wall')"
73-
src="/event/creative_wall.png"
74-
decoding="async"
75-
/>
76-
<div class="title">
63+
</template>
64+
</EventCard>
65+
<EventCard src="/event/creative_wall.png" :alt="$t('top.creative_wall')">
66+
<template #title>
7767
{{ $t('top.creative_wall') }}
78-
</div>
79-
<div class="description">
68+
</template>
69+
<template #description>
8070
{{ $t('top.creative_wall_explain') }}
81-
</div>
82-
</div>
83-
<div class="event-card">
84-
<img
85-
width="690"
86-
height="388"
87-
:alt="$t('top.events_handson')"
88-
src="/event/hands_on.png"
89-
decoding="async"
90-
/>
91-
<div class="title">
71+
</template>
72+
</EventCard>
73+
<EventCard src="/event/hands_on.png" :alt="`${$t('top.events_handson')}`">
74+
<template #title>
9275
{{ $t('top.events_handson') }}
93-
</div>
94-
<i18n-t keypath="top.events_handson_explain" tag="div" class="description" scope="global">
95-
<nuxt-link to="/#handson" :title="$t('top.events_handson_about')">
96-
{{ $t('top.events_handson_about') }}
97-
</nuxt-link>
98-
</i18n-t>
99-
</div>
100-
<div class="event-card">
101-
<img
102-
width="690"
103-
height="388"
104-
:alt="$t('top.tattoo_space')"
105-
src="/event/tattoo_space.png"
106-
decoding="async"
107-
/>
108-
<div class="title">
76+
</template>
77+
<template #description>
78+
<i18n-t keypath="top.events_handson_explain" tag="div" scope="global">
79+
<nuxt-link to="/#handson" :title="$t('top.events_handson_about')">
80+
{{ $t('top.events_handson_about') }}
81+
</nuxt-link>
82+
</i18n-t>
83+
</template>
84+
</EventCard>
85+
<EventCard src="/event/tattoo_space.png" :alt="`${$t('top.tattoo_space')}`">
86+
<template #title>
10987
{{ $t('top.tattoo_space') }}
110-
</div>
111-
<div class="description">
88+
</template>
89+
<template #description>
11290
{{ $t('top.tattoo_space_explain') }}
113-
</div>
114-
</div>
91+
</template>
92+
</EventCard>
11593
</div>
11694
</div>
11795
</template>
@@ -153,30 +131,6 @@ css({
153131
gap: '2em',
154132
justifyContent: 'center',
155133
},
156-
'.event-card': {
157-
'--img-size': '475px',
158-
maxWidth: '475px',
159-
display: 'flex',
160-
flexDirection: 'column',
161-
gap: '0.6em',
162-
'.title': {
163-
fontWeight: 'bold',
164-
fontSize: '22px',
165-
whiteSpace: 'pre-wrap',
166-
lineHeight: '1.2',
167-
},
168-
'.description': {
169-
fontSize: '16px',
170-
'::v-deep(a)': {
171-
color: '{color.vue.green}',
172-
textDecoration: 'underline',
173-
'&:hover': {
174-
opacity: 0.4,
175-
transition: '.2s',
176-
},
177-
},
178-
},
179-
},
180134
'.event-title': {
181135
display: 'grid',
182136
gap: 'calc({space.8} * 3)',
@@ -192,13 +146,25 @@ css({
192146
fontWeight: 'bold',
193147
textAlign: 'center',
194148
},
149+
'.teams': {
150+
display: 'flex',
151+
flexWrap: 'wrap',
152+
gap: '32px',
153+
maxWidth: '988px',
154+
margin: '0 auto',
155+
'@tablet': {
156+
maxWidth: '760px',
157+
},
158+
'@mobile': {
159+
gap: '4vw',
160+
},
161+
},
195162
'@tablet': {
196163
'.explain': {
197164
maxWidth: '730px',
198165
},
199-
'.event-card': {
200-
'--img-size': '368px',
201-
maxWidth: '368px',
166+
'.teams': {
167+
maxWidth: '760px',
202168
},
203169
},
204170
'@mobile': {
@@ -214,27 +180,7 @@ css({
214180
'.explain': {
215181
maxWidth: '690px',
216182
},
217-
'.event-card': {
218-
'--img-size': '690px',
219-
maxWidth: '690px',
220-
'.title': {
221-
fontSize: '16px',
222-
},
223-
'.description': {
224-
marginTop: 'calc({space.8} * 1)',
225-
},
226-
},
227-
},
228-
'.teams': {
229-
display: 'flex',
230-
flexWrap: 'wrap',
231-
gap: '32px',
232-
maxWidth: '988px',
233-
margin: '0 auto',
234-
'@tablet': {
235-
maxWidth: '760px',
236-
},
237-
'@mobile': {
183+
'.teams': {
238184
gap: '4vw',
239185
},
240186
},

0 commit comments

Comments
 (0)