73 lines
1.6 KiB
Vue
73 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
title: string
|
|
tier: Array<{champion: Champion, lane: LaneData}>
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div style="display: flex;">
|
|
<h2 class="tierlist-tier-title">{{ title }}</h2>
|
|
<div class="tierlist-tier-container">
|
|
<NuxtLink v-for="{champion: champion} in tier" :to="'/champion/' + champion.alias.toLowerCase()">
|
|
<div class="champion-img-container">
|
|
<NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.tierlist-tier-container {
|
|
width: 90%;
|
|
min-height: 122px;
|
|
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, 128px);
|
|
grid-gap: 10px;
|
|
|
|
align-items: center;
|
|
|
|
margin: auto;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.tierlist-tier-title {
|
|
font-size: 3.3rem;
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
margin-top: 40px;
|
|
|
|
font-weight: 300;
|
|
}
|
|
|
|
.champion-img-container {
|
|
overflow: hidden; width: 120px; height: 120px;
|
|
border: 1px solid var(--color-surface);
|
|
}
|
|
.champion-img-container:hover {
|
|
border: 1px solid var(--color-on-surface);
|
|
}
|
|
.champion-img {
|
|
width: 116px;
|
|
height: 116px;
|
|
transform: translate(4px, 4px) scale(1.2, 1.2);
|
|
|
|
user-select: none;
|
|
}
|
|
@media only screen and (max-width: 450px) {
|
|
.champion-img-container {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
.champion-img {
|
|
width: 76px;
|
|
height: 76px;
|
|
}
|
|
.tierlist-tier-container {
|
|
grid-template-columns: repeat(auto-fit, 80px);
|
|
min-height: 82px;
|
|
}
|
|
}
|
|
</style> |