teaching-uniapp/pages/hd/hd.vue

<template>
	<view class="main">
		<statusBar :item="navBarData"></statusBar>
		<uni-card :is-shadow="false">
			<view class="uni-body">
				<view class="card">
					<img src="../../static/jys/jys.png" alt="" class="image" />
					<view class="text">
						<p class="text_title">
							<span class="manage">类型</span>
							<span class="t1">这里是活动名称</span>
						</p>
						<view class="fzr">
							<p>活动日期：5.12~5.20</p>
							<p>招募人数：23/50</p>
						</view>
					</view>
				</view>
			</view>
		</uni-card>
		<uni-card :is-shadow="false">
			<view class="uni-body">
				<view class="card2">
					<view class="hdxx">
						<p class="hd">活动信息</p>
						<view class="textcolor">
							<p class="name">
								姓名:
								<span class="name1"></span>
							</p>
							<p class="name">
								联系方式:
								<span class="lx1">172xxxxx5678</span>
							</p>
							<p class="name">
								单位:
								<span class="dw1">xx实验中学学校</span>
							</p>
						</view>
					</view>
				</view>
			</view>
		</uni-card>
		<view class="buttons safe-area-bottom">
			<view class="button-container">
				<button @click="button1Action" class="btn1">清空填写信息</button>
				<span class="button-spacing"></span>
				<!-- 添加间距 -->
				<button @click="button2Action" class="btn2">确认报名</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navBarData: {
				title: '活动报名',
				btn: 1
			}
		};
	},
	methods: {
		button1Action() {
			// 这里添加按钮1点击后触发的动作
			console.log('Button 1 clicked');
		},
		button2Action() {
			// 这里添加按钮2点击后触发的动作
			console.log('Button 2 clicked');
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	.card {
		display: flex;
		// align-items: center; // 如果需要垂直居中
		justify-content: flex-start;
		.image {
			width: 100px;
			height: 100px;
			border-radius: 4px;
			object-fit: cover; // 使图片保持原有比例填充整个元素
		}

		.text {
			margin-left: 10px; // 增加一点空间
			line-height: 35px; // 根据你的需求调整，使文本与图片保持
			.text_title {
				display: flex;
				align-items: center;
				span {
					display: inline-block;
					height: 20px;
					line-height: 20px;
					text-align: center;
					&:last-child {
						margin-left: 5px;
					}
				}
			}
			.manage {
				padding: 2px;
				padding-left: 5px;
				padding-right: 5px;
				// font-size: 12px;
				color: #00b2b6;
				border: 1px solid #00b2b6;
				border-radius: 3px;
				// margin-left: 5px;
			}
			.t1 {
				font-size: 18px;
				color: black;
				font-weight: 550;
			}
			.fzr {
				p {
					margin-left: 5px;
					color: #999999;
				}
			}
		}
	}
	.hdxx {
		.hd {
			color: black;
			font-size: 18px;
			font-weight: 400px;
			line-height: 42px;
		}
		.textcolor {
			color: #999999;
			line-height: 42px;
			.name {
				display: flex;
				justify-content: space-between;
			}
		}
	}
	.buttons {
		background-color: white;
		// display: flex;
		// justify-content: center;
		// align-items: flex-end;
		// bottom: 20px; /* 调整底部的间距 */
		// position: fixed;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 20px;
		box-sizing: border-box;
		.button-container {
			display: flex;
			justify-content: center;
			align-items: center;
			.button-spacing {
				margin: 0 10px; /* 添加按钮间距 */
			}
		}
		button {
			font-size: 16px;
			color: #999999;
			width: 326rpx; /* 设置按钮宽度 */
			border-radius: 50px; /* 设置圆角 */
		}
		.btn1 {
			border: 1px solid #999999;
		}
		.btn2 {
			color: white;
			// margin-left: 50px;
			background-color: #0056a8;
		}
	}
}
</style>