.upload-container { position: relative; } /* 圆形图标样式 */ .upload-icon { width: 100px; height: 100px; border-radius: 50%; background: #3498db; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 36px; cursor: pointer; transition: background 0.3s; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .upload-icon:hover { background: #2980b9; } .upload-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; /* 保证圆形效果 */ } #detail_jarImg_value img{ width: 20%; height: 20%; object-fit: cover; border-radius: 50%; /* 保证圆形效果 */ } /* 隐藏实际的文件输入框 */ #fileInput { display: none; } .custom-alert-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center; z-index: 9999; } .custom-alert-box { background: #fff; border-radius: 14px; box-shadow: 0 8px 32px rgba(60,90,130,0.13); max-width: 90vw; width: 340px; padding: 32px 22px 22px 22px; text-align: center; position: relative; animation: fadeIn 0.2s; } .custom-alert-icon { margin-bottom: 12px; } .custom-alert-title { font-size: 1.2em; font-weight: 600; color: #d98c1b; margin-bottom: 14px; letter-spacing: 1px; } .custom-alert-message { font-size: 1em; color: #4c5870; margin-bottom: 28px; word-break: break-all; } .custom-alert-btn { padding: 8px 36px; background: #d98c1b; color: #fff; border: none; border-radius: 8px; font-size: 1em; cursor: pointer; transition: background 0.2s; } .custom-alert-btn:hover { background: #b06f10; } @keyframes fadeIn { from { transform: translateY(30px) scale(0.92); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } @media (max-width: 450px) { .custom-alert-box { width: 96vw; padding: 22px 6vw 14px 6vw; } .custom-alert-title { font-size: 1.1em; } }