pc端科技感的弹窗样式纯手搓先看一下实现的效果以上实现是reactts// 页面布局importscreenStylefrom./index.less;div className{${screenStyle.modalOverlay}${isModalOpen?screenStyle.modalVisible:}}onClick{handleCloseModal}div className{screenStyle.modalContent}onClick{(e)e.stopPropagation()}{/* 装饰边框 */}div className{screenStyle.modalBorder}div className{screenStyle.cornerTopLeft}/divdiv className{screenStyle.cornerTopRight}/divdiv className{screenStyle.cornerBottomLeft}/divdiv className{screenStyle.cornerBottomRight}/divdiv className{screenStyle.borderLineTop}/divdiv className{screenStyle.borderLineBottom}/divdiv className{screenStyle.borderLineLeft}/divdiv className{screenStyle.borderLineRight}/div/div{/* 弹窗头部 */}div className{screenStyle.modalHeader}div className{screenStyle.modalTitle}span className{screenStyle.titleIcon}◆/span预警监管详情/divdiv className{screenStyle.modalClose}onClick{handleCloseModal}✕/div/div{/* Tab切换 */}div className{screenStyle.modalTabs}div className{${screenStyle.tabItem}${activeTabtemperature?screenStyle.tabActive:}}onClick{()handleTabChange(temperature)}span className{screenStyle.tabIcon}️/span体温/divdiv className{${screenStyle.tabItem}${activeTablesion?screenStyle.tabActive:}}onClick{()handleTabChange(lesion)}span className{screenStyle.tabIcon}/span病变/divdiv className{${screenStyle.tabItem}${activeTabweighing?screenStyle.tabActive:}}onClick{()handleTabChange(weighing)}span className{screenStyle.tabIcon}⚖️/span称重区/div/div{/* 表格内容 */}div className{screenStyle.modalTableWrapper}div className{screenStyle.modalTable}div className{screenStyle.tableHeader}{columns.map((col)(div key{col.key}{col.title}/div))}/divdiv className{screenStyle.tableBody}{getCurrentData().map((item)(div className{screenStyle.tableRow}key{item.id}div className{screenStyle.warningImage}{item.imageUrl?(img src{item.imageUrl}alt{item.image}className{screenStyle.thumbnailImage}onClick{()handlePreviewImage(item.imageUrl!)}onError{(e){// 图片加载失败时显示占位(e.targetasHTMLImageElement).style.displaynone;constparent(e.targetasHTMLImageElement).parentElement;if(parent){constplaceholderdocument.createElement(span);placeholder.textContent;placeholder.classNamescreenStyle.imagePlaceholder;parent.appendChild(placeholder);}}}/):(span className{screenStyle.imagePlaceholder}/span)}{/* span className{screenStyle.imageLabel}{item.image}/span */}/divdiv{item.type}/divdiv{item.time}/divdiv{item.slaughterhouse}/divdivspan className{screenStyle.statusTag}style{{color:getStatusColor(item.status)}}{item.status}/span/divdiv{item.processor}/div/div))}/div/div/div{/* 底部信息 */}div className{screenStyle.modalFooter}span className{screenStyle.footerInfo}共{getCurrentData().length}条预警记录/span/div/div/div//index.less样式.modalOverlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,70%);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;visibility:hidden;transition:all0.3s ease;.modalVisible{opacity:1;visibility:visible;}}.modalContent{position:relative;width:800px;max-height:80vh;background:linear-gradient(145deg,rgba(0,20,50,95%),rgba(0,10,30,98%));border:1px solidrgba(0,180,255,30%);border-radius:12px;padding:24px 28px 20px;box-shadow:0060pxrgba(0,100,255,15%),inset0060pxrgba(0,100,255,5%);overflow-y:auto;transform:scale(0.95)translateY(20px);transition:all0.3s ease;.modalOverlay.modalVisible{transform:scale(1)translateY(0);}::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-track{background:rgba(0,40,80,30%);border-radius:2px;}::-webkit-scrollbar-thumb{background:rgba(0,180,255,40%);border-radius:2px;}}// Tab 样式 .modalTabs{display:flex;gap:4px;margin-bottom:16px;padding:4px;background:rgba(0,40,80,30%);border-radius:8px;border:1px solidrgba(0,180,255,10%);.tabItem{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:6px;cursor:pointer;font-size:14px;color:rgba(255,255,255,60%);transition:all0.3s ease;position:relative;user-select:none;.tabIcon{font-size:16px;}:hover{color:rgba(255,255,255,80%);background:rgba(0,180,255,5%);}.tabActive{color:#00d4ff;background:rgba(0,180,255,15%);box-shadow:0020pxrgba(0,180,255,10%);::after{content:;position:absolute;bottom:-1px;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,#00d4ff,transparent);box-shadow:0010pxrgba(0,180,255,50%);}}}}// 表格样式 .modalTableWrapper{background:rgba(0,20,40,30%);border-radius:8px;border:1px solidrgba(0,180,255,8%);overflow:hidden;max-height:400px;overflow-y:auto;::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-track{background:rgba(0,40,80,20%);border-radius:2px;}::-webkit-scrollbar-thumb{background:rgba(0,180,255,30%);border-radius:2px;}}.modalTable{width:100%;font-size:13px;.tableHeader{display:grid;grid-template-columns:1.2fr1.2fr1.5fr1.2fr 1fr 1fr;background:rgba(0,40,80,40%);padding:10px 16px;color:#00d4ff;font-weight:600;font-size:13px;letter-spacing:0.5px;border-bottom:1px solidrgba(0,180,255,15%);position:sticky;top:0;z-index:10;div{text-align:center;text-shadow:0010pxrgba(0,180,255,20%);}}.tableBody{.tableRow{display:grid;grid-template-columns:1.2fr1.2fr1.5fr1.2fr 1fr 1fr;padding:8px 16px;color:#b8d4e8;font-size:13px;text-align:center;align-items:center;border-bottom:1px solidrgba(255,255,255,3%);transition:background0.25s ease;:hover{background:rgba(0,180,255,4%);}:last-child{border-bottom:none;}div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:04px;}.warningImage{display:flex;align-items:center;justify-content:center;gap:8px;span:first-child{font-size:18px;}span:last-child{font-size:12px;color:rgba(255,255,255,50%);}}.statusTag{display:inline-block;padding:2px 12px;border-radius:12px;font-size:12px;font-weight:500;background:rgba(255,255,255,6%);border:1px solid currentcolor;opacity:0.9;}}}}// 底部信息 .modalFooter{display:flex;justify-content:flex-end;align-items:center;padding-top:14px;margin-top:12px;border-top:1px solidrgba(0,180,255,10%);.footerInfo{color:rgba(255,255,255,40%);font-size:12px;letter-spacing:0.5px;}}