ykz-wx/pages/index/TopCard.vue

<template>
	<view class="top-card" v-if="info">
		<view class="card-top">
			<image mode="heightFix" src="/static/image/head.png" />
			<view class="card-top-right">
				<view class="card-top-right-name">{{info.name}}<text class="iconfont" @click="onClick">{{ showIcon ? '&#xe8bf;' : '&#xe901;' }}</text></view>
				<view>{{info.addr}}<text class="iconfont">&#xe602;</text></view>
				<view class="card-top-right-sex">{{info.sex}} | {{info.text}}</view>
			</view>
		</view>
		<view class="card-bottom">
			<view>
				<view class="label">证件号码</view>
				<view>{{info.idCard}}</view>
			</view>
			<view class="second">
				<view class="label">最近就诊</view>
				<view>{{info.date}}</view>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import { PropType, ref } from 'vue'
	
	const emit = defineEmits(['update'])
	defineProps({
		info: {
			type: Object as PropType<any>,
			default: () => ({}),
		},
	})
	const showIcon = ref(false)
	const onClick = ()=> {
		showIcon.value = !showIcon.value
		emit('update',showIcon.value)
	}
</script>

<style lang="scss" scoped>
	.top-card {
		border-radius: 0px 0px $uni-spacing-row-s2 $uni-spacing-row-s2;
		background: $uni-color-primary;
		padding: $uni-spacing-col-s2 $page-row-spacing $uni-spacing-col-s4;
		border: 1px solid $uni-border-color;

		.card-top {
			@include flex;
			margin-bottom: $uni-spacing-col-s4;
			color: #fff;

			image {
				width: 140rpx;
				height: 140rpx;
				display: block;
				margin-right: $uni-spacing-row-s4;
			}

			.card-top-right {
				flex: 1;
				line-height: $uni-line-height-base;

				.iconfont {
					margin-left: 8rpx;
				}

				.card-top-right-name {
					font-size: $uni-font-size-xxxl;
					line-height: $uni-line-height-xxxl;
					display: flex;
					align-items: center;
					.iconfont {
						line-height: $uni-line-height-xxxl;
						font-size: 32rpx;
					}
				}

				.card-top-right-sex {
					font-size: $uni-font-size-sm;
					line-height: $uni-line-height-sm;
				}
			}
		}

		.card-bottom {
			background-color: #fff;
			color: $uni-text-color;
			border-radius: $uni-spacing-row-s2;
			padding: $uni-spacing-row-s4;
			line-height: $uni-line-height-base;
			@include flex;

			>view {
				flex: 1;
				@include flex;
				flex-direction: column;
			}

			.label {
				color: $uni-text-color-grey;
				margin-bottom: 24rpx;
			}

			.second {
				position: relative;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					background: $uni-border-color;
					width: 1px;
					height: 80rpx;
					-webkit-transform: scaleX(0.5);
					transform: scaleX(0.5);
					-webkit-transform-origin: 0 0;
					transform-origin: 0 0;
				}
			}
		}
	}
</style>