Начинаем писать дизайн
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