图片视频

src/views/study/home/top.vue

@@ -18,7 +18,7 @@
           </div>
           <div class="mr-3 h-9 w-9 overflow-hidden rounded-full bg-gray-200">
             <img
-              src="https://picsum.photos/id/1012/100/100"
+              src="@/assets/images/student.png"
               alt="学生头像"
               class="h-full w-full object-cover"
             />

src/views/study/subject/index.vue

@@ -88,7 +88,7 @@
             >
               <div class="text-xs text-gray-500">当前难度等级</div>
               <div class="mt-1 text-xl font-bold text-gray-800">
-                {{ state.statistic.card.data.level }}
+                {{ state.statistic.card.data?.level }}
               </div>
             </div>
             <div
@@ -96,7 +96,7 @@
             >
               <div class="text-xs text-gray-500">正确率</div>
               <div class="mt-1 text-xl font-bold text-gray-800">
-                {{ state.statistic.card.data.totalAccuracyRate }}
+                {{ state.statistic.card.data?.totalAccuracyRate }}
               </div>
             </div>
             <div
@@ -104,7 +104,7 @@
             >
               <div class="text-xs text-gray-500">待提升板块</div>
               <div class="mt-1 text-sm font-bold text-gray-800">
-                {{ state.statistic.card.data.maxIncorrectSections }}
+                {{ state.statistic.card.data?.maxIncorrectSections }}
               </div>
             </div>
             <div
@@ -112,7 +112,7 @@
             >
               <div class="text-xs text-gray-500">优秀板块</div>
               <div class="mt-1 text-sm font-bold text-gray-800">
-                {{ state.statistic.card.data.maxCorrectSections }}
+                {{ state.statistic.card.data?.maxCorrectSections }}
               </div>
             </div>
           </div>

src/views/study/subject/question/list.vue

@@ -20,21 +20,19 @@
             </div>
           </div>
           <!-- 题目的图片 -->
-          <div class="bg-gray-light mb-4 flex justify-center rounded-lg p-4">
-            <img
-              :src="item.questionContent"
-              alt="题目图片"
-              class="max-h-40 rounded"
-            />
-          </div>
+          <template v-for="pic in item.questionImages">
+            <div>
+              <img :src="pic.imageUrl" alt="题目图片" />
+            </div>
+          </template>
+
           <!-- 答案的图片 -->
-          <div class="bg-gray-light mb-4 flex justify-center rounded-lg p-4">
-            <img
-              :src="item.questionAnswer"
-              alt="答案图片"
-              class="max-h-32 rounded"
-            />
-          </div>
+
+          <template v-for="pic in item.answerImages">
+            <div>
+              <img :src="pic.imageUrl" alt="题目图片" />
+            </div>
+          </template>
           <!-- 视频解析列表 -->
           <div v-if="item.questionVideos?.length > 0">
             <div class="mb-2 text-sm font-medium text-gray-800">视频解析：</div>
@@ -46,7 +44,7 @@
                   <span class="text-sm">{{ video.fileName }}</span>
                   <div
                     class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 transition-colors"
-                    @click="state.showVideo = true"
+                    @click="onVideo(video)"
                   >
                     <i class="fas fa-circle-play text-xl"></i>
                   </div>
@@ -58,24 +56,37 @@
       </div>
     </template>
   </div>
-  <q-dialog v-model="state.showVideo">
-    <q-card style="width: 60%; max-width: 60%">
+  <q-dialog v-model="state.video.show" persistent>
+    <q-card style="width: 90%; max-width: 90%">
       <q-card-section>
-        <div class="text-h6">视频解析（汉字结构类型及特点）</div>
+        <div class="text-h6 flex items-center">
+          视频解析（{{ state.video.name }}）
+          <SvgIcon
+            name="czr_close"
+            color="#000000"
+            class="ml-auto"
+            @click="state.video.show = false"
+          />
+        </div>
       </q-card-section>
-
       <q-card-section>
-        <video
-          class="h-full w-full"
-          src="http://cyberplayer.bcelive.com/videoworks/mda-kbuhu4wqdi08dwix/cyberplayer/mp4/cyberplayer-demo.mp4"
-        />
+        <video class="h-full w-full" :src="state.video.url" controls />
       </q-card-section>
     </q-card>
   </q-dialog>
   <q-dialog v-model="state.history.show">
     <q-card style="max-width: 60%">
       <q-card-section>
-        <div class="text-h6 w-100">历史做题记录</div>
+        <div class="text-h6"></div>
+        <div class="text-h6 flex w-100 items-center">
+          历史做题记录
+          <SvgIcon
+            name="czr_close"
+            color="#000000"
+            class="ml-auto"
+            @click="state.history.show = false"
+          />
+        </div>
       </q-card-section>
 
       <q-card-section>
@@ -119,11 +130,15 @@ const props = defineProps({
   data: { default: () => [] },
 })
 const state: any = reactive({
-  showVideo: false,
   history: {
     show: false,
     data: [],
   },
+  video: {
+    show: false,
+    url: '',
+    name: '',
+  },
 })
 const onHistory = (row) => {
   trainingCampPaperQuestionRelIpadHistoryRecords(row.questionId)
@@ -158,6 +173,11 @@ const onHistory = (row) => {
     })
     .finally(() => {})
 }
+const onVideo = (row) => {
+  state.video.url = row.aliyunVideoUrl
+  state.video.name = row.fileName
+  state.video.show = true
+}
 </script>
 
 <style lang="scss" scoped>