rain/shencaisuan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改样式，未完成

Browse Source
This commit is contained in:
rain
2026-07-06 16:52:32 +08:00
parent d705b4fa79
commit 4678633541
5 changed files with 411 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/index.html
+138 -85
View File
@@ -1,4 +1,4 @@
<!doctype html> <!doctype html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@@ -15,6 +15,12 @@
<script src="../public/js/qrcode.js"></script> <script src="../public/js/qrcode.js"></script>
</head> </head>
<body> <body>
<div class="indexTopAppsinBigBox">
<div class="indexTopAppsinBox">
<img src="../images/xz.png" class="indexTopAppImg">
<div class="indexTopAppText">APP下载</div>
</div>
</div>
<nav class="topbar" id="navbar"> <nav class="topbar" id="navbar">
<div class="topbar__inner"> <div class="topbar__inner">
<a href="./" class="topbar__brand"> <a href="./" class="topbar__brand">
@@ -58,10 +64,30 @@
<main class="page-shell"> <main class="page-shell">
<section class="hero"> <section class="hero">
<div class="hero__inner"> <div class="hero__inner">
<aside class="hero__side hero__side--left">
<div class="sidebar-card">
<div class="sidebar-card__head sidebar-card__head--navy">
<span>平台公告</span>
<a href="gonggaolist.html" class="sidebar-card__more">更多</a>
</div>
<ul class="notice-list" id="noticeList"></ul>
</div>
<div class="sidebar-card sidebar-card-bom">
<div class="sidebar-card__head sidebar-card__head--gold">
<span>APP下载</span>
</div>
<div class="qrcode-box">
<img id="downloadQrImg" alt="二维码" />
<p>打开手机下载二维码</p>
</div>
</div>
</aside>
<div class="hero__main"> <div class="hero__main">
<!-- <div class="panel-head panel-head--hero"> <!-- <div class="panel-head panel-head--hero">
<div> <div>
<h1>神彩算 PC 预测首页</h1> <h1>福彩购彩平台 - 精彩开奖首页</h1>
</div> </div>
<button <button
class="hero__history-btn" class="hero__history-btn"
@@ -79,17 +105,31 @@
</div> </div>
</div> </div>
<aside class="hero__side"> <aside class="hero__side hero__side--right">
<div class="hero-card hero-card--focus"> <div class="sidebar-card">
<div class="hero-card__title"> <div class="sidebar-card__head sidebar-card__head--teal">
<img src="../images/home-icon-calendar.png" alt="" /> <span>走势图工具</span>
<span>开奖焦点</span> </div>
<div class="trend-grid" id="trendGrid"></div>
</div>
<div class="sidebar-card combo-tool-card sidebar-card-bom">
<div class="sidebar-card__head sidebar-card__head--gold">
<span>组合工具</span>
</div>
<div class="combo-tool-grid">
<a href="duanzuhe.html" class="combo-tool-item">
<img src="../images/icon-duanzuhe.png" alt="断组" />
<span>断组</span>
</a>
<a href="shazuhe.html" class="combo-tool-item">
<img src="../images/icon-shazuhe.png" alt="杀组合" />
<span>杀组合</span>
</a>
</div> </div>
<div class="hero-focus-list" id="heroFocusList"></div>
</div> </div>
</aside> </aside>
</div> </div>
</section>
<div class="section-divider section-divider--blue"> <div class="section-divider section-divider--blue">
<span>彩票分类导航</span> <span>彩票分类导航</span>
@@ -121,48 +161,6 @@
<section class="content"> <section class="content">
<div class="content__inner"> <div class="content__inner">
<aside class="content__rail">
<div class="sidebar-card">
<div class="sidebar-card__head sidebar-card__head--navy">
<span>平台公告</span>
<a href="gonggaolist.html" class="sidebar-card__more">更多</a>
</div>
<ul class="notice-list" id="noticeList"></ul>
</div>
<div class="sidebar-card">
<div class="sidebar-card__head sidebar-card__head--gold">
<span>APP下载</span>
</div>
<div class="qrcode-box">
<img id="downloadQrImg" alt="二维码" />
<p>打开手机浏览器扫描二维码</p>
</div>
</div>
<div class="sidebar-card">
<div class="sidebar-card__head sidebar-card__head--teal">
<span>走势图</span>
</div>
<div class="trend-grid" id="trendGrid"></div>
</div>
<div class="sidebar-card combo-tool-card">
<div class="sidebar-card__head sidebar-card__head--gold">
<span>组合工具</span>
</div>
<div class="combo-tool-grid">
<a href="duanzuhe.html" class="combo-tool-item">
<img src="../images/icon-duanzuhe.png" alt="断组合" />
<span>断组合</span>
</a>
<a href="shazuhe.html" class="combo-tool-item">
<img src="../images/icon-shazuhe.png" alt="杀组合" />
<span>杀组合</span>
</a>
</div>
</div>
</aside>
<section class="content__main"> <section class="content__main">
<div class="article-matrix" id="articleGroups"></div> <div class="article-matrix" id="articleGroups"></div>
@@ -237,6 +235,13 @@
"七星彩", "七星彩",
]; ];
var currentLotteryMenu = []; var currentLotteryMenu = [];
var articleLargeLotteries = {
大乐透: true,
快乐8: true,
排列3: true,
排列三: true,
七星彩: true,
};
var lotteryAliasMap = { var lotteryAliasMap = {
排列3: "排列三", 排列3: "排列三",
排列三: "排列三", 排列三: "排列三",
@@ -316,6 +321,11 @@
function normalizeLotteryName(name) { function normalizeLotteryName(name) {
return lotteryAliasMap[name] || name || ""; return lotteryAliasMap[name] || name || "";
} }
function getFreeArticleLimit(lotteryName) {
return articleLargeLotteries[normalizeLotteryName(lotteryName)]
? 10
: 5;
}
function escapeHtml(text) { function escapeHtml(text) {
return String(text || "").replace(/[&<>"']/g, function (char) { return String(text || "").replace(/[&<>"']/g, function (char) {
return { return {
@@ -432,7 +442,10 @@
function renderHeroSummary(menuList, noticeList) { function renderHeroSummary(menuList, noticeList) {
var articleCount = 0; var articleCount = 0;
$.each(menuList, function (_, item) { $.each(menuList, function (_, item) {
articleCount += (item.freeArticleList || []).slice(0, 5).length; articleCount += (item.freeArticleList || []).slice(
0,
getFreeArticleLimit(item.name),
).length;
}); });
$("#heroLotteryCount").text(menuList.length); $("#heroLotteryCount").text(menuList.length);
$("#heroArticleCount").text(articleCount); $("#heroArticleCount").text(articleCount);
@@ -442,7 +455,7 @@
'<div class="hero-meta"><span>彩种排序</span><strong>8 组固定顺序</strong><em>双色球至七星彩</em></div>', '<div class="hero-meta"><span>彩种排序</span><strong>8 组固定顺序</strong><em>双色球至七星彩</em></div>',
'<div class="hero-meta"><span>免费文章</span><strong>' + '<div class="hero-meta"><span>免费文章</span><strong>' +
articleCount + articleCount +
" 篇</strong><em>每组展示 5 篇以内</em></div>", " 篇</strong><em>默认 5 篇，部分彩种 10 篇</em></div>",
'<div class="hero-meta"><span>数据来源</span><strong>/api/web/index</strong><em>首页主数据接口</em></div>', '<div class="hero-meta"><span>数据来源</span><strong>/api/web/index</strong><em>首页主数据接口</em></div>',
].join(""), ].join(""),
); );
@@ -520,6 +533,7 @@
$.each(sortLotteries(menuList), function (_, item) { $.each(sortLotteries(menuList), function (_, item) {
var cfg = lotteryIconMap[item.name] || lotteryIconMap["双色球"]; var cfg = lotteryIconMap[item.name] || lotteryIconMap["双色球"];
var result = item.lotteryResult || {}; var result = item.lotteryResult || {};
var drawTimeText = result.drawTimeText || item.drawTimeText || "";
var compact = item.name === "快乐8"; var compact = item.name === "快乐8";
$grid.append( $grid.append(
'<div class="draw-card" style="--accent:' + '<div class="draw-card" style="--accent:' +
@@ -538,13 +552,17 @@
(compact ? " draw-card__balls--compact" : "") + (compact ? " draw-card__balls--compact" : "") +
'">' + '">' +
buildBallHtml(result.openCode || "", cfg, compact) + buildBallHtml(result.openCode || "", cfg, compact) +
'</div><div class="draw-card__foot"><span>开奖日期</span><strong>' + '</div><div class="draw-card__foot"><div class="draw-card__foot_left">'
escapeHtml( + '<div class="draw-card__foot_left_left">开奖日期</div>' + '<div class="draw-card__foot_left_right">' +
escapeHtml(drawTimeText)
+ '</div>' +
'</div>'+
'<div class="draw-card__foot_right">'+ escapeHtml(
formatDateLabel( formatDateLabel(
result.time || result.createTime || result.date || "", result.time || result.createTime || result.date || "",
), ),
) + )+ '</div>'
"</strong></div></div>", +'</div>',
); );
}); });
} }
@@ -565,20 +583,62 @@
'<li class="notice-item notice-item--empty">暂无公告</li>', '<li class="notice-item notice-item--empty">暂无公告</li>',
); );
} }
function renderChannelSections(menuList) { function getAdGroups(adList) {
var validAds = CommonUtil.filterValidAds(adList || []);
var groups = [];
for (var i = 0; i < validAds.length; i += 8) {
groups.push(validAds.slice(i, i + 8));
}
return groups;
}
function renderAdStrip(adItems) {
var html = "";
$.each(adItems, function (_, ad) {
html +=
'<a href="' +
escapeHtml(ad.link || "#") +
'" target="_blank" rel="noopener noreferrer" class="ad-item"><img src="' +
escapeHtml(ad.touxiang || "") +
'" alt="' +
escapeHtml(ad.title || "广告") +
'" loading="lazy" /></a>';
});
return (
'<section class="article-ad-strip"><section class="ad-group"><div class="ad-group__grid">' +
html +
"</div></section></section>"
);
}
function renderChannelSections(menuList, adList) {
var $container = $("#articleGroups"); var $container = $("#articleGroups");
$container.empty(); $container.empty();
var adGroups = getAdGroups(adList);
var insertAfter = [2, 6, 8];
var adCursor = 0;
var cardCount = 0;
$.each(sortLotteries(menuList), function (index, lottery) { $.each(sortLotteries(menuList), function (index, lottery) {
var articles = (lottery.freeArticleList || []).slice(0, 5); var limit = getFreeArticleLimit(lottery.name);
var articles = (lottery.freeArticleList || []).slice(0, limit);
var cfg = lotteryIconMap[lottery.name] || lotteryIconMap["双色球"]; var cfg = lotteryIconMap[lottery.name] || lotteryIconMap["双色球"];
if (!articles.length) articles = [null];
for (var start = 0; start < articles.length; start += 5) {
var chunk = articles.slice(start, start + 5);
var listHtml = ""; var listHtml = "";
$.each(articles, function (_, article) { $.each(chunk, function (_, article) {
if (!article) return;
var rawDateText = article.dateText || "";
var itemDateText = rawDateText ? formatDateLabel(rawDateText) : "";
listHtml += listHtml +=
`<li class="article-item"><img src="${article.accountAvatar || article.expertAvatar}" alt="" class="article-item__icon" /><a class="article-item__link" href="` + '<li class="article-item"><a class="article-item__link" href="' +
CommonUtil.freeArticleHref(article.id || "") + CommonUtil.freeArticleHref(article.id || "") +
'" target="_blank">' + '" target="_blank"><img src="' +
escapeHtml(article.accountAvatar || article.expertAvatar) +
'" alt="" class="article-item__icon" /><span class="article-item__title">' +
escapeHtml(article.title || "文章标题") + escapeHtml(article.title || "文章标题") +
"</a></li>"; "</span>" +
(itemDateText ? '<span class="article-item__date">' + itemDateText + "</span>" : "") +
"</a>" +
"</li>";
}); });
if (!listHtml) if (!listHtml)
listHtml = listHtml =
@@ -592,12 +652,21 @@
escapeHtml(lottery.name) + escapeHtml(lottery.name) +
'" /><div><strong>' + '" /><div><strong>' +
escapeHtml(lottery.name) + escapeHtml(lottery.name) +
'</strong></div></div><a class="article-cluster__more" href="mianfeilist.html?id=' + "</strong></div></div><a class=\"article-cluster__more\" href=\"mianfeilist.html?id=" +
escapeHtml(lottery.id || "") + escapeHtml(lottery.id || "") +
'">更多文章</a></div><ul class="article-cluster__list">' + '">更多文章</a></div><ul class="article-cluster__list">' +
listHtml + listHtml +
"</ul></section>", "</ul></section>",
); );
cardCount++;
if (
adGroups[adCursor] &&
cardCount === insertAfter[adCursor]
) {
$container.append(renderAdStrip(adGroups[adCursor]));
adCursor++;
}
}
}); });
} }
function renderResourceLinks($container, list) { function renderResourceLinks($container, list) {
@@ -645,32 +714,16 @@
function renderAdGroups(adList) { function renderAdGroups(adList) {
var $container = $("#sidebarAdContainer"); var $container = $("#sidebarAdContainer");
$container.empty(); $container.empty();
var validAds = CommonUtil.filterValidAds(adList || []); var adGroups = getAdGroups(adList);
if (!validAds.length) { if (!adGroups.length) {
$container.html( $container.html(
'<div class="ad-group ad-group--empty">暂无广告数据</div>', '<div class="ad-group ad-group--empty">暂无广告数据</div>',
); );
return; return;
} }
for (var i = 0; i < validAds.length; i += 8) { $.each(adGroups, function (_, items) {
var html = ""; $container.append(renderAdStrip(items));
$.each(validAds.slice(i, i + 8), function (_, ad) {
html +=
'<a href="' +
escapeHtml(ad.link || "#") +
'" target="_blank" rel="noopener noreferrer" class="ad-item"><img src="' +
escapeHtml(ad.touxiang || "") +
'" alt="' +
escapeHtml(ad.title || "广告") +
'" loading="lazy" /></a>';
}); });
$container.append(
'<section class="ad-group">' +
'<div class="ad-group__grid">' +
html +
"</div></section>",
);
}
} }
function getDefaultHistoryRange() { function getDefaultHistoryRange() {
var end = new Date(); var end = new Date();
@@ -828,7 +881,7 @@
renderBannerImages(data.bannerList || []); renderBannerImages(data.bannerList || []);
renderDynamicNav(sortedMenu); renderDynamicNav(sortedMenu);
updateResultsGrid(sortedMenu); updateResultsGrid(sortedMenu);
renderChannelSections(sortedMenu); renderChannelSections(sortedMenu, data.adList || []);
renderHeroSummary(sortedMenu, data.noticeList || []); renderHeroSummary(sortedMenu, data.noticeList || []);
renderNoticeList(data.noticeList || []); renderNoticeList(data.noticeList || []);
renderAdGroups(data.adList || []); renderAdGroups(data.adList || []);
images/xz.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 634 B

public/css/index.css
+165 -45
View File
@@ -2,8 +2,39 @@
index.css - Homepage-specific styles index.css - Homepage-specific styles
============================================================ */ ============================================================ */
.indexTopAppsinBigBox {
display: flex;
width: 100%;
justify-content: center;
}
.indexTopAppsinBox {
height: 75px;
width: min(var(--max-width), 100%);
display: flex;
align-items: center;
justify-content: flex-end;
}
.indexTopAppImg {
width: 23px;
}
.indexTopAppText {
margin-left: 10px;
font-size: 16px;
}
.topbar {
/* margin-top: 75px; */
}
body {
--max-width: 1400px;
}
.page-shell { .page-shell {
padding-bottom: 56px; padding-bottom: 10px;
} }
.hero, .hero,
@@ -12,18 +43,19 @@
.content, .content,
.resource-section, .resource-section,
.site-footer { .site-footer {
width: min(var(--max-width), calc(100% - 48px)); width: min(var(--max-width), 100%);
margin: 0 auto; margin: 0 auto;
} }
.hero { .hero {
padding-top: 28px; padding-top: 10px;
} }
.hero__inner { .hero__inner {
display: grid; display: flex;
grid-template-columns: minmax(0, 1.45fr) 360px; align-items: stretch;
gap: 22px; gap: 10px;
margin-top: 4px;
} }
.hero__main, .hero__main,
@@ -52,6 +84,16 @@
animation: cxz-fade-up .58s ease both; animation: cxz-fade-up .58s ease both;
} }
.content__main {
flex: 1;
min-width: 0;
}
.content__ads {
display: none;
}
.hero-card { .hero-card {
animation-delay: .06s; animation-delay: .06s;
} }
@@ -75,6 +117,8 @@
} }
.hero__main { .hero__main {
flex: 1 1 52%;
min-width: 0;
padding: 20px; padding: 20px;
background: background:
radial-gradient(circle at top right, rgba(253, 185, 51, .14), transparent 22%), radial-gradient(circle at top right, rgba(253, 185, 51, .14), transparent 22%),
@@ -82,6 +126,11 @@
rgba(255, 255, 255, .96); rgba(255, 255, 255, .96);
} }
.hero__side--right {
flex: 0 0 360px;
max-width: 360px;
}
.panel-head, .panel-head,
.draw__header, .draw__header,
.content-head, .content-head,
@@ -145,9 +194,10 @@
.hero__carousel-wrap { .hero__carousel-wrap {
height: 420px; height: 420px;
border-radius: 22px;
overflow: hidden;
background: linear-gradient(135deg, #0f2b68, #12367c, #164d86); background: linear-gradient(135deg, #0f2b68, #12367c, #164d86);
min-height: 100%;
border-radius: 16px;
overflow: hidden;
} }
.hero__carousel-wrap .layui-carousel, .hero__carousel-wrap .layui-carousel,
@@ -237,10 +287,16 @@
font-size: 12px; font-size: 12px;
} }
.hero__side { .hero__side .sidebar-card {
/* display: grid; border-radius: 16px;
grid-template-rows: 1fr 1fr; overflow: hidden;
gap: 22px; */ box-shadow:
0 10px 26px rgba(9, 24, 64, 0.08),
0 2px 6px rgba(9, 24, 64, 0.04);
}
.sidebar-card-bom {
margin-top: 10px;
} }
.hero-card { .hero-card {
@@ -410,8 +466,8 @@
} }
.section-divider { .section-divider {
width: min(var(--max-width), calc(100% - 48px)); width: min(var(--max-width), 100%);
margin: 28px auto 18px; margin: 10px auto 10px;
padding: 16px 24px; padding: 16px 24px;
border-radius: 22px; border-radius: 22px;
color: var(--white); color: var(--white);
@@ -494,7 +550,7 @@
} }
.draw { .draw {
margin-top: 18px; margin-top: 10px;
padding: 24px; padding: 24px;
background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(245, 248, 255, .98)); background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(245, 248, 255, .98));
} }
@@ -571,8 +627,8 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 4px; gap: 4px;
margin: 18px 0 14px; margin: 8px 0 2px;
min-height: 74px; min-height: 68px;
align-content: flex-start; align-content: flex-start;
} }
@@ -589,20 +645,31 @@
border-top: 1px dashed rgba(16, 43, 106, .1); border-top: 1px dashed rgba(16, 43, 106, .1);
} }
.draw-card__foot_left {
display: flex;
align-items: center;
}
.draw-card__foot_left_left {
color: var(--text-soft);
font-size: 12px;
}
.draw-card__foot_left_right {
color: var(--navy);
font-size: 13px;
margin-left: 8px;
}
.draw-card__date { .draw-card__date {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
} }
.draw-card__foot span { .draw-card__foot_right {
color: var(--text-soft);
font-size: 12px;
}
.draw-card__foot strong {
color: var(--navy);
font-size: 13px; font-size: 13px;
margin-left: 8px;
} }
.draw-card__link--button { .draw-card__link--button {
@@ -626,18 +693,13 @@
} }
.content { .content {
margin-top: 24px; margin-top: 10px;
} }
.content__inner { .content__inner {
display: grid; display: flex;
grid-template-columns: 280px minmax(0, 1fr) 332px; align-items: flex-start;
gap: 22px; gap: 16px;
align-items: start;
}
.sidebar-card {
margin-bottom: 18px;
} }
.sidebar-card__head { .sidebar-card__head {
@@ -742,7 +804,7 @@
} }
.qrcode-box { .qrcode-box {
padding: 24px; padding: 8px;
text-align: center; text-align: center;
} }
@@ -788,10 +850,7 @@
color: var(--text); color: var(--text);
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
} white-space: nowrap;
.combo-tool-card {
margin-top: 34px;
} }
.combo-tool-grid { .combo-tool-grid {
@@ -842,7 +901,15 @@
.article-matrix { .article-matrix {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px; gap: 10px;
}
.article-ad-strip {
grid-column: 1 / -1;
}
.article-ad-strip .ad-group {
margin: 0;
} }
.article-cluster__head { .article-cluster__head {
@@ -888,6 +955,11 @@
} }
.article-item { .article-item {
margin: 0;
padding: 0;
}
.article-item__link {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
@@ -896,13 +968,14 @@
transition: transform .2s ease, background .2s ease, padding .2s ease; transition: transform .2s ease, background .2s ease, padding .2s ease;
} }
.article-item:hover { .article-item:hover .article-item__link {
padding-left: 6px; padding-left: 6px;
background: linear-gradient(90deg, rgba(16, 43, 106, .045), transparent); background: linear-gradient(90deg, rgba(16, 43, 106, .045), transparent);
transform: translateX(2px); transform: translateX(2px);
} }
.article-item:last-child { .article-item:last-child .article-item__link,
.article-item.article-item--empty {
border-bottom: none; border-bottom: none;
} }
@@ -913,7 +986,7 @@
flex: 0 0 auto; flex: 0 0 auto;
} }
.article-item__link { .article-item__title {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -922,6 +995,13 @@
font-size: 14px; font-size: 14px;
} }
.article-item__date {
color: var(--text-soft);
font-size: 12px;
flex: 0 0 auto;
white-space: nowrap;
}
.ad-group { .ad-group {
margin-bottom: 18px; margin-bottom: 18px;
} }
@@ -951,7 +1031,7 @@
} }
.ad-item img { .ad-item img {
width: 139px; width: 157.7px;
height: 94px; height: 94px;
object-fit: cover; object-fit: cover;
background: #fff; background: #fff;
@@ -965,7 +1045,7 @@
.resource-section__inner { .resource-section__inner {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px; gap: 10px;
} }
.resource-card { .resource-card {
@@ -992,7 +1072,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
min-width: calc(50% - 6px); min-width: calc(23% - 6px);
padding: 14px 16px; padding: 14px 16px;
border-radius: 18px; border-radius: 18px;
background: linear-gradient(180deg, rgba(16, 43, 106, .05), rgba(255, 255, 255, .96)); background: linear-gradient(180deg, rgba(16, 43, 106, .05), rgba(255, 255, 255, .96));
@@ -1009,6 +1089,7 @@
opacity: 0; opacity: 0;
transform: translateY(14px); transform: translateY(14px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
@@ -1020,9 +1101,11 @@
opacity: 0; opacity: 0;
transform: scale(.72); transform: scale(.72);
} }
70% { 70% {
transform: scale(1.08); transform: scale(1.08);
} }
100% { 100% {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
@@ -1035,6 +1118,7 @@
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
*, *,
*::before, *::before,
*::after { *::after {
@@ -1088,3 +1172,39 @@
color: var(--text); color: var(--text);
font-size: 13px; font-size: 13px;
} }
@media (max-width: 1200px) {
.hero__inner {
flex-direction: column;
}
.hero__side {
flex: 0 1 auto;
min-width: 0;
width: 100%;
}
.hero__main {
order: -1;
}
.content__inner {
flex-direction: column;
}
.content__ads {
flex-basis: auto;
width: 100%;
}
}
@media (max-width: 768px) {
.hero__inner {
gap: 12px;
}
.hero__side {
gap: 10px;
}
}
public/css/public.css
+6 -6
View File
@@ -111,7 +111,7 @@ select {
} }
.topbar__inner { .topbar__inner {
width: min(var(--max-width), calc(100% - 48px)); width: min(var(--max-width), 100%);
margin: 0 auto; margin: 0 auto;
min-height: 82px; min-height: 82px;
display: flex; display: flex;
@@ -244,7 +244,7 @@ select {
3. Site Footer (unified footer) 3. Site Footer (unified footer)
---------------------------------------------------------- */ ---------------------------------------------------------- */
.site-footer { .site-footer {
width: min(var(--max-width), calc(100% - 48px)); width: min(var(--max-width), 100%);
margin: 0 auto; margin: 0 auto;
margin-top: 28px; margin-top: 28px;
} }
@@ -290,8 +290,8 @@ select {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 34px; width: 32px;
height: 34px; height: 32px;
padding: 0 10px; padding: 0 10px;
border-radius: 999px; border-radius: 999px;
color: var(--white); color: var(--white);
@@ -300,8 +300,8 @@ select {
} }
.ball--compact { .ball--compact {
width: 28px; width: 26px;
height: 28px; height: 26px;
font-size: 12px; font-size: 12px;
padding: 0 8px; padding: 0 8px;
} }
tmp/trend-compat-regression.js
+79
View File
@@ -0,0 +1,79 @@
const fs = require("fs");
const path = require("path");
const vm = require("vm");
const assert = require("assert");
const apiClientPath = path.join(__dirname, "..", "utils", "ApiClient.js");
const source =
fs.readFileSync(apiClientPath, "utf8") + "\nglobalThis.__ApiClient = ApiClient;\n";
const context = {
console,
window: { CURRENT_CONFIG: {} },
localStorage: {
getItem() {
return "";
},
},
};
vm.createContext(context);
vm.runInContext(source, context, { filename: apiClientPath });
const ApiClient = context.__ApiClient;
async function assertLegacyDataArrayFromTrendObject() {
const rows = [
{ issue: "2026001", openCode: "1,2,3" },
{ issue: "2026002", openCode: "4,5,6" },
];
let trendRequest;
ApiClient.get = async function (url, params) {
trendRequest = { url, params };
return { code: 0, data: { records: rows, total: rows.length } };
};
ApiClient.requestWithMenu = async function () {
throw new Error("trend response should not fall back");
};
const res = await ApiClient.requestLegacyLotteryResultCompat({ suoxie: "pl3" });
assert.strictEqual(trendRequest.url, ApiClient.API.lotteryTrend);
assert.strictEqual(trendRequest.params.code, "pl3");
assert.strictEqual(trendRequest.params.pageSize, 100);
assert.ok(Array.isArray(res.data), "legacy trend data should be an array");
assert.deepStrictEqual(res.data.slice(0, 1), rows.slice(0, 1));
assert.deepStrictEqual(res.data.records, rows);
assert.deepStrictEqual(res.data.rows, rows);
assert.strictEqual(res.data.total, rows.length);
}
async function assertLegacyDataArrayFromFallbackObject() {
const rows = [{ issue: "2026003", openCode: "7,8,9" }];
ApiClient.API.lotteryTrend = "";
ApiClient.requestWithMenu = async function (url, data) {
assert.strictEqual(url, "/api/web/lottery/result/list");
assert.deepStrictEqual(data, { suoxie: "pl3" });
return { code: 0, data: { rows, totalRow: rows.length } };
};
const res = await ApiClient.requestLegacyLotteryResultCompat({ suoxie: "pl3" });
assert.ok(Array.isArray(res.data), "legacy fallback data should be an array");
assert.deepStrictEqual(res.data.slice(0, 1), rows);
assert.deepStrictEqual(res.data.records, rows);
assert.deepStrictEqual(res.data.rows, rows);
assert.strictEqual(res.data.totalRow, rows.length);
}
Promise.resolve()
.then(assertLegacyDataArrayFromTrendObject)
.then(assertLegacyDataArrayFromFallbackObject)
.then(() => {
console.log("trend compat regression passed");
})
.catch((error) => {
console.error(error && error.stack ? error.stack : error);
process.exit(1);
});