build grid for crash-game

This commit is contained in:
Kostya
2024-02-04 12:39:18 +03:00
parent 7ede91e437
commit d6ecad2554
2 changed files with 60 additions and 2 deletions

View File

@@ -73,6 +73,22 @@ body, html {
grid-gap: 10px; grid-gap: 10px;
} }
.grid-crash {
display: grid;
grid-template-columns: .35fr repeat(5, 1fr) 1fr;
grid-template-rows: auto 0fr repeat(4, 1fr);
grid-auto-columns: 1fr;
gap: 10px;
grid-auto-flow: row;
grid-template-areas:
"menu header header header header header header"
"menu crashgame crashgame crashgame crashgame crashgame chat"
"menu crashgame crashgame crashgame crashgame crashgame chat"
"menu crashgame crashgame crashgame crashgame crashgame chat"
"menu crashgame crashgame crashgame crashgame crashgame chat"
"menu crashplayers crashplayers crashplayers crashplayers crashplayers chat"
"menu crashplayers crashplayers crashplayers crashplayers crashplayers chat";
}
/* /Content Grid */ /* /Content Grid */
@@ -159,6 +175,20 @@ body, html {
/* /Saper */ /* /Saper */
/* Crash */
.crash-game {
grid-area: crashgame;
background: #8f07ff;
}
.crash-game__players {
background: #1900ff;
grid-area: crashplayers;
}
/* /Crash */
/* Media */ /* Media */
/* /Media */ /* /Media */

View File

@@ -1,11 +1,39 @@
<template> <template>
<div class="grid-crash">
<aside-bar-component></aside-bar-component>
<chat-component></chat-component>
<header-component></header-component>
<section class="crash-game">
<div class="crash-game__content">
<div class="crash-game__start-window">
</div>
<div class="crash-game__graph">
<crash-graph-component></crash-graph-component> <crash-graph-component></crash-graph-component>
</div>
</div>
</section>
<section class="crash-game__players">
<div class="crash-game-players__content">
</div>
</section>
</div>
</template> </template>
<script> <script>
import HeaderComponent from "@/components/HeaderComponent.vue";
import AsideBarComponent from "@/components/AsidebarComponent.vue";
import ChatComponent from "@/components/ChatComponent.vue";
import CrashGraphComponent from "@/components/games-components/CrashGraphComponent.vue"; import CrashGraphComponent from "@/components/games-components/CrashGraphComponent.vue";
export default { export default {
components: { CrashGraphComponent } components: { HeaderComponent, AsideBarComponent, ChatComponent, CrashGraphComponent }
} }
</script> </script>