src/renderer/src/views/experiment/index.vue

@@ -18,12 +18,15 @@
         </el-form>
       </div>
       <div class="list-content">
-        <div class="list-container">
-          <div class="content-list" v-for="(item, index) in experimentList" :key="index">
+        <div class="list-container" v-loading="loading">
+          <div v-for="(item, index) in experimentList" :key="index" class="content">
+            <div class="content-list">
             <!-- 封面 -->
             <el-image style="width: 100%;border-radius: 8px;" :src="item.coverPic" fit="contain" @click="chooseVedio(item)"/>
-            <!-- 标题 -->
-            <div style="text-align: left;">
+            
+          </div>
+          <!-- 标题 -->
+          <div style="text-align: left;">
               <el-text>{{ item.fileShowName }}</el-text>
             </div>
             <!-- 观看人数 -->
@@ -71,10 +74,11 @@ const resultTotal = ref(0)
 // 弹出视频
 const isShow = ref(false)
 const curRow = ref({})
+// loading框
+const loading = ref(false)
 
 // 实验图片结构
 const experimentList = ref([])
-
 // 请求视频资源的参数
 const query = ref({
   textbookId: '',
@@ -94,8 +98,13 @@ const query = ref({
 
 const getData = (data) => {
   const { textBook, node } = data
-  query.value.levelFirstId = node.parentNode.id
-  query.value.levelSecondId = node.id
+  if (node.parentNode) {
+    query.value.levelFirstId = node.parentNode.id
+    query.value.levelSecondId = node.id
+  } else {
+    query.value.levelFirstId = node.id
+    query.value.levelSecondId = ''
+  }
   query.value.textbookId = node.rootid
   getVideoList()
 }
@@ -106,7 +115,9 @@ const chooseItem = (item) => {
 
 // 获取视频资源
 const getVideoList = async () => {
+  loading.value = true
   const res = await getSmarttalkPage(query.value)
+  loading.value = false
   experimentList.value = [...res.rows]
   resultTotal.value = res.total
 }
@@ -153,7 +164,7 @@ const chooseVedio = (item) => {
 }
 .list-content {
   border-radius: 8px;
-  height: 100%;
+  height: 90%;
 }
 .list-container {
   display: flex;
@@ -162,19 +173,24 @@ const chooseVedio = (item) => {
   overflow-y: auto;
 }
 
-.content-list {
+.content {
   border-radius: 8px;
   //   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   width: calc(20%);
   cursor: pointer;
   transition: all 0.3s ease;
-  padding: 5px
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
-.content-list:hover {
+.content:hover {
   transform: translateY(-4px);
   //   box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
 }
+.content-list{
+}
 
 .item-content {
   display: flex;