GST002_H5
JayChou
6 days ago
parent
5ed2084163
commit
621f128be3
12 changed files with 656 additions and 55 deletions
|
After Width: | Height: | Size: 143 KiB |
@ -0,0 +1,211 @@ |
|||||||
|
<template> |
||||||
|
<div class="question-card"> |
||||||
|
<!-- 顶部状态栏 --> |
||||||
|
<div class="header"> |
||||||
|
<div class="timer">⏰ 00:04</div> |
||||||
|
<div class="progress">{{ current + 1 }}/{{ total }}</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 题型 --> |
||||||
|
<div class="type">单选题</div> |
||||||
|
<div class="type" style="margin-left: 10px;">史记</div> |
||||||
|
<!-- 题干 --> |
||||||
|
<div class="question"> |
||||||
|
{{ questions[current].question }} |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 选项 --> |
||||||
|
<div class="options"> |
||||||
|
<div |
||||||
|
v-for="option in questions[current].options" |
||||||
|
:key="option.key" |
||||||
|
class="option" |
||||||
|
:class="{ selected: answers[current] === option.key }" |
||||||
|
@click="selectOption(option.key)" |
||||||
|
> |
||||||
|
<div class="key">{{ option.key }}</div> |
||||||
|
<div class="text">{{ option.text }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 底部按钮 --> |
||||||
|
<div class="footer-buttons"> |
||||||
|
<button @click="goBack">返回</button> |
||||||
|
<button :disabled="current === 0" @click="prevQuestion">上一题</button> |
||||||
|
<button :disabled="current === total - 1" @click="nextQuestion">下一题</button> |
||||||
|
<button class="submit" @click="submit">提交</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup> |
||||||
|
import { ref } from 'vue' |
||||||
|
import {ElMessage} from 'element-plus' |
||||||
|
import { useRouter } from 'vue-router' |
||||||
|
const router = useRouter() |
||||||
|
// 假设总共两道题（可拓展） |
||||||
|
const questions = ref([ |
||||||
|
{ |
||||||
|
question: '关于中国古代公文制度，下列说法不正确的是：', |
||||||
|
options: [ |
||||||
|
{ key: 'A', text: '押署制度是一种公文用印制度' }, |
||||||
|
{ key: 'B', text: '贴黄制度是一种公文改错制度' }, |
||||||
|
{ key: 'C', text: '票拟制度是一种公文分级保密制度' }, |
||||||
|
{ key: 'D', text: '驳传制度是一种接待往来官员和负责公文传递事务的制度' }, |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
question: '下列哪项不是唐代科举考试的内容？', |
||||||
|
options: [ |
||||||
|
{ key: 'A', text: '明经' }, |
||||||
|
{ key: 'B', text: '进士' }, |
||||||
|
{ key: 'C', text: '武举' }, |
||||||
|
{ key: 'D', text: '八股文' }, |
||||||
|
] |
||||||
|
} |
||||||
|
]) |
||||||
|
|
||||||
|
const total = questions.value.length |
||||||
|
const current = ref(0) |
||||||
|
const answers = ref(Array(total).fill(null)) // 存储每题选项 |
||||||
|
|
||||||
|
function selectOption(key) { |
||||||
|
answers.value[current.value] = key |
||||||
|
} |
||||||
|
|
||||||
|
function prevQuestion() { |
||||||
|
if (current.value > 0) current.value-- |
||||||
|
} |
||||||
|
|
||||||
|
function nextQuestion() { |
||||||
|
if (current.value < total - 1) current.value++ |
||||||
|
} |
||||||
|
|
||||||
|
function goBack() { |
||||||
|
router.push('/user-info') |
||||||
|
} |
||||||
|
|
||||||
|
function submit() { |
||||||
|
console.log('提交答案', answers.value) |
||||||
|
ElMessage.success('提交成功') |
||||||
|
router.push('/user-info') |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.question-card { |
||||||
|
background: #f8f9fc; |
||||||
|
padding: 16px; |
||||||
|
border-radius: 10px; |
||||||
|
font-family: sans-serif; |
||||||
|
// width: 400px; |
||||||
|
margin-top: 80px; |
||||||
|
height: 100vh; |
||||||
|
.header { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
font-size: 14px; |
||||||
|
color: #555; |
||||||
|
margin-bottom: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.type { |
||||||
|
font-size: 12px; |
||||||
|
color: #2f80ed; |
||||||
|
border: 1px solid #2f80ed; |
||||||
|
padding: 2px 6px; |
||||||
|
border-radius: 6px; |
||||||
|
margin-bottom: 12px; |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
.question { |
||||||
|
font-size: 15px; |
||||||
|
font-weight: 600; |
||||||
|
color: #333; |
||||||
|
margin-bottom: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
.options { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 10px; |
||||||
|
|
||||||
|
.option { |
||||||
|
display: flex; |
||||||
|
gap: 10px; |
||||||
|
align-items: center; |
||||||
|
padding: 10px; |
||||||
|
border: 1px solid #ccc; |
||||||
|
border-radius: 8px; |
||||||
|
background: #fff; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
&.selected { |
||||||
|
border-color: #6fcf97; |
||||||
|
background-color: #eafaf1; |
||||||
|
|
||||||
|
.key { |
||||||
|
background: #6fcf97; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.key { |
||||||
|
width: 24px; |
||||||
|
height: 24px; |
||||||
|
border: 1px solid #ccc; |
||||||
|
border-radius: 50%; |
||||||
|
text-align: center; |
||||||
|
line-height: 22px; |
||||||
|
font-weight: bold; |
||||||
|
flex-shrink: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.text { |
||||||
|
font-size: 14px; |
||||||
|
flex: 1; |
||||||
|
color: #333; |
||||||
|
line-height: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.footer-buttons { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
margin-top: 20px; |
||||||
|
gap: 8px; |
||||||
|
|
||||||
|
button { |
||||||
|
flex: 1; |
||||||
|
padding: 10px 0; |
||||||
|
font-size: 14px; |
||||||
|
border: none; |
||||||
|
border-radius: 6px; |
||||||
|
background-color: #eee; |
||||||
|
color: #333; |
||||||
|
cursor: pointer; |
||||||
|
transition: 0.2s; |
||||||
|
|
||||||
|
&:hover:not(:disabled) { |
||||||
|
background-color: #ddd; |
||||||
|
} |
||||||
|
|
||||||
|
&:disabled { |
||||||
|
background-color: #ccc; |
||||||
|
cursor: not-allowed; |
||||||
|
} |
||||||
|
|
||||||
|
&.submit { |
||||||
|
background-color: #34a853; |
||||||
|
color: #fff; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
background-color: #2f9d45; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,263 @@ |
|||||||
|
<template> |
||||||
|
<div class="container"> |
||||||
|
<div class="signup-page"> |
||||||
|
<el-steps |
||||||
|
style="max-width: 600px;position: relative;z-index: 2;" |
||||||
|
:active="active" |
||||||
|
finish-status="success" |
||||||
|
align-center |
||||||
|
> |
||||||
|
<el-step title="校级赛" /> |
||||||
|
<el-step title="县/区赛" /> |
||||||
|
<el-step title="市级赛" /> |
||||||
|
<el-step title="省级赛" /> |
||||||
|
</el-steps> |
||||||
|
<!-- 状态栏 --> |
||||||
|
<div class="status-bar"> |
||||||
|
<div class="left">⚡ 正在报名</div> |
||||||
|
<div class="right">23:24:09 结束</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 卡片区域 --> |
||||||
|
<div class="card-list"> |
||||||
|
<!-- 校级赛卡片 --> |
||||||
|
<div class="card active" v-for="item in list" :key="item.id" v-show="item.objLevel_dictText === '校赛'"> |
||||||
|
<h2 class="title"> |
||||||
|
{{ item.compnames }}【{{ item.objLevel_dictText }}-{{ |
||||||
|
item.objName |
||||||
|
}}】 |
||||||
|
</h2> |
||||||
|
<p class="date">{{ item.starttime }} - {{ item.endtime }}</p> |
||||||
|
<a href="#" class="link">查看考试说明</a> |
||||||
|
<button class="btn" @click="sublit(item)">立即报名</button> |
||||||
|
<p class="count"> |
||||||
|
已有 |
||||||
|
<span>{{ item.pointnums }}</span> |
||||||
|
人报名 |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 县/区级赛卡片 --> |
||||||
|
<!-- <div class="card disabled"> |
||||||
|
<h2 class="title">河南省青少年阅读大赛【县/区级赛】</h2> |
||||||
|
<p class="date">2024年3月1日 - 2026年12月31日</p> |
||||||
|
<a href="#" class="link">查看考试说明</a> |
||||||
|
<button class="btn" disabled>暂未开放</button> |
||||||
|
<p class="count"> |
||||||
|
已有 |
||||||
|
<span>0</span> |
||||||
|
人报名 |
||||||
|
</p> |
||||||
|
</div> --> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup> |
||||||
|
import { ref, computed, nextTick, watch, onMounted } from 'vue' |
||||||
|
import { useRouter, useRoute } from 'vue-router' |
||||||
|
import { getannualCompPointList } from '@/api/race' |
||||||
|
const router = useRouter() |
||||||
|
const route = useRoute() |
||||||
|
const active = ref(0) |
||||||
|
const list = ref([]) |
||||||
|
const getList = async () => { |
||||||
|
const res = await getannualCompPointList() |
||||||
|
console.log(res) |
||||||
|
list.value = res.result.records |
||||||
|
} |
||||||
|
getList() |
||||||
|
|
||||||
|
const sublit = (data) => { |
||||||
|
router.push({ |
||||||
|
path: '/registrationPersonage', |
||||||
|
query: { |
||||||
|
// id:data.annualCompId, |
||||||
|
// annualCompid: data.annualCompId, |
||||||
|
// enrollCode: data.enrollCode, |
||||||
|
// entryFormat: data.entryFormat |
||||||
|
id: data.id, |
||||||
|
objName: data.compnames, |
||||||
|
bcId:data.annualCompId, |
||||||
|
}, |
||||||
|
}) |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.container { |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.signup-page { |
||||||
|
position: relative; |
||||||
|
padding: 16px; |
||||||
|
background-color: #f5f5f5; |
||||||
|
min-height: 100vh; |
||||||
|
margin-top: 80px; |
||||||
|
.status-bar { |
||||||
|
position: relative; |
||||||
|
z-index: 2; |
||||||
|
|
||||||
|
height: 90px; |
||||||
|
font-size: 18px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
// align-items: center; |
||||||
|
// padding-top: 20px; |
||||||
|
background: linear-gradient(90deg, #8bfdfd, #b3ff82); |
||||||
|
color: #219653; |
||||||
|
padding: 20px 16px; |
||||||
|
border-radius: 15px; |
||||||
|
font-weight: bold; |
||||||
|
color: #000; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.card-list { |
||||||
|
position: relative; |
||||||
|
z-index: 2; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 16px; |
||||||
|
margin-top: -40px; |
||||||
|
.card { |
||||||
|
background: #fff; |
||||||
|
border-radius: 15px; |
||||||
|
padding: 20px; |
||||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); |
||||||
|
transition: 0.3s; |
||||||
|
|
||||||
|
&.disabled { |
||||||
|
background: #fff; |
||||||
|
color: #aaa; |
||||||
|
pointer-events: none; |
||||||
|
opacity: 0.7; |
||||||
|
|
||||||
|
.btn { |
||||||
|
background: #ccc; |
||||||
|
cursor: not-allowed; |
||||||
|
box-shadow: 0px 6px 5px 1px rgba(0, 0, 0, 0.2); |
||||||
|
} |
||||||
|
|
||||||
|
.link { |
||||||
|
color: #bbb; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
font-size: 16px; |
||||||
|
font-weight: bold; |
||||||
|
margin-bottom: 6px; |
||||||
|
} |
||||||
|
|
||||||
|
.date { |
||||||
|
font-size: 14px; |
||||||
|
color: #666; |
||||||
|
margin-bottom: 15px; |
||||||
|
margin-top: 15px; |
||||||
|
// padding-left: 10px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
&::before { |
||||||
|
content: ' '; |
||||||
|
width: 6px; |
||||||
|
height: 6px; |
||||||
|
border-radius: 50%; |
||||||
|
background-color: #97ae20; |
||||||
|
display: block; |
||||||
|
|
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.link { |
||||||
|
font-size: 13px; |
||||||
|
color: #3498db; |
||||||
|
text-decoration: underline; |
||||||
|
margin-bottom: 12px; |
||||||
|
// padding-left: 10px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
&::before { |
||||||
|
content: ' '; |
||||||
|
width: 6px; |
||||||
|
height: 6px; |
||||||
|
border-radius: 50%; |
||||||
|
background-color: #97ae20; |
||||||
|
display: block; |
||||||
|
|
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.btn { |
||||||
|
width: 100%; |
||||||
|
padding: 12px; |
||||||
|
border: none; |
||||||
|
border-radius: 20px; |
||||||
|
font-size: 15px; |
||||||
|
font-weight: bold; |
||||||
|
color: #fff; |
||||||
|
background: linear-gradient(to right, #9ad24a, #60b529); |
||||||
|
cursor: pointer; |
||||||
|
margin-top: 10px; |
||||||
|
box-shadow: 0px 6px 5px 1px rgba(165, 209, 81, 0.2); |
||||||
|
} |
||||||
|
|
||||||
|
.count { |
||||||
|
text-align: center; |
||||||
|
font-size: 13px; |
||||||
|
color: #888; |
||||||
|
margin-top: 15px; |
||||||
|
|
||||||
|
span { |
||||||
|
color: #9ad24a; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
&::after { |
||||||
|
position: fixed; |
||||||
|
content: ''; |
||||||
|
top: -70%; |
||||||
|
left: 50%; |
||||||
|
transform: translateX(-50%); |
||||||
|
width: 100% * 2; |
||||||
|
height: 375px * 2; |
||||||
|
background: #ddf4ff; |
||||||
|
z-index: 1; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
} |
||||||
|
:deep(.is-process){ |
||||||
|
color: #1aeae2; |
||||||
|
font-weight: 400; |
||||||
|
|
||||||
|
.is-text{ |
||||||
|
width: 30px; |
||||||
|
height: 30px; |
||||||
|
background-color: #1aeae2; |
||||||
|
border-color: #1aeae2; |
||||||
|
color: #fff; |
||||||
|
font-size: 16px; |
||||||
|
|
||||||
|
} |
||||||
|
.el-step__line{ |
||||||
|
background: linear-gradient(to right, #9ad24a, #60b529);; |
||||||
|
} |
||||||
|
} |
||||||
|
:deep(.is-wait){ |
||||||
|
.is-text{ |
||||||
|
width: 30px; |
||||||
|
height: 30px; |
||||||
|
background-color: #dcf5ff; |
||||||
|
font-size: 16px; |
||||||
|
|
||||||
|
// border-color: #1aeae2; |
||||||
|
// color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue