| | |
| | | <template> |
| | | <div class="mine-service-detail-view-address"> |
| | | <div class="mine-service-detail-view-address-inner"> |
| | | <div class="mine-service-detail-view-title-wrapper"> |
| | | <div class="mine-service-detail-view-title">服务地址</div> |
| | | </div> |
| | | <div class="mine-service-detail-view-item">{{ addressDetail }}</div> |
| | | <div class="mine-service-detail-view-item">{{ name }} {{ contactPhoneNumber }}</div> |
| | | </div> |
| | | <img v-if="showArrow" :src="IconArrow" class="mine-service-detail-view-arrow" /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import IconArrow from '@/assets/setting/icon-arrow.png'; |
| | | |
| | | defineOptions({ |
| | | name: 'ServiceDetailAddressCard', |
| | | }); |
| | |
| | | contactPhoneNumber?: string; |
| | | /** 省市区+详细地址+门牌号 */ |
| | | addressDetail?: string; |
| | | showArrow?: boolean; |
| | | }; |
| | | |
| | | const props = withDefaults(defineProps<Props>(), {}); |
| | | const props = withDefaults(defineProps<Props>(), { |
| | | showArrow: false, |
| | | }); |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | |
| | | margin-bottom: 24px; |
| | | background-color: #fff; |
| | | border-radius: 12px; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | .mine-service-detail-view-address-inner { |
| | | flex: 1; |
| | | min-width: 0; |
| | | } |
| | | |
| | | .mine-service-detail-view-title-wrapper { |
| | | display: flex; |
| | |
| | | margin-top: 14px; |
| | | } |
| | | } |
| | | |
| | | .mine-service-detail-view-arrow { |
| | | width: 32px; |
| | | height: 32px; |
| | | margin-left: 12px; |
| | | } |
| | | } |
| | | </style> |