84 lines
1.6 KiB
Vue
84 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"
|
|
:key="champion.alias"
|
|
: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>
|