zc

src/api/safetyEducationExaminationNew/index.js

@@ -860,3 +860,11 @@ export function examElStatisticsCreditHourList(data) {
     data: data
   })
 }
+//工作台查询考试列表
+export function examUserExamStudyTaskList(data) {
+  return request({
+    url: '/exam/user/exam/studyTaskList',
+    method: 'post',
+    data: data
+  })
+}

src/assets/styles/index.scss

@@ -438,9 +438,9 @@ aside {
   background: $acquiesceThemeScrollbarB;
 }
 .scrollbar-box::-webkit-scrollbar-track{
-  -webkit-box-shadow: inset 0 0 5px $acquiesceThemeScrollbarA;
+  -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
   border-radius: 0;
-  background: $acquiesceThemeScrollbarA;
+  background:  rgba(255,255,255,0);
 }
 //横向
 .scrollbar-x-box{

src/views/safetyEducationExaminationNew/components/historyOfIncorrectQuestions.vue

@@ -185,8 +185,8 @@
             obj.knowledgePointId = this.historyOfIncorrectQuestionsPropsData.knowledgePointId;
           }
           this.$router.push({
-            name: 'startTraining',
-            params: obj
+            path: '/startTraining',
+            query: obj
           })
         }else if(type == 2){
           //查看答案

src/views/safetyEducationExaminationNew/examManagement/examinationResult/academicPerformance.vue

@@ -52,6 +52,11 @@
         </el-table-column>
         <el-table-column label="学时" prop="rewardCreditHours" width="200" show-overflow-tooltip/>
         <el-table-column label="积分" prop="rewardPoints" width="200" show-overflow-tooltip/>
+        <el-table-column label="是否完成" prop="passStatus" width="200" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.passStatus == 1?'已完成':'未完成' }}</span>
+          </template>
+        </el-table-column>
       </el-table>
       <pagination :page-sizes="[20, 30, 40, 50]"
                   v-show="total>0"

src/views/safetyEducationExaminationNew/featurePage/learningCourse/index.vue

