mirror of
https://github.com/yawaflua/LuckyDiamond.git
synced 2025-12-10 12:19:31 +02:00
Merge branch 'DevelopMadara' of https://github.com/danilt2000/LuckyDiamond into DevelopMadara
This commit is contained in:
Kostya
213
luckydiamond/src/assets/css/PagesStyles/SettingsPage.css
Normal file
213
luckydiamond/src/assets/css/PagesStyles/SettingsPage.css
Normal file
@@ -0,0 +1,213 @@
|
||||
.profile__content {
|
||||
width: 30%;
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
||||
|
||||
.icon-diamond h2 img {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
.deposit-icon {
|
||||
margin: 3px 0 0 10px;
|
||||
}
|
||||
|
||||
.withdraw-icon {
|
||||
margin-left: 33px;
|
||||
}
|
||||
|
||||
.btn-bg {
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.btn-margin {
|
||||
padding: 3.8% 46% 3% 14%;
|
||||
margin-bottom: 11px;
|
||||
background: #62D4B2;
|
||||
}
|
||||
|
||||
.btn-display {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.text-btn {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
font-family: Montserrat Alternates;
|
||||
font-size: 18px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.icon-margin-deposit-withdraw {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.withdraw {
|
||||
padding: 3.8% 46% 3% 14%;
|
||||
background: #EF4444;
|
||||
}
|
||||
|
||||
|
||||
.payments {
|
||||
margin: 2% 0 0 -4.25%;
|
||||
}
|
||||
|
||||
.types {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.types-margin h3 {
|
||||
margin-right: 7.813em;
|
||||
}
|
||||
|
||||
.types-text h3 {
|
||||
color: #ABABB4;
|
||||
font-weight: 600;
|
||||
font-family: Montserrat;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.types-line {
|
||||
margin-top: 2.1%;
|
||||
background: #38383E;
|
||||
width: 86%;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.payments__card {
|
||||
margin-top: 4.9%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 0.625em;
|
||||
}
|
||||
|
||||
.user-name__text h3 {
|
||||
color: #FFF;
|
||||
font-weight: 700;
|
||||
font-family: Montserrat;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.user-name__text p {
|
||||
color: #A9A9A9;
|
||||
font-weight: 400;
|
||||
font-family: Montserrat;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.data-info {
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.data-info__text h3 {
|
||||
color: #A9A9A9;
|
||||
font-weight: 400;
|
||||
font-family: Montserrat;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.transaction-info {
|
||||
margin-left: 7%;
|
||||
}
|
||||
|
||||
.transaction-info__text h3 {
|
||||
font-weight: 500;
|
||||
font-family: Montserrat;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.deposit-color h3 {
|
||||
color: #32C966;
|
||||
}
|
||||
|
||||
.withdraw-color h3 {
|
||||
color: #EA3D38;
|
||||
}
|
||||
|
||||
.error-deposit {
|
||||
position: absolute;
|
||||
left: 190px;
|
||||
top: 52px;
|
||||
}
|
||||
|
||||
.error-deposit h2 {
|
||||
color: #BA3636;
|
||||
font-family: "Montserrat Alternates";
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.error-card {
|
||||
position: absolute;
|
||||
top: 130px;
|
||||
left: 210px;
|
||||
}
|
||||
|
||||
.error-card h2 {
|
||||
color: #BA3636;
|
||||
font-family: "Montserrat Alternates";
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.error-checkbox h2 {
|
||||
color: #BA3636;
|
||||
font-family: "Montserrat Alternates";
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.error-captcha {
|
||||
top: 235px;
|
||||
left: 45px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.error-captcha h2 {
|
||||
color: #BA3636;
|
||||
font-family: "Montserrat Alternates";
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Media */
|
||||
|
||||
@media screen and (min-device-width: 1400px) and (max-device-width: 1600px) {
|
||||
.profile__card h2 {
|
||||
width: 72%;
|
||||
}
|
||||
.btn-margin {
|
||||
padding-right: 56%;
|
||||
}
|
||||
.withdraw {
|
||||
padding-right: 56%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-device-width: 1200px) and (max-device-width: 1399px) {
|
||||
.profile__card h2 {
|
||||
width: 80%;
|
||||
}
|
||||
.btn-margin {
|
||||
padding-right: 66%;
|
||||
}
|
||||
.withdraw {
|
||||
padding-right: 66%;
|
||||
}
|
||||
}
|
||||
|
||||
/* /Media */
|
||||
@@ -2,7 +2,7 @@
|
||||
<aside class="menu">
|
||||
<div class="menu__content">
|
||||
<div class="menu__btn--home">
|
||||
<a href="#" @click="$router.push({ name: 'home' })"><img width="73" height="73" src="../assets/icons-menu/home-icon.svg"></a>
|
||||
<a href="" @click="$router.push({ name: 'home' })"><img width="73" height="73" src="../assets/icons-menu/home-icon.svg"></a>
|
||||
</div>
|
||||
<div class="menu__btns--gamemodes">
|
||||
<div class="menu__content--gamemodes">
|
||||
@@ -13,23 +13,26 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu__btn--settings">
|
||||
<a @click="ChangeAnimation" href="#"><img width="73" height="73" src="../assets/icons-menu/settings-icon.svg"></a>
|
||||
<a @click="SettingsPage=!SettingsPage" href="#"><img width="73" height="73" src="../assets/icons-menu/settings-icon.svg"></a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<SettingsPage></SettingsPage>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
// import NotiicationwindowComponent from "@/components/NotiicationwindowComponent.vue";
|
||||
import '@/assets/css/ComponentsStyles/asidebar.css'
|
||||
|
||||
import {
|
||||
SettingsPage
|
||||
} from "@/pages/SettingsPage.vue"
|
||||
export default {
|
||||
name: 'AsideBar-Element',
|
||||
// components: { NotiicationwindowComponent },
|
||||
components: { SettingsPage },
|
||||
data() {
|
||||
return {
|
||||
AnimationOff: false
|
||||
SettingsPage: false
|
||||
}
|
||||
},
|
||||
// emits: ['animationchange'],
|
||||
|
||||
114
luckydiamond/src/pages/SettingsPage.vue
Normal file
114
luckydiamond/src/pages/SettingsPage.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<profilemobile-page v-if="mobile"></profilemobile-page>
|
||||
<div class="content__grid-profile" v-else>
|
||||
<aside-bar-component></aside-bar-component>
|
||||
|
||||
<chat-component></chat-component>
|
||||
|
||||
<header-component></header-component>
|
||||
|
||||
<section class="profile">
|
||||
<div class="profile__content">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<payments-modal v-if="openModal" @notifacetionmoney="NotificationEventListener" @closemodal="openModal = false" :payments="payments"></payments-modal>
|
||||
<notiicationwindow-component @notificationremove="NotificationMethod" :notification="notification"></notiicationwindow-component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AsideBarComponent from "@/components/AsidebarComponent.vue";
|
||||
import ChatComponent from "@/components/ChatComponent.vue";
|
||||
import HeaderComponent from "@/components/HeaderComponent.vue";
|
||||
import PaymentsModal from "@/components/PaymentsModal.vue";
|
||||
import ProfilemobilePage from "@/pages/adaptive-pages/ProfilemobilePage.vue";
|
||||
import NotiicationwindowComponent from "@/components/NotiicationwindowComponent.vue";
|
||||
|
||||
import { GetCookie } from "@/assets/js/storage/CookieStorage";
|
||||
import '@/assets/css/PagesStyles/SettingsPage.css'
|
||||
import {GetCurrentMoney} from "@/assets/js/rest/RestMethods";
|
||||
|
||||
export default {
|
||||
components: {ProfilemobilePage, HeaderComponent, AsideBarComponent, ChatComponent, PaymentsModal, NotiicationwindowComponent },
|
||||
data() {
|
||||
return {
|
||||
username: 'Artemka',
|
||||
imageUrl: '',
|
||||
notification: false,
|
||||
balance: 0,
|
||||
mobile: false,
|
||||
openModal: false,
|
||||
payments: true,
|
||||
arrayHistory: [],
|
||||
}
|
||||
},
|
||||
emits: ['notificationremove'],
|
||||
mounted() {
|
||||
this.checkWindowSize()
|
||||
|
||||
this.AddWindowListener()
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.RemoveWindowListener()
|
||||
},
|
||||
created() {
|
||||
this.username = GetCookie('SpUserName')
|
||||
|
||||
GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
|
||||
.then((response) => {
|
||||
this.balance = response.currentMoney
|
||||
console.log('balance in profile', this.balance)
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('error in profile, get money', error)
|
||||
})
|
||||
|
||||
this.imageUrl = `https://avatar.spworlds.ru/front/256/${this.username}`
|
||||
},
|
||||
methods: {
|
||||
depositClick() {
|
||||
this.openModal = true
|
||||
this.payments = true
|
||||
},
|
||||
withdrawClick() {
|
||||
this.openModal = true
|
||||
this.payments = false
|
||||
},
|
||||
NotificationEventListener() {
|
||||
this.notification = true
|
||||
this.openModal = false
|
||||
},
|
||||
NotificationMethod() {
|
||||
this.notification = false
|
||||
}
|
||||
// formatNumber(number) {
|
||||
// return number < 10 ? `0${number}` : number;
|
||||
// },
|
||||
// getCurrentFormattedDate() {
|
||||
// const currentDate = new Date();
|
||||
// return `${this.formatNumber(currentDate.getDate())}.${this.formatNumber(currentDate.getMonth() + 1)}.${currentDate.getFullYear()}, ${this.formatNumber(currentDate.getHours())}:${this.formatNumber(currentDate.getMinutes())}`;
|
||||
// },
|
||||
// claimDataDeposit(amount) {
|
||||
// const historyPayments = {
|
||||
// name: 'TEST USER',
|
||||
// comment: 'test',
|
||||
// data: this.getCurrentFormattedDate(),
|
||||
// amount: amount
|
||||
// }
|
||||
//
|
||||
// this.arrayHistory.unshift(historyPayments)
|
||||
// },
|
||||
// claimDataWithdraw(amount) {
|
||||
// const historyPayments = {
|
||||
// name: 'TEST USER',
|
||||
// comment: 'test',
|
||||
// data: this.getCurrentFormattedDate(),
|
||||
// amount: -amount
|
||||
// }
|
||||
//
|
||||
// this.arrayHistory.unshift(historyPayments)
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user