🚧

src/router/index.ts

@@ -82,7 +82,30 @@ const router = createRouter({
                 {
                     path: '/system-manage',
                     name: '后台管理',
+                    redirect: '/system-manage/system-home',
                     component: () => import('@/views/system-manage/index.vue'),
+                    children: [
+                        {
+                            path: '/system-manage/system-home',
+                            name: '后台首页',
+                            component: () => import('@/views/system-manage/system-home.vue'),
+                        },
+                        {
+                            path: '/system-manage/hospitals',
+                            name: '合作医院',
+                            component: () => import('@/views/system-manage/hospitals.vue'),
+                        },
+                        {
+                            path: '/system-manage/hospitals-map',
+                            name: '合作医院地图',
+                            component: () => import('@/views/system-manage/hospitals-map.vue'),
+                        },
+                        {
+                            path: '/system-manage/user-list',
+                            name: '用户列表',
+                            component: () => import('@/views/system-manage/user-list.vue'),
+                        }
+                    ]
                 },
                 {
                     path: '/logs-manage',

src/views/system-manage/hospitals-map.vue

@@ -0,0 +1,14 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>

src/views/system-manage/hospitals.vue

@@ -0,0 +1,14 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>

src/views/system-manage/index.vue

@@ -1,14 +1,37 @@
 <template>
-    <div>
+    <div class="ststem-manage-page">
-        后台管理
+        <div class="header-box">
+            <PageTabs ref="pageTabsRef" />
+        </div>
+        <div class="main-box">
+            <RouterView />
+        </div>
     </div>
 </template>
 
 <script lang='ts' setup>
 import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import type { MenuItem } from '@/utils/public-interface'
+import PageTabs from '@/components/page-tabs.vue'
+
+const pageTabsRef = ref()
 
 </script>
 
 <style lang='scss' scoped>
-
+.ststem-manage-page {
+    width: 100%;
+    height: 100%;
+    .header-box {
+        width: 100%;
+        height: 50px;
+    }
+    .main-box {
+        width: 100%;
+        height: calc(100% - 60px);
+        margin-top: 10px;
+        background: white;
+        padding: 20px;
+    }
+}
 </style>

src/views/system-manage/system-home.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="system-home-page">
+        <div class="left-box"></div>
+        <div class="right-box">
+            <div class="system-log-box">
+                <div class="title-box">
+                    <span class="title"><el-icon><List /></el-icon>系统日志</span>
+                    <span class="more">更多</span>
+                </div>
+                <div class="system-log">
+                    <SystemLogs />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+import SystemLogs from "@/components/system-logs.vue";
+
+</script>
+
+<style lang='scss' scoped>
+.system-home-page {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    .left-box {
+        width: 670px;
+        height: 100%;
+    }
+    .right-box {
+        width: calc(100% - 700px);
+        height: 100%;
+        .system-log-box {
+            width: 100%;
+            height: 220px;
+            padding: 20px;
+            border: 1px solid $border-color;
+            border-radius: 12px;
+            .title-box {
+                width: 100%;
+                height: 40px;
+                padding-bottom: 10px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                border-bottom: 1px solid $border1-color;
+                .title {
+                    font-size: 20px;
+                    color: $main-color;
+                    font-weight: 600;
+                    display: flex;
+                    align-items: center;
+                    .el-icon {
+                        font-size: 32px;
+                        margin-right: 10px;
+                    }
+                }
+                .more {
+                    cursor: pointer;
+                    font-size: 16px;
+                    color: $text2-color;
+                }
+            }
+            .system-log {
+                width: 100%;
+                height: calc(100% - 50px);
+                padding: 0 15px;
+                margin-top: 10px;
+                overflow-x: hidden;
+                overflow-y: auto;
+                :deep(.el-timeline) {
+                    .el-timeline-item__wrapper {
+                        display: flex;
+                        justify-content: space-between;
+                    }
+                }
+            }
+        }
+        
+        
+    }
+}
+</style>

src/views/system-manage/user-list.vue

@@ -0,0 +1,14 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script lang='ts' setup>
+import { onMounted, reactive, ref, toRefs, watch } from 'vue'
+
+</script>
+
+<style lang='scss' scoped>
+
+</style>