feat: 我的练习UI

This commit is contained in:
cgd_mac 2022-01-07 17:42:13 +08:00
parent a07a6a905d
commit d311f4c48f
8 changed files with 301 additions and 16 deletions

View File

@ -48,17 +48,4 @@ export default {
justify-content: center; justify-content: center;
} }
.flex-center{
display: flex;
align-items: center;
justify-content: center;
}
.justify-between{
justify-content: space-between;
}
.nowrap{
white-space: nowrap;
}
</style> </style>

View File

@ -0,0 +1,129 @@
<template>
<div class="question-item">
<div class="question-title">
<span>{{ questionIndex || 1 }}</span>
<span>({{ type | QuestionTypeFormat }})</span>
<span v-html="title"></span>
</div>
<div class="options-box">
<ul class="answer-list">
<li :class="{'success-li' : index == 2}" v-for="(item, index) in options" :key="index">
<span>{{ optionKeys[index] }}</span>{{ item.label }}
</li>
</ul>
</div>
<div class="flex-center justify-between" style="margin-top: 10px;">
<div style="flex: 1;">
<a-button @click="analysisVisible = false" style="padding: 0;" v-if="analysisVisible" type="link">收起答题解析</a-button>
<a-button @click="analysisVisible = true" style="padding: 0;" v-else type="link">展开答题解析</a-button>
</div>
<div style="flex: 1;"></div>
</div>
<div class="box" v-show="analysisVisible">
<div class="flex-center analysis">
<div class="analysis-label">
<div class="flex-center" style="height: 30px;">
<a-tag color="blue" >统计</a-tag>
</div>
</div>
<div class="analysis-value">答题时间44全站正确率47%易错项D</div>
</div>
<div class="flex-center analysis">
<div class="analysis-label">
<a-tag color="blue" style="margin-top: 6px;">解析</a-tag>
</div>
<div class="analysis-value" style="color: #333;">第一步本题考查新发展理念第二步十三五规划建议提出的创新协调绿色开放共享五大发展理念集中反映了我们党对经济社会发展规律认识的深化是建议的精髓和主线也是本次全会的亮点和重大贡献创新发展注重的是解决发展动力问题我国创新能力不强科技发展水平总体不高科技对经济社会发展的支撑能力不足科技对经济增长的贡献率远低于发达国家水平协调发展注重的是解决发展不平衡问题我国发展不协调是一个长期存在的问题突出表现在区域城乡经济和社会物质文明和精神文明经济建设和国防建设等关系上绿色发展注重的是解决人与自然和谐共生问题我国资源约束趋紧环境污染严重生态系统退化的问题十分严峻开放发展注重的是解决发展内外联动问题现在的问题不是要不要对外开放而是如何提高对外开放的质量和发展的内外联动性共享发展注重的是解决社会公平正义问题我国经济发展的蛋糕不断做大但分配不公问题比较突出收入差距城乡区域公共服务水平差距较大在共享改革发展成果上无论是实际情况还是制度设计都还有不完善的地方所以①③④正确因此选择C选项</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
questionIndex: {
type: [Number],
default: 1
}, //
type: {
type: [String, Number], // 1: , 2: , 3: , 4: , 5:
default: 1
}
},
data () {
return {
analysisVisible: true,
optionKeys: ['A', 'B', 'C', 'D', 'E'],
radioStyle: {
display: 'block',
height: '30px',
lineHeight: '30px'
},
title: '党的十九大报告指出 ,要推动社会主义文化繁荣兴盛,建设社会主义文化强国。下列关于推动社会主义文化繁荣兴盛的说法不正确的是?',
answer: null, // , : String/Number, : Array
options: [
{ label: '是提高国家硬实力的必然要求', value: 1 },
{ label: '是新时代坚持和发展中国特色社会主义的必然要求', value: 2 },
{ label: '是实现中华民族伟大复兴中国梦的必然要求', value: 3 },
{ label: '是实现人民对美好生活向往的必然要求', value: 4 }
]
}
}
}
</script>
<style lang="less" scoped>
.question-item {
margin-top: 15px;
font-size: 15px;
}
.question-title {
margin-bottom: 10px;
color: #333;
}
.options-box {
padding-left: 30px;
}
.answer-list{
margin: 0;
padding: 0;
li{
line-height: 2;
}
.success-li{
color: #52c41a;
}
}
.box{
width: 100%;
}
.draw-enter-active, .draw-leave-active {
transition: all 1s ease;
}
.draw-enter, .draw-leave-to {
height: 0;
}
.analysis{
justify-content: center;
align-items: stretch;
}
.analysis-label{
flex: 0 0 40px;
flex-shrink: 0;
}
.analysis-value{
flex: 1;
flex-shrink: 0;
display: flex;
align-items: center;
font-size: 15px;
color: #000;
vertical-align: top;
line-height: 2;
}
</style>

View File

