shumengya/InfoGenie
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改前端 项目改名

Browse Source
This commit is contained in:
树萌芽
2025-09-19 22:03:59 +08:00
parent 98c6371c4e
commit 7786e5f507
31 changed files with 950 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
InfoGenie-frontend/public/60sapi/实用功能/农历信息/css/background.css
View File

@@ -1,21 +1,21 @@
/* 农历主题背景样式 - 动态调节版本 */
/* 农历主题背景样式 - 柔和版本 */
body {
background: linear-gradient(135deg,
#fff8dc 0%, /* 玉米丝色 */
#ffd700 20%, /* 金黄色 */
#ffcc00 40%, /* 亮金色 */
#daa520 60%, /* 深金色 */
#b8860b 80%, /* 暗金色 */
#fff8dc 100% /* 玉米丝色 */
#f8f9fa 0%, /* 浅灰白 */
#fff3e0 20%, /* 淡橙色 */
#fef7e0 40%, /* 极淡黄 */
#f3e5ab 60%, /* 柔和金色 */
#e8dcc6 80%, /* 米色 */
#f8f9fa 100% /* 浅灰白 */
);
background-size: 400% 400%;
animation: goldenShift 25s ease infinite;
animation: gentleShift 30s ease infinite;
background-attachment: fixed;
min-height: 100vh;
position: relative;
}
@keyframes goldenShift {
@keyframes gentleShift {
0% { background-position: 0% 50%; }
25% { background-position: 100% 50%; }
50% { background-position: 100% 100%; }
@@ -23,7 +23,7 @@ body {
100% { background-position: 0% 50%; }
}
/* 动态颜色调节系统 */
/* 动态颜色调节系统 - 柔和版本 */
.adaptive-overlay {
position: fixed;
top: 0;
@@ -31,9 +31,9 @@ body {
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%);
radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.25) 0%, transparent 50%),
linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.3) 100%);
pointer-events: none;
z-index: 1;
animation: adaptiveShift 60s ease infinite;

270
InfoGenie-frontend/public/60sapi/实用功能/农历信息/css/style.css
View File

