Dhaverd/ New-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Поправил анимацию градиента на главной

This commit is contained in:
p.belezov 2024-04-18 13:40:40 +08:00
parent 38eef7ef01
commit 3eb8911bf8
4 changed files with 71 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
resources/friday.js Normal file
View File

@ -0,0 +1,18 @@
import './js/bootstrap';
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './views/Welcome.vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import '@mdi/font/css/materialdesignicons.css'
const pinia = createPinia();
const vuetify = createVuetify({
components,
directives
});
createApp(App).use(vuetify).use(pinia).mount("#app");

13
resources/views/Welcome.vue
View File

@ -24,4 +24,17 @@ export default {
height: 100vh; height: 100vh;
} }
@keyframes gradient {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
</style> </style>

27
resources/views/friday/Friday.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<v-app>
<v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
<Schedule/>
</v-sheet>
</v-app>
</template>
<script>
import Schedule from "./Schedule.vue";
export default {
name: "Welcome",
components: {Schedule}
}
</script>
<style scoped>
.bg-gradient {
background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
background-size: 200% 200%;
animation: gradient 15s ease infinite;
height: 100vh;
}
</style>

13
resources/views/friday/friday.blade.php Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Информация о трансляциях</title>
@vite('resources/welcome.js')
@vite('resources/css/app.css')
</head>
<body class="antialiased">
<div id="app"></div>
</body>
</html>