@@ -106,8 +106,8 @@
     methods: {
       //初始化
       initialization(){
-        this.$set(this,'courseId',this.$route.params.courseId)
-        this.$set(this,'examId',this.$route.params.examId)
+        this.$set(this,'courseId',this.$route.query.courseId)
+        this.$set(this,'examId',this.$route.query.examId)
         this.$nextTick(()=>{
           this.examUserCourseLearningCoursewareList();
         })

src/views/safetyEducationExaminationNew/featurePage/learningMaterials/index.vue

@@ -87,7 +87,7 @@
     methods: {
       //初始化
       initialization(){
-        this.$set(this,'coursewareId',this.$route.params.coursewareId)
+        this.$set(this,'coursewareId',this.$route.query.coursewareId)
         this.$nextTick(()=>{
           this.examUserCoursewareLearningDetail();
         })

src/views/safetyEducationExaminationNew/featurePage/mockExam/index.vue

@@ -226,8 +226,8 @@
     },
     methods: {
       initialize() {
-        if (this.$route.params) {
-          this.$set(this, 'newData', this.$route.params)
+        if (this.$route.query) {
+          this.$set(this, 'newData', this.$route.query)
         } else {
           this.$router.back()
           return

src/views/safetyEducationExaminationNew/featurePage/startPracticing/index.vue

@@ -208,8 +208,8 @@
     },
     methods: {
       initialize() {
-        if (this.$route.params) {
-          this.$set(this, 'newData', this.$route.params)
+        if (this.$route.query) {
+          this.$set(this, 'newData', this.$route.query)
         } else {
           this.$router.back()
           return

src/views/safetyEducationExaminationNew/featurePage/startTheExam/index.vue

@@ -176,8 +176,8 @@
     },
     methods: {
       initialize() {
-        if (this.$route.params) {
-          this.$set(this, 'newData', this.$route.params)
+        if (this.$route.query) {
+          this.$set(this, 'newData', this.$route.query)
         } else {
           this.$router.back()
           return

src/views/safetyEducationExaminationNew/featurePage/startTraining/index.vue

@@ -193,8 +193,8 @@
     },
     methods: {
       initialize() {
-        if (this.$route.params) {
-          this.$set(this, 'newData', this.$route.params)
+        if (this.$route.query) {
+          this.$set(this, 'newData', this.$route.query)
         } else {
           this.$router.back()
           return

src/views/safetyEducationExaminationNew/safetyEducation/knowledgeLearning/index.vue

@@ -129,7 +129,7 @@
 
     },
     mounted() {
-      if(this.$route.params.skip){
+      if(this.$route.query.skip){
         this.$set(this,'topButtonIndex',2);
       }
       if(this.$route.query.text){
@@ -212,8 +212,8 @@
           }).then(() => {
             examUserCoursewareLearningRestart({coursewareId:item.coursewareId}).then(response => {
               self.$router.push({
-                name: 'learningMaterials',
-                params: {
+                path: '/learningMaterials',
+                query: {
                   coursewareId: item.coursewareId,
                 }
               })
@@ -221,8 +221,8 @@
           }).catch(() => {});
         }else{
           this.$router.push({
-            name: 'learningMaterials',
-            params: {
+            path: '/learningMaterials',
+            query: {
               coursewareId: item.coursewareId,
             }
           })

src/views/safetyEducationExaminationNew/safetyEducation/learningTasks/index.vue

@@ -153,15 +153,15 @@
           }).then(() => {
             //学时要求
             self.$router.push({
-              name: 'knowledgeLearning',
-              params: {}
+              path: '/safetyEducationExaminationNew/safetyEducation/knowledgeLearning',
+              query: {}
             })
           }).catch(() => {});
         }else{
           //学习课程
           this.$router.push({
-            name: 'learningCourse',
-            params: {
+            path: '/learningCourse',
+            query: {
               courseId: item.courseId,
               examId: item.examId,
             }

src/views/safetyEducationExaminationNew/safetyTest/mockExam/index.vue

@@ -166,14 +166,14 @@
         if (type == 1) {
           //学时要求
           self.$router.push({
-            name: 'knowledgeLearning',
-            params: {}
+            path: '/safetyEducationExaminationNew/safetyEducation/knowledgeLearning',
+            query: {}
           })
         }else if(type == 2){
           //学习课程
           this.$router.push({
-            name: 'learningCourse',
-            params: {
+            path: '/learningCourse',
+            query: {
               courseId: item.courseId,
               examId: item.examId,
             }
@@ -182,8 +182,8 @@
           //模拟考试
           if(item.attemptId){
             this.$router.push({
-              name: 'mockExam',
-              params: {
+              path: '/mockExam',
+              query: {
                 examId: item.examId,
                 attemptId: item.attemptId,
               }
@@ -192,8 +192,8 @@
             examUserExamStart({examId:item.examId,examScene:2,}).then(response => {
               if(response.data.attemptId){
                 this.$router.push({
-                  name: 'mockExam',
-                  params: {
+                  path: '/mockExam',
+                  query: {
                     examId: item.examId,
                     attemptId: response.data.attemptId,
                   }

src/views/safetyEducationExaminationNew/safetyTest/onlineExam/index.vue

@@ -166,14 +166,14 @@
         if (type == 1) {
           //学时要求
           self.$router.push({
-            name: 'knowledgeLearning',
-            params: {}
+            path: '/safetyEducationExaminationNew/safetyEducation/knowledgeLearning',
+            query: {}
           })
         }else if(type == 2){
           //学习课程
           this.$router.push({
-            name: 'learningCourse',
-            params: {
+            path: '/learningCourse',
+            query: {
               courseId: item.courseId,
               examId: item.examId,
             }
@@ -182,8 +182,8 @@
           //模拟考试
           if(item.mockExamId){
             this.$router.push({
-              name: 'mockExam',
-              params: {
+              path: '/mockExam',
+              query: {
                 examId: item.examId,
                 attemptId: item.mockExamId,
               }
@@ -192,8 +192,8 @@
             examUserExamStart({examId:item.examId,examScene:2,}).then(response => {
               if(response.data.attemptId){
                 this.$router.push({
-                  name: 'mockExam',
-                  params: {
+                  path: '/mockExam',
+                  query: {
                     examId: item.examId,
                     attemptId: response.data.attemptId,
                   }
@@ -207,8 +207,8 @@
           //开始考试
           if(item.attemptId){
             this.$router.push({
-              name: 'startTheExam',
-              params: {
+              path: '/startTheExam',
+              query: {
                 examId: item.examId,
                 attemptId: item.attemptId,
                 examKind:item.examKind,
@@ -218,8 +218,8 @@
             examUserExamStart({examId:item.examId,examScene:1,}).then(response => {
               if(response.data.attemptId){
                 this.$router.push({
-                  name: 'startTheExam',
-                  params: {
+                  path: '/startTheExam',
+                  query: {
                     examId: item.examId,
                     attemptId: response.data.attemptId,
                     examKind:item.examKind,

src/views/safetyEducationExaminationNew/safetyTest/practiceQuestions/index.vue

@@ -178,8 +178,8 @@
         if (type == 1) {
           //刷题练习
           this.$router.push({
-            name: 'startPracticing',
-            params: {
+            path: '/startPracticing',
+            query: {
               knowledgePointId: item.knowledgePointId,
               type: '1'
             }

src/views/safetyEducationExaminationNew/workbench/ResourceCard.vue

@@ -1,71 +1,93 @@
 <!-- 实验室安全素养资源卡 -->
 <template>
   <div class="resource-card">
-    <div class="card-title">实验室安全素养资源卡</div>
-    <!-- 分类 Tab 横向滚动 -->
-    <div class="tab-scroll-wrap">
-      <div class="tab-bar">
-        <p v-for="(item,index) in topList" :key="index"
-           :class="item.knowledgePointId == knowledgePointId?'check-p':''"
-          @click="topButton(item.knowledgePointId)">{{ item.knowledgePointName }}</p>
+    <div class="resource-card-page">
+      <div class="card-title">实验室安全素养资源</div>
+      <div class="table-max-big-box">
+        <p class="table-for-p" :class="topCheckIndex == index ? 'check-table-p':''"
+           @click="topTableButton(index)"
+           v-for="(item,index) in tableList" :key="index">{{item.disciplineName}}</p>
+        <p class="table-null-p"></p>
       </div>
-    </div>
-    <div class="resource-body">
-      <div class="left-max-big-box">
-        <!--知识学习-->
-        <div class="left-top-big-box">
-          <div class="big-title-box">
-            <p>知识学习</p>
+      <div class="resource-body-top">
+        <div class="left-resource-box">
+          <div class="resource-title-box">
+            <p class="el-icon-folder-opened"></p>
+            <p>学习资料</p>
             <p @click="goPage(1)">查看更多</p>
           </div>
-          <div class="big-content-box scrollbar-box">
-            <p class="null-p" v-if="!leftTopList[0]">暂无数据</p>
-            <div class="for-big-box" v-for="(item,index) in leftTopList" :key="index" @click="tableButton(2,item)">
-              <p>{{item.coursewareName}}</p>
-              <p>{{secondsToMinutes(item.minLearningDuration)}}分钟丨{{item.creditHours}}学时丨{{item.points}}积分</p>
-              <p :class="item.learnStatus==1?'colorA':(item.learnStatus==2?'colorB':'')">{{item.learnStatus==1?'学习中':(item.learnStatus==2?'已完成':'未学习')}}</p>
+          <div class="for-max-big-box" @click="tableButton(item)"
+               v-for="(item,index) in topLeftList" :key="index">
+            <div class="left-box">
+              <p v-if="item.materialType == 1" class="el-icon-video-play"></p>
+              <p v-if="item.materialType == 3" class="el-icon-document"></p>
+              <p v-if="item.materialType == 4" class="el-icon-reading"></p>
+            </div>
+            <div class="center-box">
+              <p>{{ item.coursewareName }}</p>
+              <p>{{ item.materialType == 4?'文章':item.attachmentType.substring(1) }}</p>
+            </div>
+            <div class="right-box">
+              <p class="el-icon-time"></p>
+              <p>{{secondsToMinutes(item.minLearningDuration)}}分钟</p>
             </div>
           </div>
         </div>
-        <!--刷题练习-->
-        <div class="left-bottom-big-box">
-          <div class="big-title-box">
-            <p>刷题练习</p>
+        <div class="right-resource-box">
+          <div class="resource-title-box">
+            <p class="el-icon-edit-outline"></p>
+            <p>学习资料</p>
             <p @click="goPage(2)">查看更多</p>
           </div>
-          <div class="big-content-box scrollbar-box">
-            <p class="null-p" v-if="!leftBottomList[0]">暂无数据</p>
-            <div class="for-big-box" v-for="(item,index) in leftBottomList" :key="index" @click="tableButton(1,item)">
-              <div class="for-flex-box">
-                <p class="el-icon-time"></p>
-                <p :style="!item.lastAnswerTime?'font-size:14px;':''">{{item.lastAnswerTime?parseTime(item.lastAnswerTime,"{y}-{m}-{d} {h}:{i}"):'未练习'}}</p>
-              </div>
-              <p class="text-p">练习进度：{{item.answeredCount}}/{{item.totalCount}}</p>
-              <p class="text-p">正确数：{{item.correctCount}}丨错题数：{{item.wrongCount}}丨正确率：{{item.correctRate}}%</p>
-              <el-progress
-                class="num-p" type="circle"
-                :stroke-width="4"
-                :width="60" :percentage="item.progress">
-              </el-progress>
-            </div>
+          <div class="for-max-big-box">
+            <p class="el-icon-notebook-2"></p>
+            <p>基础知识</p>
+            <p>120 题</p>
+          </div>
+          <div class="for-max-big-box">
+            <p class="el-icon-notebook-2"></p>
+            <p>基础知识</p>
+            <p>120 题</p>
+          </div>
+          <div class="for-max-big-box">
+            <p class="el-icon-notebook-2"></p>
+            <p>基础知识</p>
+            <p>120 题</p>
+          </div>
+          <div class="for-max-big-box">
+            <p class="el-icon-notebook-2"></p>
+            <p>基础知识</p>
+            <p>120 题</p>
+          </div>
+          <div class="for-max-big-box">
+            <p class="el-icon-notebook-2"></p>
+            <p>基础知识</p>
+            <p>120 题</p>
+          </div>
+          <div class="for-max-big-box">
+            <p class="el-icon-notebook-2"></p>
+            <p>基础知识</p>
+            <p>120 题</p>
           </div>
         </div>
       </div>
-      <!--视频资源学习-->
-      <div class="right-max-big-box">
-        <div class="big-title-box">
-          <p>视频资源学习</p>
-          <p @click="goPage(3)">查看更多</p>
-        </div>
-        <div class="big-content-box-1 scrollbar-box">
-          <p class="null-p" v-if="!rightList[0]">暂无数据</p>
-          <div class="for-big-box" v-for="(item,index) in rightList" :key="index" @click="tableButton(2,item)">
-            <img :src="item.exampleImg">
-            <div class="text-box">
-              <p>{{item.coursewareName}}</p>
-              <p>{{secondsToMinutes(item.minLearningDuration)}}分钟丨{{item.creditHours}}学时丨{{item.points}}积分</p>
-              <p :class="item.learnStatus==1?'colorA':(item.learnStatus==2?'colorB':'')">{{item.learnStatus==1?'学习中':(item.learnStatus==2?'已完成':'未学习')}}</p>
-            </div>
+    </div>
+    <div class="resource-card-page">
+      <div class="card-title">视频学习资源</div>
+      <p class="skip-button" @click="goPage(3)">查看更多</p>
+      <div class="table-max-big-box">
+        <p class="table-for-p"  :class="bottomCheckIndex == index ? 'check-table-p':''"
+           @click="bottomTableButton(index)"
+           v-for="(item,index) in tableList" :key="index">{{item.disciplineName}}</p>
+        <p class="table-null-p"></p>
+      </div>
+      <div class="resource-body-bottom">
+        <div class="for-max-big-box"  @click="tableButton(item)"
+             v-for="(item,index) in bottomList" :key="index">
+          <img :src="item.exampleImg">
+          <div>
+            <p>{{item.coursewareName}}</p>
+            <p>{{secondsToMinutes(item.minLearningDuration)}}分钟 丨 {{item.creditHours}}学时 丨 {{item.points}}积分</p>
           </div>
         </div>
       </div>
@@ -75,91 +97,85 @@
 
 <script>
   import {
-    examUserCoursewareLearningKnowledgePoints,examUserCoursewareLearningRestart,
+    examElDisciplineTypeList,examUserCoursewareLearningRestart,
     examUserPracticeList,examUserCoursewareLearningList,
   } from "@/api/safetyEducationExaminationNew/index";
 export default {
   name: 'ResourceCard',
   data() {
     return {
-      topList:[],
-      knowledgePointId:'',
-      leftTopList:[],
-      leftBottomList:[],
-      rightList:[],
+      topCheckIndex:0,
+      bottomCheckIndex:0,
+      tableList:[],
+      topLeftList:[],
+      topRightList:[],
+      bottomList:[],
     }
   },
   mounted(){
-    this.examUserCoursewareLearningKnowledgePoints();
+    this.examElDisciplineTypeList();
   },
   methods:{
-    tableButton(type,item){
-      if(type == 1){
-        //刷题练习
+    //顶部选项切换
+    topTableButton(index){
+      if(this.topCheckIndex != index){
+        this.$set(this,'topCheckIndex',index);
+      }
+    },
+    bottomTableButton(index){
+      if(this.bottomCheckIndex != index){
+        this.$set(this,'bottomCheckIndex',index);
+      }
+    },
+    tableButton(item){
+      let self = this;
+      if(item.learnStatus == 2){
+        this.$confirm('该课件已学完,是否重置进度重新学习?', "提示", {
+          confirmButtonText: "确认",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+        }).then(() => {
+          examUserCoursewareLearningRestart({coursewareId:item.coursewareId}).then(response => {
+            self.$router.push({
+              path: '/learningMaterials',
+              query: {
+                coursewareId: item.coursewareId,
+              }
+            })
+          });
+        }).catch(() => {});
+      }else{
         this.$router.push({
-          name: 'startPracticing',
-          params: {
-            knowledgePointId: item.knowledgePointId,
-            type: '1'
+          path: '/learningMaterials',
+          query: {
+            coursewareId: item.coursewareId,
           }
         })
-      }else if(type == 2){
-        let self = this;
-        if(item.learnStatus == 2){
-          this.$confirm('该课件已学完,是否重置进度重新学习?', "提示", {
-            confirmButtonText: "确认",
-            cancelButtonText: "取消",
-            type: "warning"
-          }).then(function() {
-          }).then(() => {
-            examUserCoursewareLearningRestart({coursewareId:item.coursewareId}).then(response => {
-              self.$router.push({
-                name: 'learningMaterials',
-                params: {
-                  coursewareId: item.coursewareId,
-                }
-              })
-            });
-          }).catch(() => {});
-        }else{
-          this.$router.push({
-            name: 'learningMaterials',
-            params: {
-              coursewareId: item.coursewareId,
-            }
-          })
-        }
-      }
-    },
-    topButton(val){
-      if(this.knowledgePointId != val){
-        this.$set(this,'knowledgePointId',val);
-        this.leftExamUserCoursewareLearningList();
-        this.rightExamUserCoursewareLearningList();
-        this.examUserPracticeList();
       }
     },
     goPage(type){
       //1.文章文档 2.刷题 3.视频
       if(type == 1){
         this.$router.push({
-          name: 'knowledgeLearning',
-          params: {
+          path: '/safetyEducationExaminationNew/safetyEducation/knowledgeLearning',
+          query: {
             skip: true,
           }
         })
       }else if(type == 2){
         this.$router.push({
-          name: 'practiceQuestions',
-          params: {}
+          path: '/safetyEducationExaminationNew/safetyTest/practiceQuestions',
+          query: {}
         })
       }else if(type == 3){
         this.$router.push({
-          name: 'knowledgeLearning',
-          params: {}
+          path: '/safetyEducationExaminationNew/safetyEducation/knowledgeLearning',
+          query: {}
         })
       }
     },
+    //文章
     leftExamUserCoursewareLearningList(){
       let obj = {
         page:1,
@@ -168,9 +184,10 @@ export default {
         knowledgePointId:this.knowledgePointId,
       }
       examUserCoursewareLearningList(obj).then(response => {
-        this.$set(this, 'leftTopList', response.data.records)
+        this.$set(this, 'topLeftList', response.data.records)
       })
     },
+    //视频
     rightExamUserCoursewareLearningList(){
       let obj = {
         page:1,
@@ -179,22 +196,24 @@ export default {
         knowledgePointId:this.knowledgePointId,
       }
       examUserCoursewareLearningList(obj).then(response => {
-        this.$set(this, 'rightList', response.data.records)
+        this.$set(this, 'bottomList', response.data.records)
       })
     },
+    //知识点题库
     examUserPracticeList(){
       let obj = {
         page:1,
-        pageSize:1,
+        pageSize:6,
         knowledgePointId:this.knowledgePointId,
       }
       examUserPracticeList(obj).then(response => {
-        this.$set(this, 'leftBottomList', response.data.records)
+        this.$set(this, 'topRightList', response.data.records)
       })
     },
-    examUserCoursewareLearningKnowledgePoints(){
-      examUserCoursewareLearningKnowledgePoints({}).then(response => {
-        this.$set(this, 'topList', [{knowledgePointName:'总览',knowledgePointId:''},...response.data])
+    //类型选项卡数据
+    examElDisciplineTypeList(){
+      examElDisciplineTypeList({}).then(response => {
+        this.$set(this, 'tableList', response.data)
         this.leftExamUserCoursewareLearningList();
         this.rightExamUserCoursewareLearningList();
         this.examUserPracticeList();
@@ -213,273 +232,248 @@ export default {
 
 <style scoped lang="scss">
 .resource-card {
-  background: #fff;
-  border-radius: 6px;
-  margin-bottom: 12px;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
-
-  .card-title {
-    font-size: 16px;
-    font-weight: 700;
-    line-height:20px;
-    color: #333;
-    margin:20px 0 20px 20px;
-  }
-
-  .tab-scroll-wrap {
-    height:60px;
-    overflow-x: auto;
-    padding-bottom: 4px;
-    margin:20px 20px 0 20px;
-
-    &::-webkit-scrollbar { height: 4px; }
-    &::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
-
-    .tab-bar {
+  .resource-card-page{
+    background: #fff;
+    margin-bottom: 12px;
+    background: rgba(255, 255, 255, 0.95);
+    border: 1px solid #e8edf5;
+    border-radius: 16px;
+    box-shadow: 0 4px 20px rgba(37, 50, 74, 0.06);
+    padding:20px;
+    position: relative;
+    .skip-button{
+      position: absolute;
+      top:50px;
+      right:25px;
+      color:#409EFF;
+      cursor: pointer;
+      font-size: 14px;
+      line-height:50px;
+    }
+    .card-title {
+      font-size: 16px;
+      font-weight: 700;
+      line-height:20px;
+      color: #333;
+      margin-bottom:20px;
+    }
+    .table-max-big-box{
       display: flex;
-      gap: 6px;
-      white-space: nowrap;
-      width: max-content;
       p{
         height:40px;
-        line-height:40px;
-        border-radius:6px;
-        border:1px solid #666;
-        color:#666;
         padding:0 20px;
-        min-width: 100px;
+        line-height:40px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #303133;
         text-align: center;
+      }
+      .table-for-p:nth-child(1){
+        border-left:1px solid #E4E7ED;
+        border-top-left-radius:4px;
+      }
+      :nth-last-child(2){
+        border-top-right-radius:4px;
+      }
+      .table-for-p{
+        border-top:1px solid #E4E7ED;
+        border-right:1px solid #E4E7ED;
+        border-bottom:1px solid #E4E7ED;
         cursor: pointer;
       }
-      .check-p{
-        color:#fff;
-        background-color: #0183fa;
-        border: 1px solid #0183fa;
+      .table-null-p{
+        flex:1;
+        border-bottom:1px solid #E4E7ED;
+      }
+      .check-table-p{
+        color:#0183fa!important;
+        border-bottom:none!important;
       }
     }
-  }
-
-  .resource-body {
-    height:910px;
-    display: flex;
-    .left-max-big-box{
-      flex:1;
+    .resource-body-top{
+      height:500px;
+      border-left:1px solid #E4E7ED;
+      border-right:1px solid #E4E7ED;
+      border-bottom:1px solid #E4E7ED;
       display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      padding:15px 0 20px 20px;
-      .left-top-big-box{
-        height:620px;
-        display: flex;
-        flex-direction: column;
+      .left-resource-box{
+        flex:1;
+        padding:10px 15px 20px 20px;
         overflow: hidden;
-        border-radius:10px;
-        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
-        margin-bottom:20px;
-        margin-right:20px;
-        padding-bottom:20px;
-        .null-p{
-          text-align: center;
-          line-height:400px;
-          color:#999;
-          font-size:14px;
-        }
-        .for-big-box{
-          margin:12px 14px 0 20px;
-          background-color: rgba(1, 131, 250, 0.1);
-          border-radius:6px;
-          padding:24px 20px;
-          position: relative;
+        .for-max-big-box{
+          margin-top:15px;
+          border: 1px solid #e8edf3;
+          border-radius: 10px;
+          padding: 14px;
+          display: flex;
+          align-items: flex-start;
+          gap: 12px;
           cursor: pointer;
-          p:nth-child(1){
-            font-size:16px;
-            font-weight:700;
-            color:#0183fa;
-            line-height: 24px;
-          }
-          p:nth-child(2){
-            font-size:14px;
-            color:#333;
-            line-height: 24px;
-          }
-          p:nth-child(3){
-            position: absolute;
-            bottom:20px;
-            right:20px;
-            font-size:14px;
-            border-radius:4px;
-            line-height: 24px;
-            width: 60px;
+          transition: all 0.2s;
+          background: #fafbfd;
+          .left-box{
+            width:40px;
+            height:40px;
+            border-radius: 8px;
+            background: #eef3ff;
             text-align: center;
-            background-color: #999;
-            color:#fff;
-          }
-          .colorA{
-            border:1px solid #0183fa;
-            background-color: #fff!important;
-            color:#0183fa!important;
-          }
-          .colorB{
-            background-color: #0183fa!important;
-            color:#fff!important;
-          }
-        }
-      }
-      .left-bottom-big-box{
-        height:235px;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        border-radius:10px;
-        margin-right:20px;
-        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
-        padding-bottom:20px;
-        .null-p{
-          text-align: center;
-          line-height:140px;
-          color:#999;
-          font-size:14px;
-        }
-        .for-big-box{
-          margin:12px 14px 0 20px;
-          background-color: rgba(1, 131, 250, 0.1);
-          border-radius:6px;
-          padding:16px 20px;
-          position: relative;
-          cursor: pointer;
-          .for-flex-box{
-            display: flex;
-            color:#0183fa;
             p{
-              font-weight:700;
+              font-size: 20px;
+              color: #5b95f7;
+              line-height:40px;
+              text-align: center;
             }
+          }
+          .center-box{
+            flex: 1;
             p:nth-child(1){
-              font-size:18px;
-              line-height:40px;
-              margin-right:5px;
+              font-size: 14px;
+              color: #25324a;
+              font-weight: 500;
+              display: block;
+              margin-bottom: 5px;
+              /*单行省略号*/
+              overflow:hidden;
+              text-overflow:ellipsis;
+              white-space:nowrap;
             }
             p:nth-child(2){
-              font-size:14px;
-              line-height:40px;
+              font-size: 12px;
+              color: #93a0b5;
             }
           }
-          .text-p{
-            line-height:30px;
-            font-size:14px;
-            color:#666;
-            font-weight:700;
-          }
-          .num-p{
-            position: absolute;
-            right:40px;
-            top:35px;
-          }
-          .num-p ::v-deep .el-progress__text {
-            margin-left:0!important;
-            font-size:12px!important;
-          }
-          .num-p ::v-deep svg path:first-child {
-            stroke: #cccccc !important; /* 修改为红色 */
+          .right-box{
+            display: flex;
+            margin-top:20px;
+            p{
+              font-size: 12px;
+              line-height:20px;
+              color: #60708a;
+            }
+            p:nth-child(1){
+              margin-right:4px;
+            }
           }
         }
+        .for-max-big-box:hover{
+          border-color:#5b95f7;
+          background-color: #f0f6ff;
+          box-shadow: 0 2px 8px rgba(91,149,247,0.1);
+        }
       }
-    }
-    .right-max-big-box{
-      flex:1;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      width:740px;
-      border-radius:10px;
-      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
-      margin:15px 20px 20px 0;
-      .big-content-box-1{
+      .right-resource-box{
         flex:1;
-        .null-p{
-          text-align: center;
-          line-height:400px;
-          color:#999;
-          font-size:14px;
+        padding:10px 20px 20px 15px;
+        overflow: hidden;
+        .for-max-big-box:nth-child(even){
+          margin:15px 15px 0 0!important;
         }
-        .for-big-box{
-          margin:12px 0 0 20px;
+        .for-max-big-box{
+          margin-top:15px;
+          border: 1px solid #e8edf3;
+          border-radius: 10px;
+          padding: 16px 14px;
           display: inline-block;
-          width:346px;
-          border-radius:6px;
-          overflow: hidden;
-          position: relative;
+          flex-direction: column;
+          align-items: center;
+          gap: 8px;
           cursor: pointer;
-          img{
-            width:346px;
-            height:180px;
-            display: block;
-            overflow: hidden;
-            margin: 0;
-            padding: 0;
+          transition: all 0.2s;
+          background: #fafbfd;
+          text-align: center;
+          width:348px;
+          height:127px;
+          p:nth-child(1){
+            width:36px;
+            height:36px;
+            font-size:18px;
+            border-radius: 50%;
+            background-color: #eef3ff;
+            color:#5b95f7;
+            text-align: center;
+            line-height:36px;
+            margin-top:5px;
           }
-          .text-box{
-            background-color: rgba(1, 131, 250, 0.1);
-            p:nth-child(1){
-              margin:0 20px;
-              line-height:40px;
-              color:#0183fa;
-              font-size:16px;
-              font-weight:700;
-            }
-            p:nth-child(2){
-              margin:0 20px;
-              line-height:20px;
-              color:#333;
-              font-size:14px;
-              padding-bottom:10px;
-            }
-            p:nth-child(3){
-              position: absolute;
-              bottom:10px;
-              right:10px;
-              background-color: #999;
-              color:#fff;
-              font-size:14px;
-              border-radius:4px;
-              line-height: 24px;
-              width: 60px;
-              text-align: center;
-            }
-            .colorA{
-              border:1px solid #0183fa;
-              background-color: #fff!important;
-              color:#0183fa!important;
-            }
-            .colorB{
-              background-color: #0183fa!important;
-              color:#fff!important;
-            }
+          p:nth-child(2){
+            font-size: 13px;
+            color: #25324a;
+            font-weight: 500;
+            margin-top:10px;
+          }
+          p:nth-child(3){
+            font-size: 12px;
+            color: #93a0b5;
+            margin-top:5px;
           }
         }
+        .for-max-big-box:hover{
+          border-color:#5b95f7;
+          background-color: #f0f6ff;
+          box-shadow: 0 2px 8px rgba(91,149,247,0.1);
+        }
       }
-    }
-    .big-title-box{
-      display: flex;
-      height:60px;
-      padding:0 20px;
-      p{
-        line-height:60px;
-        font-size:16px;
-      }
-      p:nth-child(1){
-        flex:1;
-        font-weight: 700;
+      .resource-title-box{
+        display: flex;
+        border-bottom:1px solid #E4E7ED;
+        p{
+          font-size: 14px;
+          line-height:50px;
+        }
+        p:nth-child(1){
+          color: #5b95f7;
+          margin-right:10px;
+        }
+        p:nth-child(2){
+          flex:1;
+          color: #25324a;
+          font-weight: 600;
+        }
+        p:nth-child(3){
+          color:#409EFF;
+          cursor: pointer;
+        }
       }
-      p:nth-child(2){
+    }
+    .resource-body-bottom{
+      height:500px;
+      border-left:1px solid #E4E7ED;
+      border-right:1px solid #E4E7ED;
+      border-bottom:1px solid #E4E7ED;
+      .for-max-big-box{
+        display: inline-block;
+        border-radius: 10px;
+        overflow: hidden;
         cursor: pointer;
-        color:#0183fa;
-        font-size:15px;
+        box-shadow: 0 2px 8px rgba(37, 50, 74, 0.08);
+        transition: transform 0.2s;
+        margin:15px 0 0 15px;
+        img{
+          display: block;
+          height: 164px;
+          width: 356px;
+        }
+        div{
+          padding: 12px;
+          p:nth-child(1){
+            font-size: 13px;
+            color: #25324a;
+            font-weight: 500;
+            margin-bottom: 4px;
+            /*单行省略号*/
+            display:block;
+            overflow:hidden;
+            text-overflow:ellipsis;
+            white-space:nowrap;
+          }
+          p:nth-child(2){
+            font-size: 11px;
+            color: #93a0b5;
+          }
+        }
+      }
+      .for-max-big-box:hover{
+        transform:translateY(-2px),
       }
-    }
-    .big-content-box{
-      flex:1;
-      display: flex;
-      flex-direction: column;
     }
   }
 }

src/views/safetyEducationExaminationNew/workbench/TaskCard.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="task-card">
     <div class="top-title-box">
-      <p>工作台任务卡</p>
+      <p>工作台任务</p>
     </div>
     <div class="card-max-big-box">
       <div class="year-card-box for-max-big-box">
@@ -19,6 +19,43 @@
           </div>
         </div>
       </div>
+      <!--任务卡列表-->
+      <div class="year-card-box for-max-big-box">
+        <div class="year-card-top-title-box">
+          <p>学习任务</p>
+          <p>待完成的学习任务</p>
+        </div>
+        <div class="bottom-content-box scrollbar-box">
+          <p class="null-p" v-if="!dataList2[0]">暂无数据</p>
+          <div class="bottom-big-box-5" v-for="(item,index) in dataList2" @click="tableButton(item.conditionType,item)">
+            <p class="text-name-p">{{item.examName}}</p>
+            <div class="text-flex-box" v-if="item.conditionType == 1">
+              <p>考前学习</p>
+              <p>{{item.completedStudyHours}} / {{item.studyHoursRequirement}} 学时</p>
+            </div>
+            <div class="text-flex-box" v-if="item.conditionType == 2">
+              <p>考前学习</p>
+              <p>未完成</p>
+            </div>
+            <div class="text-flex-box" v-if="item.conditionType == 3">
+              <p>模拟考试</p>
+              <p>未完成</p>
+            </div>
+            <div class="text-flex-box" v-if="item.examKind==1&&item.conditionType == 4">
+              <p>在线考试</p>
+              <p>
+                <span :class="!item.isPassed&&item.maxScore==0?'color-A':(!item.isPassed&&item.maxScore>0?'color-B':(item.isPassed?'color-C':''))">{{!item.isPassed&&item.maxScore==0?'未开始':(!item.isPassed&&item.maxScore>0?'未通过':(item.isPassed?'已通过':''))}}</span>
+                <span style="margin-left:20px;">{{item.maxScore>0?'成绩：'+item.maxScore+'分':''}}</span>
+              </p>
+            </div>
+            <div class="text-flex-box" v-if="item.examKind==2&&item.conditionType == 4">
+              <p>补考</p>
+              <p>未完成</p>
+            </div>
+            <p class="time-p">{{parseTime(item.startTime,"{y}-{m}-{d} {h}:{i}")}} 至 {{parseTime(item.startTime,"{y}-{m}-{d} {h}:{i}")}}</p>
+          </div>
+        </div>
+      </div>
       <!--学习任务卡-->
       <!--<div class="study-card-box for-max-big-box">-->
         <!--<div class="year-card-top-title-box">-->
@@ -33,20 +70,23 @@
           <!--</div>-->
         <!--</div>-->
       <!--</div>-->
-      <!--模拟任务卡-->
-      <!--<div class="examination-card-box for-max-big-box">-->
-        <!--<div class="year-card-top-title-box">-->
-          <!--<p>模拟考试</p>-->
-          <!--<p>待完成的考前模拟练习</p>-->
-        <!--</div>-->
-        <!--<div class="bottom-content-box scrollbar-box">-->
-          <!--<p class="null-p" v-if="!examinationMinList[0]">暂无数据</p>-->
-          <!--<div class="bottom-big-box-3" v-for="(item,index) in examinationMinList" @click="mockTableButton(item)">-->
-            <!--<p>{{item.examName}}</p>-->
-            <!--<p >最高成绩 {{item.maxScore?item.maxScore:0}}</p>-->
-          <!--</div>-->
-        <!--</div>-->
-      <!--</div>-->
+      <!--模拟练习卡-->
+      <div class="examination-card-box for-max-big-box">
+        <div class="year-card-top-title-box">
+          <p>模拟练习</p>
+          <p>刷题进度和正确率</p>
+        </div>
+        <div class="bottom-content-box scrollbar-box" style="cursor: pointer;" @click="goPracticeQuestions()">
+          <div class="bottom-big-box-6">
+            <p>156 / 200</p>
+            <p >已完成题目数 / 题库总数</p>
+          </div>
+          <div class="bottom-big-box-6">
+            <p>89%</p>
+            <p >当前模拟练习正确率</p>
+          </div>
+        </div>
+      </div>
       <!--在线任务卡-->
       <div class="for-max-big-box" v-for="(item,index) in dataList" :key="index">
         <div class="year-card-top-title-box">
@@ -61,7 +101,7 @@
           <div class="bottom-big-box-4">
             <p :class="item.completedStudyHours<item.studyHoursRequirement?'text-name':''">学时要求</p>
             <p class="colorA" v-if="item.needStudy" @click="tableButton(1,item)">开始学习</p>
-            <p class="position-p-1" v-if="item.completedStudyHours<item.studyHoursRequirement">{{item.completedStudyHours}} / {{item.studyHoursRequirement}}</p>
+            <p class="position-p-1" v-if="item.completedStudyHours<item.studyHoursRequirement">{{item.completedStudyHours}} / {{item.studyHoursRequirement}} 学时</p>
             <p class="text-type" v-if="item.completedStudyHours>=item.studyHoursRequirement">已达标</p>
           </div>
           <div class="bottom-big-box-4" v-if="item.examStudy">
@@ -94,7 +134,7 @@
   import { Encrypt,Decrypt} from '@/utils/secret'
   import {
     examUserCoursewareLearningRestart,examElLabEduRelationAcademicYearProgress,
-    examUserCourseLearningList,examUserExamMockList,examUserExamList,examUserExamStart,
+    examUserExamStudyTaskList,examUserExamStart,
   } from "@/api/safetyEducationExaminationNew/index";
 export default {
   name: 'TaskCard',
@@ -106,6 +146,7 @@ export default {
       studyMinList:[],
       examinationMinList:[],
       dataList:[],
+      dataList2:[],
     }
   },
   created() {
@@ -117,95 +158,15 @@ export default {
   methods: {
     initialization(){
       this.examElLabEduRelationAcademicYearProgress();
-      // this.examUserCourseLearningList();
-      // this.examUserExamMockList();
-      this.examUserExamList();
+      this.examUserExamStudyTaskList();
+      this.examUserExamStudyTaskList2();
     },
-    //学习任务
-    studyTableButton(item){
-      let self = this;
-      if(item.conditionType == 1){
-        this.$confirm('还未达到学时要求,是否现在去学习?', "提示", {
-          confirmButtonText: "确认",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-        }).then(() => {
-          //学时要求
-          self.$router.push({
-            name: 'knowledgeLearning',
-            params: {}
-          })
-        }).catch(() => {});
-      }else{
-        //学习课程
-        this.$router.push({
-          name: 'learningCourse',
-          params: {
-            courseId: item.courseId,
-            examId: item.examId,
-          }
-        })
-      }
-    },
-    //模拟考试
-    mockTableButton(item){
-      let self = this;
-      if(item.conditionType == 1){
-        this.$confirm('完成学时要求后解锁,是否现在去学习?', "提示", {
-          confirmButtonText: "确认",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-        }).then(() => {
-          //学时要求
-          self.$router.push({
-            name: 'knowledgeLearning',
-            params: {}
-          })
-        }).catch(() => {});
-      }else if(item.conditionType == 2){
-        this.$confirm('完成考前课程学习后解锁,是否现在去学习?', "提示", {
-          confirmButtonText: "确认",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-        }).then(() => {
-          //学习课程
-          self.$router.push({
-            name: 'learningCourse',
-            params: {
-              courseId: item.courseId,
-              examId: item.examId,
-            }
-          })
-        }).catch(() => {});
-      }else{
-        //模拟考试
-        if(item.attemptId){
-          this.$router.push({
-            name: 'mockExam',
-            params: {
-              examId: item.examId,
-              attemptId: item.attemptId,
-            }
-          })
-        }else{
-          examUserExamStart({examId:item.examId,examScene:2,}).then(response => {
-            if(response.data.attemptId){
-              this.$router.push({
-                name: 'mockExam',
-                params: {
-                  examId: item.examId,
-                  attemptId: response.data.attemptId,
-                }
-              })
-            }else{
-              this.msgError(response.message)
-            }
-          })
-        }
-      }
+    //跳转刷题练习
+    goPracticeQuestions(){
+      this.$router.push({
+        path: '/safetyEducationExaminationNew/safetyTest/practiceQuestions',
+        query: {}
+      })
     },
     //考试跳转
     tableButton(type,item){
@@ -228,8 +189,8 @@ export default {
       }else if(type == 2){
         //学习课程
         this.$router.push({
-          name: 'learningCourse',
-          params: {
+          path: '/learningCourse',
+          query: {
             courseId: item.courseId,
             examId: item.examId,
           }
@@ -238,8 +199,8 @@ export default {
         //模拟考试
         if(item.mockExamId){
           this.$router.push({
-            name: 'mockExam',
-            params: {
+            path: '/mockExam',
+            query: {
               examId: item.examId,
               attemptId: item.mockExamId,
             }
@@ -248,8 +209,8 @@ export default {
           examUserExamStart({examId:item.examId,examScene:2,}).then(response => {
             if(response.data.attemptId){
               this.$router.push({
-                name: 'mockExam',
-                params: {
+                path: '/mockExam',
+                query: {
                   examId: item.examId,
                   attemptId: response.data.attemptId,
                 }
@@ -263,8 +224,8 @@ export default {
         //在线考试//补考
         if(item.attemptId){
           this.$router.push({
-            name: 'startTheExam',
-            params: {
+            path: '/startTheExam',
+            query: {
               attemptId: item.attemptId,
               type: '1',
               examKind:item.examKind,
@@ -274,8 +235,8 @@ export default {
           examUserExamStart({examId:item.examId,examScene:1,}).then(response => {
             if(response.data.attemptId){
               this.$router.push({
-                name: 'startTheExam',
-                params: {
+                path: '/startTheExam',
+                query: {
                   examId: item.examId,
                   attemptId: response.data.attemptId,
                   type: '1',
@@ -295,36 +256,28 @@ export default {
         this.$set(this, 'yearMinList', response.data)
       })
     },
-    //学习任务
-    examUserCourseLearningList(){
-      let obj = {
-        page:1,
-        pageSize:20,
-      }
-      examUserCourseLearningList(obj).then(response => {
-        this.$set(this, 'studyMinList', response.data.records)
-      })
-    },
-    //模拟考试
-    examUserExamMockList(){
+    //特殊考试
+    examUserExamStudyTaskList(){
       let obj = {
         page:1,
-        pageSize:20,
+        pageSize:5,
         examStatus:2,
+        isSpecialExam:true,
       }
-      examUserExamMockList(obj).then(response => {
-        this.$set(this, 'examinationMinList', response.data.records)
+      examUserExamStudyTaskList(obj).then(response => {
+        this.$set(this, 'dataList', response.data.records)
       })
     },
     //在线考试
-    examUserExamList(){
+    examUserExamStudyTaskList2(){
       let obj = {
         page:1,
         pageSize:5,
         examStatus:2,
+        isSpecialExam:false,
       }
-      examUserExamList(obj).then(response => {
-        this.$set(this, 'dataList', response.data.records)
+      examUserExamStudyTaskList(obj).then(response => {
+        this.$set(this, 'dataList2', response.data.records)
       })
     },
   },
@@ -334,10 +287,14 @@ export default {
 <style scoped lang="scss">
 .task-card {
   background: #fff;
-  border-radius: 6px;
+  /*border-radius: 6px;*/
   padding: 16px 0 0 0;
   margin-bottom: 12px;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
+  /*box-shadow: 0 1px 4px rgba(0,0,0,0.06);*/
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid #e8edf5;
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(37, 50, 74, 0.06);
   .top-title-box{
     display: flex;
     flex-direction: column;
@@ -371,12 +328,15 @@ export default {
     .for-max-big-box{
       display: inline-block;
       width:360px;
-      height:240px;
+      height:300px;
       margin: 0 0 20px 20px;
-      border-radius:6px;
-      border:1px solid #dedede;
-      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+      /*border-radius:6px;*/
+      /*border:1px solid #dedede;*/
+      /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);*/
       overflow: hidden;
+      background: linear-gradient(180deg, #fff, #f7faff);
+      border: 1px solid #eaf0f8;
+      border-radius: 14px;
       .year-card-top-title-box{
         padding:20px 20px 0 20px;
         position: relative;
@@ -390,6 +350,7 @@ export default {
           font-size:14px;
           line-height:20px;
           margin-top:6px;
+          color:#60708a;
 
         }
         p:nth-child(3){
@@ -415,7 +376,7 @@ export default {
         }
       }
       .bottom-content-box{
-        height:168px;
+        height:208px;
         margin-top:6px;
         padding:8px 14px 0 20px;
         .null-p{
@@ -426,11 +387,13 @@ export default {
         }
         .bottom-big-box-1{
           display: flex;
-          background-color: rgba(1, 131, 250, 0.1);
+          /*background-color: rgba(1, 131, 250, 0.1);*/
           border-radius:6px;
           padding:12px 14px;
           margin-bottom:12px;
           height:68px;
+          border: 1px solid #e5edf8;
+          background-color: #fff;
           p{
             font-size:14px;
             line-height:44px;
@@ -446,12 +409,14 @@ export default {
           }
         }
         .bottom-big-box-2{
-          background-color: rgba(1, 131, 250, 0.1);
+          /*background-color: rgba(1, 131, 250, 0.1);*/
           border-radius:6px;
           padding:12px 14px;
           margin-bottom:12px;
           height:68px;
           cursor: pointer;
+          border: 1px solid #e5edf8;
+          background-color: #fff;
           p{
             font-size:14px;
             line-height:22px;
@@ -462,12 +427,14 @@ export default {
           }
         }
         .bottom-big-box-3{
-          background-color: rgba(1, 131, 250, 0.1);
+          /*background-color: rgba(1, 131, 250, 0.1);*/
           border-radius:6px;
           padding:12px 14px;
           margin-bottom:12px;
           height:68px;
           cursor: pointer;
+          border: 1px solid #e5edf8;
+          background-color: #fff;
           p{
             font-size:14px;
             line-height:22px;
@@ -478,13 +445,15 @@ export default {
           }
         }
         .bottom-big-box-4{
-          background-color: rgba(1, 131, 250, 0.1);
+          /*background-color: rgba(1, 131, 250, 0.1);*/
           border-radius:6px;
           padding:12px 14px;
           margin-bottom:12px;
           height:68px;
           display: flex;
           position: relative;
+          border: 1px solid #e5edf8;
+          background-color: #fff;
           p{
             font-size:14px;
             line-height:44px;
@@ -504,14 +473,15 @@ export default {
             color:#D9001B;
           }
           .colorC{
-            color:#999;
+            color:#60708a;
           }
           .position-p-1{
             position: absolute;
             bottom:0;
-            left:10px;
-            width: 60px;
-            text-align: center!important;
+            left:15px;
+            width: 120px;
+            font-size:12px;
+            color:#60708a;
           }
           .text-name{
             margin-top:-10px;
@@ -520,6 +490,72 @@ export default {
             color: #4fbe7e;
           }
         }
+        .bottom-big-box-5{
+          /*background-color: rgba(1, 131, 250, 0.1);*/
+          border-radius:6px;
+          padding:8px 14px;
+          margin-bottom:12px;
+          height:76px;
+          position: relative;
+          border: 1px solid #e5edf8;
+          background-color: #fff;
+          cursor: pointer;
+          .text-name-p{
+            font-size:14px;
+            font-weight:700;
+            line-height:20px;
+          }
+          .text-flex-box{
+            display: flex;
+            color:#60708a;
+            p{
+              font-size:14px;
+              line-height:20px;
+            }
+            p:nth-child(1){
+              margin-right:20px;
+            }
+            p:nth-child(2){
+              color:#60708a;
+              .color-A{
+                color:#999;
+              }
+              .color-B{
+                color:#f56c6c;
+              }
+              .color-C{
+                color:#4fbe7e;
+              }
+            }
+          }
+          .time-p{
+            color:#60708a;
+            font-size:14px;
+            line-height:20px;
+          }
+        }
+        .bottom-big-box-6{
+          /*background-color: rgba(1, 131, 250, 0.1);*/
+          border-radius:6px;
+          padding:13px 14px;
+          margin-bottom:12px;
+          height:78px;
+          position: relative;
+          border: 1px solid #e5edf8;
+          background-color: #fff;
+          p:nth-child(1){
+            display: block;
+            font-size: 22px;
+            color: #25324a;
+            font-weight:700;
+            line-height:26px;
+          }
+          p:nth-child(2){
+            font-size:14px;
+            line-height:26px;
+            color:#60708a;
+          }
+        }
       }
     }
   }

src/views/safetyEducationExaminationNew/workbench/UserInfoCard.vue

@@ -2,12 +2,12 @@
 <template>
   <div class="user-info-card">
     <div class="top-title-box">
-      <p>用户信息卡</p>
+      <p>用户信息</p>
       <p><span class="el-icon-coin"></span><span> {{userInfo.totalPoints?userInfo.totalPoints:0}} </span>积分</p>
     </div>
     <div class="user-info-max-box">
       <!--用户信息-->
-      <div class="left-max-box">
+      <div :class="userInfo.userType == 1?'min-height-box':''" class="left-max-box">
         <div class="left-min-box">
           <p>姓名</p>
           <p>{{userInfo.userName}}</p>
@@ -34,7 +34,7 @@
         </div>
       </div>
       <!--进度-->
-      <div class="center-max-box">
+      <div :class="userInfo.userType == 1?'min-height-box':''" class="center-max-box">
         <div class="center-title-box scrollbar-x-box">
           <p>{{userInfo.gradeRange}}</p>
           <p :style="'color:'+userInfo.levelColor+';'" v-if="userInfo.levelName">{{userInfo.levelName}}</p>
@@ -64,7 +64,7 @@
         </div>
       </div>
       <!--任务-->
-      <div class="right-max-box">
+      <div :class="userInfo.userType == 1?'min-height-box':''" class="right-max-box">
         <p class="right-title-p">当前学年任务状态</p>
         <div class="right-big-box">
           <p>考试状态</p>
@@ -91,12 +91,12 @@
       <div class="shade-big-box" v-if="shadeType == 1">
         <div class="shade-title-box">
           <p>绑定实验室</p>
-          <p class="el-icon-close" @click="shadeButton(5)"></p>
+          <p class="el-icon-close" v-if="shadeFormData.offType" @click="shadeButton(6)"></p>
         </div>
         <div class="shade-content-box">
           <el-form :model="shadeFormData" class="form-box" ref="shadeForm"
                    :inline="true" :rules="rules" style="width:100%;">
-            <div>
+            <div v-if="!shadeFormData.isEnter">
               <el-form-item label="" prop="subId" label-width="0">
                 <el-select
                   style="width:760px;"
@@ -116,9 +116,9 @@
                 </el-select>
               </el-form-item>
             </div>
-            <p class="shade-text-p">此处请选择需要后续进入的科研实验室的名称，输入实验室名称、房间号或楼栋关键词，再从检索结果中选择目标实验室。</p>
+            <p v-if="!shadeFormData.isEnter" class="shade-text-p">此处请选择需要后续进入的科研实验室的名称，输入实验室名称、房间号或楼栋关键词，再从检索结果中选择目标实验室。</p>
             <!--实验室信息-->
-            <div class="shade-sub-max-box" v-if="shadeFormData.subId&&subData.subName">
+            <div class="shade-sub-max-box" v-if="shadeFormData.subId&&subData.subName&&!shadeFormData.isEnter">
               <div class="shade-sub-big-box">
                 <div class="shade-sub-box">
                   <p>实验室名称</p>
@@ -180,7 +180,9 @@
             </div>
             <div class="shade-check-box">
               <el-form-item label="" prop="checkType" label-width="0">
-                <el-checkbox v-model="shadeFormData.checkType">我已阅读并同意</el-checkbox>
+                <el-checkbox
+                  @click.native.prevent="shadeButton(2)"
+                  v-model="shadeFormData.checkType">我已阅读并同意</el-checkbox>
                 <span style="color:#0183fa;font-size:14px;cursor: pointer"  @click="shadeButton(2)">《新生绑定实验室须知及责任说明》</span>
               </el-form-item>
             </div>
@@ -188,8 +190,8 @@
         </div>
         <div class="shade-button-box">
           <p></p>
-          <p @click="shadeButton(5)">取消</p>
-          <p @click="shadeButton(1)">确认绑定</p>
+          <p class="out-button" v-if="shadeFormData.offType" @click="shadeButton(6)">取消</p>
+          <p class="submit-button" @click="shadeButton(1)">确认绑定</p>
         </div>
       </div>
       <div class="shade-big-box" v-if="shadeType == 2">
@@ -197,11 +199,13 @@
           <p>新生绑定实验室须知及责任说明</p>
         </div>
         <div class="shade-content-box-2 scrollbar-box">
-          <p v-html="textDetail"></p>
+          <p>1. 保证进入的实验室为导师实际使用实验室或属于当前实验室所属课题组。</p>
+          <p>2. 研究生期间涉及到操作实验室内重要危险源，必须绑定实验室。</p>
+          <p></p>
         </div>
         <div class="shade-button-box-2">
           <p></p>
-          <p></p>
+          <p @click="shadeButton(33)">取消</p>
           <p @click="shadeButton(3)">我已知晓</p>
         </div>
       </div>
@@ -212,7 +216,7 @@
 <script>
   import {
     examElLabEduRelationBindStatus,examElLabEduRelationLabLists,examElLabEduRelationBind,
-    examElLabEduRelationLabDetail,laboratoryLabSafeManagerRegulationsDetail,
+    examElLabEduRelationLabDetail,
   } from "@/api/safetyEducationExaminationNew/index";
 export default {
   name: 'UserInfoCard',
@@ -277,7 +281,6 @@ export default {
   },
   mounted() {
     this.examElLabEduRelationBindStatus();
-    this.laboratoryLabSafeManagerRegulationsDetail();
   },
   methods: {
     //进度条去除描述
@@ -288,17 +291,11 @@ export default {
     examElLabEduRelationBindStatus(){
       examElLabEduRelationBindStatus({}).then(response => {
         this.$set(this, 'userInfo', response.data)
-        if((!response.data.bound&&response.data.educationType == 1)||(!response.data.bound&&response.data.educationType == 2&&response.data.isFinishExam)){
-          this.shadeButton(4);
+        if(!response.data.bound&&response.data.educationType == 1){
+          this.shadeButton(5);
         }
       })
     },
-    //实验室管理规定查询
-    laboratoryLabSafeManagerRegulationsDetail(){
-      laboratoryLabSafeManagerRegulationsDetail({}).then(response => {
-        this.$set(this, 'textDetail', unescape(response.data))
-      })
-    },
     //实验室懒加载
     subSelectList(query) {
       if (query !== '' && query.length>1) {
@@ -329,20 +326,27 @@ export default {
       }else if(type == 2){
         //查看通知
         this.$set(this,'shadeType',2);
-      }else if(type == 3){
-        //关闭通知
-        this.$set(this.shadeFormData,'checkType',true);
-        this.$set(this,'shadeType',1);
-      }else if(type == 4){
+      }else if(type == 3 || type == 33){
+        if(type == 3){
+          //关闭通知
+          this.$set(this.shadeFormData,'checkType',true);
+          this.$set(this,'shadeType',1);
+        }else if(type == 33){
+          //关闭通知
+          this.$set(this.shadeFormData,'checkType',false);
+          this.$set(this,'shadeType',1);
+        }
+      }else if(type == 4||type == 5){
         //开启
         this.$set(this,'shadeFormData',{
           subId:null,
           reason:'',
           isEnter:false,
           checkType:false,
+          offType:type == 4?true:false,
         });
         this.$set(this,'shadeType',1);
-      }else if(type == 5){
+      }else if(type == 6){
         //关闭
         this.$set(this,'shadeType',null);
       }
@@ -354,19 +358,10 @@ export default {
     },
     examElLabEduRelationBind(){
       let obj = {
-        subId:this.shadeFormData.subId,
+        subId:this.shadeFormData.subId?this.shadeFormData.subId:'',
+        reason:this.shadeFormData.reason?this.shadeFormData.reason:'',
+        isEnter:this.shadeFormData.isEnter?'0':'1'
       };
-      if(this.userInfo.educationType == 1&&this.userInfo.isNew){
-        obj.reason = '';
-        obj.isEnter = this.shadeFormData.isEnter?'0':'1';
-      }else if(this.userInfo.educationType == 1&&!this.userInfo.isNew){
-        obj.reason = '';
-        obj.isEnter = '0';
-      }else if(this.userInfo.educationType == 2){
-        obj.reason = this.shadeFormData.reason;
-        obj.isEnter = '1';
-      }
-
       examElLabEduRelationBind(obj).then(response => {
         this.msgSuccess(response.message);
         this.$set(this,'shadeType',null);
@@ -380,10 +375,14 @@ export default {
 <style scoped lang="scss">
 .user-info-card {
   background: #fff;
-  border-radius: 6px;
+  /*border-radius: 6px;*/
   padding: 16px 20px;
   margin-bottom: 12px;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
+  /*box-shadow: 0 1px 4px rgba(0,0,0,0.06);*/
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid #e8edf5;
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(37, 50, 74, 0.06);
   .top-title-box{
     display: flex;
     p{
@@ -409,29 +408,32 @@ export default {
     display: flex;
     margin-top:20px;
     .left-max-box{
-      width:460px;
-      height:290px;
-      border-radius:6px;
-      border:1px solid #dedede;
-      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+      width:560px;
+      height:260px;
+      /*border-radius:6px;*/
+      /*border:1px solid #dedede;*/
+      /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);*/
       padding:20px 20px 0 20px;
+      background: linear-gradient(180deg, #fff, #f7faff);
+      border: 1px solid #eaf0f8;
+      border-radius: 14px;
       .left-min-box:nth-child(odd){
         margin-right:20px;
       }
       .left-min-box{
         display: inline-block;
         overflow:hidden;
-        width:198px;
-        margin-bottom:15px;
+        width:248px;
+        margin-bottom:10px;
         p{
-          line-height:30px;
+          line-height:25px;
         }
         p:nth-child(1){
-          font-size:14px;
+          font-size:12px;
           color:#666;
         }
         p:nth-child(2){
-          font-size:16px;
+          font-size:14px;
           font-weight:700;
           display:block;
           overflow:hidden;
@@ -448,7 +450,7 @@ export default {
       .left-sub-min-box{
         display: inline-block;
         overflow:hidden;
-        width:198px;
+        width:248px;
         margin-bottom:15px;
         p{
           line-height:30px;
@@ -458,7 +460,7 @@ export default {
           color:#666;
         }
         .text-p{
-          font-size:16px;
+          font-size:14px;
           font-weight:700;
           display:block;
           overflow:hidden;
@@ -480,24 +482,31 @@ export default {
     }
     .center-max-box{
       width:430px;
-      height:290px;
-      border-radius:6px;
-      border:1px solid #dedede;
-      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+      height:260px;
+      /*border-radius:6px;*/
+      /*border:1px solid #dedede;*/
+      /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);*/
       padding:20px;
       margin:0 20px;
+      background: linear-gradient(180deg, #fff, #f7faff);
+      border: 1px solid #eaf0f8;
+      border-radius: 14px;
       .center-title-box{
         height:50px;
         p{
+          color: #3978e6;
+          background: #eef4ff;
           display: inline-block;
-          border:1px solid #999;
-          color:#0183fa;
-          border-radius:6px;
+          /*border:1px solid #999;*/
+          /*color:#0183fa;*/
+          /*border-radius:6px;*/
+          border-radius:99px;
           padding: 0 15px;
           height:32px;
-          line-height:30px;
+          line-height:32px;
           margin-right:10px;
-          cursor: pointer;
+          font-size:14px;
+          font-weight:700;
         }
         .check-title-p{
           /*color:#fff;*/
@@ -510,14 +519,13 @@ export default {
           padding:0;
         }
         .progress-max-box{
-          height:90px;
-          margin-top:20px;
+          height:70px;
           .progress-min-box{
             display: flex;
             p{
-              font-size:16px;
+              font-size:14px;
               font-weight:700;
-              line-height:60px;
+              line-height:50px;
             }
             p:nth-child(1){
               flex:1;
@@ -530,7 +538,9 @@ export default {
             margin-right:10px;
           }
           .center-bottom-min-box{
-            background-color: rgba(1,131,250,0.1);
+            /*background-color: rgba(1,131,250,0.1);*/
+            border: 1px solid #e5edf8;
+            background-color: #f7faff;;
             padding:10px 20px;
             border-radius:6px;
             width:188px;
@@ -549,21 +559,26 @@ export default {
     }
     .right-max-box{
       flex:1;
-      height:290px;
-      border-radius:6px;
-      border:1px solid #dedede;
-      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+      height:260px;
+      /*border-radius:6px;*/
+      /*border:1px solid #dedede;*/
+      /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);*/
       padding:20px;
+      background: linear-gradient(180deg, #fff, #f7faff);
+      border: 1px solid #eaf0f8;
+      border-radius: 14px;
       .right-title-p{
-        font-size:16px;
+        font-size:14px;
         font-weight:700;
         line-height:30px;
-        padding-left:20px;
-        margin-bottom:30px;
+        margin-bottom:10px;
       }
       .right-big-box{
-        background-color: #E9E9E9;
-        border-radius:6px;
+        border-radius: 10px;
+        background: #f7f9fd;
+        border: 1px solid #e8eef9;
+        /*background-color: #E9E9E9;*/
+        /*border-radius:6px;*/
         margin-bottom:10px;
         display: flex;
         height: 40px;
@@ -571,12 +586,13 @@ export default {
         p:nth-child(1){
           flex:1;
           line-height:40px;
+          font-size:14px;
         }
         p:nth-child(2){
-          width:80px;
-          height:30px;
-          line-height:30px;
-          margin:5px 20px 0 0;
+          width:70px;
+          height:24px;
+          line-height:24px;
+          margin:7px 0 0 0;
           text-align: center;
           font-size:14px;
           border-radius:15px;
@@ -592,6 +608,9 @@ export default {
         }
       }
     }
+    .min-height-box{
+      height:170px !important;
+    }
   }
   .shade-max-big-box{
     z-index:100;
@@ -713,7 +732,11 @@ export default {
       .shade-content-box-2{
         padding: 0 40px;
         margin: 20px 0;
-        height: 400px;
+        height: 200px;
+        p{
+          line-height:40px;
+          font-size:15px;
+        }
       }
       .shade-button-box{
         display: flex;
@@ -721,7 +744,7 @@ export default {
         p:nth-child(1){
           flex:1;
         }
-        p:nth-child(2){
+        .out-button{
           width:70px;
           line-height:40px;
           border-radius:4px;
@@ -730,12 +753,12 @@ export default {
           margin-right:20px;
           cursor: pointer;
         }
-        p:nth-child(2):hover{
+        .out-button:hover{
           border:1px solid #999;
           background-color: #999;
           color:#fff;
         }
-        p:nth-child(3){
+        .submit-button{
           background-color: #A0CFFE;
           color:#fff;
           width:100px;
@@ -745,7 +768,7 @@ export default {
           border:1px solid #A0CFFE;
           cursor: pointer;
         }
-        p:nth-child(3):hover{
+        .submit-button:hover{
           border:1px solid #0183fa;
           background-color: #0183fa;
         }
@@ -757,7 +780,18 @@ export default {
           flex:1;
         }
         p:nth-child(2){
-
+          width:70px;
+          line-height:40px;
+          border-radius:4px;
+          text-align: center;
+          border:1px solid #dedede;
+          margin-right:20px;
+          cursor: pointer;
+        }
+        p:nth-child(2):hover{
+          border:1px solid #999;
+          background-color: #999;
+          color:#fff;
         }
         p:nth-child(3){
           background-color: #A0CFFE;