修改样式，未完成
This commit is contained in:
rain
+161
-108
@@ -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 || []);
|
||||
|
||||
Reference in New Issue
Block a user