Начинаем писать дизайн
This commit is contained in:
parent
63cd63652a
commit
07c26791b7
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "laravel-vue-vuetify-boilerplate",
|
||||
"name": "computer-journal",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
|
|
|
@ -1,16 +1,52 @@
|
|||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SomeTemplate from "./views/SomeTemplate.vue";
|
||||
import Login from "./views/Login.vue";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {SomeTemplate}
|
||||
components: {Login}
|
||||
}
|
||||
</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>
|
||||
|
||||
|
||||
|
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<p class="text-h1">Hello world!</p>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Login"
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
|
@ -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>
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Boilerplate</title>
|
||||
<title>Журнал ТО</title>
|
||||
@vite('resources/app.js')
|
||||
@vite('resources/css/app.css')
|
||||
</head>
|
||||
|
|
Loading…
Reference in New Issue