From f606dd899d30c748c8deeea544a75589b9c883ce Mon Sep 17 00:00:00 2001
From: kadycui <kadycui@qq.com>
Date: Tue, 5 Sep 2023 16:27:08 +0800
Subject: [PATCH] =?UTF-8?q?ADD:=20=E5=9B=BE=E7=89=87=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/image.js         |  6 ++++
 src/pages/image/list.vue | 72 +++++++++++++++++++++++++++++++++++++---
 2 files changed, 74 insertions(+), 4 deletions(-)
 create mode 100644 src/api/image.js

diff --git a/src/api/image.js b/src/api/image.js
new file mode 100644
index 0000000..6968d1a
--- /dev/null
+++ b/src/api/image.js
@@ -0,0 +1,6 @@
+import axios from '@/axios'
+
+
+export function getImageList(id, page=1){
+    return axios.get(`/admin/image_class/${id}/image/${page}`)
+}
\ No newline at end of file
diff --git a/src/pages/image/list.vue b/src/pages/image/list.vue
index e83be14..c433d80 100644
--- a/src/pages/image/list.vue
+++ b/src/pages/image/list.vue
@@ -1,5 +1,69 @@
 <template>
-    <div>
-        图库列表
-    </div>
-</template>
\ No newline at end of file
+    <el-container class="bg-white rounded" :style="{height: (h + 'px')}">
+        <el-header class="image-header">Header</el-header>
+        <el-container>
+            <el-aside width="200px" class="image-aside">
+                <div class="top">
+                    <div v-for="i in 100" :key="i">{{ i }}</div>
+                </div>
+                <div class="bottom">
+                    分页区域
+                </div>
+
+            </el-aside>
+            <el-main class="image-main">
+                <div class="top">
+                    <div v-for="i in 100" :key="i">{{ i }}</div>
+                </div>
+                <div class="bottom">
+                    分页区域
+                </div>
+            </el-main>
+        </el-container>
+    </el-container>
+</template>
+
+
+<script setup>
+
+const windowHeight = window.innerHeight || document.body.clientHeight
+const h = windowHeight - 64 - 44 -40
+
+
+</script>
+
+<style scoped>
+.image-header{
+    border-bottom: 1px solid #eeeeee;
+    @apply flex items-center;
+}
+
+.image-aside{
+    border-right: #eeeeee solid 1px;
+    position: relative;
+}
+
+.image-main{
+    position: relative;
+}
+
+.image-aside .top, .image-main .top{
+    position: absolute;
+    top: 0;
+    right: 0;
+    left:0;
+    bottom: 50px;
+    overflow-y: auto;
+}
+
+.image-aside .bottom, .image-main .bottom{
+    position: absolute;
+    bottom:0;
+    height: 50px;
+    left: 0;
+    right: 0;
+    @apply flex items-center justify-center;
+
+}
+
+</style>
\ No newline at end of file
-- 
GitLab