Skip to content

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

Main page with second slide(40%)

parent 220d585a
Show whitespace changes
Inline Side-by-side
Showing with 72 additions and 26 deletions
public/index.html
View file @ 166b135c
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title>site</title> <title>site</title>
</head> </head>
<body> <body>
......
src/App.vue
View file @ 166b135c
...@@ -12,12 +12,10 @@ ...@@ -12,12 +12,10 @@
<router-link class="navig" to="/product"><span>Оборудование</span></router-link> <router-link class="navig" to="/product"><span>Оборудование</span></router-link>
<router-link class="navig" to="/files"><span>Услуги</span></router-link> <router-link class="navig" to="/files"><span>Услуги</span></router-link>
<router-link class="navig" to="/contact"><span>Контакты</span></router-link> <router-link class="navig" to="/contact"><span>Контакты</span></router-link>
<div id="lang"> <span id="lang">
<section>
<span :class="[{ active: (select === 'Russia') }]" @click="SelectLang('Russia')">Ru</span> <span :class="[{ active: (select === 'Russia') }]" @click="SelectLang('Russia')">Ru</span>
<span :class="[{ active: (select === 'English') }]" @click="SelectLang('English')">En</span> <span :class="[{ active: (select === 'English') }]" @click="SelectLang('English')">En</span>
</section> </span>
</div>
</div> </div>
</div> </div>
</nav> </nav>
...@@ -76,6 +74,7 @@ body{ ...@@ -76,6 +74,7 @@ body{
/* position: absolute; */ /* position: absolute; */
padding: 1.7em; padding: 1.7em;
z-index: 100; z-index: 100;
height: 80px;
} }
} }
.navig span{ .navig span{
...@@ -104,7 +103,7 @@ a.navig:hover span{ ...@@ -104,7 +103,7 @@ a.navig:hover span{
display: table-cell; display: table-cell;
} }
.WidthNavigation.TitlesNavigation{ .WidthNavigation.TitlesNavigation{
width: 60vw; width: 62vw;
text-align: right; text-align: right;
vertical-align: middle; vertical-align: middle;
} }
...@@ -192,13 +191,15 @@ img#logotip{ ...@@ -192,13 +191,15 @@ img#logotip{
color: white; color: white;
width: 100px; width: 100px;
} }
.WidthNavigation.TitlesNavigation #lang section{ .WidthNavigation.TitlesNavigation #lang{
width: 10px; width: 10px;
display: inline;
} }
.WidthNavigation.TitlesNavigation #lang span{ .WidthNavigation.TitlesNavigation #lang span{
padding: 10px; padding: 10px;
border-radius: 40%; border-radius: 40%;
font-size: 35px; font-size: 35px;
font-size: calc( 0.01 * 100vw + 11.2px );
} }
.WidthNavigation.TitlesNavigation #lang span.active{ .WidthNavigation.TitlesNavigation #lang span.active{
border-radius: 40%; border-radius: 40%;
......
src/components/Main.vue
View file @ 166b135c
<template> <template>
<div id="main"> <div id="main">
<div id="title" class="item">
<div id="block_title"> <div id="block_title">
<div class="title_img"> <div class="title_img">
<img class="img_on_main" src="../imgMain/pict/Earth.png" /> <img class="img_on_main" src="../imgMain/pict/Earth.png" />
...@@ -9,12 +10,34 @@ ...@@ -9,12 +10,34 @@
</div> </div>
</div> </div>
<div class="strelka"> </div>
<div v-scroll-to="'#about'" class="strelka strelka_one">
<div id="arrow"> <div id="arrow">
<div id="arrowleft"></div> <div id="arrowleft"></div>
<div id="arrowright"></div> <div id="arrowright"></div>
</div> </div>
</div> </div>
<div class="item">
<div id="about">
<div class="about_block">
<p id="about_title">{{About}}</p>
<div class="row about_mini_block">
<div class="col-4">
<div>
</div>
</div>
<div class="col-4">
<div>
</div>
</div>
<div class="col-4">
<div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
...@@ -31,10 +54,18 @@ ...@@ -31,10 +54,18 @@
width: 100%; width: 100%;
/* background-image: url('../source/Bacground.png') */ /* background-image: url('../source/Bacground.png') */
} }
#main .item{
/* width: 85%; */
margin: 0 auto;
height: 100vh;
}
#main #title{
height: calc( 1 * 100vh - 80px );
}
#main #block_title{ #main #block_title{
/* width: 43vw; */ /* width: 43vw; */
margin: 0 auto; margin: 0 auto;
padding-top: 6%; padding-top: 10%;
/* margin-right: 13%; */ /* margin-right: 13%; */
display: table-cell; display: table-cell;
} }
...@@ -62,11 +93,23 @@ ...@@ -62,11 +93,23 @@
margin: 0 auto; margin: 0 auto;
} }
#main #title { #main #title {
font-size: calc( 0.05 * 100vw + 11.2px ); font-size: calc( 0.03 * 100vw + 19.2px );
} }
#main .about_block{
margin: 0 auto;
padding-top: 10vh;
width: 60%;
}
#main .about_block p#about_title{
text-transform: uppercase;
font-size: calc( 0.01 * 100vmin + 19.2px );
color: white;
font-weight: bold;
}
#main .about_block .about_mini_block{
margin-top:14vh;
}
...@@ -107,14 +150,17 @@ ...@@ -107,14 +150,17 @@
background-color: #00aeff; background-color: #00aeff;
} }
.strelka_one{
position: absolute;
top: 87vh;
right: 47%;
}
@media only screen and (min-width: 1400px) { @media only screen and (min-width: 1400px) {
.strelka{ .strelka{
width: 40px; width: 70px;
height: 40px; height: 70px;
padding: 15px; padding: 15px;
margin-top: 13vh;
} }
} }
@media only screen and (max-width: 1399px) and (min-width: 1024px) { @media only screen and (max-width: 1399px) and (min-width: 1024px) {
...@@ -122,7 +168,6 @@ ...@@ -122,7 +168,6 @@
width: 50px; width: 50px;
height: 50px; height: 50px;
padding: 15px; padding: 15px;
margin-top: 13vh;
} }
} }
@media only screen and (max-width: 1023px) and (min-width: 380px) { @media only screen and (max-width: 1023px) and (min-width: 380px) {
...@@ -130,7 +175,6 @@ ...@@ -130,7 +175,6 @@
width: 50px; width: 50px;
height: 50px; height: 50px;
padding: 15px; padding: 15px;
margin-top: 13vh;
} }
} }
...@@ -143,7 +187,8 @@ export default { ...@@ -143,7 +187,8 @@ export default {
data () { data () {
return { return {
Title:'Мы видим весь мусор в космосе!' Title:'Мы видим весь мусор в космосе!',
About: 'Акционерное общество "Астрономический Научный Центр" образовано в 2011 году и является специализированным российским предприятием, ориентированным на:',
} }
}, },
...@@ -154,7 +199,6 @@ export default { ...@@ -154,7 +199,6 @@ export default {
methods:{ methods:{
Before: function(){ Before: function(){
this.mobile = this.$parent.mobile; this.mobile = this.$parent.mobile;
}, },
}, },
watch:{ watch:{
......
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