New-site/resources/views/Schedule.vue

60 lines
1.4 KiB
Vue

<template>
<v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
<v-sheet class="mt-5 mb-5 rounded-lg w-75">
<p class="text-h3 ma-5">Расписание стримов</p>
<p class="ma-5 text-h4">{{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
<ScheduleTable></ScheduleTable>
<p class="text-h3 ma-5">Ссылочки</p>
<Links></Links>
</v-sheet>
</v-sheet>
</template>
<script>
import axios from "axios";
import ScheduleTable from "./Schedule/ScheduleTable.vue";
import Links from "./Schedule/Links.vue";
export default {
name: "Schedule",
components: {Links, ScheduleTable},
data: () => ({
dates: []
}),
methods: {
parseDate(date){
let dateArr = date.split("-");
return dateArr[2] + "." + dateArr[1];
}
},
mounted() {
axios
.get('/api/v1/dates')
.then(response => (this.dates = response.data));
}
}
</script>
<style scoped>
.bg-gradient {
background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
background-size: 200% 200%;
animation: gradient 15s ease infinite;
height: 100vh;
}
@keyframes gradient {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
</style>