/* 模态框遮罩层 */ | |
.modal-overlay { | |
position: fixed; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */ | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
z-index: 1000; /* 确保在最上层 */ | |
} | |
/* 模态框内容 */ | |
.modal-content { | |
background-color: white; | |
border-radius: 12px; | |
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); | |
width: 90%; | |
max-width: 500px; /* 最大宽度 */ | |
overflow: hidden; | |
animation: fadeInUp 0.3s ease-out; /* 淡入动画 */ | |
} | |
/* 模态框头部 */ | |
.modal-header { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
padding: 16px 20px; | |
background-color: #e6f0ff; /* 浅蓝色背景 */ | |
border-bottom: 1px solid #d0e3ff; | |
} | |
.modal-header h3 { | |
margin: 0; | |
font-size: 18px; | |
font-weight: 600; | |
color: #0066cc; /* 蓝色标题 */ | |
} | |
.close-btn { | |
background: none; | |
border: none; | |
font-size: 24px; | |
cursor: pointer; | |
color: #666; | |
} | |
.close-btn:hover { | |
color: #000; | |
} | |
/* 模态框主体 */ | |
.modal-body { | |
padding: 20px; | |
} | |
.modal-body p { | |
margin: 0; | |
font-size: 16px; | |
color: #333; | |
} | |
.highlight { | |
font-weight: 600; | |
color: #0066cc; /* 蓝色高亮 */ | |
} | |
/* 模态框底部 */ | |
.modal-footer { | |
display: flex; | |
justify-content: flex-end; | |
gap: 10px; | |
padding: 16px 20px; | |
background-color: #f5f5f5; | |
} | |
/* 按钮样式 */ | |
.btn-cancel { | |
padding: 8px 16px; | |
border: 1px solid #ccc; | |
background: white; | |
border-radius: 6px; | |
cursor: pointer; | |
transition: all 0.2s; | |
} | |
.btn-cancel:hover { | |
background: #f0f0f0; | |
} | |
.btn-confirm { | |
padding: 8px 16px; | |
background-color: #0066cc; /* 蓝色按钮 */ | |
color: white; | |
border: none; | |
border-radius: 6px; | |
cursor: pointer; | |
transition: all 0.2s; | |
} | |
.btn-confirm:hover { | |
background-color: #0052a3; /* 深蓝色 */ | |
} | |
/* 动画 */ | |
@keyframes fadeInUp { | |
from { | |
opacity: 0; | |
transform: translateY(10px); | |
} | |
to { | |
opacity: 1; | |
transform: translateY(0); | |
} | |
} |