zhengyiming
昨天 1d472eb06970c85b0edfb58871956bc2c8d69916
packages/components/src/Card/ServiceDetailAddressCard.vue
@@ -1,14 +1,19 @@
<template>
  <div class="mine-service-detail-view-address">
    <div class="mine-service-detail-view-title-wrapper">
      <div class="mine-service-detail-view-title">服务地址</div>
    <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>
    <div class="mine-service-detail-view-item">{{ addressDetail }}</div>
    <div class="mine-service-detail-view-item">{{ name }} {{ contactPhoneNumber }}</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',
});
@@ -19,9 +24,12 @@
  contactPhoneNumber?: string;
  /** 省市区+详细地址+门牌号 */
  addressDetail?: string;
  showArrow?: boolean;
};
const props = withDefaults(defineProps<Props>(), {});
const props = withDefaults(defineProps<Props>(), {
  showArrow: false,
});
</script>
<style lang="scss">
@@ -32,6 +40,13 @@
  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;
@@ -59,5 +74,11 @@
      margin-top: 14px;
    }
  }
  .mine-service-detail-view-arrow {
    width: 32px;
    height: 32px;
    margin-left: 12px;
  }
}
</style>