fix: 优化页面

package-lock.json

@@ -19,7 +19,7 @@
         "nanoid": "^4.0.0",
         "node-polyfill-webpack-plugin": "^2.0.1",
         "nprogress": "^0.2.0",
-        "swiper": "^3.4.2",
+        "swiper": "^5.4.5",
         "vue": "^2.6.14",
         "vue-baberrage": "^3.2.4",
         "vue-json-excel": "^0.3.0",
@@ -5267,6 +5267,14 @@
         "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
       }
     },
+    "node_modules/dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "dependencies": {
+        "ssr-window": "^2.0.0"
+      }
+    },
     "node_modules/domain-browser": {
       "version": "4.22.0",
       "resolved": "https://registry.npmmirror.com/domain-browser/-/domain-browser-4.22.0.tgz",
@@ -10420,6 +10428,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/ssr-window": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+    },
     "node_modules/ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
@@ -10624,11 +10637,20 @@
       }
     },
     "node_modules/swiper": {
-      "version": "3.4.2",
+      "version": "5.4.5",
-      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-3.4.2.tgz",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-5.4.5.tgz",
-      "integrity": "sha512-bXolyzBIawQRluQwFbN8DYpe6Q02bKJ2/h4JV+6dzN/WX8a8ZFPa+F0o8z7hEHSyh2NzKkTWaogaTZYVfgmKTw==",
+      "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "dom7": "^2.1.5",
+        "ssr-window": "^2.0.0"
+      },
       "engines": {
         "node": ">= 4.7.0"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/vladimirkharlampidi"
       }
     },
     "node_modules/tapable": {
@@ -15539,6 +15561,14 @@
         "entities": "^2.0.0"
       }
     },
+    "dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "requires": {
+        "ssr-window": "^2.0.0"
+      }
+    },
     "domain-browser": {
       "version": "4.22.0",
       "resolved": "https://registry.npmmirror.com/domain-browser/-/domain-browser-4.22.0.tgz",
@@ -19146,6 +19176,11 @@
         }
       }
     },
+    "ssr-window": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+    },
     "ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
