Add section about device

src/Main.vue

@@ -2,7 +2,7 @@
 	<div id="app">
 			<full-page ref="fullpage" :options="options" id="fullpage">
 
-				<div class="section">
+				<!-- <div class="section">
 					<div v-if="!mobile">
 						<ololo :item="item"  @move="move" />
 
@@ -130,6 +130,21 @@
 						</div>
 						
 					</div>
+				</div> -->
+				<div class="section">
+					<div class="col-sm-12 col-md-12 col-lg-10" id="equipment">
+						<div class="about object">
+							<p v-for="tab in tabs"
+								v-bind:key="tab.value"
+								v-bind:class="['tab-button', { active: currentTab === tab }]"
+								v-on:click="currentTab = tab.value"> {{tab.name}} </p>
+						</div>
+						<div class="about info">
+							<transition name="component-year" mode="out-in">
+								<objectsComp :nameComp="currentTab" />
+							</transition>
+						</div>
+					</div>
 				</div>
 			</full-page>
 	</div>
@@ -304,16 +319,44 @@ div#logo img{
 	width: 100%;
 	object-fit: cover;
 }
+#equipment{
+	margin-top: 2em;
+	/* height: 100%; */
+}
+#equipment .about{
+	display: inline-block;
+    vertical-align: middle;
+	height: 100%;
+}
+#equipment .object{
+	width: 10%;
+	color: white;
+}
+#equipment .object p{
+	border-radius: 7px;
+	padding: 13px;
+	margin: 3px;
+	background-color: chartreuse;
+}
+#equipment .info{
+    overflow-y: scroll;
+    max-height: 69vh;
+	width: 89%;
+	
+}
 </style>
 <script>
+						/* <component is="ololo" ></component> */
 
 import ololo from './svgMain.vue';
+import objectsComp from './comp.vue';
 
 
 export default {
 	name: 'app',
 	components: {
 		ololo,
+		objectsComp,
 	},
 	data () {
 		return {
@@ -338,13 +381,28 @@ export default {
 				{id: 'Milkovo', name: "Мильково, Камчатский кр.", obj: "Телескоп - ORI-22 (22 см)"},
 				{id: 'Brazil', name: "Бразилия, Южная Америка", obj: "Телескоп - ORI-22 (22 см)"},
 			],
-			window: {
-				width: window.innerWidth,
-				height: window.innerHeight
-			}
+			currentTab: '19',
+			tabs:[
+				{name: 'МОЭС-19', value: '19' },
+				{name: 'МОЭС-25', value: '25' },
+				{name: 'МОЭС-30', value: '30' },
+				{name: 'МОЭС-40', value: '40' },
+				{name: 'МОЭС-50', value: '50' },
+				{name: 'МОЭС-65', value: '65' },
+				{name: 'Павильон укрытие ПУ-30', value: 'PU30' },
+				{name: 'Павильон укрытие ПУЭО-М', value: 'PUEO-M' },
+				{name: 'Фотоприемыное устройство', value: 'PD' },
+				{name: 'Опорно-поворотное устройство', value: 'SRD' },
+			]
 			
 		}
 	},
+	computed: {
+		currentTabComponent: function () {
+			console.log(this.currentTab);
+			return this.currentTab
+		}
+	},
 	created: function (){
         this.Before();
     },
@@ -360,62 +418,6 @@ export default {
 			this.$parent.first = destination.isFirst;
 			
 		},
-		mouseOver: function(id){
-			this.window.width = window.innerWidth;
-			if (this.window.width<1399){
-
-				this.desc = this.telescope[id];
-			}else{
-				switch(id){
-					case 0:
-						this.Kislovodsk = true;
-						break;
-					case 1:
-						this.Lesosibirsk = true;
-						break;
-					case 2:
-						this.Artem = true;
-						break;
-					case 3:
-						this.Blagoveshensk = true;
-						break;
-					case 4:
-						this.Milkovo = true;
-						break;
-					case 5:
-						this.Brazil = true;
-						break;
-				}
-			}
-		},
-		mouseLeave: function(id){
-			this.window.width = window.innerWidth;
-			if (this.window.width<1399){
-				this.desc = '';
-				
-			}else{
-				switch(id){
-					case 0:
-						this.Kislovodsk = false;
-						break;
-					case 1:
-						this.Lesosibirsk = false;
-						break;
-					case 2:
-						this.Artem = false;
-						break;
-					case 3:
-						this.Blagoveshensk = false;
-						break;
-					case 4:
-						this.Milkovo = false;
-						break;
-					case 5:
-						this.Brazil = false;
-						break;
-				}
-			}
-		},
 	}
 }
 </script>
\ No newline at end of file

src/comp.vue

+<template>
+	<div id="information">
+		<div id="nineteen" v-if="nameComp=='19'">
+			<h1 >19</h1>
+			<h1 >19</h1>
+			<h1 >19</h1>
+			<h1 >19</h1>
+		</div>
+		<div id="twentyfive" v-if="nameComp=='25'">
+			<h1 >25</h1>
+			<h1 >25</h1>
+			<h1 >25</h1>
+			<h1 >25</h1>
+			<h1 >25</h1>
+			<h1 >25</h1>
+			<h1 >25</h1>
+			<h1 >25</h1>
+			<h1 >25</h1>
+			<h1 >25</h1>
+			<h1 >25</h1>
+			<h1 >25</h1>
+			<h1 >25</h1>
+			<h1 >25</h1>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props:{
+		nameComp:{
+			type: String,
+			required: true,
+		}
+	},
+	data () {
+		return {
+			msg: 'obj',
+		}
+	},
+	methods:{
+		
+	}
+}
+</script>
+
+<style>
+h1{
+	color:aqua;
+	font-size: 11em;
+}
+#information{
+	height: 100%;
+	/* width: 100%; */
+	background-color: red;
+}
+#information #nineteen{
+
+}
+#information #twentyfive{
+	
+}
+</style>