|  |  | 
 |  |  | <template> | 
 |  |  |   <div class="mine-agreement-sign-detail-item"> | 
 |  |  |     <div class="mine-agreement-sign-detail-item-lebel"> | 
 |  |  |     <div | 
 |  |  |       class="mine-agreement-sign-detail-item-lebel" | 
 |  |  |       :style="{ width: labelWidth, textAlign: textAlign }" | 
 |  |  |     > | 
 |  |  |       <slot name="label"> | 
 |  |  |         {{ label }} | 
 |  |  |       </slot> | 
 |  |  | 
 |  |  | }); | 
 |  |  |  | 
 |  |  | type Props = { | 
 |  |  |   label: string; | 
 |  |  |   detail: string; | 
 |  |  |   label?: string; | 
 |  |  |   detail?: string; | 
 |  |  |   labelWidth?: any; | 
 |  |  |   textAlign?: any; | 
 |  |  | }; | 
 |  |  |  | 
 |  |  | const props = withDefaults(defineProps<Props>(), {}); | 
 |  |  | const props = withDefaults(defineProps<Props>(), { | 
 |  |  |   labelWidth: '50px', | 
 |  |  |   textAlign: 'left', | 
 |  |  | }); | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <style lang="scss"> | 
 |  |  | @use '@/style/common.scss' as *; | 
 |  |  | @import '@/styles/common.scss'; | 
 |  |  |  | 
 |  |  | .mine-agreement-sign-detail-item { | 
 |  |  |   margin-bottom: 24px; | 
 |  |  |   display: flex; | 
 |  |  |   align-items: center; | 
 |  |  |  | 
 |  |  |   &:last-child { | 
 |  |  |     margin-bottom: 0; | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |   .mine-agreement-sign-detail-item-lebel { | 
 |  |  |     font-size: 24px; | 
 |  |  |     line-height: 36px; | 
 |  |  |     margin-right: 24px; | 
 |  |  |     color: boleGetCssVar('text-color', 'regular'); | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |   .mine-agreement-sign-detail-item-detail { | 
 |  |  |     font-size: 24px; | 
 |  |  |     line-height: 36px; | 
 |  |  |     color: boleGetCssVar('text-color', 'primary'); | 
 |  |  |     flex: 1; | 
 |  |  |     min-width: 0; | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | </style> |