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
+161 -108
View File
@@ -1,4 +1,4 @@
<!doctype html>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
@@ -15,6 +15,12 @@
<script src="../public/js/qrcode.js"></script>
</head>
<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">
<div class="topbar__inner">
<a href="./" class="topbar__brand">
@@ -58,10 +64,30 @@
<main class="page-shell">
<section class="hero">
<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="panel-head panel-head--hero">
<div>
<h1>神彩算 PC 预测首页</h1>
<h1>福彩购彩平台 - 精彩开奖首页</h1>
</div>
<button
class="hero__history-btn"
@@ -79,17 +105,31 @@
</div>
</div>
<aside class="hero__side">
<div class="hero-card hero-card--focus">
<div class="hero-card__title">
<img src="../images/home-icon-calendar.png" alt="" />
<span>开奖焦点</span>
<aside class="hero__side hero__side--right">
<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 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 class="hero-focus-list" id="heroFocusList"></div>
</div>
</aside>
</div>
</section>
<div class="section-divider section-divider--blue">
<span>彩票分类导航</span>
@@ -121,48 +161,6 @@
<section class="content">
<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">
<div class="article-matrix" id="articleGroups"></div>
@@ -237,6 +235,13 @@
"七星彩",
];
var currentLotteryMenu = [];
var articleLargeLotteries = {
大乐透: true,
快乐8: true,
排列3: true,
排列三: true,
七星彩: true,
};
var lotteryAliasMap = {
排列3: "排列三",
排列三: "排列三",
@@ -316,6 +321,11 @@
function normalizeLotteryName(name) {
return lotteryAliasMap[name] || name || "";
}
function getFreeArticleLimit(lotteryName) {
return articleLargeLotteries[normalizeLotteryName(lotteryName)]
? 10
: 5;
}
function escapeHtml(text) {
return String(text || "").replace(/[&<>"']/g, function (char) {
return {
@@ -432,7 +442,10 @@
function renderHeroSummary(menuList, noticeList) {
var articleCount = 0;
$.each(menuList, function (_, item) {
articleCount += (item.freeArticleList || []).slice(0, 5).length;
articleCount += (item.freeArticleList || []).slice(
0,
getFreeArticleLimit(item.name),
).length;
});
$("#heroLotteryCount").text(menuList.length);
$("#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>' +
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>',
].join(""),
);
@@ -520,6 +533,7 @@
$.each(sortLotteries(menuList), function (_, item) {
var cfg = lotteryIconMap[item.name] || lotteryIconMap["双色球"];
var result = item.lotteryResult || {};
var drawTimeText = result.drawTimeText || item.drawTimeText || "";
var compact = item.name === "快乐8";
$grid.append(
'<div class="draw-card" style="--accent:' +
@@ -538,13 +552,17 @@
(compact ? " draw-card__balls--compact" : "") +
'">' +
buildBallHtml(result.openCode || "", cfg, compact) +
'</div><div class="draw-card__foot"><span>开奖日期</span><strong>' +
escapeHtml(
'</div><div class="draw-card__foot"><div class="draw-card__foot_left">'
+ '<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(
result.time || result.createTime || result.date || "",
),
) +
"</strong></div></div>",
)+ '</div>'
+'</div>',
);
});
}
@@ -565,39 +583,90 @@
'<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");
$container.empty();
var adGroups = getAdGroups(adList);
var insertAfter = [2, 6, 8];
var adCursor = 0;
var cardCount = 0;
$.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 listHtml = "";
$.each(articles, function (_, article) {
listHtml +=
`<li class="article-item"><img src="${article.accountAvatar || article.expertAvatar}" alt="" class="article-item__icon" /><a class="article-item__link" href="` +
CommonUtil.freeArticleHref(article.id || "") +
'" target="_blank">' +
escapeHtml(article.title || "文章标题") +
"</a></li>";
});
if (!listHtml)
listHtml =
'<li class="article-item article-item--empty"><span>暂无免费文章</span></li>';
$container.append(
'<section class="article-cluster" style="--accent:' +
cfg.accent +
'"><div class="article-cluster__head"><div class="article-cluster__title"><img src="' +
cfg.icon +
'" alt="' +
escapeHtml(lottery.name) +
'" /><div><strong>' +
escapeHtml(lottery.name) +
'</strong></div></div><a class="article-cluster__more" href="mianfeilist.html?id=' +
escapeHtml(lottery.id || "") +
'">更多文章</a></div><ul class="article-cluster__list">' +
listHtml +
"</ul></section>",
);
if (!articles.length) articles = [null];
for (var start = 0; start < articles.length; start += 5) {
var chunk = articles.slice(start, start + 5);
var listHtml = "";
$.each(chunk, function (_, article) {
if (!article) return;
var rawDateText = article.dateText || "";
var itemDateText = rawDateText ? formatDateLabel(rawDateText) : "";
listHtml +=
'<li class="article-item"><a class="article-item__link" href="' +
CommonUtil.freeArticleHref(article.id || "") +
'" target="_blank"><img src="' +
escapeHtml(article.accountAvatar || article.expertAvatar) +
'" alt="" class="article-item__icon" /><span class="article-item__title">' +
escapeHtml(article.title || "文章标题") +
"</span>" +
(itemDateText ? '<span class="article-item__date">' + itemDateText + "</span>" : "") +
"</a>" +
"</li>";
});
if (!listHtml)
listHtml =
'<li class="article-item article-item--empty"><span>暂无免费文章</span></li>';
$container.append(
'<section class="article-cluster" style="--accent:' +
cfg.accent +
'"><div class="article-cluster__head"><div class="article-cluster__title"><img src="' +
cfg.icon +
'" alt="' +
escapeHtml(lottery.name) +
'" /><div><strong>' +
escapeHtml(lottery.name) +
"</strong></div></div><a class=\"article-cluster__more\" href=\"mianfeilist.html?id=" +
escapeHtml(lottery.id || "") +
'">更多文章</a></div><ul class="article-cluster__list">' +
listHtml +
"</ul></section>",
);
cardCount++;
if (
adGroups[adCursor] &&
cardCount === insertAfter[adCursor]
) {
$container.append(renderAdStrip(adGroups[adCursor]));
adCursor++;
}
}
});
}
function renderResourceLinks($container, list) {
@@ -645,32 +714,16 @@
function renderAdGroups(adList) {
var $container = $("#sidebarAdContainer");
$container.empty();
var validAds = CommonUtil.filterValidAds(adList || []);
if (!validAds.length) {
var adGroups = getAdGroups(adList);
if (!adGroups.length) {
$container.html(
'<div class="ad-group ad-group--empty">暂无广告数据</div>',
);
return;
}
for (var i = 0; i < validAds.length; i += 8) {
var html = "";
$.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>",
);
}
$.each(adGroups, function (_, items) {
$container.append(renderAdStrip(items));
});
}
function getDefaultHistoryRange() {
var end = new Date();
@@ -828,7 +881,7 @@
renderBannerImages(data.bannerList || []);
renderDynamicNav(sortedMenu);
updateResultsGrid(sortedMenu);
renderChannelSections(sortedMenu);
renderChannelSections(sortedMenu, data.adList || []);
renderHeroSummary(sortedMenu, data.noticeList || []);
renderNoticeList(data.noticeList || []);
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
============================================================ */
.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 {
padding-bottom: 56px;
padding-bottom: 10px;
}
.hero,
@@ -12,18 +43,19 @@
.content,
.resource-section,
.site-footer {
width: min(var(--max-width), calc(100% - 48px));
width: min(var(--max-width), 100%);
margin: 0 auto;
}
.hero {
padding-top: 28px;
padding-top: 10px;
}
.hero__inner {
display: grid;
grid-template-columns: minmax(0, 1.45fr) 360px;
gap: 22px;
display: flex;
align-items: stretch;
gap: 10px;
margin-top: 4px;
}
.hero__main,
@@ -52,6 +84,16 @@
animation: cxz-fade-up .58s ease both;
}
.content__main {
flex: 1;
min-width: 0;
}
.content__ads {
display: none;
}
.hero-card {
animation-delay: .06s;
}
@@ -75,6 +117,8 @@
}
.hero__main {
flex: 1 1 52%;
min-width: 0;
padding: 20px;
background:
radial-gradient(circle at top right, rgba(253, 185, 51, .14), transparent 22%),
@@ -82,6 +126,11 @@
rgba(255, 255, 255, .96);
}
.hero__side--right {
flex: 0 0 360px;
max-width: 360px;
}
.panel-head,
.draw__header,
.content-head,
@@ -145,9 +194,10 @@
.hero__carousel-wrap {
height: 420px;
border-radius: 22px;
overflow: hidden;
background: linear-gradient(135deg, #0f2b68, #12367c, #164d86);
min-height: 100%;
border-radius: 16px;
overflow: hidden;
}
.hero__carousel-wrap .layui-carousel,
@@ -237,10 +287,16 @@
font-size: 12px;
}
.hero__side {
/* display: grid;
grid-template-rows: 1fr 1fr;
gap: 22px; */
.hero__side .sidebar-card {
border-radius: 16px;
overflow: hidden;
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 {
@@ -410,8 +466,8 @@
}
.section-divider {
width: min(var(--max-width), calc(100% - 48px));
margin: 28px auto 18px;
width: min(var(--max-width), 100%);
margin: 10px auto 10px;
padding: 16px 24px;
border-radius: 22px;
color: var(--white);
@@ -494,7 +550,7 @@
}
.draw {
margin-top: 18px;
margin-top: 10px;
padding: 24px;
background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(245, 248, 255, .98));
}
@@ -571,8 +627,8 @@
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 18px 0 14px;
min-height: 74px;
margin: 8px 0 2px;
min-height: 68px;
align-content: flex-start;
}
@@ -589,20 +645,31 @@
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 {
display: flex;
flex-direction: column;
gap: 4px;
}
.draw-card__foot span {
color: var(--text-soft);
font-size: 12px;
}
.draw-card__foot strong {
color: var(--navy);
.draw-card__foot_right {
font-size: 13px;
margin-left: 8px;
}
.draw-card__link--button {
@@ -626,18 +693,13 @@
}
.content {
margin-top: 24px;
margin-top: 10px;
}
.content__inner {
display: grid;
grid-template-columns: 280px minmax(0, 1fr) 332px;
gap: 22px;
align-items: start;
}
.sidebar-card {
margin-bottom: 18px;
display: flex;
align-items: flex-start;
gap: 16px;
}
.sidebar-card__head {
@@ -742,7 +804,7 @@
}
.qrcode-box {
padding: 24px;
padding: 8px;
text-align: center;
}
@@ -788,10 +850,7 @@
color: var(--text);
font-size: 13px;
font-weight: 700;
}
.combo-tool-card {
margin-top: 34px;
white-space: nowrap;
}
.combo-tool-grid {
@@ -842,7 +901,15 @@
.article-matrix {
display: grid;
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 {
@@ -888,6 +955,11 @@
}
.article-item {
margin: 0;
padding: 0;
}
.article-item__link {
display: flex;
align-items: center;
gap: 12px;
@@ -896,13 +968,14 @@
transition: transform .2s ease, background .2s ease, padding .2s ease;
}
.article-item:hover {
.article-item:hover .article-item__link {
padding-left: 6px;
background: linear-gradient(90deg, rgba(16, 43, 106, .045), transparent);
transform: translateX(2px);
}
.article-item:last-child {
.article-item:last-child .article-item__link,
.article-item.article-item--empty {
border-bottom: none;
}
@@ -913,7 +986,7 @@
flex: 0 0 auto;
}
.article-item__link {
.article-item__title {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
@@ -922,6 +995,13 @@
font-size: 14px;
}
.article-item__date {
color: var(--text-soft);
font-size: 12px;
flex: 0 0 auto;
white-space: nowrap;
}
.ad-group {
margin-bottom: 18px;
}
@@ -951,7 +1031,7 @@
}
.ad-item img {
width: 139px;
width: 157.7px;
height: 94px;
object-fit: cover;
background: #fff;
@@ -965,7 +1045,7 @@
.resource-section__inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
gap: 10px;
}
.resource-card {
@@ -992,7 +1072,7 @@
display: inline-flex;
align-items: center;
gap: 10px;
min-width: calc(50% - 6px);
min-width: calc(23% - 6px);
padding: 14px 16px;
border-radius: 18px;
background: linear-gradient(180deg, rgba(16, 43, 106, .05), rgba(255, 255, 255, .96));
@@ -1009,6 +1089,7 @@
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
@@ -1020,9 +1101,11 @@
opacity: 0;
transform: scale(.72);
}
70% {
transform: scale(1.08);
}
100% {
opacity: 1;
transform: scale(1);
@@ -1035,6 +1118,7 @@
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
@@ -1088,3 +1172,39 @@
color: var(--text);
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 {
width: min(var(--max-width), calc(100% - 48px));
width: min(var(--max-width), 100%);
margin: 0 auto;
min-height: 82px;
display: flex;
@@ -244,7 +244,7 @@ select {
3. Site Footer (unified footer)
---------------------------------------------------------- */
.site-footer {
width: min(var(--max-width), calc(100% - 48px));
width: min(var(--max-width), 100%);
margin: 0 auto;
margin-top: 28px;
}
@@ -290,8 +290,8 @@ select {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
width: 32px;
height: 32px;
padding: 0 10px;
border-radius: 999px;
color: var(--white);
@@ -300,8 +300,8 @@ select {
}
.ball--compact {
width: 28px;
height: 28px;
width: 26px;
height: 26px;
font-size: 12px;
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);
});