after add new components for each device

src/components/Devices/MOES19.vue

+<template>
+    <div>
+        <h1>
+            {{msg}}
+        </h1>
+    </div>
+</template>
+<style scoped>
+
+</style>
+<script>
+
+
+
+
+
+export default {
+  name: 'MOES19',
+  data () {
+    return {
+	  msg: 'MOES19',
+	  page: [],
+		text:[
+			{
+				Russia:{
+					
+				},
+				English:{
+					
+				}
+			}
+
+		],
+    }
+  },
+  created: function () {
+	this.Before();
+	// alert(this.page.menu);
+  },
+  methods: {
+		Before: function () {
+			// this.mobile = this.$parent.mobile;
+			// this.select = this.$parent.select;
+			// this.page = this.text[0][this.select];
+		},
+		SelectLang (lang) {
+			this.page = this.text[0][lang];
+		},
+	},
+}
+</script>
\ No newline at end of file

src/components/Devices/MOES25.vue

+
+<template>
+    <div>
+        <h1>
+            {{msg}}
+        </h1>
+    </div>
+</template>
+<style scoped>
+
+</style>
+<script>
+
+
+
+
+
+export default {
+  name: 'MOES25',
+  data () {
+    return {
+	  msg: 'MOES25',
+	  page: [],
+		text:[
+			{
+				Russia:{
+					
+				},
+				English:{
+					
+				}
+			}
+
+		],
+    }
+  },
+  created: function () {
+	this.Before();
+	// alert(this.page.menu);
+  },
+  methods: {
+		Before: function () {
+			// this.mobile = this.$parent.mobile;
+			// this.select = this.$parent.select;
+			// this.page = this.text[0][this.select];
+		},
+		SelectLang (lang) {
+			this.page = this.text[0][lang];
+		},
+	},
+}
+</script>
\ No newline at end of file

src/components/Devices/MOES30.vue

+<template>
+    <div>
+        <h1>
+            {{msg}}
+        </h1>
+    </div>
+</template>
+<style scoped>
+
+</style>
+<script>
+
+
+
+
+
+export default {
+  name: 'MOES30',
+  data () {
+    return {
+	  msg: 'MOES30',
+	  page: [],
+		text:[
+			{
+				Russia:{
+					
+				},
+				English:{
+					
+				}
+			}
+
+		],
+    }
+  },
+  created: function () {
+	this.Before();
+	// alert(this.page.menu);
+  },
+  methods: {
+		Before: function () {
+			// this.mobile = this.$parent.mobile;
+			// this.select = this.$parent.select;
+			// this.page = this.text[0][this.select];
+		},
+		SelectLang (lang) {
+			this.page = this.text[0][lang];
+		},
+	},
+}
+</script>
\ No newline at end of file

src/components/Devices/MOES40.vue

+<template>
+    <div>
+        <h1>
+            {{msg}}
+        </h1>
+    </div>
+</template>
+<style scoped>
+
+</style>
+<script>
+
+
+
+
+
+export default {
+  name: 'MOES40',
+  data () {
+    return {
+	  msg: 'MOES40',
+	  page: [],
+		text:[
+			{
+				Russia:{
+					
+				},
+				English:{
+					
+				}
+			}
+
+		],
+    }
+  },
+  created: function () {
+	this.Before();
+	// alert(this.page.menu);
+  },
+  methods: {
+		Before: function () {
+			// this.mobile = this.$parent.mobile;
+			// this.select = this.$parent.select;
+			// this.page = this.text[0][this.select];
+		},
+		SelectLang (lang) {
+			this.page = this.text[0][lang];
+		},
+	},
+}
+</script>
\ No newline at end of file

src/components/Devices/MOES50.vue

+<template>
+    <div>
+        <h1>
+            {{msg}}
+        </h1>
+    </div>
+</template>
+<style scoped>
+
+</style>
+<script>
+
+
+
+
+
+export default {
+  name: 'MOES50',
+  data () {
+    return {
+	  msg: 'MOES50',
+	  page: [],
+		text:[
+			{
+				Russia:{
+					
+				},
+				English:{
+					
+				}
+			}
+
+		],
+    }
+  },
+  created: function () {
+	this.Before();
+	// alert(this.page.menu);
+  },
+  methods: {
+		Before: function () {
+			// this.mobile = this.$parent.mobile;
+			// this.select = this.$parent.select;
+			// this.page = this.text[0][this.select];
+		},
+		SelectLang (lang) {
+			this.page = this.text[0][lang];
+		},
+	},
+}
+</script>
\ No newline at end of file

