p975i2czf
/
universitymanage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

chore: v3.0.0-40306202411280010quiz_out_class

Browse Source
main
刘东阳 3 months ago
parent f05f1bf448
commit 8899a13906
5 changed files with 1047 additions and 78 deletions
Show Stats Download Patch File Download Diff File

5
src/pages.json
Unescape View File

@ -134,6 +134,11 @@
"style": {
"navigationBarTitleText": "课程答题"
}
},{
"path": "pages/quiz_outclass/selectquestion",
"style": {
"navigationBarTitleText": "课程答题"
}
}
],
"tabBar": {

214
src/pages/exam/selectexam.vue
Unescape View File

@ -0,0 +1,214 @@
<template>
<div class="question-list">
<ul>
<li
v-for="question in questions"
:key="question.uuid"
:class="['question-item', { selected: question.selected }]"
@click="handleSelect(question.id)"
>
<div class="info">
<span class="title">{{ question.name }}</span>
<div class="meta">
<span class="teacher">教师：{{ question.teaname}}</span>
<span class="time">时间：{{ moment(question.starttime).format('YYYY-MM-DD HH:mm:ss') }} - {{ moment(question.endtime).format('YYYY-MM-DD HH:mm:ss') }}</span>
</div>
</div>
<div class="stats">
<span class="num">共{{question.tmlist? JSON.parse(question.tmlist).length:0 }}分</span>
<span class="total">总分：{{ question.print }}</span>
</div>
</li>
</ul>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import {onLoad} from "@dcloudio/uni-app";
import moment from "moment";
// 定义题目类型
interface Question {
uuid: string
title: string
course: string
teacher: string
startTime: string
endTime: string
num: number
total: number
selected: boolean
}
// 常见题目列表数据
const questions = ref([
{
uuid: '1',
title: '题目1',
course: '课程1',
teacher: '教师1',
startTime: '2023-10-01T08:00:00',
endTime: '2023-10-01T09:00:00',
num: 1,
total: 100,
selected: false
},
{
uuid: '2',
title: '题目2',
course: '课程2',
teacher: '教师2',
startTime: '2023-10-02T08:00:00',
endTime: '2023-10-02T09:00:00',
num: 2,
total: 200,
selected: false
}
])
onLoad((options)=>{
uni.request({
url: 'http://localhost:3400/api/timujistunew_ex',
method: 'GET',
data: { // 注意：GET 请求的参数需放在 `data` 而非 `params` 字段:ml-citation{ref="8" data="citationList"}
xuehao:'202413501062'
},
success: (res) => { /* ... */
console.log(res.data)
questions.value=res.data
}
});
})
// 处理题目选择
const handleSelect = (uuid) => {
console.log(uuid)
uni.navigateTo({
url: '/pages/quiz_outclass/quiz_outclass?uuid='+uuid
});
}
// 时间格式化函数
const formatTime = (time: string): string => {
const date = new Date(time)
return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
}
</script>
<style scoped>
.question-list {
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
min-height: 100vh;
padding: 40px 20px;
color: #fff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.question-list h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 20px;
color: #00ffff;
text-shadow: 0 0 10px #00ffff;
}
ul {
list-style-type: none;
padding: 0;
max-width: 900px;
margin: 0 auto;
}
.question-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
margin-bottom: 16px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
cursor: pointer;
transition: all 0.3s ease-in-out;
border-left: 4px solid transparent;
}
.question-item:hover {
transform: scale(1.02);
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 24px rgba(0, 255, 255, 0.2);
}
.question-item.selected {
background-color: rgba(0, 255, 255, 0.2);
border-left-color: #00ffff;
box-shadow: 0 0 10px #00ffff;
}
.info {
display: flex;
flex-direction: column;
}
.title {
font-size: 18px;
font-weight: bold;
color: #ffffff;
margin-bottom: 6px;
}
.meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 12px;
color: #ccc;
}
.meta span {
padding: 4px 8px;
border-radius: 6px;
font-weight: 500;
}
.course {
background-color: rgba(0, 255, 255, 0.2);
color: #00ffff;
}
.teacher {
background-color: rgba(255, 255, 0, 0.2);
color: #fffa86;
}
.time {
background-color: rgba(255, 255, 255, 0.15);
color: #ddd;
width: 60vw;
}
.stats {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.num {
font-size: 12px;
background-color: rgba(0, 255, 127, 0.2);
color: #00ff7f;
padding: 4px 8px;
border-radius: 6px;
}
.total {
font-size: 12px;
background-color: rgba(255, 105, 180, 0.2);
color: #ff69b4;
padding: 4px 8px;
border-radius: 6px;
margin-top: 6px;
}
</style>

2
src/pages/learning/learning.vue
Unescape View File

@ -66,7 +66,7 @@
{
name: '答题',
icon: '/static/student-course/quiz.png',
page: '/pages/quiz_outclass/quiz_outclass?uuid=b2d2ece7-2994-4580-b45d-b2288ecd80de'
page: '/pages/quiz_outclass/selectquestion'
},
{
name: '考试',

690
src/pages/quiz_outclass/quiz_outclass.vue
Unescape View File

@ -1,33 +1,94 @@
<template>
<view class="quiz-container">
<!-- 顶部栏 -->
<view v-if="!showAnswerCardFlag">
<view class="top-bar">
<view class="question-info">
<text class="question-text">{{ currentQuestion.lx }} ({{ currentQuestion.score }} 分)</text>
<text class="question-text" v-if="quizData[activeIndex]">{{ quizData[activeIndex].tname}} ({{ JSON.parse(quizData[activeIndex].information).df }} 分)</text>
</view>
<button class="answer-card-btn" @click="showAnswerCard">答题卡</button>
</view>
<view>
<text>{{ moment.utc(totaltime * 1000).format('hh:mm:ss')}}</text>
</view>
<!-- 动态渲染题目 -->
<view v-for="(question, index) in quizData" :key="question.id" class="question">
<view v-show="activeIndex === index">
<view v-if="activeIndex === index">
<view v-if="question.leixing!=='编程题'">
<!-- 题目文本 -->
<text class="question-text">{{ question.text }}</text>
<image :src="'http://localhost:89/'+JSON.parse(question.information).tm" mode="aspectFit" class="question-image" />
<text>{{question.leixing}}</text>
<!-- 选项：支持图片或文本 -->
<radio-group
v-if="question.type === 'single'"
:modelValue="userAnswers[question.id]"
@update:modelValue="handleRadioChange(question.id, $event)"
>
<label v-for="(option, i) in question.options" :key="i" class="option">
<radio :value="option.value" />
<image v-if="option.image" :src="option.image" mode="aspectFit" class="option-image" />
<text v-else>{{ option.text }}</text>
</label>
</radio-group>
<view v-if="question.leixing==='单选题'">
<view v-for="(item_choose, index_choose) in JSON.parse(question.information).xuexiang" :key="index_choose" >
<view class="choose-xx" @click="danchoose(index,zm[index_choose])">
<button
:style="{backgroundColor:question.xuexiang===zm[index_choose]?'blue':'#aaa'}"
class="choose-button"
>
{{zm[index_choose]}}
</button>
<image :src="'http://localhost:89/'+item_choose" class="choose-image" mode="aspectFit" />
</view>
</view>
</view>
<view v-if="question.leixing==='多选题'">
<view v-for="(item_choose, index_choose) in JSON.parse(question.information).xuexiang" :key="index_choose" >
<view class="choose-xx" @click="duochoose(index,zm[index_choose])">
<button
:style="{backgroundColor:question.duoxuexiang.includes(zm[index_choose])?'blue':'#aaa'}"
class="choose-button"
>
{{zm[index_choose]}}
</button>
<image :src="'http://localhost:89/'+item_choose" class="choose-image" mode="aspectFit" />
</view>
</view>
</view>
<view v-if="question.leixing==='填空题'">
<view v-for="(item_choose, index_tkx) in JSON.parse(question.information).daan" :key="index_tkx" >
<view class="xuhao">
<h3 class="xuhao_wb">{{index_tkx+1}}</h3>
</view>
<input :value="question.tk[index_tkx]" @input="val=>{tkt_one(val.detail.value,index_tkx);}" type="text" class="tkt-input" />
<text class="print-wb">{{item_choose.print}}分</text>
</view>
</view>
<view v-if="question.leixing==='判断题'">
<view class="grid-container-pd" >
<view key="2" class="grid-item">
<button
:style="{backgroundColor:pdt==='对'?'blue':''}"
class="choose-button1"
@click="pdt_one('对')"
>
√
</button>
</view>
<view key="index" class="grid-item">
</view>
<view key="index+1" class="grid-item">
<button
:style="{backgroundColor:pdt==='错'?'blue':''}"
class="choose-button1"
@click="pdt_one('错')"
>
×
</button>
</view>
</view>
</view>
<!-- 其他题型类似处理 -->
</view>
</view>
</view>
@ -37,22 +98,92 @@
第 {{ key + 1 }} 题：{{ res ? '✅ 正确' : '❌ 错误' }}
</text>
</view>
<view v-if="quizData[activeIndex]">
<view v-if="isNumber(quizData[activeIndex].stuprint)" class="score-and-answer">
<text>本题得分：{{ quizData[activeIndex].stuprint }}</text>
<view v-if="quizData[activeIndex].leixing==='多选题'">
<text>我的答案：{{quizData[activeIndex].duoxuexiang.sort().join(",") }}</text><br/>
<text>正确答案：{{JSON.parse(quizData[activeIndex].information).daan.sort().join(",") }}</text>
</view>
<view v-if="quizData[activeIndex].leixing==='单选题'">
<text>我的答案：{{quizData[activeIndex].xuexiang }}</text><br/>
<text>正确答案：{{JSON.parse(quizData[activeIndex].information).daan }}</text>
</view>
<view v-if="quizData[activeIndex].leixing==='判断题'">
<text>我的答案：{{quizData[activeIndex].xuexiang }}</text><br/>
<text>正确答案：{{JSON.parse(quizData[activeIndex].information).daan }}</text>
</view>
<view v-if="quizData[activeIndex].leixing==='填空题'">
<!-- 答题卡 -->
<view v-if="showAnswerCardFlag" class="answer-card">
<view v-for="(question, index) in quizData" :key="question.id" class="card-item" @click="goToQuestion(index)">
<text>第 {{ index + 1 }} 题</text>
<text :style="{ color: userAnswers[question.id] ? 'blue' : 'gray' }">
{{ userAnswers[question.id] || '未作答' }}
</text>
<view v-for="(item_choose, index_tkx) in JSON.parse(quizData[activeIndex].information).daan" :key="index_tkx" >
<text>我的答案：{{quizData[activeIndex].tk[index_tkx]}}</text>
<text>正确答案：{{item_choose.daan }}</text>
</view><br/>
</view>
</view>
</view>
</view>
<!-- 得分与正确答案展示 -->
<view v-if="showResult" class="score-and-answer">
<text>本题得分：{{ score }}</text>
<text>正确答案：{{ correctAnswer }}</text>
<!-- 答题卡 --><br/>
<view v-if="showAnswerCardFlag" class="answer-card">
<view class="dtk-top">
<view class="dtk-left">
<text>刘东阳</text>
<text class="stuxuehao">202413501062</text>
</view>
<view class="dtk-right">
<text class="dtk-print-title">作业得分</text>
<text class="dtk-print-stu">100</text>
<text class="dtk-print-all">/100</text>
</view>
</view>
<br/>
<view>题目列表</view>
<view class="tm-list">
<view v-for="(question, index) in quizData" :key="question.id" :class="index===activeIndex?'card-item-choose':(isNumber(question.stuprint)?'card-item-nochoose':'card-item-choose-noprint')" @click="goToQuestion(question.id)">
<view v-if="isNumber(question.stuprint)">
<view v-if="question.stuprint==getprint(question)">
<uni-badge class="uni-badge-left-margin" text="√" absolute="rightTop" :offset="[-16, -4]" size="small" :customStyle="{background: 'green'}">
<view>
<text>{{ index + 1 }} </text>
</view>
</uni-badge>
</view>
<view v-if="question.stuprint!==getprint(question)">
<uni-badge class="uni-badge-left-margin" :text='question.stuprint.toString()' absolute="rightTop" :offset="[-16, -4]" size="small" :customStyle="{background: 'red'}">
<view>
<text>{{ index + 1 }}</text>
</view>
</uni-badge>
</view>
</view>
<view v-if="!isNumber(question.stuprint)" >
<view>
<text>{{ index + 1 }}</text>
</view>
</view>
</view>
</view>
<view>
<button class="return-button" @click="returndati">返回答题</button>
</view>
<view :style="{height: '20px'}">
</view>
</view>
</view>
<!-- 得分与正确答案展示 -->
<!-- 底部控制按钮 -->
<view class="bottom-controls">
@ -60,46 +191,23 @@
<button @click="submitAnswers" type="primary">提交答案</button>
<button @click="nextQuestion">下一题</button>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import {ref, computed, watch, watchEffect} from 'vue'
import {onLoad} from "@dcloudio/uni-app";
import UniBadge from "@/uni_modules/uni-badge/components/uni-badge/uni-badge.vue";
const zm=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
import moment from "moment/moment";
// 题目数据（模拟从接口获取）
const quizData = [
{
id: 1,
type: 'single',
lx: '单选题',
score: 5,
text: '计算由曲线 y=x?和直线y=x所围成的平面区域的面积,下列选项中正确的是()。',
options: [
{ value: 'A', text: '选项A' },
{ value: 'B', text: '选项B' },
{ value: 'C', text: '选项C' },
{ value: 'D', text: '选项D' }
],
answer: 'B'
},
{
id: 2,
type: 'single',
lx: '单选题',
score: 5,
text: '计算由曲线 y=x?和直线y=x所围成的平面区域的面积,下列选项中正确的是()。',
options: [
{ value: 'A', text: '选项A' },
{ value: 'B', text: 'B' },
{ value: 'C', text: '选项C' },
{ value: 'D', text: '选项D' }
],
answer: 'B'
}
]
// 题目数据（模拟从接口获取）
const quizData = ref([])
const uid=ref("0")
// 当前激活的问题索引
const intervalId = ref<number | null>(null);
const activeIndex = ref(0)
// 控制是否显示答案结果
@ -107,7 +215,7 @@ const showResult = ref(false)
// 控制答题卡显示/隐藏
const showAnswerCardFlag = ref(false)
const endtime=ref("")
// 获取当前题目
const currentQuestion = computed(() => {
return quizData[activeIndex.value] || {}
@ -136,25 +244,110 @@ function nextQuestion() {
// 点击答题卡跳转到指定题目
function goToQuestion(index: number) {
activeIndex.value = index
showAnswerCardFlag.value = false // 关闭答题卡
const id=quizData.value.findIndex(item=>item.id==index)
if(id!==-1) {
activeIndex.value = id
showAnswerCardFlag.value = false // 关闭答题卡
}
}
watch(quizData,function (newValue, oldValue) {
uni.request({
url: 'http://localhost:3400/api/updatezxdt_ex',
method: 'POST',
data: { // 注意：GET 请求的参数需放在 `data` 而非 `params` 字段:ml-citation{ref="8" data="citationList"}
alltm: newValue,
ksh: uid.value,
xuehao: "202413501062"
},
success: (res) => { /* ... */
console.log(res.data)
}
});
},{deep: true});
// 提交答案并判断正误
const totaltime=ref(5)
function getprint(question){
if(question.leixing==='填空题'){
let print =0;
JSON.parse(question.information).daan.map((daan, key) => {
print+=parseInt(daan.print);
})
return print;
}else if(question.leixing==='多选题'){
return parseInt(JSON.parse(question.information).df);
}else if(question.leixing==='单选题'){
return parseInt(JSON.parse(question.information).df);
}else if(question.leixing==='判断题'){
return parseInt(JSON.parse(question.information).df);
}
}
function submitAnswers() {
// 重置当前题目的结果
results.value[activeIndex.value] = false
console.log(quizData.value[activeIndex.value])
if(quizData.value[activeIndex.value].leixing==="填空题"){
let print =0;
JSON.parse(quizData.value[activeIndex.value].information).daan.map((daan, key) => {
if(daan.daan===quizData.value[activeIndex.value].tk[key]){
print+=parseInt(daan.print);
}
})
console.log(print)
quizData.value[activeIndex.value].stuprint=print;
}
const currentQuestion = quizData[activeIndex.value]
const userAnswer = userAnswers.value[currentQuestion.id] ?? ''
const correctAnswer = String(currentQuestion.answer)
if(quizData.value[activeIndex.value].leixing==="多选题"){
let print =0;
let zq=true;
JSON.parse(quizData.value[activeIndex.value].information).daan.map((choose_one)=>{
if(!quizData.value[activeIndex.value].duoxuexiang.includes(choose_one)){
zq=false;
}
})
if(quizData.value[activeIndex.value].duoxuexiang.length!==JSON.parse(quizData.value[activeIndex.value].information).daan.length){
zq=false;
}
if(zq){
print=parseInt(JSON.parse(quizData.value[activeIndex.value].information).df)
}
console.log(print)
quizData.value[activeIndex.value].stuprint= print;
}else if(quizData.value[activeIndex.value].leixing==="单选题"){
if(quizData.value[activeIndex.value].xuexiang===JSON.parse(quizData.value[activeIndex.value].information).daan){
quizData.value[activeIndex.value].stuprint=parseInt(JSON.parse(quizData.value[activeIndex.value].information).df)
}else {
quizData.value[activeIndex.value].stuprint=0
}
}else if(quizData.value[activeIndex.value].leixing==="判断题"){
if(quizData.value[activeIndex.value].xuexiang===JSON.parse(quizData.value[activeIndex.value].information).daan){
quizData.value[activeIndex.value].stuprint=JSON.parse(quizData.value[activeIndex.value].information).df
}else {
quizData.value[activeIndex.value].stuprint=0
}
}
//////无效
if(1===3) {
results.value[activeIndex.value] = false
const currentQuestion = quizData[activeIndex.value]
const userAnswer = userAnswers.value[currentQuestion.id] ?? ''
const correctAnswer = String(currentQuestion.answer)
const normalizedUserAnswer = String(userAnswer).trim().toUpperCase()
const normalizedCorrectAnswer = correctAnswer.trim().toUpperCase()
const normalizedUserAnswer = String(userAnswer).trim().toUpperCase()
const normalizedCorrectAnswer = correctAnswer.trim().toUpperCase()
const isCorrect = normalizedUserAnswer == normalizedCorrectAnswer
results.value[activeIndex.value] = isCorrect
showResult.value = true
const isCorrect = normalizedUserAnswer == normalizedCorrectAnswer
results.value[activeIndex.value] = isCorrect
showResult.value = true
}
}
// 计算当前题目得分
@ -172,14 +365,85 @@ const correctAnswer = computed(() => {
)
return correctOption ? correctOption.text : ''
})
function pdt_one(xx:string){
quizData.value[activeIndex.value].xuexiang = xx
}
const startTimer = () => {
intervalId.value = setInterval(() => {
if (totaltime.value>0) {
totaltime.value=moment(endtime.value).diff(moment(),'seconds')
} else {
stopTimer();
}
}, 1000);
};
// 停止倒计时
const stopTimer = () => {
if (intervalId.value !== null) {
clearInterval(intervalId.value);
intervalId.value = null;
}
};
function danchoose(index: number,choose:string) {
console.log(choose);
console.log(index)
quizData.value[index].xuexiang = choose
}
function duochoose(index: number,choose:string) {
console.log(choose);
console.log(index)
if(quizData.value[index].duoxuexiang.includes(choose)) {
quizData.value[index].duoxuexiang = quizData.value[index].duoxuexiang.filter(item => item !== choose);
}else {
quizData.value[index].duoxuexiang.push(choose);
}
}
// 显示或隐藏答题卡
function showAnswerCard() {
showAnswerCardFlag.value = !showAnswerCardFlag.value
showAnswerCardFlag.value = true
}
function isNumber(value) {
return typeof value === 'number';
}
function tkt_one(xx:string,index:number){
quizData.value[activeIndex.value].tk[index]=xx;
}
onLoad((options) => {
console.log(options)
uid.value=options.uuid;
uni.request({
url: 'http://localhost:3400/api/getptatmj',
method: 'GET',
data: { // 注意：GET 请求的参数需放在 `data` 而非 `params` 字段:ml-citation{ref="8" data="citationList"}
ksh:options.uuid,
xuehao:"202413501062"
},
success: (res) => { /* ... */
console.log(res.data)
console.log(JSON.parse(res.data.tmlist))
quizData.value=JSON.parse(res.data.tmlist)
console.log(quizData.value)
console.log(1223)
const seconds=JSON.parse(res.data.information).seconds;
let end=moment(res.data.stustart)
end.add(seconds,'seconds');
endtime.value=end.format('YYYY-MM-DD HH:mm:ss');
console.log(end.format('YYYY-MM-DD HH:mm:ss'))
startTimer();
}
});
})
function returndati(){
showAnswerCardFlag.value = false
}
</script>
<style scoped>
@ -197,7 +461,42 @@ onLoad((options) => {
border-bottom: 1px solid #e0e0e0;
background-color: #d97e7e;
}
.top-bar1 {
display: inline;
justify-content: space-between;
align-items: center;
padding: 3px;
border-bottom: 1px solid #e0e0e0;
background-color: #d97e7e;
width: 100vw;
}
.question-text1 {
font-size: 16px;
color: #333;
font-weight: bold;
margin-left: 10px;
}
.answer-card-btn1 {
background-color: #63a2cf;
border: 1px solid #a8d5ff;
color: #000;
padding: 3px 6px;
border-radius: 4px;
font-size: 12px;
margin-left: auto;
}
/* 新增左侧竖线装饰 */
.question-info1::before {
content: '';
display: inline-block;
width: 4px;
height: 20px;
background-color: #007bff;
margin-right: 3px;
}
.question-text {
font-size: 16px;
color: #333;
@ -256,16 +555,39 @@ onLoad((options) => {
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
flex-direction: column;
}
.card-item {
.card-item-choose {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
width: 20px;
height: 20px;
background-color: #0ef306;
margin-left: 20px;
}
.card-item-nochoose {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
width: 20px;
height: 20px;
background-color: #fcffea;
margin-left: 20px;
}
.card-item-choose-noprint {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
width: 20px;
height: 20px;
background-color: #fbfbfb;
}
.score-and-answer {
margin-top: 20px;
background-color: #f0f0f0;
@ -304,8 +626,222 @@ onLoad((options) => {
background-color: #2196f3;
color: #fff;
}
.question-image{
margin-left: 35px;
}
.bottom-controls button[type="primary"]:hover {
background-color: #1976d2;
}
.choose-button{
font-size: 18px;
font-weight: bold;
height: 14vw;
width: 14vw;
display: inline-block;
border-radius: 50%;
}
.choose-image{
height: 12vh;
display: inline-block;
max-width: 70vw;
position: absolute;
left: 0;
top: -2vh;
}
.choose-xx{
position:relative;
margin-bottom: 20px;
}
.tkt-input {
border: 1rpx solid black;
border-radius: 8rpx;
padding: 10rpx 20rpx;
margin: 20rpx 0;
width: 60vw;
color: #00f0ff;
display: inline-block;
position: relative;
top: 24px;
left: 10px;
}
.xuhao{
width: 35px;
height: 35px;
border-radius: 50%;
background-color: #4a90e2;
display: inline-block;
}
.xuhao_wb{
display: inline-block;
font-size:25px;
margin-left: 6px;
}
.print-wb{
display: inline-block;
margin-left: 20px;
}
.grid-container-pd
{
display: flex;
flex-wrap: wrap;
margin-left: 60px;
}
.grid-container {
display: flex;
flex-wrap: wrap;
margin-left: 10vw;
}
.grid-item {
width: calc(25% - 10px); /* 每个项目宽度为25%，减去间距 */
margin: 5px; /* 项目之间的间距 */
box-sizing: border-box; /* 确保padding和border不会影响宽度 */
}
.choose-button1{
margin-top: 20px;
font-size: 18px;
margin-left: 10px;
font-weight: bold;
height: 18vw;
width: 18vw;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
border-radius: 50%;
}
.container1 {
padding: 20rpx;
background-color: #f5f5f5;
min-height: 100vh;
}
.user-info {
display: flex;
align-items: center;
padding: 30rpx;
background-color: #fff;
border-radius: 16rpx;
margin-bottom: 30rpx;
}
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
margin-right: 30rpx;
}
.user-text {
display: flex;
flex-direction: column;
}
.username {
font-size: 36rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.user-id {
font-size: 28rpx;
color: #999;
}
.score-card {
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
}
.card-header {
margin-bottom: 30rpx;
}
.card-title {
font-size: 32rpx;
font-weight: bold;
display: block;
margin-bottom: 10rpx;
}
.card-subtitle {
font-size: 26rpx;
color: #999;
}
.score-content {
display: flex;
justify-content: space-between;
}
.score-item {
flex: 1;
text-align: center;
}
.score-label {
font-size: 28rpx;
color: #666;
display: block;
margin-bottom: 10rpx;
}
.score-value {
font-size: 40rpx;
font-weight: bold;
color: #07c160;
}
.dtk-left{
display:flex ;
flex-direction:column;
}
.dtk-right {
display:flex;
position: absolute; /* 绝对定位 */
right: 5px; /* 右对齐 */
align-items: end; /* 使子元素垂直对齐到容器的底部 */
}
.dtk-top {
display: flex;
width: 100vw;
}
.dtk-print-stu{
font-size: 25px;
}
.dtk-print-all{
font-size: 11px;
position: relative;
top: 12px;
}
.dtk-print-title{
font-size: 11px;
position: relative;
top: 12px;
margin-right: 20px;
}
.stuname{
}
.stuxuehao{
font-size: 10px;
}
.tm-list{
display: flex;
}
.return-button{
width: 80vw;
background-color: #ffffff;
color: green;
border: 3px solid green;
}
</style>

214
src/pages/quiz_outclass/selectquestion.vue
Unescape View File

@ -0,0 +1,214 @@
<template>
<div class="question-list">
<ul>
<li
v-for="question in questions"
:key="question.uuid"
:class="['question-item', { selected: question.selected }]"
@click="handleSelect(question.id)"
>
<div class="info">
<span class="title">{{ question.name }}</span>
<div class="meta">
<span class="teacher">教师：{{ question.teaname}}</span>
<span class="time">时间：{{ moment(question.starttime).format('YYYY-MM-DD HH:mm:ss') }} - {{ moment(question.endtime).format('YYYY-MM-DD HH:mm:ss') }}</span>
</div>
</div>
<div class="stats">
<span class="num">共{{question.tmlist? JSON.parse(question.tmlist).length:0 }}分</span>
<span class="total">总分：{{ question.print }}</span>
</div>
</li>
</ul>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import {onLoad} from "@dcloudio/uni-app";
import moment from "moment";
// 定义题目类型
interface Question {
uuid: string
title: string
course: string
teacher: string
startTime: string
endTime: string
num: number
total: number
selected: boolean
}
// 常见题目列表数据
const questions = ref([
{
uuid: '1',
title: '题目1',
course: '课程1',
teacher: '教师1',
startTime: '2023-10-01T08:00:00',
endTime: '2023-10-01T09:00:00',
num: 1,
total: 100,
selected: false
},
{
uuid: '2',
title: '题目2',
course: '课程2',
teacher: '教师2',
startTime: '2023-10-02T08:00:00',
endTime: '2023-10-02T09:00:00',
num: 2,
total: 200,
selected: false
}
])
onLoad((options)=>{
uni.request({
url: 'http://localhost:3400/api/timujistunew_ex',
method: 'GET',
data: { // 注意：GET 请求的参数需放在 `data` 而非 `params` 字段:ml-citation{ref="8" data="citationList"}
xuehao:'202413501062'
},
success: (res) => { /* ... */
console.log(res.data)
questions.value=res.data
}
});
})
// 处理题目选择
const handleSelect = (uuid) => {
console.log(uuid)
uni.navigateTo({
url: '/pages/quiz_outclass/quiz_outclass?uuid='+uuid
});
}
// 时间格式化函数
const formatTime = (time: string): string => {
const date = new Date(time)
return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
}
</script>
<style scoped>
.question-list {
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
min-height: 100vh;
padding: 40px 20px;
color: #fff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.question-list h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 20px;
color: #00ffff;
text-shadow: 0 0 10px #00ffff;
}
ul {
list-style-type: none;
padding: 0;
max-width: 900px;
margin: 0 auto;
}
.question-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
margin-bottom: 16px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
cursor: pointer;
transition: all 0.3s ease-in-out;
border-left: 4px solid transparent;
}
.question-item:hover {
transform: scale(1.02);
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 24px rgba(0, 255, 255, 0.2);
}
.question-item.selected {
background-color: rgba(0, 255, 255, 0.2);
border-left-color: #00ffff;
box-shadow: 0 0 10px #00ffff;
}
.info {
display: flex;
flex-direction: column;
}
.title {
font-size: 18px;
font-weight: bold;
color: #ffffff;
margin-bottom: 6px;
}
.meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 12px;
color: #ccc;
}
.meta span {
padding: 4px 8px;
border-radius: 6px;
font-weight: 500;
}
.course {
background-color: rgba(0, 255, 255, 0.2);
color: #00ffff;
}
.teacher {
background-color: rgba(255, 255, 0, 0.2);
color: #fffa86;
}
.time {
background-color: rgba(255, 255, 255, 0.15);
color: #ddd;
width: 60vw;
}
.stats {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.num {
font-size: 12px;
background-color: rgba(0, 255, 127, 0.2);
color: #00ff7f;
padding: 4px 8px;
border-radius: 6px;
}
.total {
font-size: 12px;
background-color: rgba(255, 105, 180, 0.2);
color: #ff69b4;
padding: 4px 8px;
border-radius: 6px;
margin-top: 6px;
}
</style>
Write Preview
Loading…
Cancel
Save