< ! DOCTYPE html>
< html lang= "zh-CN" >
< head> < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0" > < title> 金融信息与节日日历< / title> < link rel= "stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" > < style> * { margin : 0 ; padding : 0 ; box- sizing: border- box; font- family: 'Segoe UI' , 'Microsoft YaHei' , sans- serif; } body { background : linear- gradient ( 135deg, #f5f7fa 0 % , #e4edf5 100 % ) ; color : #333 ; line- height: 1.6 ; padding : 20px; min- height: 100vh; } . container { max- width: 1200px; margin : 0 auto; } header { display : flex; justify- content: space- between; align- items: center; margin- bottom: 25px; flex- wrap: wrap; gap : 15px; } . logo { display : flex; align- items: center; gap : 12px; } . logo h1 { font- size: 1 . 8rem; font- weight: 600 ; color : #2c3e50; } . logo i { font- size: 2 . 2rem; color : #3498db; } . date- display { background : #fff; padding : 10px 20px; border- radius: 12px; box- shadow: 0 4px 15px rgba ( 0 , 0 , 0 , 0.08 ) ; font- size: 1 . 1rem; font- weight: 500 ; color : #2c3e50; } . dashboard { display : grid; grid- template- columns: repeat ( auto- fit, minmax ( 300px, 1fr) ) ; gap : 25px; margin- bottom: 30px; } . card { background : #fff; border- radius: 16px; box- shadow: 0 6px 20px rgba ( 0 , 0 , 0 , 0.08 ) ; padding : 25px; transition : transform 0 . 3s ease, box- shadow 0 . 3s ease; } . card: hover { transform : translateY ( - 5px) ; box- shadow: 0 12px 25px rgba ( 0 , 0 , 0 , 0.12 ) ; } . card- header { display : flex; justify- content: space- between; align- items: center; margin- bottom: 20px; padding- bottom: 15px; border- bottom: 1px solid #eee; } . card- title { font- size: 1 . 3rem; font- weight: 600 ; color : #2c3e50; } . card- link { color : #3498db; text- decoration: none; font- size: 0 . 9rem; font- weight: 500 ; } . card- link: hover { text- decoration: underline; } . weather- card { background : linear- gradient ( 135deg, #3498db 0 % , #1a5f9e 100 % ) ; color : white; } . weather- card . card- title, . weather- card . card- link { color : rgba ( 255 , 255 , 255 , 0.9 ) ; } . weather- content { display : flex; justify- content: space- between; align- items: center; } . weather- info h2 { font- size: 2 . 2rem; margin- bottom: 5px; } . weather- info p { margin- bottom: 8px; opacity : 0.9 ; } . weather- icon { font- size: 4 . 5rem; opacity : 0.9 ; } . rain- alert { background : rgba ( 255 , 255 , 255 , 0.15 ) ; padding : 10px 15px; border- radius: 10px; margin- top: 15px; font- size: 0 . 95rem; } . market- table { width : 100 % ; border- collapse: collapse; } . market- table th { text- align: left; font- weight: 600 ; color : #7f8c8d; font- size: 0 . 9rem; padding : 8px 0 ; border- bottom: 1px solid #eee; } . market- table td { padding : 10px 0 ; border- bottom: 1px solid #f5f7fa; } . market- table tr: last- child td { border- bottom: none; } . index- name { font- weight: 500 ; } . index- value { font- weight: 600 ; color : #2c3e50; } . positive { color : #27ae60; font- weight: 600 ; } . negative { color : #e74c3c; font- weight: 600 ; } . calendar- header { display : flex; justify- content: space- between; align- items: center; margin- bottom: 20px; } . month- year { font- size: 1 . 2rem; font- weight: 600 ; color : #2c3e50; } . week- days { display : grid; grid- template- columns: repeat ( 7 , 1fr) ; text- align: center; font- weight: 600 ; color : #7f8c8d; margin- bottom: 10px; } . calendar- grid { display : grid; grid- template- columns: repeat ( 7 , 1fr) ; gap : 8px; } . calendar- day { height : 40px; display : flex; align- items: center; justify- content: center; border- radius: 10px; font- weight: 500 ; cursor : pointer; transition : all 0 . 2s ease; } . calendar- day: hover { background : #f0f7ff; } . other- month { color : #bdc3c7; } . today { background : #3498db; color : white; } . holiday { background : #e74c3c; color : white; position : relative; } . holiday: : after { content : "" ; position : absolute; top : 3px; right : 3px; width : 6px; height : 6px; background : #f1c40f; border- radius: 50 % ; } . festival- card { background : linear- gradient ( 135deg, #e74c3c 0 % , #c0392b 100 % ) ; color : white; } . festival- card . card- title { color : rgba ( 255 , 255 , 255 , 0.95 ) ; } . festival- name { font- size: 1 . 8rem; margin- bottom: 15px; text- align: center; } . customs- list { display : grid; grid- template- columns: repeat ( auto- fit, minmax ( 140px, 1fr) ) ; gap : 15px; margin- top: 20px; } . custom- item { background : rgba ( 255 , 255 , 255 , 0.15 ) ; padding : 15px; border- radius: 12px; text- align: center; font- weight: 500 ; transition : transform 0 . 3s ease; } . custom- item: hover { transform : translateY ( - 3px) ; background : rgba ( 255 , 255 , 255 , 0.25 ) ; } . custom- icon { font- size: 2rem; margin- bottom: 10px; display : block; } footer { text- align: center; margin- top: 30px; padding : 20px; color : #7f8c8d; font- size: 0 . 9rem; } @media ( max- width: 768px ) { . dashboard { grid- template- columns: 1fr; } header { flex- direction: column; align- items: flex- start; } } < / style>
< / head>
< body> < div class = "container" > < header> < div class = "logo" > < i class = "fas fa-chart-line" > < / i> < h1> 金融信息与节日日历< / h1> < / div> < div class = "date-display" > < i class = "fas fa-calendar-alt" > < / i> 2025 年5 月31 日 星期六< / div> < / header> < div class = "dashboard" > < ! -- Weather Card -- > < div class = "card weather-card" > < div class = "card-header" > < h2 class = "card-title" > 天气预报< / h2> < a href= "#" class = "card-link" > 查看完整预报 < i class = "fas fa-arrow-right" > < / i> < / a> < / div> < div class = "weather-content" > < div class = "weather-info" > < h2> 福州市< / h2> < p> 5 月31 日 早上好< / p> < p> < i class = "fas fa-temperature-high" > < / i> 27 ℃< / p> < / div> < div class = "weather-icon" > < i class = "fas fa-sun" > < / i> < / div> < / div> < div class = "rain-alert" > < i class = "fas fa-cloud-rain" > < / i> 预计星期二将有4 - 6mm的降雨< / div> < / div> < ! -- Market Card -- > < div class = "card" > < div class = "card-header" > < h2 class = "card-title" > 金融市场< / h2> < a href= "#" class = "card-link" > 查看市场 < i class = "fas fa-arrow-right" > < / i> < / a> < / div> < table class = "market-table" > < thead> < tr> < th> 指数名称< / th> < th> 涨跌幅< / th> < th> 点数< / th> < / tr> < / thead> < tbody> < tr> < td class = "index-name" > 上证指数 000001 < / td> < td class = "negative" > - 0.47 % < / td> < td class = "index-value" > 3 , 347.49 < / td> < / tr> < tr> < td class = "index-name" > 深证成指 399001 < / td> < td class = "negative" > - 0.85 % < / td> < td class = "index-value" > 10 , 040.63 < / td> < / tr> < tr> < td class = "index-name" > 创业板指 399006 < / td> < td class = "negative" > - 0.96 % < / td> < td class = "index-value" > 1 , 993.19 < / td> < / tr> < tr> < td class = "index-name" > USD / CNY 美元人民币< / td> < td class = "positive" > + 0.19 % < / td> < td class = "index-value" > 7.1991 < / td> < / tr> < tr> < td class = "index-name" > 恒生指数 HSI < / td> < td class = "negative" > - 1.20 % < / td> < td class = "index-value" > 23 , 289.77 < / td> < / tr> < tr> < td class = "index-name" > 中证1000 000852 < / td> < td class = "negative" > - 1.03 % < / td> < td class = "index-value" > 6 , 026.56 < / td> < / tr> < tr> < td class = "index-name" > 富时中国A50 XIN9 < / td> < td class = "negative" > - 0.44 % < / td> < td class = "index-value" > 13 , 364.65 < / td> < / tr> < / tbody> < / table> < / div> < ! -- Calendar Card -- > < div class = "card" > < div class = "card-header" > < h2 class = "card-title" > 日历< / h2> < a href= "#" class = "card-link" > 查看更多节日 < i class = "fas fa-arrow-right" > < / i> < / a> < / div> < div class = "calendar-header" > < div class = "month-year" > 2025 年5 月< / div> < / div> < div class = "week-days" > < div> 一< / div> < div> 二< / div> < div> 三< / div> < div> 四< / div> < div> 五< / div> < div> 六< / div> < div> 日< / div> < / div> < div class = "calendar-grid" > < div class = "calendar-day other-month" > 26 < / div> < div class = "calendar-day other-month" > 27 < / div> < div class = "calendar-day other-month" > 28 < / div> < div class = "calendar-day other-month" > 29 < / div> < div class = "calendar-day other-month" > 30 < / div> < div class = "calendar-day today holiday" > 31 < span style= "font-size:0.7rem;display:block;" > 端午< / span> < / div> < div class = "calendar-day" > 1 < span style= "font-size:0.7rem;display:block;" > 儿童节< / span> < / div> < / div> < / div> < ! -- Festival Card -- > < div class = "card festival-card" > < div class = "card-header" > < h2 class = "card-title" > 节日习俗< / h2> < / div> < div class = "festival-name" > 端午节< / div> < p> 端午节是中国的传统节日，为每年农历五月初五。端午节有吃粽子，赛龙舟，挂菖蒲、蒿草、艾叶，薰苍术、白芷，喝雄黄酒的习俗。< / p> < div class = "customs-list" > < div class = "custom-item" > < i class = "custom-icon fas fa-dumpling" > < / i> 吃粽子< / div> < div class = "custom-item" > < i class = "custom-icon fas fa-herbal" > < / i> 佩戴香囊< / div> < div class = "custom-item" > < i class = "custom-icon fas fa-wine-glass" > < / i> 饮雄黄酒< / div> < div class = "custom-item" > < i class = "custom-icon fas fa-ship" > < / i> 赛龙舟< / div> < div class = "custom-item" > < i class = "custom-icon fas fa-leaf" > < / i> 悬艾叶< / div> < div class = "custom-item" > < i class = "custom-icon fas fa-seedling" > < / i> 悬菖蒲< / div> < / div> < / div> < / div> < footer> < p> © 2025 金融信息与节日日历 | 数据更新时间: 2025 年5 月31 日 11 : 50 < / p> < / footer> < / div> < script> document. addEventListener ( 'DOMContentLoaded' , function ( ) { const today = new Date ( ) ; const options = { year : 'numeric' , month : 'long' , day : 'numeric' , weekday : 'long' } ; const dateString = today. toLocaleDateString ( 'zh-CN' , options) ; const dateElements = document. querySelectorAll ( '.date-display' ) ; dateElements. forEach ( el => { el. innerHTML = ` <i class="fas fa-calendar-alt"></i> ${ dateString} ` ; } ) ; const calendarDays = document. querySelectorAll ( '.calendar-day' ) ; calendarDays. forEach ( day => { day. addEventListener ( 'click' , function ( ) { calendarDays. forEach ( d => d. classList. remove ( 'selected' ) ) ; this . classList. add ( 'selected' ) ; } ) ; } ) ; } ) ; < / script>
< / body>
< / html>
 ✨ | Form Wave（表单label波动效果）)
)
)
