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>
<div id="equipment">
<div class="section">
<div class="content">
<div id="mini_menu">
<div class="block_menu" v-for="item, index in page.menu">
<div @click="menu(item.value)" class="name"><div class="text">{{item.name}}</div></div>
<div class="content row">
<div id="mini_menu" class="row col-sm-12 col-md-12 col-lg-9">
<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, 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="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">
{{tit.name}}
</div>
......@@ -15,9 +15,23 @@
</div>
</div>
</div>
<div id="name_page">
<div id="name_page" :style="{marginTop: marg_name + 'px' }" style="transition-duration: .4s;">
<p>{{page.Title}}</p>
</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>
<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 {
msg: 'Equipment',
tab: '',
page: [],
select: '',
select: '',
marg_name: 0,
text:[
{
Russia:{
......@@ -47,29 +62,29 @@ export default {
parts: [
{
name: 'МОЭК 19',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO'
cont: ''
},
{
name: 'МОЭК 25',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO'
cont: ''
},
{
name: 'МОЭК 30',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO'
cont: ''
},
{
name: 'МОЭК 40',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO'
cont: ''
},
{
name: 'МОЭК 50',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO'
cont: ''
},
{
name: 'МОЭК 60',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO'
cont: ''
},
]
],
},
{
name: 'Фотоприемные устройства',
......@@ -77,11 +92,11 @@ export default {
parts: [
{
name: 'ФПУ 4040',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO'
cont: ''
},
{
name: 'ФПУ 6060',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO'
cont: ''
},
]
},
......@@ -91,11 +106,11 @@ export default {
parts: [
{
name: 'АВМ 700',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO'
cont: ''
},
{
name: 'АВМ 820',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO'
cont: ''
},
]
},
......@@ -105,11 +120,11 @@ export default {
parts: [
{
name: 'ПУ 30П',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO'
cont: ''
},
{
name: 'ПУ 30М',
cont: 'OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO'
cont: ''
},
]
},
......@@ -133,14 +148,20 @@ export default {
this.select = this.$parent.select;
this.page = this.text[0][this.select];
},
menu: function(index){
menu: function(index, id){
// alert(index);
if(this.tab == index){
this.tab = ''
this.tab = ''
this.marg_name = 0;
}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) {
this.page = this.text[0][lang];
},
......@@ -175,10 +196,11 @@ export default {
}
#equipment #mini_menu{
margin: 0 auto;
padding-top: 12%;
margin-top: 12%;
}
#equipment #mini_menu{
color: red;
z-index: 100;
}
#equipment #mini_menu .block_menu{
display: inline-table;
......@@ -188,33 +210,35 @@ export default {
position: relative;
}
#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;
min-height: 6em;
min-height: 5em;
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;
text-transform: uppercase;
vertical-align: middle;
background-color: rgba(0, 146, 202, 0.62);
}
#equipment #mini_menu .block_menu div.name div.text{
width: 70%;
margin: auto;
text-transform: uppercase;
font-weight: 700;
}
#equipment #mini_menu .list_block{
margin: 0;
width: 100%;
margin-top: 10px;
width: 97%;
margin-top: 7px;
position: absolute;
}
#equipment #mini_menu .list_menu{
color: white;
display: inline-table;
width: calc(100%/2);
background-color: rgba(2, 55, 76, 0.72);
background-color: rgba(0, 146, 202, 0.62);
padding: 0.4em;
border: 1px black solid;
}
......@@ -223,13 +247,13 @@ export default {
#equipment .section #name_page{
width: 40%;
width: 70%;
margin: 0 auto;
margin-top: 6%;
/* margin-top: 6%; */
}
#equipment .section #name_page p{
color: white;
font-size: 1rem;
font-size: 2em;
text-transform: uppercase;
}
......@@ -276,14 +300,15 @@ export default {
/* Animate */
.block-menu-fade-enter-active {
transition: all .3s ease;
transition: all .4s ease;
}
.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-leave-active до версии 2.1.8 */ {
transform: translateX(10px);
transform: translateY(-25px);
opacity: 0;
z-index: 10;
}
</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