@ -120,3 +120,18 @@ ol {
.margin-top { .margin-top {
margin-top: 15px; margin-top: 15px;
} }
.flex-center{
display: flex;
align-items: center;
justify-content: center;
}
.justify-between{
justify-content: space-between;
}
.nowrap{
white-space: nowrap;
}

View File

@ -0,0 +1,57 @@
<template>
<a-card :bordered="false">
<a-tabs :default-active-key="activeTab">
<a-tab-pane key="1" tab="我的收藏">
<a-card title="我的收藏题目(共5题)" :bordered="false" :bodyStyle="{padding: '0px !important'}" :headStyle="{paddingLeft: '0px !important'}">
<template v-for="(item, index) in 10" >
<div :key="index">
<DbQuestionInfoItem :questionIndex="index+1" ></DbQuestionInfoItem>
<a-divider></a-divider>
</div>
</template>
</a-card>
</a-tab-pane>
<a-tab-pane key="2" tab="错题集">
<a-card title="我的错题题目(共5题)" :bordered="false" :bodyStyle="{padding: '0px !important'}" :headStyle="{paddingLeft: '0px !important'}">
<template v-for="(item, index) in 10" >
<div :key="index">
<DbQuestionInfoItem :questionIndex="index+1" ></DbQuestionInfoItem>
<a-divider></a-divider>
</div>
</template>
</a-card>
</a-tab-pane>
<a-tab-pane key="3" tab="答题记录">
<a-card v-for="(item, index) in 10" :key="index" style="margin-bottom: 15px;">
<div class="flex-center" >
<div style="flex: 1;">
<h3>建筑施工安全培训第一期课程学习6.8-7.8</h3>
<div><span style="margin-right: 20px;">答题情况做对10/30</span><span>交卷时间2021-06-18 12:00</span></div>
</div>
<div style="flex: 0 0 200px; text-align: right;">
<div :span="24" style="margin-bottom: 10px;"><a-button type="primary" size="small" >查看报告</a-button></div>
<div :span="24"><a-button type="primary" size="small">查看报告</a-button></div>
</div>
</div>
</a-card>
</a-tab-pane>
</a-tabs>
</a-card>
</template>
<script>
import DbQuestionInfoItem from '@/components/DbQuestionInfoItem/index.vue'
export default {
components: { DbQuestionInfoItem },
data () {
return {
activeTab: '1'
}
}
}
</script>
<style>
</style>

View File

@ -1,5 +1,5 @@
<template> <template>
<div>123</div>
</template> </template>
<script> <script>

View File

@ -4,7 +4,12 @@
:loading="loading" :loading="loading"
> >
<a-row :gutter="16"> <a-row :gutter="16">
<a-col :span="6" v-for="(item, index) in 8" :key="index"> <a-col
:span="6"
:md="4"
:sm="6"
v-for="(item, index) in 8"
:key="index">
<a-card hoverable style="width: 100%; margin-bottom: 15px;"> <a-card hoverable style="width: 100%; margin-bottom: 15px;">
<img <img
slot="cover" slot="cover"

View File

@ -84,7 +84,7 @@ export default {
}, },
queryOptions: [ queryOptions: [
{ type: 'input', placeholder: '课程名称', key: 'courseName' }, { type: 'input', placeholder: '课程名称', key: 'courseName' },
{ type: 'select-dic-tree', placeholder: '请选择课程类别', key: 'courseType', options: [] } { type: 'select-dic-tree', placeholder: '课程类别', key: 'courseType', options: [] }
], ],
// //
columns: [ columns: [

View File

@ -0,0 +1,92 @@
<template>
<a-card :bordered="false" :loading="loading">
<div class="table-page-search-wrapper">
<div class="flex-center justify-between">
<div style="flex: 1;">
<SearchCom
:form="queryParam"
:list="queryOptions"
@search="handleRefresh"
@reset="
() => {
queryParam = {}
handleRefresh()
}
"></SearchCom>
</div>
<div class="flex-center" style="flex: 0 0 300px;">
<a-button type="link">我的收藏</a-button>
<a-button type="link">错题集</a-button>
<a-button type="link">答题记录</a-button>
</div>
</div>
</div>
</br>
<a-card v-for="(item, index) in 6" :key="index" :bordered="false" :bodyStyle="{paddingLeft: '0px !important'}" :headStyle="{paddingLeft: '0px !important'}" >
<template slot="title">
<b>安全生产法律法规</b><span class="sub-txt">共999题</span>
</template>
<a-row :gutter="16">
<a-col
:span="6"
:lg="4"
:md="6"
:sm="8"
:xs="12"
v-for="(item, index) in 8"
:key="index">
<a-card hoverable style="width: 100%; margin-bottom: 15px;">
<div class="flex-center"><h4>建筑工程相关安全生产法律</h4></div>
<div class="flex-center" style="margin-top: 10px;">
<a-button type="primary" size="small" round>开始答题</a-button>
</div>
</a-card>
</a-col>
</a-row>
</a-card>
</a-card>
</template>
<script>
import { SearchCom } from '@/components'
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
import { dictToTree } from '@/utils/util'
export default {
components: { SearchCom },
data () {
return {
loading: true,
queryParam: {
classification: '' //
},
queryOptions: [
{ type: 'select-dic-tree', placeholder: '课程分类', key: 'courseType', options: [] }
]
}
},
mounted(){
this.dictionaryDropDown()
},
methods: {
handleRefresh () {
},
dictionaryDropDown () {
dictionaryDropDown({ dictionaryCode: '0009' }).then((res) => {
const result = dictToTree(res.data, [], 0)
this.queryOptions[0].options = result
this.loading = false
})
}
}
}
</script>
<style lang="less" scoped>
.sub-txt{
color: #666;
font-size: 12px;
margin-left: 10px;
}
</style>