wx-dangyuanjiaoyujidi/pages/activity/index.vue

<template>
	<view>
		<view class="">
			<view class="">
			</view>
			<view class="">
			</view>
		</view>
		<view class="listActivity">
			<view class="activityBox">
				<view class="activityBox-top">
					<image src="../../static/img/img_activity.jpg" style="width: 100%;height: 333rpx;"></image>
					<view class="book-status">
						活动进行中
					</view>
					<view class="book-num">
						<text class="book-num-y"> 200 </text>
						<text>人已报名</text>
					</view>
				</view>
				<view class="activityBox-content flex-col">
					<view class="activityBox-row">
						<text class="activityBox-title">【书香苏州】中共苏州独立支部旧址</text>
					</view>
					<view class="activityBox-row flex-row justify-between">
						<view class="tag tag_green">
							<text>全部人群</text>
						</view>
						<view class="activityBox-btn tag">
							<text>立即报名</text>
						</view>
					</view>

					<view class="activityBox-row">
						<text class="icon-shijian iconfont"></text>
						<text>活动时间：2022-4-6 10:00-11:30</text>

					</view>
					<view class="activityBox-row">
						<text class="icon-huodongfangshi iconfont"></text>
						<text>活动方式：线下</text>

					</view>
					<view class="activityBox-row">
						<text class="icon-huodong iconfont"></text>
						<text>活动地址：苏州市姑苏区体育场路4号</text>
					</view>

					<view class="activityBox-row">
						<text class="icon-renshu iconfont"></text>
						<text>人数限制：不限</text>
					</view>
					<view class="activityBox-row flex-row align-center" style="margin-bottom: 0rpx;">
						<text class="icon-ditu-dibiao iconfont"></text>
						<text>距离：11.3km</text>
						<view class="tomap">
							<text class="icon-daohang1 iconfont" style="margin-right: 0;"></text>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showInfo: true,
				list: []
			}
		},
		methods: {

		}
	}
</script>

<style>
	.tomap {
		width: 34rpx;
		height: 34rpx;
		background: rgba(242, 214, 188, .4);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
		margin-left: 30rpx;
	}

	page {
		background-color: #f7f6f4;
	}

	.iconfont {
		color: #6EAC97;
		font-size: 24rpx;
		margin-right: 19rpx;
	}

	.icon-ditu-dibiao {
		color: #787BA2;
	}

	.tag {
		height: 37rpx;
		background: #6EAC97;
		border-radius: 8rpx;
		padding: 7rpx 16rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.activityBox-row {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #828282;
		margin-bottom: 15rpx;
	}

	.activityBox-btn {

		background: #EF9525;
	}

	.activityBox {
		background-color: #ffffff;
		margin-bottom: 26rpx;
	}

	.activityBox-title {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #4E4E4E;
	}


	.activityBox-content {
		padding: 31rpx 24rpx;
		box-sizing: border-box;
	}

	.activityBox-top {
		position: relative;

	}

	.book-status {
		background: url("@/static/img/status_bg.png") no-repeat;
		background-size: cover;
		width: 255rpx;
		height: 48rpx;
		position: absolute;
		margin-left: -127.5rpx;
		left: 50%;
		top: 142.5rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 48rpx;
	}

	.book-num {
		background: #FFFFFF;
		opacity: 0.85;
		position: absolute;
		right: 0;
		bottom: 21rpx;
		padding: 12rpx 34rpx;
		border-top-left-radius: 53rpx;
		border-bottom-left-radius: 53rpx;
		font-size: 20rpx;
		color: #4E4E4E;
	}

	.book-num-y {
		color: #D98012;
		font-size: 34rpx;
	}
</style>