| | |
| | | preset="card" |
| | | :title="title" |
| | | class="agreement-version-modal" |
| | | :style="{ width: '1000px' }" |
| | | :style="{ width: '1000px', height: '90vh', maxHeight: '90vh', display: 'flex', flexDirection: 'column' }" |
| | | :header-style="{ flexShrink: '0' }" |
| | | :segmented="{ content: true, action: true }" |
| | | :content-style="{ padding: '24px 24px 0 24px', display: 'flex', flexDirection: 'column' }" |
| | | :content-style="{ padding: '24px 24px 0 24px', display: 'flex', flexDirection: 'column', flex: '1', minHeight: '0', overflow: 'hidden' }" |
| | | @close="handleClose" |
| | | > |
| | | <div class="agreement-version-body"> |
| | |
| | | .rich-text-wrapper :deep(.aie-container) { |
| | | font-size: 14px; |
| | | } |
| | | </style> |
| | | |
| | | :deep(.agreement-version-modal.n-card) { |
| | | display: flex; |
| | | flex-direction: column; |
| | | height: 90vh; |
| | | max-height: 90vh; |
| | | } |
| | | |
| | | :deep(.agreement-version-modal .n-card-header) { |
| | | <style lang="scss"> |
| | | /* |
| | | * 以下规则不能加 scoped:preset="card" 的 NModal 实际渲染的 NCard/NCard 内部结构 |
| | | * 是由 naive-ui 在组件外部独立创建的 DOM 节点,不带当前组件的 data-v-xxx 属性, |
| | | * scoped 下的 :deep() 选择器无法命中,必须用全局样式规则。 |
| | | */ |
| | | .agreement-version-modal .n-card-header { |
| | | padding: 20px 24px; |
| | | flex-shrink: 0; |
| | | } |
| | | |
| | | :deep(.agreement-version-modal .n-card-header__main) { |
| | | .agreement-version-modal .n-card-header__main { |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | color: #171f26; |
| | | } |
| | | |
| | | :deep(.agreement-version-modal .n-card__content) { |
| | | flex: 1; |
| | | min-height: 0; |
| | | display: flex; |
| | | flex-direction: column; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | :deep(.agreement-version-modal .n-card__action) { |
| | | .agreement-version-modal .n-card__action { |
| | | background-color: transparent !important; |
| | | padding: 16px 24px; |
| | | flex-shrink: 0; |