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

Начинаем писать дизайн

This commit is contained in:
p.belezov 2024-05-07 16:41:41 +08:00
parent 63cd63652a
commit 07c26791b7
5 changed files with 55 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -1,5 +1,5 @@
{ {
"name": "laravel-vue-vuetify-boilerplate", "name": "computer-journal",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {

42
resources/App.vue
View File

@ -1,16 +1,52 @@
<template> <template>
<v-app> <v-app>
<SomeTemplate></SomeTemplate> <v-sheet class="bg-gradient justify-center d-flex flex-column" style="height: 100%">
<v-sheet class="rounded-lg main-bg h-auto mt-10 mr-10 ml-10 mb-3 pa-5">
<p class="text-h3">Меню</p>
</v-sheet>
<v-sheet class="rounded-lg main-bg h-100 mt-3 mr-10 ml-10 mb-10 pa-5">
<Login></Login>
</v-sheet>
</v-sheet>
</v-app> </v-app>
</template> </template>
<script> <script>
import SomeTemplate from "./views/SomeTemplate.vue"; import Login from "./views/Login.vue";
export default { export default {
name: "App", name: "App",
components: {SomeTemplate} components: {Login}
} }
</script> </script>
<style scoped>
.main-bg {
background-color: #424242;
color: #e0e0e0;
text-decoration-color: #e0e0e0;
}
.bg-gradient {
background: linear-gradient(-45deg, #f103b0, #f0a068, #4fdbfeff);
background-size: 200% 200%;
animation: gradient 15s ease infinite;
height: 200vh;
}
@keyframes gradient {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
</style>

14
resources/views/Login.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<p class="text-h1">Hello world!</p>
</template>
<script>
export default {
name: "Login"
}
</script>
<style scoped>
</style>

42
resources/views/SomeTemplate.vue
View File

@ -1,42 +0,0 @@
<template>
<v-card class="bg-gradient" style="height: 100%">
<v-card-text class="d-flex justify-center align-center">
<v-card class="align-center justify-center h-auto w-33">
<v-card-title>{{ cardTitle }}</v-card-title>
</v-card>
</v-card-text>
</v-card>
</template>
<script>
export default {
name: "SomeTemplate",
data: () => ({
cardTitle: 'Hello world!',
})
}
</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>

2
resources/views/welcome.blade.php
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Boilerplate</title> <title>Журнал ТО</title>
@vite('resources/app.js') @vite('resources/app.js')
@vite('resources/css/app.css') @vite('resources/css/app.css')
</head> </head>