Merge branch 'main' of http://182.92.169.222:3000/dlsx/ContestPortal
JayChou
8 months ago
commit
1570be5a16
6 changed files with 270 additions and 22 deletions
@ -0,0 +1,174 @@ |
||||
<!-- 比赛项目名称页面 --> |
||||
<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> |
||||
Loading…
Reference in new issue