<template> 
 | 
  <div class="business-card-detail-item"> 
 | 
    <img :src="icon" class="business-card-detail-item-icon" /> 
 | 
    <div class="business-card-detail-item-value">{{ value }}</div> 
 | 
  </div> 
 | 
</template> 
 | 
  
 | 
<script setup lang="ts"> 
 | 
defineOptions({ 
 | 
  name: 'BusinessCardDetailItem', 
 | 
}); 
 | 
  
 | 
type Props = { 
 | 
  icon?: string; 
 | 
  value?: string; 
 | 
}; 
 | 
  
 | 
const props = withDefaults(defineProps<Props>(), {}); 
 | 
</script> 
 | 
  
 | 
<style lang="scss"> 
 | 
@import '@/styles/common.scss'; 
 | 
  
 | 
.business-card-detail-item { 
 | 
  margin-top: 24px; 
 | 
  display: flex; 
 | 
  align-items: center; 
 | 
  
 | 
  .business-card-detail-item-icon { 
 | 
    width: 32px; 
 | 
    height: 32px; 
 | 
    margin-right: 14px; 
 | 
  } 
 | 
  
 | 
  .business-card-detail-item-value { 
 | 
    font-weight: 400; 
 | 
    font-size: 24px; 
 | 
    color: #4e5969; 
 | 
    line-height: 36px; 
 | 
  } 
 | 
} 
 | 
</style> 
 |