Skip to content

X
x-learn
提交 48aa9258 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

update：设置分数段开发

上级 5c4dda88
隐藏空白字符变更
内嵌 并排
正在显示 包含 170 行增加 和 49 行删除
src/modules/teacher/data/exam/components/SetScoreRange.vue
浏览文件 @ 48aa9258
<template>
<div>
<el-card class="score-content-main"></el-card>
<el-card class="score-content-main">
<div class="title-box">
<div class="tit">设置分数段</div>
<div class="tip">最多设置8个分数段</div>
</div>
<div class="add-box">
<input type="number" placeholder="请输入分数段" v-model="tagInput">
<div class="btn" @click="addTag">添加</div>
</div>
<div class="range-box">
<template v-for="(item, index) in tagCount">
<div class="li-item"
:key="index"
v-if="item != 0 && item != 100"
:style="{'left':`${318 / 100 * item - 15}px`}"
@click="removeTag(index)"
>{{ item }}</div>
</template>
<div class="progress"></div>
<div class="scale-num">
<span>0</span>
<span>100</span>
</div>
</div>
<div class="btn-box">
<div class="btn">取消</div>
<div class="btn" @click="confirmTag">确认</div>
</div>
</el-card>
</div>
</template>
......@@ -8,9 +36,44 @@
export default {
data() {
return {
tagInput: '',
tagCount: [0, 100]
}
},
mounted() {
},
methods: {
// 添加标签
addTag() {
const value = parseInt(this.tagInput)
const isTag = this.tagInput === '' || value <= 0 || parseInt(this.tagInput) >= 100
if (isTag) {
this.$message('请填写正确分数段')
return false
}
if (this.tagCount.length === 9) {
this.$message('最多可添加8个')
return false
}
if (!this.tagCount.includes(value)) {
this.tagCount.push(value)
this.tagCount.sort((a, b) => a - b)
this.tagInput = ''
}
},
// 删除标签
removeTag(index) {
this.tagCount.splice(index, 1)
},
// 确认选择
confirmTag() {
const data = this.tagCount.reduce((prev, cur) => {
const findPrev = prev[prev.length - 1]
if (cur !== 0) prev.push({ a: findPrev ? findPrev.b : 0, b: cur })
return prev
}, [])
console.log(data)
}
}
}
</script>
......@@ -19,5 +82,111 @@ export default {
.score-content-main{
width: 460px;
height: 275px;
// padding: 20px 27px;
.title-box{
display: flex;
align-items: center;
.tit{
font-size: 16px;
font-weight: bold;
color: #333333;
line-height: 100%;
}
.tip{
font-size: 14px;
color: #999999;
margin-left: 12px;
}
}
.add-box{
display: flex;
align-items: center;
justify-content: center;
margin-top: 35px;
input{
width: 122px;
height: 36px;
background: #FFFFFF;
border: 1px solid #DCDFE6;
border-radius: 4px;
outline: none;
padding-left: 10px;
box-sizing: border-box;
}
.btn{
cursor: pointer;
font-size: 14px;
color: #AA1941;
margin-left: 12px;
}
}
.range-box{
width: 318px;
position: relative;
margin: 52px auto 0;
.progress{
width: 318px;
height: 8px;
background: #F0F0F0;
opacity: 1;
border-radius: 20px;
}
.scale-num{
position: absolute;
top: 9px;
left: 0;
display: flex;
justify-content: space-between;
width: 100%;
span{
font-size: 14px;
line-height: 24px;
color: #606266;
}
}
.li-item{
text-align: center;
text-indent: -0.5em;
line-height: 35px;
position: absolute;
top: -38px;
// left: 0;
width: 31px;
height: 44px;
background: url(https://webapp-pub.ezijing.com/x-learning/data/scale.png);
background-size: 100% 100%;
font-size: 14px;
color: #FFFFFF;
}
}
.btn-box{
display: flex;
margin-top: 48px;
justify-content: center;
.btn{
width: 69px;
height: 31px;
box-sizing: border-box;
&:nth-child(1){
border: 1px solid #B4B4B4;
border-radius: 4px;
font-size: 14px;
line-height: 31px;
text-align: center;
color: #919191;
cursor: pointer;
}
&:nth-child(2){
background: #AA1941;
border-radius: 4px;
font-size: 14px;
line-height: 31px;
color: #FFFFFF;
margin-left: 13px;
text-align: center;
cursor: pointer;
}
}
}
}
</style>
src/modules/teacher/data/exam/views/ExamData2.vue deleted 100644 → 0
浏览文件 @ 5c4dda88
<template>
<app-container>
<el-row type="flex" class="row-bg" justify="space-between" style="margin-bottom: 30px">
<el-col :span="10"><h1 style="padding-left: 50px; font-size: 30px">模拟测试一</h1></el-col>
<el-col :span="5">
<el-select v-model="label" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
<el-button type="text" style="margin-left: 20px">导出pdf</el-button>
</el-col>
</el-row>
<el-row type="flex" class="row-bg">
<el-col style="min-width: 366px; margin-right: 21px"><ExamInfo /></el-col>
<el-col style="min-width: 366px; margin-right: 21px"><Submission /></el-col>
<el-col style="min-width: 366px"><Score /></el-col>
</el-row>
<el-row type="flex" class="row-bg" style="margin-top: 30px">
<el-col style="min-width: 560px; margin-right: 21px"><ScoreRanking /></el-col>
<el-col style="min-width: 560px"><TitleData /></el-col>
</el-row>
<el-row type="flex" class="row-bg" style="margin-top: 30px">
<el-col style="min-width: 347px; margin-right: 21px"><Result /></el-col>
<el-col style="min-width: 347px; margin-right: 21px"><ScoreRange /></el-col>
<el-col style="min-width: 347px; margin-right: 21px"><QuestionType /></el-col>
</el-row>
</app-container>
</template>
<script>
import ExamInfo from '../components/ExamInfo.vue'
import Submission from '../components/Submission.vue'
import Score from '../components/Score.vue'
import ScoreRanking from '../components/ScoreRanking.vue'
import TitleData from '../components/TitleData.vue'
import Result from '../components/Result.vue'
import ScoreRange from '../components/ScoreRange.vue'
import QuestionType from '../components/QuestionType.vue'
export default {
components: { ExamInfo, Submission, Score, ScoreRanking, TitleData, Result, ScoreRange, QuestionType },
data() {
return {
options: {}
}
}
}
</script>
<style></style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论