@@ -8,34 +8,26 @@
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #2c3e50;
color: #1a1a1a;
overflow-x: hidden;
animation: textColorShift 25s ease infinite;
}
@keyframes textColorShift {
0% {
color: #2c3e50;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}
25% {
color: #1a252f;
text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.9);
}
50% {
color: #34495e;
text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.7);
}
75% {
color: #2c3e50;
text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
}
100% {
color: #2c3e50;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}
/* 结果容器 - 优化可读性版本 */
.result-container {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 25px;
padding: 40px;
margin-top: 40px;
box-shadow:
0 8px 32px 0 rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
/* 移除过度的文字颜色动画，保持稳定的可读性 */
/* 容器 */
.container {
max-width: 1200px;
@@ -106,22 +98,21 @@ body {
}
}
/* 头部 - 动态调节版本 */
/* 头部 - 优化可读性版本 */
.header {
text-align: center;
margin-bottom: 40px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 40px 30px;
border-radius: 25px;
border: 1px solid rgba(255, 255, 255, 0.2);
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow:
0 8px 32px 0 rgba(31, 38, 135, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
0 8px 32px 0 rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
position: relative;
overflow: hidden;
animation: headerColorShift 25s ease infinite;
}
@keyframes headerColorShift {
@@ -204,78 +195,23 @@ body {
.title {
font-size: 3.2em;
font-weight: 800;
color: #2c3e50;
color: #1a1a1a;
margin-bottom: 10px;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8), 0 0 4px rgba(255, 255, 255, 0.6);
text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8);
letter-spacing: 2px;
animation: titleGlow 4s ease-in-out infinite alternate, titleColorShift 25s ease infinite;
}
@keyframes titleColorShift {
0% {
color: #2c3e50;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8), 0 0 4px rgba(255, 255, 255, 0.6);
}
25% {
color: #3498db;
text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.9), 0 0 6px rgba(52, 152, 219, 0.4);
}
50% {
color: #e74c3c;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7), 0 0 5px rgba(231, 76, 60, 0.3);
}
75% {
color: #f39c12;
text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8), 0 0 6px rgba(243, 156, 18, 0.4);
}
100% {
color: #2c3e50;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8), 0 0 4px rgba(255, 255, 255, 0.6);
}
}
@keyframes titleGlow {
0% {
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8), 0 0 4px rgba(255, 255, 255, 0.6);
color: #2c3e50;
}
100% {
text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 255, 255, 0.7);
color: #3498db;
}
}
/* 移除标题颜色动画，保持稳定的可读性 */
.subtitle {
font-size: 1.3em;
color: #7f8c8d;
color: #555555;
margin-bottom: 30px;
font-weight: 600;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
animation: subtitleColorShift 25s ease infinite;
}
@keyframes subtitleColorShift {
0% {
color: #7f8c8d;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}
25% {
color: #9b59b6;
text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
}
50% {
color: #e67e22;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}
75% {
color: #27ae60;
text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}
100% {
color: #7f8c8d;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}
}
/* 移除副标题颜色动画，保持稳定的可读性 */
/* 日期选择器 */
.date-selector {
@@ -298,84 +234,35 @@ body {
display: flex;
align-items: center;
gap: 8px;
color: #0f1419;
color: #2c2c2c;
font-weight: 600;
font-size: 1em;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
animation: labelColorShift 25s ease infinite;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}
@keyframes labelColorShift {
0% {
color: #0f1419;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
25% {
color: #1a252f;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.7);
}
50% {
color: #2c3e50;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
75% {
color: #0f1419;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}
100% {
color: #0f1419;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
}
/* 移除标签颜色动画，保持稳定的可读性 */
.label-icon {
font-size: 1.2em;
}
.date-input {
background: rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 15px;
padding: 12px 16px;
color: #0a0f14;
color: #1a1a1a;
font-size: 1em;
font-weight: 500;
transition: all 0.3s ease;
box-shadow:
0 4px 15px rgba(31, 38, 135, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
animation: inputColorShift 25s ease infinite;
0 4px 15px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
@keyframes inputColorShift {
0% {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
color: #0a0f14;
}
25% {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.4);
color: #1a252f;
}
50% {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.35);
color: #2c3e50;
}
75% {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.38);
color: #0a0f14;
}
100% {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
color: #0a0f14;
}
}
/* 移除输入框颜色动画，保持稳定的可读性 */
.date-input:focus {
outline: none;
@@ -395,11 +282,11 @@ body {
}
.query-btn {
background: rgba(255, 255, 255, 0.15);
background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
color: #0a0f14;
border: 1px solid rgba(255, 255, 255, 0.3);
color: #1a1a1a;
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 12px 28px;
border-radius: 20px;
cursor: pointer;
@@ -411,40 +298,13 @@ body {
gap: 8px;
position: relative;
overflow: hidden;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
box-shadow:
0 4px 15px rgba(31, 38, 135, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
animation: buttonColorShift 25s ease infinite;
0 4px 15px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
@keyframes buttonColorShift {
0% {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
color: #0a0f14;
}
25% {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.4);
color: #1a252f;
}
50% {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.35);
color: #2c3e50;
}
75% {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.38);
color: #0a0f14;
}
100% {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
color: #0a0f14;
}
}
/* 移除按钮颜色动画，保持稳定的可读性 */
.query-btn::before {
content: '';
@@ -466,12 +326,12 @@ body {
}
.query-btn:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.4);
transform: translateY(-3px);
background: linear-gradient(135deg, #e8e8e8, #d8d8d8);
border-color: rgba(0, 0, 0, 0.3);
transform: translateY(-2px);
box-shadow:
0 8px 25px rgba(31, 38, 135, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
0 8px 25px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.btn-icon {
@@ -590,10 +450,10 @@ body {
.loading-text p {
font-size: 1.2em;
color: rgba(255, 255, 255, 0.9);
color: #1a1a1a;
font-weight: 600;
margin: 0;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}
.loading-dots {
@@ -604,7 +464,7 @@ body {
.loading-dots span {
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.7);
background: #4a4a4a;
border-radius: 50%;
animation: glassDotsFloat 1.4s ease-in-out infinite both;
backdrop-filter: blur(2px);
@@ -1016,15 +876,18 @@ body {
}
}
/* 手机端适配 (767px以下) */
/* 手机端适配 (767px以下) - 优化手机端体验 */
@media (max-width: 767px) {
.container {
padding: 15px;
margin: 10px auto;
max-width: 95%;
}
.header {
padding: 25px 20px;
padding: 25px 15px;
margin-bottom: 25px;
border-radius: 20px;
}
.header-icon {
@@ -1034,16 +897,19 @@ body {
.title {
font-size: 2.2em;
letter-spacing: 1px;
margin-bottom: 8px;
}
.subtitle {
font-size: 1em;
margin-bottom: 20px;
}
.date-selector {
flex-direction: column;
gap: 15px;
align-items: center;
padding: 0 5px;
}
.input-group {
@@ -1053,16 +919,19 @@ body {
}
.date-input {
padding: 10px 14px;
font-size: 0.95em;
padding: 14px 16px;
font-size: 16px; /* 防止iOS缩放 */
border-radius: 12px;
}
.query-btn {
padding: 10px 24px;
font-size: 0.95em;
padding: 14px 24px;
font-size: 16px;
width: 100%;
max-width: 200px;
justify-content: center;
border-radius: 15px;
margin-top: 10px;
}
.update-time {
@@ -1101,7 +970,8 @@ body {
.item-label {
min-width: auto;
font-size: 0.9em;
font-size: 0.95em;
margin-bottom: 8px;
}
.item-value {
@@ -1360,7 +1230,7 @@ body {
.hour-label {
font-weight: 600;
color: #ffffff;
color: #1a1a1a;
margin-right: 4px;
}
@@ -1373,7 +1243,7 @@ body {
}
.hour-text {
color: rgba(255, 255, 255, 0.9);
color: #2c2c2c;
}
/* 时辰宜忌响应式优化 */

2
InfoGenie-frontend/public/60sapi/实用功能/农历信息/js/script.js
View File

@@ -382,7 +382,7 @@ function showSuccessMessage(message) {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
color: rgba(255, 255, 255, 0.95);
color: #1a1a1a;
padding: 12px 20px;
border-radius: 25px;
border: 1px solid rgba(255, 255, 255, 0.3);

179
InfoGenie-frontend/public/60sapi/日更资讯/历史上的今天/css/style.css
View File

@@ -9,13 +9,29 @@
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(135deg,
#e8f5e8 0%, /* 淡绿色 */
#f0f8e8 25%, /* 浅绿黄 */
#fff8dc 50%, /* 淡黄色 */
#f5f5dc 75%, /* 米色 */
#e8f5e8 100% /* 淡绿色 */
);
background-size: 400% 400%;
animation: freshGradientShift 20s ease infinite;
min-height: 100vh;
color: #2c3e50;
line-height: 1.6;
overflow-x: hidden;
}
@keyframes freshGradientShift {
0% { background-position: 0% 50%; }
25% { background-position: 100% 50%; }
50% { background-position: 100% 100%; }
75% { background-position: 0% 100%; }
100% { background-position: 0% 50%; }
}
.container {
max-width: 100%;
margin: 0 auto;
@@ -26,11 +42,12 @@ body {
.header {
text-align: center;
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 20px 15px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
padding: 25px 20px;
box-shadow: 0 8px 32px rgba(46, 125, 50, 0.15);
backdrop-filter: blur(15px);
border: 1px solid rgba(139, 195, 74, 0.2);
}
.header h1 {
@@ -52,43 +69,47 @@ body {
}
/* 日期显示 */
.date-info {
background: rgba(255, 255, 255, 0.95);
border-radius: 12px;
padding: 15px;
margin-bottom: 15px;
.date-section {
background: rgba(255, 255, 255, 0.9);
border-radius: 16px;
padding: 20px;
margin-bottom: 20px;
text-align: center;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
box-shadow: 0 6px 24px rgba(76, 175, 80, 0.12);
border: 1px solid rgba(139, 195, 74, 0.2);
}
.date-info h2 {
font-size: 1.3rem;
color: #2c3e50;
margin-bottom: 5px;
.date-display h2 {
font-size: 1.4rem;
color: #2e7d32;
margin-bottom: 8px;
font-weight: 600;
}
.date-info .date-text {
color: #7f8c8d;
font-size: 0.9rem;
.date-display .date-text {
color: #558b2f;
font-size: 1rem;
font-weight: 500;
}
/* 加载状态 */
.loading {
text-align: center;
padding: 30px 15px;
background: rgba(255, 255, 255, 0.95);
border-radius: 12px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
padding: 40px 20px;
background: rgba(255, 255, 255, 0.9);
border-radius: 16px;
box-shadow: 0 6px 24px rgba(76, 175, 80, 0.12);
border: 1px solid rgba(139, 195, 74, 0.2);
}
.spinner {
width: 35px;
height: 35px;
border: 3px solid #ecf0f1;
border-top: 3px solid #667eea;
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(139, 195, 74, 0.2);
border-top: 3px solid #689f38;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 15px;
animation: spin 1.2s linear infinite;
margin: 0 auto 20px;
}
@keyframes spin {
@@ -98,40 +119,49 @@ body {
/* 历史事件容器 */
.events-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 15px;
margin-bottom: 15px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
padding: 25px;
margin-bottom: 20px;
box-shadow: 0 8px 32px rgba(76, 175, 80, 0.15);
backdrop-filter: blur(15px);
border: 1px solid rgba(139, 195, 74, 0.2);
}
/* 统计信息 */
.stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 20px;
gap: 12px;
margin-bottom: 25px;
}
.stat-item {
background: rgba(102, 126, 234, 0.1);
border-radius: 10px;
padding: 12px;
background: rgba(139, 195, 74, 0.15);
border-radius: 12px;
padding: 16px 12px;
text-align: center;
border: 1px solid rgba(139, 195, 74, 0.2);
transition: all 0.3s ease;
}
.stat-item:hover {
background: rgba(139, 195, 74, 0.2);
transform: translateY(-2px);
}
.stat-number {
font-size: 1.4rem;
font-size: 1.5rem;
font-weight: 700;
color: #667eea;
color: #558b2f;
display: block;
}
.stat-label {
color: #7f8c8d;
font-size: 0.8rem;
margin-top: 3px;
color: #689f38;
font-size: 0.85rem;
margin-top: 4px;
font-weight: 500;
}
/* 事件列表 */
@@ -142,18 +172,20 @@ body {
}
.event-card {
background: rgba(255, 255, 255, 0.9);
border-radius: 12px;
padding: 15px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
background: rgba(255, 255, 255, 0.95);
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 16px rgba(76, 175, 80, 0.1);
transition: all 0.3s ease;
border-left: 4px solid #667eea;
border-left: 4px solid #81c784;
position: relative;
border: 1px solid rgba(139, 195, 74, 0.15);
}
.event-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(76, 175, 80, 0.15);
border-left-color: #66bb6a;
}
/* 事件类型标签 */
@@ -170,25 +202,25 @@ body {
.event-type.birth {
background: #e8f5e8;
color: #27ae60;
color: #2e7d32;
}
.event-type.death {
background: #fdf2e9;
color: #e67e22;
background: #fff3e0;
color: #f57c00;
}
.event-type.event {
background: #ebf3fd;
color: #3498db;
background: #f1f8e9;
color: #558b2f;
}
/* 事件年份 */
.event-year {
font-size: 1.1rem;
font-weight: 700;
color: #667eea;
margin-bottom: 8px;
color: #558b2f;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
@@ -220,20 +252,22 @@ body {
.event-link {
display: inline-flex;
align-items: center;
gap: 5px;
color: #667eea;
gap: 6px;
color: #558b2f;
text-decoration: none;
font-size: 0.8rem;
font-size: 0.85rem;
font-weight: 500;
padding: 6px 12px;
background: rgba(102, 126, 234, 0.1);
border-radius: 15px;
padding: 8px 14px;
background: rgba(139, 195, 74, 0.15);
border-radius: 18px;
transition: all 0.3s ease;
border: 1px solid rgba(139, 195, 74, 0.2);
}
.event-link:hover {
background: rgba(102, 126, 234, 0.2);
background: rgba(139, 195, 74, 0.25);
transform: translateX(2px);
color: #2e7d32;
}
.event-link::after {
@@ -371,18 +405,19 @@ body {
/* 滚动条样式 */
::-webkit-scrollbar {
width: 6px;
width: 8px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
background: rgba(139, 195, 74, 0.1);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: rgba(102, 126, 234, 0.5);
border-radius: 3px;
background: rgba(139, 195, 74, 0.5);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(102, 126, 234, 0.7);
background: rgba(139, 195, 74, 0.7);
}

93
InfoGenie-frontend/public/60sapi/日更资讯/每日国际汇率/css/style.css
View File

@@ -296,66 +296,131 @@ body {
/* 手机端 */
@media (max-width: 480px) {
body {
overflow-x: hidden;
}
.container {
padding: 10px;
padding: 8px;
margin: 8px;
max-width: calc(100vw - 16px);
width: calc(100vw - 16px);
}
.header {
padding: 15px;
margin-bottom: 20px;
padding: 12px;
margin-bottom: 16px;
}
.header h1 {
font-size: 1.8rem;
font-size: 1.6rem;
flex-direction: column;
gap: 8px;
}
.header p {
font-size: 0.9rem;
}
.rates-grid {
grid-template-columns: repeat(4, 1fr);
gap: 6px;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
width: 100%;
overflow: hidden;
}
.rate-card {
padding: 8px;
padding: 10px 6px;
border-radius: 8px;
min-width: 0;
width: 100%;
}
.currency-code {
font-size: 0.85rem;
font-size: 0.8rem;
margin-bottom: 4px;
gap: 4px;
gap: 3px;
word-break: break-all;
}
.currency-flag {
font-size: 1rem;
font-size: 0.9rem;
}
.exchange-rate {
font-size: 0.9rem;
font-size: 0.85rem;
margin-bottom: 3px;
word-break: break-all;
}
.currency-name {
font-size: 0.7rem;
font-size: 0.65rem;
line-height: 1.1;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.currency-selector {
padding: 15px;
padding: 12px;
margin-bottom: 16px;
}
.currency-selector select {
min-width: 100%;
width: 100%;
max-width: 100%;
padding: 10px 15px;
font-size: 0.9rem;
}
.search-container {
padding: 12px;
margin-bottom: 16px;
}
.search-input {
padding: 10px 15px;
font-size: 0.9rem;
width: 100%;
}
.stats {
padding: 15px;
margin-bottom: 16px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.stat-item {
padding: 12px;
}
.stat-number {
font-size: 1.3rem;
}
.stat-label {
font-size: 0.8rem;
}
.exchange-info {
padding: 15px;
margin-bottom: 16px;
}
.base-currency h2 {
font-size: 1.5rem;
}
.update-time {
font-size: 0.8rem;
}
}
/* 大屏幕优化 */

93
InfoGenie-frontend/public/60sapi/热搜榜单/抖音热搜榜/css/style.css
View File

@@ -460,19 +460,48 @@ footer {
}
@media (max-width: 480px) {
body {
overflow-x: hidden;
}
.container {
margin: 8px auto;
padding: 6px;
margin: 8px;
padding: 8px;
max-width: calc(100vw - 16px);
width: calc(100vw - 16px);
}
header {
padding: 12px 0 16px 0;
margin-bottom: 16px;
}
header h1 {
font-size: 1.6rem;
font-size: 1.5rem;
margin-bottom: 8px;
}
.update-time {
font-size: 0.8rem;
padding: 6px 12px;
}
.refresh-btn {
font-size: 0.8rem;
padding: 8px 16px;
margin-top: 12px;
}
.hot-item {
padding: 10px;
margin-bottom: 8px;
gap: 8px;
padding: 12px;
margin-bottom: 10px;
gap: 10px;
width: 100%;
min-width: 0;
}
.hot-rank-container {
flex-shrink: 0;
}
.hot-rank {
@@ -484,36 +513,72 @@ footer {
font-size: 0.75rem;
}
.hot-content-wrapper {
flex: 1;
min-width: 0;
overflow: hidden;
}
.hot-title {
font-size: 0.85rem;
font-size: 0.9rem;
line-height: 1.3;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.hot-meta-row {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.hot-media-row {
.hot-bottom-row {
flex-wrap: wrap;
gap: 8px;
}
.hot-time {
font-size: 0.7rem;
flex-shrink: 0;
}
.hot-value {
font-size: 0.65rem;
padding: 3px 8px;
flex-shrink: 0;
}
.hot-cover {
width: 60px;
height: 45px;
flex-shrink: 0;
}
.hot-link {
font-size: 0.65rem;
padding: 4px 8px;
flex-shrink: 0;
}
.link-text {
font-size: 0.65rem;
}
.loading {
padding: 30px;
font-size: 1rem;
}
.loading-content {
padding: 20px;
}
.loading-text p {
font-size: 0.9rem;
}
footer {
margin-top: 20px;
padding-top: 16px;
font-size: 0.8rem;
}
}

89
InfoGenie-frontend/public/60sapi/热搜榜单/知乎热门话题/css/style.css
View File

@@ -449,18 +449,42 @@ footer {
}
@media (max-width: 480px) {
body {
overflow-x: hidden;
}
.container {
margin: 8px auto;
padding: 14px;
margin: 8px;
padding: 12px;
max-width: calc(100vw - 16px);
width: calc(100vw - 16px);
}
header {
margin-bottom: 20px;
padding-bottom: 16px;
}
header h1 {
font-size: 1.6rem;
font-size: 1.5rem;
margin-bottom: 10px;
}
.update-time {
font-size: 0.8rem;
padding: 6px 12px;
}
.topic-item {
padding: 14px;
margin-bottom: 10px;
margin-bottom: 12px;
width: 100%;
min-width: 0;
}
.topic-header {
width: 100%;
min-width: 0;
}
.topic-rank {
@@ -469,15 +493,66 @@ footer {
min-width: 30px;
width: 30px;
height: 30px;
flex-shrink: 0;
}
.topic-content {
flex: 1;
min-width: 0;
padding-right: 12px;
}
.topic-title {
font-size: 0.95rem;
line-height: 1.4;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.topic-cover {
width: 80px;
height: 60px;
.topic-detail {
font-size: 0.85rem;
line-height: 1.5;
margin-bottom: 8px;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.topic-stats {
gap: 8px;
font-size: 0.75rem;
flex-wrap: wrap;
}
.short-content .topic-cover {
width: 70px;
height: 50px;
flex-shrink: 0;
}
.long-content .topic-cover {
width: 100%;
max-width: 100%;
height: auto;
margin-top: 10px;
}
.loading {
padding: 30px;
font-size: 1rem;
}
footer {
margin-top: 20px;
padding-top: 16px;
font-size: 0.8rem;
}
}

61
InfoGenie-frontend/public/index.html
View File

@@ -4,19 +4,19 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#667eea" />
<meta name="description" content="✨ 神奇万事通 - 一个多功能的聚合软件应用，提供60s API、小游戏、AI模型等丰富功能" />
<meta name="keywords" content="60s API,热搜榜单,小游戏,AI模型,实时资讯,工具集合" />
<meta name="author" content="神奇万事通" />
<meta name="description" content="✨ 万象口袋 - 一个多功能的聚合软件应用，提供聚合应用、小游戏、AI模型工具等丰富功能" />
<meta name="keywords" content="聚合应用,热搜榜单,小游戏,AI模型,实时资讯,工具集合" />
<meta name="author" content="万象口袋" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:title" content="神奇万事通" />
<meta property="og:description" content="🎨 一个多功能的聚合软件应用 💬" />
<meta property="og:title" content="万象口袋" />
<meta property="og:description" content="🎨一个跨平台的多功能聚合软件应用" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="神奇万事通" />
<meta property="twitter:description" content="🎨 一个多功能的聚合软件应用 💬" />
<meta property="twitter:title" content="万象口袋" />
<meta property="twitter:description" content="🎨一个跨平台的多功能聚合软件应用" />
<!-- Favicon -->
<link rel="icon" href="%PUBLIC_URL%/assets/logo.png" />
@@ -31,7 +31,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<title>神奇万事通</title>
<title>万象口袋</title>
<style>
/* 加载动画 */
@@ -52,30 +52,30 @@
}
#loading .loading-logo {
width: 64px;
height: 64px;
width: 90px;
height: 90px;
margin-bottom: 24px;
animation: pulse 2s infinite;
border-radius: 8px;
}
#loading .loading-text {
font-size: 24px;
font-size: 34px;
font-weight: bold;
margin-bottom: 16px;
}
#loading .loading-desc {
font-size: 14px;
opacity: 0.8;
font-size: 20px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 32px;
}
#loading .loading-spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid white;
width: 56px;
height: 56px;
border: 6px solid rgba(255, 255, 255, 0.3);
border-top: 6px solid #ffffff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@@ -91,8 +91,25 @@
}
@media (max-width: 768px) {
#loading .loading-logo { width: 48px; height: 48px; }
#loading .loading-text { font-size: 20px; }
#loading .loading-logo {
width: 67px;
height: 67px;
}
#loading .loading-text {
font-size: 28px;
}
#loading .loading-desc {
font-size: 17px;
}
#loading .loading-spinner {
width: 42px;
height: 42px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid #ffffff;
}
}
</style>
</head>
@@ -101,9 +118,9 @@
<!-- 加载动画 -->
<div id="loading">
<img class="loading-logo" src="%PUBLIC_URL%/assets/logo.png" alt="神奇万事通" />
<div class="loading-text">神奇万事通</div>
<div class="loading-desc">🎨 多功能聚合应用 💬</div>
<img class="loading-logo" src="%PUBLIC_URL%/assets/logo.png" alt="万象口袋" />
<div class="loading-text">万象口袋</div>
<div class="loading-desc">🎨 一个跨平台的多功能聚合应用(´｡• ω •｡`) 💬</div>
<div class="loading-spinner"></div>
</div>

8
InfoGenie-frontend/public/manifest.json
View File

@@ -1,7 +1,7 @@
{
"short_name": "神奇万事通",
"name": "✨ 神奇万事通 - 多功能聚合应用",
"description": "🎨 一个多功能的聚合软件应用，提供60s API、小游戏、AI模型等丰富功能",
"short_name": "万象口袋",
"name": "✨ 万象口袋 - 多功能聚合应用",
"description": "🎨 一个多功能的聚合软件应用，提供聚合应用、休闲小游戏、AI模型工具等丰富功能",
"icons": [
{
"src": "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>✨</text></svg>",
@@ -29,7 +29,7 @@
"categories": ["utilities", "productivity", "entertainment"],
"screenshots": [
{
"src": "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800'><rect width='400' height='800' fill='%23667eea'/><text x='200' y='400' text-anchor='middle' fill='white' font-size='32'>神奇万事通</text></svg>",
"src": "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800'><rect width='400' height='800' fill='%23667eea'/><text x='200' y='400' text-anchor='middle' fill='white' font-size='32'>万象口袋</text></svg>",
"type": "image/svg+xml",
"sizes": "400x800",
"form_factor": "narrow"