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>
<html lang="en">
<html lang="ru">
<head>
<meta charset="utf-8">
<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="icon" href="./favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title>site</title>
</head>
......
src/App.vue
View file @ 09696283
......@@ -3,11 +3,11 @@
<nav class="container-fluid" id="navigator">
<div class="row">
<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" />
</div>
</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="/product"><span>Оборудование</span></router-link>
<router-link class="navig" to="/files"><span>Услуги</span></router-link>
......@@ -103,75 +103,10 @@ a.navig:hover span{
display: table-cell;
}
.WidthNavigation.TitlesNavigation{
width: 62vw;
width: 60vw;
text-align: right;
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{
color: #00aeff;
}
......@@ -186,6 +121,9 @@ img#logotip{
max-width: 500px;
width: 22vw;
pointer-events: none;
}
@media only screen and (max-width: 1023px) and (min-width: 300px) {
}
.WidthNavigation.TitlesNavigation #lang{
color: white;
......
src/components/Main.vue
View file @ 09696283
......@@ -10,30 +10,51 @@
</div>
</div>
</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>
<div id="about" class="item">
<div>
<div class="about_block">
<p id="about_title">{{About}}</p>
<div class="row about_mini_block">
<div class="col-4">
<div>
<div v-for="about in about_list" class="col-4 col-sm-12 col-md col-lg-4">
<div class="about_fon_block">
<div class="about">
<div class="about_img">
<img :src="about.img" />
</div>
<div class="about_text">
<p>
{{about.text}}
</p>
</div>
<div class="col-4">
<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 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>
......@@ -51,7 +72,7 @@
/* height: 100vh; */
}
#main{
width: 100%;
width: 100vw;
/* background-image: url('../source/Bacground.png') */
}
#main .item{
......@@ -60,12 +81,12 @@
height: 100vh;
}
#main #title{
height: calc( 1 * 100vh - 80px );
height: calc( 0.9 * 100vh - 80px );
}
#main #block_title{
/* width: 43vw; */
margin: 0 auto;
padding-top: 10%;
padding-top: 12%;
/* margin-right: 13%; */
display: table-cell;
}
......@@ -93,12 +114,17 @@
margin: 0 auto;
}
#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{
margin: 0 auto;
padding-top: 10vh;
padding-top: 5vh;
width: 60%;
}
#main .about_block p#about_title{
......@@ -108,8 +134,45 @@
font-weight: bold;
}
#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 @@
}
.strelka_one{
position: absolute;
top: 87vh;
right: 47%;
margin-top: 100px;
margin-left: calc(50% - 25px);
}
@media only screen and (min-height: 1400px) {
.strelka_one{
/* position: absolute; */
margin-left: calc(50% - 25px);
}
}
@media only screen and (min-width: 1400px) {
.strelka{
width: 70px;
......@@ -187,12 +254,25 @@ export default {
data () {
return {
publicPath: process.env.BASE_URL,
Title:'Мы видим весь мусор в космосе!',
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 (){
this.Before();
},
......@@ -202,6 +282,6 @@ export default {
},
},
watch:{
}
},
}
</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