sishitongtang-worker/pages/detailNursing/detailNursing.vue

<template>
	<view>
		<cpn-navbar title="护理详情" :isBack="true"></cpn-navbar>

		<view>
			<!-- 用户信息 -->
			<view class="user-info">
				<view class="top">
					<view class="left">
						<u-image src="/static/logo.png" width="104" height="104" shape="circle"></u-image>
					</view>
					<view class="center">
						<view class="name">余美君</view>
						<view class="infos">
							<view class="age">74岁</view>
							<view class="sex">女</view>
							<view class="organ">机构护理</view>
						</view>
					</view>
					<view class="right">
						<view class="icon3"></view>
						<view>进行中</view>
					</view>
				</view>

				<view class="line"></view>

				<view class="bottom">
					<view class="client">
						<u-icon name="/static/detail/people.png" width="26" height="26"></u-icon>
						<view>委托人：余夏秀</view>
					</view>
					<view class="address">
						<u-icon name="map" width="28" height="28" color="#1479FF"></u-icon>
						<view>通园路666号（地图：通园路66号）</view>
					</view>
					<view class="phone">
						<u-icon name="phone" width="28" height="28" color="#1479FF"></u-icon>
						<view>158****5455</view>
					</view>
				</view>
			</view>

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

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
		computed: {

		},
	}
</script>

<style scoped lang="scss">
	// 待护理
	.icon1 {
		width: 16rpx;
		height: 16rpx;
		background: #FDB030;
		border-radius: 100%;

		margin-right: 14rpx;
	}

	//已完成
	.icon2 {
		width: 16rpx;
		height: 16rpx;
		background: #1173FF;
		border-radius: 100%;

		margin-right: 14rpx;
	}

	//进行中
	.icon3 {
		width: 12rpx;
		height: 12rpx;
		background: #2EC28B;
		border-radius: 100%;

		margin-right: 14rpx;
		position: relative;

		&::after {
			content: '';
			width: 24rpx;
			height: 24rpx;
			border: 2rpx solid #2EC28B;
			border-radius: 100%;
			animation: icon-scale 3s linear infinite;

			position: absolute;
			top: -8rpx;
			left: -8rpx;
		}

		@keyframes icon-scale {

			0%,
			30%,
			100%,
			40% {
				transform: scale(0.7, 0.7);
			}

			70% {
				transform: scale(1, 1);
			}
		}
	}

	.user-info {
		width: 710rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);

		margin: 40rpx auto 0 auto;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;

			padding-top: 34rpx;
			padding-bottom: 30rpx;

			.left {
				padding-left: 20rpx;
			}

			.center {
				flex: 1;

				padding-left: 24rpx;

				.name {
					height: 48rpx;
					font-size: 32rpx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #333333;
					line-height: 24rpx;
				}

				.infos {
					display: flex;
					align-items: center;

					padding-top: 20rpx;

					.age {
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #A7AFBC;
						line-height: 34rpx;
					}

					.sex {
						width: 40rpx;
						height: 40rpx;
						background: #FDECEC;
						opacity: 0.5;
						font-size: 28rpx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #36596A;
						text-align: center;
						line-height: 40rpx;

						margin-left: 20rpx;
					}

					.organ {
						width: 140rpx;
						height: 40rpx;
						background: #F9F9F9;
						font-size: 28rpx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #36596A;
						line-height: 40rpx;
						text-align: center;

						margin-left: 20rpx;
					}
				}
			}

			.right {
				display: flex;
				align-items: center;

				padding-right: 20rpx;
			}
		}

		.line {
			width: 670rpx;
			height: 2rpx;
			border: 2rpx solid #EEEFF5;

			margin: 30rpx auto 0 auto;
		}

		.bottom {

			padding: 26rpx 0 34rpx 24rpx;

			.bottom-item {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #36596A;

				&>view {
					padding-left: 16rpx;
				}
			}

			.client {
				@extend .bottom-item;
			}

			.address {
				@extend .bottom-item;

				padding-top: 18rpx;
			}

			.phone {
				@extend .bottom-item;

				padding-top: 18rpx;
			}
		}
	}
</style>