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

<template>
	<view>
		<u-navbar title="活动奖励"></u-navbar>
		<view class="main">
			<view class="reward-detail">
				<view class="content">
					<view class="title">
						2023年度春季职工运动会活动奖励公示
					</view>
					<view class="tag">
						<view class="item">
							工会活动
						</view>
					</view>
					
				</view>
				 <view class="picture">
				 	<img src="../../../assets/img/sharePic2.png" alt="">
				 </view>
			</view>
			
			<view class="reward-detail">
				<view class="content">
					<view class="title">
						2023庆祝建党节书法作品大赛活动奖励公示
					</view>
					<view class="tag">
						<view class="item item1">
							党建活动
						</view>
					</view>
					
				</view>
				 <view class="picture">
				 	<img src="../../../assets/img/sharePic2.png" alt="">
				 </view>
			</view>	
			
		</view>
		<u-divider bg-color="#F2F4F4" border-color="#CFD2D5">已经到底了</u-divider>
	</view>
</template>

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

<style lang="scss">
	.main{
		font-family: 'Medium';
		padding: 24rpx 32rpx 0 32rpx;
		.reward-detail{
			background-color: #fff;
			padding: 24rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 24rpx;
			.content{
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				margin-right:24rpx;
				.title{
					color: rgba(51, 51, 51, 1);
					font-size: 16px;
					line-height: 23px;
				}
				.tag{
					display: flex;
					.item{
						margin-top: 32rpx;
						line-height: 48rpx;
						padding: 0 12rpx;
						border: 1px solid rgba(31, 74, 153, 1);
						color:rgba(31, 74, 153, 1) ;
						border-radius: 8rpx;
						font-size: 24rpx;
						text-align: center;
					}
					.item1{
						border: 1px solid rgba(238, 49, 56, 1);
						color:rgba(238, 49, 56, 1) ;
					}
				}
			}
			.picture{
				width: 224rpx;
				height: 86px;
				border-radius:5px ;
				img{
					width: 100%;
					height: 100%;
				}
			}
		}
	}

</style>