diff --git a/my-vue-app/src/views/maneger/components/MemberDetails.vue b/my-vue-app/src/views/maneger/components/MemberDetails.vue index d9d0c68..3e406c2 100644 --- a/my-vue-app/src/views/maneger/components/MemberDetails.vue +++ b/my-vue-app/src/views/maneger/components/MemberDetails.vue @@ -1,7 +1,7 @@ @@ -273,6 +294,11 @@ const showModal = ref(false) const modalContent = ref('') const modalTitle = ref('') +// 下载弹框状态 +const showDownloadModal = ref(false) +const downloadModalContent = ref('') +const downloadModalTitle = ref('') + // 时间线数据 const timelineData = ref({}); @@ -838,8 +864,9 @@ const handleViewCallData = (contact) => { // 处理弹框显示事件 const handleShowModal = (title, content) => { - modalTitle.value = title - modalContent.value = content + console.log('handleShowModal0000', title) + modalTitle.value = title.title + modalContent.value = title.content showModal.value = true } @@ -850,6 +877,20 @@ const closeModal = () => { modalTitle.value = '' } +// 处理下载弹框显示 +const handleShowDownloadModal = (title, content) => { + downloadModalTitle.value = title + downloadModalContent.value = content + showDownloadModal.value = true +} + +// 关闭下载弹框 +const closeDownloadModal = () => { + showDownloadModal.value = false + downloadModalContent.value = '' + downloadModalTitle.value = '' +} + // // 处理SOP分析事件 // const handleAnalyzeSop = (analyzeData) => { // console.log('handleAnalyzeSop', analyzeData) @@ -1767,6 +1808,7 @@ $primary: #3b82f6; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); + // 使用 Flexbox 实现垂直和水平居中 display: flex; align-items: center; justify-content: center; @@ -1781,8 +1823,13 @@ $primary: #3b82f6; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); max-width: 600px; width: 90%; - max-height: 80vh; + // 设置最大高度,防止弹窗超出屏幕 + max-height: 35vh; + // 防止内容溢出容器,配合内部滚动 overflow: hidden; + // 使用 Flexbox 布局,让 .modal-body 可以伸缩 + display: flex; + flex-direction: column; animation: slideIn 0.3s ease-out; } @@ -1792,7 +1839,6 @@ $primary: #3b82f6; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #e5e7eb; - background: #f9fafb; } .modal-title { @@ -1827,21 +1873,25 @@ $primary: #3b82f6; } .modal-body { - padding: 5px; - max-height: 60vh; + // 关键:让内容区域占据所有剩余空间 + flex: 1; + // 关键:当内容超出时,只在垂直方向显示滚动条 overflow-y: auto; + // 防止滚动链传递到页面,仅在弹框内滚动 + overscroll-behavior: contain; + // 为内容提供统一内边距 + padding: 24px; + // 配合 flex: 1 使用,防止 flex item 在某些浏览器中无法正确收缩 + min-height: 0; } .modal-content { font-size: 14px; line-height: 1.6; color: #374151; + // 支持长文本和换行 white-space: pre-wrap; word-wrap: break-word; - padding: 16px; - margin-left: 30px; - border-radius: 8px; - // border: 1px solid #e5e7eb; } .modal-footer { @@ -1850,7 +1900,7 @@ $primary: #3b82f6; gap: 12px; padding: 16px 24px; border-top: 1px solid #e5e7eb; - background: #f9fafb; + // flex-shrink: 0; // 确保 footer 不会被压缩 } .modal-btn { @@ -1911,17 +1961,14 @@ $primary: #3b82f6; .modal-body { padding: 20px; - max-height: 55vh; } .modal-content { font-size: 13px; - padding: 14px; } .modal-footer { padding: 12px 20px; } } - - + \ No newline at end of file