视频

src/views/study/chinese/question/index.vue

@@ -197,13 +197,10 @@
                     >
                       <span class="text-sm">独体字与合体字的区别</span>
                       <div
-                        class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 text-white transition-colors"
-                        data-video="https://example.com/video1.mp4"
-                        data-title="独体字与合体字的区别"
-                        data-duration="10:24"
-                        data-views="1.2k"
+                        class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 transition-colors"
+                        @click="state.showVideo = true"
                       >
-                        <i class="fas fa-play text-xs"></i>
+                        <i class="fas fa-circle-play text-xl"></i>
                       </div>
                     </li>
                     <li
@@ -211,13 +208,10 @@
                     >
                       <span class="text-sm">常见独体字结构分析</span>
                       <div
-                        class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 text-white transition-colors"
-                        data-video="https://example.com/video2.mp4"
-                        data-title="常见独体字结构分析"
-                        data-duration="8:45"
-                        data-views="986"
+                        class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 transition-colors"
+                        @click="state.showVideo = true"
                       >
-                        <i class="fas fa-play text-xs"></i>
+                        <i class="fas fa-circle-play text-xl"></i>
                       </div>
                     </li>
                   </ul>
@@ -283,13 +277,10 @@
                     >
                       <span class="text-sm">汉字结构分类详解</span>
                       <div
-                        class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 text-white transition-colors"
-                        data-video="https://example.com/video3.mp4"
-                        data-title="汉字结构分类详解"
-                        data-duration="12:10"
-                        data-views="2.1k"
+                        class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 transition-colors"
+                        @click="state.showVideo = true"
                       >
-                        <i class="fas fa-play text-xs"></i>
+                        <i class="fas fa-circle-play text-xl"></i>
                       </div>
                     </li>
                   </ul>
@@ -355,13 +346,10 @@
                     >
                       <span class="text-sm">常见形近字辨析</span>
                       <div
-                        class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 text-white transition-colors"
-                        data-video="https://example.com/video4.mp4"
-                        data-title="常见形近字辨析"
-                        data-duration="15:30"
-                        data-views="1.8k"
+                        class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 transition-colors"
+                        @click="state.showVideo = true"
                       >
-                        <i class="fas fa-play text-xs"></i>
+                        <i class="fas fa-circle-play text-xl"></i>
                       </div>
                     </li>
                     <li
@@ -369,13 +357,10 @@
                     >
                       <span class="text-sm">易错字书写规则</span>
                       <div
-                        class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 text-white transition-colors"
-                        data-video="https://example.com/video5.mp4"
-                        data-title="易错字书写规则"
-                        data-duration="9:42"
-                        data-views="1.5k"
+                        class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 transition-colors"
+                        @click="state.showVideo = true"
                       >
-                        <i class="fas fa-play text-xs"></i>
+                        <i class="fas fa-circle-play text-xl"></i>
                       </div>
                     </li>
                     <li
@@ -383,13 +368,10 @@
                     >
                       <span class="text-sm">汉字笔画顺序规则</span>
                       <div
-                        class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 text-white transition-colors"
-                        data-video="https://example.com/video6.mp4"
-                        data-title="汉字笔画顺序规则"
-                        data-duration="7:55"
-                        data-views="1.3k"
+                        class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 transition-colors"
+                        @click="state.showVideo = true"
                       >
-                        <i class="fas fa-play text-xs"></i>
+                        <i class="fas fa-circle-play text-xl"></i>
                       </div>
                     </li>
                   </ul>
@@ -455,13 +437,10 @@
                     >
                       <span class="text-sm">汉字结构类型及特点</span>
                       <div
-                        class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 text-white transition-colors"
-                        data-video="https://example.com/video7.mp4"
-                        data-title="汉字结构类型及特点"
-                        data-duration="11:20"
-                        data-views="954"
+                        class="play-video bg-subject-color hover:bg-subject-dark rounded-full p-1.5 transition-colors"
+                        @click="state.showVideo = true"
                       >
