Skip to content

N
NewSite
Commit b2736233 authored by Sergey Serov's avatar Sergey Serov
Browse files
Options

Site

parent 0ee53504
Show whitespace changes
Inline Side-by-side
Showing with 177 additions and 84 deletions
index.html
View file @ b2736233
...@@ -60,32 +60,8 @@ ...@@ -60,32 +60,8 @@
#app div.section:nth-child(1){ #app div.section{
background-image: url('https://avatars.mds.yandex.net/get-pdb/1365646/1a872a74-7d13-4e55-9e63-f989750c7be1/s1200') ; background-image: url('./Background.jpg') ;
background-size: cover;
}
#app div.section:nth-child(2){
background-image: url('https://avatars.mds.yandex.net/get-pdb/33827/52103529-0bac-4df4-a5a2-09100d3a0817/s1200') ;
background-size: cover;
}
#app div.section:nth-child(3){
background-image: url('http://winallos.com/uploads/posts/2014-07/1406595737_663959-1920x1200.jpg') ;
background-size: cover;
}
#app div.section:nth-child(4){
background-image: url('https://hdqwalls.com/download/nebula-halo-planet-digital-space-art-7t-2560x1024.jpg') ;
background-size: cover;
}
#app div.section:nth-child(5){
background-image: url('https://hdwallpaperim.com/wp-content/uploads/2017/08/22/358584-universe-stars-space.jpg') ;
background-size: cover;
}
#app div.section:nth-child(6){
background-image: url('https://playntrade-a.akamaihd.net/jbimg/eee17aa844400c6e3f1bd6133a16a5a4.jpg') ;
background-size: cover;
}
#app div.section:nth-child(7){
background-image: url('https://images.wallpaperscraft.ru/image/planeta_oblaka_svet_zvezdy_94996_1680x1050.jpg') ;
background-size: cover; background-size: cover;
} }
......
src/Main.vue
View file @ b2736233
...@@ -3,12 +3,13 @@ ...@@ -3,12 +3,13 @@
<full-page ref="fullpage" :options="options" id="fullpage"> <full-page ref="fullpage" :options="options" id="fullpage">
<div class="section"> <div class="section">
<div> <div v-if="!mobile">
<ololo :item="item" @move="move" /> <ololo :item="item" @move="move" />
</div> </div>
</div> </div>
<div class="section"> <div class="section">
<div style="display: table-cell; vertical-align: middle; width: 100vw; height: 100vh; background-color: rgba(0, 149, 255, 0.3);">
<div> <div>
<div class="col-sm-11 col-md-11 col-lg-8" id="content"> <div class="col-sm-11 col-md-11 col-lg-8" id="content">
<div id="logo"><img src="./imgMain/LogoWhite.png"></div> <div id="logo"><img src="./imgMain/LogoWhite.png"></div>
...@@ -23,6 +24,7 @@ ...@@ -23,6 +24,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="section"> <div class="section">
<div id="work"> <div id="work">
<div class="col-sm-11 col-md-11 col-lg-9"> <div class="col-sm-11 col-md-11 col-lg-9">
...@@ -144,7 +146,8 @@ ...@@ -144,7 +146,8 @@
<div class="section"> <div class="section">
<div class="col-sm-12 col-md-12 col-lg-12" id="map"> <div class="col-sm-12 col-md-12 col-lg-12" id="map">
<div class="title"><h1>Оптические пункты наблюдения</h1></div> <div class="title"><h1>Оптические пункты наблюдения</h1></div>
<div id="world"> <div v-if="!mobile" id="worldmap">
<img id="worldmap" src="./imgMain/Map.png" />
<div class="point" id="Kislovodsk"> <div class="point" id="Kislovodsk">
<div style="display:inline-block"> <div style="display:inline-block">
<span> <span>
...@@ -165,7 +168,7 @@ ...@@ -165,7 +168,7 @@
<div style="display:inline-block"> <div style="display:inline-block">
<span> <span>
<span class="PlaceName"> <span class="PlaceName">
Лесосибирск, Красноярский кр. \n Лесосибирск, Красноярский кр.
</span><br> </span><br>
<span class="PlaceTelescope"> <span class="PlaceTelescope">
Телескоп - ORI-22 (22 см) Телескоп - ORI-22 (22 см)
...@@ -240,6 +243,64 @@ ...@@ -240,6 +243,64 @@
</div> </div>
</div> </div>
</div> </div>
<div id="moblie_version" v-else>
<div>
<div id="block">
<div class="image" style="display:inline-block">
<img src="./imgMain/EOP1/1.jpg" />
</div>
<div class="description" style="display:inline-block">
<p>Кисловодск, Северный Кавказ</p>
<p>Телескоп - VT-78 (19.2 см)</p>
</div>
</div>
<div id="block">
<div class="image" style="display:inline-block">
<img src="./imgMain/EOP1/3.jpg" />
</div>
<div class="description" style="display:inline-block">
<p>Лесосибирск, Красноярский кр.</p>
<p>Телескоп - ORI-22 (22 см)</p>
</div>
</div>
<div id="block">
<div class="image" style="display:inline-block">
<img src="./imgMain/EOP1/3.jpg" />
</div>
<div class="description" style="display:inline-block">
<p>Артем, Приморский кр.</p>
<p>Телескоп - ORI-25 (25 см)</p>
</div>
</div>
<div id="block">
<div class="image" style="display:inline-block">
<img src="./imgMain/EOP2/2.jpg" />
</div>
<div class="description" style="display:inline-block">
<p>Благовещенск, Амурская обл.</p>
<p>Телескопы: ORI-25 (25 см);ORI-22 (22 см).</p>
</div>
</div>
<div id="block">
<div class="image" style="display:inline-block">
<img src="./imgMain/EOP2/1.jpg" />
</div>
<div class="description" style="display:inline-block">
<p>Мильково, Камчатский кр.</p>
<p>Телескоп - ORI-22 (22 см)</p>
</div>
</div>
<div id="block">
<div class="image" style="display:inline-block">
<img src="./imgMain/EOP2/2.jpg" />
</div>
<div class="description" style="display:inline-block">
<p>Бразилия, Южная Америка</p>
<p>Телескоп - ORI-22 (22 см)</p>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="section"> <div class="section">
...@@ -353,7 +414,7 @@ svg#MainSVG{ ...@@ -353,7 +414,7 @@ svg#MainSVG{
font-weight: 600; font-weight: 600;
} }
#MainSVG .ololo:hover text{ #MainSVG .ololo:hover text{
color:#035fac; color:#00aeff;
} }
...@@ -417,7 +478,7 @@ div#logo img{ ...@@ -417,7 +478,7 @@ div#logo img{
#tech_eop1:first-child{ #tech_eop1:first-child{
background-color: rgba(255,255,255,0.335); background-color: rgba(0, 174, 255, 0.3);
padding-top: 7vh; padding-top: 7vh;
padding-bottom: 3vh; padding-bottom: 3vh;
} }
...@@ -441,7 +502,8 @@ div#logo img{ ...@@ -441,7 +502,8 @@ div#logo img{
} }
#tech_eop1 #tech1_text #eop1_for{ #tech_eop1 #tech1_text #eop1_for{
font-size: 220%; font-size: 220%;
color:blue; color:#00aeff;
font-family: 'BebasNeue';
text-transform: uppercase; text-transform: uppercase;
} }
#tech_eop1 #tech1_text div div img{ #tech_eop1 #tech1_text div div img{
...@@ -468,7 +530,7 @@ div#logo img{ ...@@ -468,7 +530,7 @@ div#logo img{
#tech_eop2:first-child{ #tech_eop2:first-child{
background-color: rgba(255,255,255,0.335); background-color: rgba(0, 174, 255, 0.3);
padding-top: 7vh; padding-top: 7vh;
padding-bottom: 3vh; padding-bottom: 3vh;
} }
...@@ -504,7 +566,8 @@ div#logo img{ ...@@ -504,7 +566,8 @@ div#logo img{
} }
#tech_eop2 #tech2_text p#eop2_for{ #tech_eop2 #tech2_text p#eop2_for{
font-size: 220%; font-size: 220%;
color:blue; color:#00aeff;
font-family: 'BebasNeue';
text-transform: uppercase; text-transform: uppercase;
} }
#tech_eop2 #tech2_text img{ #tech_eop2 #tech2_text img{
...@@ -524,50 +587,56 @@ div#logo img{ ...@@ -524,50 +587,56 @@ div#logo img{
} }
#map{ #map{
max-height: 80vh; position:relative;
height: 80vh;
} }
#map div.title{ #map div.title{
font-weight: bold; font-weight: bold;
color: white; font-family: 'BebasNeueBold';
color: #00aeff;
font-size: 38px; font-size: 38px;
text-transform: uppercase; text-transform: uppercase;
font-stretch: semi-condensed; font-stretch: semi-condensed;
margin-top: 4vh; margin-top: 4vh;
margin-bottom: -3vh;
} }
#map #world{ #map #worldmap{
width: 80vw; width: 100vw;
min-height: 83vh; height: 100vh;
background-image: url('./imgMain/Map.png') ; position:relative;
background-size: cover; max-width: 1920px;
max-height: 1080px;
}
#map #worldmap img#worldmap{
width: 100%;
object-fit: fill;
} }
#map div.point{ #map div.point{
position: absolute; position: absolute;
display: inline; display: inline;
} }
#map div.point#Kislovodsk{ #map div.point#Kislovodsk{
left: 45%; left: 46%;
top: 41%; top: 32%;
} }
#map div.point#Lesosibirsk{ #map div.point#Lesosibirsk{
left: 51%; left: 59%;
top: 24%; top: 21%;
} }
#map div.point#Artem{ #map div.point#Artem{
left: 68%; left: 73%;
top: 44%; top: 37%;
} }
#map div.point#Blagoveshensk{ #map div.point#Blagoveshensk{
left: 61%; left: 64%;
top: 34%; top: 29%;
} }
#map div.point#Milkovo{ #map div.point#Milkovo{
left: 71%; left: 80%;
top: 23%; top: 24%;
} }
#map div.point#Brazil{ #map div.point#Brazil{
left: 23%; left: 22%;
top: 75%; top: 70%;
} }
#map div.point img{ #map div.point img{
width: 4vw; width: 4vw;
...@@ -581,23 +650,44 @@ div#logo img{ ...@@ -581,23 +650,44 @@ div#logo img{
border: 2.5px solid red; border: 2.5px solid red;
border-radius: 50%; border-radius: 50%;
margin-top:-20px; margin-top:-20px;
/* background: mistyrose; */
} }
#map div.point div span.PlaceName{ #map div.point div span.PlaceName{
font-size: 131%; font-size: 131%;
color:aqua; color:#00aeff;
font-family: 'BebasNeueBold'; font-family: 'BebasNeueBold';
text-transform: uppercase; text-transform: uppercase;
text-align: justify; text-align: justify;
} }
#map div.point div span.PlaceTelescope{ #map div.point div span.PlaceTelescope{
font-size: 131%; font-size: 131%;
color: aqua; color: #00aeff;
font-family: 'BebasNeue'; font-family: 'BebasNeue';
text-transform: uppercase; text-transform: uppercase;
text-align: justify; text-align: justify;
} }
div#map div#block{
height: 10%;
width: 100%;
margin: 0px;
margin-top: 0.7vh;
background-color: rgba(0, 174, 255, 0.3);
}
div#map div#block img{
width: 98%;
object-fit: cover;
}
div#map div#block .image{
width: 30vw;
}
div#map div#block .description{
margin-top: 0.5vh;
color:#ffffff;
font-family: 'BebasNeue';
width: 68%;
font-size: 2rem;
}
#base div.title{ #base div.title{
color: rgb(255, 0, 0); color: rgb(255, 0, 0);
font-family: 'BebasNeueBold'; font-family: 'BebasNeueBold';
...@@ -633,7 +723,7 @@ div#logo img{ ...@@ -633,7 +723,7 @@ div#logo img{
margin-top: 2vh; margin-top: 2vh;
} }
#base #Position{ #base #Position{
background-color: rgba(91, 167, 255, 0.616); background-color: rgba(0, 174, 255, 0.3);
margin-left: 0px; margin-left: 0px;
margin-right: 0px; margin-right: 0px;
padding: 0; padding: 0;
...@@ -692,7 +782,6 @@ div#footer div img{ ...@@ -692,7 +782,6 @@ div#footer div img{
div#footer a{ div#footer a{
color: white; color: white;
} }
</style> </style>
<script> <script>
...@@ -710,12 +799,19 @@ export default { ...@@ -710,12 +799,19 @@ export default {
}, },
msg: 'Main', msg: 'Main',
item: [], item: [],
mobile: false,
} }
},
created: function (){
this.Before();
}, },
methods:{ methods:{
Before: function(){
this.mobile = this.$parent.mobile;
},
move: function(section){ move: function(section){
this.$refs.fullpage.api.moveTo(section) this.$refs.fullpage.api.moveTo(section)
} },
} }
} }
</script> </script>
......
src/main.js
View file @ b2736233
...@@ -35,9 +35,30 @@ new Vue({ ...@@ -35,9 +35,30 @@ new Vue({
components: { components: {
MainSVG, MainSVG,
}, },
data:{
mobile: false,
},
created: function (){
this.Before();
},
methods:{ methods:{
Up: function(){ Up: function(){
this.$refs.page.move(1) this.$refs.page.move(1)
},
isMobileOrTablet: function(){
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
return check;
},
Before: function(){
if (this.isMobileOrTablet()) {
console.log("ready");
this.mobile = true;
// код для мобильных устройств
} else {
// код для обычных устройств
}
} }
} }
}) })
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