ContestPortal/src/views/projectName/index.vue

<!-- 比赛项目名称页面 -->
<template>
    <div class="fill"></div>
    <div class="banner">
        <img src="../../assets/images/banner2.png" alt="">
    </div>

    <div class="project-name">
        <!-- 面包屑 -->
        <div class="bread-box">
            <el-breadcrumb separator-icon="ArrowRight">
                <template v-for="r in route.matched" :key="r.path">
                    <el-breadcrumb-item v-if="r.path !== '/projectName'" :to="{ path: r.path }">
                        {{ r.meta.title }}
                    </el-breadcrumb-item>
                    <el-breadcrumb-item v-else>
                        {{ r.meta.title }}
                    </el-breadcrumb-item>
                </template>

            </el-breadcrumb>
        </div>

        <div class="content">
            <div class="title">{{ data.objName }}</div>
            <div class="text" v-html="data.introduce"></div>
            <div class="foot">
                <el-checkbox v-model="checked" label="我已完成阅读并全部知悉项目比赛规则" size="large" />
            </div>
        </div>

        <div class="btn-box">
            <el-btutton class="btn" @click="handleSub">立刻报名</el-btutton>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getCompetitionOneApi } from '@/api/person';
import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElLoading } from 'element-plus';

const route = useRoute();
const router = useRouter();

// loading
const loading = ref(false);
let loadingInstance: any;
watch(loading, newVal => {
    if (newVal) loadingInstance = ElLoading.service({ fullscreen: true });
    else if (loadingInstance) loadingInstance.close();
});

// 获取数据
const data = ref<Record<any, any>>({});
async function getData() {
    if (!route.query.id) return
    try {
        loading.value = true;
        const res: any = await getCompetitionOneApi(route.query.id as string);
        if (!res.result) return
        data.value = res.result;
    } catch (error) {
        ElMessage.error('请求失败');
    } finally {
        loading.value = false;
    }
}

// 是否同意
const checked = ref(false);

// 立刻报名
function handleSub() {
    if (!checked.value) {
        ElMessage({
            message: '请先同意',
            type: 'warning',
        })
        return
    }
    router.push({ path: '/registrationPersonage', query: { id: route.query.id } })
}

getData();
</script>



<style lang="scss" scoped>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
    line-height: 2;
}

.project-name {
    margin: 0 auto;
    width: $base-container-width;

    .bread-box {
        margin: 40px 0;
    }

    .content {
        .title {
            text-align: center;
            font-size: 42px;
            color: #333333;
            margin: 20px 0;
        }

        .text {
            font-size: 18px;
            color: #666666;
            text-indent: 2em;
        }

        .foot {
            margin: 120px 0 20px;
            display: flex;
            align-items: center;
            gap: 110px;
        }
    }

    .btn-box {
        display: flex;
        justify-content: center;
        margin-top: 80px;

        .btn {
            --color1: #00D0D0;
            --color2: #42D9AC;
            cursor: pointer;
            text-align: center;
            width: 470px;
            height: 50px;
            border-radius: 45px;
            border: none;
            font-weight: bold;
            font-size: 24px;
            color: #FFFFFF;
            background: linear-gradient(to right, var(--color1), var(--color2));
            box-shadow: 7px 7px 22px -10px rgba(0, 0, 0, 0.22);
            transition: all 0.2s;

            &:hover {
                transform: scale(1.1);
            }
        }
    }
}

.fill {
    padding-top: 80px;
}

.banner {
    width: 100%;
    height: 367px;
    border-radius: 0px 0px 0px 0px;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
</style>