Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
N
NewSite v3.0
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Sergey Serov
NewSite v3.0
Commits
789f301b
Commit
789f301b
authored
Jan 24, 2020
by
Sergey Serov
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Site (mobile_equipment)
parent
665a5fda
Changes
5
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
1293 additions
and
167 deletions
+1293
-167
App.vue
src/App.vue
+1
-0
Equipment.vue
src/components/Equipment.vue
+401
-158
Equipment_mobile.vue
src/components/Equipment_mobile.vue
+887
-0
main.js
src/main.js
+3
-8
router.js
src/router.js
+1
-1
No files found.
src/App.vue
View file @
789f301b
...
...
@@ -41,6 +41,7 @@ body{
overflow-x
:
hidden
;
background-color
:
black
;
width
:
100vw
;
/* min-width: 1000px; */
font-family
:
"Noah"
;
background-image
:
url('./source/Background.png')
;
background-size
:
cover
;
...
...
src/components/Equipment.vue
View file @
789f301b
<
template
>
<div
id=
"equipment"
>
<div
class=
"section"
>
<div
style=
"display: none"
class=
"section"
>
<div
class=
"content row"
>
<div
id=
"mini_menu"
class=
"row col-
sm-12 col-md-12 col-
lg-9 col-xl-9"
>
<div
class=
"block_menu col-
sm-12 col-md-3 col-
lg-3 col-xl-3"
v-for=
"item, index in page.menu"
>
<div
id=
"mini_menu"
class=
"row col-lg-9 col-xl-9"
>
<div
class=
"block_menu col-lg-3 col-xl-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>
...
...
@@ -54,6 +54,15 @@
</div>
</div>
</div>
<div
class=
"copm_mobile"
>
<div
v-for=
"item in page.menu"
>
<div
v-for=
"i in item.parts"
>
<h5
class=
"name_mobile"
>
{{
i
.
name
}}
</h5>
<component
:is=
"i.cont"
class=
"tab"
></component>
</div>
</div>
</div>
</div>
</
template
>
...
...
@@ -97,6 +106,7 @@ export default {
select_tab
:
''
,
page
:
[],
select
:
''
,
mobile
:
false
,
marg_name
:
0
,
text
:
[{
Russia
:
{
...
...
@@ -280,71 +290,104 @@ export default {
</
script
>
<
style
>
#equipment
{
/* Smartphones (вертикальная и горизонтальная ориентация) ----------- */
@media
only
screen
and
(
min-width
:
320px
)
and
(
max-width
:
480px
)
{
#equipment
{
font-family
:
'Avenir'
,
Helvetica
,
Arial
,
sans-serif
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
;
text-align
:
center
;
color
:
#2c3e50
;
}
}
#equipment
.section
{
#equipment
.section
{
background-image
:
url('../source/Background.png')
;
background-size
:
cover
;
min-height
:
100vh
;
display
:
none
;
}
.copm_mobile
{
display
:
block
;
margin-top
:
60px
;
}
.name_mobile
{
color
:
white
;
}
}
#equipment
#mini_menu
{
@media
only
screen
and
(
min-width
:
1159px
)
{
#equipment
{
font-family
:
'Avenir'
,
Helvetica
,
Arial
,
sans-serif
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
;
text-align
:
center
;
color
:
#2c3e50
;
}
#equipment
.section
{
background-image
:
url('../source/Background.png')
;
background-size
:
cover
;
min-height
:
100vh
;
}
#equipment
#mini_menu
{
margin
:
0
auto
;
margin-top
:
7%
;
color
:
red
;
z-index
:
100
;
}
}
#equipment
#mini_menu
.block_menu
{
#equipment
#mini_menu
.block_menu
{
display
:
inline-table
;
/* width: calc(60%/4); */
padding
:
7px
;
margin
:
0
auto
;
position
:
relative
;
}
height
:
100%
;
}
#equipment
#mini_menu
.block_menu
div
.name
{
#equipment
#mini_menu
.block_menu
div
.name
{
display
:
flex
;
min-height
:
5em
;
border
:
1px
none
solid
;
transition
:
all
.2s
ease
;
}
#equipment
#mini_menu
.block_menu
div
.name
:hover
{
}
#equipment
#mini_menu
.block_menu
div
.name
:hover
{
cursor
:
pointer
;
}
}
#equipment
#mini_menu
.block_menu
div
.name.active
{
#equipment
#mini_menu
.block_menu
div
.name.active
{
color
:
rgb
(
0
,
102
,
143
);
background-color
:
rgba
(
218
,
218
,
218
,
0.808
);
}
}
#equipment
#mini_menu
.block_menu
div
.name.def
{
#equipment
#mini_menu
.block_menu
div
.name.def
{
color
:
White
;
background-color
:
rgba
(
0
,
146
,
202
,
0.62
);
border
:
none
;
}
height
:
100%
;
}
#equipment
#mini_menu
.block_menu
div
.name
div
.text
{
#equipment
#mini_menu
.block_menu
div
.name
div
.text
{
width
:
70%
;
margin
:
auto
;
text-transform
:
uppercase
;
font-weight
:
700
;
}
}
#equipment
#mini_menu
.list_block
{
#equipment
#mini_menu
.list_block
{
margin
:
0
;
width
:
97%
;
margin-top
:
7px
;
position
:
absolute
;
}
}
#equipment
#mini_menu
.list_menu
{
#equipment
#mini_menu
.list_menu
{
color
:
white
;
display
:
inline-table
;
width
:
calc
(
100%
/
2
);
...
...
@@ -352,126 +395,326 @@ export default {
padding
:
0.4em
;
border
:
1px
black
solid
;
transition
:
all
.4s
ease
;
}
}
#equipment
#mini_menu
.list_menu
:hover
{
#equipment
#mini_menu
.list_menu
:hover
{
cursor
:
pointer
;
}
}
#equipment
#mini_menu
.list_menu.active_mini_tab
{
#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
{
#equipment
.section
#name_page
{
width
:
70%
;
margin
:
0
auto
;
/* margin-top: 6%; */
}
}
#equipment
.section
#name_page
p
{
#equipment
.section
#name_page
p
{
color
:
white
;
font-size
:
2em
;
text-transform
:
uppercase
;
}
}
#equipment
#table_data
{
#equipment
#table_data
{
color
:
red
;
}
}
#equipment
#table_data
#table_data_content
{
#equipment
#table_data
#table_data_content
{
margin
:
0
auto
;
}
}
#equipment
#table_data
table
{
#equipment
#table_data
table
{
width
:
100%
;
margin
:
0
auto
;
}
}
#equipment
#table_data
tr
td
{
#equipment
#table_data
tr
td
{
width
:
25%
;
padding
:
.6rem
;
margin
:
0
auto
;
color
:
white
;
border
:
1px
black
solid
;
background-color
:
rgba
(
2
,
55
,
76
,
0.72
);
}
}
#equipment
#table_data
tr
td
p
{
#equipment
#table_data
tr
td
p
{
margin
:
0
auto
;
width
:
60%
;
font-weight
:
600
;
padding
:
6px
;
}
}
#equipment
#table_data
tr
:first-child
td
p
{
#equipment
#table_data
tr
:first-child
td
p
{
font-weight
:
600
;
padding
:
0px
;
}
}
#equipment
#table_data
tr
td
:first-child
{
#equipment
#table_data
tr
td
:first-child
{
/* width: 30%; */
/* padding: 0px; */
/* width: 14%; */
}
}
#equipment
#table_data
td
:first-child
p
{
#equipment
#table_data
td
:first-child
p
{
width
:
100%
;
}
}
#equipment
#table_data
#table_data_content
div
#comp
div
#component
{
#equipment
#table_data
#table_data_content
div
#comp
div
#component
{
/* height: 100%; */
/* max-height: 55vh; */
/* overflow: scroll; */
/* margin-bottom: 5%; */
margin-bottom
:
10%
;
}
}
#equipment
#footer_equipment
{
#equipment
#footer_equipment
{
position
:
fixed
;
bottom
:
0
;
height
:
7%
;
width
:
100vw
;
background-color
:
black
;
color
:
white
;
}
}
#equipment
#footer_equipment
a
{
#equipment
#footer_equipment
a
{
color
:
white
;
}
}
#equipment
#footer_equipment
a
:hover
{
#equipment
#footer_equipment
a
:hover
{
color
:
white
;
cursor
:
pointer
;
}
}
#equipment
#footer_equipment
div
{
#equipment
#footer_equipment
div
{
bottom
:
0px
;
}
}
#equipment
#footer_equipment
div
img
{
#equipment
#footer_equipment
div
img
{
width
:
3%
;
margin-left
:
10px
;
margin-right
:
10px
;
}
}
/* Animate */
.block-menu-fade-enter-active
{
/* Animate */
.block-menu-fade-enter-active
{
transition
:
all
.4s
ease
;
}
}
.block-menu-fade-leave-active
{
.block-menu-fade-leave-active
{
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
:
translateY
(
-25px
);
opacity
:
0
;
z-index
:
10
;
}
}
/* Большие экраны ----------- */
@media
only
screen
and
(
min-width
:
1824px
)
{
#equipment
{
font-family
:
'Avenir'
,
Helvetica
,
Arial
,
sans-serif
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
;
text-align
:
center
;
color
:
#2c3e50
;
}
#equipment
.section
{
background-image
:
url('../source/Background.png')
;
background-size
:
cover
;
min-height
:
100vh
;
}
#equipment
#mini_menu
{
margin
:
0
auto
;
margin-top
:
7%
;
color
:
red
;
z-index
:
100
;
}
#equipment
#mini_menu
.block_menu
{
display
:
inline-table
;
/* width: calc(60%/4); */
padding
:
7px
;
margin
:
0
auto
;
position
:
relative
;
height
:
100%
;
}
#equipment
#mini_menu
.block_menu
div
.name
{
display
:
flex
;
min-height
:
5em
;
border
:
1px
none
solid
;
transition
:
all
.2s
ease
;
}
#equipment
#mini_menu
.block_menu
div
.name
:hover
{
cursor
:
pointer
;
}
#equipment
#mini_menu
.block_menu
div
.name.active
{
color
:
rgb
(
0
,
102
,
143
);
background-color
:
rgba
(
218
,
218
,
218
,
0.808
);
}
#equipment
#mini_menu
.block_menu
div
.name.def
{
color
:
White
;
background-color
:
rgba
(
0
,
146
,
202
,
0.62
);
border
:
none
;
height
:
100%
;
}
#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
:
97%
;
margin-top
:
7px
;
position
:
absolute
;
}
#equipment
#mini_menu
.list_menu
{
color
:
white
;
display
:
inline-table
;
width
:
calc
(
100%
/
2
);
background-color
:
rgba
(
0
,
146
,
202
,
0.62
);
padding
:
0.4em
;
border
:
1px
black
solid
;
transition
:
all
.4s
ease
;
}
#equipment
#mini_menu
.list_menu
:hover
{
cursor
:
pointer
;
}
#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
;
/* margin-top: 6%; */
}
#equipment
.section
#name_page
p
{
color
:
white
;
font-size
:
2em
;
text-transform
:
uppercase
;
}
#equipment
#table_data
{
color
:
red
;
}
#equipment
#table_data
#table_data_content
{
margin
:
0
auto
;
}
#equipment
#table_data
table
{
width
:
100%
;
margin
:
0
auto
;
}
#equipment
#table_data
tr
td
{
width
:
25%
;
padding
:
.6rem
;
margin
:
0
auto
;
color
:
white
;
border
:
1px
black
solid
;
background-color
:
rgba
(
2
,
55
,
76
,
0.72
);
}
#equipment
#table_data
tr
td
p
{
margin
:
0
auto
;
width
:
60%
;
font-weight
:
600
;
padding
:
6px
;
}
.block-menu-fade-enter
,
.block-menu-fade-leave-to
#equipment
#table_data
tr
:first-child
td
p
{
font-weight
:
600
;
padding
:
0px
;
}
/* .block-menu-fade-leave-active до версии 2.1.8 */
#equipment
#table_data
tr
td
:first-child
{
/* width: 30%; */
/* padding: 0px; */
/* width: 14%; */
}
#equipment
#table_data
td
:first-child
p
{
width
:
100%
;
}
#equipment
#table_data
#table_data_content
div
#comp
div
#component
{
/* height: 100%; */
/* max-height: 55vh; */
/* overflow: scroll; */
/* margin-bottom: 5%; */
margin-bottom
:
10%
;
}
#equipment
#footer_equipment
{
position
:
fixed
;
bottom
:
0
;
height
:
7%
;
width
:
100vw
;
background-color
:
black
;
color
:
white
;
}
#equipment
#footer_equipment
a
{
color
:
white
;
}
#equipment
#footer_equipment
a
:hover
{
color
:
white
;
cursor
:
pointer
;
}
#equipment
#footer_equipment
div
{
bottom
:
0px
;
}
#equipment
#footer_equipment
div
img
{
width
:
3%
;
margin-left
:
10px
;
margin-right
:
10px
;
}
/* Animate */
.block-menu-fade-enter-active
{
transition
:
all
.4s
ease
;
}
.block-menu-fade-leave-active
{
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
:
translateY
(
-25px
);
opacity
:
0
;
z-index
:
10
;
}
}
</
style
>
src/components/Equipment_mobile.vue
0 → 100644
View file @
789f301b
<
template
>
<div
id=
"equipment"
>
<div
class=
"section"
>
<div
class=
"content row"
>
<h1>
OLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOLOL
</h1>
<div
id=
"mini_menu"
class=
"row col-lg-9 col-xl-9"
ref=
"menu"
>
<div
class=
"block_menu col-lg-3 col-xl-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"
class=
"list_block"
>
<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>
</transition>
</div>
</div>
</div>
<div
id=
"name_page"
:style=
"
{marginTop: marg_name + 'px' }" style="transition-duration: .4s;">
<p>
{{
page
.
Title
}}
</p>
</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"
>
<div
id=
"comp"
>
<!-- ((tab == '')||(tab == 'OK'))&& -->
<table
v-if=
"(select_tab=='')"
>
<tbody>
<tr
v-for=
"i in page.table"
>
<td>
<p>
{{
i
.
name
}}
</p>
</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=
"component"
>
<component
:is=
"select_tab"
class=
"tab"
></component>
</div>
</div>
</div>
</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>
</div>
</div>
</div>
</div>
</
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
ABM700
from
'./Devices/ABM700.vue'
import
ABM820
from
'./Devices/ABM820.vue'
import
PUEO
from
'./Devices/PUEO-M.vue'
import
SUPPORTROTATEDEVICE
from
'./Devices/SupportRotateDevice.vue'
export
default
{
name
:
'Equipment'
,
components
:
{
MOES19
,
MOES25
,
MOES30
,
MOES40
,
MOES50
,
MOES65
,
PU30
,
PD4040
,
PD6060
,
ABM700
,
ABM820
,
PUEO
,
SUPPORTROTATEDEVICE
},
data
()
{
return
{
msg
:
'Equipment'
,
tab
:
''
,
select_tab
:
''
,
page
:
[],
select
:
''
,
mobile
:
false
,
marg_name
:
0
,
text
:
[{
Russia
:
{
Title
:
'Основные характеристики модульных оптико-электронных комплексов'
,
menu
:
[{
name
:
'Модульные оптико-электронные средства'
,
value
:
'OK'
,
parts
:
[{
name
:
'МОЭК 19'
,
cont
:
'MOES19'
},
{
name
:
'МОЭК 25'
,
cont
:
'MOES25'
},
{
name
:
'МОЭК 30'
,
cont
:
'MOES30'
},
{
name
:
'МОЭК 40'
,
cont
:
'MOES40'
},
{
name
:
'МОЭК 50'
,
cont
:
'MOES50'
},
{
name
:
'МОЭК 65'
,
cont
:
'MOES65'
}
]
},
{
name
:
'Фотоприемные устройства'
,
value
:
'PD'
,
parts
:
[{
name
:
'ФПУ 4040'
,
cont
:
'PD4040'
},
{
name
:
'ФПУ 6060'
,
cont
:
'PD6060'
}
]
},
{
name
:
'Опорно-поворотные устройства'
,
value
:
'RD'
,
parts
:
[{
name
:
'АВМ 700'
,
cont
:
'ABM700'
},
{
name
:
'АВМ 820'
,
cont
:
'ABM820'
}
]
},
{
name
:
'Павильоны укрытия'
,
value
:
'PU'
,
parts
:
[{
name
:
'ПУ 30П'
,
cont
:
'PU30'
},
{
name
:
'ПУ 30М'
,
cont
:
'PUEO'
}
]
}
],
table
:
[{
name
:
'Название'
,
diam
:
'Линейный диаметр поля зрения объектива'
,
diam_ed
:
'град./мм'
,
grad
:
'Эффективный угловой размер поля зрения по сенсору ФПУ'
,
grad_ed
:
'град.'
,
pronic
:
'Ожидаемое проницание не хуже'
,
pronic_ed
:
'зв. величина'
},
{
name
:
'МОЭК 19'
,
diam
:
'10.0/52'
,
diam_ed
:
''
,
grad
:
'8.3x5.6'
,
grad_ed
:
''
,
pronic
:
'16.5'
,
pronic_ed
:
''
},
{
name
:
'МОЭК 25'
,
diam
:
'4.8/52'
,
diam_ed
:
''
,
grad
:
'3.3x2.2'
,
grad_ed
:
''
,
pronic
:
'16.5'
,
pronic_ed
:
''
},
{
name
:
'МОЭК 30'
,
diam
:
'6.8/52'
,
diam_ed
:
''
,
grad
:
'4.8x4.8'
,
grad_ed
:
''
,
pronic
:
'17.0'
,
pronic_ed
:
''
},
{
name
:
'МОЭК 40'
,
diam
:
'2.9/52'
,
diam_ed
:
''
,
grad
:
'2.5x2.5'
,
grad_ed
:
''
,
pronic
:
'17.5'
,
pronic_ed
:
''
},
{
name
:
'МОЭК 50'
,
diam
:
'3.1/52'
,
diam_ed
:
''
,
grad
:
'2.2x2.2'
,
grad_ed
:
''
,
pronic
:
'18.0'
,
pronic_ed
:
''
},
{
name
:
'МОЭК 60'
,
diam
:
'3.8/52'
,
diam_ed
:
''
,
grad
:
'2.7x2.7'
,
grad_ed
:
''
,
pronic
:
'18.5'
,
pronic_ed
:
''
}
]
},
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
]
},
menu
:
function
(
index
,
id
)
{
// alert(index);
// if((this.tab == index)&&(this.select_tab != '')){
if
(
this
.
tab
==
index
)
{
this
.
tab
=
''
this
.
marg_name
=
0
}
else
{
this
.
tab
=
index
window
.
setTimeout
(()
=>
this
.
func
(
id
),
1
)
};
this
.
select_tab
=
''
},
cont_menu
:
function
(
cont
,
id
)
{
// alert(cont);
this
.
select_tab
=
cont
},
func
:
function
(
id
)
{
this
.
marg_name
=
this
.
$refs
.
menu
.
clientHeight
},
SelectLang
(
lang
)
{
this
.
page
=
this
.
text
[
0
][
lang
]
}
}
}
</
script
>
<
style
>
/* Smartphones (вертикальная и горизонтальная ориентация) ----------- */
@media
only
screen
and
(
min-width
:
320px
)
and
(
max-width
:
480px
)
{
#equipment
{
font-family
:
'Avenir'
,
Helvetica
,
Arial
,
sans-serif
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
;
text-align
:
center
;
color
:
#2c3e50
;
}
#equipment
.section
{
background-image
:
url('../source/Background.png')
;
background-size
:
cover
;
min-height
:
100vh
;
}
#equipment
#mini_menu
{
margin
:
0
auto
;
margin-top
:
7%
;
color
:
red
;
z-index
:
100
;
}
#equipment
#mini_menu
.block_menu
{
display
:
inline-table
;
width
:
calc
(
60%
/
4
);
padding
:
7px
;
margin
:
0
auto
;
position
:
relative
;
height
:
100%
;
}
#equipment
#mini_menu
.block_menu
div
.name
{
display
:
flex
;
min-height
:
2em
;
border
:
1px
none
solid
;
transition
:
all
.2s
ease
;
}
#equipment
#mini_menu
.block_menu
div
.name
:hover
{
cursor
:
pointer
;
}
#equipment
#mini_menu
.block_menu
div
.name.active
{
color
:
rgb
(
0
,
102
,
143
);
background-color
:
rgba
(
218
,
218
,
218
,
0.808
);
}
#equipment
#mini_menu
.block_menu
div
.name.def
{
color
:
White
;
background-color
:
rgba
(
0
,
146
,
202
,
0.62
);
border
:
none
;
height
:
100%
;
}
#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
:
97%
;
margin-top
:
7px
;
position
:
absolute
;
}
#equipment
#mini_menu
.list_menu
{
color
:
white
;
display
:
inline-table
;
width
:
calc
(
100%
/
2
);
background-color
:
rgba
(
0
,
146
,
202
,
0.62
);
padding
:
0.4em
;
border
:
1px
black
solid
;
transition
:
all
.4s
ease
;
}
#equipment
#mini_menu
.list_menu
:hover
{
cursor
:
pointer
;
}
#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
;
/* margin-top: 6%; */
}
#equipment
.section
#name_page
p
{
color
:
white
;
font-size
:
2em
;
text-transform
:
uppercase
;
}
#equipment
#table_data
{
color
:
red
;
}
#equipment
#table_data
#table_data_content
{
margin
:
0
auto
;
}
#equipment
#table_data
table
{
width
:
100%
;
margin
:
0
auto
;
}
#equipment
#table_data
tr
td
{
width
:
25%
;
padding
:
.6rem
;
margin
:
0
auto
;
color
:
white
;
border
:
1px
black
solid
;
background-color
:
rgba
(
2
,
55
,
76
,
0.72
);
}
#equipment
#table_data
tr
td
p
{
margin
:
0
auto
;
width
:
60%
;
font-weight
:
600
;
padding
:
6px
;
}
#equipment
#table_data
tr
:first-child
td
p
{
font-weight
:
600
;
padding
:
0px
;
}
#equipment
#table_data
tr
td
:first-child
{
/* width: 30%; */
/* padding: 0px; */
/* width: 14%; */
}
#equipment
#table_data
td
:first-child
p
{
width
:
100%
;
}
#equipment
#table_data
#table_data_content
div
#comp
div
#component
{
/* height: 100%; */
/* max-height: 55vh; */
/* overflow: scroll; */
/* margin-bottom: 5%; */
margin-bottom
:
10%
;
}
#equipment
#footer_equipment
{
position
:
fixed
;
bottom
:
0
;
height
:
7%
;
width
:
100vw
;
background-color
:
black
;
color
:
white
;
}
#equipment
#footer_equipment
a
{
color
:
white
;
}
#equipment
#footer_equipment
a
:hover
{
color
:
white
;
cursor
:
pointer
;
}
#equipment
#footer_equipment
div
{
bottom
:
0px
;
}
#equipment
#footer_equipment
div
img
{
width
:
3%
;
margin-left
:
10px
;
margin-right
:
10px
;
}
/* Animate */
.block-menu-fade-enter-active
{
transition
:
all
.4s
ease
;
}
.block-menu-fade-leave-active
{
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
:
translateY
(
-25px
);
opacity
:
0
;
z-index
:
10
;
}
}
@media
only
screen
and
(
min-width
:
1224px
)
{
#equipment
{
font-family
:
'Avenir'
,
Helvetica
,
Arial
,
sans-serif
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
;
text-align
:
center
;
color
:
#2c3e50
;
}
#equipment
.section
{
background-image
:
url('../source/Background.png')
;
background-size
:
cover
;
min-height
:
100vh
;
}
#equipment
#mini_menu
{
margin
:
0
auto
;
margin-top
:
7%
;
color
:
red
;
z-index
:
100
;
}
#equipment
#mini_menu
.block_menu
{
display
:
inline-table
;
/* width: calc(60%/4); */
padding
:
7px
;
margin
:
0
auto
;
position
:
relative
;
height
:
100%
;
}
#equipment
#mini_menu
.block_menu
div
.name
{
display
:
flex
;
min-height
:
5em
;
border
:
1px
none
solid
;
transition
:
all
.2s
ease
;
}
#equipment
#mini_menu
.block_menu
div
.name
:hover
{
cursor
:
pointer
;
}
#equipment
#mini_menu
.block_menu
div
.name.active
{
color
:
rgb
(
0
,
102
,
143
);
background-color
:
rgba
(
218
,
218
,
218
,
0.808
);
}
#equipment
#mini_menu
.block_menu
div
.name.def
{
color
:
White
;
background-color
:
rgba
(
0
,
146
,
202
,
0.62
);
border
:
none
;
height
:
100%
;
}
#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
:
97%
;
margin-top
:
7px
;
position
:
absolute
;
}
#equipment
#mini_menu
.list_menu
{
color
:
white
;
display
:
inline-table
;
width
:
calc
(
100%
/
2
);
background-color
:
rgba
(
0
,
146
,
202
,
0.62
);
padding
:
0.4em
;
border
:
1px
black
solid
;
transition
:
all
.4s
ease
;
}
#equipment
#mini_menu
.list_menu
:hover
{
cursor
:
pointer
;
}
#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
;
/* margin-top: 6%; */
}
#equipment
.section
#name_page
p
{
color
:
white
;
font-size
:
2em
;
text-transform
:
uppercase
;
}
#equipment
#table_data
{
color
:
red
;
}
#equipment
#table_data
#table_data_content
{
margin
:
0
auto
;
}
#equipment
#table_data
table
{
width
:
100%
;
margin
:
0
auto
;
}
#equipment
#table_data
tr
td
{
width
:
25%
;
padding
:
.6rem
;
margin
:
0
auto
;
color
:
white
;
border
:
1px
black
solid
;
background-color
:
rgba
(
2
,
55
,
76
,
0.72
);
}
#equipment
#table_data
tr
td
p
{
margin
:
0
auto
;
width
:
60%
;
font-weight
:
600
;
padding
:
6px
;
}
#equipment
#table_data
tr
:first-child
td
p
{
font-weight
:
600
;
padding
:
0px
;
}
#equipment
#table_data
tr
td
:first-child
{
/* width: 30%; */
/* padding: 0px; */
/* width: 14%; */
}
#equipment
#table_data
td
:first-child
p
{
width
:
100%
;
}
#equipment
#table_data
#table_data_content
div
#comp
div
#component
{
/* height: 100%; */
/* max-height: 55vh; */
/* overflow: scroll; */
/* margin-bottom: 5%; */
margin-bottom
:
10%
;
}
#equipment
#footer_equipment
{
position
:
fixed
;
bottom
:
0
;
height
:
7%
;
width
:
100vw
;
background-color
:
black
;
color
:
white
;
}
#equipment
#footer_equipment
a
{
color
:
white
;
}
#equipment
#footer_equipment
a
:hover
{
color
:
white
;
cursor
:
pointer
;
}
#equipment
#footer_equipment
div
{
bottom
:
0px
;
}
#equipment
#footer_equipment
div
img
{
width
:
3%
;
margin-left
:
10px
;
margin-right
:
10px
;
}
/* Animate */
.block-menu-fade-enter-active
{
transition
:
all
.4s
ease
;
}
.block-menu-fade-leave-active
{
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
:
translateY
(
-25px
);
opacity
:
0
;
z-index
:
10
;
}
}
/* Большие экраны ----------- */
@media
only
screen
and
(
min-width
:
1824px
)
{
#equipment
{
font-family
:
'Avenir'
,
Helvetica
,
Arial
,
sans-serif
;
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
;
text-align
:
center
;
color
:
#2c3e50
;
}
#equipment
.section
{
background-image
:
url('../source/Background.png')
;
background-size
:
cover
;
min-height
:
100vh
;
}
#equipment
#mini_menu
{
margin
:
0
auto
;
margin-top
:
7%
;
color
:
red
;
z-index
:
100
;
}
#equipment
#mini_menu
.block_menu
{
display
:
inline-table
;
/* width: calc(60%/4); */
padding
:
7px
;
margin
:
0
auto
;
position
:
relative
;
height
:
100%
;
}
#equipment
#mini_menu
.block_menu
div
.name
{
display
:
flex
;
min-height
:
5em
;
border
:
1px
none
solid
;
transition
:
all
.2s
ease
;
}
#equipment
#mini_menu
.block_menu
div
.name
:hover
{
cursor
:
pointer
;
}
#equipment
#mini_menu
.block_menu
div
.name.active
{
color
:
rgb
(
0
,
102
,
143
);
background-color
:
rgba
(
218
,
218
,
218
,
0.808
);
}
#equipment
#mini_menu
.block_menu
div
.name.def
{
color
:
White
;
background-color
:
rgba
(
0
,
146
,
202
,
0.62
);
border
:
none
;
height
:
100%
;
}
#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
:
97%
;
margin-top
:
7px
;
position
:
absolute
;
}
#equipment
#mini_menu
.list_menu
{
color
:
white
;
display
:
inline-table
;
width
:
calc
(
100%
/
2
);
background-color
:
rgba
(
0
,
146
,
202
,
0.62
);
padding
:
0.4em
;
border
:
1px
black
solid
;
transition
:
all
.4s
ease
;
}
#equipment
#mini_menu
.list_menu
:hover
{
cursor
:
pointer
;
}
#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
;
/* margin-top: 6%; */
}
#equipment
.section
#name_page
p
{
color
:
white
;
font-size
:
2em
;
text-transform
:
uppercase
;
}
#equipment
#table_data
{
color
:
red
;
}
#equipment
#table_data
#table_data_content
{
margin
:
0
auto
;
}
#equipment
#table_data
table
{
width
:
100%
;
margin
:
0
auto
;
}
#equipment
#table_data
tr
td
{
width
:
25%
;
padding
:
.6rem
;
margin
:
0
auto
;
color
:
white
;
border
:
1px
black
solid
;
background-color
:
rgba
(
2
,
55
,
76
,
0.72
);
}
#equipment
#table_data
tr
td
p
{
margin
:
0
auto
;
width
:
60%
;
font-weight
:
600
;
padding
:
6px
;
}
#equipment
#table_data
tr
:first-child
td
p
{
font-weight
:
600
;
padding
:
0px
;
}
#equipment
#table_data
tr
td
:first-child
{
/* width: 30%; */
/* padding: 0px; */
/* width: 14%; */
}
#equipment
#table_data
td
:first-child
p
{
width
:
100%
;
}
#equipment
#table_data
#table_data_content
div
#comp
div
#component
{
/* height: 100%; */
/* max-height: 55vh; */
/* overflow: scroll; */
/* margin-bottom: 5%; */
margin-bottom
:
10%
;
}
#equipment
#footer_equipment
{
position
:
fixed
;
bottom
:
0
;
height
:
7%
;
width
:
100vw
;
background-color
:
black
;
color
:
white
;
}
#equipment
#footer_equipment
a
{
color
:
white
;
}
#equipment
#footer_equipment
a
:hover
{
color
:
white
;
cursor
:
pointer
;
}
#equipment
#footer_equipment
div
{
bottom
:
0px
;
}
#equipment
#footer_equipment
div
img
{
width
:
3%
;
margin-left
:
10px
;
margin-right
:
10px
;
}
/* Animate */
.block-menu-fade-enter-active
{
transition
:
all
.4s
ease
;
}
.block-menu-fade-leave-active
{
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
:
translateY
(
-25px
);
opacity
:
0
;
z-index
:
10
;
}
}
</
style
>
src/main.js
View file @
789f301b
...
...
@@ -11,7 +11,6 @@ new Vue({
router
,
data
:
{
mobile
:
false
,
first
:
true
,
lang
:
'English'
},
created
:
function
()
{
...
...
@@ -53,12 +52,8 @@ new Vue({
return
"English"
;
}
if
(
string
.
includes
(
"ru"
)
||
string
.
includes
(
"RU"
)
||
string
.
includes
(
"Ru"
)
)
{
return
"Russia"
;
}
string
.
includes
(
"ru"
)
||
string
.
includes
(
"RU"
)
||
string
.
includes
(
"Ru"
)
)
{
return
"Russia"
;
}
return
"English"
},
Before
:
function
()
{
...
...
src/router.js
View file @
789f301b
...
...
@@ -13,7 +13,7 @@ export default new Router({
{
path
:
'/'
,
name
:
'Main'
,
component
:
Main
},
{
path
:
'/equipment'
,
name
:
'Equipment'
,
component
:
Equipment
},
{
path
:
'/amenites'
,
name
:
'Amenites'
,
component
:
Amenites
},
{
path
:
'/contact'
,
name
:
'Contact'
,
component
:
Contact
}
{
path
:
'/contact'
,
name
:
'Contact'
,
component
:
Contact
}
,
]
})
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment