spring-boot-online-exam/frontend/src/views/home/Banner.vue

<template>
  <!-- 头部区域 -->
  <div class="banner-wrapper">
    <!-- 标题区域 -->
    <div class="banner-title-wrapper">
      <!-- 标题线动画效果 -->
      <div class="title-line-wrapper" style="opacity: 1; transform: translate(0px, 0px);">
        <div class="title-line" style="transform: translateX(-64px);"></div>
      </div>
      <!-- 主标题 -->
      <h1 class="" style="opacity: 1; transform: translate(0px, 0px);">Online Exam</h1>
      <!-- 副标题 -->
      <p style="opacity: 1; transform: translate(0px, 0px);">
        <span>基于SpringBoot+Vue技术栈开发的在线考试系统</span>
      </p>
      <!-- 按钮区域 -->
      <div class="button-wrapper">
        <!-- 预览按钮，链接到GitHub页面 -->
        <a href="https://github.com/19920625lsg">
          <a-button type="primary">预览</a-button>
        </a>
        <!-- 开始使用按钮，点击后导航到文档页面 -->
        <a @click="$router.push({ name: 'docs' })">
          <a-button style="margin: 0 16px;">开始使用</a-button>
        </a>
      </div>
    </div>
    <!-- 图片轮播区域 -->
    <div class="banner-image-wrapper" style="opacity: 1;">
      <!-- 图片轮播组件，设置自动播放和显示箭头 -->
      <a-carousel arrows autoplay>
        <!-- 动态生成轮播图片 -->
        <div v-for="i in 5" :key="i">
          <img :src="`/home/cover${i}.jpg`" style="height: 324px"/>
        </div>
      </a-carousel>
    </div>
  </div>
</template>

<script>
// 定义一个名为 'Banner' 的组件
export default {
  name: 'Banner'
}
</script>
// 引入外部样式文件
<style lang="less">
  @import "home";
</style>