| ¶Ô±ÈÐÂÎļþ |
| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"> |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8"/> |
|---|
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
|---|
| | | <title>æºæ
§ç²®åºç®¡çç³»ç»-é¦é¡µ</title> |
|---|
| | | <link rel="stylesheet" th:href="@{/ajax/libs/layui-ruoyi/css/layui.css}"/> |
|---|
| | | <!-- èªå®ä¹æ ·å¼ --> |
|---|
| | | <style> |
|---|
| | | body { |
|---|
| | | background-color: #f8f9fa; |
|---|
| | | font-family: 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .container { |
|---|
| | | min-height: 100vh; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | padding: 20px; |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .notification-card { |
|---|
| | | background: #fff; |
|---|
| | | border-radius: 12px; |
|---|
| | | box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); |
|---|
| | | padding: 40px 30px; |
|---|
| | | max-width: 500px; |
|---|
| | | width: 100%; |
|---|
| | | text-align: center; |
|---|
| | | transform: translateY(20px); |
|---|
| | | opacity: 0; |
|---|
| | | animation: fadeInUp 0.8s ease forwards; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes fadeInUp { |
|---|
| | | to { |
|---|
| | | transform: translateY(0); |
|---|
| | | opacity: 1; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .icon-container { |
|---|
| | | width: 120px; |
|---|
| | | height: 120px; |
|---|
| | | margin: 0 auto 30px; |
|---|
| | | background: linear-gradient(135deg, #e8f4f8 0%, #f0f8fb 100%); |
|---|
| | | border-radius: 50%; |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | justify-content: center; |
|---|
| | | position: relative; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .icon-container::before { |
|---|
| | | content: ''; |
|---|
| | | position: absolute; |
|---|
| | | top: 0; |
|---|
| | | left: 0; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | background: rgba(66, 153, 225, 0.1); |
|---|
| | | transform: scale(0); |
|---|
| | | border-radius: 50%; |
|---|
| | | animation: pulse 2s infinite; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes pulse { |
|---|
| | | 0% { |
|---|
| | | transform: scale(0.5); |
|---|
| | | opacity: 0.8; |
|---|
| | | } |
|---|
| | | 100% { |
|---|
| | | transform: scale(1.2); |
|---|
| | | opacity: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .notification-icon { |
|---|
| | | font-size: 50px; |
|---|
| | | color: #4299e1; |
|---|
| | | position: relative; |
|---|
| | | z-index: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .notification-title { |
|---|
| | | font-size: 24px; |
|---|
| | | font-weight: 600; |
|---|
| | | color: #2d3748; |
|---|
| | | margin-bottom: 15px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .notification-desc { |
|---|
| | | font-size: 16px; |
|---|
| | | color: #718096; |
|---|
| | | line-height: 1.6; |
|---|
| | | margin-bottom: 30px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .back-btn { |
|---|
| | | background-color: #4299e1; |
|---|
| | | color: #fff; |
|---|
| | | border-radius: 8px; |
|---|
| | | /* padding: 12px 30px;*/ |
|---|
| | | font-size: 16px; |
|---|
| | | transition: all 0.3s ease; |
|---|
| | | border: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .back-btn:hover { |
|---|
| | | background-color: #3182ce; |
|---|
| | | transform: translateY(-2px); |
|---|
| | | box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3); |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .footer { |
|---|
| | | margin-top: 40px; |
|---|
| | | color: #a0aec0; |
|---|
| | | font-size: 14px; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @media (max-width: 768px) { |
|---|
| | | .notification-card { |
|---|
| | | padding: 30px 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .icon-container { |
|---|
| | | width: 100px; |
|---|
| | | height: 100px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .notification-icon { |
|---|
| | | font-size: 40px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .notification-title { |
|---|
| | | font-size: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .notification-desc { |
|---|
| | | font-size: 15px; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div class="container"> |
|---|
| | | <!-- æéå¡ç --> |
|---|
| | | <div class="notification-card"> |
|---|
| | | <div class="icon-container"> |
|---|
| | | <i class="fas fa-flask notification-icon"></i> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <h2 class="notification-title">åè½è°è¯ä¸â¦â¦</h2> |
|---|
| | | |
|---|
| | | <p class="notification-desc"> |
|---|
| | | æ¨å¥½ï¼å½ååè½æ£å¨ç´§å¼ æµè¯ä¸ï¼ä¸ºäºç»æ¨å¸¦æ¥æ´ç¨³å®ãä¼è´¨çä½éªï¼ |
|---|
| | | æ们æ£å¨è¿è¡æåçä¼åè°æ´ãæ¬è¯·æå¾
æ£å¼å¼æ¾ï¼ |
|---|
| | | </p> |
|---|
| | | |
|---|
| | | <button class="layui-btn back-btn"> |
|---|
| | | <i class="fas fa-arrow-left mr-2"></i>ç¨åä¸çº¿â¦â¦ |
|---|
| | | </button> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
