From c10e6765530b305f11465650bb7deb3d7fb580a9 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Fri, 25 Dec 2020 11:52:08 +0800
Subject: [PATCH] .

---
 src/api/index.js                              |  13 +-
 src/layouts/header/index.vue                  |   7 +-
 src/libs/util.js                              |  32 +-
 src/pages/account/login/index.vue             |   7 +-
 src/pages/achievement/detail/index.vue        |  10 +-
 .../achievement/list/practiceResults.vue      |  42 ++-
 src/pages/achievement/practice/index.vue      | 279 ++++++++++++++
 src/pages/practice/list/randomPractice.vue    |  29 +-
 src/pages/practice/randomDo/index.vue         | 353 ++++++++++++++++++
 src/router/modules/achievement.js             |   6 +
 src/router/modules/practice.js                |   5 +
 src/setting.js                                |   2 +-
 .../lib/{background.scss => _background.scss} |   0
 src/styles/lib/{border.scss => _border.scss}  |   0
 src/styles/lib/{box.scss => _box.scss}        |   0
 src/styles/lib/{cursor.scss => _cursor.scss}  |   0
 .../lib/{display.scss => _display.scss}       |   0
 src/styles/lib/{flex.scss => _flex.scss}      |   0
 src/styles/lib/{float.scss => _float.scss}    |   0
 .../lib/{font-size.scss => _font-size.scss}   |   0
 .../{font-weight.scss => _font-weight.scss}   |   0
 .../{line-height.scss => _line-height.scss}   |   0
 src/styles/lib/{link.scss => _link.scss}      |   0
 .../lib/{overflow.scss => _overflow.scss}     |   0
 .../lib/{position.scss => _position.scss}     |   0
 src/styles/lib/{size.scss => _size.scss}      |   0
 .../lib/{text-align.scss => _text-align.scss} |   0
 .../lib/{text-color.scss => _text-color.scss} |   0
 ...rtical-align.scss => _vertical-align.scss} |   0
 .../lib/{visibility.scss => _visibility.scss} |   0
 .../{white-space.scss => _white-space.scss}   |   0
 src/styles/lib/index.scss                     |   2 +-
 src/styles/pages/tree.scss                    | 104 ++++++
 src/styles/var.scss                           |  24 ++
 vue.config.js                                 |   3 +
 35 files changed, 867 insertions(+), 51 deletions(-)
 create mode 100644 src/pages/achievement/practice/index.vue
 create mode 100644 src/pages/practice/randomDo/index.vue
 rename src/styles/lib/{background.scss => _background.scss} (100%)
 rename src/styles/lib/{border.scss => _border.scss} (100%)
 rename src/styles/lib/{box.scss => _box.scss} (100%)
 rename src/styles/lib/{cursor.scss => _cursor.scss} (100%)
 rename src/styles/lib/{display.scss => _display.scss} (100%)
 rename src/styles/lib/{flex.scss => _flex.scss} (100%)
 rename src/styles/lib/{float.scss => _float.scss} (100%)
 rename src/styles/lib/{font-size.scss => _font-size.scss} (100%)
 rename src/styles/lib/{font-weight.scss => _font-weight.scss} (100%)
 rename src/styles/lib/{line-height.scss => _line-height.scss} (100%)
 rename src/styles/lib/{link.scss => _link.scss} (100%)
 rename src/styles/lib/{overflow.scss => _overflow.scss} (100%)
 rename src/styles/lib/{position.scss => _position.scss} (100%)
 rename src/styles/lib/{size.scss => _size.scss} (100%)
 rename src/styles/lib/{text-align.scss => _text-align.scss} (100%)
 rename src/styles/lib/{text-color.scss => _text-color.scss} (100%)
 rename src/styles/lib/{vertical-align.scss => _vertical-align.scss} (100%)
 rename src/styles/lib/{visibility.scss => _visibility.scss} (100%)
 rename src/styles/lib/{white-space.scss => _white-space.scss} (100%)
 create mode 100644 src/styles/pages/tree.scss
 create mode 100644 src/styles/var.scss

