87 lines
2.1 KiB
Vue
Executable File
87 lines
2.1 KiB
Vue
Executable File
<template>
|
|
<div class="intro">
|
|
<h1 style="color:white;margin-left: 20px;">F1 Drivers</h1>
|
|
<p style="color:white;margin-left: 20px;">Find the Formula 1 drivers for the 2025 season</p>
|
|
</div>
|
|
<el-skeleton v-if="loading" :rows="4" animated />
|
|
<el-empty v-else-if="error || !drivers.length" description="暂无数据" />
|
|
<div v-else class="showcase">
|
|
<template v-for="driver in drivers" :key="driver.id">
|
|
<div class="card-wrapper" @click="goDriver(driver.id)">
|
|
<DriverCard :name="driver.name" :nation="driver.nation" :num="driver.num" :image="getImage(driver.name)"
|
|
:color="getColor(driver.team)" :team="driver.team" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import DriverCard from '@/components/DriverCard.vue'
|
|
import { getColor, getImage } from '@/assets/source'
|
|
import { useDriversStore } from '@/store/SeasonDrivers'
|
|
|
|
const router = useRouter()
|
|
const loading = ref(true)
|
|
const error = ref('')
|
|
const drivers = ref<any[]>([])
|
|
const driversStore = useDriversStore()
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
driversStore.ensureDriversLoaded()
|
|
drivers.value = driversStore.driversList.map((d: any) => ({
|
|
id: d.id,
|
|
name: d.name,
|
|
team: d.team,
|
|
nation: d.country,
|
|
num: d.carNum,
|
|
birth: d.birthday
|
|
}))
|
|
} catch (e) {
|
|
error.value = '加载失败'
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
|
|
const goDriver = (id: number) => {
|
|
router.push(`/drivers/${id}`)
|
|
}
|
|
|
|
/* import { drivers } from '@/assets/source' */
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@font-face {
|
|
font-family: 'F1';
|
|
src: url('../assets/Formula1-Black.woff2') format('woff2');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
.intro h1 {
|
|
font-size: 40px;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.intro p {
|
|
font-size: 20px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.showcase {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
column-gap: 20px;
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.card-wrapper:hover {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|