From 779948ec47fe691f6006a607d8ef4ead27b1b4ce Mon Sep 17 00:00:00 2001
From: Shu Guang <61069967+shuguangnet@users.noreply.github.com>
Date: Sun, 13 Apr 2025 19:58:22 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E5=9B=BE=E4=B9=A6?=
 =?UTF-8?q?=E6=8E=A8=E8=8D=90=E7=B3=BB=E7=BB=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Admin/LoginAdmin.vue           |  93 ++--
 src/components/BookManage/LoginBookManage.vue |  15 +-
 src/components/BookManage/ReturnBook.vue      |  20 +-
 src/components/Home/Home.vue                  |   4 +-
 src/components/Home/HomeAdmin.vue             | 267 ++++++++---
 src/components/Home/HomeManage.vue            | 289 ++++++++----
 src/components/User/Comment.vue               | 283 +++++++----
 src/components/User/Information.vue           | 439 +++++++++++-------
 src/components/User/Notice.vue                | 309 ++++++------
 src/components/User/Rule.vue                  | 257 ++++++----
 10 files changed, 1257 insertions(+), 719 deletions(-)

diff --git a/src/components/Admin/LoginAdmin.vue b/src/components/Admin/LoginAdmin.vue
index ba4f586..093ccbd 100644
--- a/src/components/Admin/LoginAdmin.vue
+++ b/src/components/Admin/LoginAdmin.vue
@@ -4,74 +4,75 @@
     <div class="login_box">
       <!-- 头像区域 -->
       <div class="avatar_box">
-        <img src="https://xxx.xiaobaitiao.icu/img/icu/202312211243634.jpg" alt=""/>
+        <img
+          src="https://minio-img.933999.xyz/images-lankong/lankong/2025/04/13/67fba08cd075b.jpeg"
+          alt=""
+        />
       </div>
       <!-- 登录表单区域 -->
       <el-form
-          ref="loginFormRef"
-          :model="loginForm"
-          :rules="loginFormRules"
-          label-width="0px"
-          class="login_form"
+        ref="loginFormRef"
+        :model="loginForm"
+        :rules="loginFormRules"
+        label-width="0px"
+        class="login_form"
       >
         <!-- 用户名 -->
         <el-form-item prop="username">
           <el-input
-              v-model.trim="loginForm.username"
-              prefix-icon="iconfont icon-gerenxinxi"
+            v-model.trim="loginForm.username"
+            prefix-icon="iconfont icon-gerenxinxi"
           ></el-input>
         </el-form-item>
         <!-- 密码 -->
         <el-form-item prop="password">
           <el-input
-              v-model="loginForm.password"
-              prefix-icon="iconfont icon-tianchongxing-"
-              type="password"
-              @keyup.enter.native="login"
-              :show-password="true"
+            v-model="loginForm.password"
+            prefix-icon="iconfont icon-tianchongxing-"
+            type="password"
+            @keyup.enter.native="login"
+            :show-password="true"
           ></el-input>
         </el-form-item>
         <!-- 按钮区域 -->
         <el-form-item class="btns">
-          <el-button type="primary" @click="login" :loading="loginLoading">登录</el-button>
+          <el-button type="primary" @click="login" :loading="loginLoading"
+            >登录</el-button
+          >
           <el-button type="info" @click="resetLoginForm">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
     <vue-particles
-        class="login-bg"
-        color="#39AFFD"
-        :particleOpacity="0.7"
-        :particlesNumber="100"
-        shapeType="circle"
-        :particleSize="4"
-        linesColor="#8DD1FE"
-        :linesWidth="1"
-        :lineLinked="true"
-        :lineOpacity="0.4"
-        :linesDistance="150"
-        :moveSpeed="3"
-        :hoverEffect="true"
-        hoverMode="grab"
-        :clickEffect="true"
-        clickMode="push"
+      class="login-bg"
+      color="#39AFFD"
+      :particleOpacity="0.7"
+      :particlesNumber="100"
+      shapeType="circle"
+      :particleSize="4"
+      linesColor="#8DD1FE"
+      :linesWidth="1"
+      :lineLinked="true"
+      :lineOpacity="0.4"
+      :linesDistance="150"
+      :moveSpeed="3"
+      :hoverEffect="true"
+      hoverMode="grab"
+      :clickEffect="true"
+      clickMode="push"
     >
     </vue-particles>
     <div class="footer">
-       <span style="font-weight: bold;color:white;margin-bottom: 10px">
+      <span style="font-weight: bold; color: white; margin-bottom: 10px">
         登录页面切换
       </span>
       <span><i class="iconfont icon-haoyou" @click="goUser"></i></span>
-
-    </div>
-    <div class="footer2">
-
     </div>
+    <div class="footer2"></div>
   </div>
 </template>
 
 <script>
