forked from lukas.helcl/kolotoc
8 changed files with 145 additions and 21 deletions
After Width: | Height: | Size: 8.8 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 6.9 KiB |
After Width: | Height: | Size: 7.0 KiB |
After Width: | Height: | Size: 9.6 KiB |
@ -1,28 +1,103 @@ |
|||||
<template> |
<template> |
||||
<div id="app"> |
<div id="app"> |
||||
<img alt="Vue logo" src="./assets/logo.png"> |
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/> |
|
||||
|
<div v-on:click="backImg" class="arrow left"> |
||||
|
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background: new 0 0 512 512" xml:space="preserve" > <g> <g> <path d="M492,236H68.442l70.164-69.824c7.829-7.792,7.859-20.455,0.067-28.284c-7.792-7.83-20.456-7.859-28.285-0.068 l-104.504,104c-0.007,0.006-0.012,0.013-0.018,0.019c-7.809,7.792-7.834,20.496-0.002,28.314c0.007,0.006,0.012,0.013,0.018,0.019 l104.504,104c7.828,7.79,20.492,7.763,28.285-0.068c7.792-7.829,7.762-20.492-0.067-28.284L68.442,276H492 c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" /> </g> </g> </svg> |
||||
|
</div> |
||||
|
<div class="box-with-img"> |
||||
|
<h1> {{ images[index].title }} </h1> |
||||
|
<img :src="images[index].src" alt="" /> |
||||
|
<p> {{ images[index].text }} </p> |
||||
|
</div> |
||||
|
<div v-on:click="nextImg" class="arrow right"> |
||||
|
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background: new 0 0 512 512" xml:space="preserve" > <g> <g> <path d="M492,236H68.442l70.164-69.824c7.829-7.792,7.859-20.455,0.067-28.284c-7.792-7.83-20.456-7.859-28.285-0.068 l-104.504,104c-0.007,0.006-0.012,0.013-0.018,0.019c-7.809,7.792-7.834,20.496-0.002,28.314c0.007,0.006,0.012,0.013,0.018,0.019 l104.504,104c7.828,7.79,20.492,7.763,28.285-0.068c7.792-7.829,7.762-20.492-0.067-28.284L68.442,276H492 c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" /> </g> </g> </svg> |
||||
|
</div> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import HelloWorld from './components/HelloWorld.vue' |
|
||||
|
|
||||
|
|
||||
export default { |
export default { |
||||
name: 'App', |
|
||||
components: { |
|
||||
HelloWorld |
|
||||
} |
|
||||
} |
|
||||
|
name: "App", |
||||
|
data: function () { |
||||
|
return { |
||||
|
images: [ |
||||
|
{ |
||||
|
src: "/img/thumb_01.jpg", |
||||
|
title: "Titulek 1", |
||||
|
text: "Tohle je obrázek 1", |
||||
|
}, |
||||
|
{ |
||||
|
src: "/img/thumb_02.jpg", |
||||
|
title: "Titulek 2", |
||||
|
text: "Tohle je obrázek 2", |
||||
|
}, |
||||
|
{ |
||||
|
src: "/img/thumb_03.jpg", |
||||
|
title: "Titulek 3", |
||||
|
text: "Tohle je obrázek 3", |
||||
|
}, |
||||
|
{ |
||||
|
src: "/img/thumb_04.jpg", |
||||
|
title: "Titulek 4", |
||||
|
text: "Tohle je obrázek 4", |
||||
|
}, |
||||
|
{ |
||||
|
src: "/img/thumb_05.jpg", |
||||
|
title: "Titulek 5", |
||||
|
text: "Tohle je obrázek 5", |
||||
|
}, |
||||
|
], |
||||
|
index: 0, |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
nextImg: function () { |
||||
|
this.index += 1; |
||||
|
if (this.index > this.images.length - 1) { |
||||
|
this.index = 0; |
||||
|
} |
||||
|
}, |
||||
|
backImg: function () { |
||||
|
this.index -= 1; |
||||
|
if (this.index < 0) { |
||||
|
this.index = this.images.length - 1; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style> |
<style> |
||||
#app { |
#app { |
||||
font-family: Avenir, Helvetica, Arial, sans-serif; |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
text-align: center; |
|
||||
color: #2c3e50; |
|
||||
margin-top: 60px; |
|
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
height: 90vh; |
||||
|
} |
||||
|
.box-with-img { |
||||
|
width: 30%; |
||||
|
height: 50%; |
||||
|
} |
||||
|
.box-with-img img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.arrow { |
||||
|
width: 50px; |
||||
|
height: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.arrow.left { |
||||
|
padding-top: 37px; |
||||
|
padding-right: 15px; |
||||
|
} |
||||
|
.arrow.right { |
||||
|
padding-top: 37px; |
||||
|
padding-left: 15px; |
||||
|
} |
||||
|
.arrow.right svg { |
||||
|
transform: rotate(180deg); |
||||
} |
} |
||||
</style> |
</style> |
||||
|
Loading…
Reference in new issue