medicine-xcx/components/drug-user-item/drug-user-item.vue

<template>
	<view class="user_info" @click="selectUser">
		<view class="info">
			<text class="info_title">用药人</text>
			<view class="name_box">
				<text class="name">李快乐</text>
				<text class="name_btn">本人</text>
			</view>
			<view class="other_info">
				<text>女</text>
				<text>23岁</text>
				<text>137****9878</text>
			</view>
		</view>
		<u-icon name="arrow-right"></u-icon>
	</view>
</template>

<script>
export default {
	name: 'drug-user-item',
	data() {
		return {};
	},
	methods: {
		selectUser () {
			this.$tools.navigateTo({
				url: '/pagesA/my_other_list/prescription/select_medicine_man/index'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.user_info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	.info {
		margin-left: 24rpx;
		display: flex;
		flex-direction: column;
		.info_title {
			font-size: 26rpx;
			color: #707070;
			margin-top: 17rpx;
			margin-bottom: 17rpx;
		}
		.name_box {
			font-size: 28rpx;
			color: #000;
			margin-bottom: 17rpx;
			.name_btn {
				margin-left: 10rpx;
				font-size: 24rpx;
				color: #0c85ff;
				border-radius: 10rpx;
				border: 1px solid #0c85ff;
				padding: 5rpx 10rpx;
			}
		}
		.other_info {
			display: flex;
			font-size: 24rpx;
			padding-bottom: 23rpx;
			color: #000;
			text {
				margin-right: 38rpx;
			}
		}
	}
	/deep/ .u-icon__icon {
		padding-right: 37rpx;
	}
}
</style>