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

@@ -19,7 +19,7 @@
       </div>
       <div class="list-content">
         <div class="list-container" v-loading="loading">
-          <div v-for="(item, index) in experimentList" :key="index" class="content">
+          <div v-for="(item, index) in testList" :key="index" class="content">
             <div class="content-list">
             <!-- 封面 -->
             <el-image style="width: 100%;border-radius: 8px;" :src="item.coverPic" fit="contain" @click="chooseVedio(item)"/>
@@ -79,7 +79,116 @@ const loading = ref(false)
 
 // 实验图片结构
 const experimentList = ref([])
-
+const testList = ref([
+  {
+    fileName: '1',
+    fileShowName: '1',
+    coverPic: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+    nums: 100,
+  },
+  {
+    fileName: '1',
+    fileShowName: '1',
+    coverPic: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+    nums: 100,
+  },
+  {
+    fileName: '1',
+    fileShowName: '1',
+    coverPic: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+    nums: 100,
+  },
+  {
+    fileName: '1',
+    fileShowName: '1',
+    coverPic: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+    nums: 100,
+  },
+  {
+    fileName: '1',
+    fileShowName: '1',
+    coverPic: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+    nums: 100,
+  },
+  {
+    fileName: '1',
+    fileShowName: '1',
+    coverPic: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+    nums: 100,
+  },
+  {
+    fileName: '1',
+    fileShowName: '1',
+    coverPic: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+    nums: 100,
+  },
+  {
+    fileName: '1',
+    fileShowName: '1',
+    coverPic: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+    nums: 100,
+  },
+  {
+    fileName: '1',
+    fileShowName: '1',
+    coverPic: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+    nums: 100,
+  },
+  {
+    fileName: '1',
+    fileShowName: '1',
+    coverPic: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+    nums: 100,
+  },
+  {
+    fileName: '1',
+    fileShowName: '1',
+    coverPic: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+    nums: 100,
+  },
+  {
+    fileName: '1',
+    fileShowName: '1',
+    coverPic: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+    nums: 100,
+  },
+  {
+    fileName: '1',
+    fileShowName: '1',
+    coverPic: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+    nums: 100,
+  },
+  {
+    fileName: '1',
+    fileShowName: '1',
+    coverPic: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+    nums: 100,
+  },
+  {
+    fileName: '1',
+    fileShowName: '1',
+    coverPic: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+    nums: 100,
+  },
+  {
+    fileName: '1',
+    fileShowName: '1',
+    coverPic: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+    nums: 100,
+  },
+  {
+    fileName: '1',
+    fileShowName: '1',
+    coverPic: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+    nums: 100,
+  },
+  {
+    fileName: '1',
+    fileShowName: '1',
+    coverPic: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+    nums: 100,
+  },
+])
 // 请求视频资源的参数
 const query = ref({
   textbookId: '',
@@ -180,7 +289,10 @@ const chooseVedio = (item) => {
   width: calc(20%);
   cursor: pointer;
   transition: all 0.3s ease;
-  padding: 5px
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .content:hover {
@@ -188,7 +300,6 @@ const chooseVedio = (item) => {
   //   box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
 }
 .content-list{
-
 }
 
 .item-content {