| <template> | 
|   <div class="mine-agreement-sign-detail-item"> | 
|     <div | 
|       class="mine-agreement-sign-detail-item-lebel" | 
|       :style="{ width: labelWidth, textAlign: textAlign }" | 
|     > | 
|       <slot name="label"> | 
|         {{ label }} | 
|       </slot> | 
|     </div> | 
|     <div class="mine-agreement-sign-detail-item-detail"> | 
|       <slot name="detail"> | 
|         {{ detail }} | 
|       </slot> | 
|     </div> | 
|   </div> | 
| </template> | 
|   | 
| <script setup lang="ts"> | 
| defineOptions({ | 
|   name: 'MineAgreementSignDetailItem', | 
| }); | 
|   | 
| type Props = { | 
|   label?: string; | 
|   detail?: string; | 
|   labelWidth?: any; | 
|   textAlign?: any; | 
| }; | 
|   | 
| const props = withDefaults(defineProps<Props>(), { | 
|   labelWidth: '50px', | 
|   textAlign: 'left', | 
| }); | 
| </script> | 
|   | 
| <style lang="scss"> | 
| @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> |