Skip to content

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

Main page

parent 89e94e1c
Show whitespace changes
Inline Side-by-side
Showing with 150 additions and 34 deletions
src/components/Main.vue
View file @ 16533a9c
...@@ -23,15 +23,43 @@ ...@@ -23,15 +23,43 @@
<div class="about_block col-sm-10 col-md-8 col-lg-8"> <div class="about_block col-sm-10 col-md-8 col-lg-8">
<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 style="margin: 0 auto; margin-bottom: 10px;" v-for="about in about_list" class="col-sm-9 col-md-12 col-lg-4"> <div style="margin: 0 auto; margin-bottom: 10px;" class="col-sm-9 col-md-12 col-lg-4">
<div class="about_fon_block"> <div class="about_fon_block">
<div class="about"> <div class="about">
<div class="about_img"> <div class="about_img">
<img :src="about.img" /> <img src="../source/About_one.png" />
</div> </div>
<div class="about_text"> <div class="about_text">
<p> <p>
{{about.text}} {{about_list[0].text}}
</p>
</div>
</div>
</div>
</div>
<div style="margin: 0 auto; margin-bottom: 10px;" class="col-sm-9 col-md-12 col-lg-4">
<div class="about_fon_block">
<div class="about">
<div class="about_img">
<img src="../source/About_two.png" />
</div>
<div class="about_text">
<p>
{{about_list[1].text}}
</p>
</div>
</div>
</div>
</div>
<div style="margin: 0 auto; margin-bottom: 10px;" class="col-sm-9 col-md-12 col-lg-4">
<div class="about_fon_block">
<div class="about">
<div class="about_img">
<img src="../source/About_three.png" />
</div>
<div class="about_text">
<p>
{{about_list[2].text}}
</p> </p>
</div> </div>
</div> </div>
...@@ -114,9 +142,6 @@ ...@@ -114,9 +142,6 @@
</div> </div>
<div v-if="!mobile" id="earth" class="col-sm-12 col-md-12 col-lg-6"> <div v-if="!mobile" id="earth" class="col-sm-12 col-md-12 col-lg-6">
<div class="graf"> <div class="graf">
<div id="planet">
<img src="../source/planet.png" alt="">
</div>
<div id="left"> <div id="left">
<div id="Naklon"></div> <div id="Naklon"></div>
<div id="Gorizont"></div> <div id="Gorizont"></div>
...@@ -127,6 +152,14 @@ ...@@ -127,6 +152,14 @@
<div id="Gorizont"></div> <div id="Gorizont"></div>
<div id="Circle"></div> <div id="Circle"></div>
</div> </div>
<div id="planet">
<div id="img_planet"><img src="../source/planet.png" alt=""></div>
<div id="text_planet">
<p>
{{text_planet}}
</p>
</div>
</div>
</div> </div>
</div> </div>
<div id="blag" class="col-sm-12 col-md-6 col-lg-3 blocks_base"> <div id="blag" class="col-sm-12 col-md-6 col-lg-3 blocks_base">
...@@ -163,6 +196,7 @@ ...@@ -163,6 +196,7 @@
</div> </div>
</div> </div>
<div id="footer"> <div id="footer">
<div id="footer_position">
<div class="footer"> <div class="footer">
<span> <span>
{{footer_tel_mail}} {{footer_tel_mail}}
...@@ -178,6 +212,7 @@ ...@@ -178,6 +212,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<style> <style>
...@@ -250,7 +285,7 @@ ...@@ -250,7 +285,7 @@
#main .about_block{ #main .about_block{
margin: 0 auto; margin: 0 auto;
padding-top: 5vh; margin-top: 5vh;
width: 60%; width: 60%;
} }
#main .about_block p#about_title{ #main .about_block p#about_title{
...@@ -279,11 +314,11 @@ ...@@ -279,11 +314,11 @@
margin: 0 auto; margin: 0 auto;
} }
#main .about_block .about_mini_block .about_fon_block .about .about_img{ #main .about_block .about_mini_block .about_fon_block .about .about_img{
padding: 20px; padding: 37px;
border-bottom: 2px solid white; border-bottom: 2px solid white;
} }
#main .about_block .about_mini_block .about_fon_block .about .about_img img{ #main .about_block .about_mini_block .about_fon_block .about .about_img img{
width: 90%; width: 50%;
} }
#main .about_block .about_mini_block .about_fon_block .about .about_text{ #main .about_block .about_mini_block .about_fon_block .about .about_text{
padding: 10%; padding: 10%;
...@@ -371,9 +406,9 @@ ...@@ -371,9 +406,9 @@
/* BASE */ /* BASE */
#main #base{ #main #base{
height: 100vh;
margin: 0 auto; margin: 0 auto;
padding-top: 10%; padding-top: 10%;
min-height: 90vh;
} }
#main #base_block{ #main #base_block{
margin: 0 auto; margin: 0 auto;
...@@ -401,19 +436,95 @@ ...@@ -401,19 +436,95 @@
} }
#main #base #earth .graf{ #main #base #earth .graf{
height: 100%; height: 100%;
position: relative;
/* background-color: #00aeff; */ /* background-color: #00aeff; */
} }
#main #base #earth .graf #planet{
position: absolute;
height: 73%;
}
#main #base #earth .graf #planet img{ #main #base #earth .graf #planet img{
width: 67%; width: 67%;
} }
#main #base #earth .graf #planet div#img_planet{
height: 100%;
}
#main #base #earth .graf #planet div#text_planet{
height: 37%;
width: 90%;
margin: 0 auto;
margin-top: 5%;
}
#main #base #earth .graf #planet div#text_planet p{
color: white;
font-weight: bold;
text-transform: uppercase;
font-size: calc( 0.013 * 100vmin + 7px );
}
#main #base #earth .graf #left{ #main #base #earth .graf #left{
position: absolute;
left: 2%;
top: 0%;
width: 100%;
height: 50%;
}
#main #base #earth .graf #left #Circle{
position: absolute;
width: 2.5%;
height: 5%;
border-radius: 50%;
border: 3px solid white;
left: -2%;
top: -2%;
}
#main #base #earth .graf #left #Naklon{
position: absolute;
height: 3px;
width: 20%;
background-color: white;
transform: rotate(30deg);
transform-origin: top left;
left: 22%;
}
#main #base #earth .graf #left #Gorizont{
position: absolute;
height: 3px;
width: 22%;
background-color: white;
} }
#main #base #earth .graf #right{
#main #base #earth .graf #right{
position: absolute;
right: 0%;
top: 0%;
width: 100%;
height: 50%;
}
#main #base #earth .graf #right #Circle{
position: absolute;
width: 2.5%;
height: 5%;
border-radius: 50%;
border: 3px solid white;
right: -1%;
top: -2%;
}
#main #base #earth .graf #right #Naklon{
position: absolute;
height: 3px;
width: 20%;
background-color: white;
transform: rotate(-30deg);
transform-origin: top right;
right: 23.4%;
}
#main #base #earth .graf #right #Gorizont{
position: absolute;
height: 3px;
width: 22%;
background-color: white;
right: 1.4%;
} }
...@@ -461,7 +572,7 @@ ...@@ -461,7 +572,7 @@
.strelka_one{ .strelka_one{
margin-top: 100px; margin-top: 2%;
margin-left: calc(50% - 25px); margin-left: calc(50% - 25px);
} }
.strelka_two{ .strelka_two{
...@@ -473,7 +584,7 @@ ...@@ -473,7 +584,7 @@
margin-left: calc(50% - 25px); margin-left: calc(50% - 25px);
} }
.strelka_four{ .strelka_four{
margin-top: 30px; margin-top: 60px;
margin-left: calc(50% - 25px); margin-left: calc(50% - 25px);
transform: rotate(180deg); transform: rotate(180deg);
} }
...@@ -514,11 +625,15 @@ ...@@ -514,11 +625,15 @@
#main #footer{ #main #footer{
height: 7vh; height: 11vh;
width: 100vw; width: 100vw;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
background: black; background: black;
position: relative;
}
#main #footer #footer_position{
margin-left: 5%;
} }
#main #footer span{ #main #footer span{
font-size: calc(0.5 * 100% + 12px); font-size: calc(0.5 * 100% + 12px);
...@@ -532,6 +647,7 @@ ...@@ -532,6 +647,7 @@
width: 50px; width: 50px;
}#main #footer div.footer.img{ }#main #footer div.footer.img{
padding: 30px; padding: 30px;
/* margin-left: calc(0.04 * 100% + 12px); */
} }
</style> </style>
<script> <script>
...@@ -547,15 +663,15 @@ export default { ...@@ -547,15 +663,15 @@ export default {
About: 'Акционерное общество "Астрономический Научный Центр" образовано в 2011 году и является специализированным российским предприятием, ориентированным на:', About: 'Акционерное общество "Астрономический Научный Центр" образовано в 2011 году и является специализированным российским предприятием, ориентированным на:',
about_list: [ about_list: [
{ {
img: '~../../img/icons/android-chrome-192x192.png', img: '../source/About_one.png',
text: 'Создание и эксплуатацию автоматизированных оптико-электронных систем наблюдения за космическими объектами ( искусственного и естественного происхождения )' text: 'Создание и эксплуатацию автоматизированных оптико-электронных систем наблюдения за космическими объектами ( искусственного и естественного происхождения )'
}, },
{ {
img: '~../../img/icons/android-chrome-192x192.png', img: '../source/About_two.png',
text: 'Создание автоматизированных систем обработки информации о космических объектах осуществляющих орбитальный полет, сопутствующие им в запуске элементы конструкции, фрагменты их разрушений' text: 'Создание автоматизированных систем обработки информации о космических объектах осуществляющих орбитальный полет, сопутствующие им в запуске элементы конструкции, фрагменты их разрушений'
}, },
{ {
img: '~../../img/icons/android-chrome-192x192.png', img: '../source/About_three.png',
text: 'Оценку космической обстановки по траектории выведения и орбитального движения космических аппаратов в интересах спутниковых операторов' text: 'Оценку космической обстановки по траектории выведения и орбитального движения космических аппаратов в интересах спутниковых операторов'
}, },
], ],
...@@ -617,8 +733,8 @@ export default { ...@@ -617,8 +733,8 @@ export default {
value3: 'Часовой пояс: UTC+9', value3: 'Часовой пояс: UTC+9',
}, },
mount2:[], text_planet: 'АО "АНЦ" имеет собственные обсерватории, размещенные в Карачаево-Черсессии ( гора Шидзатмаз ) и в районе г. Благовещенск Амурской области',
footer_tel_mail: ' +7 (495) 641 5135 / info@ancprotek.ru ', footer_tel_mail: ' +7 (495) 641 51 35 / info@ancprotek.ru ',
footer_address: 'Россия, Москва, шоссе Энтузиастов, 56с25' footer_address: 'Россия, Москва, шоссе Энтузиастов, 56с25'
} }
}, },
......
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