studyTest/pages/index/index.vue

<template>
	<view>
		<view class="swiper1">
			<swiper circular autoplay interval="1000" indicator-dots indicator-color="#8f939c"
				indicator-active-color="#e43d33">
				<swiper-item>
					<img src="../../common/images/原始黄其振.jpg" class="swiperItem" />
				</swiper-item>
				<swiper-item>
					<img src="../../common/images/西装黄其振.jpg" class="swiperItem" />
				</swiper-item>
				<swiper-item>
					<img src="../../common/images/真我光锥.jpg" class="swiperItem" />
				</swiper-item>
				<swiper-item>
					<img src="../../common/images/无腿黄其振.jpg" class="swiperItem" />
				</swiper-item>
				<swiper-item>
					<img src="../../common/images/证件照黄其振.jpg" class="swiperItem" />
				</swiper-item>
			</swiper>
		</view>
		<view class="announcement">
			<view class="login">
				<button @click="handleLogin"></button>
			</view>
			<view class="icon1">
				<uni-icons type="chatboxes" size="20"></uni-icons>
				<text class="announcement-title" style="align-items: center;justify-content: center;">公告</text>
			</view>
			<view class="swiper2">
				<swiper vertical circular autoplay interval="1000">
					<swiper-item class="notice-item">这是一条公告</swiper-item>
					<swiper-item class="notice-item">大喊我是黄其振的狗自动登录</swiper-item>
				</swiper>
			</view>
			<view class="icon2">
				<uni-icons type="right" size="20"></uni-icons>
			</view>
		</view>
	<view>
		<button type="primary" plain="true" class="button1">
			<text>点击登录</text>
		</button>
	</view>
	</view>
</template>

<script setup name="homePage">
</script>

<style scoped>
	.button1 {
		width: 220rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.swiper1 {
		margin: 20rpx 0;
		height: 300rpx;
	}

	.swiperItem {
		width: 90%;
		height: 300rpx;
		padding: 0 35rpx;
		align-items: center;
		object-fit: cover;
		border-radius: 16rpx;
		justify-content: center;
	}

	.announcement {
		display: flex;
		margin-top: 20rpx;
		width: 90%;
		margin:0 35rpx;
		min-height: 30rpx;
		background-color: rgb(203, 182, 207);
	}

	.swiper2 {
		flex: 1;
		height: 60rpx;
		overflow: hidden;
		padding: 10rpx;
	}

	.notice-item {
		flex: 1;
		width: 100%;
	}

	.icon1 {
		justify-content: center;
		align-items: center;
		width: 140rpx;
		padding: 10rpx;
	}

	.icon2 {
		justify-content: center;
		align-items: center;
		width: 80rpx;
		padding: 10rpx;
	}
</style>