106 lines
3.1 KiB
Vue
106 lines
3.1 KiB
Vue
<template>
|
|
<div class="event-single">
|
|
<section class="hero is-primary">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<h1 class="title">
|
|
{{ event.name }}
|
|
</h1>
|
|
<h2 class="subtitle">
|
|
<strong>Date:</strong> {{ event.date }}
|
|
<br>
|
|
<strong>Time:</strong> {{ event.time }}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="event-content">
|
|
<div class="container">
|
|
<p class="is-size-4 description">{{ event.description }}</p>
|
|
<p class="is-size-4">Location: {{ event.location }}</p>
|
|
<p class="is-size-4">Category: {{ event.category }}</p>
|
|
<div class="event-images columns is-multiline has-text-centered"></div>
|
|
<div class="event-images columns is-multiline has-text-centered">
|
|
<div v-for="image in event.images" :key="image.id" class="column is-one-third">
|
|
<img :src="image" :alt="event.name">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'EventSingle',
|
|
data() {
|
|
return {
|
|
events: [{
|
|
id: 1,
|
|
name: 'Charity Ball',
|
|
category: 'Fundraising',
|
|
description: 'Spend an elegant night of dinner and dancing with us as we raise money for our new rescue farm.',
|
|
featuredImage: 'https://placekitten.com/500/500',
|
|
images: [
|
|
'https://placekitten.com/500/500',
|
|
'https://placekitten.com/500/500',
|
|
'https://placekitten.com/500/500',
|
|
],
|
|
location: '1234 Fancy Ave',
|
|
date: '12-25-2019',
|
|
time: '11:30'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Rescue Center Goods Drive',
|
|
category: 'Adoptions',
|
|
description: 'Come to our donation drive to help us replenish our stock of pet food, toys, bedding, etc. We will have live bands, games, food trucks, and much more.',
|
|
featuredImage: 'https://placekitten.com/500/500',
|
|
images: [
|
|
'https://placekitten.com/500/500'
|
|
],
|
|
location: '1234 Dog Alley',
|
|
date: '11-21-2019',
|
|
time: '12:00'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Rescue Center Goods Drive',
|
|
category: 'Adoptions',
|
|
description: 'Come to our donation drive to help us replenish our stock of pet food, toys, bedding, etc. We will have live bands, games, food trucks, and much more.',
|
|
featuredImage: 'https://placekitten.com/500/500',
|
|
images: [
|
|
'https://placekitten.com/500/500'
|
|
],
|
|
location: '1234 Dog Alley',
|
|
date: '11-21-2019',
|
|
time: '12:00'
|
|
}
|
|
],
|
|
event: {}
|
|
}
|
|
},
|
|
created () {
|
|
const ID = Number(this.$route.params.id);
|
|
let event = this.events.find(my_event => my_event.id === ID);
|
|
this.event = event;
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.event-single {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.hero {
|
|
margin-bottom: 70px;
|
|
}
|
|
|
|
.event-images {
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.description {
|
|
margin-bottom: 30px
|
|
}
|
|
</style>
|