| | |
| | | <!-- 附件详情弹窗 --> |
| | | <view v-if="showAttachmentDetail" class="overlay"> |
| | | <view class="popup attachment-detail-popup"> |
| | | <h3 class="attachment-popup-title">附件详情</h3> |
| | | <div class="attachment-popup-divider"></div> |
| | | <div v-if="selectedAttachment" class="attachment-detail-content"> |
| | | <div class="attachment-detail-row"><span class="attachment-label">ID:</span><span>{{ Math.trunc(selectedAttachment.id) }}</span></div> |
| | | <div class="attachment-detail-row"><span class="attachment-label">附件名:</span><span>{{ selectedAttachment.fattach }}</span></div> |
| | | <div class="attachment-detail-row"><span class="attachment-label">类型:</span><span>{{ selectedAttachment.ftype }}</span></div> |
| | | <div class="attachment-detail-row"><span class="attachment-label">版本:</span><span>{{ selectedAttachment.fversion }}</span></div> |
| | | <div class="attachment-detail-row"><span class="attachment-label">受控日期:</span><span>{{ selectedAttachment.fdate }}</span></div> |
| | | <div class="attachment-detail-row"><span class="attachment-label">上传人:</span><span>{{ selectedAttachment.createBy }}</span></div> |
| | | <div class="attachment-detail-row"><span class="attachment-label">上传时间:</span><span>{{ selectedAttachment.createDate }}</span></div> |
| | | <div class="attachment-actions-detail"> |
| | | <button class="attachment-action-btn preview-btn" |
| | | @click="previewFtpFile(selectedAttachment)" |
| | | v-if="isPreviewable(selectedAttachment.fattach)"> |
| | | 🔍 在线预览 |
| | | </button> |
| | | <button class="attachment-action-btn download-btn" |
| | | @click="downloadAttachment(selectedAttachment)"> |
| | | 📥 下载文件 |
| | | </button> |
| | | <div class="attachment-popup-header"> |
| | | <h3 class="attachment-popup-title">附件详情</h3> |
| | | <button class="attachment-close-btn" @click="closeAttachmentDetail">返回</button> |
| | | </div> |
| | | |
| | | <div class="attachment-popup-content"> |
| | | <div v-if="selectedAttachment" class="attachment-detail-content"> |
| | | <div class="attachment-detail-header"> |
| | | <div class="file-type-badge large" :class="getFileTypeClass(selectedAttachment.fattach)"> |
| | | {{ getFileTypeIcon(selectedAttachment.fattach) }} |
| | | </div> |
| | | <div class="attachment-detail-title"> |
| | | {{ selectedAttachment.fattach }} |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="attachment-detail-info"> |
| | | <div class="info-row"> |
| | | <div class="info-item"> |
| | | <text class="info-label">ID</text> |
| | | <text class="info-content">{{ Math.trunc(selectedAttachment.id) }}</text> |
| | | </div> |
| | | <div class="info-item"> |
| | | <text class="info-label">类型</text> |
| | | <text class="info-content">{{ selectedAttachment.ftype || '未知类型' }}</text> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="info-row" v-if="selectedAttachment.fversion"> |
| | | <div class="info-item"> |
| | | <text class="info-label">版本</text> |
| | | <text class="info-content">{{ selectedAttachment.fversion }}</text> |
| | | </div> |
| | | <div class="info-item" v-if="selectedAttachment.fdate"> |
| | | <text class="info-label">受控日期</text> |
| | | <text class="info-content">{{ formatDate(selectedAttachment.fdate) }}</text> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="info-row" v-if="selectedAttachment.createBy"> |
| | | <div class="info-item"> |
| | | <text class="info-label">上传人</text> |
| | | <text class="info-content">{{ selectedAttachment.createBy }}</text> |
| | | </div> |
| | | <div class="info-item" v-if="selectedAttachment.createDate"> |
| | | <text class="info-label">上传时间</text> |
| | | <text class="info-content">{{ formatDate(selectedAttachment.createDate) }}</text> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="attachment-detail-actions"> |
| | | <button v-if="isPreviewable(selectedAttachment.fattach)" |
| | | class="btn-primary" |
| | | @click="previewFtpFile(selectedAttachment)">预览</button> |
| | | <button class="btn-success" @click="downloadAttachment(selectedAttachment)">下载</button> |
| | | </div> |
| | | </div> |
| | | <div v-else class="attachment-detail-empty"> |
| | | <div class="empty-icon">❌</div> |
| | | <div class="empty-text">暂无附件信息</div> |
| | | </div> |
| | | </div> |
| | | <div v-else class="attachment-detail-empty">暂无附件信息</div> |
| | | <button class="attachment-popup-close" @click="closeAttachmentDetail">返回附件列表</button> |
| | | </view> |
| | | </view> |
| | | <!-- 附件列表弹窗 --> |
| | | <view v-if="showAttachmentPopup" class="overlay"> |
| | | <view class="popup" style="width: 60vw; max-width: 500px;"> |
| | | <h3>附件列表</h3> |
| | | <div v-if="attachmentsLoading">加载中...</div> |
| | | <div v-else-if="attachments.length === 0">暂无附件</div> |
| | | <ul class="attachment-list" v-else> |
| | | <li v-for="item in attachments" :key="item.id"> |
| | | <div class="attachment-info"> |
| | | <span class="attachment-name" @click="showAttachmentDetailDialog(item)"> |
| | | {{ item.fattach }} |
| | | </span> |
| | | <div class="attachment-meta"> |
| | | <span class="attachment-type">{{ item.ftype || '未知类型' }}</span> |
| | | <view class="popup attachment-list-popup"> |
| | | <div class="attachment-popup-header"> |
| | | <h3 class="attachment-popup-title">附件列表</h3> |
| | | <button class="attachment-close-btn" @click="closeAttachmentPopup">关闭</button> |
| | | </div> |
| | | |
| | | <div class="attachment-popup-content"> |
| | | <div v-if="attachmentsLoading" class="attachment-loading"> |
| | | <div class="loading-spinner"></div> |
| | | <span class="loading-text">正在加载附件...</span> |
| | | </div> |
| | | |
| | | <div v-else-if="attachments.length === 0" class="attachment-empty"> |
| | | <div class="empty-icon">📁</div> |
| | | <div class="empty-text">暂无附件</div> |
| | | <div class="empty-hint">该物料暂未上传任何附件</div> |
| | | </div> |
| | | |
| | | <div v-else class="attachment-list"> |
| | | <div v-for="item in attachments" :key="item.id" class="attachment-item"> |
| | | <div class="attachment-info"> |
| | | <div class="file-type-badge" :class="getFileTypeClass(item.fattach)"> |
| | | {{ getFileTypeIcon(item.fattach) }} |
| | | </div> |
| | | <div class="attachment-details"> |
| | | <div class="attachment-name" @click="showAttachmentDetailDialog(item)"> |
| | | {{ item.fattach }} |
| | | </div> |
| | | <div class="attachment-meta"> |
| | | <span class="meta-type">{{ item.ftype || '未知类型' }}</span> |
| | | <span v-if="item.fversion" class="meta-version">v{{ item.fversion }}</span> |
| | | <span v-if="item.fdate" class="meta-date">{{ formatDate(item.fdate) }}</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="attachment-actions"> |
| | | <button class="btn-secondary" @click="showAttachmentDetailDialog(item)">详情</button> |
| | | <button v-if="isPreviewable(item.fattach)" |
| | | class="btn-primary" |
| | | @click="previewFtpFile(item)">预览</button> |
| | | <button class="btn-success" @click="downloadAttachment(item)">下载</button> |
| | | </div> |
| | | </div> |
| | | <div class="attachment-actions"> |
| | | <button class="secondary-btn" @click="showAttachmentDetailDialog(item)">详情</button> |
| | | <button class="secondary-btn preview-btn" @click="previewFtpFile(item)" |
| | | v-if="isPreviewable(item.fattach)">预览</button> |
| | | <button class="secondary-btn" @click="downloadAttachment(item)">下载</button> |
| | | </div> |
| | | </li> |
| | | </ul> |
| | | <button class="attachment-popup-close" @click="closeAttachmentPopup">关闭</button> |
| | | </div> |
| | | </div> |
| | | </view> |
| | | </view> |
| | | |
| | |
| | | WORKSHOP: '', |
| | | REMARK: '', |
| | | // picker 选项和索引 |
| | | badreasonOptions: ['', '外观不良', '尺寸不良', '包装不良', '性能不良', '装配不良', '安规不良'], |
| | | badreasonOptions: ['', '外观不良', '尺寸不良', '包装不良', '性能不良', '装配不良', '安规不良','图纸不良'], |
| | | badreasonIndex: 0, |
| | | workshopOptions: ['', '生产一部', '生产二部', '注塑车间', '其他'], |
| | | workshopIndex: 0, |
| | |
| | | // 统一推送给HMCS,不管哪个账号 |
| | | this.QcIssueResultDetailes = { |
| | | fbatchQty: this.formData.fcovertQty, |
| | | itemName: this.formData.itemName, |
| | | itemName: (() => { |
| | | const combined = `${this.formData.itemName || ''} ${this.formData.itemModel || ''}`.trim(); |
| | | // 截断处理:超过1000字符保留前1000位 |
| | | return combined.length > 1000 ? combined.substring(0, 1000) : combined; |
| | | })(), |
| | | itemNo: this.formData.itemNo, |
| | | suppName: this.formData.suppName, |
| | | appicationReason: this.formData.fngDesc, |
| | |
| | | 'csv' // CSV文件 |
| | | ].includes(ext); |
| | | }, |
| | | |
| | | // 获取文件类型图标 |
| | | getFileTypeIcon(filename) { |
| | | if (!filename) return '📄'; |
| | | const ext = filename.trim().split('.').pop().toLowerCase(); |
| | | const iconMap = { |
| | | 'pdf': '📕', |
| | | 'jpg': '🖼️', 'jpeg': '🖼️', 'png': '🖼️', 'gif': '🖼️', 'bmp': '🖼️', 'webp': '🖼️', |
| | | 'txt': '📝', 'log': '📝', 'md': '📝', |
| | | 'doc': '📘', 'docx': '📘', |
| | | 'xls': '📊', 'xlsx': '📊', |
| | | 'ppt': '📙', 'pptx': '📙', |
| | | 'csv': '📊', |
| | | 'zip': '📦', 'rar': '📦', '7z': '📦', |
| | | 'dwg': '🏗️', 'dxf': '🏗️' |
| | | }; |
| | | return iconMap[ext] || '📄'; |
| | | }, |
| | | |
| | | // 获取文件类型CSS类 |
| | | getFileTypeClass(filename) { |
| | | if (!filename) return 'file-unknown'; |
| | | const ext = filename.trim().split('.').pop().toLowerCase(); |
| | | const classMap = { |
| | | 'pdf': 'file-pdf', |
| | | 'jpg': 'file-image', 'jpeg': 'file-image', 'png': 'file-image', 'gif': 'file-image', 'bmp': 'file-image', 'webp': 'file-image', |
| | | 'txt': 'file-text', 'log': 'file-text', 'md': 'file-text', |
| | | 'doc': 'file-word', 'docx': 'file-word', |
| | | 'xls': 'file-excel', 'xlsx': 'file-excel', |
| | | 'ppt': 'file-powerpoint', 'pptx': 'file-powerpoint', |
| | | 'csv': 'file-excel', |
| | | 'zip': 'file-archive', 'rar': 'file-archive', '7z': 'file-archive', |
| | | 'dwg': 'file-cad', 'dxf': 'file-cad' |
| | | }; |
| | | return classMap[ext] || 'file-unknown'; |
| | | }, |
| | | |
| | | // 格式化日期 |
| | | formatDate(dateString) { |
| | | if (!dateString) return ''; |
| | | try { |
| | | const date = new Date(dateString); |
| | | return date.toLocaleDateString('zh-CN', { |
| | | year: 'numeric', |
| | | month: '2-digit', |
| | | day: '2-digit', |
| | | hour: '2-digit', |
| | | minute: '2-digit' |
| | | }); |
| | | } catch (e) { |
| | | return dateString; |
| | | } |
| | | }, |
| | | // 处理附件下载错误 |
| | | handleAttachmentError(item) { |
| | | uni.showModal({ |
| | |
| | | } |
| | | |
| | | /* 弹窗整体美化 */ |
| | | .popup, .attachment-detail-popup { |
| | | .popup { |
| | | background: #fff; |
| | | border-radius: 16px; |
| | | box-shadow: 0 8px 32px rgba(60,60,60,0.18); |
| | |
| | | max-height: 80vh; /* 限制最大高度,避免被底部按钮遮挡 */ |
| | | overflow-y: auto; /* 内容过多时可滚动 */ |
| | | } |
| | | .attachment-popup-title { |
| | | font-size: 22px; |
| | | font-weight: 700; |
| | | color: #222; |
| | | margin-bottom: 8px; |
| | | letter-spacing: 1px; |
| | | text-align: center; |
| | | } |
| | | .attachment-popup-divider { |
| | | height: 1px; |
| | | background: linear-gradient(90deg,#e0e7ef 0%,#f5f7fa 100%); |
| | | margin-bottom: 18px; |
| | | } |
| | | |
| | | .attachment-detail-content { |
| | | margin-bottom: 18px; |
| | | } |
| | | .attachment-detail-row { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-bottom: 8px; |
| | | font-size: 15px; |
| | | } |
| | | .attachment-label { |
| | | min-width: 80px; |
| | | color: #1976d2; |
| | | font-weight: 500; |
| | | margin-right: 8px; |
| | | } |
| | | .attachment-preview-area { |
| | | margin: 18px 0 8px 0; |
| | | border-radius: 10px; |
| | | background: #f8fafc; |
| | | padding: 10px; |
| | | box-shadow: 0 2px 8px rgba(60,60,60,0.06); |
| | | } |
| | | .attachment-download-area { |
| | | margin: 18px 0 8px 0; |
| | | text-align: center; |
| | | } |
| | | .attachment-download-link { |
| | | display: inline-block; |
| | | padding: 7px 18px; |
| | | background: linear-gradient(90deg,#4f8cff 0%,#1976d2 100%); |
| | | color: #fff; |
| | | border-radius: 6px; |
| | | font-weight: 500; |
| | | text-decoration: none; |
| | | transition: background 0.2s; |
| | | box-shadow: 0 2px 8px rgba(60,60,60,0.08); |
| | | } |
| | | .attachment-download-link:hover { |
| | | background: linear-gradient(90deg,#1976d2 0%,#4f8cff 100%); |
| | | } |
| | | .attachment-detail-empty { |
| | | color: #888; |
| | | text-align: center; |
| | | margin: 30px 0; |
| | | font-size: 16px; |
| | | } |
| | | .attachment-popup-close { |
| | | margin-top: 18px; |
| | | width: 100%; |
| | | background: linear-gradient(90deg,#e0e0e0 0%,#f5f7fa 100%); |
| | | color: #444; |
| | | border-radius: 8px; |
| | | font-size: 16px; |
| | | padding: 10px 0; |
| | | border: none; |
| | | font-weight: 600; |
| | | letter-spacing: 1px; |
| | | transition: background 0.2s, color 0.2s; |
| | | box-shadow: 0 2px 8px rgba(60,60,60,0.06); |
| | | } |
| | | .attachment-popup-close:hover { |
| | | background: linear-gradient(90deg,#bdbdbd 0%,#e0e0e0 100%); |
| | | color: #1976d2; |
| | | } |
| | | |
| | | /* 附件详情页面的操作按钮 */ |
| | | .attachment-actions-detail { |
| | | margin: 20px 0; |
| | | display: flex; |
| | | gap: 12px; |
| | | justify-content: center; |
| | | flex-wrap: wrap; |
| | | } |
| | | .attachment-action-btn { |
| | | padding: 10px 20px; |
| | | border: none; |
| | | border-radius: 8px; |
| | | font-size: 14px; |
| | | font-weight: 600; |
| | | cursor: pointer; |
| | | transition: all 0.3s ease; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | min-width: 120px; |
| | | box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
| | | } |
| | | .attachment-action-btn.preview-btn { |
| | | background: linear-gradient(135deg, #4CAF50, #45a049); |
| | | color: white; |
| | | } |
| | | .attachment-action-btn.preview-btn:hover { |
| | | background: linear-gradient(135deg, #45a049, #3d8b40); |
| | | transform: translateY(-1px); |
| | | box-shadow: 0 4px 8px rgba(0,0,0,0.15); |
| | | } |
| | | .attachment-action-btn.download-btn { |
| | | background: linear-gradient(135deg, #2196F3, #1976D2); |
| | | color: white; |
| | | } |
| | | .attachment-action-btn.download-btn:hover { |
| | | background: linear-gradient(135deg, #1976D2, #1565C0); |
| | | transform: translateY(-1px); |
| | | box-shadow: 0 4px 8px rgba(0,0,0,0.15); |
| | | } |
| | | |
| | | /* 文件预览弹窗样式 */ |
| | |
| | | background: linear-gradient(135deg, #bdbdbd, #9e9e9e); |
| | | transform: translateY(-1px); |
| | | } |
| | | /* 列表弹窗美化(保留原有) */ |
| | | .attachment-list { |
| | | padding: 0; |
| | | /* 附件相关样式 */ |
| | | .attachment-list-popup { |
| | | width: 80vw; |
| | | max-width: 800px; |
| | | max-height: 85vh; |
| | | } |
| | | |
| | | .attachment-detail-popup { |
| | | width: 70vw; |
| | | max-width: 600px; |
| | | } |
| | | |
| | | .attachment-popup-header { |
| | | padding: 16px; |
| | | border-bottom: 1px solid #eee; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | background-color: white; |
| | | } |
| | | |
| | | .attachment-popup-title { |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | color: #2c3e50; |
| | | margin: 0; |
| | | list-style: none; |
| | | max-height: 300px; |
| | | } |
| | | |
| | | .attachment-close-btn { |
| | | padding: 8px 16px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | background-color: white; |
| | | font-size: 14px; |
| | | transition: all 0.2s; |
| | | color: #2c3e50; |
| | | } |
| | | |
| | | .attachment-close-btn:hover { |
| | | background-color: #f8f9fa; |
| | | } |
| | | |
| | | .attachment-popup-content { |
| | | padding: 16px; |
| | | max-height: 60vh; |
| | | overflow-y: auto; |
| | | } |
| | | .attachment-list li { |
| | | |
| | | /* 加载状态 */ |
| | | .attachment-loading { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | padding: 40px 20px; |
| | | gap: 16px; |
| | | } |
| | | |
| | | .loading-spinner { |
| | | width: 32px; |
| | | height: 32px; |
| | | border: 3px solid #f3f3f3; |
| | | border-top: 3px solid #3498db; |
| | | border-radius: 50%; |
| | | animation: spin 1s linear infinite; |
| | | } |
| | | |
| | | @keyframes spin { |
| | | 0% { transform: rotate(0deg); } |
| | | 100% { transform: rotate(360deg); } |
| | | } |
| | | |
| | | .loading-text { |
| | | font-size: 14px; |
| | | color: #7f8c8d; |
| | | } |
| | | |
| | | /* 空状态 */ |
| | | .attachment-empty { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | padding: 40px 20px; |
| | | gap: 12px; |
| | | text-align: center; |
| | | } |
| | | |
| | | .empty-icon { |
| | | font-size: 36px; |
| | | opacity: 0.6; |
| | | } |
| | | |
| | | .empty-text { |
| | | font-size: 16px; |
| | | color: #7f8c8d; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .empty-hint { |
| | | font-size: 14px; |
| | | color: #95a5a6; |
| | | } |
| | | |
| | | /* 附件列表布局 */ |
| | | .attachment-list { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 16px; |
| | | } |
| | | |
| | | .attachment-item { |
| | | background-color: white; |
| | | border-radius: 8px; |
| | | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); |
| | | overflow: hidden; |
| | | transition: all 0.3s; |
| | | border: 1px solid #eee; |
| | | } |
| | | |
| | | .attachment-item:hover { |
| | | box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | .attachment-info { |
| | | padding: 16px; |
| | | border-bottom: 1px solid #eee; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding: 12px 0; |
| | | border-bottom: 1px solid #f0f0f0; |
| | | gap: 16px; |
| | | } |
| | | .attachment-info { |
| | | flex: 1; |
| | | margin-right: 10px; |
| | | } |
| | | .attachment-name { |
| | | color: #3498db; |
| | | cursor: pointer; |
| | | font-weight: 500; |
| | | transition: color 0.2s; |
| | | display: block; |
| | | margin-bottom: 4px; |
| | | } |
| | | .attachment-name:hover { |
| | | color: #217dbb; |
| | | text-decoration: underline; |
| | | } |
| | | .attachment-meta { |
| | | font-size: 12px; |
| | | } |
| | | .attachment-type { |
| | | color: #7f8c8d; |
| | | font-style: italic; |
| | | } |
| | | .attachment-actions { |
| | | |
| | | .file-type-badge { |
| | | width: 40px; |
| | | height: 40px; |
| | | border-radius: 8px; |
| | | display: flex; |
| | | gap: 8px; |
| | | align-items: center; |
| | | justify-content: center; |
| | | font-size: 20px; |
| | | background: #f8f9fa; |
| | | border: 2px solid #e9ecef; |
| | | flex-shrink: 0; |
| | | } |
| | | .attachment-list .secondary-btn { |
| | | padding: 4px 10px; |
| | | font-size: 13px; |
| | | border-radius: 3px; |
| | | background: #f5f7fa; |
| | | color: #333; |
| | | border: 1px solid #dbe2ea; |
| | | transition: background 0.2s, color 0.2s; |
| | | |
| | | .file-type-badge.large { |
| | | width: 56px; |
| | | height: 56px; |
| | | font-size: 28px; |
| | | } |
| | | .attachment-list .secondary-btn:hover { |
| | | background: #e6f0fa; |
| | | color: #1976d2; |
| | | |
| | | .file-type-badge.file-pdf { background: #ffe6e6; border-color: #ffcccc; } |
| | | .file-type-badge.file-image { background: #e6f3ff; border-color: #cce7ff; } |
| | | .file-type-badge.file-text { background: #e6ffe6; border-color: #ccffcc; } |
| | | .file-type-badge.file-word { background: #e6f0ff; border-color: #cce0ff; } |
| | | .file-type-badge.file-excel { background: #e6ffe6; border-color: #ccffcc; } |
| | | .file-type-badge.file-powerpoint { background: #fff0e6; border-color: #ffe0cc; } |
| | | .file-type-badge.file-archive { background: #f0e6ff; border-color: #e0ccff; } |
| | | .file-type-badge.file-cad { background: #e6fff0; border-color: #ccffe0; } |
| | | .file-type-badge.file-unknown { background: #f5f5f5; border-color: #e0e0e0; } |
| | | |
| | | .attachment-details { |
| | | flex: 1; |
| | | min-width: 0; |
| | | } |
| | | .preview-btn { |
| | | background: #e8f5e8 !important; |
| | | color: #2e7d2e !important; |
| | | border-color: #a5d6a5 !important; |
| | | |
| | | .attachment-name { |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | color: #2c3e50; |
| | | cursor: pointer; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | margin-bottom: 8px; |
| | | transition: color 0.2s; |
| | | } |
| | | .preview-btn:hover { |
| | | background: #d4eecc !important; |
| | | color: #1e5f1e !important; |
| | | |
| | | .attachment-name:hover { |
| | | color: #3498db; |
| | | } |
| | | .attachment-popup-close { |
| | | margin-top: 18px; |
| | | width: 100%; |
| | | background: #e0e0e0; |
| | | color: #444; |
| | | |
| | | .attachment-meta { |
| | | display: flex; |
| | | gap: 16px; |
| | | font-size: 12px; |
| | | color: #95a5a6; |
| | | } |
| | | |
| | | .meta-type { |
| | | background-color: #ecf0f1; |
| | | padding: 2px 6px; |
| | | border-radius: 10px; |
| | | color: #7f8c8d; |
| | | } |
| | | |
| | | .meta-version { |
| | | background-color: #e8f5e8; |
| | | padding: 2px 6px; |
| | | border-radius: 10px; |
| | | color: #2e7d32; |
| | | } |
| | | |
| | | .meta-date { |
| | | background-color: #fff3e0; |
| | | padding: 2px 6px; |
| | | border-radius: 10px; |
| | | color: #f57c00; |
| | | } |
| | | |
| | | .attachment-actions { |
| | | padding: 12px 16px; |
| | | border-top: 1px solid #eee; |
| | | display: flex; |
| | | gap: 8px; |
| | | background-color: #f8f9fa; |
| | | } |
| | | |
| | | /* 按钮样式 */ |
| | | .btn-secondary { |
| | | padding: 8px 16px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | font-size: 15px; |
| | | padding: 8px 0; |
| | | border: none; |
| | | transition: background 0.2s; |
| | | background-color: white; |
| | | font-size: 14px; |
| | | transition: all 0.2s; |
| | | color: #2c3e50; |
| | | flex: 1; |
| | | } |
| | | .attachment-popup-close:hover { |
| | | background: #bdbdbd; |
| | | |
| | | .btn-secondary:hover { |
| | | background-color: #f8f9fa; |
| | | } |
| | | |
| | | .btn-primary { |
| | | padding: 8px 16px; |
| | | border: 1px solid #3498db; |
| | | border-radius: 4px; |
| | | background-color: #3498db; |
| | | color: white; |
| | | font-size: 14px; |
| | | transition: all 0.2s; |
| | | flex: 1; |
| | | } |
| | | |
| | | .btn-primary:hover { |
| | | background-color: #2980b9; |
| | | } |
| | | |
| | | .btn-success { |
| | | padding: 8px 16px; |
| | | border: 1px solid #2ecc71; |
| | | border-radius: 4px; |
| | | background-color: #2ecc71; |
| | | color: white; |
| | | font-size: 14px; |
| | | transition: all 0.2s; |
| | | flex: 1; |
| | | } |
| | | |
| | | .btn-success:hover { |
| | | background-color: #27ae60; |
| | | } |
| | | |
| | | /* 附件详情样式 */ |
| | | .attachment-detail-header { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 20px; |
| | | margin-bottom: 20px; |
| | | padding-bottom: 16px; |
| | | border-bottom: 1px solid #eee; |
| | | } |
| | | |
| | | .attachment-detail-title { |
| | | font-size: 18px; |
| | | font-weight: 600; |
| | | color: #2c3e50; |
| | | flex: 1; |
| | | word-break: break-all; |
| | | } |
| | | |
| | | .attachment-detail-info { |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .info-row { |
| | | display: flex; |
| | | margin-bottom: 12px; |
| | | gap: 16px; |
| | | } |
| | | |
| | | .info-item { |
| | | flex: 1; |
| | | } |
| | | |
| | | .info-label { |
| | | display: block; |
| | | font-size: 12px; |
| | | color: #7f8c8d; |
| | | margin-bottom: 4px; |
| | | } |
| | | |
| | | .info-content { |
| | | font-size: 14px; |
| | | color: #2c3e50; |
| | | line-height: 1.5; |
| | | } |
| | | |
| | | .attachment-detail-actions { |
| | | padding: 12px 16px; |
| | | border-top: 1px solid #eee; |
| | | display: flex; |
| | | gap: 8px; |
| | | background-color: #f8f9fa; |
| | | } |
| | | |
| | | /* 响应式设计 */ |