Untitled

<template>
    <div class="content">
        <header>
            <button type="button" @click="list('watch')" :class="'btn btn-dark ' + watchButton">
                Смотрю
            </button>
            <button
                type="button"
                @click="list('will')"
                :class="'btn btn-dark ' + willWatchButton"
            >
                Буду смотреть
            </button>
            <button type="button" @click="list('abandoned')" :class="'btn btn-dark ' + abandonedWatchButton">
                Брошено
            </button>
        </header>
        <div class="container">
            <div class="block" v-for="i in titles" :key="i.id" v-if="titles">
                <router-link :to="{name: 'WatchAnime', params: { id: i.id } }">
                <div
                class="image"
                :style="{ 'background-image': 'url(' + i.urlImagePreview + ')' }"
                >
                <div class="faded">
                    <div class="anime-bottom">
                    <p class="anime-name">{{ i.title.split("/")[0] }}</p>
                    <p class="anime-description">
                        {{ descr(i.description) }}
                    </p>
                    </div>
                </div>
                </div>
                </router-link>
            </div>
        </div>
    </div>
</template>
<script>
import { readDatabase } from '../api/database.js';
import { getTitleInfo } from '../api/animevost.js'
export default {
    name: 'Favorites',
    data(){
        return {
            database: readDatabase(),
            watchButton: "active",
            willWatchButton: "",
            abandonedWatchButton: "",
            titles: []
        }
    },
    created() {
        for(let i in this.database.titles){
            if(this.database.titles[i].list === "watch"){
                this.titles.push(getTitleInfo(i).data[0]);
            }
        }
    },
    methods: {
        list(obj){
            switch (obj) {
                case 'watch':
                    this.titles = [];
                    for(let i in this.database.titles){
                        if(this.database.titles[i].list === "watch"){
                            this.titles.push(getTitleInfo(i).data[0]);
                        }
                    }
                    this.watchButton = "active";
                    this.willWatchButton = "";
                    this.abandonedWatchButton = "";
                    break;
                case 'will':
                    this.titles = [];
                    for(let i in this.database.titles){
                        if(this.database.titles[i].list === "will"){
                            this.titles.push(getTitleInfo(i).data[0]);
                        }
                    }
                    this.watchButton = "";
                    this.willWatchButton = "active";
                    this.abandonedWatchButton = "";          
                break;
                case 'abandoned':
                    this.titles = [];
                    for(let i in this.database.titles){
                        if(this.database.titles[i].list === "abandoned"){
                            this.titles.push(getTitleInfo(i).data[0]);
                        }
                    }
                    this.watchButton = "";
                    this.willWatchButton = "";
                    this.abandonedWatchButton = "active";
                break;
            }
        },
        descr(d) {
            return d.toString().replaceAll("<br />", "\n").substr(0, 260) + "...";
        }
    }
}
</script>
<style scoped>
.content {
  width: 100vw;
  padding-left: 2vw;
}
header {
  width: 100%;
  height: 6em;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 2em;
}
header .btn-dark {
  margin-right: 1em;
  border: none;
}
a {
  text-decoration: none;
}
.content .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-columns: repeat(4, 21vw);
  position: absolute;
  left: 7vw;
  gap: 1em;
  padding-bottom: 10em;
}
.block {
  height: 30vw;
  width: 100%;
  background-color: #1a1e21;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
.block .image {
  width: 100%;
  height: 100%;
  background-size: cover;
  padding: 0;
  animation: zoom2 0.5s cubic-bezier(0, 0.55, 0.45, 1);
  transform: scale(1);
}
.block .image .faded {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.8813900560224089) 36%,
    rgba(0, 0, 0, 0.404079131652661) 100%
  );
  display: flex;
  align-items: flex-end;
}
.block .image:hover {
  animation: zoom1 0.5s cubic-bezier(0, 0.55, 0.45, 1);
  transform: scale(1.1);
}
.anime-bottom {
  padding: 1.3em;
}
.block .anime-bottom p {
  color: white;
  margin: 0;
}
.anime-name {
  font-weight: 500;
}
.anime-description {
  font-size: 14px;
}
@keyframes zoom1 {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}
@keyframes zoom2 {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}
@keyframes zoom3 {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.9);
  }
}
@keyframes zoom4 {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}
</style>