153 lines
7.1 KiB
Vue
153 lines
7.1 KiB
Vue
<script setup lang="ts">
|
|
import { Head } from '@inertiajs/vue3';
|
|
import { onMounted, nextTick } from 'vue';
|
|
import UserLayout from '../../layouts/user/userlayout.vue';
|
|
|
|
type Guild = { id:number; name:string; tag:string; logo_url?:string|null; points:number; members_count:number };
|
|
|
|
const props = defineProps<{ guilds: Guild[] }>();
|
|
|
|
onMounted(() => nextTick(() => { if (window.lucide) window.lucide.createIcons(); }));
|
|
</script>
|
|
|
|
<template>
|
|
<UserLayout>
|
|
<Head :title="$t('guilds.top_title')" />
|
|
<section class="content">
|
|
<div class="wrap">
|
|
<div class="panel main-panel">
|
|
<header class="page-head">
|
|
<div class="head-flex">
|
|
<div class="title-group">
|
|
<div class="title">{{ $t('guilds.top_title') }}</div>
|
|
<p class="subtitle">{{ $t('guilds.top_desc') }}</p>
|
|
</div>
|
|
<div class="trophy-icon">
|
|
<i data-lucide="trophy"></i>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="list-container">
|
|
<div class="list-header-row">
|
|
<div class="col rank">{{ $t('guilds.rank') }}</div>
|
|
<div class="col guild">{{ $t('guilds.guild') }}</div>
|
|
<div class="col spacer"></div>
|
|
<div class="col stat">{{ $t('guilds.points') }}</div>
|
|
<div class="col stat">{{ $t('guilds.members_col') }}</div>
|
|
</div>
|
|
|
|
<div class="list">
|
|
<div v-for="(g, i) in props.guilds" :key="g.id" class="row" :class="`rank-${i+1}`">
|
|
<div class="rank-cell">
|
|
<span v-if="i < 3" class="medal">
|
|
<i data-lucide="medal" v-if="i===0" class="gold"></i>
|
|
<i data-lucide="medal" v-if="i===1" class="silver"></i>
|
|
<i data-lucide="medal" v-if="i===2" class="bronze"></i>
|
|
</span>
|
|
<span v-else class="num">#{{ i+1 }}</span>
|
|
</div>
|
|
|
|
<div class="logo-cell">
|
|
<div class="logo" :style="{ backgroundImage: g.logo_url ? `url(${g.logo_url})` : '' }">
|
|
<span v-if="!g.logo_url">{{ g.tag?.[0] || 'G' }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="name-cell">
|
|
<div class="g-name">{{ g.name }}</div>
|
|
<div class="g-tag">[{{ g.tag }}]</div>
|
|
</div>
|
|
|
|
<div class="spacer"></div>
|
|
|
|
<div class="stat-cell points">
|
|
<i data-lucide="zap" class="stat-icon"></i>
|
|
<span>{{ g.points.toLocaleString() }}</span>
|
|
</div>
|
|
|
|
<div class="stat-cell members">
|
|
<i data-lucide="users" class="stat-icon"></i>
|
|
<span>{{ g.members_count }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="!props.guilds?.length" class="empty-state">
|
|
<i data-lucide="shield-off"></i>
|
|
<p>{{ $t('guilds.no_guilds') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</UserLayout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:global(:root) { --bg-card:#0a0a0a; --border:#151515; --cyan:#00f2ff; --magenta:#ff007a; --green:#00ff9d; --gold:#f7931a; --silver:#c0c0c0; --bronze:#cd7f32; }
|
|
|
|
.content { padding: 30px; animation: fade-in 0.8s cubic-bezier(0.2, 0, 0, 1); }
|
|
.wrap { max-width: 1000px; margin: 0 auto; }
|
|
.main-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.6); }
|
|
|
|
/* Header */
|
|
.page-head { padding: 25px 30px; border-bottom: 1px solid var(--border); background: linear-gradient(to right, rgba(247,147,26,0.05), transparent); }
|
|
.head-flex { display: flex; justify-content: space-between; align-items: center; }
|
|
.title { font-size: 14px; font-weight: 900; color: #fff; letter-spacing: 3px; text-transform: uppercase; }
|
|
.subtitle { color: #555; font-size: 12px; margin-top: 4px; font-weight: 600; }
|
|
.trophy-icon { width: 40px; height: 40px; background: rgba(247,147,26,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold); border: 1px solid rgba(247,147,26,0.2); }
|
|
|
|
/* List Header */
|
|
.list-container { padding: 20px; }
|
|
.list-header-row { display: flex; padding: 0 20px 10px; border-bottom: 1px solid #151515; margin-bottom: 10px; font-size: 10px; font-weight: 900; color: #555; text-transform: uppercase; letter-spacing: 1px; }
|
|
.col.rank { width: 60px; text-align: center; }
|
|
.col.guild { width: 200px; }
|
|
.col.spacer { flex: 1; }
|
|
.col.stat { width: 100px; text-align: right; }
|
|
|
|
/* List Items */
|
|
.list { display: flex; flex-direction: column; gap: 8px; }
|
|
.row { display: flex; align-items: center; background: #050505; border: 1px solid var(--border); border-radius: 14px; padding: 12px 20px; transition: 0.2s; }
|
|
.row:hover { transform: translateX(5px); border-color: #333; background: #0a0a0a; }
|
|
|
|
/* Rank Styling */
|
|
.rank-cell { width: 60px; display: flex; justify-content: center; align-items: center; font-weight: 900; font-size: 14px; color: #444; }
|
|
.medal i { width: 20px; height: 20px; }
|
|
.gold { color: var(--gold); filter: drop-shadow(0 0 5px rgba(247,147,26,0.5)); }
|
|
.silver { color: var(--silver); filter: drop-shadow(0 0 5px rgba(192,192,192,0.5)); }
|
|
.bronze { color: var(--bronze); filter: drop-shadow(0 0 5px rgba(205,127,50,0.5)); }
|
|
|
|
/* Top 3 Highlights */
|
|
.rank-1 { border-color: rgba(247,147,26,0.3); background: linear-gradient(90deg, rgba(247,147,26,0.05), transparent); }
|
|
.rank-2 { border-color: rgba(192,192,192,0.2); }
|
|
.rank-3 { border-color: rgba(205,127,50,0.2); }
|
|
|
|
.logo-cell { margin-right: 15px; }
|
|
.logo { width: 42px; height: 42px; border-radius: 12px; background: #000 center/cover no-repeat; border: 1px solid #222; display: grid; place-items: center; font-weight: 900; color: #666; }
|
|
|
|
.name-cell { display: flex; flex-direction: column; }
|
|
.g-name { color: #fff; font-weight: 800; font-size: 13px; }
|
|
.g-tag { color: var(--cyan); font-size: 10px; font-weight: 700; }
|
|
|
|
.spacer { flex: 1; }
|
|
|
|
.stat-cell { width: 100px; text-align: right; font-weight: 800; font-size: 13px; color: #ccc; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
|
|
.stat-icon { width: 14px; color: #444; }
|
|
.points { color: var(--gold); }
|
|
.points .stat-icon { color: var(--gold); opacity: 0.5; }
|
|
|
|
.empty-state { padding: 40px; text-align: center; color: #444; display: flex; flex-direction: column; align-items: center; gap: 10px; }
|
|
.empty-state i { width: 32px; height: 32px; opacity: 0.5; }
|
|
|
|
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
|
|
@media (max-width: 700px) {
|
|
.list-header-row { display: none; }
|
|
.row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; padding: 15px; }
|
|
.rank-cell { width: 30px; }
|
|
.stat-cell { width: auto; font-size: 11px; }
|
|
.stat-cell.members { display: none; } /* Hide members count on very small screens */
|
|
}
|
|
</style>
|