Initial commit

src/App.vue

@@ -0,0 +1,139 @@
+<script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { Grid, Link } from '@element-plus/icons-vue'
+
+const route = useRoute()
+
+const activeMenu = computed(() => route.path)
+</script>
+
+<template>
+  <el-container class="admin-shell">
+    <el-aside width="151px" class="admin-aside">
+      <el-menu class="admin-menu" :default-active="activeMenu" router>
+        
+        <el-sub-menu index="coach">
+          <template #title>
+            <el-icon><Grid /></el-icon>
+            <span>教练管理</span>
+          </template>
+          <el-menu-item index="/coach">
+            <el-icon><Link /></el-icon>
+            <span>教练列表</span>
+          </el-menu-item>
+        </el-sub-menu>
+
+        <el-sub-menu index="member">
+          <template #title>
+            <el-icon><Grid /></el-icon>
+            <span>会员管理</span>
+          </template>
+          <el-menu-item index="/member">
+            <el-icon><Link /></el-icon>
+            <span>会员列表</span>
+          </el-menu-item>
+        </el-sub-menu>
+
+        <el-sub-menu index="course">
+          <template #title>
+            <el-icon><Grid /></el-icon>
+            <span>课程管理</span>
+          </template>
+          <el-menu-item index="/course">
+            <el-icon><Link /></el-icon>
+            <span>课程列表</span>
+          </el-menu-item>
+        </el-sub-menu>
+      </el-menu>
+    </el-aside>
+
+    <el-container class="admin-main">
+      <el-header class="admin-header">山东石油化工学院史泰龙健身管理系统 V1.0</el-header>
+      <el-main class="admin-content">
+        <router-view />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<style scoped>
+.admin-shell {
+  width: 100%;
+  min-height: 100vh;
+  background: #ffffff;
+}
+
+.admin-aside {
+  min-height: 100vh;
+  background: linear-gradient(to bottom, #ffffff 0, #ffffff 220px, #edae37 220px);
+  border-right: 1px solid #dcdfe6;
+}
+
+.admin-menu {
+  width: 151px;
+  border-right: 0;
+  background: transparent;
+}
+
+.admin-menu :deep(.el-sub-menu__title) {
+  height: 42px;
+  padding-left: 10px !important;
+  color: #303133;
+  font-size: 12px;
+  line-height: 42px;
+  background: transparent;
+}
+
+.admin-menu :deep(.el-menu-item) {
+  height: 42px;
+  padding-left: 27px !important;
+  color: #303133;
+  font-size: 12px;
+  line-height: 42px;
+  background: transparent;
+}
+
+.admin-menu :deep(.el-menu-item.is-active) {
+  color: #303133;
+  background: transparent;
+}
+
+.admin-menu :deep(.el-icon) {
+  width: 14px;
+  margin-right: 8px;
+  font-size: 13px;
+  color: #303133;
+}
+
+.admin-menu :deep(.el-sub-menu__icon-arrow) {
+  right: 16px;
+  margin-top: -5px;
+  font-size: 10px;
+}
+
+.admin-main {
+  min-width: 0;
+}
+
+.admin-header {
+  height: 54px;
+  padding: 0 0 0 15px;
+  color: #000000;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 54px;
+  background: #f1c477;
+}
+
+.admin-content {
+  padding: 16px 0 0 14px;
+  color: #000000;
+  font-size: 14px;
+  background: #ffffff;
+}
+
+.el-main{
+  display: flex;
+}
+</style>