pet-front-order/pages_order/components/order/ServiceAddress.vue

<template>
	<view class="service-address-card">
		<view class="card-title">
			<text>服务地址</text>
		</view>
		<view class="address-content">
			<view class="address-text">{{address.address}}</view>
			<view class="contact-text">{{address.contact}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			address: {
				type: Object,
				default: () => ({
					address: '',
					contact: ''
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.service-address-card {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		
		&::before {
			content: '';
			display: inline-block;
			width: 8rpx;
			height: 32rpx;
			background-color: #FFAA48;
			margin-right: 16rpx;
			border-radius: 4rpx;
		}
	}
	
	.address-content {
		padding: 20rpx;
		border-radius: 10rpx;
	}
	
	.address-text {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.contact-text {
		font-size: 26rpx;
		color: #666;
	}
</style>