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-09 11:09:42 +08:00
parent eca7992d03
commit 8f0e38ad51
17 changed files with 943 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
utils/CommonUtil.js
+510 -13
View File
@@ -229,8 +229,125 @@ const CommonUtil = {
$('.topbar__ubadge, .uc-role').text(text);
},
ensureTopbarSignInStyle() {
if (typeof document === 'undefined' || document.getElementById('topbar-signin-style')) return;
const style = document.createElement('style');
style.id = 'topbar-signin-style';
style.textContent = `
.topbar__btn--signin {
min-width: 58px;
height: 34px;
padding: 0 14px;
color: #ffd66e;
font-size: 13px;
font-weight: 700;
line-height: 34px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(253, 185, 51, .42);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.topbar__btn--signin:hover {
color: #fff3c4;
background: rgba(253, 185, 51, .16);
border-color: rgba(253, 185, 51, .62);
filter: none;
}
.topbar__btn--signin:disabled {
cursor: default;
opacity: .72;
}
.topbar__btn--signin.is-signed {
color: rgba(255, 255, 255, .72);
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .16);
box-shadow: none;
}
`;
document.head.appendChild(style);
},
setTopbarSignInSigned(signed) {
if (typeof document === 'undefined') return;
const $ = this.$;
$('.topbar__btn--signin').each((index, button) => {
const $button = $(button);
$button
.prop('disabled', !!signed)
.toggleClass('is-signed', !!signed)
.text(signed ? '已签到' : '签到');
});
},
hasTopbarSignInStatusValue(data) {
if (typeof data === 'boolean') return true;
if (!data || typeof data !== 'object') return false;
const source = data.data && typeof data.data === 'object' ? data.data : data;
return [
'signedToday',
'todaySigned',
'isSignedToday',
'signed',
'isSigned',
'hasSigned',
'signIn',
'signInStatus',
].some((key) => source[key] !== undefined);
},
readTopbarSignInSigned(data) {
if (typeof data === 'boolean') return data;
if (!data || typeof data !== 'object') return false;
const source = data.data && typeof data.data === 'object' ? data.data : data;
const keys = [
'signedToday',
'todaySigned',
'isSignedToday',
'signed',
'isSigned',
'hasSigned',
'signIn',
'signInStatus',
];
const value = keys.map((key) => source[key]).find((item) => item !== undefined && item !== null && item !== '');
return value === true || value === 1 || value === '1' || String(value).toLowerCase() === 'true';
},
isAlreadySignedResponse(res) {
if (this.hasTopbarSignInStatusValue(res) && this.readTopbarSignInSigned(res)) return true;
const data = res && typeof res.data === 'object' ? res.data : {};
const text = [
res && res.msg,
res && res.message,
data.msg,
data.message,
].filter(Boolean).join(' ');
return /已签到|已签|已经签到|签到过/.test(text);
},
isSignInSuccessResponse(res) {
if (typeof ApiClient !== 'undefined' && ApiClient.isSuccess) return ApiClient.isSuccess(res);
return !!res && res.code === 0;
},
loadTopbarSignInStatus() {
if (typeof ApiClient === 'undefined' || !this.getToken()) return;
const url = ApiClient.API && ApiClient.API.mineSignInStatus
? ApiClient.API.mineSignInStatus
: '/api/web/mine/sign-in/status';
ApiClient.get(url, null, { headers: this.authHeaders() })
.then((res) => {
if (this.isAlreadySignedResponse(res)) {
this.setTopbarSignInSigned(true);
} else if (this.hasTopbarSignInStatusValue(res)) {
this.setTopbarSignInSigned(this.readTopbarSignInSigned(res));
}
})
.catch(() => {});
},
installTopbarUserCenterEntry() {
if (typeof document === 'undefined') return;
this.ensureTopbarSignInStyle();
const $ = this.$;
$('#loggedInBox').each((index, box) => {
const $box = $(box);
@@ -244,14 +361,348 @@ const CommonUtil = {
if ($logout.length && !$logout.parent().is($actions)) {
$logout.appendTo($actions);
}
if ($actions.find('.topbar__btn--center').length) return;
const $entry = $('<a>', {
href: 'usercenter.html',
class: 'topbar__btn topbar__btn--center',
text: '个人中心',
});
$actions.prepend($entry);
if (!$box.find('.topbar__btn--signin').length) {
const $signIn = $('<button>', {
type: 'button',
class: 'topbar__btn topbar__btn--signin',
text: '签到',
});
$signIn.on('click', function () {
const $button = $(this);
if ($button.prop('disabled')) return;
$button.prop('disabled', true).text('签到中');
CommonUtil.signIn((res) => {
if (CommonUtil.isSignInSuccessResponse(res) || CommonUtil.isAlreadySignedResponse(res)) {
CommonUtil.setTopbarSignInSigned(true);
} else {
CommonUtil.setTopbarSignInSigned(false);
}
});
});
const $profile = $box.find('.topbar__profile').first();
if ($profile.length) $signIn.insertBefore($profile);
else $box.prepend($signIn);
}
if (!$actions.find('.topbar__btn--center').length) {
const $entry = $('<a>', {
href: 'usercenter.html',
class: 'topbar__btn topbar__btn--center',
text: '个人中心',
});
$actions.prepend($entry);
}
});
this.loadTopbarSignInStatus();
},
getAssetRoot() {
if (typeof window === 'undefined' || !window.location) return '../images/';
return /\/html\/[^/]*$/i.test(window.location.pathname) ? '../images/' : 'images/';
},
getCurrentPageName() {
if (typeof window === 'undefined' || !window.location) return '';
return (window.location.pathname.split('/').pop() || 'index.html').toLowerCase() || 'index.html';
},
isTopbarCaiNavPage() {
return ['cai.html', 'caiinfo.html'].includes(this.getCurrentPageName());
},
isTopbarEmptyNavPage() {
return [
'usercenter.html',
'mianfeishoucang.html',
'tuiguang.html',
'jine.html',
'chongzhi.html',
'tixian.html',
'tixianlist.html',
'fabumianfeiwenzhang.html',
'fufei.html',
'appdown.html',
'apply.html',
'open-browser.html',
'reg.html',
'repwd.html',
'social-callback.html',
'upgrade.html',
'wodefenxiao.html',
'yinsixieyi.html',
'yonghuxieyi.html',
].includes(this.getCurrentPageName());
},
getTopbarFeatureNavItems() {
const root = this.getAssetRoot();
return [
{ label: '双色球走势图', icon: root + 'trend-icons/ssq-trend.png' },
{ label: '基本走势', icon: root + 'trend-icons/basic-trend.png' },
{ label: '出号分布', icon: root + 'trend-icons/number-distribution.png' },
{ label: '红蓝走势', icon: root + 'trend-icons/red-blue-trend.png' },
{ label: '综合走势', icon: root + 'trend-icons/combined-trend.png' },
{ label: '蓝球走势', icon: root + 'trend-icons/blue-trend.png' },
{ label: '蓝球振幅', icon: root + 'trend-icons/blue-amplitude.png' },
{ label: '蓝球尾数', icon: root + 'trend-icons/blue-tail.png' },
{ label: '蓝球两数和', icon: root + 'trend-icons/blue-two-sum.png' },
];
},
ensureTopbarNavigationModeStyle() {
if (typeof document === 'undefined' || document.getElementById('topbar-nav-mode-style')) return;
const style = document.createElement('style');
style.id = 'topbar-nav-mode-style';
style.textContent = `
.topbar__nav.is-empty {
min-width: 0;
}
.topbar__nav--feature {
gap: 6px;
align-items: stretch;
}
.topbar__nav-link--feature {
flex-direction: column;
gap: 4px;
min-width: 82px;
padding: 5px 9px;
line-height: 1.15;
}
.topbar__nav-feature-icon {
width: 34px;
height: 34px;
flex: 0 0 34px;
object-fit: contain;
display: block;
}
.topbar__nav-feature-text {
display: inline-block;
font-size: 12px;
text-align: center;
white-space: nowrap;
}
.topbar-dev-modal {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 24px 24px 22px;
text-align: center;
overflow: hidden;
background:
radial-gradient(circle at 22% 16%, rgba(253, 185, 51, .22), transparent 28%),
linear-gradient(180deg, #f7fbff 0%, #ffffff 76%);
border: 1px solid rgba(16, 43, 106, .08);
border-radius: 12px;
}
.topbar-dev-modal::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 5px;
background: linear-gradient(90deg, #102b6a, #2478d7 58%, #fdb933);
}
.topbar-dev-badge {
display: inline-flex;
align-items: center;
justify-content: center;
height: 24px;
padding: 0 10px;
margin-bottom: 12px;
border-radius: 999px;
color: #102b6a;
font-size: 12px;
font-weight: 700;
background: rgba(16, 43, 106, .08);
}
.topbar-dev-modal img {
display: block;
width: 118px;
height: 118px;
object-fit: contain;
margin: 0 auto 14px;
padding: 12px;
border-radius: 24px;
background: rgba(255, 255, 255, .82);
box-shadow: 0 12px 28px rgba(16, 43, 106, .12);
}
.topbar-dev-modal strong {
display: block;
color: #102b6a;
font-size: 20px;
line-height: 1.4;
}
.topbar-dev-modal span {
display: block;
margin-top: 7px;
color: #7b8495;
font-size: 14px;
}
.layui-layer.topbar-dev-layer {
border-radius: 12px;
overflow: hidden;
background: transparent;
box-shadow: 0 20px 54px rgba(11, 31, 73, .24);
}
.layui-layer.topbar-dev-layer .layui-layer-content {
overflow: visible;
background: transparent;
}
.topbar-dev-confirm {
display: inline-flex;
align-items: center;
justify-content: center;
height: 34px;
min-width: 108px;
margin-top: 18px;
padding: 0 18px;
color: #fff;
font-size: 14px;
font-weight: 700;
border: 0;
outline: 0;
cursor: pointer;
border-radius: 999px;
background: linear-gradient(135deg, #102b6a, #2478d7);
box-shadow: 0 8px 18px rgba(16, 43, 106, .2);
}
.topbar-dev-confirm:hover {
filter: brightness(1.05);
}
.topbar-dev-confirm:active {
transform: translateY(1px);
}
@media (max-width: 768px) {
.topbar__nav-link--feature {
min-width: 68px;
padding: 4px 7px;
}
.topbar__nav-feature-icon {
width: 28px;
height: 28px;
flex-basis: 28px;
}
.topbar__nav-feature-text {
font-size: 11px;
}
}
`;
document.head.appendChild(style);
},
showTopbarFeatureComingSoon(item) {
const root = this.getAssetRoot();
const image = root + 'trend-icons/dev-coming.png';
const content =
'<div class="topbar-dev-modal">' +
'<div class="topbar-dev-badge">功能预告</div>' +
'<img src="' + this.escapeHtml(image) + '" alt="开发中" />' +
'<strong>开发中敬请期待</strong>' +
'<span>' + this.escapeHtml(item.label || '') + '</span>' +
'<button type="button" class="topbar-dev-confirm">我知道了</button>' +
'</div>';
if (typeof layui !== 'undefined' && layui.layer) {
const index = layui.layer.open({
type: 1,
title: false,
closeBtn: 0,
shadeClose: true,
area: ['348px', 'auto'],
skin: 'topbar-dev-layer',
content,
end: () => {
this.$('#navLotteryItems .topbar__nav-link--feature').removeClass('is-active');
},
});
setTimeout(() => {
this.$('.topbar-dev-confirm').off('click.topbarDev').on('click.topbarDev', () => layui.layer.close(index));
}, 0);
} else {
alert('开发中敬请期待');
}
},
renderTopbarEmptyNav() {
const $ = this.$;
const $nav = $('#navLotteryItems');
if (!$nav.length) return;
this.ensureTopbarNavigationModeStyle();
if ($nav.attr('data-nav-mode') === 'empty' && !$nav.children().length) return;
$nav
.attr('data-nav-mode', 'empty')
.removeClass('topbar__nav--feature')
.addClass('is-empty')
.empty();
},
renderTopbarFeatureNav() {
const $ = this.$;
const $nav = $('#navLotteryItems');
if (!$nav.length) return;
const items = this.getTopbarFeatureNavItems();
if (
$nav.attr('data-nav-mode') === 'feature' &&
$nav.find('.topbar__nav-link--feature').length === items.length
) {
return;
}
this.ensureTopbarNavigationModeStyle();
$nav
.attr('data-nav-mode', 'feature')
.removeClass('is-empty')
.addClass('topbar__nav--feature')
.empty();
items.forEach((item) => {
$('<a>', {
href: 'javascript:void(0)',
class: 'topbar__nav-link topbar__nav-link--feature',
'data-nav-label': item.label,
title: item.label,
})
.append($('<img>', {
src: item.icon,
alt: '',
class: 'topbar__nav-feature-icon',
'aria-hidden': 'true',
}))
.append($('<span>', {
class: 'topbar__nav-feature-text',
text: item.label,
}))
.on('click', (event) => {
event.preventDefault();
event.stopPropagation();
if (event.stopImmediatePropagation) event.stopImmediatePropagation();
$('#navLotteryItems .topbar__nav-link--feature').removeClass('is-active');
this.showTopbarFeatureComingSoon(item);
})
.appendTo($nav);
});
},
applyTopbarNavigationMode() {
if (typeof document === 'undefined' || this.isTopbarCaiNavPage()) return;
if (this.isTopbarEmptyNavPage()) {
this.renderTopbarEmptyNav();
return;
}
this.renderTopbarFeatureNav();
},
installTopbarNavigationMode() {
if (typeof document === 'undefined' || this.isTopbarCaiNavPage() || window.__TOPBAR_NAV_MODE_INSTALLED__) return;
window.__TOPBAR_NAV_MODE_INSTALLED__ = true;
const run = () => this.applyTopbarNavigationMode();
run();
const nav = document.getElementById('navLotteryItems');
if (!nav || typeof MutationObserver === 'undefined') return;
const observer = new MutationObserver(() => {
window.clearTimeout(window.__TOPBAR_NAV_MODE_TIMER__);
window.__TOPBAR_NAV_MODE_TIMER__ = window.setTimeout(run, 0);
});
observer.observe(nav, { childList: true, subtree: true });
},
applyWebConfigs(configs) {
@@ -580,6 +1031,39 @@ const CommonUtil = {
);
},
installCaiSingleLotteryMode() {
if (typeof document === 'undefined' || typeof ApiClient === 'undefined') return;
const $ = this.$;
const $lotteryFilter = $('#lotteryFilter');
if (!$lotteryFilter.length) return;
$lotteryFilter.closest('.cxz-filter-row').hide();
const $nav = $('#navLotteryItems');
if (!$nav.length) return;
const currentCode = new URLSearchParams(window.location.search).get('id') || 'ssq';
ApiClient.loadMenuCompat()
.then((res) => {
if (!res || res.code !== 0 || !Array.isArray(res.data)) return;
$nav.find('.topbar__nav-link').remove();
res.data.forEach((item) => {
const code = item.suoxie || item.code || '';
if (!code) return;
const activeClass = String(code) === currentCode ? ' is-active' : '';
$nav.append(
'<a href="cai.html?id=' +
encodeURIComponent(code) +
'" class="topbar__nav-link' +
activeClass +
'">' +
this.escapeHtml(item.name || code) +
'</a>'
);
});
})
.catch(() => {});
},
asArray(value) {
if (typeof ApiClient !== 'undefined' && ApiClient.asArray) return ApiClient.asArray(value);
if (Array.isArray(value)) return value;
@@ -601,6 +1085,8 @@ const CommonUtil = {
this.ensureGlobalFooterLayout();
this.installWechatLoginEntry();
this.installWechatAccountBindEntry();
this.installCaiSingleLotteryMode();
this.installTopbarNavigationMode();
const loadHomeData = options.home !== false && this.isHomePageDom();
const request = loadHomeData ? this.loadHomePageData() : this.loadBasePageData(options);
this.applyCaiExpertListLabels();
@@ -1919,13 +2405,21 @@ const CommonUtil = {
signIn(onComplete) {
layui.use('layer', () => {
const layer = layui.layer;
ApiClient.post('/api/web/mine/sign-in', null, { headers: this.authHeaders() }).then((res) => {
layer.msg(res.code === 0 ? '签到成功' : res.msg || '签到失败', {
icon: res.code === 0 ? 1 : 2,
time: 1500,
ApiClient.post('/api/web/mine/sign-in', null, { headers: this.authHeaders() })
.then((res) => {
layer.msg(res.code === 0 ? '签到成功' : res.msg || '签到失败', {
icon: res.code === 0 ? 1 : 2,
time: 1500,
});
if (typeof onComplete === 'function') onComplete(res);
})
.catch((error) => {
layer.msg(error?.message || '签到失败', {
icon: 2,
time: 1500,
});
if (typeof onComplete === 'function') onComplete({ code: -1, msg: '签到失败', error });
});
if (typeof onComplete === 'function') onComplete(res);
});
});
},
@@ -2019,12 +2513,15 @@ if (typeof module !== 'undefined' && module.exports) {
window.CommonUtil = CommonUtil;
CommonUtil.installUnifiedPagination();
const installTopbarUserCenterEntry = () => CommonUtil.installTopbarUserCenterEntry();
const installTopbarNavigationMode = () => CommonUtil.installTopbarNavigationMode();
const ensureGlobalFooterLayout = () => CommonUtil.ensureGlobalFooterLayout();
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', installTopbarUserCenterEntry);
document.addEventListener('DOMContentLoaded', installTopbarNavigationMode);
document.addEventListener('DOMContentLoaded', ensureGlobalFooterLayout);
} else {
installTopbarUserCenterEntry();
installTopbarNavigationMode();
ensureGlobalFooterLayout();
}
}