colden/formula1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

formula project

Browse Source
This commit is contained in:
colden
2025-12-20 12:20:43 +08:00
commit 28e1507889
156 changed files with 7444 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

410
frontend/src/views/TeamDetail.vue Executable file
View File

@@ -0,0 +1,410 @@
<template>
<div class="team-detail" v-if="team">
<div class="header" :style="{ background: getColor(team.name) }">
<div class="horizontal-bar1">
<svg viewBox="0 0 1000 500" preserveAspectRatio="none">
<rect x="0" y="0" width="350" height="15" fill="white" opacity="1" />
<rect x="0" y="18" width="350" height="15" fill="white" opacity="1" />
</svg>
</div>
<div class="horizontal-bar2">
<svg viewBox="0 0 1000 500" preserveAspectRatio="none">
<rect x="0" y="0" width="350" height="15" fill="white" opacity="1" />
<rect x="0" y="18" width="350" height="15" fill="white" opacity="1" />
</svg>
</div>
<div class="car">
<img :src="getCarImage(team.name)" alt="car">
</div>
<div class="info">
<h1>{{ team.name }}</h1>
<div class="meta">{{ team.country }}</div>
<div class="drivers"><span>{{ team_sttt.drivers[0] }}</span><span> | </span><span>{{ team_sttt.drivers[1] }}</span></div>
<img :src="getLogo(team.name)" alt="logo" class="logo">
</div>
</div>
<div class="stat">
<div class="drivershow">
<h2>车手</h2>
<div 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.country" :num="driver.carNum" :image="getImage(driver.name)"
:color="getColor(team.name)" :team="team.name" />
</div>
</template>
</div>
<div class="redgap"></div>
<div class="redgap"></div>
</div>
<div class="bio">
<div class="intro">
<h2>简介<br></br>2025赛季</h2>
<div class="content">
<div class="content-row line">
<div class="content-col">
<span class="label">赛季排名</span><br>
<span class="value">{{ team_sttt.rank }}</span>
</div>
<div class="content-col">
<span class="label">赛季得分</span><br>
<span class="value">{{ team_sttt.total_score }}</span>
</div>
</div>
<div class="content-row">
<div class="content-col">
<span class="label">正赛次数</span><br>
<span class="value">{{ team_sttt.formal.totalCnt }}</span>
</div>
<div class="content-col">
<span class="label">正赛积分</span><br>
<span class="value">{{ team_sttt.formal.scoreSum }}</span>
</div>
</div>
<div class="content-row">
<div class="content-col">
<span class="label">正赛胜场</span><br>
<span class="value">{{ team_sttt.formal.gold }}</span>
</div>
<div class="content-col">
<span class="label">正赛领奖台</span><br>
<span class="value">{{ team_sttt.formal.medal }}</span>
</div>
</div>
<div class="content-row">
<div class="content-col">
<span class="label">正赛杆位</span><br>
<span class="value">{{ team_sttt.formal.pole }}</span>
</div>
<div class="content-col">
<span class="label">正赛前十</span><br>
<span class="value">{{ team_sttt.formal.topTen }}</span>
</div>
</div>
<div class="content-row line">
<div class="content-col">
<span class="label">最快单圈</span><br>
<span class="value">{{ team_sttt.formal.fastestLap }}</span>
</div>
<div class="content-col">
<span class="label">未完赛</span><br>
<span class="value">{{ team_sttt.formal.unfinished }}</span>
</div>
</div>
<div class="content-row">
<div class="content-col">
<span class="label">冲刺赛次数</span><br>
<span class="value">{{ team_sttt.sprint.totalCnt }}</span>
</div>
<div class="content-col">
<span class="label">冲刺赛积分</span><br>
<span class="value">{{ team_sttt.sprint.scoreSum }}</span>
</div>
</div>
<div class="content-row">
<div class="content-col">
<span class="label">冲刺赛胜场</span><br>
<span class="value">{{ team_sttt.sprint.gold }}</span>
</div>
<div class="content-col">
<span class="label">冲刺赛领奖台</span><br>
<span class="value">{{ team_sttt.sprint.medal }}</span>
</div>
</div>
<div class="content-row line">
<div class="content-col">
<span class="label">冲刺赛杆位</span><br>
<span class="value">{{ team_sttt.sprint.pole }}</span>
</div>
<div class="content-col">
<span class="label">冲刺赛前十</span><br>
<span class="value">{{ team_sttt.sprint.topTen }}</span>
</div>
</div>
</div>
<div class="toresult">
<el-button type="primary" @click="goResult">详细比赛结果</el-button>
</div>
</div>
<div class="statics">
<h2>生涯数据</h2>
<div class="content">
<div class="statics-row line">
<span class="item">参加比赛场次</span>
<span class="itemvalue">{{ tc?.races }}</span>
</div>
<div class="statics-row line">
<span class="item">历史积分</span>
<span class="itemvalue">{{ tc?.points }}</span>
</div>
<div class="statics-row line">
<span class="item">最佳完赛成绩</span>
<span class="itemvalue">{{ tc?.hf }}</span>
</div>
<div class="statics-row line">
<span class="item">领奖台数</span>
<span class="itemvalue">{{ tc?.podiums }}</span>
</div>
<div class="statics-row line">
<span class="item">最佳发车位次</span>
<span class="itemvalue">{{ tc?.hg }}</span>
</div>
<div class="statics-row line">
<span class="item">杆位数</span>
<span class="itemvalue">{{ tc?.polepositions }}</span>
</div>
<div class="statics-row">
<span class="item">世界冠军数</span>
<span class="itemvalue">{{ tc?.wc }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="actions">
<el-button @click="goBack">返回</el-button>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getColor, getCarImage, getLogo, getImage } from '@/assets/source'
import DriverCard from '@/components/DriverCard.vue'
import { team_career } from '@/assets/source'
const route = useRoute()
const router = useRouter()
const team = ref<any>()
const drivers = ref<any[]>([])
const team_sttt = ref<any>()
const tc = computed(() => team_career.find((t: any) => t.name === team.value.name))
onMounted(async () => {
const id = Number(route.params.id)
try {
const [teamRes, driverRes] = await Promise.all([
fetch('/api/teams'),
fetch('/api/season-drivers?season=2025')
])
const teamJson = await teamRes.json()
const driverJson = await driverRes.json()
const teamList = Array.isArray(teamJson) ? teamJson : (teamJson?.data ?? [])
const driverList = Array.isArray(driverJson) ? driverJson : (driverJson?.data ?? [])
team.value = teamList.find((t: any) => (t.id ?? t.teamId) === id)
const sttRes = await fetch(`/api/teams/${id}/statistics?season=2025`)
team_sttt.value = await sttRes.json()
drivers.value = driverList.filter((d: any) => team_sttt.value.drivers.includes(d.name))
} catch (e) {
team.value = undefined
drivers.value = []
}
})
const goDriver = (id: number) => {
router.push(`/drivers/${id}`)
}
const goBack = () => {
router.push('/teams')
}
const goResult = () => {
const t = team.value
if (!t) return
router.push(`/teams/${t.id}/results`)
}
</script>
<style scoped lang="scss">
.team-detail {
padding: 20px;
}
.header {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
border-radius: 20px 20px 0 0;
position: relative;
height: 600px;
overflow: hidden;
}
.horizontal-bar1,
.horizontal-bar2 {
position: absolute;
width: 100%;
height: 100%;
}
.horizontal-bar1 {
top: 350px;
left: 0;
}
.horizontal-bar2 {
top: 350px;
left: 65%;
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.logo {
width: 50px;
height: 50px;
margin-top: 50px;
}
.info h1 {
font-size: 50px;
}
.meta {
color: #666;
}
.drivers {
margin-top: 6px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0 10px;
}
.drivers span:first-child {
justify-self: end;
}
.car {
margin-top: 60px;
}
.car img {
display: block;
width: 60vw;
margin: 0 auto;
}
.stat {
background-color: #1c1c25;
color: #fff;
padding: 20px;
border-radius: 0 0 20px 20px;
}
.drivershow {
width: 90%;
margin: 0 auto;
}
.drivershow h2 {
font-size: 40px;
}
.showcase {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 20px;
}
.redgap {
height: 10px;
background-color: red;
margin-bottom: 5px;
}
.bio {
background-color: #1c1c25;
color: #fff;
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding-bottom: 30px;
border-radius: 0 0 20px 20px;
}
.intro {
width: 45%;
}
.statics {
width: 45%;
border-radius: 20px;
background-color: #303037;
margin-top: 150px;
}
.intro h2,
.statics h2 {
font-size: 40px;
margin-top: 0;
padding-top: 40px;
}
.statics h2 {
text-align: center;
}
.content-row {
display: flex;
margin-bottom: 20px;
}
.content-col {
width: 50%;
padding: 0;
}
.label {
font-size: 14px;
color: #aaaaaa;
}
.value {
font-weight: bold;
font-size: 25px;
display: block;
margin-top: 10px;
}
.line {
border-bottom: 2px solid gray;
}
.statics .content {
width: 90%;
margin: 0 auto;
}
.statics-row {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20px;
align-items: center;
}
.item {
font-size: 14px;
color: #aaaaaa;
}
.itemvalue {
font-weight: bold;
font-size: 25px;
}
.actions {
margin-top: 20px;
}
</style>