src/components/Devices/MOES65.vue

+<template>
+    <div>
+        <h1>
+            {{msg}}
+        </h1>
+    </div>
+</template>
+<style scoped>
+
+</style>
+<script>
+
+
+
+
+
+export default {
+  name: 'MOES65',
+  data () {
+    return {
+	  msg: 'MOES65',
+	  page: [],
+		text:[
+			{
+				Russia:{
+					
+				},
+				English:{
+					
+				}
+			}
+
+		],
+    }
+  },
+  created: function () {
+	this.Before();
+	// alert(this.page.menu);
+  },
+  methods: {
+		Before: function () {
+			// this.mobile = this.$parent.mobile;
+			// this.select = this.$parent.select;
+			// this.page = this.text[0][this.select];
+		},
+		SelectLang (lang) {
+			this.page = this.text[0][lang];
+		},
+	},
+}
+</script>
\ No newline at end of file

src/components/Equipment.vue

@@ -7,7 +7,7 @@
 							<div @click="menu(item.value, index)" :class="[(item.value == tab) ? 'active' : 'def']" class="name"><div class="text">{{item.name}}</div></div>
 							<transition name="block-menu-fade">
 								<div v-show="item.value == tab" ref="menu" class="list_block">
-									<div v-for="tit in item.parts" class="list_menu">
+									<div @click="cont_menu(tit.cont, index)" :class="[(tit.cont == select_tab) ? 'active_mini_tab' : '']" v-for="tit, index in item.parts" class="list_menu">
 										{{tit.name}}
 									</div>
 								</div>
@@ -20,16 +20,19 @@
 				</div>
         <div id="table_data" class="row">
           <div id="table_data_content" class="col-sm-12 col-md-12 col-lg-9 col-xl-9">
-            <table>
-              <tbody>
-                <tr v-for="i in page.table">
-                  <td>{{i.name}}</td>
-                  <td><p>{{i.diam}}<br>{{i.diam_ed}}</p></td>
-                  <td><p>{{i.grad}}<br>{{i.grad_ed}}</p></td>
-                  <td><p>{{i.pronic}}<br>{{i.pronic_ed}}</p></td>
-                </tr>
-              </tbody>
-            </table>
+            <div id="comp">
+				<table v-if="((tab == '')||(tab == 'OK'))&&(select_tab=='')">
+				<tbody>
+					<tr v-for="i in page.table">
+					<td>{{i.name}}</td>
+					<td><p>{{i.diam}}<br>{{i.diam_ed}}</p></td>
+					<td><p>{{i.grad}}<br>{{i.grad_ed}}</p></td>
+					<td><p>{{i.pronic}}<br>{{i.pronic_ed}}</p></td>
+					</tr>
+				</tbody>
+				</table>
+				<component v-bind:is="select_tab" class="tab"></component>
+			</div>
           </div>
         </div>
 				<div id="footer_equipment">
@@ -42,12 +45,41 @@
 </template>
 
 <script>
