| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- /* 提示消息组件样式(复制自 client/css/hint-view.css) */
- .hint-view {
- position: fixed;
- top: 20px;
- left: 50%;
- transform: translateX(-50%);
- z-index: 1000002;
- pointer-events: none;
- opacity: 0;
- transition: opacity 0.3s ease, transform 0.3s ease;
- }
- .hint-view.show {
- opacity: 1;
- transform: translateX(-50%) translateY(0);
- pointer-events: auto;
- }
- .hint-view.hide {
- opacity: 0;
- transform: translateX(-50%) translateY(-20px);
- pointer-events: none;
- }
- .hint-content {
- display: flex;
- align-items: center;
- gap: 10px;
- padding: 12px 20px;
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- color: white;
- border-radius: 8px;
- box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
- min-width: 200px;
- max-width: 400px;
- font-size: 14px;
- font-weight: 500;
- }
- .hint-icon {
- flex-shrink: 0;
- width: 20px;
- height: 20px;
- color: white;
- }
- .hint-message {
- flex: 1;
- text-align: center;
- }
- /* 成功提示样式 */
- .hint-view.success .hint-content {
- background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
- box-shadow: 0 4px 12px rgba(82, 196, 26, 0.4);
- }
- /* 错误提示样式 */
- .hint-view.error .hint-content {
- background: linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%);
- box-shadow: 0 4px 12px rgba(255, 77, 79, 0.4);
- }
- /* 警告提示样式 */
- .hint-view.warning .hint-content {
- background: linear-gradient(135deg, #faad14 0%, #d48806 100%);
- box-shadow: 0 4px 12px rgba(250, 173, 20, 0.4);
- }
- /* 信息提示样式 */
- .hint-view.info .hint-content {
- background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
- box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
- }
|