优化前端页面

ruoyi-ui/src/views/benyi/child_files/index.vue

@@ -1,12 +1,26 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="12">
-      <el-col :span="4" v-for="(item, index) in filesList" :key="index" style="padding: 10px;">
+    <!-- <el-row :gutter="12">
+      <el-col
+        :span="4"
+        v-for="(item, index) in filesList"
+        :key="index"
+        style="padding: 10px;"
+      >
         <el-card shadow="hover">
-          <a :href="apiurl+item.fileurl">{{item.name}}</a>
+          <a :href="apiurl + item.fileurl">{{ item.name }}</a>
         </el-card>
       </el-col>
-    </el-row>
+    </el-row> -->
+    <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
+      <li v-for="(ele, i) in filesList" :key="i" class="flex align-center justify-between infinite-list-item">
+        <div class="left">
+          <span>{{i + 1}}.</span>
+          <i class="el-icon-document icon"></i>{{ele.name}}
+        </div>
+        <a class="right" :href="apiurl + ele.fileurl">下载</a>
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -29,8 +43,8 @@ export default {
         filetype: undefined,
         type: "1", //代表幼儿入园系列文件
         fileurl: undefined,
-        createuserid: undefined,
-      },
+        createuserid: undefined
+      }
     };
   },
   created() {
@@ -40,11 +54,36 @@ export default {
     /** 查询文件管理列表 */
     getList() {
       this.loading = true;
-      listFiles(this.queryParams).then((response) => {
+      listFiles(this.queryParams).then(response => {
         this.filesList = response.rows;
         this.loading = false;
       });
     },
-  },
+    load() {
+
+    }
+  }
 };
-</script>
+</script>
+<style lang="scss" scoped>
+.infinite-list-item {
+  padding: 15px 15px;
+  border-bottom: 1px solid #eee;
+  &:hover {
+    background: #f8f8f8;
+  }
+  .left {
+    font-size: 14px;
+    .icon {
+      margin: 0 3px 0 5px;
+    }
+  }
+  .right {
+    font-size: 12px;
+    color: #999;
+    &:hover {
+      color: rgb(64, 158, 255);
+    }
+  }
+}
+</style>