| <template> | 
|   <ProDialog title="选择投保方式" v-model="visible" destroy-on-close draggable width="400px"> | 
|     <div class="button-item" style="margin-bottom: 40px"> | 
|       <el-button type="primary" plain @click="handleConfirm(InsureLineMode.OnLine)" | 
|         >线上投保</el-button | 
|       > | 
|     </div> | 
|     <div class="button-item"> | 
|       <el-button type="primary" plain @click="handleConfirm(InsureLineMode.OffLine)" | 
|         >线下投保</el-button | 
|       > | 
|     </div> | 
|   </ProDialog> | 
| </template> | 
|   | 
| <script setup lang="ts"> | 
| import { ProDialog, ProForm } from '@bole-core/components'; | 
| import { InsureLineMode } from '../constants'; | 
|   | 
| defineOptions({ | 
|   name: 'InsureLineModeSelectDialog', | 
| }); | 
|   | 
| // type Props = {}; | 
|   | 
| // const props = withDefaults(defineProps<Props>(), {}); | 
|   | 
| const visible = defineModel({ type: Boolean }); | 
|   | 
| const emit = defineEmits<{ | 
|   (e: 'onConfirm', mode: InsureLineMode): void; | 
| }>(); | 
|   | 
| function handleConfirm(mode: InsureLineMode) { | 
|   emit('onConfirm', mode); | 
| } | 
| </script> | 
|   | 
| <style scoped lang="scss"> | 
| .button-item { | 
|   text-align: center; | 
|   | 
|   :deep() { | 
|     .el-button { | 
|       margin: 0 auto; | 
|       width: 200px; | 
|     } | 
|   } | 
| } | 
| </style> |