Merge pull request #6 from danilt2000/DevelopMadara

refactor SettingsPage

luckydiamond/src/assets/css/ComponentsStyles/DevelopComponent.css

@@ -0,0 +1,8 @@
+.card {
+    width: 422px;
+    height: 269px;
+    flex-shrink: 0;
+    border-radius: 22px;
+    background-color: #742271;
+
+}

luckydiamond/src/assets/css/PagesStyles/SettingsPage.css

@@ -0,0 +1,9 @@
+.settings {
+    display: flex;
+    grid-area: profile;
+    height: 95%;
+    border-radius: 50px;
+    background: #17181C;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    margin: 10px 39px 18px 13px;
+}

luckydiamond/src/components/AsidebarComponent.vue

@@ -13,25 +13,20 @@
         </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="$router.push({ name: 'settings' })" href="#"><img width="73" height="73" src="../assets/icons-menu/settings-icon.svg"></a>
       </div>
     </div>
   </aside>
+  
 </template>
 
 
 <script>
 // import NotiicationwindowComponent from "@/components/NotiicationwindowComponent.vue";
 import '@/assets/css/ComponentsStyles/asidebar.css'
-
 export default {
   name: 'AsideBar-Element',
-  // components: { NotiicationwindowComponent },
-  data() {
-    return {
-      AnimationOff: false
-    }
-  },
+ 
   // emits: ['animationchange'],
   methods: {
     ChangeAnimation() {

luckydiamond/src/components/DevelopComponent.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="info">
+        <div class="card">
+
+        </div>
+    </div>
+</template>
+
+<script>
+import '@/assets/css/ComponentsStyles/DevelopComponent.css'
+
+export default {
+
+}
+</script>

luckydiamond/src/components/HeaderComponent.vue

@@ -127,6 +127,7 @@ export default {
           <a href="#" @click="$router.push({ name: 'home' })" :class="{ 'header__nav--now' : $route.name === 'home' }">Главная</a>
           <a v-if="authtoken !== ''" href="#" @click="$router.push({ name: 'profile' })" :class="{ 'header__nav--now' : $route.name === 'profile' }">Профиль</a>
           <a href="#">Помощь</a>
+          <a href="#" @click="$router.push({ name: 'about' })" :class="{ 'header__nav--now' : $route.name === 'about' }">О нас</a>
         </nav>
       </div>
       <div class="header__balance">

luckydiamond/src/pages/AboutPage.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="content__grid-profile" >
+        <aside-bar-component></aside-bar-component>
+    
+        
+    
+        <header-component></header-component>
+
+        <develop-component></develop-component>
+      </div>
+</template>
+<script>
+import DevelopComponent from "@/components/DevelopComponent.vue";
+import AsideBarComponent from "@/components/AsidebarComponent.vue";
+import HeaderComponent from "@/components/HeaderComponent.vue";
+
+export default {
+    data () {
+        return {
+           Object: {
+            bg:'value',
+            nickname: 'value',
+            icons: {},
+            textTacholgy: {'text1': 'text2'}
+           }
+        }
+    }, 
+    components: {
+    HeaderComponent,
+    AsideBarComponent,
+    DevelopComponent    
+    }
+}
+
+</script>

luckydiamond/src/pages/SettingsPage.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class="content__grid-profile" >
+      <aside-bar-component></aside-bar-component>
+  
+      <chat-component></chat-component>
+  
+      <header-component></header-component>
+  
+    <section class="settings"></section>
+      
+    </div>
+  </template>
+  
+  <script>
+  import AsideBarComponent from "@/components/AsidebarComponent.vue";
+  import ChatComponent from "@/components/ChatComponent.vue";
+  import HeaderComponent from "@/components/HeaderComponent.vue";
+
+  import '@/assets/css/PagesStyles/SettingsPage.css'
+  export default {
+    components: {
+    ChatComponent,
+    HeaderComponent,
+    AsideBarComponent
+  }
+
+  }
+  </script>

luckydiamond/src/router/router.js

@@ -3,12 +3,15 @@ import { createRouter, createWebHistory } from "vue-router";
 import HomePage from "../pages/HomePage.vue";
 import ProfilePage from "@/pages/ProfilePage.vue";
 import SapergamePage from "@/pages/games-pages/SapergamePage.vue";
-
+import SettingsPage from "@/pages/SettingsPage.vue"
+import AboutPage from "@/pages/AboutPage.vue"
 export default createRouter({
     history: createWebHistory(),
     routes: [
         { path: '/', component: HomePage, name: 'home' },
         { path: '/profile', component: ProfilePage, name: 'profile' },
-        { path: '/game/saper', component: SapergamePage, name: 'saper' }
+        { path: '/game/saper', component: SapergamePage, name: 'saper' },
+        { path: '/settings', component: SettingsPage, name: 'settings' },
+        { path: '/about', component: AboutPage, name: 'about' },
     ]
-})
+})