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