diff --git a/src/api/index.js b/src/api/index.js
index 6e2a54b..2b678e2 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -24,10 +24,14 @@ export default {
   userinfo:`management/userInfo/getUserInfo`,
   getAccount:`management/userInfo/getAccount`,
 
-  // 成绩管理
+  // 考试成绩
   getMyAchievement: `user/testPaperRecord/getMyAchievement`,
   answerDetail:`management/paperRecord/answerDetail`,
 
+  // 练习成绩
+  practiseAchievement: `/user/testPaperRecord/practiseAchievement`,
+  reviewDetail:`/management/practise/review/reviewDetail`,
+
   // 我的考试
   addGzAnswerDetails: `/user/exam/addGzAnswerDetails`,
   addTestPaperRecord: `/user/exam/addTestPaperRecord`,
@@ -45,4 +49,11 @@ export default {
   calculationScorePractice: `/user/practise/calculationScore`,
   enterPractise: `/user/practise/enterPractise`,
   getMinePractise: `/user/practise/getMinePractise`,
+
+  // 随机练习
+  pageRandomPracticeList:`/user/randomPractice/pageRandomPracticeList`,
+  randomPractice: `/user/randomPractice/randomPractice`,
+  AddRandomPractiseExamAnswerDetail: `/user/randomPractice/AddRandomPractiseExamAnswerDetail`,
+  addPractiseRecordRandom: `/user/randomPractice/addPractiseRecord`,
+  previewPaper:`/management/testPaper/previewPaper`,
 }
\ No newline at end of file
diff --git a/src/layouts/header/index.vue b/src/layouts/header/index.vue
index 4505aac..3f9c0b6 100644
--- a/src/layouts/header/index.vue
+++ b/src/layouts/header/index.vue
@@ -39,13 +39,14 @@ export default {
         
     },
     methods: {
+        ...mapActions('user', [
+            'logout'
+        ]),
         toPerson(){
             this.$router.push('/setting/person')
         },
         loginout() {
-            sessionStorage.removeItem(Setting.usernameKey);
-            sessionStorage.removeItem(Setting.storeKey);
-            location.reload()
+            this.logout()
         },
         back(){
             this.$router.back()
diff --git a/src/libs/util.js b/src/libs/util.js
index 8ab58bd..1c8fb9a 100644
--- a/src/libs/util.js
+++ b/src/libs/util.js
@@ -1,5 +1,5 @@
-import cookies from './util.cookies';
-import {_local,_session} from './util.db';
+import cookies from './util.cookies'
+import {_local,_session} from './util.db'
 
 const util = {
   cookies,
@@ -49,6 +49,30 @@ const util = {
     }
     return fmt; 
   },
-};
+  // 移除数组中指定值
+  removeByValue(arr, val) {
+    for(var i=0; i<arr.length; i++) {
+        if(arr[i] == val) {
+          arr.splice(i, 1);
+          break;
+        }
+    }
+  },
+  // 传入文件后缀判断是否是视频
+  isVideo(ext) {
+    if('mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv'.includes(ext)) return true
+    return false
+  },
+  // 传入文件后缀判断是否是音频
+  isAudio(ext) {
+    if('mp3,aac,ape,flac,wav,wma,amr,mid'.includes(ext)) return true
+    return false
+  },
+  // 传入文件后缀判断是否是图片
+  isImg(ext) {
+    if('jpg,jpeg,png,gif,svg,psd'.includes(ext)) return true
+    return false
+  }
+}
 
-export default util;
\ No newline at end of file
+export default util
\ No newline at end of file
diff --git a/src/pages/account/login/index.vue b/src/pages/account/login/index.vue
index 6d3a2c6..4263161 100644
--- a/src/pages/account/login/index.vue
+++ b/src/pages/account/login/index.vue
@@ -64,7 +64,6 @@ export default {
         return {
             isReg: false,
             loginForm: {
-                // username: '18818574533',
                 username: '13563422432',
                 password: 'huoran123',
             },
@@ -101,11 +100,9 @@ export default {
                     this.login(data).then(() => {
                         this.$router.replace('/index')
                     })
-                    .catch(() => {
-                        
-                    })
+                    .catch(() => {})
                 }
-            });
+            })
         },
         toReg() {
             this.isReg = true
diff --git a/src/pages/achievement/detail/index.vue b/src/pages/achievement/detail/index.vue
index 00378bc..eb087c1 100644
--- a/src/pages/achievement/detail/index.vue
+++ b/src/pages/achievement/detail/index.vue
@@ -109,8 +109,7 @@ export default {
                 this.curType = this.allData.list1
                 this.handleOptions()
             })
-            .catch(err => {});
-            
+            .catch(err => {})
         },
         tabChange(id){
             this.active = id
@@ -124,7 +123,6 @@ export default {
                     let options = {}
                     for(let i in n){
                         if(i.includes('option') && n[i]){
-                            console.log(i.replace('option_',''))
                             options[i.replace('option_','')] = n[i]
                         }
                     }
@@ -184,7 +182,7 @@ export default {
                 left: 0;
                 width: 100%;
                 height: 4px;
-                background-color: #e80909;
+                background-color: $main-color;
             }
         }
     }
