<template>
  <div>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside style="width: 200px;min-height: 100vh;background-color:rgb(254, 64, 74)">
        <div style="height: 60px; display: flex; align-items: center; justify-content: center;">
          <img src="./photo/GH.jpg" alt="Logo" style="width: 100%; height: auto;">
        </div>

        <el-menu class="custom-menu" style="width: 200px; background-color: #fe8f8f;" popper-append-to-body>
          <el-row>
            <el-col :span="12">
              <el-menu class="custom-menu" style="width: 200px; background-color: #fe8f8f;" popper-append-to-body>
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>导航栏</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="2">
                      <!-- 使用 router-link 跳转 -->
                      <router-link to="/home#section1">首页</router-link>
                    </el-menu-item>
                    <el-menu-item index="4">
                      <router-link to="/borrow">借阅系统</router-link>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </el-menu>
      </el-aside>

      <el-container>
        <!-- 头部 -->
        <el-header style="font-family: 楷体;text-align: center;font-weight: bold;background-color:rgb(254, 64, 74);color: white;font-size: 50px;">
          红色精神图书管理系统
        </el-header>

        <!-- 主要 -->
        <el-main>
          <el-carousel :interval="5000" arrow="always" height="692px">
            <!-- 使用 v-for 循环动态绑定图片 -->
            <el-carousel-item v-for="(image, index) in carouselImages" :key="index">
              <div class="carousel-image-container">
                <img :src="require(`${image}`)" alt="carousel" class="carousel-image">
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      // 图片列表
      carouselImages: [
        './photo/home.png',
        './photo/home1.png',
        './photo/home2.png'
      ]
    };
  }
};
</script>

<style scoped>
.el-menu-item:hover {
  background-color: yellow!important;
  color: red!important; /* 鼠标悬停时文字颜色变为红色 */
}

.carousel-image-container {
  width: 100%; /* 与 el-carousel 的宽度一致 */
  height: 692px; /* 与 el-carousel 的高度一致 */
  overflow: hidden;
  text-align: center;
}

.carousel-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 确保图片按比例显示并适应容器 */
}
</style>
帮忙加一个账号注销按钮，点击注销按钮，跳回注册登录页面import Vue from 'vue';
import VueRouter from 'vue-router';
import HomeView from '../views/HomeView.vue';
import BookView from '../views/BookView.vue';
import UserBorrow from '../views/UserBorrow.vue';
import LoginRegister from '@/views/LoginRegister.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/home',
    name: 'home',
    component: HomeView
  },
  {
    path: '/books',
    name: 'books',
    component: BookView // 图书管理系统，管理员页面
  },
  {
    path: '/borrow',
    name: 'borrow',
    component: UserBorrow // 用户借阅系统页面
  },
  {
    path: '/loginRegister',
    name: 'loginRegister',
    component: LoginRegister // 登录注册页面
  },
  {
    path: '/', // 默认路径重定向
    redirect: '/loginRegister'
  }
];

const router = new VueRouter({
  mode: 'history', // 使用HTML5历史记录模式，避免带有#号的路径
  routes
});

export default router;