Skip to content

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

Main page with second slide(90%)

parent 166b135c
Show whitespace changes
Inline Side-by-side
Showing with 115 additions and 97 deletions
public/index.html
View file @ 09696283
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="ru">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<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="./favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title>site</title> <title>site</title>
</head> </head>
......
src/App.vue
View file @ 09696283
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
<nav class="container-fluid" id="navigator"> <nav class="container-fluid" id="navigator">
<div class="row"> <div class="row">
<transition name="fade"> <transition name="fade">
<div v-if="!mobile" id="logotip_div" class="WidthNavigation"> <div v-if="!mobile" id="logotip_div" class="WidthNavigation col-sm-3">
<img id="logotip" src="./source/Logo.png" /> <img id="logotip" src="./source/Logo.png" />
</div> </div>
</transition> </transition>
<div class="WidthNavigation TitlesNavigation"> <div class="WidthNavigation TitlesNavigation col-sm-7">
<router-link class="navig" to="/" exact><span>Главная</span></router-link> <router-link class="navig" to="/" exact><span>Главная</span></router-link>
<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>
...@@ -103,75 +103,10 @@ a.navig:hover span{ ...@@ -103,75 +103,10 @@ a.navig:hover span{
display: table-cell; display: table-cell;
} }
.WidthNavigation.TitlesNavigation{ .WidthNavigation.TitlesNavigation{
width: 62vw; width: 60vw;
text-align: right; text-align: right;
vertical-align: middle; vertical-align: middle;
} }
/* .Меню {
position: absolute;
left: 0px;
top: 0px;
width: 1920px;
height: 4334px;
z-index: 6;
}
.Контакты {
font-size: 30px;
font-family: "Noah";
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
-moz-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
-webkit-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
-ms-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
position: absolute;
left: 1424.35px;
top: 64.89px;
z-index: 5;
}
.Оборудование {
font-size: 30px;
font-family: "Noah";
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
-moz-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
-webkit-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
-ms-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
position: absolute;
left: 1201.532px;
top: 64.253px;
z-index: 4;
}
.Услуги {
font-size: 30px;
font-family: "Noah";
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
-moz-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
-webkit-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
-ms-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
position: absolute;
left: 1082.665px;
top: 64.753px;
z-index: 3;
}
.Главная {
font-size: 30px;
font-family: "Noah";
color: rgb(0, 146, 202);
font-weight: bold;
text-align: center;
-moz-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
-webkit-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
-ms-transform: matrix( 0.9608273770496,0,0,0.9608273770496,0,0);
position: absolute;
left: 942.966px;
top: 64.887px;
z-index: 2;
} */
.router-link-exact-active span{ .router-link-exact-active span{
color: #00aeff; color: #00aeff;
} }
...@@ -186,6 +121,9 @@ img#logotip{ ...@@ -186,6 +121,9 @@ img#logotip{
max-width: 500px; max-width: 500px;
width: 22vw; width: 22vw;
pointer-events: none; pointer-events: none;
}
@media only screen and (max-width: 1023px) and (min-width: 300px) {
} }
.WidthNavigation.TitlesNavigation #lang{ .WidthNavigation.TitlesNavigation #lang{
color: white; color: white;
......
src/components/Main.vue
View file @ 09696283
...@@ -10,30 +10,51 @@ ...@@ -10,30 +10,51 @@
</div> </div>
</div> </div>
</div>
<div v-scroll-to="'#about'" class="strelka strelka_one"> <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>
<div id="about">
<div id="about" class="item">
<div>
<div class="about_block"> <div class="about_block">
<p id="about_title">{{About}}</p> <p id="about_title">{{About}}</p>
<div class="row about_mini_block"> <div class="row about_mini_block">
<div class="col-4"> <div v-for="about in about_list" class="col-4 col-sm-12 col-md col-lg-4">
<div> <div class="about_fon_block">
<div class="about">
<div class="about_img">
<img :src="about.img" />
</div> </div>
<div class="about_text">
<p>
{{about.text}}
</p>
</div> </div>
<div class="col-4">
<div>
</div> </div>
</div> </div>
<div class="col-4"> </div>
<div> <!-- <div class="col-4 col-sm-12 col-md-12 col-lg-4">
<div class="about_fon_block">
<div class="about">
<div class="about_img">
<img src="../../public/img/icons/android-chrome-192x192.png" />
</div>
</div>
</div> </div>
</div> </div>
<div class="col-4 col-sm-12 col-md-12 col-lg-4">
<div class="about_fon_block">
<div class="about">
<div class="about_img">
<img src="../../public/img/icons/android-chrome-192x192.png" />
</div>
</div>
</div>
</div> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -51,7 +72,7 @@ ...@@ -51,7 +72,7 @@
/* height: 100vh; */ /* height: 100vh; */
} }
#main{ #main{
width: 100%; width: 100vw;
/* background-image: url('../source/Bacground.png') */ /* background-image: url('../source/Bacground.png') */
} }
#main .item{ #main .item{
...@@ -60,12 +81,12 @@ ...@@ -60,12 +81,12 @@
height: 100vh; height: 100vh;
} }
#main #title{ #main #title{
height: calc( 1 * 100vh - 80px ); height: calc( 0.9 * 100vh - 80px );
} }
#main #block_title{ #main #block_title{
/* width: 43vw; */ /* width: 43vw; */
margin: 0 auto; margin: 0 auto;
padding-top: 10%; padding-top: 12%;
/* margin-right: 13%; */ /* margin-right: 13%; */
display: table-cell; display: table-cell;
} }
...@@ -93,12 +114,17 @@ ...@@ -93,12 +114,17 @@
margin: 0 auto; margin: 0 auto;
} }
#main #title { #main #title {
font-size: calc( 0.03 * 100vw + 19.2px ); font-size: calc( 0.04 * 100vw + 19.2px );
}
#main #about{
/* margin-top: -1.9vh; */
height: calc( 0.9 * 100vh);
} }
#main .about_block{ #main .about_block{
margin: 0 auto; margin: 0 auto;
padding-top: 10vh; padding-top: 5vh;
width: 60%; width: 60%;
} }
#main .about_block p#about_title{ #main .about_block p#about_title{
...@@ -108,8 +134,45 @@ ...@@ -108,8 +134,45 @@
font-weight: bold; font-weight: bold;
} }
#main .about_block .about_mini_block{ #main .about_block .about_mini_block{
margin-top:14vh; margin-top:6vh;
}
#main .about_block .about_mini_block .about_fon_block{
margin:10px;
background-color: rgba(25, 45, 54, 0.8);
/* height: 500px; */
padding: 10px;
height: 100%;
padding-bottom: 0;
margin-bottom: 0;
}
#main .about_block .about_mini_block .about_fon_block .about{
width: 90%;
margin: 0 auto;
} }
#main .about_block .about_mini_block .about_fon_block .about .about_img{
padding: 20px;
border-bottom: 2px solid white;
}
#main .about_block .about_mini_block .about_fon_block .about .about_img img{
width: 90%;
}
#main .about_block .about_mini_block .about_fon_block .about .about_text{
padding: 10%;
padding-bottom: 0;
margin-bottom: 0;
}
#main .about_block .about_mini_block .about_fon_block .about .about_text p{
color: white;
text-align: justify;
font-size: calc( 0.009 * 100vw);
font-weight: bold;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
...@@ -151,11 +214,15 @@ ...@@ -151,11 +214,15 @@
} }
.strelka_one{ .strelka_one{
position: absolute; margin-top: 100px;
top: 87vh; margin-left: calc(50% - 25px);
right: 47%; }
@media only screen and (min-height: 1400px) {
.strelka_one{
/* position: absolute; */
margin-left: calc(50% - 25px);
}
} }
@media only screen and (min-width: 1400px) { @media only screen and (min-width: 1400px) {
.strelka{ .strelka{
width: 70px; width: 70px;
...@@ -187,12 +254,25 @@ export default { ...@@ -187,12 +254,25 @@ export default {
data () { data () {
return { return {
publicPath: process.env.BASE_URL,
Title:'Мы видим весь мусор в космосе!', Title:'Мы видим весь мусор в космосе!',
About: 'Акционерное общество "Астрономический Научный Центр" образовано в 2011 году и является специализированным российским предприятием, ориентированным на:', About: 'Акционерное общество "Астрономический Научный Центр" образовано в 2011 году и является специализированным российским предприятием, ориентированным на:',
about_list: [
{
img: '~../../img/icons/android-chrome-192x192.png',
text: 'Создание и эксплуатацию автоматизированных оптико-электронных систем наблюдения за космическими объектами (искусственного и естественного происхождения)'
},
{
img: '~../../img/icons/android-chrome-192x192.png',
text: 'Создание автоматизированных систем обработки информации о космических объектах осуществляющих орбитальный полет, сопутствующие им в запуске элементы конструкции, фрагменты их разрушений'
},
{
img: '~../../img/icons/android-chrome-192x192.png',
text: 'Оценку космической обстановки по траектории выведения и орбитального движения космических аппаратов в интересах спутниковых операторов'
},
],
} }
}, },
created: function (){ created: function (){
this.Before(); this.Before();
}, },
...@@ -202,6 +282,6 @@ export default { ...@@ -202,6 +282,6 @@ export default {
}, },
}, },
watch:{ watch:{
} },
} }
</script> </script>
\ No newline at end of file
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