fix: 优化图书推荐系统

src/components/Admin/LoginAdmin.vue

@@ -4,7 +4,10 @@
     <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
@@ -33,7 +36,9 @@
         </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>
@@ -62,16 +67,12 @@
         登录页面切换
       </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 {
@@ -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(
+        const { data: res } = await this.$http.post("admin/login", {
-            "admin/login",
-            {
           username,
-              password
+          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%;
 }

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 style="font-weight: bold; color: white"> 登录页面切换 </span>
-        登录页面切换
-      </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 class="footer2"></div>
-      
-    </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
+  background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg)
-    0px 0px;
+    no-repeat 0px 0px;
   background-size: cover;
   height: 100%;
 }

src/components/BookManage/ReturnBook.vue

@@ -28,20 +28,18 @@ export default {
         "bookadmin/query_book/" + this.bookNumber
       );
       if (res.status !== 200) {
-        return this.$message.error(
+        return this.$message.error({
-          {
           message: res.msg,
-            duration:1000
+          duration: 1000,
-          }
+        });
-        );
       }
       // console.log(res);
       // this.$message.success(res.msg);
       this.$router.push({
         name: "bookexpire",
         query: {
-          bookNumber:this.bookNumber
+          bookNumber: this.bookNumber,
-        }
+        },
       });
     },
   },

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')">

src/components/Home/HomeAdmin.vue

@@ -1,44 +1,54 @@
 <template>
   <el-container class="home-container">
-    <!-- 头部区域 -->
     <el-header>
-      <div>
+      <div class="logo-container">
-        <!-- <img src="../assets/heima.png" alt="" /> -->
+        <!-- <img src="../assets/logo.png" alt="" class="logo" /> -->
-        <span>欢迎登录图书管理系统</span>
+        <span class="title">图书推荐系统</span>
-        <span style="color: #ccc; font-size: 16px">系统管理人员页面</span>
+        <span class="subtitle">系统管理人员页面</span>
       </div>
-      <div>
+      <div class="user-info">
-       
-        <div>
         <el-avatar
           src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
-            :size="35"
+          :size="40"
-            style="margin-right: 10px"
+          class="avatar"
         ></el-avatar>
-        </div>
+        <div class="user">管理员：{{ this.admin.adminName }}</div>
-        <div class="user">管理员:{{ this.admin.adminName }}</div>
+        <el-button type="primary" size="medium" @click="logout" plain
-        <el-button type="info" @click="logout">退出</el-button>
+          >退出</el-button
+        >
       </div>
     </el-header>
     <!-- 页面主体区域 -->
     <el-container>
       <!-- 侧边栏 -->
-      <el-aside :width="isCollapse ? '64px' : '200px'">
+      <el-aside
-        <div class="toggle-button" @click="toggleCollapse">|||</div>
+        :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"
+          class="el-menu-vertical"
-          background-color="#fff"
+          background-color="#001529"
-          text-color="black"
+          text-color="rgba(255,255,255,0.65)"
-          active-text-color="#ffd04b"
+          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>
@@ -88,13 +98,10 @@
           </el-menu-item>
         </el-menu>
       </el-aside>
-      <!-- 右侧内容主体 -->
-      <el-main>
-        <!-- 路由占位符 -->
-        <router-view></router-view>
-        <div class="footer">
 
-        </div>
+      <el-main>
+        <router-view></router-view>
+        <div class="footer"></div>
       </el-main>
     </el-container>
   </el-container>
@@ -161,67 +168,185 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.footer {
-  position: fixed;
-  bottom: 0px;
-  left: 40%;
-  color:#ccc;
-  a {
-    color:#ccc;
-  }
-}
 .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;
+  padding: 0 20px;
-  font-size: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  border-radius: 10px;
+
-  > div {
+  .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: 12px;
+  font-size: 18px;
+}
+
+.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;
     }
-.toggle-button {
+
-  background-color: #4a5064;
+    .menu-title {
-  font-size: 10px;
-  line-height: 24px;
-  color: #fff;
-  text-align: center;
-  //设置文字之间的间距
-  letter-spacing: 0.2em;
-  cursor: pointer;
-}
-.user {
-  margin-right: 15px;
-  color: #ccc;
       font-size: 16px;
+      font-weight: 600;
+      white-space: nowrap;
     }
-.el-menu-item:hover {
-  background-color: rgb(51, 122, 183) !important;
   }
-// .el-menu-item{
+
-//   color:rgb(135, 206, 235) !important;
+  .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;
+    }
+  }
+}
+
+.el-main {
+  padding: 20px;
+  background: #f0f2f5;
+}
 </style>

