update: 2026-03-28 20:59
This commit is contained in:
105
InfoGenie-frontend/public/60sapi/周期资讯/AI资讯快报.html
Normal file
105
InfoGenie-frontend/public/60sapi/周期资讯/AI资讯快报.html
Normal file
@@ -0,0 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>AI资讯快报</title>
|
||||
<style>
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{font-family:'KaiTi','楷体',serif;background:#f9fafb;color:#1f2937;line-height:1.6;min-height:100vh}
|
||||
.header{background:linear-gradient(135deg,#065f46,#059669);color:#fff;padding:16px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10}
|
||||
.header h1{flex:1;font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.btn{width:36px;height:36px;border:none;border-radius:10px;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px}
|
||||
.btn:hover{background:rgba(255,255,255,.25)}
|
||||
.body{max-width:720px;margin:0 auto;padding:20px 16px 40px}
|
||||
.date{display:flex;align-items:center;gap:6px;font-size:13px;color:#6b7280;padding-bottom:12px;border-bottom:1px solid #e5e7eb;margin-bottom:16px}
|
||||
.item{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid #f3f4f6}.item:last-child{border-bottom:none}
|
||||
.num{flex-shrink:0;width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;margin-top:1px;color:#9ca3af;background:#f3f4f6}
|
||||
.num.t1{color:#fff;background:#ef4444}.num.t2{color:#fff;background:#f97316}.num.t3{color:#fff;background:#eab308}
|
||||
.text{flex:1;font-size:14px;line-height:1.7}
|
||||
.tip{margin-top:20px;padding:14px 16px;border-radius:12px;font-size:13px;line-height:1.6;color:#6b7280;background:#f0fdf4;border:1px solid rgba(34,197,94,.1);font-style:italic}
|
||||
.cover{margin-top:16px;text-align:center}.cover img{max-width:100%;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
|
||||
.loader{display:flex;flex-direction:column;align-items:center;padding:60px 0;color:#9ca3af;gap:10px;font-size:13px}
|
||||
.spinner{width:24px;height:24px;border:3px solid #e5e7eb;border-top-color:#059669;border-radius:50%;animation:spin 1s linear infinite}
|
||||
@keyframes spin{to{transform:rotate(360deg)}}
|
||||
.err{text-align:center;padding:40px 16px;color:#ef4444;font-size:14px}
|
||||
@media(max-width:640px){.body{padding:16px 12px 32px}.text{font-size:13px}.header h1{font-size:14px}}
|
||||
</style>
|
||||
<script src="/60sapi/ig-embed.js"></script>
|
||||
<script src="/60sapi/sixty-runtime.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<button class="btn" onclick="history.back()">←</button>
|
||||
<h1>🤖 AI资讯快报</h1>
|
||||
<button class="btn" onclick="loadData()">↻</button>
|
||||
</div>
|
||||
<div class="body" id="content">
|
||||
<div class="loader"><div class="spinner"></div><span>加载中...</span></div>
|
||||
</div>
|
||||
<script>
|
||||
const API=window.__SIXTY_API_BASE__+'/v2/ai-news?encoding=json';
|
||||
function escapeHtml(s){
|
||||
if(s==null)return'';
|
||||
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
||||
}
|
||||
function pickNewsList(d){
|
||||
if(!d||typeof d!=='object')return[];
|
||||
if(Array.isArray(d))return d;
|
||||
const keys=['news','items','list','data','content'];
|
||||
for(const k of keys){
|
||||
const v=d[k];
|
||||
if(Array.isArray(v))return v;
|
||||
}
|
||||
return [];
|
||||
}
|
||||
function renderNewsItem(t,i){
|
||||
const cls=i===0?'t1':i===1?'t2':i===2?'t3':'';
|
||||
if(typeof t==='string'){
|
||||
return `<div class="item"><div class="num ${cls}">${i+1}</div><div class="text">${escapeHtml(t)}</div></div>`;
|
||||
}
|
||||
if(t&&typeof t==='object'){
|
||||
const title=t.title||t.name||'';
|
||||
const link=t.link||t.url||'';
|
||||
const detail=(t.detail||t.desc||t.description||'').trim();
|
||||
const source=t.source||'';
|
||||
const short=detail.length>220?detail.slice(0,220)+'…':detail;
|
||||
let titleHtml=escapeHtml(title);
|
||||
if(link)titleHtml=`<a href="${escapeHtml(link)}" target="_blank" rel="noopener" style="color:#059669;font-weight:600;text-decoration:none">${titleHtml} ↗</a>`;
|
||||
let body=`<div class="text"><div style="margin-bottom:6px">${titleHtml}</div>`;
|
||||
if(short)body+=`<div style="font-size:13px;color:#6b7280;line-height:1.65">${escapeHtml(short)}</div>`;
|
||||
if(source)body+=`<div style="font-size:12px;color:#9ca3af;margin-top:6px">来源 · ${escapeHtml(source)}</div>`;
|
||||
body+='</div>';
|
||||
return `<div class="item"><div class="num ${cls}">${i+1}</div>${body}</div>`;
|
||||
}
|
||||
return `<div class="item"><div class="num ${cls}">${i+1}</div><div class="text">${escapeHtml(String(t))}</div></div>`;
|
||||
}
|
||||
async function loadData(){
|
||||
const el=document.getElementById('content');
|
||||
el.innerHTML='<div class="loader"><div class="spinner"></div><span>加载中...</span></div>';
|
||||
try{
|
||||
const res=await fetch(API,{headers:{Accept:'application/json'}});
|
||||
const json=await res.json();
|
||||
if(json.code!=null&&json.code!==200&&json.code!==0){
|
||||
throw new Error(json.message||('接口 code '+json.code));
|
||||
}
|
||||
const d=json.data||json;
|
||||
let html='';
|
||||
if(d.date)html+=`<div class="date">🕐 ${escapeHtml(d.date)} ${escapeHtml(d.day_of_week||'')}</div>`;
|
||||
const news=pickNewsList(d);
|
||||
if(news.length===0){
|
||||
html+=`<div class="tip" style="margin-top:0;font-style:normal">
|
||||
<strong>当日暂无 AI 资讯条目</strong><br><br>
|
||||
官方说明:数据源并非每日更新,重大资讯也可能集中在晚间。建议 <strong>22:00 后</strong> 再试,或在接口中传入 <code style="background:#fff;padding:2px 6px;border-radius:6px">?date=2025-11-11</code> 查看历史日期。
|
||||
</div>`;
|
||||
}else{
|
||||
news.forEach((t,i)=>{html+=renderNewsItem(t,i);});
|
||||
}
|
||||
if(d.tip)html+=`<div class="tip">💡 ${escapeHtml(d.tip)}</div>`;
|
||||
if(d.image)html+=`<div class="cover"><img src="${escapeHtml(d.image)}" alt="封面" loading="lazy"></div>`;
|
||||
el.innerHTML=html||'<div class="err">暂无数据</div>';
|
||||
}catch(e){el.innerHTML=`<div class="err">加载失败:${escapeHtml(e.message)}</div>`}
|
||||
}
|
||||
loadData();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
111
InfoGenie-frontend/public/60sapi/周期资讯/Epic免费游戏.html
Normal file
111
InfoGenie-frontend/public/60sapi/周期资讯/Epic免费游戏.html
Normal file
@@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Epic免费游戏</title>
|
||||
<style>
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{font-family:'KaiTi','楷体',serif;background:#f9fafb;color:#1f2937;line-height:1.6;min-height:100vh}
|
||||
.header{background:linear-gradient(135deg,#065f46,#059669);color:#fff;padding:16px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10}
|
||||
.header h1{flex:1;font-size:16px;font-weight:700}.btn{width:36px;height:36px;border:none;border-radius:10px;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px}.btn:hover{background:rgba(255,255,255,.25)}
|
||||
.body{max-width:720px;margin:0 auto;padding:20px 16px 40px}
|
||||
.rank-item{display:flex;align-items:stretch;gap:12px;padding:12px 14px;margin-bottom:6px;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.04);transition:all .15s}
|
||||
.rank-item:hover{box-shadow:0 3px 10px rgba(0,0,0,.08);transform:translateX(2px)}
|
||||
.thumb-wrap{flex-shrink:0;width:120px;min-height:68px;border-radius:10px;overflow:hidden;background:#f3f4f6;align-self:center}
|
||||
.thumb-wrap img{display:block;width:100%;height:100%;min-height:68px;object-fit:cover}
|
||||
.rank-main{display:flex;align-items:flex-start;gap:10px;flex:1;min-width:0}
|
||||
.badge{flex-shrink:0;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#9ca3af;background:#f3f4f6}
|
||||
.badge.t1{color:#fff;background:linear-gradient(135deg,#ef4444,#dc2626)}.badge.t2{color:#fff;background:linear-gradient(135deg,#f97316,#ea580c)}.badge.t3{color:#fff;background:linear-gradient(135deg,#eab308,#ca8a04)}
|
||||
.rank-body{flex:1;min-width:0}
|
||||
.rank-title{font-size:14px;font-weight:500;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.rank-title a{color:inherit;text-decoration:none}.rank-title a:hover{color:#059669}
|
||||
.rank-meta{font-size:11px;color:#b0b0b0;margin-top:2px}
|
||||
.loader{display:flex;flex-direction:column;align-items:center;padding:60px 0;color:#9ca3af;gap:10px;font-size:13px}
|
||||
.spinner{width:24px;height:24px;border:3px solid #e5e7eb;border-top-color:#059669;border-radius:50%;animation:spin 1s linear infinite}
|
||||
@keyframes spin{to{transform:rotate(360deg)}}
|
||||
.err{text-align:center;padding:40px 16px;color:#ef4444;font-size:14px}
|
||||
@media(max-width:640px){.thumb-wrap{width:88px;min-height:50px}.thumb-wrap img{min-height:50px}}
|
||||
</style>
|
||||
<script src="/60sapi/ig-embed.js"></script>
|
||||
<script src="/60sapi/sixty-runtime.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<button class="btn" onclick="history.back()">←</button>
|
||||
<h1>🎮 Epic免费游戏</h1>
|
||||
<button class="btn" onclick="loadData()">↻</button>
|
||||
</div>
|
||||
<div class="body" id="content">
|
||||
<div class="loader"><div class="spinner"></div><span>加载中...</span></div>
|
||||
</div>
|
||||
<script>
|
||||
function safeHttpUrl(u){
|
||||
if(!u||typeof u!=='string')return'';
|
||||
const t=u.trim();
|
||||
return /^https?:\/\//i.test(t)?t:'';
|
||||
}
|
||||
function escapeAttr(s){
|
||||
return String(s).replace(/&/g,'&').replace(/"/g,'"');
|
||||
}
|
||||
function escapeHtml(s){
|
||||
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
||||
}
|
||||
/** 从 Epic / 60s 多种字段里取封面图 */
|
||||
function pickEpicCover(item){
|
||||
if(!item)return'';
|
||||
const tryKeys=['poster','cover','coverUrl','image','imageUrl','thumbnail','icon','logo'];
|
||||
for(const k of tryKeys){
|
||||
const v=item[k];
|
||||
if(typeof v==='string'&&safeHttpUrl(v))return safeHttpUrl(v);
|
||||
}
|
||||
const imgs=item.keyImages||item.images;
|
||||
if(Array.isArray(imgs)&&imgs.length){
|
||||
const wide=imgs.find(function(k){return k&&(/wide|landscape|offerimagewide|diesel/i.test(String(k.type||'')));});
|
||||
const first=imgs[0];
|
||||
const url=(wide&&wide.url)||(first&&first.url)||'';
|
||||
return safeHttpUrl(url);
|
||||
}
|
||||
return'';
|
||||
}
|
||||
function pickEpicList(d){
|
||||
if(Array.isArray(d))return d;
|
||||
if(!d||typeof d!=='object')return[];
|
||||
const keys=['games','freeGames','items','list','data','elements'];
|
||||
for(let i=0;i<keys.length;i++){
|
||||
const v=d[keys[i]];
|
||||
if(Array.isArray(v))return v;
|
||||
}
|
||||
return[];
|
||||
}
|
||||
async function loadData(){
|
||||
const el=document.getElementById('content');
|
||||
el.innerHTML='<div class="loader"><div class="spinner"></div><span>加载中...</span></div>';
|
||||
try{
|
||||
const res=await fetch(window.__SIXTY_API_BASE__+'/v2/epic?encoding=json',{headers:{Accept:'application/json'}});
|
||||
const json=await res.json();
|
||||
const d=json.data||json;
|
||||
const list=pickEpicList(d);
|
||||
if(!list.length)throw new Error('暂无数据');
|
||||
let html='';
|
||||
list.slice(0,50).forEach((item,i)=>{
|
||||
const title=item.title||item.name||String(item);
|
||||
const link=item.link||item.url||item.storeUrl||'';
|
||||
const hot=item.hot||item.hotScore||item.heat||item.score||'';
|
||||
const desc=item.desc||item.description||item.subtitle||'';
|
||||
const img=pickEpicCover(item);
|
||||
const cls=i===0?'t1':i===1?'t2':i===2?'t3':'';
|
||||
html+='<div class="rank-item">';
|
||||
if(img)html+=`<div class="thumb-wrap"><img src="${escapeAttr(img)}" alt="" loading="lazy" decoding="async" onerror="this.style.visibility='hidden'"/></div>`;
|
||||
html+='<div class="rank-main"><div class="badge '+cls+'">'+(i+1)+'</div><div class="rank-body">';
|
||||
html+=`<div class="rank-title">${link?`<a href="${escapeAttr(link)}" target="_blank" rel="noopener">${escapeHtml(title)} ↗</a>`:escapeHtml(title)}</div>`;
|
||||
if(desc)html+=`<div class="rank-meta">${escapeHtml(desc.length>120?desc.slice(0,120)+'…':desc)}</div>`;
|
||||
if(hot)html+=`<div class="rank-meta">🔥 ${typeof hot==='number'?hot.toLocaleString():hot}</div>`;
|
||||
html+='</div></div></div>';
|
||||
});
|
||||
el.innerHTML=html;
|
||||
}catch(e){el.innerHTML=`<div class="err">加载失败:${e.message}</div>`}
|
||||
}
|
||||
loadData();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
64
InfoGenie-frontend/public/60sapi/周期资讯/农历信息.html
Normal file
64
InfoGenie-frontend/public/60sapi/周期资讯/农历信息.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>农历信息</title>
|
||||
<style>
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{font-family:'KaiTi','楷体',serif;background:#f9fafb;color:#1f2937;line-height:1.6;min-height:100vh}
|
||||
.header{background:linear-gradient(135deg,#065f46,#059669);color:#fff;padding:16px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10}
|
||||
.header h1{flex:1;font-size:16px;font-weight:700}.btn{width:36px;height:36px;border:none;border-radius:10px;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px}.btn:hover{background:rgba(255,255,255,.25)}
|
||||
.body{max-width:720px;margin:0 auto;padding:20px 16px 40px}
|
||||
.hero{background:linear-gradient(135deg,#312e81,#4c1d95);border-radius:20px;padding:28px 24px;margin-bottom:16px;color:#fff;text-align:center}
|
||||
.big{font-size:26px;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.2);margin-bottom:4px}
|
||||
.sub{font-size:14px;opacity:.85;margin-bottom:12px}
|
||||
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
|
||||
.chip{background:rgba(255,255,255,.15);padding:4px 12px;border-radius:8px;font-size:12px}
|
||||
.section{background:#fff;border-radius:14px;padding:16px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
|
||||
.section-title{font-size:13px;font-weight:700;color:#6b7280;margin-bottom:10px;display:flex;align-items:center;gap:6px}
|
||||
.row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f9fafb}.row:last-child{border-bottom:none}
|
||||
.rk{font-size:13px;color:#9ca3af}.rv{font-size:13px;color:#1f2937;font-weight:500}
|
||||
.loader{display:flex;flex-direction:column;align-items:center;padding:60px 0;color:#9ca3af;gap:10px;font-size:13px}
|
||||
.spinner{width:24px;height:24px;border:3px solid #e5e7eb;border-top-color:#059669;border-radius:50%;animation:spin 1s linear infinite}
|
||||
@keyframes spin{to{transform:rotate(360deg)}}
|
||||
.err{text-align:center;padding:40px 16px;color:#ef4444;font-size:14px}
|
||||
</style>
|
||||
<script src="/60sapi/ig-embed.js"></script>
|
||||
<script src="/60sapi/sixty-runtime.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<button class="btn" onclick="history.back()">←</button>
|
||||
<h1>🌙 农历信息</h1>
|
||||
<button class="btn" onclick="loadData()">↻</button>
|
||||
</div>
|
||||
<div class="body" id="content">
|
||||
<div class="loader"><div class="spinner"></div><span>加载中...</span></div>
|
||||
</div>
|
||||
<script>
|
||||
async function loadData(){
|
||||
const el=document.getElementById('content');
|
||||
el.innerHTML='<div class="loader"><div class="spinner"></div><span>加载中...</span></div>';
|
||||
try{
|
||||
const res=await fetch(window.__SIXTY_API_BASE__+'/v2/lunar?encoding=json',{headers:{Accept:'application/json'}});
|
||||
const json=await res.json();
|
||||
const d=json.data||json;
|
||||
if(!d?.solar){el.innerHTML='<div class="err">暂无农历数据</div>';return}
|
||||
const s=d.solar||{},l=d.lunar||{},z=d.zodiac||{},sc=d.sixty_cycle||{},st=d.stats||{},tb=d.taboo?.day||{};
|
||||
let chips='';
|
||||
if(d.constellation?.name)chips+=`<span class="chip">⭐ ${d.constellation.name}</span>`;
|
||||
if(z.year)chips+=`<span class="chip">🐾 ${z.year}年</span>`;
|
||||
if(d.phase?.name)chips+=`<span class="chip">🌙 ${d.phase.name}</span>`;
|
||||
if(d.term?.stage?.name)chips+=`<span class="chip">🌿 ${d.term.stage.name}</span>`;
|
||||
let html=`<div class="hero"><div class="big">${s.full||''} ${s.week_desc||''}</div><div class="sub">${l.year_desc||''} ${l.month_desc||''}${l.day_desc||''}</div><div class="chips">${chips}</div></div>`;
|
||||
html+=`<div class="section"><div class="section-title">📅 日期信息</div><div class="row"><span class="rk">阳历</span><span class="rv">${s.full_with_time||s.full}</span></div><div class="row"><span class="rk">农历</span><span class="rv">${l.desc_short||l.month_desc+l.day_desc}</span></div><div class="row"><span class="rk">季节</span><span class="rv">${s.season_desc||''} (${s.season_name||''})</span></div>${s.is_leap_year!==undefined?`<div class="row"><span class="rk">闰年</span><span class="rv">${s.is_leap_year?'是':'否'}</span></div>`:''}</div>`;
|
||||
if(sc.day)html+=`<div class="section"><div class="section-title">🔮 天干地支</div><div class="row"><span class="rk">年柱</span><span class="rv">${sc.year?.name||''}</span></div><div class="row"><span class="rk">月柱</span><span class="rv">${sc.month?.name||''}</span></div><div class="row"><span class="rk">日柱</span><span class="rv">${sc.day?.name||''}</span></div><div class="row"><span class="rk">时柱</span><span class="rv">${sc.hour?.name||''}</span></div></div>`;
|
||||
if(st.percents_formatted)html+=`<div class="section"><div class="section-title">📊 时间进度</div><div class="row"><span class="rk">今年进度</span><span class="rv">${st.percents_formatted.year}</span></div><div class="row"><span class="rk">本月进度</span><span class="rv">${st.percents_formatted.month}</span></div><div class="row"><span class="rk">今天进度</span><span class="rv">${st.percents_formatted.day}</span></div><div class="row"><span class="rk">第几天</span><span class="rv">第 ${st.day_of_year} 天 / 第 ${st.week_of_year} 周</span></div></div>`;
|
||||
if(tb.recommends||tb.avoids)html+=`<div class="section"><div class="section-title">📜 宜忌</div>${tb.recommends?`<div class="row"><span class="rk">宜</span><span class="rv" style="color:#16a34a">${tb.recommends.replace(/\./g,' · ')}</span></div>`:''}${tb.avoids?`<div class="row"><span class="rk">忌</span><span class="rv" style="color:#dc2626">${tb.avoids.replace(/\./g,' · ')}</span></div>`:''}</div>`;
|
||||
el.innerHTML=html;
|
||||
}catch(e){el.innerHTML=`<div class="err">加载失败:${e.message}</div>`}
|
||||
}
|
||||
loadData();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
64
InfoGenie-frontend/public/60sapi/周期资讯/历史上的今天.html
Normal file
64
InfoGenie-frontend/public/60sapi/周期资讯/历史上的今天.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>历史上的今天</title>
|
||||
<style>
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{font-family:'KaiTi','楷体',serif;background:#f9fafb;color:#1f2937;line-height:1.6;min-height:100vh}
|
||||
.header{background:linear-gradient(135deg,#065f46,#059669);color:#fff;padding:16px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10}
|
||||
.header h1{flex:1;font-size:16px;font-weight:700}.btn{width:36px;height:36px;border:none;border-radius:10px;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px}.btn:hover{background:rgba(255,255,255,.25)}
|
||||
.body{max-width:720px;margin:0 auto;padding:20px 16px 40px}
|
||||
.hero{background:linear-gradient(135deg,#92400e,#b45309);border-radius:16px;padding:20px;margin-bottom:16px;color:#fff;text-align:center}
|
||||
.hero h2{font-size:22px;margin-bottom:4px}.hero p{font-size:13px;opacity:.8}
|
||||
.card{background:#fff;border-radius:14px;padding:16px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.04);border-left:3px solid #f59e0b}
|
||||
.card.birth{border-left-color:#3b82f6}.card.death{border-left-color:#ef4444}
|
||||
.year{display:inline-block;padding:2px 8px;border-radius:6px;font-size:12px;font-weight:700;margin-bottom:6px;background:#fef3c7;color:#92400e}
|
||||
.card.birth .year{background:#dbeafe;color:#1e40af}.card.death .year{background:#fecaca;color:#991b1b}
|
||||
.card-title{font-size:15px;font-weight:600;margin-bottom:6px;line-height:1.5}
|
||||
.card-desc{font-size:13px;color:#6b7280;line-height:1.7}
|
||||
.card-link{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#059669;margin-top:8px;text-decoration:none}
|
||||
.card-link:hover{text-decoration:underline}
|
||||
.loader{display:flex;flex-direction:column;align-items:center;padding:60px 0;color:#9ca3af;gap:10px;font-size:13px}
|
||||
.spinner{width:24px;height:24px;border:3px solid #e5e7eb;border-top-color:#059669;border-radius:50%;animation:spin 1s linear infinite}
|
||||
@keyframes spin{to{transform:rotate(360deg)}}
|
||||
.err{text-align:center;padding:40px 16px;color:#ef4444;font-size:14px}
|
||||
</style>
|
||||
<script src="/60sapi/ig-embed.js"></script>
|
||||
<script src="/60sapi/sixty-runtime.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<button class="btn" onclick="history.back()">←</button>
|
||||
<h1>📅 历史上的今天</h1>
|
||||
<button class="btn" onclick="loadData()">↻</button>
|
||||
</div>
|
||||
<div class="body" id="content">
|
||||
<div class="loader"><div class="spinner"></div><span>加载中...</span></div>
|
||||
</div>
|
||||
<script>
|
||||
async function loadData(){
|
||||
const el=document.getElementById('content');
|
||||
el.innerHTML='<div class="loader"><div class="spinner"></div><span>加载中...</span></div>';
|
||||
try{
|
||||
const res=await fetch(window.__SIXTY_API_BASE__+'/v2/today-in-history?encoding=json',{headers:{Accept:'application/json'}});
|
||||
const json=await res.json();
|
||||
const d=json.data||json;
|
||||
const items=d?.items||(Array.isArray(d)?d:[]);
|
||||
if(!items.length)throw new Error('暂无历史数据');
|
||||
let html=`<div class="hero"><h2>📅 历史上的今天</h2><p>${d?.month||''}月${d?.day||''}日 · 共 ${items.length} 条</p></div>`;
|
||||
items.forEach(item=>{
|
||||
const t=item.event_type||'event';
|
||||
const label=t==='birth'?'出生':t==='death'?'逝世':'事件';
|
||||
html+=`<div class="card ${t}"><div class="year">${item.year||''}年 · ${label}</div><div class="card-title">${item.title||''}</div>`;
|
||||
if(item.description){const desc=item.description.length>200?item.description.slice(0,200)+'…':item.description;html+=`<div class="card-desc">${desc}</div>`}
|
||||
if(item.link)html+=`<a class="card-link" href="${item.link}" target="_blank" rel="noopener">↗ 查看详情</a>`;
|
||||
html+='</div>';
|
||||
});
|
||||
el.innerHTML=html;
|
||||
}catch(e){el.innerHTML=`<div class="err">加载失败:${e.message}</div>`}
|
||||
}
|
||||
loadData();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
71
InfoGenie-frontend/public/60sapi/周期资讯/当日货币汇率.html
Normal file
71
InfoGenie-frontend/public/60sapi/周期资讯/当日货币汇率.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>当日货币汇率</title>
|
||||
<style>
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{font-family:'KaiTi','楷体',serif;background:#f9fafb;color:#1f2937;line-height:1.6;min-height:100vh}
|
||||
.header{background:linear-gradient(135deg,#065f46,#059669);color:#fff;padding:16px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10}
|
||||
.header h1{flex:1;font-size:16px;font-weight:700}.btn{width:36px;height:36px;border:none;border-radius:10px;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px}.btn:hover{background:rgba(255,255,255,.25)}
|
||||
.body{max-width:720px;margin:0 auto;padding:20px 16px 40px}
|
||||
.hero{background:linear-gradient(135deg,#065f46,#059669);border-radius:16px;padding:20px;margin-bottom:16px;color:#fff;text-align:center}
|
||||
.hero h2{font-size:22px;margin-bottom:4px}.hero p{font-size:12px;opacity:.8}
|
||||
.search{width:100%;padding:12px 16px;border:2px solid #e5e7eb;border-radius:12px;font-size:14px;font-family:inherit;margin-bottom:12px;transition:border-color .2s}
|
||||
.search:focus{border-color:#4ade80;outline:none}
|
||||
.table{border-radius:12px;overflow:hidden;border:1px solid #e5e7eb}
|
||||
.row{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid #f3f4f6}
|
||||
.row:last-child{border-bottom:none}.row:nth-child(even){background:#f9fafb}.row:hover{background:#f0fdf4}
|
||||
.currency{flex:1;font-size:14px;font-weight:600}.rate{font-size:14px;color:#059669;font-weight:500;font-variant-numeric:tabular-nums}
|
||||
.loader{display:flex;flex-direction:column;align-items:center;padding:60px 0;color:#9ca3af;gap:10px;font-size:13px}
|
||||
.spinner{width:24px;height:24px;border:3px solid #e5e7eb;border-top-color:#059669;border-radius:50%;animation:spin 1s linear infinite}
|
||||
@keyframes spin{to{transform:rotate(360deg)}}
|
||||
.err{text-align:center;padding:40px 16px;color:#ef4444;font-size:14px}
|
||||
.hint{text-align:center;margin-top:12px;color:#9ca3af;font-size:12px}
|
||||
</style>
|
||||
<script src="/60sapi/ig-embed.js"></script>
|
||||
<script src="/60sapi/sixty-runtime.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<button class="btn" onclick="history.back()">←</button>
|
||||
<h1>💱 当日货币汇率</h1>
|
||||
<button class="btn" onclick="loadData()">↻</button>
|
||||
</div>
|
||||
<div class="body" id="content">
|
||||
<div class="loader"><div class="spinner"></div><span>加载中...</span></div>
|
||||
</div>
|
||||
<script>
|
||||
let allRates=[];let baseCode='CNY';
|
||||
const common=['USD','EUR','GBP','JPY','KRW','HKD','TWD','SGD','AUD','CAD','CHF','RUB','THB','MYR','INR','VND'];
|
||||
function renderTable(keyword){
|
||||
let list=keyword?allRates.filter(r=>r.currency.toLowerCase().includes(keyword.toLowerCase())):
|
||||
[...allRates.filter(r=>common.includes(r.currency)),...allRates.filter(r=>!common.includes(r.currency))];
|
||||
let html='<div class="table">';
|
||||
list.slice(0,80).forEach((r,i)=>{
|
||||
html+=`<div class="row"><div class="currency">${r.currency}</div><div class="rate">1 ${baseCode} = ${Number(r.rate).toFixed(4)} ${r.currency}</div></div>`;
|
||||
});
|
||||
html+='</div>';
|
||||
if(list.length>80)html+=`<div class="hint">共 ${list.length} 种货币,搜索查看更多</div>`;
|
||||
return html;
|
||||
}
|
||||
async function loadData(){
|
||||
const el=document.getElementById('content');
|
||||
el.innerHTML='<div class="loader"><div class="spinner"></div><span>加载中...</span></div>';
|
||||
try{
|
||||
const res=await fetch(window.__SIXTY_API_BASE__+'/v2/exchange-rate?encoding=json',{headers:{Accept:'application/json'}});
|
||||
const json=await res.json();
|
||||
const d=json.data||json;
|
||||
if(!d||!d.rates)throw new Error('暂无汇率数据');
|
||||
allRates=d.rates;baseCode=d.base_code||'CNY';
|
||||
let html=`<div class="hero"><h2>💱 ${baseCode} 汇率</h2><p>更新时间:${d.updated||'未知'}</p></div>`;
|
||||
html+=`<input class="search" placeholder="搜索货币代码,如 USD、EUR..." oninput="filterRates(this.value)">`;
|
||||
html+=`<div id="table-wrap">${renderTable('')}</div>`;
|
||||
el.innerHTML=html;
|
||||
}catch(e){el.innerHTML=`<div class="err">加载失败:${e.message}</div>`}
|
||||
}
|
||||
function filterRates(v){document.getElementById('table-wrap').innerHTML=renderTable(v)}
|
||||
loadData();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
52
InfoGenie-frontend/public/60sapi/周期资讯/必应每日壁纸.html
Normal file
52
InfoGenie-frontend/public/60sapi/周期资讯/必应每日壁纸.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>必应每日壁纸</title>
|
||||
<style>
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{font-family:'KaiTi','楷体',serif;background:#f9fafb;color:#1f2937;line-height:1.6;min-height:100vh}
|
||||
.header{background:linear-gradient(135deg,#065f46,#059669);color:#fff;padding:16px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10}
|
||||
.header h1{flex:1;font-size:16px;font-weight:700}.btn{width:36px;height:36px;border:none;border-radius:10px;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px}.btn:hover{background:rgba(255,255,255,.25)}
|
||||
.body{max-width:720px;margin:0 auto;padding:20px 16px 40px;text-align:center}
|
||||
.img-wrap{border-radius:16px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.1)}
|
||||
.img-wrap img{width:100%;display:block}
|
||||
.title{margin-top:16px;font-size:16px;font-weight:600;color:#374151}
|
||||
.desc{margin-top:6px;font-size:13px;color:#6b7280}
|
||||
.loader{display:flex;flex-direction:column;align-items:center;padding:60px 0;color:#9ca3af;gap:10px;font-size:13px}
|
||||
.spinner{width:24px;height:24px;border:3px solid #e5e7eb;border-top-color:#059669;border-radius:50%;animation:spin 1s linear infinite}
|
||||
@keyframes spin{to{transform:rotate(360deg)}}
|
||||
.err{text-align:center;padding:40px 16px;color:#ef4444;font-size:14px}
|
||||
</style>
|
||||
<script src="/60sapi/ig-embed.js"></script>
|
||||
<script src="/60sapi/sixty-runtime.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<button class="btn" onclick="history.back()">←</button>
|
||||
<h1>🖼️ 必应每日壁纸</h1>
|
||||
<button class="btn" onclick="loadData()">↻</button>
|
||||
</div>
|
||||
<div class="body" id="content">
|
||||
<div class="loader"><div class="spinner"></div><span>加载中...</span></div>
|
||||
</div>
|
||||
<script>
|
||||
const BASE=window.__SIXTY_API_BASE__;
|
||||
async function loadData(){
|
||||
const el=document.getElementById('content');
|
||||
el.innerHTML='<div class="loader"><div class="spinner"></div><span>加载中...</span></div>';
|
||||
try{
|
||||
const res=await fetch(BASE+'/v2/bing?encoding=json',{headers:{Accept:'application/json'}});
|
||||
const json=await res.json();
|
||||
const d=json.data||json;
|
||||
let url=typeof d==='string'&&d.startsWith('http')?d:d?.url||d?.image||d?.cover||`${BASE}/v2/bing?encoding=image-proxy`;
|
||||
let html=`<div class="img-wrap"><img src="${url}" alt="必应壁纸" loading="lazy"></div>`;
|
||||
if(d?.title)html+=`<div class="title">${d.title}</div>`;
|
||||
if(d?.copyright||d?.desc)html+=`<div class="desc">${d.copyright||d.desc}</div>`;
|
||||
el.innerHTML=html;
|
||||
}catch(e){el.innerHTML=`<div class="err">加载失败:${e.message}</div>`}
|
||||
}
|
||||
loadData();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
81
InfoGenie-frontend/public/60sapi/周期资讯/摸鱼日历.html
Normal file
81
InfoGenie-frontend/public/60sapi/周期资讯/摸鱼日历.html
Normal file
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>摸鱼日历</title>
|
||||
<style>
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{font-family:'KaiTi','楷体',serif;background:#f9fafb;color:#1f2937;line-height:1.6;min-height:100vh}
|
||||
.header{background:linear-gradient(135deg,#065f46,#059669);color:#fff;padding:16px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10}
|
||||
.header h1{flex:1;font-size:16px;font-weight:700}.btn{width:36px;height:36px;border:none;border-radius:10px;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px}.btn:hover{background:rgba(255,255,255,.25)}
|
||||
.body{max-width:720px;margin:0 auto;padding:20px 16px 40px}
|
||||
.hero{background:linear-gradient(135deg,#0e7490,#06b6d4);border-radius:20px;padding:28px 24px;margin-bottom:16px;color:#fff;text-align:center}
|
||||
.emoji{font-size:48px;margin-bottom:8px}
|
||||
.title{font-size:20px;font-weight:700;margin-bottom:4px}
|
||||
.sub{font-size:13px;opacity:.85}
|
||||
.quote{background:rgba(255,255,255,.12);border-radius:12px;padding:14px 16px;margin-top:16px;font-size:14px;font-style:italic;line-height:1.7}
|
||||
.section{background:#fff;border-radius:14px;padding:16px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
|
||||
.section-title{font-size:13px;font-weight:700;color:#6b7280;margin-bottom:10px;display:flex;align-items:center;gap:6px}
|
||||
.progress-label{display:flex;justify-content:space-between;font-size:12px;color:#9ca3af;margin-bottom:4px;margin-top:10px}
|
||||
.progress-bar{height:8px;background:#f3f4f6;border-radius:4px;overflow:hidden;margin-bottom:4px}
|
||||
.progress-fill{height:100%;border-radius:4px;transition:width .6s ease}
|
||||
.cd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
|
||||
.cd-item{border-radius:12px;padding:14px;text-align:center}
|
||||
.cd-num{font-size:28px;font-weight:800;margin-bottom:2px}
|
||||
.cd-label{font-size:12px;color:#6b7280}
|
||||
.row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #f9fafb}.row:last-child{border-bottom:none}
|
||||
.rk{font-size:13px;color:#9ca3af}.rv{font-size:13px;color:#1f2937;font-weight:500}
|
||||
.loader{display:flex;flex-direction:column;align-items:center;padding:60px 0;color:#9ca3af;gap:10px;font-size:13px}
|
||||
.spinner{width:24px;height:24px;border:3px solid #e5e7eb;border-top-color:#059669;border-radius:50%;animation:spin 1s linear infinite}
|
||||
@keyframes spin{to{transform:rotate(360deg)}}
|
||||
.err{text-align:center;padding:40px 16px;color:#ef4444;font-size:14px}
|
||||
@media(max-width:480px){.cd-grid{grid-template-columns:1fr}}
|
||||
</style>
|
||||
<script src="/60sapi/ig-embed.js"></script>
|
||||
<script src="/60sapi/sixty-runtime.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<button class="btn" onclick="history.back()">←</button>
|
||||
<h1>🐟 摸鱼日历</h1>
|
||||
<button class="btn" onclick="loadData()">↻</button>
|
||||
</div>
|
||||
<div class="body" id="content">
|
||||
<div class="loader"><div class="spinner"></div><span>加载中...</span></div>
|
||||
</div>
|
||||
<script>
|
||||
async function loadData(){
|
||||
const el=document.getElementById('content');
|
||||
el.innerHTML='<div class="loader"><div class="spinner"></div><span>加载中...</span></div>';
|
||||
try{
|
||||
const res=await fetch(window.__SIXTY_API_BASE__+'/v2/moyu?encoding=json',{headers:{Accept:'application/json'}});
|
||||
const json=await res.json();
|
||||
const d=json.data||json;
|
||||
if(!d){el.innerHTML='<div class="err">暂无数据</div>';return}
|
||||
const dt=d.date||{},p=d.progress||{},cd=d.countdown||{},nh=d.nextHoliday||{},nw=d.nextWeekend||{};
|
||||
let html=`<div class="hero"><div class="emoji">🐟</div><div class="title">摸鱼日历</div><div class="sub">${dt.gregorian||''} ${dt.weekday||''} · 农历${dt.lunar?.monthCN||''}${dt.lunar?.dayCN||''} · ${dt.lunar?.zodiac||''}年</div>${d.moyuQuote?`<div class="quote">"${d.moyuQuote}"</div>`:''}</div>`;
|
||||
html+='<div class="section"><div class="section-title">⏳ 时间进度</div>';
|
||||
if(p.week)html+=`<div class="progress-label"><span>本周进度</span><span>${p.week.percentage}%(${p.week.passed}/${p.week.total}天)</span></div><div class="progress-bar"><div class="progress-fill" style="width:${p.week.percentage}%;background:linear-gradient(90deg,#4ade80,#22c55e)"></div></div>`;
|
||||
if(p.month)html+=`<div class="progress-label"><span>本月进度</span><span>${p.month.percentage}%(还剩${p.month.remaining}天)</span></div><div class="progress-bar"><div class="progress-fill" style="width:${p.month.percentage}%;background:linear-gradient(90deg,#60a5fa,#3b82f6)"></div></div>`;
|
||||
if(p.year)html+=`<div class="progress-label"><span>本年进度</span><span>${p.year.percentage}%(还剩${p.year.remaining}天)</span></div><div class="progress-bar"><div class="progress-fill" style="width:${p.year.percentage}%;background:linear-gradient(90deg,#f472b6,#ec4899)"></div></div>`;
|
||||
html+='</div>';
|
||||
html+='<div class="section"><div class="section-title">🎯 倒计时</div><div class="cd-grid">';
|
||||
html+=`<div class="cd-item" style="background:#f0fdf4"><div class="cd-num" style="color:#16a34a">${cd.toFriday??'-'}</div><div class="cd-label">距周五</div></div>`;
|
||||
html+=`<div class="cd-item" style="background:#eff6ff"><div class="cd-num" style="color:#2563eb">${cd.toWeekEnd??'-'}</div><div class="cd-label">距周末</div></div>`;
|
||||
if(nh.name)html+=`<div class="cd-item" style="background:#fef3c7"><div class="cd-num" style="color:#d97706">${nh.until??'-'}</div><div class="cd-label">距${nh.name}(${nh.duration}天假)</div></div>`;
|
||||
html+=`<div class="cd-item" style="background:#fce7f3"><div class="cd-num" style="color:#db2777">${cd.toYearEnd??'-'}</div><div class="cd-label">距年末</div></div>`;
|
||||
html+='</div></div>';
|
||||
if(d.today){
|
||||
html+='<div class="section"><div class="section-title">📋 今日状态</div>';
|
||||
html+=`<div class="row"><span class="rk">今天是</span><span class="rv">${d.today.isWeekend?'🎉 周末':'💼 工作日'}${d.today.isHoliday&&d.today.holidayName?` · ${d.today.holidayName}`:''}</span></div>`;
|
||||
if(nw.date)html+=`<div class="row"><span class="rk">下个周末</span><span class="rv">${nw.date} ${nw.weekday}(${nw.daysUntil}天后)</span></div>`;
|
||||
if(nh.name)html+=`<div class="row"><span class="rk">下个假期</span><span class="rv">${nh.name} · ${nh.date}</span></div>`;
|
||||
html+='</div>';
|
||||
}
|
||||
el.innerHTML=html;
|
||||
}catch(e){el.innerHTML=`<div class="err">加载失败:${e.message}</div>`}
|
||||
}
|
||||
loadData();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
64
InfoGenie-frontend/public/60sapi/周期资讯/每天60s读懂世界.html
Normal file
64
InfoGenie-frontend/public/60sapi/周期资讯/每天60s读懂世界.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>每天60s读懂世界</title>
|
||||
<style>
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{font-family:'KaiTi','楷体',serif;background:#f9fafb;color:#1f2937;line-height:1.6;min-height:100vh}
|
||||
.header{background:linear-gradient(135deg,#065f46,#059669);color:#fff;padding:16px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10}
|
||||
.header h1{flex:1;font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.btn{width:36px;height:36px;border:none;border-radius:10px;background:rgba(255,255,255,.15);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px}
|
||||
.btn:hover{background:rgba(255,255,255,.25)}
|
||||
.body{max-width:720px;margin:0 auto;padding:20px 16px 40px}
|
||||
.date{display:flex;align-items:center;gap:6px;font-size:13px;color:#6b7280;padding-bottom:12px;border-bottom:1px solid #e5e7eb;margin-bottom:16px}
|
||||
.item{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid #f3f4f6}
|
||||
.item:last-child{border-bottom:none}
|
||||
.num{flex-shrink:0;width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;margin-top:1px;color:#9ca3af;background:#f3f4f6}
|
||||
.num.t1{color:#fff;background:#ef4444}.num.t2{color:#fff;background:#f97316}.num.t3{color:#fff;background:#eab308}
|
||||
.text{flex:1;font-size:14px;line-height:1.7}
|
||||
.tip{margin-top:20px;padding:14px 16px;border-radius:12px;font-size:13px;line-height:1.6;color:#6b7280;background:#f0fdf4;border:1px solid rgba(34,197,94,.1);font-style:italic}
|
||||
.cover{margin-top:16px;text-align:center}.cover img{max-width:100%;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
|
||||
.loader{display:flex;flex-direction:column;align-items:center;padding:60px 0;color:#9ca3af;gap:10px;font-size:13px}
|
||||
.spinner{width:24px;height:24px;border:3px solid #e5e7eb;border-top-color:#059669;border-radius:50%;animation:spin 1s linear infinite}
|
||||
@keyframes spin{to{transform:rotate(360deg)}}
|
||||
.err{text-align:center;padding:40px 16px;color:#ef4444;font-size:14px}
|
||||
@media(max-width:640px){.body{padding:16px 12px 32px}.text{font-size:13px}.header h1{font-size:14px}}
|
||||
</style>
|
||||
<script src="/60sapi/ig-embed.js"></script>
|
||||
<script src="/60sapi/sixty-runtime.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<button class="btn" onclick="history.back()">←</button>
|
||||
<h1>🌍 每天60s读懂世界</h1>
|
||||
<button class="btn" onclick="loadData()">↻</button>
|
||||
</div>
|
||||
<div class="body" id="content">
|
||||
<div class="loader"><div class="spinner"></div><span>加载中...</span></div>
|
||||
</div>
|
||||
<script>
|
||||
const API=window.__SIXTY_API_BASE__+'/v2/60s?encoding=json';
|
||||
async function loadData(){
|
||||
const el=document.getElementById('content');
|
||||
el.innerHTML='<div class="loader"><div class="spinner"></div><span>加载中...</span></div>';
|
||||
try{
|
||||
const res=await fetch(API,{headers:{Accept:'application/json'}});
|
||||
const json=await res.json();
|
||||
const d=json.data||json;
|
||||
let html='';
|
||||
if(d.date)html+=`<div class="date">🕐 ${d.date} ${d.day_of_week||''}</div>`;
|
||||
const news=d.news||[];
|
||||
news.forEach((t,i)=>{
|
||||
const cls=i===0?'t1':i===1?'t2':i===2?'t3':'';
|
||||
html+=`<div class="item"><div class="num ${cls}">${i+1}</div><div class="text">${t}</div></div>`;
|
||||
});
|
||||
if(d.tip)html+=`<div class="tip">💡 ${d.tip}</div>`;
|
||||
if(d.image)html+=`<div class="cover"><img src="${d.image}" alt="封面" loading="lazy"></div>`;
|
||||
el.innerHTML=html||'<div class="err">暂无数据</div>';
|
||||
}catch(e){el.innerHTML=`<div class="err">加载失败:${e.message}</div>`}
|
||||
}
|
||||
loadData();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user