Skip to content

N
NewSite v3.0
Commit 7c4ec6fb authored by Sergey Serov's avatar Sergey Serov
Browse files
Options

site and its English version #3(second update)

parent 24fec247
Hide whitespace changes
Inline Side-by-side
Showing with 70 additions and 45 deletions
src/components/Equipment.vue
View file @ 7c4ec6fb
<template> <template>
<div id="equipment"> <div id="equipment">
<div class="section"> <div class="section">
<div class="content"> <div class="content row">
<div id="mini_menu"> <div id="mini_menu" class="row col-sm-12 col-md-12 col-lg-9">
<div class="block_menu" v-for="item, index in page.menu"> <div class="block_menu col-sm-12 col-md-6 col-lg-3" v-for="item, index in page.menu">
<div @click="menu(item.value)" class="name"><div class="text">{{item.name}}</div></div> <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"> <transition name="block-menu-fade">
<div v-show="item.value == tab" ref="infoBox" class="list_block"> <div v-show="item.value == tab" ref="menu" class="list_block">
<div v-for="tit in item.parts" class="list_menu"> <div v-for="tit in item.parts" class="list_menu">
{{tit.name}} {{tit.name}}
</div> </div>
...@@ -15,9 +15,23 @@ ...@@ -15,9 +15,23 @@
</div> </div>
</div> </div>
</div> </div>
<div id="name_page"> <div id="name_page" :style="{marginTop: marg_name + 'px' }" style="transition-duration: .4s;">
<p>{{page.Title}}</p> <p>{{page.Title}}</p>
</div> </div>
<div id="table_data">
<table>
<thead>
<th>
<tr v-for="i in page.table">{{i}}</tr>
</th>
</thead>
<tbody>
<td>
<tr >1</tr>
</td>
</tbody>
</table>
</div>
<div id="footer_equipment"> <div id="footer_equipment">
<div> <div>
<span><a href="tel:+74956415135">+7(495) 641 51 35</a>&nbsp&nbsp/&nbsp&nbsp<a href="mailto:info@ancprotek.ru">INFO@ANCPROTEK.RU</a><img src="../imgMain/LogoWhite.png"/>Россия, Москва, Шоссе Энтузиастов, 56с25</span> <span><a href="tel:+74956415135">+7(495) 641 51 35</a>&nbsp&nbsp/&nbsp&nbsp<a href="mailto:info@ancprotek.ru">INFO@ANCPROTEK.RU</a><img src="../imgMain/LogoWhite.png"/>Россия, Москва, Шоссе Энтузиастов, 56с25</span>
...@@ -35,7 +49,8 @@ export default { ...@@ -35,7 +49,8 @@ export default {
msg: 'Equipment', msg: 'Equipment',
tab: '', tab: '',
page: [], page: [],
select: '', select: '',
marg_name: 0,
text:[ text:[
{ {
Russia:{ Russia:{
...@@ -47,29 +62,29 @@ export default { ...@@ -47,29 +62,29 @@ export default {
parts: [ parts: [
{ {
name: 'МОЭК 19', name: 'МОЭК 19',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO' cont: ''
}, },
{ {
name: 'МОЭК 25', name: 'МОЭК 25',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO' cont: ''
}, },
{ {
name: 'МОЭК 30', name: 'МОЭК 30',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO' cont: ''
}, },
{ {
name: 'МОЭК 40', name: 'МОЭК 40',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO' cont: ''
}, },
{ {
name: 'МОЭК 50', name: 'МОЭК 50',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO' cont: ''
}, },
{ {
name: 'МОЭК 60', name: 'МОЭК 60',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO' cont: ''
}, },
] ],
}, },
{ {
name: 'Фотоприемные устройства', name: 'Фотоприемные устройства',
...@@ -77,11 +92,11 @@ export default { ...@@ -77,11 +92,11 @@ export default {
parts: [ parts: [
{ {
name: 'ФПУ 4040', name: 'ФПУ 4040',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO' cont: ''
}, },
{ {
name: 'ФПУ 6060', name: 'ФПУ 6060',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO' cont: ''
}, },
] ]
}, },
...@@ -91,11 +106,11 @@ export default { ...@@ -91,11 +106,11 @@ export default {
parts: [ parts: [
{ {
name: 'АВМ 700', name: 'АВМ 700',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO' cont: ''
}, },
{ {
name: 'АВМ 820', name: 'АВМ 820',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO' cont: ''
}, },
] ]
}, },
...@@ -105,11 +120,11 @@ export default { ...@@ -105,11 +120,11 @@ export default {
parts: [ parts: [
{ {
name: 'ПУ 30П', name: 'ПУ 30П',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO' cont: ''
}, },
{ {
name: 'ПУ 30М', name: 'ПУ 30М',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO' cont: ''
}, },
] ]
}, },
...@@ -133,14 +148,20 @@ export default { ...@@ -133,14 +148,20 @@ export default {
this.select = this.$parent.select; this.select = this.$parent.select;
this.page = this.text[0][this.select]; this.page = this.text[0][this.select];
}, },
menu: function(index){ menu: function(index, id){
// alert(index); // alert(index);
if(this.tab == index){ if(this.tab == index){
this.tab = '' this.tab = ''
this.marg_name = 0;
}else{ }else{
this.tab = index; this.tab = index;
} window.setTimeout(() => this.func(id), 1);
}, };
},
func: function(id){
this.marg_name = this.$refs.menu[id].clientHeight;
},
SelectLang (lang) { SelectLang (lang) {
this.page = this.text[0][lang]; this.page = this.text[0][lang];
}, },
...@@ -175,10 +196,11 @@ export default { ...@@ -175,10 +196,11 @@ export default {
} }
#equipment #mini_menu{ #equipment #mini_menu{
margin: 0 auto; margin: 0 auto;
padding-top: 12%; margin-top: 12%;
} }
#equipment #mini_menu{ #equipment #mini_menu{
color: red; color: red;
z-index: 100;
} }
#equipment #mini_menu .block_menu{ #equipment #mini_menu .block_menu{
display: inline-table; display: inline-table;
...@@ -188,33 +210,35 @@ export default { ...@@ -188,33 +210,35 @@ export default {
position: relative; position: relative;
} }
#equipment #mini_menu .block_menu div.name{ #equipment #mini_menu .block_menu div.name{
width: 100%;
padding-right: 15%;
padding-left: 15%;
background-color: rgba(2, 55, 76, 0.72);
display: flex; display: flex;
min-height: 6em; min-height: 5em;
border: 1px none solid; border: 1px none solid;
/* display: inline-block; */
} }
#equipment #mini_menu .block_menu div.name div.text{ #equipment #mini_menu .block_menu div.name.active{
color: rgb(0, 146, 202);
background-color: rgba(218, 218, 218, 0.808);
}
#equipment #mini_menu .block_menu div.name.def{
color: White; color: White;
text-transform: uppercase; background-color: rgba(0, 146, 202, 0.62);
vertical-align: middle; }
#equipment #mini_menu .block_menu div.name div.text{
width: 70%;
margin: auto; margin: auto;
text-transform: uppercase;
font-weight: 700;
} }
#equipment #mini_menu .list_block{ #equipment #mini_menu .list_block{
margin: 0; margin: 0;
width: 100%; width: 97%;
margin-top: 10px; margin-top: 7px;
position: absolute; position: absolute;
} }
#equipment #mini_menu .list_menu{ #equipment #mini_menu .list_menu{
color: white; color: white;
display: inline-table; display: inline-table;
width: calc(100%/2); width: calc(100%/2);
background-color: rgba(2, 55, 76, 0.72); background-color: rgba(0, 146, 202, 0.62);
padding: 0.4em; padding: 0.4em;
border: 1px black solid; border: 1px black solid;
} }
...@@ -223,13 +247,13 @@ export default { ...@@ -223,13 +247,13 @@ export default {
#equipment .section #name_page{ #equipment .section #name_page{
width: 40%; width: 70%;
margin: 0 auto; margin: 0 auto;
margin-top: 6%; /* margin-top: 6%; */
} }
#equipment .section #name_page p{ #equipment .section #name_page p{
color: white; color: white;
font-size: 1rem; font-size: 2em;
text-transform: uppercase; text-transform: uppercase;
} }
...@@ -276,14 +300,15 @@ export default { ...@@ -276,14 +300,15 @@ export default {
/* Animate */ /* Animate */
.block-menu-fade-enter-active { .block-menu-fade-enter-active {
transition: all .3s ease; transition: all .4s ease;
} }
.block-menu-fade-leave-active { .block-menu-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
} }
.block-menu-fade-enter, .block-menu-fade-leave-to .block-menu-fade-enter, .block-menu-fade-leave-to
/* .block-menu-fade-leave-active до версии 2.1.8 */ { /* .block-menu-fade-leave-active до версии 2.1.8 */ {
transform: translateX(10px); transform: translateY(-25px);
opacity: 0; opacity: 0;
z-index: 10;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment