Skip to content

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

Add New Component and Create Transition

parent b8b262fd
Hide whitespace changes
Inline Side-by-side
Showing with 448 additions and 14 deletions
src/comp.vue → src/Devices/MOES19.vue
View file @ 98cfa61b
<template>
<div id="information">
<div id="nineteen" v-if="nameComp=='19'">
<h1 >19</h1>
<h1 >19</h1>
<h1 >19</h1>
<h1 >19</h1>
</div>
<div id="twentyfive" v-if="nameComp=='25'">
<h1 >25</h1>
<h1 >25</h1>
<h1 >25</h1>
<h1 >25</h1>
<h1 >25</h1>
<h1 >25</h1>
<h1 >25</h1>
<h1 >25</h1>
<h1 >25</h1>
<h1 >25</h1>
<h1 >25</h1>
<h1 >25</h1>
<h1 >25</h1>
<h1 >25</h1>
</div>
<div id="MOES19">
<div id="nineteen">
<h1 >19</h1>
<h1 >19</h1>
<h1 >19</h1>
<h1 >19</h1>
</div>
</div>
</template>
<script>
export default {
props:{
nameComp:{
type: String,
required: true,
}
},
data () {
return {
msg: 'obj',
......@@ -49,15 +27,15 @@ h1{
color:aqua;
font-size: 11em;
}
#information{
#MOES19{
height: 100%;
/* width: 100%; */
background-color: red;
}
#information #nineteen{
#MOES19 #nineteen{
}
#information #twentyfive{
#MOES19 #twentyfive{
}
</style>
src/Devices/MOES25.vue 0 → 100644
View file @ 98cfa61b
<template>
<div id="MOES25">
<div id="nineteen">
<h1 >25</h1>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'obj',
}
},
methods:{
}
}
</script>
<style>
h1{
color:aqua;
font-size: 11em;
}
#MOES25{
height: 100%;
/* width: 100%; */
background-color: red;
}
#MOES25 #twentyfive{
}
</style>
src/Devices/MOES30.vue 0 → 100644
View file @ 98cfa61b
<template>
<div id="MOES19">
<div id="nineteen">
<h1 >19</h1>
<h1 >19</h1>
<h1 >19</h1>
<h1 >19</h1>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'obj',
}
},
methods:{
}
}
</script>
<style>
h1{
color:aqua;
font-size: 11em;
}
#MOES19{
height: 100%;
/* width: 100%; */
background-color: red;
}
#MOES19 #nineteen{
}
#MOES19 #twentyfive{
}
</style>
src/Devices/MOES40.vue 0 → 100644
View file @ 98cfa61b
<template>
<div id="MOES19">
<div id="nineteen">
<h1 >19</h1>
<h1 >19</h1>
<h1 >19</h1>
<h1 >19</h1>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'obj',
}
},
methods:{
}
}
</script>
<style>
h1{
color:aqua;
font-size: 11em;
}
#MOES19{
height: 100%;
/* width: 100%; */
background-color: red;
}
#MOES19 #nineteen{
}
#MOES19 #twentyfive{
}
</style>
src/Devices/MOES50.vue 0 → 100644
View file @ 98cfa61b
<template>
<div id="MOES19">
<div id="nineteen">
<h1 >19</h1>
<h1 >19</h1>
<h1 >19</h1>
<h1 >19</h1>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'obj',
}
},
methods:{
}
}
</script>
<style>
h1{
color:aqua;
font-size: 11em;
}
#MOES19{
height: 100%;
/* width: 100%; */
background-color: red;
}
#MOES19 #nineteen{
}
#MOES19 #twentyfive{
}
</style>
src/Devices/MOES65.vue 0 → 100644
View file @ 98cfa61b
<template>
<div id="MOES19">
<div id="nineteen">
<h1 >19</h1>
<h1 >19</h1>
<h1 >19</h1>
<h1 >19</h1>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'obj',
}
},
methods:{
}
}
</script>
<style>
h1{
color:aqua;
font-size: 11em;
}
#MOES19{
height: 100%;
/* width: 100%; */
background-color: red;
}
#MOES19 #nineteen{
}
#MOES19 #twentyfive{
}
</style>
src/Devices/PU30.vue 0 → 100644
View file @ 98cfa61b
<template>
<div id="MOES19">
<div id="nineteen">
<h1 >19</h1>
<h1 >19</h1>
<h1 >19</h1>
<h1 >19</h1>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'obj',
}
},
methods:{
}
}
</script>
<style>
h1{
color:aqua;
font-size: 11em;
}
#MOES19{
height: 100%;
/* width: 100%; */
background-color: red;
}
#MOES19 #nineteen{
}
#MOES19 #twentyfive{
}
</style>
src/Devices/PUEO-M.vue 0 → 100644
View file @ 98cfa61b
<template>
<div id="MOES19">
<div id="nineteen">
<h1 >19</h1>
<h1 >19</h1>
<h1 >19</h1>
<h1 >19</h1>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'obj',
}
},
methods:{
}
}
</script>
<style>
h1{
color:aqua;
font-size: 11em;
}
#MOES19{
height: 100%;
/* width: 100%; */
background-color: red;
}
#MOES19 #nineteen{
}
#MOES19 #twentyfive{
}
</style>
src/Devices/PhotoDevice.vue 0 → 100644
View file @ 98cfa61b
<template>
<div id="MOES19">
<div id="nineteen">
<h1 >19</h1>
<h1 >19</h1>
<h1 >19</h1>
<h1 >19</h1>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'obj',
}
},
methods:{
}
}
</script>
<style>
h1{
color:aqua;
font-size: 11em;
}
#MOES19{
height: 100%;
/* width: 100%; */
background-color: red;
}
#MOES19 #nineteen{
}
#MOES19 #twentyfive{
}
</style>
src/Devices/SupportRotateDevice.vue 0 → 100644
View file @ 98cfa61b
<template>
<div id="MOES19">
<div id="nineteen">
<h1 >19</h1>
<h1 >19</h1>
<h1 >19</h1>
<h1 >19</h1>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'obj',
}
},
methods:{
}
}
</script>
<style>
h1{
color:aqua;
font-size: 11em;
}
#MOES19{
height: 100%;
/* width: 100%; */
background-color: red;
}
#MOES19 #nineteen{
}
#MOES19 #twentyfive{
}
</style>
src/Main.vue
View file @ 98cfa61b
......@@ -140,8 +140,8 @@
v-on:click="currentTab = tab.value"> {{tab.name}} </p>
</div>
<div class="about info">
<transition name="component-year" mode="out-in">
<objectsComp :nameComp="currentTab" />
<transition name="component-fade" mode="out-in">
<component :is="currentTab" />
</transition>
</div>
</div>
......@@ -319,6 +319,18 @@ div#logo img{
width: 100%;
object-fit: cover;
}
.component-fade-enter-active, .component-fade-leave-active {
transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active до версии 2.1.8 */ {
opacity: 0;
}
#equipment{
margin-top: 2em;
/* height: 100%; */
......@@ -347,14 +359,32 @@ div#logo img{
</style>
<script>
import ololo from './svgMain.vue';
import objectsComp from './comp.vue';
import MOES19 from './Devices/MOES19.vue';
import MOES25 from './Devices/MOES25.vue';
import MOES30 from './Devices/MOES30.vue';
import MOES40 from './Devices/MOES40.vue';
import MOES50 from './Devices/MOES50.vue';
import MOES65 from './Devices/MOES65.vue';
import PU30 from './Devices/PU30.vue';
import PHOTODEVICE from './Devices/PhotoDevice.vue';
import PUEO from './Devices/PUEO-M.vue';
import SUPPORTROTATEDEVICE from './Devices/SupportRotateDevice.vue';
export default {
name: 'app',
components: {
ololo,
objectsComp,
MOES19,
MOES25,
MOES30,
MOES40,
MOES50,
MOES65,
PU30,
PHOTODEVICE,
PUEO,
SUPPORTROTATEDEVICE,
},
data () {
return {
......@@ -379,18 +409,18 @@ export default {
{id: 'Milkovo', name: "Мильково, Камчатский кр.", obj: "Телескоп - ORI-22 (22 см)"},
{id: 'Brazil', name: "Бразилия, Южная Америка", obj: "Телескоп - ORI-22 (22 см)"},
],
currentTab: '19',
currentTab: 'MOES19',
tabs:[
{name: 'МОЭС-19', value: '19' },
{name: 'МОЭС-25', value: '25' },
{name: 'МОЭС-30', value: '30' },
{name: 'МОЭС-40', value: '40' },
{name: 'МОЭС-50', value: '50' },
{name: 'МОЭС-65', value: '65' },
{name: 'МОЭС-19', value: 'MOES19' },
{name: 'МОЭС-25', value: 'MOES25' },
{name: 'МОЭС-30', value: 'MOES30' },
{name: 'МОЭС-40', value: 'MOES40' },
{name: 'МОЭС-50', value: 'MOES50' },
{name: 'МОЭС-65', value: 'MOES65' },
{name: 'Павильон укрытие ПУ-30', value: 'PU30' },
{name: 'Павильон укрытие ПУЭО-М', value: 'PUEO-M' },
{name: 'Фотоприемыное устройство', value: 'PD' },
{name: 'Опорно-поворотное устройство', value: 'SRD' },
{name: 'Павильон укрытие ПУЭО-М', value: 'PUEO' },
{name: 'Фотоприемное устройство', value: 'PhotoDevice' },
{name: 'Опорно-поворотное устройство', value: 'SupportRotateDevice' },
]
}
......
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