81 lines
2.3 KiB
Vue
81 lines
2.3 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
import { onMounted, ref } from 'vue'
|
||
|
|
import CompetitionLayout from '@/components/custom/user/CompetitionLayout.vue'
|
||
|
|
import { useRouterPush } from '@/hooks/common/router'
|
||
|
|
|
||
|
|
const { routerPushByKey } = useRouterPush()
|
||
|
|
|
||
|
|
const activityName = ref('规则介绍')
|
||
|
|
const rulesContent = ref('')
|
||
|
|
|
||
|
|
const mockContent = `<p>本轮环节共有4道题目,分别是“<strong>诗词理解</strong>”、“<strong>联想对对碰</strong>”、“<strong>逆向接诗句</strong>”、“<strong>情景猜诗句</strong>”</p><p>阅读完题目介绍，主持人点击“<strong>开始作答</strong>”后均在答题本田字格上作答</p><p><br></p><p> “<strong>诗词理解</strong>” 根据题目选择正确答案</p><p> “<strong>联想对对碰</strong>” 根据关键信息写出完整诗句</p><p> “<strong>逆向接诗句</strong>” 根据关键信息写出关联诗句</p><p> “<strong>情景猜诗句</strong>” 根据情景写出关联诗句</p><p><br></p><p><span style=\"background-color: rgb(89, 191, 192);\">答题倒计时结束后，界面自动跳转到下一题</span></p>
|
||
|
|
`
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
setTimeout(() => {
|
||
|
|
rulesContent.value = mockContent
|
||
|
|
}, 100)
|
||
|
|
})
|
||
|
|
|
||
|
|
function handleBack() {
|
||
|
|
routerPushByKey('user_cover')
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleNext() {
|
||
|
|
routerPushByKey('user_draw')
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<CompetitionLayout
|
||
|
|
:show-back="true"
|
||
|
|
:show-next="true"
|
||
|
|
:title="activityName"
|
||
|
|
@back="handleBack"
|
||
|
|
@next="handleNext"
|
||
|
|
>
|
||
|
|
<div class="items-flex-start h-full w-full flex justify-center font-sans">
|
||
|
|
<div class="rules-content-wrapper">
|
||
|
|
<div class="rules-container" v-html="rulesContent" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</CompetitionLayout>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import '@/styles/scss/variables.scss';
|
||
|
|
|
||
|
|
.rules-content-wrapper {
|
||
|
|
width: 100%;
|
||
|
|
max-height: 80%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: $text-color;
|
||
|
|
|
||
|
|
:deep(.rules-container) {
|
||
|
|
margin-top: 10px;
|
||
|
|
font-size: 28px;
|
||
|
|
line-height: 2;
|
||
|
|
// color: #5d4037; // Dark brown/grey text
|
||
|
|
|
||
|
|
.intro-text {
|
||
|
|
margin-bottom: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rules-list {
|
||
|
|
margin: 40px 0;
|
||
|
|
|
||
|
|
p {
|
||
|
|
margin: 15px 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-text {
|
||
|
|
margin-top: 40px;
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|