jd_logistics/jd_logistics-app/components/AddressInfo.vue

<template>
	<view class="address-info">
		<view class="name-phone">
			<text class="name">{{ address.contactName }}</text>
			<text class="phone">{{ address.contactPhone }}</text>
		</view>
		<view class="address-detail">
			{{ address.provinceName }}{{ address.cityName }}{{ address.countyName }}{{ address.detailedAddress }}</view>
	</view>
</template>

<script setup>
	defineProps({
		address: {
			type: Object,
			required: true
		},
		isDefault: {
			type: Boolean,
			default: false
		},
		isSowAction: {
			type: Boolean,
			default: true
		}
	})
</script>

<style scoped lang="less">
	.address-info {
		display: flex;
		flex-direction: column;
		margin-bottom: 16rpx;

		.name-phone {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;
		}

		.name {
			height: 48rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-right: 30rpx;
			line-height: 48rpx;
		}

		.phone {
			height: 48rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			line-height: 48rpx;
		}

		.address-detail {
			font-size: 28rpx;
			color: #666;
			line-height: 44rpx;
		}

	}
</style>