95 lines
2.2 KiB
Vue
95 lines
2.2 KiB
Vue
<template>
|
|
<section class="px-4">
|
|
<h2
|
|
v-if="main.title"
|
|
class="
|
|
lg:text-6xl
|
|
text-center
|
|
uppercase
|
|
mb-2
|
|
leading-none
|
|
font-bold font-heading
|
|
"
|
|
>
|
|
{{ main.title }}
|
|
</h2>
|
|
|
|
<article
|
|
class="flex my-20 text-center px-10 md:text-left flex-col md:flex-row"
|
|
v-for="conversation in conversations"
|
|
:key="conversation.id"
|
|
>
|
|
<div class="lg:w-1/3 mb-12">
|
|
<span class="block text-sm mb-1">{{ conversation.day }}</span>
|
|
<span
|
|
class="
|
|
block
|
|
text-xl
|
|
font-medium
|
|
uppercase
|
|
leading-6
|
|
text-gray-900
|
|
mb-1.5
|
|
"
|
|
>{{ conversation.month }}</span
|
|
><span class="block text-sm mb-1">{{ conversation.time }}</span>
|
|
</div>
|
|
<div class="lg:w-2/3">
|
|
<h3 class="mb-3 text-4xl font-medium uppercase leading-9">
|
|
{{ conversation.title }}
|
|
</h3>
|
|
<p class=""><b>Host:</b> {{ conversation.hosts }}</p>
|
|
<p class="mb-4"><b>Speakers:</b> {{ conversation.speakers }}</p>
|
|
<div
|
|
class="font-lg post-content leading-6"
|
|
v-html="conversation.content"
|
|
></div>
|
|
<a
|
|
v-if="conversation.link.includes('http')"
|
|
target="_blank"
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-5
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
:href="conversation.link"
|
|
>{{ conversation.button }}</a
|
|
>
|
|
<a
|
|
v-else
|
|
class="
|
|
inline-block
|
|
bg-white
|
|
text-lg
|
|
learn-button
|
|
hover:bg-gray-400
|
|
px-12
|
|
py-1
|
|
mr-5
|
|
my-5
|
|
border-2
|
|
shadow
|
|
border-black
|
|
"
|
|
:href="conversation.link"
|
|
>{{ conversation.button }}</a
|
|
>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ["id", "main", "conversations"],
|
|
};
|
|
</script> |