优化了欢迎页面与菜单

src/layouts/index.vue

@@ -72,7 +72,7 @@ const handleClose = (key, keyPath) => {
             <el-icon>
               <Setting />
             </el-icon>
-            <span>图书借阅</span>
+            <span>图书管理</span>
           </template>
           <el-menu-item index="/bookborrowing/book">
             <el-icon>
@@ -84,7 +84,7 @@ const handleClose = (key, keyPath) => {
       </el-menu>
     </el-aside>
     <el-container class="app-cent-container">
-      <el-header class="app-header">Header</el-header>
+      <el-header class="app-header">智能阅读平台</el-header>
       <el-main class="app-content">
         <div class="content-wrapper">
           <router-view></router-view>

src/views/home/index.vue

@@ -1,20 +1,123 @@
 <template>
   <div class="home">
-    <h1>欢迎使用管理系统</h1>
-    <p>这是home</p>
+    <h1 class="welcome-title">欢迎使用管理系统</h1>
+    <p class="welcome-subtitle">智能阅读平台 - 欢迎您</p>
+    <div class="features">
+      <el-row :gutter="20">
+        <el-col :span="8" v-for="(feature, index) in features" :key="index">
+          <div class="feature-card" :class="`feature-card-${index + 1}`" :style="{animationDelay: index * 0.2 + 's'}">
+            <el-icon name="feature.icon"></el-icon>
+            <h3>{{ feature.title }}</h3>
+            <p>{{ feature.description }}</p>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script setup>
-// 这里可以添加首页需要的业务逻辑
+import { ref, onMounted } from 'vue';
+
+const features = ref([
+  {
+    icon: 'document',
+    title: '系统管理',
+    description: '管理系统的用户、角色与权限'
+  },
+  {
+    icon: 'user',
+    title: '教务管理',
+    description: '组织班级信息与学生信息'
+  },
+  {
+    icon: 'menu',
+    title: '图书管理',
+    description: '构建高效图书信息系统'
+  }
+]);
 </script>
 
 <style scoped>
 .home {
-  padding: 20px;
-  font-size: 16px;
+  padding: 40px;
+  text-align: center;
+  background-color: #f9f9f9;
 }
-h1 {
+
+.welcome-title {
+  font-size: 28px;
   color: #1890ff;
+  margin-bottom: 10px;
+  animation: fadeInDown 1s ease-out;
+}
+
+.welcome-subtitle {
+  font-size: 18px;
+  color: #666;
+  margin-bottom: 40px;
+  animation: fadeInUp 1s ease-out;
+  animation-delay: 0.5s;
+}
+
+.features {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.feature-card {
+  border-radius: 8px;
+  padding: 20px;
+  transition: transform 0.3s, box-shadow 0.3s;
+  animation: fadeInUp 1s ease-out;
+  text-align: left;
+}
+
+.feature-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+
+.feature-card-1 {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: white;
+}
+
+.feature-card-2 {
+  background: linear-gradient(135deg, #2563eb, #3b82f6);
+  color: white;
+}
+
+.feature-card-3 {
+  background: linear-gradient(135deg, #ec008c, #fc6767);
+  color: white;
+}
+
+.feature-card h3,
+.feature-card p {
+  color: inherit;
+  transition: color 0.3s;
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 </style>