课件详情开发

src/modules/admin/teacher/views/List.vue

@@ -80,7 +80,7 @@ const handleDetail = (row: any) => {
         <el-image
           :src="row.avatar"
           alt=""
-          style="width: 50px"
+          style="width: 50px; height: 50px"
           :preview-src-list="[row.avatar]"
           :initial-index="4"
           fit="contain"

src/modules/resource/courseware/components/CenterInfo.vue

 <script setup lang="ts">
+const props = defineProps({
+  data: {
+    type: Object,
+    require: true
+  }
+})
 </script>
 <template>
-<div class="center-video-box">
-  <div class="file-box">
-    <embed width="812" height="433" src="https://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210604/7b1bfdec10354da769461199acf55176.pdf">
-  </div>
-  <!-- <video width="812" height="433" controls>
+  <div class="center-video-box">
+    <div class="file-box">
+      <embed width="812" height="433" :src="props.data?.url" />
+    </div>
+    <!-- <video width="812" height="433" controls>
     <source src="https://video.shipin520.com/videos/17/36/71/b_KSyZ5ujXfz7R1567173671.mp4" type="video/mp4">
   </video> -->
-  <div class="right-statistics">
-    <div class="stat-item">
-      <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/view-vicon1.png">
-      <div class="content">
-        <div class="unit">758<span>个</span></div>
-        <div class="tag">使用项目/学校</div>
+    <div class="right-statistics">
+      <div class="stat-item">
+        <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/view-vicon1.png" />
+        <div class="content">
+          <div class="unit">{{ props.data?.project_count }}<span>个</span></div>
+          <div class="tag">使用项目/学校</div>
+        </div>
       </div>
-    </div>
-    <div class="stat-item">
-      <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/view-vicon2.png">
-      <div class="content">
-        <div class="unit">758<span>个</span></div>
-        <div class="tag">使用课程</div>
+      <div class="stat-item">
+        <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/view-vicon2.png" />
+        <div class="content">
+          <div class="unit">{{ props.data?.course_count }}<span>个</span></div>
+          <div class="tag">使用课程</div>
+        </div>
       </div>
-    </div>
-    <div class="stat-item">
-      <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/view-vicon3.png">
-      <div class="content">
-        <div class="unit">758<span>个</span></div>
-        <div class="tag">累计学习人次</div>
+      <div class="stat-item">
+        <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/view-vicon3.png" />
+        <div class="content">
+          <div class="unit">{{ props.data?.learn_count }}<span>个</span></div>
+          <div class="tag">累计学习人次</div>
+        </div>
       </div>
-    </div>
-    <div class="stat-item">
-      <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/view-vicon4.png">
-      <div class="content">
-        <div class="unit">758<span>个</span></div>
-        <div class="tag">累计学习时长</div>
+      <div class="stat-item">
+        <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/view-vicon4.png" />
+        <div class="content">
+          <div class="unit">{{ props.data?.learn_time_count }}<span>个</span></div>
+          <div class="tag">累计学习时长</div>
+        </div>
       </div>
     </div>
   </div>
-</div>
 </template>
 <style lang="scss" scoped>
-.center-video-box{
+.center-video-box {
   padding: 20px 0;
   display: flex;
-  .right-statistics{
+  .right-statistics {
     flex: 1;
     padding-top: 15px;
-    .stat-item{
+    .stat-item {
       width: 210px;
       height: 85px;
-      background: #B41E47;
+      background: #b41e47;
       border-radius: 6px;
       display: flex;
       align-items: center;
       margin: 0 auto 20px;
-      &:nth-child(even){
-        background: #BF9D6B;
+      &:nth-child(even) {
+        background: #bf9d6b;
       }
-      img{
+      img {
         width: 52px;
         height: 52px;
         display: block;
         margin-left: 18px;
       }
-      .content{
+      .content {
         margin-left: 18px;
-        .unit{
+        .unit {
           font-size: 26px;
           line-height: 100%;
-          color: #FFFFFF;
-          span{
+          color: #ffffff;
+          span {
             font-size: 12px;
             line-height: 100%;
           }
         }
-        .tag{
+        .tag {
           font-size: 14px;
           line-height: 100%;
-          color: #FFFFFF;
+          color: #ffffff;
           margin-top: 10px;
         }
       }

src/modules/system/cover/views/List.vue

@@ -78,7 +78,14 @@ const handleEdit = (row: any) => {
       <el-button type="primary" round @click="handleAdd" style="margin-bottom: 20px">新增封面</el-button>
 
       <template #table-cover="{ row }">
-        <img :src="row.url" alt="" style="width: 50px" />
+        <el-image
+          :src="row.url"
+          style="width: 50px; height: 50px"
+          :preview-src-list="[row.url]"
+          :initial-index="4"
+          fit="contain"
+          :preview-teleported="true"
+        />
       </template>
       <template #table-operate="{ row }">
         <el-space>