feat: 我的练习UI

2022-01-07 17:42:13 +08:00 · 2022-01-07 17:42:13 +08:00 · d311f4c48f
parent a07a6a905d
commit d311f4c48f
8 changed files with 301 additions and 16 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -48,17 +48,4 @@ export default {
  justify-content: center;
 }

-.flex-center{
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.justify-between{
-  justify-content: space-between;
-}
-
-.nowrap{
-  white-space: nowrap;
-}
 </style>
--- a/src/components/DbQuestionInfoItem/index.vue
+++ b/src/components/DbQuestionInfoItem/index.vue
@ -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>
--- a/src/global.less
+++ b/src/global.less
@ -120,3 +120,18 @@ ol {
 .margin-top {
  margin-top: 15px;
 }
+
+
+.flex-center{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.justify-between{
+  justify-content: space-between;
+}
+
+.nowrap{
+  white-space: nowrap;
+}
--- a/src/views/mycollection/index.vue
+++ b/src/views/mycollection/index.vue
@ -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>
--- a/src/views/mycourse/index.vue
+++ b/src/views/mycourse/index.vue
@ -1,5 +1,5 @@
 <template>
-  <div>123</div>
+  
 </template>

 <script>
--- a/src/views/mycourse/mycourseList/CourseRecommendation.vue
+++ b/src/views/mycourse/mycourseList/CourseRecommendation.vue
@ -4,7 +4,12 @@
    :loading="loading"
  >
    <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;">
          <img
            slot="cover"
--- a/src/views/mycourse/mycourseList/MyCourseList.vue
+++ b/src/views/mycourse/mycourseList/MyCourseList.vue
@ -84,7 +84,7 @@ export default {
      },
      queryOptions: [
        { type: 'input', placeholder: '课程名称', key: 'courseName' },
-        { type: 'select-dic-tree', placeholder: '请选择课程类别', key: 'courseType', options: [] }
+        { type: 'select-dic-tree', placeholder: '课程类别', key: 'courseType', options: [] }
      ],
      // 表头
      columns: [
--- a/src/views/mypractice/index.vue
+++ b/src/views/mypractice/index.vue
@ -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>