|
- <template>
- <div class="weband">
- <section class="cover">
- </section>
-
- <section v-for="album in albums" v-bind:key="album.title" class="album" v-on:click="albumSelected(album)">
- <div>{{album.title}} | {{album.year}}</div>
- <img :src="album.cover"/>
- </section>
-
-
- <section class="icono-2">
-
- </section>
-
- <section class="contact">
- <span>contact<span class="point">@</span>{{this.artist.toLowerCase()}}<span class="point">.</span>space</span>
- <footer class="flex-center">
- dede<span class='point'>.</span>space<span class='pipe'>|</span>{{new Date().getFullYear()}}
- </footer>
- </section>
-
- <Player v-bind:album="currentAlbum"/>
-
- </div>
- </template>
-
- <script>
-
- import Player from './Player.vue'
- import * as data from '../data.json';
-
- export default {
- name: 'Weband',
- props: {
- msg: String
- },
- components: {
- Player
- },
- data: function () {
- return {
- artist: data.artist,
- albums: data.albums,
- currentAlbum: data.albums[0]
- }
- },
-
- methods: {
- albumSelected: function(album){
- this.currentAlbum = album;
- }
- }
- }
- </script>
-
- <style scoped>
-
-
- @import '../assets/css/_variables.css';
-
-
- .point {
- margin: 0px var(--pretty-margin);
- }
-
- .pipe {
- margin: 0px calc(3 * var(--pretty-margin));
- }
-
- section{
- height: 100vh;
- background-color: var(--main-color);
- color: var(--text-color);
- }
-
- section h2 {
- font-size: 2rem;
- }
-
- section.cover{
- background : url(../assets/images/icono_1.png) no-repeat center center;
- }
-
- section.album{
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-around;
- cursor: pointer;
-
- }
- section.album img{
- max-height: 80vh;
- max-width: 80vh;
- border : 2px solid var(--secondary-color);
- }
-
-
- section.icono-2{
- background : url(../assets/images/icono_2.png) no-repeat center center;
- }
-
- section.contact{
- display : flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- position :relative;
- color:var(--secondary-color);
-
- }
-
-
- footer{
- font-size: 0.92rem;
- position: absolute;
- width: 100%;
- bottom: 0;
- text-align: center;
- }
-
- .hidden{
- display: none;
- }
- </style>
|