GST002_H5
JayChou
4 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