mirror of
https://github.com/yawaflua/LuckyDiamond.git
synced 2025-12-10 12:19:31 +02:00
changed template mobile, separation his on components header and menu
This commit is contained in:
Kostya
@@ -0,0 +1,64 @@
|
|||||||
|
/* Header */
|
||||||
|
|
||||||
|
.header-mobile {
|
||||||
|
grid-area: header-mobile;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: #17181C;
|
||||||
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
||||||
|
height: 45%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-mobile__content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-mobile__logo {
|
||||||
|
padding: 6% 0 2.5% 4%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-mobile__logo img {
|
||||||
|
width: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-mobile__balance--content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-mobile__card {
|
||||||
|
border-radius: 7px;
|
||||||
|
background: #22252F;
|
||||||
|
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-display h2 {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
padding: 8% 15px 8% 7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-img img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-text {
|
||||||
|
color: #FFF;
|
||||||
|
font-weight: 700;
|
||||||
|
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||||
|
font-family: Montserrat Alternates;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-card img {
|
||||||
|
width: 90%;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-card__margin {
|
||||||
|
margin-left: -8%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* /Header */
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
/* Footer */
|
||||||
|
|
||||||
|
.footer-mobile {
|
||||||
|
grid-area: footer-mobile;
|
||||||
|
width: 100%;
|
||||||
|
height: 10%;
|
||||||
|
background: #17181C;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-mobile__content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 2%;
|
||||||
|
}
|
||||||
|
.chat-icon a,
|
||||||
|
.home-icon a,
|
||||||
|
.settings-icon a {
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-icon a img {
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-icon a img {
|
||||||
|
width: 75px;
|
||||||
|
height: 75px;
|
||||||
|
padding: 9px 0 0 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-mobile__block a {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 90%;
|
||||||
|
height: 4em;
|
||||||
|
background: #D9D9D91F;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin: 0 .8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* /Footer */
|
||||||
@@ -16,86 +16,12 @@ body {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-mobile {
|
|
||||||
grid-area: header-mobile;
|
|
||||||
border-radius: 20px;
|
|
||||||
background: #17181C;
|
|
||||||
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
||||||
height: 45%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-mobile {
|
.main-mobile {
|
||||||
grid-area: main-mobile;
|
grid-area: main-mobile;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-mobile {
|
|
||||||
grid-area: footer-mobile;
|
|
||||||
width: 100%;
|
|
||||||
height: 10%;
|
|
||||||
background: #17181C;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Header */
|
|
||||||
|
|
||||||
.header-mobile__content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-mobile__logo {
|
|
||||||
padding: 6% 0 2.5% 4%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-mobile__logo img {
|
|
||||||
width: 85%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-mobile__balance--content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-mobile__card {
|
|
||||||
border-radius: 7px;
|
|
||||||
background: #22252F;
|
|
||||||
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-display h2 {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-end;
|
|
||||||
padding: 8% 15px 8% 7%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-img img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-text {
|
|
||||||
color: #FFF;
|
|
||||||
font-weight: 700;
|
|
||||||
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
|
||||||
font-family: Montserrat Alternates;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-card img {
|
|
||||||
width: 90%;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-card__margin {
|
|
||||||
margin-left: -8%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* /Header */
|
|
||||||
|
|
||||||
/* Main */
|
/* Main */
|
||||||
|
|
||||||
.main-mobile__content {
|
.main-mobile__content {
|
||||||
@@ -168,41 +94,3 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* /Main */
|
/* /Main */
|
||||||
|
|
||||||
/* Footer */
|
|
||||||
|
|
||||||
.footer-mobile__content {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 2%;
|
|
||||||
}
|
|
||||||
.chat-icon a,
|
|
||||||
.home-icon a,
|
|
||||||
.settings-icon a {
|
|
||||||
background: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-icon a img {
|
|
||||||
padding-left: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-icon a img {
|
|
||||||
width: 75px;
|
|
||||||
height: 75px;
|
|
||||||
padding: 9px 0 0 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-mobile__block a {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 90%;
|
|
||||||
height: 4em;
|
|
||||||
background: #D9D9D91F;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin: 0 .8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* /Footer */
|
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
<template>
|
||||||
|
<header class="header-mobile">
|
||||||
|
<div class="header-mobile__content">
|
||||||
|
<div class="header-mobile__logo">
|
||||||
|
<img src="@/assets/icons-adaptive/home-adaptive/logo.svg" alt="LuckyDiamond Play Now">
|
||||||
|
</div>
|
||||||
|
<div class="header-mobile__balance">
|
||||||
|
<div class="header-mobile__balance--content">
|
||||||
|
<div class="header-mobile__card card-display card-text card-img">
|
||||||
|
<h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2>
|
||||||
|
</div>
|
||||||
|
<div class="header-mobile__btn--balance btn-card btn-card__margin">
|
||||||
|
<a href="#"><img src="@/assets/icons-adaptive/home-adaptive/icon-deposit.png"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import '@/assets/css/ComponentsStyles/AdaptiveStyles/headermobile.css'
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
<template>
|
||||||
|
<footer class="footer-mobile">
|
||||||
|
<div class="footer-mobile__content">
|
||||||
|
<div class="footer-mobile__block chat-icon">
|
||||||
|
<a href="#">
|
||||||
|
<img src="@/assets/icons-adaptive/home-adaptive/icon-chat.svg">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="footer-mobile__block home-icon">
|
||||||
|
<a href="#" @click="$router.push({ name: 'home' })">
|
||||||
|
<img src="@/assets/icons-adaptive/home-adaptive/icon-home.svg">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="footer-mobile__block settings-icon">
|
||||||
|
<a href="#">
|
||||||
|
<img width="" src="@/assets/icons-adaptive/home-adaptive/icon-settings.png">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import '@/assets/css/ComponentsStyles/AdaptiveStyles/menumobile.css'
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -1,23 +1,7 @@
|
|||||||
<link rel="stylesheet" href="../../assets/css/PagesStyles/adaptive-pages/homemobile.css">
|
<link rel="stylesheet" href="../../assets/css/PagesStyles/adaptive-pages/homemobile.css">
|
||||||
<template>
|
<template>
|
||||||
<div class="content-grid__mobile-home">
|
<div class="content-grid__mobile-home">
|
||||||
<header class="header-mobile">
|
<header-mobile-component></header-mobile-component>
|
||||||
<div class="header-mobile__content">
|
|
||||||
<div class="header-mobile__logo">
|
|
||||||
<img src="@/assets/icons-adaptive/home-adaptive/logo.svg" alt="LuckyDiamond Play Now">
|
|
||||||
</div>
|
|
||||||
<div class="header-mobile__balance">
|
|
||||||
<div class="header-mobile__balance--content">
|
|
||||||
<div class="header-mobile__card card-display card-text card-img">
|
|
||||||
<h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2>
|
|
||||||
</div>
|
|
||||||
<div class="header-mobile__btn--balance btn-card btn-card__margin">
|
|
||||||
<a href="#"><img src="@/assets/icons-adaptive/home-adaptive/icon-deposit.png"></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<main class="main-mobile">
|
<main class="main-mobile">
|
||||||
<div class="main-mobile__content">
|
<div class="main-mobile__content">
|
||||||
<div class="main-mobile__first-line">
|
<div class="main-mobile__first-line">
|
||||||
@@ -38,25 +22,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<footer class="footer-mobile">
|
<menu-mobile-component></menu-mobile-component>
|
||||||
<div class="footer-mobile__content">
|
|
||||||
<div class="footer-mobile__block chat-icon">
|
|
||||||
<a href="#">
|
|
||||||
<img src="@/assets/icons-adaptive/home-adaptive/icon-chat.svg">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="footer-mobile__block home-icon">
|
|
||||||
<a href="#" @click="$router.push({ name: 'home' })">
|
|
||||||
<img src="@/assets/icons-adaptive/home-adaptive/icon-home.svg">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="footer-mobile__block settings-icon">
|
|
||||||
<a href="#">
|
|
||||||
<img width="" src="@/assets/icons-adaptive/home-adaptive/icon-settings.png">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -65,7 +31,11 @@ import '@/assets/css/PagesStyles/adaptive-pages/homemobile.css'
|
|||||||
import '@/mocks/GameModes'
|
import '@/mocks/GameModes'
|
||||||
import GameModes from "@/mocks/GameModes";
|
import GameModes from "@/mocks/GameModes";
|
||||||
|
|
||||||
|
import HeaderMobileComponent from "@/components/adaptive-components/HeaderMobileComponent.vue";
|
||||||
|
import MenuMobileComponent from "@/components/adaptive-components/MenuMobileComponent.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: { HeaderMobileComponent, MenuMobileComponent },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
GameModes
|
GameModes
|
||||||
|
|||||||
Reference in New Issue
Block a user