jp-railway/pages/staffHome/activityCenter/activityCenter.vue

<template>
	<view>
		<u-navbar title="活动中心"></u-navbar>
		<view class="main">
			 <view class="activity-item">
			 	<view class="title">
			 		2023年度春季职工运动会
			 	</view>
			 	<view class="pictures">
			 		<img src="../../../assets/img/sharePic1.png" alt="">
			 		<img src="../../../assets/img/sharePic2.png" alt="">
			 		<img src="../../../assets/img/sharePic3.png" alt="">
			 	</view>
				<view class="introduce">
					探索了5种改善移动用户体验的绝佳做法，进来学！移动用户体验的绝佳做法，进来学！
				</view>
				<view class="to-detail">
					<view class="tag">
						工会活动
					</view>
					<view class="click">
						<text>点击查看活动详情</text>
						<text><u-icon name="arrow-right" color="#777777"></u-icon></text>
					</view>
				</view>
			 </view>
			 
			 <view class="activity-item">
			 	<view class="title">
			 		2023年度春季职工运动会
			 	</view>
			 	<view class="pictures">
			 		<img src="../../../assets/img/sharePic1.png" alt="">
			 		<img src="../../../assets/img/sharePic2.png" alt="">
			 		<img src="../../../assets/img/sharePic3.png" alt="">
			 	</view>
			 				<view class="introduce">
			 					探索了5种改善移动用户体验的绝佳做法，进来学！移动用户体验的绝佳做法，进来学！
			 				</view>
			 				<view class="to-detail">
			 					<view class="tag tag2">
			 						党建活动
			 					</view>
			 					<view class="click">
			 						<text>点击查看活动详情</text>
			 						<text><u-icon name="arrow-right" color="#777777"></u-icon></text>
			 					</view>
			 				</view>
			 </view>
		</view>
		<u-divider bg-color="#F2F4F4" border-color="#CFD2D5">已经到底了</u-divider>
		<view class="bottom">
			<img src="../../../assets/img/riFill-camera-fill@2x.png">
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		margin:24rpx 32rpx;
		
		.activity-item{
			background-color: #fff;
			padding: 24rpx;
			border-radius: 8px;
			margin-bottom: 24rpx;
			.title{
				color: rgba(51, 51, 51, 1);
				font-size: 18px;
				font-family: 'Medium';
			}
			.pictures {
				display: flex;
				justify-content: space-between;
				margin-top: 16rpx;
			
				img {
					width: 31.4%;
					height: 150rpx;
					border-radius: 16rpx;
				}
			}
			.introduce{
				color: rgba(119, 119, 119, 1);
				line-height: 20px;
				margin-top: 16rpx;
				font-family: 'Regular';
			}
			
		}
		.to-detail{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 16rpx;
			padding-top: 36rpx;
			border-top: 1px solid #F4F6F6;
			.tag{
				border-radius: 4px;
				color: rgba(31, 74, 153, 1);
				font-size: 12px;
				text-align: center;
				border: 1px solid rgba(31, 74, 153, 1);
				line-height: 18px;
				padding: 0 17rpx;
				font-family: 'Medium';
				
			}
			.tag2{
				color: rgba(238, 49, 56, 1);
				border: 1px solid rgba(238, 49, 56, 1);
			}
			.click{
				color: rgba(119, 119, 119, 1);
				font-family: 'Regular';
			}
		}
		
	}

   .bottom{
	   background: linear-gradient(223.81deg, rgba(0,90,217,1) 14.24%,rgba(0,52,148,1) 86.67%);
	   width: 104rpx;
	   height: 104rpx;
	   border-radius: 50px;
	   display: flex;
	   justify-content: center;
	   align-items: center;
	   position: fixed;
	   right: 72rpx;
	   bottom: 72rpx;
	   img{
		   width: 56rpx;
		   height: 56rpx;
		   
	   }
   }
</style>