src/components/Home/HomeManage.vue

@@ -1,44 +1,54 @@
 <template>
   <el-container class="home-container">
-    <!-- 头部区域 -->
     <el-header>
-      <div>
+      <div class="logo-container">
-        <!-- <img src="../assets/heima.png" alt="" /> -->
+        <!-- <img src="../assets/logo.png" alt="" class="logo" /> -->
-        <span>欢迎登录图书管理系统</span>
+        <span class="title">图书推荐系统</span>
-        <span style="color: #ccc; font-size: 16px">图书馆管理人员页面</span>
+        <span class="subtitle">图书管理员页面</span>
       </div>
-      <div>
+      <div class="user-info">
-        
-        <div>
         <el-avatar
           src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
-            :size="35"
+          :size="40"
-            style="margin-right: 10px"
+          class="avatar"
         ></el-avatar>
-        </div>
+        <div class="user">管理员：{{ this.bookAdmin.bookAdminName }}</div>
-        <div class="user">管理员:{{ this.bookAdmin.bookAdminName }}</div>
+        <el-button type="primary" size="medium" @click="logout" plain
-        <el-button type="info" @click="logout">退出</el-button>
+          >退出</el-button
+        >
       </div>
     </el-header>
     <!-- 页面主体区域 -->
     <el-container>
       <!-- 侧边栏 -->
-      <el-aside :width="isCollapse ? '64px' : '200px'">
+      <el-aside
-        <div class="toggle-button" @click="toggleCollapse">|||</div>
+        :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"
+          class="el-menu-vertical"
-          background-color="#fff"
+          background-color="#001529"
-          text-color="black"
+          text-color="rgba(255,255,255,0.65)"
-          active-text-color="#ffd04b"
+          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,13 +77,10 @@
           </el-menu-item>
         </el-menu>
       </el-aside>
-      <!-- 右侧内容主体 -->
-      <el-main>
-        <!-- 路由占位符 -->
-        <router-view></router-view>
-        <div class="footer">
 
-        </div>
+      <el-main>
+        <router-view></router-view>
+        <div class="footer"></div>
       </el-main>
     </el-container>
   </el-container>
@@ -104,8 +111,8 @@ export default {
         bookAdminName: "",
         email: "",
         createTime: "",
-        updateTime:""
+        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;
   },
@@ -142,68 +152,185 @@ export default {
 </script>
 
 <style lang="less" scoped>
-
-  .footer {
-  position: fixed;
-  bottom: 0px;
-  left: 40%;
-  color:#ccc;
-  a {
-    color:#ccc;
-  }
-}
 .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;
+  padding: 0 20px;
-  font-size: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  border-radius: 10px;
+
-  > div {
+  .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: 12px;
+  font-size: 18px;
+}
+
+.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;
     }
-.toggle-button {
+
-  background-color: #4a5064;
+    .menu-title {
-  font-size: 10px;
-  line-height: 24px;
-  color: #fff;
-  text-align: center;
-  //设置文字之间的间距
-  letter-spacing: 0.2em;
-  cursor: pointer;
-}
-.user {
-  margin-right: 15px;
-  color: #ccc;
       font-size: 16px;
+      font-weight: 600;
+      white-space: nowrap;
     }
-.el-menu-item:hover {
-  background-color: rgb(51, 122, 183) !important;
   }
-// .el-menu-item{
+
-//   color:rgb(135, 206, 235) !important;
+  .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;
+    }
+  }
+}
+
+.el-main {
+  padding: 20px;
+  background: #f0f2f5;
+}
 </style>

src/components/User/Comment.vue

@@ -1,60 +1,59 @@
 <template>
-  <div class="comment_container">
+  <div class="comment-container">
-    <div class="backgroundImg">
+    <div class="background-wrapper"></div>
-      <img
+
-        src="https://xxx.xiaobaitiao.icu/img/icu/202312211243628.jpg"
+    <div class="content-wrapper">
-        alt=""
+      <div class="barrage-box">
-      />
-    </div>
-    <div class="barrages-drop">
         <vue-baberrage
           :isShow="barrageIsShow"
           :barrageList="barrageList"
