formula project
This commit is contained in:
colden
237
frontend/src/views/RacePage.vue
Executable file
237
frontend/src/views/RacePage.vue
Executable file
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div class="racepage">
|
||||
<div class="title" :style="{ backgroundImage: `url(${prixImage})` }">
|
||||
<h1 style="text-align: center;">{{ race?.name }}</h1>
|
||||
</div>
|
||||
<div class="card-capacity">
|
||||
<div v-for="(item, index) in involvedRace" :key="index" class="singlerace-card">
|
||||
<div>
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-milestone"></use>
|
||||
</svg>|
|
||||
{{ item }}
|
||||
</div>
|
||||
<div class="result" @click="goResult(getType(item))">results</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { prix } from '@/assets/source'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const Races = ref([
|
||||
{ id: 1, round: 1, name: '澳大利亚大奖赛', circuit: 'Albert Park', city: '墨尔本', date: '2025-03-09', season: 2025, has_sprint: false },
|
||||
{ id: 4, round: 4, name: '巴林大奖赛', circuit: 'Jeddah Corniche', city: '吉达', date: '2025-03-23', season: 2025, has_sprint: false },
|
||||
{ id: 3, round: 3, name: '日本大奖赛', circuit: '铃鹿赛道', city: '铃鹿', date: '2025-04-06', season: 2025, has_sprint: false },
|
||||
{ id: 2, round: 2, name: '中国大奖赛', circuit: '上汽国际', city: '上海', date: '2025-04-20', season: 2025, has_sprint: true }
|
||||
])
|
||||
const raceId = Number(route.params.id)
|
||||
const race = computed(() => Races.value.find(race => race.id === raceId))
|
||||
const involvedRace = computed(() => race.value?.has_sprint ? ['Sprint Qualifying', 'Sprint Race', 'Qualifying', 'Race'] : ['Qualifying', 'Race'])
|
||||
const prixImage = computed(() => prix.find(p => p.id === race.value?.id)?.image)
|
||||
const getType = (type: string) => {
|
||||
if (type === 'Sprint Qualifying') {
|
||||
return 'sprint-qualifying'
|
||||
} else if (type === 'Sprint Race') {
|
||||
return 'sprint-race'
|
||||
} else if (type === 'Qualifying') {
|
||||
return 'qualifying'
|
||||
} else if (type === 'Race') {
|
||||
return 'race'
|
||||
} else {
|
||||
return type.toLowerCase()
|
||||
}
|
||||
}
|
||||
|
||||
const goResult = (type: string) => {
|
||||
router.push(`${route.path}/${type}`)
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.racepage {
|
||||
background-color: #f7f4f1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title h1 {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
padding: 5px;
|
||||
box-shadow: 3px 3px black;
|
||||
}
|
||||
|
||||
.card-capacity {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
font-size: 25px;
|
||||
color: white;
|
||||
font-weight: bolder;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.singlerace-card {
|
||||
width: 75%;
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
min-height: 200px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
/* 金色渐变 - 豪华黄金色系 */
|
||||
background: linear-gradient(145deg,
|
||||
#B8860B 0%,
|
||||
/* 深金色 - 暗部 */
|
||||
#DAA520 25%,
|
||||
/* 黄金色 */
|
||||
#FFD700 50%,
|
||||
/* 亮金色 - 高光 */
|
||||
#DAA520 75%,
|
||||
/* 黄金色 */
|
||||
#B8860B 100%
|
||||
/* 深金色 - 暗部 */
|
||||
);
|
||||
|
||||
/* 金属氧化纹理和光泽 */
|
||||
background-image:
|
||||
/* 金色高光区域 */
|
||||
radial-gradient(ellipse at 70% 20%, rgba(255, 215, 0, 0.7) 10%, transparent 30%),
|
||||
/* 暗部阴影区域 */
|
||||
radial-gradient(ellipse at 30% 80%, rgba(184, 134, 11, 0.6) 10%, transparent 30%),
|
||||
/* 金属条纹纹理 */
|
||||
linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(184, 134, 11, 0.8) 25%,
|
||||
rgba(255, 215, 0, 0.6) 50%,
|
||||
rgba(184, 134, 11, 0.8) 75%,
|
||||
transparent 100%);
|
||||
|
||||
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 添加金属拉丝纹理 */
|
||||
.singlerace-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
/* 横向拉丝纹理 */
|
||||
repeating-linear-gradient(0deg,
|
||||
rgba(255, 255, 255, 0.1) 0px,
|
||||
rgba(255, 255, 255, 0.1) 1px,
|
||||
transparent 1px,
|
||||
transparent 3px),
|
||||
/* 纵向拉丝纹理 */
|
||||
repeating-linear-gradient(90deg,
|
||||
rgba(0, 0, 0, 0.1) 0px,
|
||||
rgba(0, 0, 0, 0.1) 1px,
|
||||
transparent 1px,
|
||||
transparent 4px);
|
||||
pointer-events: none;
|
||||
mix-blend-mode: overlay;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 添加动态光泽效果 */
|
||||
.singlerace-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -100%;
|
||||
left: -100%;
|
||||
width: 300%;
|
||||
height: 300%;
|
||||
background: linear-gradient(45deg,
|
||||
transparent 40%,
|
||||
rgba(255, 255, 255, 0.1) 45%,
|
||||
rgba(255, 255, 255, 0.3) 50%,
|
||||
rgba(255, 255, 255, 0.1) 55%,
|
||||
transparent 60%);
|
||||
transform: rotate(30deg);
|
||||
animation: gold-shine 6s infinite linear;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes gold-shine {
|
||||
0% {
|
||||
transform: rotate(30deg) translateX(-100%) translateY(-100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(30deg) translateX(100%) translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* 添加宝石点缀效果（可选） */
|
||||
.singlerace-card .gem-effect {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: radial-gradient(circle at 30% 30%,
|
||||
#FFD700,
|
||||
#FFA500,
|
||||
#FF8C00);
|
||||
border-radius: 50%;
|
||||
box-shadow:
|
||||
0 0 10px #FFD700,
|
||||
0 0 20px #FFA500;
|
||||
animation: gem-sparkle 2s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes gem-sparkle {
|
||||
0% {
|
||||
opacity: 0.6;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1.1);
|
||||
box-shadow:
|
||||
0 0 15px #FFD700,
|
||||
0 0 25px #FFA500,
|
||||
0 0 35px #FF8C00;
|
||||
}
|
||||
}
|
||||
|
||||
.singlerace-card>div {
|
||||
text-align: center;
|
||||
vertical-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.result:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user