ADD: 图片管理布局

src/api/image.js

+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

src/pages/image/list.vue

 <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