测评主页

src/views/bookShelf/components/PracticeModel.vue

@@ -57,6 +57,7 @@
           v-for="(item, index) in resArr.wordsList"
           :key="'detail' + index"
         >
+          <a class="history-btn" v-if="resArr.timeList[index] && resArr.timeList[index] && curTime >= resArr.timeList[index].s && curTime <= resArr.timeList[index].e" @click="lookHistory">历史记录</a>
           <b class="para-index" :style="{fontSize:wordFontsize + 'px',color:resArr.timeList[index] && resArr.timeList[index] && curTime >= resArr.timeList[index].s && curTime <= resArr.timeList[index].e ? colorObj.type==='white'?'#2F3742':colorObj.type==='darkGreen'?'#299772':colorObj.type==='armyGreen'?'#30A47D':'#5373E7':colorObj.type==='white'?'#D0D3D9':colorObj.type==='darkGreen'?'#7A8983':colorObj.type==='armyGreen'?'#6B7C74':'#737781'}">{{index+1}}</b>
           <div class="wordsList-box">
             <div class="nnpe-sentence-box">
@@ -507,6 +508,10 @@ export default {
       }
       return time;
     },
+    // 点击历史记录按钮
+    lookHistory(){
+
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -572,8 +577,23 @@ export default {
   }
   .NNPE-detail {
     clear: both;
-    overflow: hidden;
+    // overflow: hidden;
     display: flex;
+    position: relative;
+    .history-btn{
+        position: absolute;
+        left: -110px;
+        top: 50%;
+        margin-top: -16px;
+        z-index: 1;
+        padding: 5px 16px;
+        border-radius: 2px;
+        background: #F2F3F5;
+        color:#4E5969;
+        font-size: 14px;
+        line-height: 22px;
+        cursor: pointer;
+    }
     .para-index{
         color:#D0D3D9;
         font-size: 18px;
@@ -643,6 +663,7 @@ export default {
     bottom: 0;
     margin-left: -500px;
     padding-bottom: 24px;
+    z-index: 1;
     &-inner{
         padding-top: 40px;
         height: 144px;

src/views/evaluation/index.vue

@@ -9,16 +9,22 @@
     <ul>
         <li v-for="(item,index) in dataList" :key="index" :style="{background:bgList[index%3].bg}">
             <div class="item-left">
-                <h2 :style="{color:bgList[index%3].color}">{{item.title}}</h2>
-                <div class="item-center">
+                <div class="item-top">
+                    <h2 :style="{color:bgList[index%3].color}">{{item.title}}</h2>
                     <template v-for="(itemA,indexA) in 3">
                         <img class="avatar" :src="avatarList[indexA]" :key="indexA" v-if="avatarList[indexA]" />
                     </template>
                     <span class="avatar-number" v-if="avatarList.length>3">{{avatarList.length>99?'99+':avatarList.length}}</span>
                     <p :style="{color:bgList[index%3].color==='#FFFFFF'?'#F7F8FA':bgList[index%3].color}">{{item.totleNumber}}人做过</p>
                 </div>
+                
+                <div class="item-center">
+                        <label v-for="items in $studyType" :key="items.study_phase" :class="[item.studyType===items.study_phase?'active':'']" @click="item.studyType=items.study_phase">
+                            {{items.study_phase_name}}
+                        </label>
+                </div>
                 <div class="item-bottom">
-                    <a @click="handleStart(item)">开始测评</a>
+                    <a @click="handleStart(item)">开始测评  ¥1.9</a>
                     <i class="el-icon-success" v-if="item.date" :style="{color:bgList[index%3].color}"></i>
                     <span v-if="item.date" :style="{color:bgList[index%3].color}">{{item.date}} 做过</span>
                 </div>
@@ -33,6 +39,7 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import Header from "../../components/Header.vue";
+import { mapState } from 'vuex';
 
 export default {
   //import引入的组件需要注入到对象中才能使用
@@ -44,27 +51,24 @@ export default {
       dataList:[
         {
             title:'词汇测试',
-            totleNumber:346,
-            date:'2024/03/02',
-            src:require('../../assets/evaluation1.png')
+            totleNumber:34,
+            date:'2023/03/02',
+            src:require('../../assets/evaluation1.png'),
+            studyType: 11
         },
         {
             title:'听力测试',
-            totleNumber:346,
-            date:'2024/03/02',
-            src:require('../../assets/evaluation2.png')
-        },
-        {
-            title:'阅读测试',
-            totleNumber:346,
-            date:'2024/03/02',
-            src:require('../../assets/evaluation3.png')
+            totleNumber:46,
+            date:'2023/09/02',
+            src:require('../../assets/evaluation2.png'),
+            studyType: 11
         },
         {
             title:'阅读测试',
-            totleNumber:346,
-            date:'2024/03/02',
-            src:require('../../assets/evaluation1.png')
+            totleNumber:580,
+            date:'2023/09/20',
+            src:require('../../assets/evaluation3.png'),
+            studyType: 11
         }
       ],
       bgList:[
@@ -85,7 +89,9 @@ export default {
     }
   },
   //计算属性 类似于data概念
-  computed: {},
+  computed: {
+    ...mapState(['$studyType']),
+  },
   //监控data中数据变化
   watch: {},
   //方法集合
@@ -147,10 +153,9 @@ ul{
             font-weight: 700;
             font-size: 36px;
             line-height: 51px;
-            margin: 0;
+            margin: 0 24px 0 0;
         }
-        .item-center{
-            margin: 9px 0 57px 0;
+        .item-top{
             display: flex;
             align-items: center;
             .avatar{
@@ -169,6 +174,7 @@ ul{
                 font-size: 12px;
                 line-height: 20px;
                 color: #3459D2;
+                height: 26px;
             }
             p{
                 font-size: 14px;
@@ -176,11 +182,31 @@ ul{
                 margin: 0 8px;
             }
         }
+        .item-center{
+            margin: 16px 0 51px 0;
+            display: flex;
+            align-items: center;
+            label{
+                border-radius: 20px;
+                margin-right: 8px;
+                color: #FFF;
+                font-size: 14px;
+                font-weight: 500;
+                line-height: 22px;
+                padding: 4px 16px;
+                display: inline-block;
+                cursor: pointer;
+                &.active{
+                    background: rgba(0, 0, 0, 0.24);
+                }
+            }
+        }
         .item-bottom{
             display: flex;
             align-items: center;
             a{
-                width: 96px;
+                // width: 96px;
+                padding: 0 20px;
                 height: 36px;
                 line-height: 36px;
                 text-align: center;