@@ -251,8 +249,8 @@ export default {
             cursor: pointer;
             &.submit{
                 color: #fff;
-                background-color: #e80909;
-                border-color: #e80909;
+                background-color: $main-color;
+                border-color: $main-color;
             }
             &:hover{
                 opacity: .8;
diff --git a/src/pages/achievement/list/practiceResults.vue b/src/pages/achievement/list/practiceResults.vue
index 371d7e1..4265cb1 100644
--- a/src/pages/achievement/list/practiceResults.vue
+++ b/src/pages/achievement/list/practiceResults.vue
@@ -24,11 +24,11 @@
                         {{scope.$index + (page - 1) * pageSize + 1}}
                     </template>
                 </el-table-column>
-                <el-table-column prop="name" label="练习名称" align="center"></el-table-column>
-                <el-table-column prop="gmtCreate" label="练习次数" align="center"></el-table-column>
-                <el-table-column prop="founder" label="用时（分钟）" align="center"></el-table-column>
-                <el-table-column prop="classification" label="练习时间" align="center"></el-table-column>
-                <el-table-column prop="classification" label="最新得分" align="center"></el-table-column>
+                <el-table-column prop="practiseName" label="练习名称" align="center"></el-table-column>
+                <el-table-column prop="practiseNum" label="练习次数" align="center"></el-table-column>
+                <el-table-column prop="timeCost" label="用时（分钟）" align="center"></el-table-column>
+                <el-table-column prop="examTime" label="练习时间" align="center"></el-table-column>
+                <el-table-column prop="score" label="最新得分" align="center"></el-table-column>
                 <el-table-column label="操作" align="center" width="180">
                     <template slot-scope="scope">
                         <el-button type="text" @click="show(scope.row)">查看详情</el-button>
@@ -44,10 +44,10 @@
 </template>
 
 <script>
+import { mapState,mapActions } from 'vuex'
 export default {
     data() {
         return {
-            schoolId: this.$store.state.schoolId,
             keyword: '',
             classificationId: '',
             listData: [],
@@ -58,6 +58,11 @@ export default {
             searchTimer: null
         };
     },
+    computed: {
+        ...mapState('user', [
+            'userId'
+        ])
+    },
     watch: {
         keyword: function(val) {
             clearTimeout(this.searchTimer)
@@ -70,16 +75,14 @@ export default {
         this.getData()
     },
     methods: {
+        ...mapActions('achievement', [
+            'setInfo'
+        ]),
         getData() {
-            // let data = {
-            //     classificationId: this.classificationId,
-            //     name: this.keyword,
-            //     schoolId: this.schoolId
-            // }
-            // this.$get(`${this.api.queryCourseByCondition}/${this.page}/${this.pageSize}`,data).then(res => {
-            //     this.listData = res.data.courseList
-            //     this.total = res.data.total
-            // }).catch(res => {})
+            this.$post(`${this.api.practiseAchievement}?userId=${this.userId}&pageNum=${this.page}&pageSize=${this.pageSize}`).then(res => {
+                this.listData = res.data.list.list
+                this.total = res.data.list.totalCount
+            }).catch(res => {})
         },
         handleDelete(row) {
             this.$confirm('确定要删除吗？', '提示', {
@@ -97,11 +100,14 @@ export default {
             this.multipleSelection = val;
         },
         handleCurrentChange(val) {
-            this.page = val;
-            this.getData();
+            this.page = val
+            this.getData()
         },
         show(row){
-
+            this.setInfo({
+                id: row.practiseId,
+            })
+            this.$router.push('practice')
         }
     }
 };
diff --git a/src/pages/achievement/practice/index.vue b/src/pages/achievement/practice/index.vue
new file mode 100644
index 0000000..2085103
--- /dev/null
+++ b/src/pages/achievement/practice/index.vue
@@ -0,0 +1,279 @@
+<template>
+    <div class="box">
+        <h1 class="title">{{paperName }}</h1>
+        <div class="metas">
+            <div style="margin-right: 20px;">
+                <span class="name">总分：</span>
+                <span class="val">100分</span>
+            </div>
+            <div>
+                <span class="name">考试时长：</span>
+                <span class="val">{{duration}}</span>
+            </div>
+        </div>
+
+        <ul class="tab">
+            <li v-for="(item,index) in tabs" :key="index" :class="{active: active == item.id}" @click="tabChange(item.id)">{{item.name}}</li>
+        </ul>
+
+        <div class="wrap">
+            <div class="item" v-for="(item,index) in curType" :key="index">
+                <div class="answer">
+                    <div class="info">
+                        <p class="key">序号：</p>
+                        <p class="val">{{index+1}}</p>
+                    </div>
+                    <div class="info">
+                        <p class="key">得分：</p>
+                        <p class="val">{{item.questionScore}}</p>
+                    </div>
+                </div>
+                <div class="meta">
+                    <p class="key">题干：</p>
+                    <p class="val" v-html="item.questionStem"></p>
+                </div>
+                <div class="meta">
+                    <p class="key">选项：</p>
+                    <div class="val">
+                        <p v-for="(option,i) in item.options" :key="i">{{i}}.{{item.options[i]}}</p>
+                    </div>
+                </div>
+                <div class="meta ans">
+                    <div class="info">
+                        <p class="key">正确答案：</p>
+                        <p class="val">{{item.answer}}</p>
+                    </div>
+                    <div class="info">
+                        <p class="key">学生答案：</p>
+                        <p class="val">{{item.userAnswer}}</p>
+                    </div>
+                </div>
+                <div class="meta">
+                    <p class="key">答案解析：</p>
+                    <p class="val" v-html="item.answerAnalysis"></p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import mixins from '@/mixins/setBackground'
+import { mapState } from 'vuex'
+export default {
+    mixins: [ mixins ],
+    data() {
+        return {
+            paperName: '',
+            duration: 0,
+            selectVisible: false,
+            tabs: [
+                {
+                    id: 1,
+                    name: '单选题'
+                },{
+                    id: 2,
+                    name: '多选题'
+                },{
+                    id: 3,
+                    name: '判断题'
+                },{
+                    id: 4,
+                    name: '简答题'
+                },{
+                    id: 5,
+                    name: '填空题'
+                }
+            ],
+            typeNameList: ['单项选择','多项选择','判断题','简答题','填空题'],
+            active: 1,
+            list: [],
+            curType: []
+        };
+    },
+    computed: {
+        ...mapState('user', [
+            'userId'
+        ]),
+        ...mapState('achievement', [
+            'id'
+        ])
+    },
+    mounted() {
+        this.getData()
+    },
+    methods: {
+        getData() {
+            this.$post(`${this.api.reviewDetail}?id=${this.id}`)
+            .then(res => {
+                let data = res.data
+                data.list.forEach(n => {
+                    n.isCorrecting == 0 && (n.questionScore = '')
+                    n.isSub = n.typeName == '简答题'
+                    if(n.typeName == '填空题'){
+                        let answer = []
+                        for(let i in n){
+                            if(i.includes('option')) answer.push(n[i])
+                        }
+                        n.answer = answer.join('|')
+                        n.userAnswer = n.userAnswer ? n.userAnswer.replace(/&lt;&gt;/g,'|') : ''
+                    }
+                })
+                this.list = data.list
+                this.handleOptions()
+                this.paperName = data.paperName
+                this.userName = data.stuName
+                this.this_score = data.score
+                this.duration = data.timeCost
+            })
+            .catch(err => {})
+        },
+        tabChange(id){
+            this.active = id
+            this.handleOptions()
+        },
+        handleOptions(){
+            let list = this.list
+            let typeName = this.typeNameList[this.active-1]
+            list = list.filter(n => n.typeName == typeName)
+            list.forEach(n => {
+                if(!n.options){
+                    let options = {}
+                    let answer = []
+                    for(let i in n){
+                        if(i.includes('option') && n[i]){
+                            options[i.replace('option','')] = n[i]
+                            if(n.typeName == '填空题') answer.push(n[i])
+                        }
+                    }
+                    if(n.typeName == '填空题') n.answer = answer.join('|')
+                    n.options = options
+                }
+            })
+            this.curType = list
+        }
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+    .box{
+        width: 90%;
+        margin: 0 auto;
+    }
+    .title{
+        text-align: center;
+        font-size: 18px;
+        font-weight: 600;
+    }
+    .metas{
+        display: flex;
+        justify-content: center;
+        margin: 20px 0 30px;
+        .name{
+            font-size: 12px;
+            color: #717171;
+        }
+        .val{
+            font-size: 12px;
+            color: #929292;
+        }
+    }
+    .tab{
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+        li{
+            position: relative;
+            padding: 0 44px;
+            margin-right: 7px;
+            font-size: 13px;
+            line-height: 46px;
+            text-align: center;
+            color: #444;
+            border: 1px solid #ececec;
+            cursor: pointer;
+            &:hover{
+                opacity: .8;
+            }
+            &.active:after{
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 4px;
+                background-color: $main-color;
+            }
+        }
+    }
+    .wrap{
+        .item{
+            padding-bottom: 30px;
+            margin-bottom: 30px;
+            border-bottom: 1px dashed #f4f4f4;
+
+            .key{
+                font-weight: bold;
+                color: #333;
+                font-size: 14px;
+            }
+            .val{
+                color: #757575;
+                font-size: 14px;
+            }
+            .answer{
+                display: flex;
+                align-items: center;
+                padding: 15px;
+                margin: 15px 0;
+                font-size: 12px;
+                border: 1px solid #e8e8e8;
+                background-color: #f3f2f2;
+                .info{
+                    display: inline-flex;
+                    align-items: center;
+                    margin-right: 30px;
+                }
+            }
+            .meta{
+                padding-left: 10px;
+                margin: 20px 0;
+                font-size: 12px;
+                &.ans{
+                    display: flex;
+                    .info{
+                        margin-right: 20px;
+                    }
+                }
+                .key{
+                    margin-bottom: 5px;
+                }
+            }
+        }
+    }
+    .btns{
+        display: flex;
+        justify-content: center;
+        margin-top: 20px;
+        button{
+            height: 30px;
+            padding: 0 30px;
+            margin: 0 15px;
+            font-size: 14px;
+            color: #333;
+            line-height: 30px;
+            background-color: #fff;
+            border: 1px solid #ededed;
+            border-radius: 4px;
+            cursor: pointer;
+            &.submit{
+                color: #fff;
+                background-color: $main-color;
+                border-color: $main-color;
+            }
+            &:hover{
+                opacity: .8;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/practice/list/randomPractice.vue b/src/pages/practice/list/randomPractice.vue
index 3b845f9..5c7ca67 100644
--- a/src/pages/practice/list/randomPractice.vue
+++ b/src/pages/practice/list/randomPractice.vue
@@ -29,16 +29,14 @@
                 </div>
             </div>
             <el-table :data="listData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id">
-                <el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
                 <el-table-column type="index" width="100" label="序号" align="center">
                     <template slot-scope="scope">
                         {{scope.$index + (page - 1) * pageSize + 1}}
                     </template>
                 </el-table-column>
-                <el-table-column prop="name" label="练习名称" align="center"></el-table-column>
-                <el-table-column prop="name" label="时长（分钟）" align="center"></el-table-column>
-                <el-table-column prop="name" label="用时（分钟）" align="center"></el-table-column>
-                <el-table-column prop="name" label="得分" align="center"></el-table-column>
+                <el-table-column prop="practiceName" label="练习名称" align="center"></el-table-column>
+                <el-table-column prop="timeSpent" label="用时（分钟）" align="center"></el-table-column>
+                <el-table-column prop="score" label="得分" align="center"></el-table-column>
             </el-table>
             <div class="pagination">
                 <el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page">
@@ -49,6 +47,7 @@
 </template>
 
 <script>
+import { mapState,mapGetters,mapActions } from 'vuex'
 export default {
     data() {
         return {
@@ -60,6 +59,11 @@ export default {
             total: 0,
         };
     },
+    computed: {
+        ...mapState('user', [
+            'userId','clientId'
+        ]),
+    },
     watch: {
         keyword: function(val) {
             clearTimeout(this.searchTimer)
@@ -73,19 +77,20 @@ export default {
     },
     methods: {
         getData() {
-            // this.$get(this.api.queryAllClassification).then(res => {
-            //     this.listData = res.data.listData
-            // }).catch(res => {})
+            this.$post(`${this.api.pageRandomPracticeList}?userId=${this.userId}&pageNum=${this.page}&pageSize=${this.pageSize}&name=${this.keyword}`).then(res => {
+                this.listData = res.data.list.list
+                this.total = res.data.list.totalCount
+            }).catch(res => {})
         },
         handleSelectionChange(val) {
-            this.multipleSelection = val;
+            this.multipleSelection = val
         },
         handleCurrentChange(val) {
-            this.page = val;
-            this.getData();
+            this.page = val
+            this.getData()
         },
         practice(){
-            this.$router.push('do')
+            this.$router.push('randomDo')
         }
     }
 };
diff --git a/src/pages/practice/randomDo/index.vue b/src/pages/practice/randomDo/index.vue
new file mode 100644
index 0000000..cea1508
--- /dev/null
+++ b/src/pages/practice/randomDo/index.vue
@@ -0,0 +1,353 @@
+<template>
+    <div class="box">
+        <div class="left">
+            <p class="title">答题卡</p>
+
+            <div class="item">
+                <p class="type">单选题</p>
+                <p class="total">（共{{singleCount}}题，合计{{singlePoint}}分）</p>
+                <div class="nums">
+                    <span v-for="n in singleCount" :class="{active: n <= singleAnsweredCount}" :key="n">{{n}}</span>
+                </div>
+            </div>
+            <div class="item">
+                <p class="type">多选题</p>
+                <p class="total">（共{{multipleCount}}题，合计{{multipleChoiceScore}}分）</p>
+                <div class="nums">
+                    <span v-for="n in multipleCount" :class="{active: n <= multipleAnsweredCount}" :key="n">{{n}}</span>
+                </div>
+            </div>
+            <div class="item">
+                <p class="type">判断题</p>
+                <p class="total">（共{{judgeCount}}题，合计{{judgeScore}}分）</p>
+                <div class="nums">
+                    <span v-for="n in judgeCount" :class="{active: n <= judgeAnsweredCount}" :key="n">{{n}}</span>
+                </div>
+            </div>
+            <div class="item">
+                <p class="type">填空题</p>
+                <p class="total">（共{{fillBlankCount}}题，合计{{fillBlanksScore}}分）</p>
+                <div class="nums">
+                    <span v-for="n in fillBlankCount" :class="{active: n <= fillBlankAnsweredCount}" :key="n">{{n}}</span>
+                </div>
+            </div>
+            <div class="item">
+                <p class="type">简答题</p>
+                <p class="total">（共{{briefAnswerCount}}题，合计{{briefAnswerScore}}分）</p>
+                <div class="nums">
+                    <span v-for="n in briefAnswerCount" :class="{active: n <= briefAnswerAnsweredCount}" :key="n">{{n}}</span>
+                </div>
+            </div>
+            <div class="btn">
+                <el-button size="mini" type="primary" @click="save">提交练习</el-button>
+            </div>
+        </div>
+
+        <div class="middle">
+            <div class="ques">
+                <template v-for="(subject,k) in subjects">
+                    <div class="item" v-if="subject.length" :key="k">
+                        <p v-if="subjects[k].length" class="title">{{questionType[k]}}（共{{subjects[k].length}}题，合计{{scoreList[k]}}分）</p>
+                        <div class="ques-wrap" v-for="(item,index) in subject" :key="index">
+                            <div class="name-wrap">
+                                <span class="index">{{index+1}}.</span>
+                                <div class="name" :class="'stem' + k + index" v-html="item.questionStem"></div>
+                            </div>
+                            <div class="options">
+                                <template v-if="item.name == '单项选择' || item.name == '判断题'">
+                                    <div class="option" v-for="(option,i) in item.options" :key="i">
+                                        <el-radio v-model="item.val" :label="i">
+                                            {{i}}.{{item.options[i]}}
+                                        </el-radio>
+                                    </div>
+                                </template>
+                                <template v-if="item.name == '多项选择'">
+                                    <el-checkbox-group v-model="item.val">
+                                        <el-checkbox class="option-check" :label="i" v-for="(option,i) in item.options" :key="i">
+                                            {{i}}.{{item.options[i]}}
+                                        </el-checkbox>
+                                    </el-checkbox-group>
+                                </template>
+                                <template v-if="item.name == '简答题'">
+                                    <el-input type="textarea" rows="5" v-model="item.val"></el-input>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { mapState,mapGetters,mapActions } from 'vuex'
+import mixins from '@/mixins/setBackground'
+import util from '@/libs/util'
+export default {
+    mixins: [ mixins ],
+    data() {
+        return {
+            subjects: [],
+            singleCount: 0,
+            multipleCount: 0,
+            judgeCount: 0,
+            fillBlankCount: 0,
+            briefAnswerCount: 0,
+
+            singleAnsweredCount: 0,
+            multipleAnsweredCount: 0,
+            judgeAnsweredCount: 0,
+            fillBlankAnsweredCount: 0,
+            briefAnswerAnsweredCount: 0,
+            
+            singlePoint: 0,
+            multipleChoiceScore: 0,
+            judgeScore: 0,
+            fillBlanksScore: 0,
+            briefAnswerScore: 0,
+            scoreList: [],
+            questionType: ['单选题','多选题','判断题','填空题','简答题'],
+            progress: 0,
+        };
+    },
+    computed: {
+        ...mapState('user', [
+            'userId','clientId'
+        ])
+    },
+    mounted() {
+        this.getData()
+    },
+    methods: {
+        getData() {
+            this.$post(`${this.api.randomPractice}?userId=${this.userId}&schoolId=${this.clientId}`)
+            .then(res => {
+                let data = res.data
+                this.randomId = data.randomId
+                this.$post(`${this.api.previewPaper}?qid=${data.qid}`)
+                .then(res => {
+                    let data = res.data
+                    let subjects = [
+                        [...data.list1],
+                        [...data.list2],
+                        [...data.list4],
+                        [...data.list3],
+                        [...data.list5],
+                    ]
+                    this.singleCount = data.list1.length
+                    this.multipleCount = data.list2.length
+                    this.fillBlankCount = data.list3.length
+                    this.judgeCount = data.list4.length
+                    this.briefAnswerCount = data.list5.length
+
+                    this.singlePoint = data.list1.length ? data.list1[0].singleChoiceScore * this.singleCount : 0
+                    this.multipleChoiceScore = data.list2.length ? data.list2[0].multipleChoiceScore * this.multipleCount : 0
+                    this.judgeScore = data.list4.length ? data.list4[0].judgeScore * this.judgeCount : 0
+                    this.fillBlanksScore = data.list3.length ? data.list3[0].fillBlanksScore * this.fillBlankCount : 0
+                    this.briefAnswerScore = data.list5.length ? data.list5[0].briefAnswerScore * this.briefAnswerCount : 0
+                    this.scoreList = [this.singlePoint,this.multipleChoiceScore,this.fillBlanksScore,this.briefAnswerScore,this.briefAnswerScore]
+
+                    subjects.forEach((e,i) => {
+                        e.forEach(n => {
+                            if(i == 1){
+                                this.$set(n,'val',[])
+                            }else if(i == 3){
+                                n.questionStem = n.questionStem.replace(/\(\)\(\)\(\)/g,`<input class="input"></input>`)
+                            }else{
+                                this.$set(n,'val','')
+                            }
+                            if(!n.options){
+                                let options = {}
+                                for(let i in n){
+                                    if(i.includes('option') && n[i]){
+                                        options[i.replace('option','')] = n[i]
+                                    }
+                                }
+                                n.options = options
+                            }
+                            n.questionStatus = 0
+                        })
+                    })
+                    this.subjects = subjects
+                }).catch(err => {})
+            }).catch(err => {})
+        },
+        save(){
+            let data1 = []
+            this.subjects.map((e,i) => {
+                e.map((n,k) => {
+                    let userAnswer = ''
+                    if(i == 1){
+                        userAnswer = n.val.join('')
+                    }else if(i == 3){
+                        userAnswer = [...document.querySelectorAll(`.stem${i}${k} input`)].map(n => n.value).join('&lt;&gt;')
+                    }else{
+                        userAnswer = n.val
+                    }
+                    data1.push({
+                        randomId: this.randomId,
+                        questionId: n.questionId,
+                        questionStatus : 1,
+                        userAnswer,
+                        userId: this.userId
+                    })
+                })
+            })
+
+            this.$post(`${this.api.AddRandomPractiseExamAnswerDetail}`,data1)
+            .then(res => {
+                this.$post(`${this.api.addPractiseRecordRandom}?userId=${this.userId}&randomId=${this.randomId}`)
+                .then(res => {
+                    this.$message.success('提交成功')
+                    this.$router.back()
+                })
+                .catch(err => {})
+            })
+            .catch(err => {})
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+    $borderColor: #ececec;
+    .box{
+        display: flex;
+        justify-content: space-between;
+        width: 90%;
+        margin: 0 auto;
+        .left,.middle,.right{
+            border: 1px solid $borderColor;
+        }
+        .left,.right{
+            width: 160px;
+            padding: 10px;
+            margin-right: 10px;
+            box-sizing: border-box;
+            .title{
+                padding: 10px 0;
+                font-size: 14px;
+                color: #444;
+                text-align: center;
+            }
+            .item{
+                padding: 10px 0;
+                margin-bottom: 10px;
+                border-bottom: 1px solid $borderColor;
+                .type,.total{
+                    color: #444;
+                    font-size: 12px;
+                }
+                .total{
+                    margin: 10px 0;
+                }
+                .nums{
+                    display: flex;
+                    flex-wrap: wrap;
+                    span{
+                        width: 24px;
+                        margin: 2px 1px;
+                        line-height: 24px;
+                        text-align: center;
+                        color: #888;
+                        font-size: 10px;
+                        box-sizing: border-box;
+                        border: 1px solid #e6e6e6;
+                        border-radius: 50%;
+                    }
+                    .active{
+                        color: #fff;
+                        background-color: #e80909;
+                        border-color: #e80909;
+                    }
+                }
+            }
+            .btn{
+                margin: 20px 0;
+                text-align: center;
+            }
+        }
+        .middle{
+            flex: 1;
+            margin-right: 10px;
+            overflow: auto;
+            .title{
+                padding: 10px;
+                margin-bottom: 10px;
+                font-size: 14px;
+                color: #444;
+                border-bottom: 1px solid $borderColor;
+            }
+            .ques{
+                .ques-wrap{
+                    padding: 0 15px;
+                    margin: 10px 0 20px;
+                }
+                .item{
+                    margin: 10px 0 20px;
+                    &:first-child{
+                        margin-top: 0;
+                    }
+                    .name-wrap{
+                        display: flex;
+                        align-items: center;
+                        margin-bottom: 10px;
+                        font-size: 13px;
+                        color: #444;
+                        .index{
+                            font-size: 13px;
+                            color: #444;
+                        }
+                        /deep/.input{
+                            width: 100px;
+                            height: 28px;
+                            padding: 0 5px;
+                            margin: 0 5px;
+                            color: #444;
+                            background-color: #fff;
+                            border: 1px solid #ebebeb;
+                            box-sizing: border-box;
+                            &:focus{
+                                outline: none;
+                            }
+                            &:disabled{
+                                background-color: #e8e8e8;
+                                cursor: not-allowed;
+                            }
+                        }
+                    }
+                    .options{
+                        margin-top: 10px;
+                        font-size: 14px;
+                        color: #8b8b8b;
+                        .option{
+                            margin: 5px 0;
+                            &.selected{
+                                font-weight: bold;
+                                color: #555;
+                            }
+                        }
+                        .option-check{
+                            display: block;
+                            margin-right: 6px;
+                        }
+                        /deep/.el-radio__label{
+                            padding-left: 6px;
+                        }
+                    }
+                }
+            }
+        }
+        .right{
+            .time,.ans{
+                font-size: 14px;
+                color: #444;
+                text-align: center;
+            }
+            .ans{
+                margin: 20px 0 10px;
+                font-size: 15px;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/router/modules/achievement.js b/src/router/modules/achievement.js
index 7b03b93..ae06f66 100644
--- a/src/router/modules/achievement.js
+++ b/src/router/modules/achievement.js
@@ -25,5 +25,11 @@ export default {
             component: () => import('@/pages/achievement/detail'),
             meta: { title: '答题详情' }
         },
+        {
+            name: `${pre}practice`,
+            path: `practice`,
+            component: () => import('@/pages/achievement/practice'),
+            meta: { title: '答题详情' }
+        },
     ]
 };
diff --git a/src/router/modules/practice.js b/src/router/modules/practice.js
index a2869d8..6fe5a18 100644
--- a/src/router/modules/practice.js
+++ b/src/router/modules/practice.js
@@ -23,6 +23,11 @@ export default {
             path: `do`,
             component: () => import('@/pages/practice/do'),
             meta: { title: '我的练习' }
+        },{
+            name: `${pre}randomDo`,
+            path: `randomDo`,
+            component: () => import('@/pages/practice/randomDo'),
+            meta: { title: '随机练习' }
         },
     ]
 };
diff --git a/src/setting.js b/src/setting.js
index 72cc4ba..e667c19 100644
--- a/src/setting.js
+++ b/src/setting.js
@@ -53,7 +53,7 @@ const Setting = {
     menuSideWidth: 256,
     layout: {
         // 需要隐藏顶栏的页面路径
-        hideNavList: ['index-do','setting-person','achievement-detail','exam-do','exam-detail'],
+        hideNavList: ['index-do','index-randomDo','setting-person','achievement-detail','achievement-practice','exam-do','exam-detail'],
         // 侧边栏风格，可选值为 dark 或 light
         siderTheme: 'dark',
         // 顶栏风格，可选值为 light、dark 或 primary
diff --git a/src/styles/lib/background.scss b/src/styles/lib/_background.scss
similarity index 100%
rename from src/styles/lib/background.scss
rename to src/styles/lib/_background.scss
diff --git a/src/styles/lib/border.scss b/src/styles/lib/_border.scss
similarity index 100%
rename from src/styles/lib/border.scss
rename to src/styles/lib/_border.scss
diff --git a/src/styles/lib/box.scss b/src/styles/lib/_box.scss
similarity index 100%
rename from src/styles/lib/box.scss
rename to src/styles/lib/_box.scss
diff --git a/src/styles/lib/cursor.scss b/src/styles/lib/_cursor.scss
similarity index 100%
rename from src/styles/lib/cursor.scss
rename to src/styles/lib/_cursor.scss
diff --git a/src/styles/lib/display.scss b/src/styles/lib/_display.scss
similarity index 100%
rename from src/styles/lib/display.scss
rename to src/styles/lib/_display.scss
diff --git a/src/styles/lib/flex.scss b/src/styles/lib/_flex.scss
similarity index 100%
rename from src/styles/lib/flex.scss
rename to src/styles/lib/_flex.scss
diff --git a/src/styles/lib/float.scss b/src/styles/lib/_float.scss
similarity index 100%
rename from src/styles/lib/float.scss
rename to src/styles/lib/_float.scss
diff --git a/src/styles/lib/font-size.scss b/src/styles/lib/_font-size.scss
similarity index 100%
rename from src/styles/lib/font-size.scss
rename to src/styles/lib/_font-size.scss
diff --git a/src/styles/lib/font-weight.scss b/src/styles/lib/_font-weight.scss
similarity index 100%
rename from src/styles/lib/font-weight.scss
rename to src/styles/lib/_font-weight.scss
diff --git a/src/styles/lib/line-height.scss b/src/styles/lib/_line-height.scss
similarity index 100%
rename from src/styles/lib/line-height.scss
rename to src/styles/lib/_line-height.scss
diff --git a/src/styles/lib/link.scss b/src/styles/lib/_link.scss
similarity index 100%
rename from src/styles/lib/link.scss
rename to src/styles/lib/_link.scss
diff --git a/src/styles/lib/overflow.scss b/src/styles/lib/_overflow.scss
similarity index 100%
rename from src/styles/lib/overflow.scss
rename to src/styles/lib/_overflow.scss
diff --git a/src/styles/lib/position.scss b/src/styles/lib/_position.scss
similarity index 100%
rename from src/styles/lib/position.scss
rename to src/styles/lib/_position.scss
diff --git a/src/styles/lib/size.scss b/src/styles/lib/_size.scss
similarity index 100%
rename from src/styles/lib/size.scss
rename to src/styles/lib/_size.scss
diff --git a/src/styles/lib/text-align.scss b/src/styles/lib/_text-align.scss
similarity index 100%
rename from src/styles/lib/text-align.scss
rename to src/styles/lib/_text-align.scss
diff --git a/src/styles/lib/text-color.scss b/src/styles/lib/_text-color.scss
similarity index 100%
rename from src/styles/lib/text-color.scss
rename to src/styles/lib/_text-color.scss
diff --git a/src/styles/lib/vertical-align.scss b/src/styles/lib/_vertical-align.scss
similarity index 100%
rename from src/styles/lib/vertical-align.scss
rename to src/styles/lib/_vertical-align.scss
diff --git a/src/styles/lib/visibility.scss b/src/styles/lib/_visibility.scss
similarity index 100%
rename from src/styles/lib/visibility.scss
rename to src/styles/lib/_visibility.scss
diff --git a/src/styles/lib/white-space.scss b/src/styles/lib/_white-space.scss
similarity index 100%
rename from src/styles/lib/white-space.scss
rename to src/styles/lib/_white-space.scss
diff --git a/src/styles/lib/index.scss b/src/styles/lib/index.scss
index 06873a2..6003530 100644
--- a/src/styles/lib/index.scss
+++ b/src/styles/lib/index.scss
@@ -25,4 +25,4 @@
 @import "visibility";
 @import "white-space";
 
-@import "style";
+@import "style";
\ No newline at end of file
diff --git a/src/styles/pages/tree.scss b/src/styles/pages/tree.scss
new file mode 100644
index 0000000..59af75b
--- /dev/null
+++ b/src/styles/pages/tree.scss
@@ -0,0 +1,104 @@
+$insideColor: rgba(245, 242, 255, 0.8); //内部节点的边框颜色
+$outColor: rgba(255, 255, 255, 0.8); //外部节点的边框颜色
+//混合代码,提取item共同样式
+@mixin public {
+    cursor: pointer;  
+    font-size: 14px;
+    color: #333333;
+    display: flex;
+    align-items: center;
+    img {
+        height: 20px;
+        width: 20px;
+        margin-left: 10px;
+    }
+}
+
+.side_tree{
+    width: 100%;
+    font-size: 14px;
+    color: #333;
+    i{
+        margin-left: 5px;
+        font-size: 17px;
+    }
+    span{
+        margin-left: 5px;
+        font-size: 14px;
+    }
+}
+.item {
+    @include public;
+    width: 100%;
+    padding: 15px 0;
+    background:rgba(255,255,255,1);
+    box-shadow:1px 14px 29px 0px rgba(255,69,69,0.19);
+    border-radius:10px;
+    text-align: left;
+    margin-top: 20px;
+}
+.empty{
+    width: 25px;
+}
+.item:first{
+    margin-top: 0;
+}
+.item1 {
+    @include public;
+    margin-top: 20px;
+    margin-left: 23px;
+}
+.item2 {
+    @include public;
+    margin-top: 20px;
+    margin-left:80px
+}
+.item3 {
+    @include public;
+    margin-top: 20px;
+    margin-left:95px
+}
+.item2:hover{
+    color: #cb221c;
+}
+.edit{
+    display: inline-block;
+    width: 17px;
+    height: 17px;
+    background: url(../../../assets/svg/edit.svg) 0 0/cover no-repeat;
+}
+// 使三角形旋转动画
+.arrowTransform {
+    transition: 0.4s;
+    transform-origin: center;
+    transform: rotateZ(0deg);
+}
+.arrowTransformReturn {
+    transition: 0.4s;
+    transform-origin: center;
+    transform: rotateZ(90deg);
+}
+
+//复选框样式
+.checkBox {
+    width: 14px;
+    height: 14px;
+    border-radius: 7px;
+    margin-left: 10px;
+    margin-right: 10px;
+    border: 2px solid rgba(146, 120, 255, 1);
+}
+
+//当点击复选框时候切换背景图片
+.isActive {
+    background: url('../../../assets/img/icon-yigouxuan.png');
+    background-size: 14px 14px; /*按比例缩放*/
+}
+
+.side_icon{
+    text-align: right;
+}
+.side_icon i{
+    cursor:pointer;
+    font-size: 20px;
+}
\ No newline at end of file
diff --git a/src/styles/var.scss b/src/styles/var.scss
new file mode 100644
index 0000000..db7369c
--- /dev/null
+++ b/src/styles/var.scss
@@ -0,0 +1,24 @@
+$main-color: #e80909;
+
+@mixin ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+@mixin mul-ellipsis($num) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $num;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.ellipsis{
+    @include ellipsis();
+}
+.mul-ellipsis2{
+    @include mul-ellipsis(2);
+}
+.mul-ellipsis3{
+    @include mul-ellipsis(3);
+}
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index c56ab4b..20e4668 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -14,6 +14,9 @@ module.exports = {
   lintOnSave: true,
   css: {
     loaderOptions: {
+      sass: {
+        prependData: `@import "@/styles/var.scss";`
+      },
       postcss: {
         plugins: [
           postcss