feat: 学习计划

src/pages/LearnPlan/components/AbleChart.vue

@@ -5,9 +5,9 @@
       <div :class="['able-item', item <= props.count ? 'able-item-active' : '']" v-for="(item) in 6" :key="item" > </div>
     </div>
     <!-- <img  :src=" item > props.count ?  staticImg.ableGrey : staticImg.able" alt="" > -->
-    <!-- <img class="study" v-if="index === 0" :src="require('@/assets/component/LuojigouBoard/study1.png')" /> -->
-    <!-- <img class="study" v-if="index === 1" :src="require('@/assets/component/LuojigouBoard/study2.png')" /> -->
-    <!-- <img class="study" v-if="index === 2" :src="require('@/assets/component/LuojigouBoard/study3.png')" /> -->
+    <img class="study" v-if="index === 0" :src="require('@/assets/component/LuojigouBoard/study1.png')" />
+    <img class="study" v-if="index === 1" :src="require('@/assets/component/LuojigouBoard/study2.png')" />
+    <img class="study" v-if="index === 2" :src="require('@/assets/component/LuojigouBoard/study3.png')" />
   </div>
 </template>
 
@@ -31,14 +31,14 @@ const props = defineProps<IProps>()
 <style scoped lang="scss" >
 .able-chart {
   width: 303px;
-  height: 46px;
+  height: 64px;
   background: #FDF8F5;
   border-radius: 10px;
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  // background: url('~@/assets/component/LuojigouBoard/rect.png') no-repeat top left;
+  // align-items: center;
+  background: url('~@/assets/component/LuojigouBoard/rect.png') no-repeat top left;
   position: relative;
   background-size: 100%;
   padding-left: 16px;
@@ -49,6 +49,7 @@ const props = defineProps<IProps>()
     font-weight: 500;
     color: #FF8024;
     font-size: 14px;
+    margin-top: 30px;
   }
   .study {
     position: absolute;
@@ -59,6 +60,7 @@ const props = defineProps<IProps>()
   }
   .able {
     display: flex;
+    margin-top: 32px;
     .able-item {
       margin-left: 2px;
       width: 32px;

src/pages/LearnPlan/views/LearnReport/index.vue

@@ -7,7 +7,7 @@
             <img class="title-img" :src="staticImg.titleImg" alt="">
             <img class="ques-img" ref="quesImgRef" @click="quesTipState = !quesTipState" :src="staticImg.quesIcon" alt="">
           </div>
-          <div class="user-name" >{{state.report?.userNickName || '逻辑狗'}}</div>
+          <div class="user-name" >{{state.report?.itemName || '逻辑狗'}}</div>
         </div>
       <div class="learn-report-content" >
         <!-- 问题提示 -->
@@ -98,12 +98,31 @@
           <div class="learn-title" >今日练习分析</div>
         </div>
         <div class="able-any" >
+          <!--         v-for="(item, index) in state.report?.exerciseCardResultList" -->
           <able-chart
             style="margin-bottom: 12px;"
             :title="item.capability"
             :index="index"
             :count="item.correctQuantity - ( item.totalQuantity - item.correctQuantity)"
-            v-for="(item, index) in state.report?.exerciseCardResultList"
+            v-for="(item, index) in [{
+              title: '观察能力',
+              count: 4,
+              capability: '观察能力',
+              correctQuantity: 4,
+              totalQuantity: 6
+            },{
+              title: '观察能力',
+              count: 4,
+              capability: '观察能力',
+              correctQuantity: 4,
+              totalQuantity: 6
+            },{
+              title: '观察能力',
+              count: 4,
+              capability: '观察能力',
+              correctQuantity: 4,
+              totalQuantity: 6
+            }]"
             :key="item.capability"
           />
         </div>