1.效果如下
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2a282bec54dd798906227e1628805433.png)
2.代码
<template>
<div id="carouselExampleIndicators" class="carousel slide" style=" position: absolute; left: 250px;top:200px">
<div class="carousel-inner carousel-fade" data-bs-ride="carousel">
<div class="carousel-item active" data-bs-interval="2000">
<img src="../../../assets/mjuBeautifulScenery.jpg" class="d-block w-20" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="../../../assets/mjuBeautifulScenery1.jpg" class="d-block w-20" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="../../../assets/mjuBeautifulScenery2.jpg" class="d-block w-20" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="row justify-content-end" style="position: absolute;top:300px;left:0;right:300px;bottom:0;">
<div class="col-2">
<!-- prevent 阻止组件之间的向上或向下传递 -->
<div class="card">
<div class="card-body">
<form @submit.prevent="login">
<p class="fs-2 ustify-content-center">登录</p>
<div class="mb-3">
<label for="username" class="form-label fs-6">学号或教职工工号</label>
<input v-model="username" type="text" class="form-control" id="username"
placeholder="请输入学号或教职工工号">
</div>
<div class="mb-3">
<label for="password" class="form-label fs-6">密码</label>
<input v-model="password" type="password" class="form-control" id="password"
placeholder="请输入密码">
</div>
<div class="error_message">{{ error_message }}</div>
<button class="btn btn-primary btn-lg login_button" type="submit">登录</button>
<button class="btn btn-info btn-lg login_button" @click="to_register()" type="button">注册</button>
</form>
</div>
</div>
</div>
</div>
</template>
3.细节
淡入淡出加自动轮播效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a287059ee636f3b104dcbfe0c17c6c7e.png)
淡入淡出即class里添加carousel-fade 即可
自动轮播 data-bs-ride = “carousel” (如果 = “true” 需要用户先点一下才可自动轮播)