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

<template>
	<view>
		<u-navbar title="活动详情"></u-navbar>
		<view class="main">
			<view class="image">
				<u-image width="100%" height="200rpx" :src="src" border-radius="16"></u-image>
			</view>
			<!-- 活动介绍 -->
			<view class="introduction">
				<view class="title">
					活动介绍
				</view>
				<view class="content">
					为贯彻落实习近平新时代中国特色社会主义思想和党的十九大精神，引导荆州工业企业进一步做大、做强、做优，为全市打造“ 一城三区、一区多园 ”和高端制造强市作出新的贡献。
				</view>
			</view>
		
		   <!-- 活动时间 -->
		<view class="date">
			<view class="title">
				活动时间
			</view>
			<view class="item">
				<view class="item-title">
					报名时间
				</view>
				<view class="value">
					2023年1月15日至2023年1月31日
					
				</view>
			</view>
			<view class="item">
				<view class="item-title">
					活动时间
				</view>
				<view class="value">
					2023年1月15日至2023年4月30日
					
				</view>
			</view>
			
		</view>
		<!-- 联系人 -->
		<view class="date">
			<view class="title">
				联系人
			</view>
			<view class="item ">
				<view class="item-title name">
					段问薇
				</view>
				<view class="value">
					19333312231
					
					
				</view>
			</view>
			<view class="item ">
				<view class="item-title name">
					顾伦
				</view>
				<view class="value">
					19612348970
				</view>
			</view>
			
		</view>
		
		<!-- 积分 -->
		<view class="integral">
			 <view class="title">
			 	积分获取
			 </view>
			 <view class="integral-group">
			 	<view class="item item1">
			 		<view class="integral-title">
			 			获取积分途径与方式
			 		</view>
					<view class="value">
						分值
					</view>
			 	</view>
				<view class="item">
					<view class="integral-title">
						阅读文章
					</view>
					<view class="value">
						1
					</view>
				</view>
				<view class="item">
					<view class="integral-title">
						好文点赞
					</view>
					<view class="value">
						1
					</view>
				</view>
				<view class="item">
					<view class="integral-title">
						评论文章
					</view>
					<view class="value">
						5
					</view>
				</view>
				<view class="item">
					<view class="integral-title">
						转发文章
					</view>
					<view class="value">
						1
					</view>
				</view>
				<view class="item">
					<view class="integral-title">
						发布文字内容（记录心得）
					</view>
					<view class="value">
						10
					</view>
				</view>
				<view class="item">
					<view class="integral-title">
						参加党务活动、强国学习
					</view>
					<view class="value">
						10
					</view>
				</view>
				<view class="item">
					<view class="integral-title">
						企业宣传（抖音、双微、小红书等）
					</view>
					<view class="value">
						20
					</view>
				</view>
				<view class="item">
					<view class="integral-title">
						参加羽毛球活动
					</view>
					<view class="value">
						20
					</view>
				</view>
				<view class="item">
					<view class="integral-title">
						参加演讲、讲课
					</view>
					<view class="value">
						20
					</view>
				</view>
				<view class="item">
					<view class="integral-title">
						发表书法、摄影作品
					</view>
					<view class="value">
						10
					</view>
				</view>
				<view class="item">
					<view class="integral-title">
						好人好事
					</view>
					<view class="value">
						50
					</view>
				</view>
			 </view>
		</view>
		</view>
	 <view class="bottom">
	 	<button>发布作品</button>
	 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'https://wx2.sinaimg.cn/mw600/0071CBv1ly8ha20byn9wwj30sg0k8436.jpg'
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 100px;
	}
	
	.main{
		margin: 24rpx 32rpx 0 32rpx;
		// 活动介绍
		.introduction{
			margin-top: 24rpx;
			font-family: 'Regular';
			.title{
				color: rgba(16, 16, 16, 1);
				font-size: 18px;
				line-height: 26px;
			}
			.content{
				color: rgba(51, 51, 51, 1);
				line-height: 24px;
				margin-top: 16rpx;
			}
		}
		
	// 活动时间
	.date{
		font-family: 'Regular';
		margin-top: 32rpx;
		.title{
			color: rgba(16, 16, 16, 1);
			font-size: 18px;
			line-height: 26px;
		}
		.item{
			margin-top:16rpx;
			display: flex;
			color: rgba(51, 51, 51, 1);
			line-height: 20px;
			.item-title{
				margin-right: 24rpx;
			}
			.name{
				width: 100rpx;
			}
		}
	}
	
	}
	// 积分获取
	.integral{
		margin-top: 32rpx;
		.title{
			color: rgba(16, 16, 16, 1);
			font-size: 18px;
			line-height: 26px;
			font-family: 'Regular';
		}
		.integral-group{
			margin-top: 24rpx;
			background-color: #fff;
			.item{
				display: flex;
				justify-content: space-between;
				line-height: 44px;
				padding-left: 16rpx;
				color: rgba(51, 51, 51, 1);
				font-size: 16px;
				border-bottom: solid 1px #e6e6e6;
				font-size: 14rpx;
				.value{
					width: 170rpx;
					text-align: center;
				}
			}
			.item1{
				color: rgba(16, 16, 16, 1);
				font-size: 16px;
			}
		}
	}
 
 
   .bottom{
	   padding: 16rpx 32rpx;
	   background-color: #fff;
	   position: fixed;
	   bottom: 0;
	   left: 0;
	   right: 0;
	   font-family: Arial;
	   uni-button{
		   border-radius: 8px;
		   background-color: rgba(31, 74, 153, 1);
		   color: rgba(255, 255, 255, 1);
		   font-size: 16px;
		   line-height: 40px;
		   
	   }
	   
   }
</style>