-        :maxWordCount="maxWordCount"
+          :maxWordCount="50"
-        :throttleGap="throttleGap"
+          :throttleGap="2000"
-        :loop="barrageLoop"
+          :loop="false"
-        :boxHeight="boxHeight"
+          :boxHeight="600"
-        :boxWidth="boxWidth"
+          :messageHeight="50"
-        :messageHeight="messageHeight"
+          :lanesCount="8"
-        :lanesCount="lanesCount"
+          class="barrage-component"
-        style="width: 1330px; height: 750px"
         >
         </vue-baberrage>
-      <div class="addMain">
+      </div>
+
+      <div class="input-box">
         <el-input
-          placeholder="请输入内容"
           v-model.trim="input"
-          class="input-with-select"
+          placeholder="发送一条友善的评论吧~"
-          @keyup.enter.native="addContent"
+          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, //是否展示弹幕
+      barrageIsShow: true,
-      messageHeight: 3, //消息高度(测试不生效)
-      barrageLoop: false, //是否循环播放
-      maxWordCount: 2, //弹幕字数(测试不生效)
-      lanesCount: 1, //固定弹幕(测试不生效)
-      boxWidth: 1600, //弹幕宽度
-      boxHeight: 200, //弹幕高度(测试不生效)
-      throttleGap: 3000, //消息间隔
       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(){
+    addContent: _.throttle(
-      // 先判断文本内容是否为空或者是无意义的数字，如果是提示用户信息
+      async function () {
-      if(this.input.trim()===''||/^\d+$/.test(this.input)||/^[a-zA-Z]+$/.test(this.input)){
+        if (
-        this.$message.info({
+          !this.input.trim() ||
-          message: "请不要输入无意义的内容",
+          /^\d+$/.test(this.input) ||
-          duration:1000
+          /^[a-zA-Z]+$/.test(this.input)
-        })
+        ) {
+          this.$message.warning("请输入有意义的评论内容");
           return;
         }
-      // 文本框中内容赋值给barrage
+
+        try {
+          this.sending = true;
           this.barrage.msg = this.input;
-      //向数据库发送请求 addComment
+          const { data: res } = await this.$http.post(
-      const {data:res} = await this.$http.post('user/add_comment',this.barrage);
+            "user/add_comment",
+            this.barrage
+          );
+
           if (res.status !== 200) {
-        return this.$message.error(res.msg)
+            throw new Error(res.msg);
           }
-      //调用获取新的留言列表
+
-      this.getCommentList();
+          await this.getCommentList();
-      //重置内容框
           this.input = "";
-      this.$message.success(res.msg);
+          this.$message.success("发送成功");
-    },5000,{ trailing: false }),
+        } catch (error) {
-    async getCommentList() {
+          this.$message.error(error.message || "发送失败");
-      // 发送axios请求
+        } finally {
-      const { data: res } = await this.$http.get("user/get_commentlist");
+          this.sending = false;
-      // console.log(res);
-      if (res.status !== 200) {
-        return this.$message.error(res.msg);
         }
-      this.$message.success(res.msg);
-      this.barrageList = res.data
-      //添加空对象，数组更新，组件更新
-      this.barrageList.push({})
       },
+      3000,
+      { trailing: false }
+    ),
 
+    async getCommentList() {
+      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("获取评论列表失败");
+      }
+    },
   },
-
   mounted() {
     this.getCommentList();
-  }
+    // 定时刷新弹幕列表
+    setInterval(() => {
+      this.getCommentList();
+    }, 30000);
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+  },
 };
 </script>
 
 <style lang="less" scoped>
+.comment-container {
+  position: relative;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+}
 