+
+
+import MOES19 from './Devices/MOES19.vue';
+import MOES25 from './Devices/MOES25.vue';
+import MOES30 from './Devices/MOES30.vue';
+import MOES40 from './Devices/MOES40.vue';
+import MOES50 from './Devices/MOES50.vue';
+import MOES65 from './Devices/MOES65.vue';
+import PU30 from './Devices/PU30.vue';
+import PD4040 from './Devices/PD4040.vue';
+import PD6060 from './Devices/PD6060.vue';
+import PUEO from './Devices/PUEO-M.vue';
+import SUPPORTROTATEDEVICE from './Devices/SupportRotateDevice.vue';
+
 export default {
-  name: 'app',
+  name: 'Equipment',
+
+	components: {
+		MOES19,
+		MOES25,
+		MOES30,
+		MOES40,
+		MOES50,
+		MOES65,
+		PU30,
+		PD4040,
+		PD6060,
+		PUEO,
+		SUPPORTROTATEDEVICE,
+	},
   data () {
     return {
 	  msg: 'Equipment',
 	  tab: '',
+	  select_tab: '',
 	  page: [],
     select: '',
     marg_name: 0,
@@ -62,27 +94,27 @@ export default {
 							parts: [
 								{
 									name: 'МОЭК 19',
-									cont: ''
+									cont: 'MOES19'
 								},
 								{
 									name: 'МОЭК 25',
-									cont: ''
+									cont: 'MOES25'
 								},
 								{
 									name: 'МОЭК 30',
-									cont: ''
+									cont: 'MOES30'
 								},
 								{
 									name: 'МОЭК 40',
-									cont: ''
+									cont: 'MOES40'
 								},
 								{
 									name: 'МОЭК 50',
-									cont: ''
+									cont: 'MOES50'
 								},
 								{
 									name: 'МОЭК 60',
-									cont: ''
+									cont: 'MOES65'
 								},
               ],
 						},
@@ -92,11 +124,11 @@ export default {
 							parts: [
 								{
 									name: 'ФПУ 4040',
-									cont: ''
+									cont: 'PD4040'
 								},
 								{
 									name: 'ФПУ 6060',
-									cont: ''
+									cont: 'PD6060'
 								},
 							]
 						},
@@ -106,11 +138,11 @@ export default {
 							parts: [
 								{
 									name: 'АВМ 700',
-									cont: ''
+									cont: '#'
 								},
 								{
 									name: 'АВМ 820',
-									cont: ''
+									cont: '#'
 								},
 							]
 						},
@@ -120,11 +152,11 @@ export default {
 							parts: [
 								{
 									name: 'ПУ 30П',
-									cont: ''
+									cont: 'PU30'
 								},
 								{
 									name: 'ПУ 30М',
-									cont: ''
+									cont: 'PUEO'
 								},
 							]
 						},
@@ -216,21 +248,27 @@ export default {
 		menu: function(index, id){
 			// alert(index);
 			if(this.tab == index){
-        this.tab = ''
-        this.marg_name = 0;
+				this.tab = ''
+				this.marg_name = 0;
 			}else{
-        this.tab = index;
-        window.setTimeout(() => this.func(id), 1);
-      };
+				this.tab = index;
+				window.setTimeout(() => this.func(id), 1);
+			};
+			this.select_tab = ''
       
-    },
-    func: function(id){
-      this.marg_name = this.$refs.menu[id].clientHeight;
-    },
+		},
+		cont_menu: function(cont, id){
+			// alert(cont);
+			this.select_tab = cont;
+
+		},
+		func: function(id){
+			this.marg_name = this.$refs.menu[id].clientHeight;
+		},
 		SelectLang (lang) {
 			this.page = this.text[0][lang];
 		},
-  },
+	},
 }
 </script>
 
@@ -266,6 +304,8 @@ export default {
 	display: flex;
 	min-height: 5em;
 	border: 1px none solid;
+	transition: all .2s ease;
+
 }
 #equipment #mini_menu .block_menu div.name.active{
 	color: rgb(0, 146, 202);
@@ -279,8 +319,9 @@ export default {
 	width: 70%;
 	margin: auto;
 	text-transform: uppercase;
-  font-weight: 700;
+	font-weight: 700;
 }
+/* active_mini_tab */
 #equipment #mini_menu .list_block{
 	margin: 0;
 	width: 97%;
@@ -294,11 +335,19 @@ export default {
 	background-color: rgba(0, 146, 202, 0.62);
 	padding: 0.4em;
 	border: 1px black solid;
+	transition: all .4s ease;
+
+}
+#equipment #mini_menu .list_menu.active_mini_tab{
+	color: rgb(0, 86, 119);
+    background-color: rgba(218, 218, 218, 0.85);
+	font-weight: 700;
 }
 
 
 
 
+
 #equipment .section #name_page{
 	width: 70%;
 	margin: 0 auto;

src/components/Main.vue

@@ -666,7 +666,7 @@
 <script>
 
 export default {
-name: 'app',
+name: 'main',
 
 	data () {
 		return {