правила

src/App.vue

@@ -11,9 +11,11 @@ import 'vue-material/dist/vue-material.min.css'
 
 import MdTabs from "vue-material/dist/components/MdTabs";
 import MdIcon from "vue-material/dist/components/MdIcon";
+import MdCard from "vue-material/dist/components/MdCard";
 
 Vue.use(MdTabs);
 Vue.use(MdIcon);
+Vue.use(MdCard)
 
 import TabsMenu from "@/components/TabsMenu.vue";
 export default {
@@ -91,13 +93,13 @@ a {
 }
 
 .rounded-and-colored {
-  border-radius: 20px;
+  border-radius: 10px;
   border: 2px solid black;
   background: #fd8846;
 }
 
 .rounded-and-colored-without-bottom {
-  border-radius: 20px;
+  border-radius: 10px;
   border-top: 2px solid black;
   border-left: 2px solid black;
   border-right: 2px solid black;
@@ -106,7 +108,7 @@ a {
 }
 
 .rounded-only {
-  border-radius: 20px;
+  border-radius: 10px;
   border: 1px solid black;
   background: #e0eddd;
 }

src/components/PublicMethods.js

@@ -46,5 +46,15 @@ export default {
             .catch(err => {
                 console.log(`[PublicMethods] cannot request api/stats/statistic, err: ${err}`);
             })
+    },
+    getRules(){
+        return [
+        [{"name":"Читы", "about":"Бан навсегда сука", "image": require('@/assets/images/rules/cheats.jpg')},
+        {"name":"Реклама серверов", "about":"Кроме мге, бан навсегда сука", "image": require('@/assets/images/rules/ads.jpg')},
+        {"name":"Багоюз", "about":"Пиздец тебе, бан навсегда", "image": require('@/assets/images/rules/bug_use.jpg')}],
+        [{"name":"Абуз команды !mir", "about":"Блокировка дверей, открытие спавна и т.д", "image":require('@/assets/images/rules/abuse.jpg')},
+        {"name":"Абуз випки на сервере", "about":"Модеры сам решат как и за что", "image":require('@/assets/images/rules/abuse_vip.jpg')},
+        {"name":"Делай короче чё хочешь", "about":":troll_face:", "image":require('@/assets/images/rules/make_everyone.jpg')}]
+        ];
     }
 }

src/components/TabsMenu.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import RulesView from "@/components/TabsMenuElements/RulesView.vue";
+import RulesView from "@/components/TabsMenuElements/RulesView/RulesView.vue";
 import ServersView from "@/components/TabsMenuElements/ServersView.vue";
 import ProfileView from "@/components/TabsMenuElements/ProfileView.vue";
 import VipView from "@/components/TabsMenuElements/VipView.vue";

src/components/TabsMenuElements/RulesView.vue

@@ -1,11 +0,0 @@
-<template>
-  <md-tab id="rulesView" md-label="Правила">
-    <p>rules</p>
-  </md-tab>
-</template>
-
-<script>
-export default {
-  name: 'RulesView'
-}
-</script>

src/components/TabsMenuElements/RulesView/Components/RuleCard.vue

@@ -0,0 +1,55 @@
+<template>
+  <div :class="ifItem()">
+    <md-card>
+      <md-card-media-cover md-solid>
+        <md-card-media md-ratio="1:1">
+          <img :src="getImg()" :alt="this.title_text">
+        </md-card-media>
+        <md-card-area>
+          <md-card-header>
+            <span class="md-title" style="text-align: right; font-family: tf2build; border-bottom: 1px solid">{{this.title_text}}</span>
+            <span class="md-subhead" style="text-align: right; font-family: tf2secondary">{{this.main_text}}</span>
+          </md-card-header>
+        </md-card-area>
+      </md-card-media-cover>
+    </md-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RuleCard',
+  props: {
+    img_src: String,
+    title_text: String,
+    main_text: String,
+    md_size: Number,
+    box_in_item:Boolean
+  },
+  methods: {
+    ifItem() {
+      return this.box_in_item?`md-layout-item md-size-${this.md_size}`:'';
+    },
+    getImg() {
+      return this.img_src;
+    }
+  }
+}
+</script>
+
+<style>
+.md-card {
+  border-radius: 15px;
+  margin: 7% 0%;
+}
+
+.md-card-media {
+  border-radius: 15px;
+}
+
+.md-card-area {
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.9)) !important;
+  border-bottom-left-radius: 15px;
+  border-bottom-right-radius: 15px;
+}
+</style>

src/components/TabsMenuElements/RulesView/RulesView.vue

@@ -0,0 +1,51 @@
+<template>
+  <md-tab id="rulesView" md-label="Правила">
+    <BackgroundImage/>
+    <div class="md-layout md-alignment-bottom-center">
+      <CharacterImage :size="10" :img_src="require(`@/assets/images/characters/pootisd.png`)" :audio_src="require(`@/assets/sounds/pootis.mp3`)"/>
+    </div>
+    <div class="md-layout md-alignment-bottom-center">
+      <div class="md-layout-item md-size-40 md-alignment-bottom-center rounded-and-colored-without-bottom">
+        <h3 style="text-align: center; margin: 2% 0%">Правила (для сам маленьких)</h3>
+      </div>
+    </div>
+    <div class="md-layout md-alignment-bottom-center" style="padding-top: 1%">
+      <div class="md-layout-item md-size-60 md-alignment-bottom-center rounded-only">
+        <h4 style="text-align: center">Правила на которые ты забьешь хуй</h4>
+        <h4 style="text-align: center">V V V</h4>
+        <hr>
+        <div class="md-layout md-alignment-bottom-center">
+          <div class="md-layout-item md-size-100 md-alignment-bottom-center">
+            <div class="md-layout md-alignment-bottom-center md-gutter">
+              <div class="md-layout-item md-size-5"/>
+              <RuleCard v-for="item in this.rules[0]" :key="item" :img_src="item['image']" :box_in_item="true" :md_size="30" :title_text="item['name']" :main_text="item['about']"/>
+              <div class="md-layout-item md-size-5"/>
+              <div class="md-layout-item md-size-5"/>
+              <RuleCard v-for="item in this.rules[1]" :key="item" :img_src="item['image']" :box_in_item="true" :md_size="30" :title_text="item['name']" :main_text="item['about']"/>
+              <div class="md-layout-item md-size-5"/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </md-tab>
+</template>
+
+<script>
+import BackgroundImage from "@/components/Others/BackgroundImage.vue";
+import CharacterImage from "@/components/Others/CharacterImage.vue";
+import RuleCard from "@/components/TabsMenuElements/RulesView/Components/RuleCard.vue";
+import PublicMethods from "@/components/PublicMethods";
+
+export default {
+  name: 'RulesView',
+  components: {RuleCard, BackgroundImage, CharacterImage},
+  data: () => ({
+    rules: Object
+  }),
+  beforeMount() {
+    this.rules = PublicMethods.getRules();
+  }
+}
+</script>