-.comment_container {
+.background-wrapper {
-  position: relative;
+  position: fixed;
-  height: 100%;
+  top: 0;
+  left: 0;
   width: 100%;
-}
-.backgroundImg {
-  position: absolute;
   height: 100%;
-  width: 100%;
+  z-index: 0;
+
   img {
-    height: 100%;
     width: 100%;
-    opacity: 0.5;
-  }
-}
-.barrages-drop {
-  position: relative;
-}
-.addMain {
-  position: absolute;
-  width: 300px;
     height: 100%;
-  background-color: pink;
+    object-fit: cover;
-  top: 450px;
+    opacity: 0.3;
-  left: 50%;
+    filter: blur(5px);
-  transform: translate(-50%, -50%);
+  }
+
+  &::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)
+    );
+  }
+}
+
+.content-wrapper {
+  position: relative;
+  z-index: 1;
+
+  // height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+}
+
+.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>

src/components/User/Information.vue

@@ -1,96 +1,117 @@
 <template>
-  <div class="information_container">
+  <div class="information-container">
-    <div class="backgroundImg">
+    <el-card class="info-card">
-      <img
+      <div class="info-header">
-        src="https://xxx.xiaobaitiao.icu/img/icu/202312211243635.jpg"
+        <h2>个人信息</h2>
-        alt="背景图片"
+        <p class="motto">
-      />
+          <i class="el-icon-reading"></i>
-    </div>
+          By reading we enrich the mind, by conversation we polish it.
-    <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"
+
+      <div
+        class="info-content"
         v-loading="loading"
-        element-loading-text="拼命加载中"
+        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>
-      <div class="information_banner_right">
-        <el-button type="primary" class="changePWD" @click="showEditDialog"  v-if="show"
-          >修改密码</el-button
       >
+        <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="50%"
+      width="40%"
       @close="editDialogClosed"
+      center
     >
       <el-form
         :model="editForm"
         ref="editFormRef"
         :rules="editFormRules"
-          label-width="120px"
+        label-width="100px"
       >
         <el-form-item label="新密码" prop="password">
-            <el-input v-model="editForm.password" type="password" placeholder="请输入新密码"></el-input>
+          <el-input
+            v-model="editForm.password"
+            type="password"
+            placeholder="请输入新密码"
+            show-password
+          ></el-input>
         </el-form-item>
-          <el-form-item label="新密码" prop="confirmPassword">
+        <el-form-item label="确认密码" prop="confirmPassword">
-            <el-input v-model="editForm.confirmPassword" type="password" placeholder="请再次输入新密码"></el-input>
+          <el-input
+            v-model="editForm.confirmPassword"
+            type="password"
+            placeholder="请再次输入新密码"
+            show-password
+          ></el-input>
         </el-form-item>
       </el-form>
-        <span slot="footer" class="dialog-footer">
+      <span slot="footer">
         <el-button @click="editDialogVisible = false">取 消</el-button>
-          <el-button type="primary" @click="changePassword"
+        <el-button type="primary" @click="changePassword">确 定</el-button>
-            >确 定</el-button
-          >
       </span>
     </el-dialog>
   </div>
-  </div>
 </template>
 
 <script>
 export default {
+  name: "Information",
   data() {
-    var validatePass2 = (rule, value, callback) => {
+    const validatePass2 = (rule, value, callback) => {
-        if (value === '') {
+      if (value === "") {
-          callback(new Error('请再次输入密码'));
+        callback(new Error("请再次输入密码"));
       } else if (value !== this.editForm.password) {
-          callback(new Error('两次输入密码不一致!'));
+        callback(new Error("两次输入密码不一致!"));
       } else {
         callback();
       }
     };
     return {
       user: {
-        ruleNumber: Number,
+        ruleNumber: "",
-        cardNumber: Number,
+        cardNumber: "",
-        status: Number,
+        status: 0,
-        userId: Number,
+        userId: "",
         cardName: "",
         username: "",
         password: "",
@@ -104,65 +125,68 @@ export default {
       editFormRules: {
         password: [
           { required: true, message: "请输入新密码", trigger: "blur" },
-          {min:6,max:15,message:"新密码长度在6-15个字符",trigger:"blur"}
+          {
+            min: 6,
+            max: 15,
+            message: "长度在 6 到 15 个字符",
+            trigger: "blur",
+          },
         ],
-        confirmPassword:[
+        confirmPassword: [{ validator: validatePass2, trigger: "blur" }],
-          {validator:validatePass2,trigger:"blur"}
-        ]
-
       },
       editDialogVisible: false,
       show: false,
-    loading:true
+      loading: true,
     };
   },
   methods: {
-    //让修改公告的对话框可见,并从数据库中回显数据
     showEditDialog() {
-      // 让修改公告的对话框可见
       this.editDialogVisible = true;
     },
-    //监听修改对话框的关闭，一旦对话框关闭，就重置表单，回显数据
     editDialogClosed() {
       this.$refs.editFormRef.resetFields();
     },
     async getUserInformaton() {
-      // 先从sessionStorage中获取用户id
+      try {
         const userId = window.sessionStorage.getItem("userId");
-      // 发送axios请求，携带用户id，获取个人信息
-      this.loading = true;
         const { data: res } = await this.$http.get(
-        "user/get_information/" + userId
+          `user/get_information/${userId}`
         );
-      if (res.status !== 200) {
 
+        if (res.status !== 200) {
           return this.$message.error(res.msg);
         }
-      this.$message.success({
+
-        message: res.msg,
-        duration: 1000,
-      });
         this.user = res.data;
         this.show = true;
+        this.$message.success({ message: res.msg, duration: 1000 });
+      } catch (error) {
+        this.$message.error("获取用户信息失败");
+      } finally {
         this.loading = false;
-
+      }
     },
     async changePassword() {
-
+      try {
-      const {data:res} = await this.$http.post('user/update_password',{
+        const { data: res } = await this.$http.post("user/update_password", {
           password: this.editForm.password,
-        userId:window.sessionStorage.getItem('userId')
+          userId: window.sessionStorage.getItem("userId"),
-      })
+        });
+
         if (res.status !== 200) {
           return this.$message.error(res.msg);
         }
-      this.$message.success(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("修改密码失败");
       }
     },
+  },
   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%;
+  background: #f0f2f5;
-}
+
-.backgroundImg {
+  .background-wrapper {
-  position: absolute;
+    position: fixed;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
+    z-index: 0;
+
     img {
       width: 100%;
       height: 100%;
+      object-fit: cover;
       opacity: 0.3;
     }
   }
-.information_header {
+
-  height: 200px;
+  .info-card {
-  // background-color: pink;
+    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;
-  p:nth-child(1) {
+      padding: 20px 0;
-    line-height: 140px;
+      border-bottom: 1px solid #eee;
-    color: black;
+
-    font-size: 36px;
+      h2 {
+        font-size: 28px;
+        color: #303133;
+        margin-bottom: 10px;
       }
-  p:nth-child(2) {
+
-    color: black;
+      .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;
+        }
+      }
+    }
+  }
+}
+
+// 响应式适配
+@media screen and (max-width: 768px) {
+  .information-container {
+    padding: 10px;
+
+    .info-card {
+      margin: 20px auto;
+
+      .info-header {
+        h2 {
           font-size: 24px;
         }
       }
-.information_banner {
+
-  display: flex;
+      .info-content {
-  flex-direction: row;
+        padding: 15px;
-  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>

src/components/User/Notice.vue

@@ -1,98 +1,185 @@
 <template>
-  <div class="notice_container">
+  <div class="notice-container">
-    <div class="header">
+    <el-card class="notice-card">
+      <!-- 顶部滚动通知 -->
+      <div class="notice-header">
         <div class="scroll-text" ref="scrollText">
-        <i class="el-icon-s-opportunity"></i> {{ text }}
+          <i class="el-icon-bell"></i>
-        <i class="el-icon-s-opportunity"></i>
+          <span>{{ text }}</span>
+          <i class="el-icon-bell"></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 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: "图书馆公告栏,记得查收公告呀!小项目请勿恶意攻击,谢谢",
+      text: "欢迎访问图书馆公告栏，请及时查看最新公告！",
-      noticeList:[
+      noticeList: [],
-        {
+      loading: true,
-          noticeId:0,
-          noticeAdminId:Number,
-          noticeTitle:"",
-          noticeContent:"",
-          createTime:"",
-          updateTime:""
-        }
-      ],
-      loading:true
     };
   },
   methods: {
     async getRuleList() {
-      this.loading = true;
+      try {
-      const {data:res} = await this.$http.get('user/get_noticelist')
+        const { data: res } = await this.$http.get("user/get_noticelist");
         if (res.status !== 200) {
-        this.loading = false;
+          return this.$message.error(res.msg);
-        return this.$message.error(res.msg)
         }
+        this.noticeList = res.data;
         this.$message.success({
           message: res.msg,
-        duration:1000
+          duration: 1000,
-      })
+        });
-      this.noticeList = res.data;
+      } catch (error) {
+        this.$message.error("获取公告列表失败");
+      } finally {
         this.loading = false;
       }
     },
-  mounted() {
+    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 the text is longer than the container, start the animation
       if (textWidth > containerWidth) {
-      this.$refs.scrollText.style.animation = "scroll 10s linear infinite";
+        this.$refs.scrollText.style.animation = "scroll 15s linear infinite";
       }
     },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initScrollText();
+    });
+  },
   created() {
     this.getRuleList();
-  }
+  },
 };
 </script>
 
 <style lang="less" scoped>
-.notice_container {
+.notice-container {
-  overflow: hidden;
+  padding: 20px;
-}
+  min-height: calc(100vh - 120px);
-.header {
+  background: #f5f7fa;
-  width: 100%;
+
-  height: 50px;
+  .notice-card {
-  background-color: rgb(70, 130, 180);
+    border-radius: 8px;
-  border-radius: 15px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  // box-shadow: 0px 0px 5px 5px rgb(66, 142, 5);
-  color: white;
-  text-align: center;
-  line-height: 50px;
-  font-size: 24px;
   }
+
+  .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;
-  animation: scroll 10s linear infinite;
+      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,70 +190,26 @@ 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;
+@media screen and (max-width: 768px) {
-    font-size: 30px;
+  .notice-container {
-    text-align: center;
+    padding: 10px;
-    line-height: 80px;
-  }
-}
-.banner_main{
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color:skyblue;
 
-}
+    .notice-header {
+      padding: 10px;
 
-.banner_main_item:nth-child(n+2) {
+      .scroll-text {
-  margin-top: 30px;
-}
-.banner_main_item:nth-child(n+2){
-  background-color: #D1EEEE;
-}
-.banner_main_item:nth-child(1){
-  background-color: pink;
-}
-
-.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;
       }
     }
-  .banner_main_item_main{
+
-    width: 100%;
+    .section-title {
-    height: 70px;
+      margin-bottom: 20px;
-    background-color: white;
+
-    border:1px solid skyblue;
+      span {
-    box-sizing: border-box;
+        font-size: 18px;
-    text-align: center;
+      }
-    p {
-      line-height: 70px;
     }
   }
 }

src/components/User/Rule.vue

@@ -1,114 +1,183 @@
 <template>
-  <div class="rule_container">
+  <div class="rule-container">
-    <div class="header">
+    <el-card class="rule-card">
-      <p>读者规则信息查看</p>
+      <div slot="header" class="header">
+        <i class="el-icon-reading"></i>
+        <span>读者规则信息查看</span>
       </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 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>
 
+      <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)"
+      >
+        <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 {
+  name: "Rule",
   data() {
     return {
-      ruleList:[
+      ruleList: [],
-        {
+      loading: true,
-          ruleId:0,
+    };
-          bookRuleId:Number,
-          bookDays:Number,
-          bookLimitNumber:Number,
-          bookOverdueFee:Number,
-          bookLimitLibrary:"",
-          createTime:"",
-          updateTime:"",
-          
-        }
-
-      ],
-      loading:true
-    }
   },
   methods: {
     async getRuleList() {
-      const {data:res} = await this.$http.get("user/get_rulelist")
+      try {
+        const { data: res } = await this.$http.get("user/get_rulelist");
         if (res.status !== 200) {
-        this.loading = false;
           return this.$message.error(res.msg);
         }
+        this.ruleList = res.data;
         this.$message.success({
           message: res.msg,
-        duration:1000
+          duration: 1000,
-      })
+        });
+      } catch (error) {
+        this.$message.error("获取规则列表失败");
+      } finally {
         this.loading = false;
-      this.ruleList = res.data
       }
     },
+  },
   created() {
-      this.getRuleList()
+    this.getRuleList();
-  }
+  },
 };
 </script>
 
 <style lang="less" scoped>
-.rule_container {
+.rule-container {
-  position: relative;
+  padding: 20px;
-}
-.header {
-  position: absolute;
-  left: 50%;
-  transform: translate(-50%);
-  p {
-    font-size: 36px;
-    color: rgb(70, 130, 180);
-  }
-}
-.banner {
-  display: flex;
-  flex-direction: column;
-  position:absolute;
-  left:50%;
-  transform: translate(-50%);
 
+  .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;
       }
-.el-tooltip{
+    }
-  width: 500px;
+  }
+
+  .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;
+        }
+      }
+    }
+  }
+}
+
+// 响应式布局
+@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;
-  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>