teaching-uniapp/pages/dy/dy.vue

<template>
	<view>
		<statusBar :item="navBarData"></statusBar>
		<view class="main_part">
			<view class="content">
				<!-- <img class="image" src="../../static/logo.png" alt="" /> -->
				<image class="image" src="../../static/mine/Avatar.png" mode=""></image>
				<view class="text">
					<p class="t1">橘子很橘子</p>
					<p class="dy">订阅了您的教研室&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2023-04-01</p>
				</view>
				<button class="btn">回粉</button>
			</view>
			<view class="content">
				<!-- <img class="image" src="../../static/logo.png" alt="" /> -->
				 <image class="image" src="../../static/mine/Avatar.png" mode=""></image>
				<view class="text">
					<p class="t1">橘子很橘子</p>
					<p class="dy">订阅了您的教研室&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2023-04-01</p>
				</view>
				<button class="btn">回粉</button>
			</view>
			<view class="content">
				<!-- <img class="image" src="../../static/logo.png" alt="" /> -->
				 <image class="image" src="../../static/mine/Avatar.png" mode=""></image>
				<view class="text">
					<p class="t1">橘子很橘子</p>
					<p class="dy">订阅了您的教研室&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2023-04-01</p>
				</view>
				<button class="btn">+关注</button>
			</view>
			<view class="content">
				<!-- <img class="image" src="../../logo.png" alt="" /> -->
				<image class="image" src="../../static/mine/Avatar.png" mode=""></image>
				<view class="text">
					<p class="t1">橘子很橘子</p>
					<p class="dy">订阅了您的教研室&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2023-04-01</p>
				</view>
				<button class="btn">互相关注</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navBarData: {
				title: '新增订阅',
				btn: 1
			}
		};
	}
};
</script>

<style lang="scss" scoped>
.content {
	// margin-top: 5px;
	background-color: white;
	display: flex;
	flex-direction: row; /* 使内容垂直排列 */
	padding: 10px;
	.image {
		width: 58px;
		height: 58px;
		border-radius: 50%;
	}
	.text {
		flex-grow: 1; /* 填充剩余空间，并根据其内容自适应宽度 */

		padding: 5px;
		line-height: 25px;
		.t1,
		.dy {
			white-space: nowrap;
		}
		.t1 {
			font-weight: 600px;
			font-size: 16px;
			color: black;
		}
		.dy {
			font-size: 12px;
			color: #999999;
		}
	}
	.btn {
		// flex-grow: 1; /* 填充剩余空间 */
		// display: flex;
		// justify-content: center; /* 水平居中 */
		// align-items: center; /* 垂直居中 */
		background-color: #adadad;
		width: 90px;
		height: 35px;
		border-radius: 42px;
		margin-top: 15px;
		// margin-left: 25px;
		font-size: 14px;
		text-align: center;
		// line-height: 35px;
		color: white;
	}
}
</style>