fix: 学习报告样式

src/pages/LearnPlan/components/AbleChart.vue

@@ -8,6 +8,9 @@
     <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 === 3" :src="require('@/assets/component/LuojigouBoard/study4.png')" />
+    <img class="study" v-if="index === 4" :src="require('@/assets/component/LuojigouBoard/study5.png')" />
+    <img class="study" v-if="index === 5" :src="require('@/assets/component/LuojigouBoard/study6.png')" />
   </div>
 </template>
 
@@ -64,7 +67,7 @@ const props = defineProps<IProps>()
     margin-top: 32px;
     .able-item {
       margin-left: 2px;
-      width: 32px;
+      width: 66px;
       height: 12px;
       background: #FF8024;
       border-radius: 2px 2px 2px 2px;

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

@@ -37,13 +37,13 @@
 </template>
 
 <script setup lang="ts" name="Rive">
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import LearnPlanButton from '../../components/LearnPlanButton.vue'
 import { useAppRouter } from '@/hook/appHook'
 import { useDeviceDire, useScheduler, useSchedulerOnce } from '@/hook/index'
-import { onMounted } from 'vue';
-import { useRoute } from "vue-router"
-import { Rive } from "@rive-app/canvas"
+
+import { useRoute } from 'vue-router'
+import { Rive } from '@rive-app/canvas'
 // console.log(HOOK.);
 
 const staticImg = {
@@ -54,17 +54,17 @@ const staticImg = {
 
 const route = useRoute()
 
-let {from} = route.query
+let { from } = route.query
 
 // 来自动画游戏的 进入学一学
 // 来自学一学的 进入讲一讲
 // 来自讲一讲的 进入学习报告
-/**  
+/**
  * {
  *  from: 'ani' | 'exercise' | 'audio' | 'report'
  * }
  */
-enum FromEnum  {
+enum FromEnum {
   'ani' = 'ani',
   'exercise' = 'exercise',
   'audio' = 'audio',
@@ -85,23 +85,21 @@ const countDown = ref(50)
 
 // 1. 初始化rive动画
 const initRive = () => {
-
-console.log(document.getElementById('rive-canvas'));
-
-const canvas = document.getElementById('rive-canvas')
-
-const a = new Rive({
-  src: "https://res-game.luojigou.vip/qiqiu3.riv",
-  canvas: canvas,
-  autoplay: true,
-  // stateMachines: "bumpy",
-  artboard:'reqiqiu-dog',
-  onLoad: () => {
-    a.play('idle')
-    a.resizeToCanvas()
-  },
-});
-
+  console.log(document.getElementById('rive-canvas'))
+
+  const canvas = document.getElementById('rive-canvas')
+
+  const a = new Rive({
+    src: 'https://res-game.luojigou.vip/qiqiu3.riv',
+    canvas: canvas,
+    autoplay: true,
+    // stateMachines: "bumpy",
+    artboard: 'reqiqiu-dog',
+    onLoad: () => {
+      a.play('idle')
+      a.resizeToCanvas()
+    }
+  })
 }
 
 direChange((_dire) => {
@@ -123,34 +121,32 @@ const [stx] = useScheduler({
 stx.start()
 
 const backAppPage = () => {
-
   // app需要的特殊参数，用来连续返回两次app的路由
-  appRouter.back(JSON.stringify({ "force": true }))
+  appRouter.back(JSON.stringify({ force: true }))
 }
 
 // 跳转
 
 const pageInfo = () => {
-
-  let _reload, _next, _title;
-// navigateExercise
-// navigateRecord
+  let _reload, _next, _title
+  // navigateExercise
+  // navigateRecord
   switch (from) {
     case FromEnum.ani:
-      _reload = () => appRouter.push("reloadGame")
-      _next = () => appRouter.push("navigateExercise")
+      _reload = () => appRouter.push('reloadGame')
+      _next = () => appRouter.push('navigateExercise')
       _title = '练一练'
-      break;
+      break
     case FromEnum.exercise:
-      _reload = () => appRouter.push("reloadGame")
-      _next = () => appRouter.push("navigateRecord")
+      _reload = () => appRouter.push('reloadGame')
+      _next = () => appRouter.push('navigateRecord')
       _title = '讲一讲'
-      break;
+      break
     default:
-      _reload = () => appRouter.push("reloadGame")
-      _next = () => appRouter.push("navigateRecord")
+      _reload = () => appRouter.push('reloadGame')
+      _next = () => appRouter.push('navigateRecord')
       _title = '讲一讲'
-      break;
+      break
   }
 
   return {
@@ -161,10 +157,9 @@ const pageInfo = () => {
 }
 
 onMounted(() => {
-  useSchedulerOnce({cb: initRive, delay: 100})
+  useSchedulerOnce({ cb: initRive, delay: 100 })
 })
 
-
 </script>
 
 <style scoped  lang="scss" >