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 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<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>
</head>
<body>
......
src/App.vue
View file @ 166b135c
......@@ -12,12 +12,10 @@
<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="/contact"><span>Контакты</span></router-link>
<div id="lang">
<section>
<span id="lang">
<span :class="[{ active: (select === 'Russia') }]" @click="SelectLang('Russia')">Ru</span>
<span :class="[{ active: (select === 'English') }]" @click="SelectLang('English')">En</span>
</section>
</div>
</span>
</div>
</div>
</nav>
......@@ -76,6 +74,7 @@ body{
/* position: absolute; */
padding: 1.7em;
z-index: 100;
height: 80px;
}
}
.navig span{
......@@ -104,7 +103,7 @@ a.navig:hover span{
display: table-cell;
}
.WidthNavigation.TitlesNavigation{
width: 60vw;
width: 62vw;
text-align: right;
vertical-align: middle;
}
......@@ -192,13 +191,15 @@ img#logotip{
color: white;
width: 100px;
}
.WidthNavigation.TitlesNavigation #lang section{
.WidthNavigation.TitlesNavigation #lang{
width: 10px;
display: inline;
}
.WidthNavigation.TitlesNavigation #lang span{
padding: 10px;
border-radius: 40%;
font-size: 35px;
font-size: calc( 0.01 * 100vw + 11.2px );
}
.WidthNavigation.TitlesNavigation #lang span.active{
border-radius: 40%;
......
src/components/Main.vue
View file @ 166b135c
<template>
<div id="main">
<div id="title" class="item">
<div id="block_title">
<div class="title_img">
<img class="img_on_main" src="../imgMain/pict/Earth.png" />
......@@ -9,12 +10,34 @@
</div>
</div>
<div class="strelka">
</div>
<div v-scroll-to="'#about'" class="strelka strelka_one">
<div id="arrow">
<div id="arrowleft"></div>
<div id="arrowright"></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>
</template>
......@@ -31,10 +54,18 @@
width: 100%;
/* 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{
/* width: 43vw; */
margin: 0 auto;
padding-top: 6%;
padding-top: 10%;
/* margin-right: 13%; */
display: table-cell;
}
......@@ -62,11 +93,23 @@
margin: 0 auto;
}
#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 @@
background-color: #00aeff;
}
.strelka_one{
position: absolute;
top: 87vh;
right: 47%;
}
@media only screen and (min-width: 1400px) {
.strelka{
width: 40px;
height: 40px;
width: 70px;
height: 70px;
padding: 15px;
margin-top: 13vh;
}
}
@media only screen and (max-width: 1399px) and (min-width: 1024px) {
......@@ -122,7 +168,6 @@
width: 50px;
height: 50px;
padding: 15px;
margin-top: 13vh;
}
}
@media only screen and (max-width: 1023px) and (min-width: 380px) {
......@@ -130,7 +175,6 @@
width: 50px;
height: 50px;
padding: 15px;
margin-top: 13vh;
}
}
......@@ -143,7 +187,8 @@ export default {
data () {
return {
Title:'Мы видим весь мусор в космосе!'
Title:'Мы видим весь мусор в космосе!',
About: 'Акционерное общество "Астрономический Научный Центр" образовано в 2011 году и является специализированным российским предприятием, ориентированным на:',
}
},
......@@ -154,7 +199,6 @@ export default {
methods:{
Before: function(){
this.mobile = this.$parent.mobile;
},
},
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