Untitled
unknown
javascript
a year ago
5.6 kB
5
Indexable
Never
<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>