formula1/frontend/src/views/RacePage.vue

<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;
    min-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>