MOSE-Official-Website-20250712/pages/components/index/VolunteerHeader.vue

<template>
	<view class="volunteer-header">
		<view class="swiper-container" @click="goToDetail">
			<uv-swiper :list="bannerList" indicator  indicatorMode="dot" height="270rpx" circular></uv-swiper>
			<!-- <view class="header-title">
				<text class="title-text">国际志愿者日</text>
				<text class="date-text">12/05</text>
			</view> -->
			<!-- <image class="dove-icon" src="/static/路径 6665@2x.png" mode="aspectFit"></image> -->
		</view>
		<view class="notice-bar" @click="goToAnnouncement">
			<image class="horn-icon" src="/static/首页_小喇叭.png" mode="aspectFit"></image>
			<text class="notice-text">最新一条通知公告内容展示</text>
			<uv-icon name="arrow-right" color="#999" size="14"></uv-icon>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'VolunteerHeader',
		data() {
			return {
				bannerList: [
							'/static/bannerImage.png',
						'/static/bannerImage.png',
						'/static/bannerImage.png',
				]
			}
		},
		methods: {
			goToAnnouncement() {
				// 跳转到公告页面
				uni.navigateTo({
					url: '/subPages/index/announcement'
				})
			},
			goToDetail() {
				// 跳转到详情页面
				uni.navigateTo({
					url: '/subPages/index/activityDetail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.volunteer-header {
	width: 100%;
	
	.swiper-container {
		position: relative;
		margin: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		
		.header-title {
			position: absolute;
			bottom: 20rpx;
			left: 20rpx;
			z-index: 10;
			display: flex;
			flex-direction: column;
			background-color: rgba(0,0,0,0.4);
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			
			.title-text {
				font-size: 36rpx;
				font-weight: bold;
				color: #fff;
			}
			
			.date-text {
				font-size: 28rpx;
				color: #2c5e2e;
				margin-top: 6rpx;
			}
		}
		
		.dove-icon {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			z-index: 10;
			width: 70rpx;
			height: 70rpx;
			background-color: #fff;
			border-radius: 50%;
			padding: 10rpx;
		}
	}
	
	.notice-bar {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 20rpx;
		margin: 0 20rpx 20rpx;
		border-radius: 12rpx;
		// 如何只显示底部阴影

		box-shadow: 0rpx 1rpx 0rpx 0rpx #3a94e1; ;
		// border-bottom: 1rpx solid #3A94E1;
		.horn-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
		
		.notice-text {
			flex: 1;
			font-size: 28rpx;
			color: $uni-text-color;
		}
	}
}
</style>