@@ -19292,9 +19327,13 @@
       }
     },
     "swiper": {
-      "version": "3.4.2",
+      "version": "5.4.5",
-      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-3.4.2.tgz",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-5.4.5.tgz",
-      "integrity": "sha512-bXolyzBIawQRluQwFbN8DYpe6Q02bKJ2/h4JV+6dzN/WX8a8ZFPa+F0o8z7hEHSyh2NzKkTWaogaTZYVfgmKTw=="
+      "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
+      "requires": {
+        "dom7": "^2.1.5",
+        "ssr-window": "^2.0.0"
+      }
     },
     "tapable": {
       "version": "2.2.1",

package.json

@@ -20,7 +20,7 @@
     "nanoid": "^4.0.0",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "nprogress": "^0.2.0",
-    "swiper": "^3.4.2",
+    "swiper": "^5.4.5",
     "vue": "^2.6.14",
     "vue-baberrage": "^3.2.4",
     "vue-json-excel": "^0.3.0",

src/components/Home/Home.vue

@@ -1,88 +1,113 @@
 <template>
   <el-container class="home-container">
-    <!-- 头部区域 -->
     <el-header>
-      <div>
+      <div class="logo-container">
-        <!-- <img src="../assets/heima.png" alt="" /> -->
+        <img src="" 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">
-        
+        <el-avatar
-        <div>
+          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
-          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="35"
+          :size="40"
-            style="margin-right: 10px"></el-avatar>
+          class="avatar"
-        </div>
+        ></el-avatar>
-
+        <div class="user">{{ this.user.cardName }}</div>
-        <div class="user">用户:{{ this.user.cardName }}</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" background-color="#fff" text-color="black"
+        <el-menu
-          active-text-color="#ffd04b" :router="true" :collapse="isCollapse" :collapse-transition="false">
+          :default-active="activePath"
+          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="true"
+          unique-opened
+        >
+          <div class="menu-header">
+            <i class="el-icon-reading menu-icon"></i>
+            <span v-if="!isCollapse" class="menu-title">图书管理系统</span>
+          </div>
+
           <el-menu-item index="index" @click="saveNavState('index')">
-            <i class="iconfont icon-shouyefill"></i>
+            <i class="el-icon-s-home"></i>
-            <span slo="title">首页</span>
+            <span slot="title">首页</span>
           </el-menu-item>
+
           <el-menu-item index="search" @click="saveNavState('search')">
-            <i class="iconfont icon-sousuoxiao"></i>
+            <i class="el-icon-search"></i>
             <span slot="title">图书查询</span>
           </el-menu-item>
+
           <el-menu-item index="rule" @click="saveNavState('rule')">
-            <i class="iconfont icon-guizeshezhi"></i>
+            <i class="el-icon-s-order"></i>
             <span slot="title">读者规则</span>
           </el-menu-item>
+
           <el-menu-item index="notice" @click="saveNavState('notice')">
-            <i class="iconfont icon-gonggao1"></i>
+            <i class="el-icon-bell"></i>
             <span slot="title">查看公告</span>
           </el-menu-item>
-          <el-menu-item index="information" @click="saveNavState('information')">
+
-            <i class="iconfont icon-gerenxinxi"></i>
+          <el-menu-item
+            index="information"
+            @click="saveNavState('information')"
+          >
+            <i class="el-icon-user"></i>
             <span slot="title">个人信息</span>
           </el-menu-item>
+
           <el-menu-item index="borrow" @click="saveNavState('borrow')">
-            <i class="iconfont icon-tushuqikan"></i>
+            <i class="el-icon-notebook-2"></i>
             <span slot="title">借阅信息</span>
           </el-menu-item>
+
           <el-menu-item index="violation" @click="saveNavState('violation')">
-            <i class="iconfont icon-weizhangchaxun"></i>
+            <i class="el-icon-warning"></i>
             <span slot="title">违章信息</span>
           </el-menu-item>
+
           <el-menu-item index="comment" @click="saveNavState('comment')">
-            <i class="iconfont icon-liuyan"></i>
+            <i class="el-icon-chat-line-round"></i>
             <span slot="title">读者留言</span>
           </el-menu-item>
-          <el-menu-item index="intelligent" @click="saveNavState('intelligent')">
+
+          <el-menu-item
+            index="intelligent"
+            @click="saveNavState('intelligent')"
+          >
             <i class="el-icon-monitor"></i>
             <span slot="title">智能推荐</span>
           </el-menu-item>
-<!--          <el-menu-item index="chat" @click="saveNavState('chat')">-->
-<!--            <i class="el-icon-monitor"></i>-->
-<!--            <span slot="title">图书反馈</span>-->
-<!--          </el-menu-item>-->
         </el-menu>
       </el-aside>
-      <!-- 右侧内容主体 -->
+
       <el-main>
-        <!-- 路由占位符 -->
         <router-view></router-view>
-        <div class="footer">
+        <div class="footer"></div>
-         
-        </div>
       </el-main>
     </el-container>
   </el-container>
 </template>
 
 <script>
-
-
 export default {
   data() {
     return {
@@ -122,17 +147,16 @@ export default {
     this.user.userId = id;
     const { data: res } = await this.$http.post("user/getData", this.user);
     console.log(res);
-    window.sessionStorage.setItem('cardNumber', res.data.cardNumber)
+    window.sessionStorage.setItem("cardNumber", res.data.cardNumber);
     this.user = res.data;
   },
-  async mounted() { },
+  async mounted() {},
   methods: {
     logout() {
       window.sessionStorage.clear();
       this.$router.push("/login");
     },
 
-
     //点击按钮，切换菜单的折叠与展开
     toggleCollapse() {
       this.isCollapse = !this.isCollapse;
@@ -146,85 +170,205 @@ export default {
     },
     toGitee() {
       console.log(1123);
-    }
+    },
   },
 };
 </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: #f5f5f5;
+    font-size: 12px;
+    line-height: 30px;
+    color: #666;
+    border-bottom: 1px solid #eee;
+    transition: all 0.3s;
+
+    &:hover {
+      background: #e6f7ff;
+      color: #1890ff;
+    }
+  }
 
   .el-menu {
     border-right: none;
   }
+
+  .el-menu-item {
+    margin: 4px 0;
+
+    &:hover {
+      background-color: #e6f7ff !important;
+      color: #1890ff !important;
+    }
+
+    &.is-active {
+      background-color: #e6f7ff !important;
+      color: #1890ff !important;
+      border-right: 3px solid #1890ff;
+    }
+  }
 }
 
 .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 {
+.sidebar-container {
-  background-color: #4a5064;
+  transition: width 0.3s;
-  font-size: 10px;
+  background-color: #001529;
-  line-height: 24px;
+  overflow: hidden;
-  color: #fff;
+
-  text-align: center;
+  .menu-header {
-  //设置文字之间的间距
+    height: 56px;
-  letter-spacing: 0.2em;
+    padding: 0 16px;
-  cursor: pointer;
+    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;
+    }
+  }
+
+  .toggle-button {
+    height: 32px;
+    background: #002140;
+    color: #fff;
+    text-align: center;
+    line-height: 32px;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+      background: #002849;
+    }
+
+    i {
+      font-size: 16px;
+    }
+  }
+
+  .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 {
+.el-main {
-  margin-right: 15px;
+  padding: 20px;
-  color: #ccc;
+  background: #f0f2f5;
-  font-size: 16px;
 }
-
+</style>
-.el-menu-item:hover {
-  background-color: rgb(51, 122, 183) !important;
-}
-
-// .el-menu-item{
-//   color:rgb(135, 206, 235) !important;
-// }</style>

src/components/Index/Index.vue

@@ -1,20 +1,104 @@
 <template>
   <div class="index">
+    <div class="welcome-section">
+      <h1>欢迎使用图书推荐系统</h1>
+      <p>发现知识的海洋，开启阅读之旅</p>
+    </div>
     <swiperVue />
+    <div class="feature-section">
+      <el-row :gutter="20">
+        <el-col :span="8">
+          <div class="feature-card">
+            <i class="el-icon-reading"></i>
+            <h3>海量藏书</h3>
+            <p>丰富的图书资源，满足您的阅读需求</p>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="feature-card">
+            <i class="el-icon-search"></i>
+            <h3>智能推荐</h3>
+            <p>个性化的图书推荐，找到您喜欢的书籍</p>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="feature-card">
+            <i class="el-icon-service"></i>
+            <h3>便捷服务</h3>
+            <p>简单的借阅流程，贴心的读者服务</p>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
-import swiperVue from "../../components/Swiper/swiper.vue"
+import swiperVue from "../../components/Swiper/swiper.vue";
 export default {
   name: "index",
-  components:{
+  components: {
-    swiperVue
+    swiperVue,
   },
-  created() {
-      // const {data:res} = await this.$http.get('/user/test');
-      // console.log(res);
-    },
-
 };
 </script>
+
+<style lang="less" scoped>
+.index {
+  padding: 20px;
+  background-color: #f5f7fa;
+
+  .welcome-section {
+    text-align: center;
+    margin-bottom: 30px;
+
+    h1 {
+      font-size: 32px;
+      color: #303133;
+      margin-bottom: 10px;
+    }
+
+    p {
+      font-size: 16px;
+      color: #909399;
+    }
+  }
+
+  .feature-section {
+    margin-top: 40px;
+    padding: 20px 0;
+
+    .feature-card {
+      text-align: center;
+      padding: 30px;
+      background: #fff;
+      border-radius: 8px;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+      transition: all 0.3s;
+
+      &:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+      }
+
+      i {
+        font-size: 48px;
+        color: #409eff;
+        margin-bottom: 20px;
+      }
+
+      h3 {
+        font-size: 20px;
+        color: #303133;
+        margin-bottom: 10px;
+      }
+
+      p {
+        font-size: 14px;
+        color: #606266;
+        line-height: 1.6;
+      }
+    }
+  }
+}
+</style>

src/components/Login.vue

@@ -4,7 +4,10 @@
     <div class="login_box">
       <!-- 头像区域 -->
       <div class="avatar_box">
-        <img src="../assets/images/dinosaur.jpg" alt="" />
+        <img
+          src="https://minio-img.933999.xyz/images-lankong/lankong/2025/04/13/67fba08cd075b.jpeg"
+          alt=""
+        />
       </div>
       <!-- 登录表单区域 -->
       <el-form

src/components/Swiper/swiper.vue

@@ -1,53 +1,55 @@
 <template>
-  <!--基础存放容器-->
+  <div class="swiper-section">
-  <div class="swiper-container">
+    <div class="swiper-container">
-    <!-- 需要进行轮播的部分 -->
+      <div class="swiper-wrapper">
-    <div class="swiper-wrapper">
+        <div
-      <!-- 每个节点 -->
+          class="swiper-slide"
-      <div class="swiper-slide">
+          v-for="(item, index) in swiperItems"
-        <img
+          :key="index"
-          data-src="https://pic.yupi.icu/5563/202311091857319.jpg"
+        >
-          src="https://pic.yupi.icu/5563/202311091902481.gif"
+          <div class="slide-content">
-          alt="书籍1"
+            <img :src="item.image" :alt="item.title" class="swiper-lazy" />
-          class="swiper-lazy"
+            <div class="slide-info">
-        />
+              <h3>{{ item.title }}</h3>
-      </div>
+              <p>{{ item.description }}</p>
-      <div class="swiper-slide">
+            </div>
-        <img
+          </div>
-          data-src="https://pic.yupi.icu/5563/202311091857306.jpg"
+        </div>
-          src="https://pic.yupi.icu/5563/202311091902481.gif"
-          alt="书籍2"
-          class="swiper-lazy"
-        />
-        <div class="swiper-lazy-preloader"></div>
-      </div>
-      <div class="swiper-slide">
-        <img
-          data-src="https://pic.yupi.icu/5563/202311091857330.jpg"
-          src="https://pic.yupi.icu/5563/202311091902481.gif"
-          alt="书籍3"
-          class="swiper-lazy"
-        />
-        <div class="swiper-lazy-preloader"></div>
       </div>
+
+      <div class="swiper-pagination"></div>
+      <div class="swiper-button-prev"></div>
+      <div class="swiper-button-next"></div>
     </div>
-
-    <!--如果需要使用分页器-->
-    <div class="swiper-pagination swiper-pagination-white"></div>
-
-    <!-- 如果需要使用前进后退按钮 -->
-    <div class="swiper-button-prev swiper-button-white"></div>
-    <div class="swiper-button-next swiper-button-white"></div>
   </div>
 </template>
 
 <script>
-import swiper from "swiper";
+import Swiper from "swiper";
+import "swiper/css/swiper.css";
 
 export default {
-  name: "",
+  name: "SwiperComponent",
   data() {
-    return {};
+    return {
+      swiperItems: [
+        {
+          image: "https://pic.yupi.icu/5563/202311091857319.jpg",
+          title: "精选图书推荐",
+          description: "发现更多优质读物",
+        },
+        {
+          image: "https://pic.yupi.icu/5563/202311091857306.jpg",
+          title: "特色主题书单",
+          description: "探索不同领域的知识",
+        },
+        {
+          image: "https://pic.yupi.icu/5563/202311091857330.jpg",
+          title: "新书速递",
+          description: "第一时间了解新书资讯",
+        },
+      ],
+    };
   },
   mounted() {
     this.initSwiper();
@@ -55,44 +57,114 @@ export default {
   methods: {
     initSwiper() {
       new Swiper(".swiper-container", {
-        //设置轮播的循环方式
         loop: true,
-
+        autoplay: {
-        //设置自动播放间隔时间
+          delay: 3000,
-        autoplay: 2000,
+          disableOnInteraction: false,
-
+        },
-        // 轮播效果,默认为平滑轮播
+        effect: "slide", // 改为滑动效果
-        effect: "slide",
+        speed: 800,
-
+        pagination: {
-        //分页器
+          el: ".swiper-pagination",
-        pagination: ".swiper-pagination",
+          clickable: true,
-
+        },
-        //前进后退按钮
+        navigation: {
-        prevButton: ".swiper-button-prev",
+          nextEl: ".swiper-button-next",
-        nextButton: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
-
+        },
-        // 用户中断轮播后续播
-        autoplayDisableOnInteraction: false,
-        //懒加载
-        lazyLoading: true,
       });
     },
   },
 };
 </script>
 
-<style scoped>
+<style lang="less" scoped>
-@import "../../../node_modules/swiper/dist/css/swiper.css";
+.swiper-section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #f5f7fa;
+  padding: 20px 0;
+}
 
 .swiper-container {
-  width: 1000px;
+  width: 1200px;
-  height: 650px;
+  height: 500px;
-  margin-top: 40px;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
 }
 
-.swiper-slide img {
+.swiper-slide {
-  width: 100%;
+  position: relative;
-  height: 100%;
+
-  object-fit: cover;
+  .slide-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: transform 0.3s;
+    }
+
+    .slide-info {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      padding: 30px;
+      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
+      color: #fff;
+
+      h3 {
+        font-size: 28px;
+        margin-bottom: 10px;
+        font-weight: 600;
+      }
+
+      p {
+        font-size: 16px;
+        opacity: 0.9;
+      }
+    }
+  }
+
+  &:hover {
+    img {
+      transform: scale(1.05);
+    }
+  }
 }
-</style>
+
+.swiper-button-prev,
+.swiper-button-next {
+  background-color: rgba(255, 255, 255, 0.3);
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  transition: all 0.3s;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+}
+
+.swiper-pagination-bullet {
+  width: 10px;
+  height: 10px;
+  background: rgba(255, 255, 255, 0.7);
+  opacity: 0.7;
+
+  &-active {
+    background: #fff;
+    opacity: 1;
+  }
+}
+
+.swiper-lazy-preloader {
+  border-color: #409eff;
+}
+</style>

src/main-dev.js

@@ -5,7 +5,7 @@ import router from './router'
 //引入element ui 组件库
 import './plugins/element.js'
 //引入粒子插件
-import VueParticles from 'vue-particles'
+// import VueParticles from 'vue-particles'
 //引入全局样式表
 import './assets/css/global.css'
 //引入图书管理系统的图标和字体库
@@ -32,7 +32,7 @@ Vue.prototype._ = _  //全局导入的挂载方式
 Vue.prototype.$echarts = echarts
 
 //注册粒子插件
-Vue.use(VueParticles)
+// Vue.use(VueParticles)
 //main.js:
 import { vueBaberrage } from 'vue-baberrage'
 //使用弹幕插件