upd template for saper-game, saperpage, added field for game

This commit is contained in:
Kostya
2023-12-04 22:44:38 +03:00
parent 0bcb077309
commit 85c88f22b2
2 changed files with 81 additions and 2 deletions

View File

@@ -17,6 +17,7 @@ input[type="number"]::-webkit-outer-spin-button {
} }
.saper { .saper {
display: flex;
padding-top: 10%; padding-top: 10%;
border-radius: 20px; border-radius: 20px;
background: #17181C; background: #17181C;
@@ -240,4 +241,44 @@ input[type="number"]::-webkit-outer-spin-button {
font-size: 12px; font-size: 12px;
padding: 6px 16px; padding: 6px 16px;
margin-right: 8px; margin-right: 8px;
} }
/* Saper Game */
.saper-game {
margin: -40px 0 0 75px;
}
.saper-game__content {
border-radius: 20px;
background: #22252F;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
width: 760px;
height: 577px;
}
.square {
border-radius: 10px;
background: #252C47;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
width: 95px;
height: 95px;
}
.display-lines {
display: flex;
}
.margin-lines .firstline {
margin-top: 26px;
}
.margin-lines {
padding-left: 26px;
}
.margin-lines li {
margin: 10px 10px 2px 0;
}
/* /Saper Game */

View File

@@ -53,7 +53,45 @@
</div> </div>
</div> </div>
<div class="saper-game"> <div class="saper-game">
<div class="saper-game__content">
<div class="game">
<div class="game-firstline">
<ul class="display-lines margin-lines">
<li class="firstline" v-for="index in 5" :key="index">
<div class="square"></div>
</li>
</ul>
</div>
<div class="game-default-line">
<ul class="display-lines margin-lines">
<li v-for="index in 5" :key="index">
<div class="square"></div>
</li>
</ul>
</div>
<div class="game-default-line">
<ul class="display-lines margin-lines">
<li v-for="index in 5" :key="index">
<div class="square"></div>
</li>
</ul>
</div>
<div class="game-default-line">
<ul class="display-lines margin-lines">
<li v-for="index in 5" :key="index">
<div class="square"></div>
</li>
</ul>
</div>
<div class="game-default-line">
<ul class="display-lines margin-lines">
<li v-for="index in 5" :key="index">
<div class="square"></div>
</li>
</ul>
</div>
</div>
</div>
</div> </div>
</section> </section>
</div> </div>