-                        <i class="fas fa-play text-xs"></i>
+                        <i class="fas fa-circle-play text-xl"></i>
                       </div>
                     </li>
                   </ul>
@@ -509,12 +488,31 @@
         </div>
       </div>
     </div>
+    <q-dialog v-model="state.showVideo">
+      <q-card style="width: 60%; max-width: 60%">
+        <q-card-section>
+          <div class="text-h6">视频解析（汉字结构类型及特点）</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"
+          />
+        </q-card-section>
+
+        <q-card-actions align="right" class="text-teal bg-white">
+          <q-btn flat label="关闭" v-close-popup />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
   </StudyLayout>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from 'vue'
 import StudyLayout from '@/views/study/components/study-layout.vue'
+import { Plus } from '@element-plus/icons-vue'
 
 const state: any = reactive({
   selected: null,
@@ -524,6 +522,7 @@ const state: any = reactive({
     p2: '全部题型',
     p3: true,
   },
+  showVideo: false,
 })
 const ref_tree = ref()
 const treeData = [

src/views/study/components/study-layout.vue

@@ -45,51 +45,48 @@
   </div>
   <q-dialog v-model="state.showInfo">
     <q-card style="width: 60%; max-width: 60%">
-      <div>
-        <q-card-section>
-          <div class="text-h6">个人信息</div>
-        </q-card-section>
+      <q-card-section>
+        <div class="text-h6">个人信息</div>
+      </q-card-section>
 
-        <q-card-section class="q-pt-none">
-          <div class="flex">
-            <div class="flex-1">
-              <q-card-section class="q-pt-none">
-                <q-input
-                  outlined
-                  v-model="state.info.phone"
-                  label="联系方式"
-                  type="tel"
-                />
-              </q-card-section>
-              <q-card-section class="q-pt-none">
-                <q-input
-                  outlined
-                  v-model="state.info.email"
-                  label="邮箱"
-                  type="email"
-                />
-              </q-card-section>
-              <q-card-section class="q-pt-none">
-                <q-input outlined v-model="state.info.name" label="姓名" />
-              </q-card-section>
-            </div>
-            <div class="">
-              <el-upload
-                class="avatar-uploader"
-                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-                :show-file-list="false"
-                accept=".png,.jpg,.jpeg"
-                :on-success="handleAvatarSuccess"
-                :before-upload="beforeAvatarUpload"
-              >
-                <img v-if="state.avatar" :src="state.avatar" class="avatar" />
-                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
-              </el-upload>
-            </div>
+      <q-card-section class="q-pt-none">
+        <div class="flex">
+          <div class="flex-1">
+            <q-card-section class="q-pt-none">
+              <q-input
+                outlined
+                v-model="state.info.phone"
+                label="联系方式"
+                type="tel"
+              />
+            </q-card-section>
+            <q-card-section class="q-pt-none">
+              <q-input
+                outlined
+                v-model="state.info.email"
+                label="邮箱"
+                type="email"
+              />
+            </q-card-section>
+            <q-card-section class="q-pt-none">
+              <q-input outlined v-model="state.info.name" label="姓名" />
+            </q-card-section>
           </div>
-        </q-card-section>
-      </div>
-
+          <div class="">
+            <el-upload
+              class="avatar-uploader"
+              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
+              :show-file-list="false"
+              accept=".png,.jpg,.jpeg"
+              :on-success="handleAvatarSuccess"
+              :before-upload="beforeAvatarUpload"
+            >
+              <img v-if="state.avatar" :src="state.avatar" class="avatar" />
+              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+            </el-upload>
+          </div>
+        </div>
+      </q-card-section>
       <q-card-actions align="right" class="text-teal bg-white">
         <q-btn flat label="确定" v-close-popup />
         <q-btn flat label="取消" v-close-popup />