jp-xqjy/pages/news/activityDetails.vue

<template>
	<view>
		<u-navbar  title="荆州工会鹊桥露营主题中秋相亲会"></u-navbar>
		<view class="img">
			<img src="../../static/img/activity.png" alt="">
		</view>
		<view class="details">
			<view class="detail-item">
				<view class="title">
					活动名称:
				</view>
				<view class="content">
                荆州工会鹊桥露营主题中秋相亲会
				</view>
			</view>
			<view class="detail-item">
				<view class="title">
					活动地址:
				</view>
				<view class="content">
			    荆州市沿江路临江仙公园
				</view>
			</view>
			<view class="detail-item">
				<view class="title">
					报名时间:
				</view>
				<view class="content">
			    2022-09-08 18:00截止
				</view>
			</view>
			<view class="detail-item">
				<view class="title">
					活动时间:
				</view>
				<view class="content">
               2022-09-10 16:00-21:00
				</view>
			</view>
			<view class="detail-item">
				<view class="title">
					活动介绍
				</view>
				<view class="content">
			   
				</view>
			</view>
			<view class="detail-item">
				<view class="title">
					特别说明
				</view>
				<view class="content">
			   
				</view>
			</view>
			
		</view>
		
		<u-button>立即报名</u-button>
	</view>
</template>

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

<style lang="scss" scoped>
	/deep/.u-line-1{
		overflow: inherit;
	}
    .img{
		margin: 32rpx;
		height: 404rpx;
		img{
			width: 100%;
			height: 100%;
		}
	}
	
	.details{
		margin: 32rpx;
		font-size: 16px;
		color: #333333;
		.detail-item{
			display: flex;
			margin-bottom: 24rpx;
			.title{
				// width: 26%;
			}
			.content{
				flex: 1;
				margin-left: 24rpx;
			}
		}
	}
	.u-btn{
		width: 74.4%;
		line-height: 44px;
		border-radius: 50px;
		background-color: #FF5E5E;
		font-size: 16px;
		color: #ffffff;
		position: fixed;
		bottom: 8px;
		left: 0;
		right: 0;
	}
	/deep/.u-hairline-border:after{
		border: none;
	}
</style>