-
 export default {
   data() {
     return {
@@ -83,7 +84,7 @@ export default {
       //登录表单规则的验证对象
       loginFormRules: {
         username: [
-          {required: true, message: "用户名不能为空", trigger: "blur"},
+          { required: true, message: "用户名不能为空", trigger: "blur" },
           {
             min: 3,
             max: 20,
@@ -92,7 +93,7 @@ export default {
           },
         ],
         password: [
-          {required: true, message: "密码不能为空", trigger: "blur"},
+          { required: true, message: "密码不能为空", trigger: "blur" },
           {
             min: 6,
             max: 15,
@@ -101,7 +102,7 @@ export default {
           },
         ],
       },
-      loginLoading: false
+      loginLoading: false,
     };
   },
   methods: {
@@ -119,13 +120,10 @@ export default {
         const username = this.loginForm.username;
         const password = this.loginForm.password;
         //向数据库发送axios请求，如果登录成功，就跳转
-        const {data: res} = await this.$http.post(
-            "admin/login",
-            {
-              username,
-              password
-            }
-        );
+        const { data: res } = await this.$http.post("admin/login", {
+          username,
+          password,
+        });
         if (res.status !== 200) {
           this.loginLoading = false;
           return this.$message.error(res.msg);
@@ -159,7 +157,8 @@ export default {
 
 .login_container {
   // background-color: #2b4b6b;
-  background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg) no-repeat 0px 0px;
+  background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg)
+    no-repeat 0px 0px;
   background-size: cover;
   height: 100%;
 }
diff --git a/src/components/BookManage/LoginBookManage.vue b/src/components/BookManage/LoginBookManage.vue
index 9fcc185..5f885c2 100644
--- a/src/components/BookManage/LoginBookManage.vue
+++ b/src/components/BookManage/LoginBookManage.vue
@@ -5,7 +5,7 @@
       <!-- 头像区域 -->
       <div class="avatar_box">
         <img
-          src="https://xxx.xiaobaitiao.icu/img/icu/202312211243634.jpg"
+          src="https://minio-img.933999.xyz/images-lankong/lankong/2025/04/13/67fba08cd075b.jpeg"
           alt=""
         />
       </div>
@@ -63,22 +63,17 @@
     >
     </vue-particles>
     <div class="footer">
-       <span style="font-weight: bold;color:white;">
-        登录页面切换
-      </span>
+      <span style="font-weight: bold; color: white"> 登录页面切换 </span>
       <span><i class="iconfont icon-haoyou" @click="goUser"></i></span>
       <span>
         <i class="iconfont icon-guanliyuanrenzheng" @click="goAdmin"></i>
       </span>
     </div>
-    <div class="footer2">
-      
-    </div>
+    <div class="footer2"></div>
   </div>
 </template>
 
 <script>
-
 export default {
   data() {
     return {
@@ -169,8 +164,8 @@ export default {
 
 .login_container {
   // background-color: #2b4b6b;
-  background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg) no-repeat
-    0px 0px;
+  background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg)
+    no-repeat 0px 0px;
   background-size: cover;
   height: 100%;
 }
diff --git a/src/components/BookManage/ReturnBook.vue b/src/components/BookManage/ReturnBook.vue
index e312019..b62ac6c 100644
--- a/src/components/BookManage/ReturnBook.vue
+++ b/src/components/BookManage/ReturnBook.vue
@@ -28,20 +28,18 @@ export default {
         "bookadmin/query_book/" + this.bookNumber
       );
       if (res.status !== 200) {
-        return this.$message.error(
-          {
-            message:res.msg,
-            duration:1000
-          }
-        );
+        return this.$message.error({
+          message: res.msg,
+          duration: 1000,
+        });
       }
       // console.log(res);
       // this.$message.success(res.msg);
       this.$router.push({
-        name:"bookexpire",
-        query:{
-          bookNumber:this.bookNumber
-        }
+        name: "bookexpire",
+        query: {
+          bookNumber: this.bookNumber,
+        },
       });
     },
   },
@@ -83,4 +81,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Home/Home.vue b/src/components/Home/Home.vue
index b67ffa7..89519c1 100644
--- a/src/components/Home/Home.vue
+++ b/src/components/Home/Home.vue
@@ -3,7 +3,7 @@
     <el-header>
       <div class="logo-container">
         <img src="" alt="" class="logo" />
-        <span class="title">图书管理系统</span>
+        <span class="title">图书推荐系统</span>
         <span class="subtitle">借阅者界面</span>
       </div>
       <div class="user-info">
@@ -43,7 +43,7 @@
         >
           <div class="menu-header">
             <i class="el-icon-reading menu-icon"></i>
-            <span v-if="!isCollapse" class="menu-title">图书管理系统</span>
+            <span v-if="!isCollapse" class="menu-title">图书推荐系统</span>
           </div>
 
           <el-menu-item index="index" @click="saveNavState('index')">
diff --git a/src/components/Home/HomeAdmin.vue b/src/components/Home/HomeAdmin.vue
index 2597715..489c8db 100644
--- a/src/components/Home/HomeAdmin.vue
+++ b/src/components/Home/HomeAdmin.vue
@@ -1,44 +1,54 @@
 <template>
   <el-container class="home-container">
-    <!-- 头部区域 -->
     <el-header>
-      <div>
-        <!-- <img src="../assets/heima.png" alt="" /> -->
-        <span>欢迎登录图书管理系统</span>
-        <span style="color: #ccc; font-size: 16px">系统管理人员页面</span>
+      <div class="logo-container">
+        <!-- <img src="../assets/logo.png" alt="" class="logo" /> -->
+        <span class="title">图书推荐系统</span>
+        <span class="subtitle">系统管理人员页面</span>
       </div>
-      <div>
-       
-        <div>
-          <el-avatar
-            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
-            :size="35"
-            style="margin-right: 10px"
-          ></el-avatar>
-        </div>
-        <div class="user">管理员:{{ this.admin.adminName }}</div>
-        <el-button type="info" @click="logout">退出</el-button>
+      <div class="user-info">
+        <el-avatar
+          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+          :size="40"
+          class="avatar"
+        ></el-avatar>
+        <div class="user">管理员：{{ this.admin.adminName }}</div>
+        <el-button type="primary" size="medium" @click="logout" plain
+          >退出</el-button
+        >
       </div>
     </el-header>
     <!-- 页面主体区域 -->
     <el-container>
       <!-- 侧边栏 -->
-      <el-aside :width="isCollapse ? '64px' : '200px'">
-        <div class="toggle-button" @click="toggleCollapse">|||</div>
+      <el-aside
+        :width="isCollapse ? '64px' : '240px'"
+        class="sidebar-container"
+      >
+        <div class="toggle-button" @click="toggleCollapse">
+          <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
+        </div>
+
         <!-- 侧边栏菜单区域 -->
         <el-menu
           :default-active="activePath"
-          class="el-menu-vertical-demo"
-          background-color="#fff"
-          text-color="black"
-          active-text-color="#ffd04b"
+          class="el-menu-vertical"
+          background-color="#001529"
+          text-color="rgba(255,255,255,0.65)"
+          active-text-color="#fff"
           :router="true"
           :collapse="isCollapse"
-          :collapse-transition="false"
+          :collapse-transition="true"
+          unique-opened
         >
+          <div class="menu-header">
+            <i class="el-icon-s-tools menu-icon"></i>
+            <span v-if="!isCollapse" class="menu-title">系统管理</span>
+          </div>
+
           <el-menu-item index="bookmanage" @click="saveNavState('bookmanage')">
             <i class="el-icon-notebook-1"></i>
-            <span slo="title">书籍管理</span>
+            <span slot="title">书籍管理</span>
           </el-menu-item>
           <el-menu-item index="booktype" @click="saveNavState('booktype')">
             <i class="el-icon-notebook-2"></i>
@@ -80,27 +90,24 @@
             <span slot="title">系统管理</span>
           </el-menu-item>
           <el-menu-item
-              index="intelligent_analysis"
-              @click="saveNavState('intelligent_analysis')"
+            index="intelligent_analysis"
+            @click="saveNavState('intelligent_analysis')"
           >
             <i class="el-icon-data-line"></i>
             <span slot="title">智能分析</span>
           </el-menu-item>
         </el-menu>
       </el-aside>
-      <!-- 右侧内容主体 -->
+
       <el-main>
-        <!-- 路由占位符 -->
         <router-view></router-view>
-        <div class="footer">
- 
-        </div>
+        <div class="footer"></div>
       </el-main>
     </el-container>
   </el-container>
 </template>
 
-  <script>
+<script>
 export default {
   data() {
     return {
@@ -160,68 +167,186 @@ export default {
 };
 </script>
 
-  <style lang="less" scoped>
-.footer {
-  position: fixed;
-  bottom: 0px;
-  left: 40%;
-  color:#ccc;
-  a {
-    color:#ccc;
-  }
-}
+<style lang="less" scoped>
 .home-container {
-  height: 100%;
+  height: 100vh;
+  background-color: #f0f2f5;
 }
+
 .el-header {
-  background-color: rgb(34, 34, 34);
+  background: linear-gradient(90deg, #1890ff 0%, #36cfc9 100%);
   display: flex;
   justify-content: space-between;
-  padding-left: 0px;
   align-items: center;
-  color: #fff;
-  font-size: 20px;
-  border-radius: 10px;
-  > div {
+  padding: 0 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+  .logo-container {
     display: flex;
     align-items: center;
-    span {
+
+    .logo {
+      height: 40px;
+      margin-right: 15px;
+    }
+
+    .title {
+      font-size: 22px;
+      font-weight: 600;
+      color: #fff;
+    }
+
+    .subtitle {
       margin-left: 15px;
+      font-size: 16px;
+      color: rgba(255, 255, 255, 0.85);
+    }
+  }
+
+  .user-info {
+    display: flex;
+    align-items: center;
+
+    .avatar {
+      margin-right: 12px;
+      border: 2px solid rgba(255, 255, 255, 0.3);
+    }
+
+    .user {
+      margin-right: 20px;
+      color: #fff;
+      font-size: 16px;
     }
   }
 }
+
 .el-aside {
   background-color: #fff;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
+
+  .toggle-button {
+    background: #002140;
+    color: #fff;
+    text-align: center;
+    line-height: 32px;
+    height: 32px;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+      background: #002849;
+    }
+
+    i {
+      font-size: 16px;
+    }
+  }
+
   .el-menu {
     border-right: none;
   }
+
+  .el-menu-item {
+    margin: 4px 0;
+
+    &:hover {
+      background-color: #e6f7ff !important;
+      color: #1890ff !important;
+    }
+
+    &.is-active {
+      background-color: #1890ff !important;
+      color: #fff !important;
+      border-right: 3px solid #fff;
+    }
+  }
 }
+
 .el-main {
-  background-color: #eaedf1;
+  background-color: #f0f2f5;
   padding: 20px;
+
+  .footer {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    color: #999;
+    font-size: 14px;
+  }
 }
+
 .iconfont {
-  margin-right: 10px;
+  margin-right: 12px;
+  font-size: 18px;
 }
-.toggle-button {
-  background-color: #4a5064;
-  font-size: 10px;
-  line-height: 24px;
-  color: #fff;
-  text-align: center;
-  //设置文字之间的间距
-  letter-spacing: 0.2em;
-  cursor: pointer;
+
+.sidebar-container {
+  transition: width 0.3s;
+  background-color: #001529;
+  overflow: hidden;
+
+  .menu-header {
+    height: 56px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    color: #fff;
+
+    .menu-icon {
+      font-size: 20px;
+      margin-right: 10px;
+    }
+
+    .menu-title {
+      font-size: 16px;
+      font-weight: 600;
+      white-space: nowrap;
+    }
+  }
+
+  .el-menu {
+    border: none;
+
+    &:not(.el-menu--collapse) {
+      width: 240px;
+    }
+  }
+
+  .el-menu-item {
+    height: 50px;
+    line-height: 50px;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.08) !important;
+      color: #fff !important;
+    }
+
+    &.is-active {
+      background: #1890ff !important;
+      color: #fff !important;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 3px;
+        background: #fff;
+      }
+    }
+
+    i {
+      color: inherit;
+      font-size: 18px;
+      margin-right: 10px;
+    }
+  }
 }
-.user {
-  margin-right: 15px;
-  color: #ccc;
-  font-size: 16px;
+
+.el-main {
+  padding: 20px;
+  background: #f0f2f5;
 }
-.el-menu-item:hover {
-  background-color: rgb(51, 122, 183) !important;
-}
-// .el-menu-item{
-//   color:rgb(135, 206, 235) !important;
-// }
 </style>
diff --git a/src/components/Home/HomeManage.vue b/src/components/Home/HomeManage.vue
index 883dba2..d527fa8 100644
--- a/src/components/Home/HomeManage.vue
+++ b/src/components/Home/HomeManage.vue
@@ -1,44 +1,54 @@
 <template>
   <el-container class="home-container">
-    <!-- 头部区域 -->
     <el-header>
-      <div>
-        <!-- <img src="../assets/heima.png" alt="" /> -->
-        <span>欢迎登录图书管理系统</span>
-        <span style="color: #ccc; font-size: 16px">图书馆管理人员页面</span>
+      <div class="logo-container">
+        <!-- <img src="../assets/logo.png" alt="" class="logo" /> -->
+        <span class="title">图书推荐系统</span>
+        <span class="subtitle">图书管理员页面</span>
       </div>
-      <div>
-        
-        <div>
-          <el-avatar
-            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
-            :size="35"
-            style="margin-right: 10px"
-          ></el-avatar>
-        </div>
-        <div class="user">管理员:{{ this.bookAdmin.bookAdminName }}</div>
-        <el-button type="info" @click="logout">退出</el-button>
+      <div class="user-info">
+        <el-avatar
+          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+          :size="40"
+          class="avatar"
+        ></el-avatar>
+        <div class="user">管理员：{{ this.bookAdmin.bookAdminName }}</div>
+        <el-button type="primary" size="medium" @click="logout" plain
+          >退出</el-button
+        >
       </div>
     </el-header>
     <!-- 页面主体区域 -->
     <el-container>
       <!-- 侧边栏 -->
-      <el-aside :width="isCollapse ? '64px' : '200px'">
-        <div class="toggle-button" @click="toggleCollapse">|||</div>
+      <el-aside
+        :width="isCollapse ? '64px' : '240px'"
+        class="sidebar-container"
+      >
+        <div class="toggle-button" @click="toggleCollapse">
+          <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
+        </div>
+
         <!-- 侧边栏菜单区域 -->
         <el-menu
           :default-active="activePath"
-          class="el-menu-vertical-demo"
-          background-color="#fff"
-          text-color="black"
-          active-text-color="#ffd04b"
+          class="el-menu-vertical"
+          background-color="#001529"
+          text-color="rgba(255,255,255,0.65)"
+          active-text-color="#fff"
           :router="true"
           :collapse="isCollapse"
-          :collapse-transition="false"
+          :collapse-transition="true"
+          unique-opened
         >
+          <div class="menu-header">
+            <i class="el-icon-collection menu-icon"></i>
+            <span v-if="!isCollapse" class="menu-title">图书管理</span>
+          </div>
+
           <el-menu-item index="borrowbook" @click="saveNavState('borrowbook')">
             <i class="el-icon-collection"></i>
-            <span slo="title">借阅图书</span>
+            <span slot="title">借阅图书</span>
           </el-menu-item>
           <el-menu-item index="returnbook" @click="saveNavState('returnbook')">
             <i class="el-icon-collection"></i>
@@ -67,19 +77,16 @@
           </el-menu-item>
         </el-menu>
       </el-aside>
-      <!-- 右侧内容主体 -->
+
       <el-main>
-        <!-- 路由占位符 -->
         <router-view></router-view>
-        <div class="footer">
- 
-        </div>
+        <div class="footer"></div>
       </el-main>
     </el-container>
   </el-container>
 </template>
 
-  <script>
+<script>
 export default {
   data() {
     return {
@@ -96,16 +103,16 @@ export default {
       isCollapse: false,
       //被激活的链接地址
       activePath: "",
-      bookAdmin:{
-        bookAdminId:Number,
-        status:Number,
-        username:"",
-        password:"",
-        bookAdminName:"",
-        email:"",
-        createTime:"",
-        updateTime:""
-      }
+      bookAdmin: {
+        bookAdminId: Number,
+        status: Number,
+        username: "",
+        password: "",
+        bookAdminName: "",
+        email: "",
+        createTime: "",
+        updateTime: "",
+      },
     };
   },
   async created() {
@@ -116,7 +123,10 @@ export default {
     const stringId = window.sessionStorage.getItem("bookAdminId");
     const id = parseInt(stringId);
     this.bookAdmin.bookAdminId = id;
-    const { data: res } = await this.$http.post("bookadmin/getData", this.bookAdmin);
+    const { data: res } = await this.$http.post(
+      "bookadmin/getData",
+      this.bookAdmin
+    );
     // console.log(res);
     this.bookAdmin = res.data;
   },
@@ -141,69 +151,186 @@ export default {
 };
 </script>
 
-  <style lang="less" scoped>
-
-  .footer {
-  position: fixed;
-  bottom: 0px;
-  left: 40%;
-  color:#ccc;
-  a {
-    color:#ccc;
-  }
-}
+<style lang="less" scoped>
 .home-container {
-  height: 100%;
+  height: 100vh;
+  background-color: #f0f2f5;
 }
+
 .el-header {
-  background-color: rgb(34, 34, 34);
+  background: linear-gradient(90deg, #1890ff 0%, #36cfc9 100%);
   display: flex;
   justify-content: space-between;
-  padding-left: 0px;
   align-items: center;
-  color: #fff;
-  font-size: 20px;
-  border-radius: 10px;
-  > div {
+  padding: 0 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+  .logo-container {
     display: flex;
     align-items: center;
-    span {
+
+    .logo {
+      height: 40px;
+      margin-right: 15px;
+    }
+
+    .title {
+      font-size: 22px;
+      font-weight: 600;
+      color: #fff;
+    }
+
+    .subtitle {
       margin-left: 15px;
+      font-size: 16px;
+      color: rgba(255, 255, 255, 0.85);
+    }
+  }
+
+  .user-info {
+    display: flex;
+    align-items: center;
+
+    .avatar {
+      margin-right: 12px;
+      border: 2px solid rgba(255, 255, 255, 0.3);
+    }
+
+    .user {
+      margin-right: 20px;
+      color: #fff;
+      font-size: 16px;
     }
   }
 }
+
 .el-aside {
   background-color: #fff;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
+
+  .toggle-button {
+    background: #002140;
+    color: #fff;
+    text-align: center;
+    line-height: 32px;
+    height: 32px;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+      background: #002849;
+    }
+
+    i {
+      font-size: 16px;
+    }
+  }
+
   .el-menu {
     border-right: none;
   }
+
+  .el-menu-item {
+    margin: 4px 0;
+
+    &:hover {
+      background-color: #e6f7ff !important;
+      color: #1890ff !important;
+    }
+
+    &.is-active {
+      background-color: #1890ff !important;
+      color: #fff !important;
+      border-right: 3px solid #fff;
+    }
+  }
 }
+
 .el-main {
-  background-color: #eaedf1;
+  background-color: #f0f2f5;
   padding: 20px;
+
+  .footer {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    color: #999;
+    font-size: 14px;
+  }
 }
+
 .iconfont {
-  margin-right: 10px;
+  margin-right: 12px;
+  font-size: 18px;
 }
-.toggle-button {
-  background-color: #4a5064;
-  font-size: 10px;
-  line-height: 24px;
-  color: #fff;
-  text-align: center;
-  //设置文字之间的间距
-  letter-spacing: 0.2em;
-  cursor: pointer;
+
+.sidebar-container {
+  transition: width 0.3s;
+  background-color: #001529;
+  overflow: hidden;
+
+  .menu-header {
+    height: 56px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    color: #fff;
+
+    .menu-icon {
+      font-size: 20px;
+      margin-right: 10px;
+    }
+
+    .menu-title {
+      font-size: 16px;
+      font-weight: 600;
+      white-space: nowrap;
+    }
+  }
+
+  .el-menu {
+    border: none;
+
+    &:not(.el-menu--collapse) {
+      width: 240px;
+    }
+  }
+
+  .el-menu-item {
+    height: 50px;
+    line-height: 50px;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.08) !important;
+      color: #fff !important;
+    }
+
+    &.is-active {
+      background: #1890ff !important;
+      color: #fff !important;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 3px;
+        background: #fff;
+      }
+    }
+
+    i {
+      color: inherit;
+      font-size: 18px;
+      margin-right: 10px;
+    }
+  }
 }
-.user {
-  margin-right: 15px;
-  color: #ccc;
-  font-size: 16px;
+
+.el-main {
+  padding: 20px;
+  background: #f0f2f5;
 }
-.el-menu-item:hover {
-  background-color: rgb(51, 122, 183) !important;
-}
-// .el-menu-item{
-//   color:rgb(135, 206, 235) !important;
-// }
 </style>
diff --git a/src/components/User/Comment.vue b/src/components/User/Comment.vue
index 947e796..a29d951 100644
--- a/src/components/User/Comment.vue
+++ b/src/components/User/Comment.vue
@@ -1,60 +1,59 @@
 <template>
-  <div class="comment_container">
-    <div class="backgroundImg">
-      <img
-        src="https://xxx.xiaobaitiao.icu/img/icu/202312211243628.jpg"
-        alt=""
-      />
-    </div>
-    <div class="barrages-drop">
-      <vue-baberrage
-        :isShow="barrageIsShow"
-        :barrageList="barrageList"
-        :maxWordCount="maxWordCount"
-        :throttleGap="throttleGap"
-        :loop="barrageLoop"
-        :boxHeight="boxHeight"
-        :boxWidth="boxWidth"
-        :messageHeight="messageHeight"
-        :lanesCount="lanesCount"
-        style="width: 1330px; height: 750px"
-      >
-      </vue-baberrage>
-      <div class="addMain">
-        <el-input
-          placeholder="请输入内容"
-          v-model.trim="input"
-          class="input-with-select"
-          @keyup.enter.native="addContent"
+  <div class="comment-container">
+    <div class="background-wrapper"></div>
+
+    <div class="content-wrapper">
+      <div class="barrage-box">
+        <vue-baberrage
+          :isShow="barrageIsShow"
+          :barrageList="barrageList"
+          :maxWordCount="50"
+          :throttleGap="2000"
+          :loop="false"
+          :boxHeight="600"
+          :messageHeight="50"
+          :lanesCount="8"
+          class="barrage-component"
         >
+        </vue-baberrage>
+      </div>
+
+      <div class="input-box">
+        <el-input
+          v-model.trim="input"
+          placeholder="发送一条友善的评论吧~"
+          maxlength="50"
+          show-word-limit
+          class="comment-input"
+        >
+          <template slot="prepend">
+            <i class="el-icon-chat-line-round"></i>
+          </template>
           <el-button
             slot="append"
-            icon="el-icon-edit"
+            type="primary"
+            :loading="sending"
             @click="addContent"
-          ></el-button>
+          >
+            发送弹幕
+          </el-button>
         </el-input>
       </div>
     </div>
   </div>
 </template>
 
-
 <script>
 import { MESSAGE_TYPE } from "vue-baberrage";
-import { nanoid, random } from "nanoid";
+import _ from "lodash";
+
 export default {
+  name: "Comment",
   data() {
     return {
-      barrageIsShow: true, //是否展示弹幕
-      messageHeight: 3, //消息高度(测试不生效)
-      barrageLoop: false, //是否循环播放
-      maxWordCount: 2, //弹幕字数(测试不生效)
-      lanesCount: 1, //固定弹幕(测试不生效)
-      boxWidth: 1600, //弹幕宽度
-      boxHeight: 200, //弹幕高度(测试不生效)
-      throttleGap: 3000, //消息间隔
+      barrageIsShow: true,
       input: "",
-      //弹幕列表，格式为数组
+      sending: false,
       barrageList: [],
       barrage: {
         id: "",
@@ -63,81 +62,179 @@ export default {
         msg: "",
         time: "",
         type: MESSAGE_TYPE.NORMAL,
-        barrageStyle: "",
+        barrageStyle: {
+          fontSize: "16px",
+          padding: "5px 10px",
+          backgroundColor: "rgba(0, 0, 0, 0.6)",
+          color: "#fff",
+          borderRadius: "4px",
+        },
       },
     };
   },
   methods: {
-   addContent:_.throttle(async function(){
-      // 先判断文本内容是否为空或者是无意义的数字，如果是提示用户信息
-      if(this.input.trim()===''||/^\d+$/.test(this.input)||/^[a-zA-Z]+$/.test(this.input)){
-        this.$message.info({
-          message: "请不要输入无意义的内容",
-          duration:1000
-        })
-        return;
-      }
-      // 文本框中内容赋值给barrage
-      this.barrage.msg = this.input;
-      //向数据库发送请求 addComment
-      const {data:res} = await this.$http.post('user/add_comment',this.barrage);
-      if(res.status !== 200){
-        return this.$message.error(res.msg)
-      }
-      //调用获取新的留言列表
-      this.getCommentList();
-      //重置内容框
-      this.input = "";
-      this.$message.success(res.msg);
-    },5000,{ trailing: false }),
+    addContent: _.throttle(
+      async function () {
+        if (
+          !this.input.trim() ||
+          /^\d+$/.test(this.input) ||
+          /^[a-zA-Z]+$/.test(this.input)
+        ) {
+          this.$message.warning("请输入有意义的评论内容");
+          return;
+        }
+
+        try {
+          this.sending = true;
+          this.barrage.msg = this.input;
+          const { data: res } = await this.$http.post(
+            "user/add_comment",
+            this.barrage
+          );
+
+          if (res.status !== 200) {
+            throw new Error(res.msg);
+          }
+
+          await this.getCommentList();
+          this.input = "";
+          this.$message.success("发送成功");
+        } catch (error) {
+          this.$message.error(error.message || "发送失败");
+        } finally {
+          this.sending = false;
+        }
+      },
+      3000,
+      { trailing: false }
+    ),
+
     async getCommentList() {
-      // 发送axios请求
-      const { data: res } = await this.$http.get("user/get_commentlist");
-      // console.log(res);
-      if (res.status !== 200) {
-        return this.$message.error(res.msg);
+      try {
+        const { data: res } = await this.$http.get("user/get_commentlist");
+        if (res.status !== 200) {
+          throw new Error(res.msg);
+        }
+        this.barrageList = [...res.data, {}];
+      } catch (error) {
+        this.$message.error("获取评论列表失败");
       }
-      this.$message.success(res.msg);
-      this.barrageList = res.data
-      //添加空对象，数组更新，组件更新
-      this.barrageList.push({})
     },
-
   },
-
-  mounted(){
+  mounted() {
     this.getCommentList();
-  }
+    // 定时刷新弹幕列表
+    setInterval(() => {
+      this.getCommentList();
+    }, 30000);
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+  },
 };
 </script>
 
 <style lang="less" scoped>
-
-.comment_container {
+.comment-container {
   position: relative;
-  height: 100%;
+  height: 100vh;
   width: 100%;
+  overflow: hidden;
 }
-.backgroundImg {
-  position: absolute;
-  height: 100%;
+
+.background-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
   width: 100%;
+  height: 100%;
+  z-index: 0;
+
   img {
-    height: 100%;
     width: 100%;
-    opacity: 0.5;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0.3;
+    filter: blur(5px);
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0.1),
+      rgba(255, 255, 255, 0.3)
+    );
   }
 }
-.barrages-drop {
+
+.content-wrapper {
   position: relative;
+  z-index: 1;
+
+  // height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
 }
-.addMain {
-  position: absolute;
-  width: 300px;
-  height: 100%;
-  background-color: pink;
-  top: 450px;
-  left: 50%;
-  transform: translate(-50%, -50%);
+
+.barrage-box {
+  width: 100vw;
+  width: 100%;
+  height: 600px;
+  margin-bottom: 30px;
+
+  .barrage-component {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+  }
+}
+
+.input-box {
+  width: 100%;
+  max-width: 600px;
+  padding: 20px;
+
+  .comment-input {
+    /deep/ .el-input-group__prepend {
+      background: #fff;
+      padding: 0 15px;
+      i {
+        font-size: 18px;
+        color: #409eff;
+      }
+    }
+
+    /deep/ .el-input__inner {
+      height: 45px;
+      font-size: 16px;
+    }
+
+    /deep/ .el-button {
+      padding: 12px 20px;
+      font-size: 16px;
+    }
+  }
+}
+
+// 响应式适配
+@media screen and (max-width: 768px) {
+  .input-box {
+    padding: 10px;
+
+    .comment-input {
+      /deep/ .el-input__inner {
+        height: 40px;
+        font-size: 14px;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/components/User/Information.vue b/src/components/User/Information.vue
index 35affc5..7a37638 100644
--- a/src/components/User/Information.vue
+++ b/src/components/User/Information.vue
@@ -1,96 +1,117 @@
 <template>
-  <div class="information_container">
-    <div class="backgroundImg">
-      <img
-        src="https://xxx.xiaobaitiao.icu/img/icu/202312211243635.jpg"
-        alt="背景图片"
-      />
-    </div>
-    <div class="information_header">
-      <p>个人信息</p>
-      <p>
-        <i class="el-icon-s-flag"></i> By reading we enrich the mind, by
-        conversation we polish it.
-      </p>
-    </div>
-    <div class="information_banner"
-    v-loading="loading"
-        element-loading-text="拼命加载中"
-    element-loading-spinner="el-icon-loading"
-    element-loading-background="rgba(0, 0, 0, 0.8)">
-      <div class="information_banner_left" >
-        <div class="banner_left_main" v-if="show">
-          <div class="number">
-            <i class="el-icon-collection-tag"></i> 借阅证编号:
-            {{ this.user.cardNumber }}
-          </div>
-          <div class="name">
-            <i class="iconfont icon-gerenxinxi"></i> 借阅证姓名:
-            {{ this.user.cardName }}
-          </div>
-          <div class="rule">
-            <i class="iconfont icon-guizeshezhi"></i> 规则编号:
-            {{ this.user.ruleNumber }}
-          </div>
-          <div class="status">
-            <i class="el-icon-refresh"></i> 状态:
-            {{ this.user.status === 1 ? "可用" : "禁用" }}
-          </div>
-        </div>
+  <div class="information-container">
+    <el-card class="info-card">
+      <div class="info-header">
+        <h2>个人信息</h2>
+        <p class="motto">
+          <i class="el-icon-reading"></i>
+          By reading we enrich the mind, by conversation we polish it.
+        </p>
       </div>
-      <div class="information_banner_right">
-        <el-button type="primary" class="changePWD" @click="showEditDialog"  v-if="show"
-          >修改密码</el-button
-        >
-      </div>
-      <el-dialog
-        title="修改密码"
-        :visible.sync="editDialogVisible"
-        width="50%"
-        @close="editDialogClosed"
+
+      <div
+        class="info-content"
+        v-loading="loading"
+        element-loading-text="加载中..."
       >
-        <el-form
-          :model="editForm"
-          ref="editFormRef"
-          :rules="editFormRules"
-          label-width="120px"
-        >
-          <el-form-item label="新密码" prop="password">
-            <el-input v-model="editForm.password" type="password" placeholder="请输入新密码"></el-input>
-          </el-form-item>
-          <el-form-item label="新密码" prop="confirmPassword">
-            <el-input v-model="editForm.confirmPassword" type="password" placeholder="请再次输入新密码"></el-input>
-          </el-form-item>
-        </el-form>
-        <span slot="footer" class="dialog-footer">
-          <el-button @click="editDialogVisible = false">取 消</el-button>
-          <el-button type="primary" @click="changePassword"
-            >确 定</el-button
-          >
-        </span>
-      </el-dialog>
-    </div>
+        <template v-if="show">
+          <el-row :gutter="20">
+            <el-col :span="24">
+              <div class="info-item">
+                <i class="el-icon-collection-tag"></i>
+                <span class="label">借阅证编号：</span>
+                <span class="value">{{ user.cardNumber }}</span>
+              </div>
+              <div class="info-item">
+                <i class="el-icon-user"></i>
+                <span class="label">借阅证姓名：</span>
+                <span class="value">{{ user.cardName }}</span>
+              </div>
+              <div class="info-item">
+                <i class="el-icon-document"></i>
+                <span class="label">规则编号：</span>
+                <span class="value">{{ user.ruleNumber }}</span>
+              </div>
+              <div class="info-item">
+                <i class="el-icon-circle-check"></i>
+                <span class="label">状态：</span>
+                <el-tag :type="user.status === 1 ? 'success' : 'danger'">
+                  {{ user.status === 1 ? "可用" : "禁用" }}
+                </el-tag>
+              </div>
+            </el-col>
+          </el-row>
+
+          <div class="action-buttons">
+            <el-button
+              type="primary"
+              @click="showEditDialog"
+              icon="el-icon-key"
+            >
+              修改密码
+            </el-button>
+          </div>
+        </template>
+      </div>
+    </el-card>
+
+    <el-dialog
+      title="修改密码"
+      :visible.sync="editDialogVisible"
+      width="40%"
+      @close="editDialogClosed"
+      center
+    >
+      <el-form
+        :model="editForm"
+        ref="editFormRef"
+        :rules="editFormRules"
+        label-width="100px"
+      >
+        <el-form-item label="新密码" prop="password">
+          <el-input
+            v-model="editForm.password"
+            type="password"
+            placeholder="请输入新密码"
+            show-password
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="确认密码" prop="confirmPassword">
+          <el-input
+            v-model="editForm.confirmPassword"
+            type="password"
+            placeholder="请再次输入新密码"
+            show-password
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer">
+        <el-button @click="editDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="changePassword">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 export default {
+  name: "Information",
   data() {
-    var validatePass2 = (rule, value, callback) => {
-        if (value === '') {
-          callback(new Error('请再次输入密码'));
-        } else if (value !== this.editForm.password) {
-          callback(new Error('两次输入密码不一致!'));
-        } else {
-          callback();
-        }
-      };
+    const validatePass2 = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
+      } else if (value !== this.editForm.password) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
     return {
       user: {
-        ruleNumber: Number,
-        cardNumber: Number,
-        status: Number,
-        userId: Number,
+        ruleNumber: "",
+        cardNumber: "",
+        status: 0,
+        userId: "",
         cardName: "",
         username: "",
         password: "",
@@ -101,67 +122,70 @@ export default {
         password: "",
         confirmPassword: "",
       },
-      editFormRules:{
-        password:[
-          {required:true,message:"请输入新密码",trigger:"blur"},
-          {min:6,max:15,message:"新密码长度在6-15个字符",trigger:"blur"}
+      editFormRules: {
+        password: [
+          { required: true, message: "请输入新密码", trigger: "blur" },
+          {
+            min: 6,
+            max: 15,
+            message: "长度在 6 到 15 个字符",
+            trigger: "blur",
+          },
         ],
-        confirmPassword:[
-          {validator:validatePass2,trigger:"blur"}
-        ]
-
-    },
+        confirmPassword: [{ validator: validatePass2, trigger: "blur" }],
+      },
       editDialogVisible: false,
-    show:false,
-    loading:true
+      show: false,
+      loading: true,
     };
   },
   methods: {
-    //让修改公告的对话框可见,并从数据库中回显数据
     showEditDialog() {
-      // 让修改公告的对话框可见
       this.editDialogVisible = true;
     },
-    //监听修改对话框的关闭，一旦对话框关闭，就重置表单，回显数据
     editDialogClosed() {
       this.$refs.editFormRef.resetFields();
     },
     async getUserInformaton() {
-      // 先从sessionStorage中获取用户id
-      const userId = window.sessionStorage.getItem("userId");
-      // 发送axios请求，携带用户id，获取个人信息
-      this.loading = true;
-      const { data: res } = await this.$http.get(
-        "user/get_information/" + userId
-      );
-      if (res.status !== 200) {
+      try {
+        const userId = window.sessionStorage.getItem("userId");
+        const { data: res } = await this.$http.get(
+          `user/get_information/${userId}`
+        );
 
-        return this.$message.error(res.msg);
+        if (res.status !== 200) {
+          return this.$message.error(res.msg);
+        }
+
+        this.user = res.data;
+        this.show = true;
+        this.$message.success({ message: res.msg, duration: 1000 });
+      } catch (error) {
+        this.$message.error("获取用户信息失败");
+      } finally {
+        this.loading = false;
       }
-      this.$message.success({
-        message: res.msg,
-        duration: 1000,
-      });
-      this.user = res.data;
-      this.show = true;
-      this.loading = false;
-
     },
-    async changePassword(){
+    async changePassword() {
+      try {
+        const { data: res } = await this.$http.post("user/update_password", {
+          password: this.editForm.password,
+          userId: window.sessionStorage.getItem("userId"),
+        });
 
-      const {data:res} = await this.$http.post('user/update_password',{
-        password:this.editForm.password,
-        userId:window.sessionStorage.getItem('userId')
-      })
-      if(res.status !== 200){
-        return this.$message.error(res.msg);
+        if (res.status !== 200) {
+          return this.$message.error(res.msg);
+        }
+
+        this.$message.success(res.msg);
+        this.editDialogVisible = false;
+        this.$refs.editFormRef.resetFields();
+        window.sessionStorage.clear();
+        this.$router.push("/login");
+      } catch (error) {
+        this.$message.error("修改密码失败");
       }
-      this.$message.success(res.msg)
-      this.editDialogVisible = false;
-      this.$refs.editFormRef.resetFields();
-      window.sessionStorage.clear();
-      this.$router.push("/login");
-    }
+    },
   },
   created() {
     this.getUserInformaton();
@@ -170,62 +194,123 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.information_container {
+.information-container {
+  height: 100vh;
+  padding: 20px;
+  box-sizing: border-box;
   position: relative;
-  height: 100%;
-}
-.backgroundImg {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  img {
+  background: #f0f2f5;
+
+  .background-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
-    opacity: 0.3;
+    z-index: 0;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      opacity: 0.3;
+    }
+  }
+
+  .info-card {
+    position: relative;
+    z-index: 1;
+    max-width: 800px;
+    margin: 40px auto;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+    background: rgba(255, 255, 255, 0.95);
+
+    .info-header {
+      text-align: center;
+      padding: 20px 0;
+      border-bottom: 1px solid #eee;
+
+      h2 {
+        font-size: 28px;
+        color: #303133;
+        margin-bottom: 10px;
+      }
+
+      .motto {
+        color: #606266;
+        font-size: 16px;
+
+        i {
+          margin-right: 5px;
+          color: #409eff;
+        }
+      }
+    }
+
+    .info-content {
+      padding: 30px;
+
+      .info-item {
+        margin-bottom: 20px;
+        padding: 15px;
+        background: #f8f9fa;
+        border-radius: 6px;
+        transition: all 0.3s;
+
+        &:hover {
+          transform: translateX(5px);
+          background: #f0f7ff;
+        }
+
+        i {
+          color: #409eff;
+          margin-right: 10px;
+          font-size: 18px;
+        }
+
+        .label {
+          color: #606266;
+          margin-right: 10px;
+          font-weight: 500;
+        }
+
+        .value {
+          color: #303133;
+        }
+      }
+
+      .action-buttons {
+        text-align: center;
+        margin-top: 30px;
+
+        .el-button {
+          padding: 12px 30px;
+          font-size: 16px;
+        }
+      }
+    }
   }
 }
-.information_header {
-  height: 200px;
-  // background-color: pink;
-  text-align: center;
-  p:nth-child(1) {
-    line-height: 140px;
-    color: black;
-    font-size: 36px;
+
+// 响应式适配
+@media screen and (max-width: 768px) {
+  .information-container {
+    padding: 10px;
+
+    .info-card {
+      margin: 20px auto;
+
+      .info-header {
+        h2 {
+          font-size: 24px;
+        }
+      }
+
+      .info-content {
+        padding: 15px;
+      }
+    }
   }
-  p:nth-child(2) {
-    color: black;
-    font-size: 24px;
-  }
-}
-.information_banner {
-  display: flex;
-  flex-direction: row;
-  height: 400px;
-  // background-color: pink;
-  .information_banner_left {
-    flex: 0.5;
-    // background-color: brown;
-    text-align: center;
-  }
-  .information_banner_right {
-    flex: 0.5;
-    // background-color: skyblue;
-    text-align: left;
-    line-height: 400px;
-  }
-}
-.banner_left_main {
-  margin-top: 120px;
-  color: black;
-  font-size: 20px;
-  div {
-    margin-top: 15px;
-  }
-}
-.changePWD {
-  position: absolute;
-  top: 50%;
-  left: 50%;
 }
 </style>
diff --git a/src/components/User/Notice.vue b/src/components/User/Notice.vue
index ee86dd1..4b77865 100644
--- a/src/components/User/Notice.vue
+++ b/src/components/User/Notice.vue
@@ -1,98 +1,185 @@
 <template>
-  <div class="notice_container">
-    <div class="header">
-      <div class="scroll-text" ref="scrollText">
-        <i class="el-icon-s-opportunity"></i> {{ text }}
-        <i class="el-icon-s-opportunity"></i>
-      </div>
-    </div>
-    <div class="banner">
-      <div class="banner_header"><p>近期公告</p></div>
-      <div class="banner_main"
-      v-loading="loading"
-        element-loading-text="拼命加载中"
-    element-loading-spinner="el-icon-loading"
-    element-loading-background="rgba(0, 0, 0, 0.8)">
-        <div class="banner_main_item" v-for="item in noticeList" :key="item.noticeId">
-          <div class="banner_main_item_header">    <p> {{ item.noticeTitle }}     {{ item.createTime }}</p></div>
-       
-          <div class="banner_main_item_main">
-                <p>{{ item.noticeContent }}</p>
-          </div>
+  <div class="notice-container">
+    <el-card class="notice-card">
+      <!-- 顶部滚动通知 -->
+      <div class="notice-header">
+        <div class="scroll-text" ref="scrollText">
+          <i class="el-icon-bell"></i>
+          <span>{{ text }}</span>
+          <i class="el-icon-bell"></i>
         </div>
       </div>
-    </div>
+
+      <!-- 公告列表 -->
+      <div class="notice-content">
+        <div class="section-title">
+          <i class="el-icon-message"></i>
+          <span>近期公告</span>
+        </div>
+
+        <el-timeline v-loading="loading">
+          <el-timeline-item
+            v-for="item in noticeList"
+            :key="item.noticeId"
+            :timestamp="item.createTime"
+            placement="top"
+            :type="getTimelineItemType(item.noticeId)"
+          >
+            <el-card class="notice-item">
+              <div class="notice-item-title">
+                <i class="el-icon-document"></i>
+                <span>{{ item.noticeTitle }}</span>
+              </div>
+              <div class="notice-item-content">
+                {{ item.noticeContent }}
+              </div>
+            </el-card>
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script>
-
 export default {
+  name: "Notice",
   data() {
     return {
-      text: "图书馆公告栏,记得查收公告呀!小项目请勿恶意攻击,谢谢",
-      noticeList:[
-        {
-          noticeId:0,
-          noticeAdminId:Number,
-          noticeTitle:"",
-          noticeContent:"",
-          createTime:"",
-          updateTime:""
-        }
-      ],
-      loading:true
+      text: "欢迎访问图书馆公告栏，请及时查看最新公告！",
+      noticeList: [],
+      loading: true,
     };
   },
   methods: {
-    async getRuleList(){
-      this.loading = true;
-      const {data:res} = await this.$http.get('user/get_noticelist')
-      if(res.status!== 200){
+    async getRuleList() {
+      try {
+        const { data: res } = await this.$http.get("user/get_noticelist");
+        if (res.status !== 200) {
+          return this.$message.error(res.msg);
+        }
+        this.noticeList = res.data;
+        this.$message.success({
+          message: res.msg,
+          duration: 1000,
+        });
+      } catch (error) {
+        this.$message.error("获取公告列表失败");
+      } finally {
         this.loading = false;
-        return this.$message.error(res.msg)
       }
-      this.$message.success({
-        message:res.msg,
-        duration:1000
-      })
-      this.noticeList = res.data;
-      this.loading = false;
-    }
+    },
+    getTimelineItemType(id) {
+      const types = ["primary", "success", "warning", "danger"];
+      return types[id % types.length];
+    },
+    initScrollText() {
+      const containerWidth = this.$refs.scrollText.offsetWidth;
+      const textWidth = this.$refs.scrollText.scrollWidth;
+      if (textWidth > containerWidth) {
+        this.$refs.scrollText.style.animation = "scroll 15s linear infinite";
+      }
+    },
   },
   mounted() {
-    const containerWidth = this.$refs.scrollText.offsetWidth;
-    const textWidth = this.$refs.scrollText.scrollWidth;
-
-    // If the text is longer than the container, start the animation
-    if (textWidth > containerWidth) {
-      this.$refs.scrollText.style.animation = "scroll 10s linear infinite";
-    }
+    this.$nextTick(() => {
+      this.initScrollText();
+    });
   },
-  created(){
+  created() {
     this.getRuleList();
-  }
+  },
 };
 </script>
 
 <style lang="less" scoped>
-.notice_container {
-  overflow: hidden;
-}
-.header {
-  width: 100%;
-  height: 50px;
-  background-color: rgb(70, 130, 180);
-  border-radius: 15px;
-  // box-shadow: 0px 0px 5px 5px rgb(66, 142, 5);
-  color: white;
-  text-align: center;
-  line-height: 50px;
-  font-size: 24px;
-}
-.scroll-text {
-  white-space: nowrap;
-  animation: scroll 10s linear infinite;
+.notice-container {
+  padding: 20px;
+  min-height: calc(100vh - 120px);
+  background: #f5f7fa;
+
+  .notice-card {
+    border-radius: 8px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  .notice-header {
+    background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 30px;
+
+    .scroll-text {
+      color: white;
+      font-size: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      white-space: nowrap;
+      overflow: hidden;
+
+      i {
+        margin: 0 10px;
+        font-size: 20px;
+      }
+    }
+  }
+
+  .section-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 30px;
+    padding-bottom: 15px;
+    border-bottom: 2px solid #f0f2f5;
+
+    i {
+      font-size: 24px;
+      color: #1890ff;
+      margin-right: 10px;
+    }
+
+    span {
+      font-size: 20px;
+      font-weight: 600;
+      color: #303133;
+    }
+  }
+
+  .notice-item {
+    margin-bottom: 20px;
+    transition: all 0.3s;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .notice-item-title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid #ebeef5;
+
+      i {
+        color: #1890ff;
+        margin-right: 8px;
+      }
+
+      span {
+        font-size: 16px;
+        font-weight: 500;
+        color: #303133;
+      }
+    }
+
+    .notice-item-content {
+      color: #606266;
+      line-height: 1.6;
+      font-size: 14px;
+      padding: 10px 0;
+    }
+  }
 }
 
 @keyframes scroll {
@@ -103,71 +190,27 @@ export default {
     transform: translateX(-100%);
   }
 }
-.banner {
-  width: 100%;
-  height: 100%;
-  // background-color: pink;
-  margin-top:30px;
-}
-.banner_header {
-  width: 100%;
-  height: 80px;
-  // background-color: brown;
- 
-  p {
-    color:black;
-    font-size: 30px;
-    text-align: center;
-    line-height: 80px;
-  }
-}
-.banner_main{
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color:skyblue;
 
-}
+// 响应式适配
+@media screen and (max-width: 768px) {
+  .notice-container {
+    padding: 10px;
 
-.banner_main_item:nth-child(n+2) {
-  margin-top: 30px;
-}
-.banner_main_item:nth-child(n+2){
-  background-color: #D1EEEE;
-}
-.banner_main_item:nth-child(1){
-  background-color: pink;
-}
+    .notice-header {
+      padding: 10px;
 
-.banner_main_item {
-  width: 80%;
-  height: 120px;
-  // background-color: aqua;
-  .banner_main_item_header {
-    width: 100%;
-    height: 50px;
-    // background-color: pink;
-    border:1px solid skyblue;
-    box-sizing: border-box;
-    p {
-      color:rgb(175, 129, 143);
-      text-align: center;
-      line-height: 50px;
-      font-size: 16px;
+      .scroll-text {
+        font-size: 16px;
+      }
     }
-  }
-  .banner_main_item_main{
-    width: 100%;
-    height: 70px;
-    background-color: white;
-    border:1px solid skyblue;
-    box-sizing: border-box;
-    text-align: center;
-    p {
-      line-height: 70px;
+
+    .section-title {
+      margin-bottom: 20px;
+
+      span {
+        font-size: 18px;
+      }
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/User/Rule.vue b/src/components/User/Rule.vue
index ca132b3..39bee58 100644
--- a/src/components/User/Rule.vue
+++ b/src/components/User/Rule.vue
@@ -1,114 +1,183 @@
 <template>
-  <div class="rule_container">
-    <div class="header">
-      <p>读者规则信息查看</p>
-    </div>
-    <div class="banner">
-      <el-tooltip
-      v-for="item in ruleList"
-      v-loading="loading"
-        element-loading-text="拼命加载中"
-    element-loading-spinner="el-icon-loading"
-    element-loading-background="rgba(0, 0, 0, 0.8)"
-      :key="item.ruleId"
-        effect="dark"
-        placement="right"
+  <div class="rule-container">
+    <el-card class="rule-card">
+      <div slot="header" class="header">
+        <i class="el-icon-reading"></i>
+        <span>读者规则信息查看</span>
+      </div>
+
+      <el-row
+        :gutter="20"
+        v-loading="loading"
+        element-loading-text="加载中..."
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.7)"
       >
-      <div slot="content" class="content_tip">可借阅数量: {{ item.bookLimitNumber }}<br/>可借阅天数: {{ item.bookDays }}
-      <br/>可借阅图书馆: {{ item.bookLimitLibrary }}<br/>过期扣费/天: {{ item.bookOverdueFee }}</div>
-        <el-button style="font-size:16px">借阅证规则编号: {{ item.bookRuleId }}</el-button>
-      </el-tooltip>
-     
-    </div>
+        <el-col :span="12" v-for="(item, index) in ruleList" :key="item.ruleId">
+          <el-card
+            class="rule-item"
+            :class="{ 'rule-item-odd': index % 2 === 0 }"
+          >
+            <div class="rule-title">
+              <i class="el-icon-document"></i>
+              <span>借阅证规则 #{{ item.bookRuleId }}</span>
+            </div>
+            <div class="rule-content">
+              <el-descriptions :column="1" border>
+                <el-descriptions-item label="可借阅数量">
+                  <el-tag size="medium">{{ item.bookLimitNumber }} 本</el-tag>
+                </el-descriptions-item>
+                <el-descriptions-item label="可借阅天数">
+                  <el-tag size="medium" type="success"
+                    >{{ item.bookDays }} 天</el-tag
+                  >
+                </el-descriptions-item>
+                <el-descriptions-item label="可借阅图书馆">
+                  <el-tag size="medium" type="warning">{{
+                    item.bookLimitLibrary
+                  }}</el-tag>
+                </el-descriptions-item>
+                <el-descriptions-item label="过期扣费/天">
+                  <el-tag size="medium" type="danger"
+                    >￥{{ item.bookOverdueFee }}</el-tag
+                  >
+                </el-descriptions-item>
+              </el-descriptions>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-card>
   </div>
 </template>
 
 <script>
-import { Loading } from 'element-ui';
 export default {
-  data(){
+  name: "Rule",
+  data() {
     return {
-      ruleList:[
-        {
-          ruleId:0,
-          bookRuleId:Number,
-          bookDays:Number,
-          bookLimitNumber:Number,
-          bookOverdueFee:Number,
-          bookLimitLibrary:"",
-          createTime:"",
-          updateTime:"",
-          
+      ruleList: [],
+      loading: true,
+    };
+  },
+  methods: {
+    async getRuleList() {
+      try {
+        const { data: res } = await this.$http.get("user/get_rulelist");
+        if (res.status !== 200) {
+          return this.$message.error(res.msg);
         }
-
-      ],
-      loading:true
-    }
-  },
-  methods:{
-   async  getRuleList(){
-      const {data:res} = await this.$http.get("user/get_rulelist")
-      if(res.status !== 200){
+        this.ruleList = res.data;
+        this.$message.success({
+          message: res.msg,
+          duration: 1000,
+        });
+      } catch (error) {
+        this.$message.error("获取规则列表失败");
+      } finally {
         this.loading = false;
-        return this.$message.error(res.msg);
       }
-      this.$message.success({
-        message:res.msg,
-        duration:1000
-      })
-      this.loading = false;
-      this.ruleList = res.data
-    }
+    },
+  },
+  created() {
+    this.getRuleList();
   },
-  created(){
-      this.getRuleList()
-  }
 };
 </script>
 
 <style lang="less" scoped>
-.rule_container {
-  position: relative;
-}
-.header {
-  position: absolute;
-  left: 50%;
-  transform: translate(-50%);
-  p {
-    font-size: 36px;
-    color: rgb(70, 130, 180);
+.rule-container {
+  padding: 20px;
+
+  .rule-card {
+    background: #f5f7fa;
+    border: none;
+    border-radius: 8px;
+
+    .header {
+      display: flex;
+      align-items: center;
+      font-size: 24px;
+      color: #303133;
+      margin-bottom: 20px;
+
+      i {
+        margin-right: 10px;
+        font-size: 28px;
+        color: #409eff;
+      }
+    }
+  }
+
+  .rule-item {
+    margin-bottom: 20px;
+    border-radius: 8px;
+    transition: all 0.3s;
+
+    &:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+    }
+
+    &.rule-item-odd {
+      background: linear-gradient(135deg, #e6f3ff 0%, #ffffff 100%);
+    }
+
+    .rule-title {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 20px;
+      color: #303133;
+      display: flex;
+      align-items: center;
+
+      i {
+        color: #409eff;
+        margin-right: 8px;
+      }
+    }
+
+    .rule-content {
+      /deep/ .el-descriptions {
+        .el-descriptions-item__label {
+          width: 120px;
+          color: #606266;
+          background: #f5f7fa;
+        }
+
+        .el-descriptions-item__content {
+          padding: 12px 15px;
+        }
+
+        .el-tag {
+          font-size: 14px;
+          padding: 0 12px;
+          height: 28px;
+          line-height: 26px;
+        }
+      }
+    }
   }
 }
-.banner {
-  display: flex;
-  flex-direction: column;
-  position:absolute;
-  left:50%;
-  transform: translate(-50%);
 
+// 响应式布局
+@media screen and (max-width: 768px) {
+  .rule-container {
+    padding: 10px;
+
+    .rule-card {
+      .header {
+        font-size: 20px;
+      }
+    }
+
+    .rule-item {
+      margin-bottom: 15px;
+
+      .rule-title {
+        font-size: 16px;
+      }
+    }
+  }
 }
-.el-tooltip{
-  width: 500px;
-  font-size: 16px;
-  color:white;
-}
-.el-tooltip:hover{
-  color:black;
-}
-.el-tooltip:nth-child(1){
-  margin-top:100px;
-}
-.el-tooltip:nth-child(n+2){
-  margin-top:50px;
-  margin-left:0px;
-}
-.el-tooltip:nth-child(odd){
-  background-color: pink;
-}
-.el-tooltip:nth-child(even){
-  background-color: rgb(49, 176, 213)
-}
-.content_tip {
-  font-size: 16px;
-}
-</style>
\ No newline at end of file
+</style>