diff --git a/html/duanzuhe.html b/html/duanzuhe.html deleted file mode 100644 index c851915..0000000 --- a/html/duanzuhe.html +++ /dev/null @@ -1,1076 +0,0 @@ - - - - - - 神彩算 - 断组合 - - - - - - - - - - - - - - -
-
-
- 断组方案 -
-
-
正在加载方案...
-
- ¥ -- 彩币 - -
-
-
-
计算公式说明：
-
- -
-
-
- -
-
- 断组合推荐 -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
名称类型期号开奖号断组1状态1断组2状态2复制彩币操作
-
正在加载断组数据...
-
-
-
-
- -
-
-
-
购买断组方案
- -
-
-
-
应付金额
-
¥ --
-
- 原价 ¥ -- - 积分抵扣 ¥ 0.00 -
-
- -
选择支付余额
-
- - - -
- - - -
-
- 账户余额 - 余额 ¥ 0.00 -
- 实付 ¥ -- -
-
-
- -
-
-
- - - - - - - - diff --git a/html/index.html b/html/index.html index c0f9a96..dd61b8a 100644 --- a/html/index.html +++ b/html/index.html @@ -118,11 +118,11 @@ 组合工具
- + 断组 断组 - + 杀组合 杀组合 @@ -195,18 +195,37 @@ @@ -628,12 +647,15 @@ if (!article) return; var rawDateText = article.dateText || ""; var itemDateText = rawDateText ? formatDateLabel(rawDateText) : ""; + var authorName = article.issuer || ""; listHtml += '
  • ' + + '" alt="" class="article-item__icon" />' + + (authorName ? '' + escapeHtml(authorName) + "" : "") + + '' + escapeHtml(article.title || "文章标题") + "" + (itemDateText ? '' + itemDateText + "" : "") + diff --git a/html/shazuhe.html b/html/shazuhe.html deleted file mode 100644 index c03366c..0000000 --- a/html/shazuhe.html +++ /dev/null @@ -1,1192 +0,0 @@ - - - - - - 神彩算 - 杀组合 - - - - - - - - - - - - - - -
    -
    -
    - 杀组合方案 -
    -
    -
    正在加载方案...
    -
    - ¥ -- 彩币 - -
    -
    -
    -
    计算公式说明：
    -
    - -
    -
    -
    - -
    -
    - 杀组合推荐 -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    名称类型期号开奖号杀组合1状态1杀组合2状态2复制彩币操作
    -
    正在加载杀组合数据...
    -
    -
    -
    -
    - -
    -
    -
    -
    购买杀组合方案
    - -
    -
    -
    -
    应付金额
    -
    - ¥ -- -
    -
    - 原价 ¥ -- - 积分抵扣 ¥ 0.00 -
    -
    - -
    选择支付余额
    -
    - - - -
    - - - -
    -
    - 账户余额 - 余额 ¥ 0.00 -
    - 实付 ¥ -- -
    -
    -
    - -
    -
    -
    - - -
    -
    - - -
    - 工信部备案号 - 本站仅供数据分析参考 -
    -
    -
    - - - - - diff --git a/html/usercenter.html b/html/usercenter.html index 619a754..f7a9b63 100644 --- a/html/usercenter.html +++ b/html/usercenter.html @@ -1241,9 +1241,9 @@ var source = String(firstValue(item, ["sourceType", "type", "bizType"], "")); var title = purchaseTitle(item); if (source === "fc3d_scheme" || /断组|杀组合|方案/.test(title)) { - if (/杀组合/.test(title)) return "shazuhe.html"; - if (/断组/.test(title)) return "duanzuhe.html"; - return "duanzuhe.html"; + if (/杀组合/.test(title)) return "https://www.3dyjs.cn/shazuhe.html"; + if (/断组/.test(title)) return "https://www.3dyjs.cn/duanzuhe.html"; + return "https://www.3dyjs.cn/duanzuhe.html"; } var expertId = firstValue(item, ["expertId", "createBy", "accountId"], ""); var code = firstValue(item, ["code", "lotteryCode", "suoxie"], ""); diff --git a/public/css/apply.css b/public/css/apply.css index 886cd49..18d24cc 100644 --- a/public/css/apply.css +++ b/public/css/apply.css @@ -64,6 +64,10 @@ } .apply-layout { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; @@ -148,6 +152,10 @@ } .apply-upload-grid { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; diff --git a/public/css/cai.css b/public/css/cai.css index 70a7b36..d92d38a 100644 --- a/public/css/cai.css +++ b/public/css/cai.css @@ -533,6 +533,10 @@ 10. Page Layout (two-column on desktop) ---------------------------------------------------------- */ .cxz-cai-layout { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: 1fr 340px; gap: 20px; diff --git a/public/css/caiinfo.css b/public/css/caiinfo.css index 5ba2279..3fbe163 100644 --- a/public/css/caiinfo.css +++ b/public/css/caiinfo.css @@ -701,6 +701,10 @@ /* Stats become a 3-column grid */ .cxz-expert-stats { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; @@ -1122,11 +1126,19 @@ } .cxz-pay-wallets { + display: flex; + + flex-wrap: wrap; + display: grid; gap: 10px; } .cxz-pay-option { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; diff --git a/public/css/chongzhi.css b/public/css/chongzhi.css index 4ffdead..c0245df 100644 --- a/public/css/chongzhi.css +++ b/public/css/chongzhi.css @@ -8,6 +8,10 @@ } .cz-balance-bar { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; @@ -68,6 +72,10 @@ } .cz-package-grid { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; diff --git a/public/css/combo-table.css b/public/css/combo-table.css deleted file mode 100644 index d8aca68..0000000 --- a/public/css/combo-table.css +++ /dev/null @@ -1,582 +0,0 @@ -/* Combo recommendation table polish for duanzuhe.html and shazuhe.html */ -.page-main { - width: min(1400px, calc(100% - 60px)); - margin: 20px auto 28px; -} - -.content-section { - margin-top: 18px; - background: #fff; - border: 1px solid #edf1f7; - border-radius: 26px; - box-shadow: 0 18px 42px rgba(16, 43, 106, 0.08); - overflow: hidden; -} - -.content-title { - min-height: 68px; - padding: 0 24px; - border-bottom: 1px solid #e7edf5; - background: #fff; - color: #082a67; - font-size: 20px; - font-weight: 700; - line-height: 68px; -} - -.content-title i { - color: #f5a400; - font-size: 14px; -} - -.scheme-section { - display: flex; - align-items: center; - justify-content: space-between; - gap: 24px; - min-height: 92px; - margin-bottom: 18px; - padding: 22px 24px; - border: 1px solid #edf1f7; - border-radius: 26px; - background: #fff; - box-shadow: 0 18px 42px rgba(16, 43, 106, 0.08); -} - -.scheme-copy { - min-width: 0; -} - -.scheme-title { - margin-bottom: 8px; - color: #082a67; - font-size: 18px; - font-weight: 700; -} - -.scheme-desc { - color: #53627a; - font-size: 14px; - line-height: 1.7; -} - -.scheme-actions { - display: flex; - align-items: center; - flex-shrink: 0; - gap: 14px; -} - -.scheme-price { - color: #c88500; - font-size: 22px; - font-weight: 700; - white-space: nowrap; -} - -.scheme-price-unit { - font-size: 14px; - font-weight: 600; -} - -.scheme-buy-btn, -.scheme-view-btn { - min-width: 104px; - height: 40px; - padding: 0 18px; - border: 0; - border-radius: 20px; - background: linear-gradient(135deg, #f5a400, #d58a00); - color: #fff; - font-size: 14px; - font-weight: 700; - cursor: pointer; -} - -.scheme-view-actions { - display: none; - align-items: center; - gap: 10px; -} - -.scheme-view-btn { - background: linear-gradient(135deg, #0b3a86, #0f7d8f); -} - -.scheme-buy-btn:hover, -.scheme-view-btn:hover { - opacity: 0.92; -} - -.scheme-detail-layer { - overflow: hidden; - border-radius: 18px !important; - box-shadow: 0 24px 70px rgba(6, 22, 54, 0.32) !important; -} - -.scheme-detail-layer .layui-layer-title { - height: 64px; - padding: 0 58px 0 26px; - border-bottom: 1px solid #edf1f7; - background: #fff; - color: #082a67; - font-size: 20px; - font-weight: 800; - line-height: 64px; -} - -.scheme-detail-layer .layui-layer-setwin { - top: 22px; - right: 22px; -} - -.scheme-detail-layer .layui-layer-setwin .layui-layer-close1 { - position: relative; - width: 28px; - height: 28px; - border-radius: 50%; - color: transparent; - background-color: #f3f5f9; - background-image: none !important; - font-size: 0; - line-height: 28px; - transform: scale(1); - transition: - background-color 0.2s ease, - box-shadow 0.2s ease, - transform 0.22s ease; -} - -.scheme-detail-layer .layui-layer-setwin .layui-layer-close1::before { - content: ""; - position: absolute; - top: 50%; - left: 50%; - width: 13px; - height: 2px; - border-radius: 999px; - background: #1f2937; - transform: translate(-50%, -50%) rotate(45deg); - transition: - background-color 0.2s ease, - transform 0.22s ease; -} - -.scheme-detail-layer .layui-layer-setwin .layui-layer-close1::after { - content: ""; - position: absolute; - top: 50%; - left: 50%; - width: 13px; - height: 2px; - border-radius: 999px; - background: #1f2937; - transform: translate(-50%, -50%) rotate(-45deg); - transition: - background-color 0.2s ease, - transform 0.22s ease; -} - -.scheme-detail-layer .layui-layer-setwin .layui-layer-close1:hover { - background-color: #102b6a; - box-shadow: 0 8px 18px rgba(16, 43, 106, 0.24); - transform: scale(1.08); -} - -.scheme-detail-layer .layui-layer-setwin .layui-layer-close1:hover::before, -.scheme-detail-layer .layui-layer-setwin .layui-layer-close1:hover::after { - background: #fff; -} - -.scheme-detail-layer .layui-layer-setwin .layui-layer-close1:hover::before { - transform: translate(-50%, -50%) rotate(135deg); -} - -.scheme-detail-layer .layui-layer-setwin .layui-layer-close1:hover::after { - transform: translate(-50%, -50%) rotate(45deg); -} - -.scheme-detail-layer .layui-layer-setwin .layui-layer-close1:active { - box-shadow: 0 4px 10px rgba(16, 43, 106, 0.2); - transform: scale(0.96); -} - -.scheme-detail-layer .layui-layer-content { - background: #fff; -} - -.scheme-plan-content { - box-sizing: border-box; - height: 556px; - padding: 26px 30px 34px; - overflow-y: auto; - color: #25344d; - font-size: 16px; - line-height: 2; - word-break: break-word; -} - -.scheme-plan-content p { - margin: 0 0 14px; -} - -.scheme-plan-content span, -.scheme-plan-content strong { - color: inherit !important; - background: transparent !important; - font-family: inherit !important; -} - -.scheme-plan-content strong { - font-weight: 800; -} - -.scheme-plan-content ul, -.scheme-plan-content ol { - margin: 12px 0 16px 22px; - padding: 0; -} - -.scheme-plan-content li { - margin: 6px 0; -} - -.scheme-plan-content br + br { - display: none; -} - -.scheme-plan-content::-webkit-scrollbar { - width: 8px; -} - -.scheme-plan-content::-webkit-scrollbar-track { - background: #f0f3f8; -} - -.scheme-plan-content::-webkit-scrollbar-thumb { - border-radius: 999px; - background: #bec8d8; -} - -.scheme-plan-content::-webkit-scrollbar-thumb:hover { - background: #9fabbd; -} - -.cxz-dialog-overlay { - display: none; - position: fixed; - inset: 0; - z-index: 9999; - align-items: center; - justify-content: center; - padding: 20px; - background: rgba(7, 19, 45, 0.48); -} - -.cxz-dialog-box { - width: 440px; - max-width: 100%; - overflow: hidden; - border-radius: 16px; - background: #fff; - box-shadow: 0 24px 70px rgba(6, 22, 54, 0.28); -} - -.cxz-dialog-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 18px 22px; - border-bottom: 1px solid #edf1f7; -} - -.cxz-dialog-title { - color: #082a67; - font-size: 18px; - font-weight: 800; -} - -.cxz-dialog-close { - width: 30px; - height: 30px; - border: 0; - border-radius: 50%; - background: #f3f5f9; - color: #5b6678; - font-size: 22px; - line-height: 28px; - cursor: pointer; -} - -.cxz-dialog-close:hover { - background: #e9edf5; - color: #082a67; -} - -.cxz-dialog-body { - padding: 20px 22px 8px; -} - -.cxz-pay-summary { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 14px; - padding: 14px 16px; - border-radius: 12px; - background: #f6f8fc; - color: #53627a; - font-size: 14px; -} - -.cxz-pay-summary strong { - color: #e29700; - font-size: 18px; - font-weight: 800; -} - -.cxz-pay-option { - display: flex; - align-items: center; - gap: 12px; - margin-bottom: 12px; - padding: 15px 16px; - border: 1px solid #e5eaf3; - border-radius: 12px; - background: #fff; - cursor: pointer; - transition: border-color 0.2s ease, background 0.2s ease; -} - -.cxz-pay-option:hover, -.cxz-pay-option.selected { - border-color: #102b6a; - background: #f0f3fa; -} - -.cxz-pay-radio { - display: flex; - align-items: center; - justify-content: center; - width: 18px; - height: 18px; - flex: 0 0 18px; - border: 2px solid #c5cede; - border-radius: 50%; -} - -.cxz-pay-option.selected .cxz-pay-radio { - border-color: #102b6a; - background: #102b6a; -} - -.cxz-pay-option.selected .cxz-pay-radio::after { - content: ""; - width: 8px; - height: 8px; - border-radius: 50%; - background: #fff; -} - -.cxz-pay-info { - min-width: 0; - flex: 1; -} - -.cxz-pay-name { - margin-bottom: 4px; - color: #12213c; - font-size: 15px; - font-weight: 700; -} - -.cxz-pay-desc { - color: #7c8798; - font-size: 13px; -} - -.cxz-pay-balance { - color: #e29700; - font-size: 15px; - font-weight: 800; - white-space: nowrap; -} - -.cxz-points-deduct { - display: flex; - align-items: center; - gap: 8px; - padding: 8px 2px 0; - color: #25344d; - font-size: 14px; - cursor: pointer; -} - -.cxz-points-deduct input { - width: 16px; - height: 16px; - accent-color: #102b6a; -} - -.cxz-dialog-footer { - padding: 18px 22px 22px; -} - -.cxz-dialog-confirm { - width: 100%; - height: 46px; - border: 0; - border-radius: 23px; - background: linear-gradient(135deg, #102b6a, #0f7d8f); - color: #fff; - font-size: 16px; - font-weight: 800; - cursor: pointer; - box-shadow: 0 8px 22px rgba(16, 43, 106, 0.28); -} - -.cxz-dialog-confirm:hover { - opacity: 0.94; -} - -.cxz-dialog-confirm:disabled { - opacity: 0.55; - cursor: not-allowed; -} - -.content-section .layui-table-view { - width: 100%; - margin: 0; - border: 0; - background: #fff; -} - -.content-section .layui-table-box, -.content-section .layui-table-header, -.content-section .layui-table-body { - border: 0; -} - -.content-section .layui-table-box, -.content-section .layui-table-header, -.content-section .layui-table-body { - overflow: hidden !important; -} - -.content-section .layui-table { - width: 100% !important; -} - -.content-section .layui-table-header th, -.content-section .layui-table th { - height: 52px; - padding: 0; - border-color: #e8edf5; - background: #f6f8fc; - color: #06245b; - font-size: 13px; - font-weight: 700; -} - -.content-section .layui-table-cell { - display: flex; - align-items: center; - justify-content: center; - height: auto; - min-height: 52px; - padding: 0 12px; - line-height: 24px; - white-space: normal; - overflow: visible; - text-overflow: clip; -} - -.content-section .layui-table-body td { - height: 70px; - padding: 0; - border-color: #edf0f5; - color: #25344d; -} - -.content-section .layui-table-body tr:nth-child(even) td { - background: #fafafa; -} - -.content-section .layui-table-body tr:hover td { - background: #f5f8ff; -} - -.content-section .layui-table-page { - border-top: 1px solid #edf0f5; -} - -.open-code-cell { - min-height: 28px; - gap: 6px; - justify-content: center; -} - -.code-ball { - width: 26px; - height: 26px; - box-shadow: 0 4px 8px rgba(221, 55, 45, 0.22); -} - -.fzlj { - color: #06245b !important; - font-weight: 700; -} - -@media (max-width: 768px) { - .page-main { - width: calc(100% - 24px); - padding: 0; - } - - .scheme-section { - align-items: flex-start; - flex-direction: column; - gap: 16px; - border-radius: 18px; - } - - .scheme-actions { - align-items: flex-start; - flex-direction: column; - width: 100%; - } - - .scheme-view-actions { - flex-wrap: wrap; - } - - .scheme-detail-layer { - width: calc(100vw - 24px) !important; - max-width: calc(100vw - 24px); - } - - .scheme-detail-layer .layui-layer-title { - height: 56px; - padding: 0 50px 0 18px; - font-size: 18px; - line-height: 56px; - } - - .scheme-plan-content { - height: min(70vh, 520px); - padding: 20px 18px 28px; - font-size: 15px; - line-height: 1.9; - } - - .content-section { - border-radius: 18px; - } - - .content-title { - min-height: 58px; - padding: 0 18px; - font-size: 18px; - line-height: 58px; - } -} diff --git a/public/css/combo.css b/public/css/combo.css deleted file mode 100644 index 54fec87..0000000 --- a/public/css/combo.css +++ /dev/null @@ -1,1352 +0,0 @@ -/* ============================================================ - combo.css - Combo pages (duanzuhe.html, shazuhe.html) - Uses CSS variables from public.css - ============================================================ */ - -/* ============================ - FILTER BAR - Category filters - ============================ */ -.filter-bar { - display: flex; - align-items: center; - gap: 16px; - padding: 20px 24px; - background: var(--white); - border-radius: var(--radius-lg); - margin-bottom: 20px; - box-shadow: var(--shadow-sm); - flex-wrap: wrap; -} - -.filter-bar label { - font-size: 14px; - font-weight: 600; - color: var(--primary); - white-space: nowrap; -} - -.filter-group { - display: flex; - align-items: center; - gap: 8px; -} - -.filter-label { - font-size: 14px; - font-weight: 600; - color: var(--primary); - white-space: nowrap; - min-width: fit-content; -} - -.filter-options { - display: flex; - flex-wrap: wrap; - gap: 6px; -} - -.filter-option { - display: inline-block; - padding: 6px 16px; - border-radius: 20px; - font-size: 13px; - font-weight: 500; - color: var(--text-dark); - background: var(--bg-light); - border: 1px solid var(--border-light); - cursor: pointer; - transition: all 0.25s; - user-select: none; - white-space: nowrap; -} - -.filter-option:hover { - border-color: var(--primary); - color: var(--primary); - background: rgba(16, 43, 106, 0.04); -} - -.filter-option.selected { - background: linear-gradient(135deg, var(--primary), var(--primary-light)); - color: var(--white); - border-color: var(--primary); - box-shadow: 0 2px 8px rgba(16, 43, 106, 0.25); -} - -/* Legacy filter select support */ -.filter-select { - height: 36px; - padding: 0 12px; - border: 2px solid var(--border-light); - border-radius: var(--radius-md); - font-size: 13px; - color: var(--text-dark); - background: var(--bg-light); - outline: none; - transition: border-color 0.3s; -} - -.filter-select:focus { - border-color: var(--primary); -} - -/* ============================ - CONTENT SECTION - Card list - ============================ */ -.content-section { - background: var(--white); - border-radius: var(--radius-lg); - box-shadow: var(--shadow-sm); - overflow: hidden; - margin-bottom: 20px; -} - -.content-card { - border-bottom: 1px solid var(--border-light); - padding: 20px 24px; - transition: background 0.2s; - cursor: pointer; -} - -.content-card:last-child { - border-bottom: none; -} - -.content-card:hover { - background: var(--bg-light); -} - -.content-header { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 10px; - gap: 12px; -} - -.content-title { - font-size: 18px; - font-weight: 700; - color: var(--primary); - padding: 20px 24px; - border-bottom: 2px solid var(--bg-light); - display: flex; - align-items: center; - gap: 8px; -} - -.content-title i { - color: var(--gold); -} - -.content-card .content-title { - font-size: 15px; - font-weight: 700; - color: var(--text-dark); - padding: 0; - border-bottom: none; - flex: 1; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.content-meta { - display: flex; - align-items: center; - gap: 12px; - font-size: 12px; - color: var(--text-muted); - flex-shrink: 0; -} - -.content-meta span { - display: inline-flex; - align-items: center; - gap: 4px; -} - -.content-body { - padding: 0; -} - -/* ============================ - OPEN CODE CELL - Ball display - ============================ */ -.open-code-cell { - display: flex; - gap: 4px; - flex-wrap: wrap; - justify-content: center; - align-items: center; - padding: 4px 0; -} - -.code-ball { - display: inline-flex; - align-items: center; - justify-content: center; - width: 26px; - height: 26px; - border-radius: 50%; - font-size: 12px; - font-weight: 700; - color: var(--white); - transition: transform 0.2s; -} - -.code-ball:hover { - transform: scale(1.15); -} - -.code-ball.red { - background: linear-gradient(135deg, var(--red), #c0392b); - box-shadow: 0 2px 6px rgba(231, 76, 60, 0.3); -} - -.code-ball.blue { - background: linear-gradient(135deg, #3498db, #2471a3); - box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3); -} - -.code-ball.orange { - background: linear-gradient(135deg, #f39c12, var(--orange)); - box-shadow: 0 2px 6px rgba(241, 90, 34, 0.3); -} - -.code-ball.green { - background: linear-gradient(135deg, var(--green), #1e8449); - box-shadow: 0 2px 6px rgba(39, 174, 96, 0.3); -} - -.code-ball.purple { - background: linear-gradient(135deg, #8e44ad, var(--purple)); - box-shadow: 0 2px 6px rgba(123, 45, 142, 0.3); -} - -.code-ball.gold { - background: linear-gradient(135deg, var(--gold), var(--orange)); - box-shadow: 0 2px 6px rgba(253, 185, 51, 0.3); -} - -/* ============================ - COMBO SUMMARY - Price & action - ============================ */ -.combo-summary { - display: flex; - align-items: center; - justify-content: space-between; - padding: 16px 24px; - background: var(--bg-light); - border-top: 1px solid var(--border-light); - gap: 16px; -} - -.combo-price { - display: flex; - align-items: baseline; - gap: 4px; -} - -.combo-price .price-symbol { - font-size: 14px; - font-weight: 700; - color: var(--orange); -} - -.combo-price .price-value { - font-size: 22px; - font-weight: 800; - color: var(--orange); -} - -.combo-price .price-unit { - font-size: 12px; - color: var(--text-muted); -} - -.combo-price .price-original { - font-size: 13px; - color: var(--text-muted); - text-decoration: line-through; - margin-left: 6px; -} - -.combo-btn { - display: inline-flex; - align-items: center; - gap: 6px; - padding: 8px 24px; - border: none; - border-radius: 20px; - font-size: 14px; - font-weight: 700; - background: linear-gradient(135deg, var(--primary), var(--primary-light)); - color: var(--white); - cursor: pointer; - transition: all 0.3s; - white-space: nowrap; -} - -.combo-btn:hover { - box-shadow: 0 4px 12px rgba(16, 43, 106, 0.3); - transform: translateY(-1px); -} - -.combo-btn:active { - transform: translateY(0); -} - -.cxz-btn-buy { - display: inline-flex; - align-items: center; - gap: 6px; - padding: 10px 28px; - border: none; - border-radius: 22px; - font-size: 14px; - font-weight: 700; - background: linear-gradient(135deg, var(--orange), #e04e1a); - color: var(--white); - cursor: pointer; - transition: all 0.3s; - white-space: nowrap; - position: relative; - overflow: hidden; -} - -.cxz-btn-buy::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); - transition: left 0.5s; -} - -.cxz-btn-buy:hover::before { - left: 100%; -} - -.cxz-btn-buy:hover { - box-shadow: 0 4px 16px rgba(241, 90, 34, 0.4); - transform: translateY(-2px); -} - -.cxz-btn-buy:active { - transform: translateY(0); -} - -/* ============================ - LAYUI TABLE OVERRIDES - ============================ */ -.content-section .layui-table { - margin: 0; -} - -.content-section .layui-table th { - background: var(--bg-light); - color: var(--primary); - font-weight: 600; - font-size: 13px; - text-align: center; -} - -.content-section .layui-table td { - text-align: center; - font-size: 13px; - padding: 10px 12px; -} - -.content-section .layui-table tr:hover td { - background: var(--bg-light); -} - -/* ============================ - PAGINATION & EMPTY STATE - ============================ */ -.pagination-wrap { - padding: 16px 24px; - display: flex; - justify-content: center; -} - -.empty-state { - text-align: center; - padding: 60px 20px; - color: var(--text-muted); -} - -.empty-state i { - font-size: 60px; - color: #ddd; - margin-bottom: 16px; - display: block; -} - -.empty-state p { - font-size: 16px; -} - -/* ============================ - PAGE HEADER / NAV (shared) - ============================ */ -.page-header { - width: 1400px; - margin: 0 auto; - display: flex; - align-items: center; - justify-content: space-between; - padding: 16px 0; -} - -.page-header .logo-wrap { - display: flex; - align-items: center; - gap: 12px; -} - -.page-header .logo-wrap img { - height: 44px; -} - -.page-header .logo-text { - font-size: 26px; - font-weight: 700; - color: var(--primary); -} - -.page-header .logo-text span { - color: var(--orange); -} - -.page-header .header-right { - display: flex; - align-items: center; - gap: 16px; -} - -.page-header .header-right a { - font-size: 14px; - color: var(--primary); - font-weight: 500; - transition: color 0.2s; - text-decoration: none; -} - -.page-header .header-right a:hover { - color: var(--orange); -} - -.page-nav { - width: 100%; - background: var(--primary); - display: flex; - justify-content: center; -} - -.page-nav-inner { - width: 1400px; - display: flex; - align-items: center; - justify-content: center; - height: 50px; -} - -.page-nav-inner a { - width: 140px; - display: flex; - font-size: 16px; - justify-content: center; - line-height: 50px; - text-align: center; - color: var(--white); - cursor: pointer; - transition: background 0.3s; - text-decoration: none; -} - -.page-nav-inner a:hover { - background: rgba(253, 185, 51, 0.2); -} - -.page-nav-inner a.active { - background: rgba(253, 185, 51, 0.3); -} - -.page-main { - width: 1400px; - margin: 20px auto; -} - -/* ============================ - RESPONSIVE STYLES - ============================ */ -@media (max-width: 768px) { - .page-header, - .page-nav-inner, - .page-main { - width: 100%; - padding: 0 16px; - } - - .filter-bar { - flex-direction: column; - align-items: flex-start; - padding: 16px; - } - - .filter-group { - width: 100%; - flex-wrap: wrap; - } - - .filter-options { - width: 100%; - } - - .content-header { - flex-direction: column; - align-items: flex-start; - } - - .content-card .content-title { - white-space: normal; - } - - .content-meta { - width: 100%; - justify-content: flex-start; - } - - .combo-summary { - flex-direction: column; - align-items: stretch; - text-align: center; - } - - .combo-price { - justify-content: center; - } - - .combo-btn, - .cxz-btn-buy { - width: 100%; - justify-content: center; - } - - .open-code-cell { - justify-content: flex-start; - } - - .page-nav-inner a { - width: auto; - padding: 0 14px; - font-size: 14px; - } -} - -@media (max-width: 480px) { - .filter-option { - padding: 5px 12px; - font-size: 12px; - } - - .code-ball { - width: 22px; - height: 22px; - font-size: 10px; - } - - .content-card { - padding: 14px 16px; - } - - .combo-price .price-value { - font-size: 18px; - } - - .page-header .logo-text { - font-size: 20px; - } - - .page-nav-inner a { - font-size: 12px; - padding: 0 8px; - } -} - -/* duanzuhe page */ -.duan-scheme { - margin-bottom: 20px; -} -.duan-buy-panel, -.duan-plan-panel { - display: flex; - align-items: center; - justify-content: flex-start; - gap: 18px; - padding: 20px 24px; - background: #fff8ed; - color: #9a5b00; -} -.duan-plan-panel { - display: none; -} -.duan-scheme-text { - min-width: 0; - font-size: 15px; - line-height: 1.7; -} -.duan-scheme-actions { - display: flex; - align-items: center; - gap: 12px; - flex-shrink: 0; -} -.duan-buy-panel { - justify-content: space-between; -} -.duan-price { - color: #f15a22; - font-size: 18px; - font-weight: 800; - white-space: nowrap; -} -.duan-buy-btn, -.duan-plan-btn, -.duan-copy-btn { - border: 0; - border-radius: 18px; - background: #f15a22; - color: #fff; - cursor: pointer; - font-size: 14px; - font-weight: 700; - height: 36px; - padding: 0 22px; -} -.duan-plan-btn { - border: 1px solid #f3d19e; - background: #fdf6ec; - color: #c88500; -} -.duan-copy-btn { - height: 28px; - padding: 0 14px; - border-radius: 14px; - background: #102b6a; - font-size: 12px; -} -.duan-table-wrap { - width: 100%; - overflow: hidden; -} -.duan-table { - width: 100%; - table-layout: fixed; - border-collapse: collapse; -} -.duan-table th, -.duan-table td { - height: 52px; - border-bottom: 1px solid #edf1f7; - text-align: center; - font-size: 13px; -} -.duan-table th { - background: #f5f7fb; - color: #102b6a; - font-weight: 700; -} -.duan-table tbody tr:nth-child(even) { - background: #fafafa; -} -.duan-cell { - display: flex; - align-items: center; - justify-content: center; - gap: 4px; - min-width: 0; - white-space: nowrap; -} -.duan-code-ball { - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 22px; - height: 22px; - padding: 0 5px; - border-radius: 999px; - background: linear-gradient(135deg, #ff6b4a, #de2103); - color: #fff; - font-weight: 700; -} -.duan-muted { - color: #999; -} -.duan-ok { - color: #16a34a; - font-weight: 700; -} -.duan-wrong { - color: #999; - font-weight: 700; -} -.duan-empty { - padding: 58px 20px; - color: #98a2b3; - text-align: center; -} - -.topbar__logged.is-hidden { - display: none; -} -.site-footer__beian-link { - font-size: 12px; - color: rgba(255, 255, 255, 0.5); -} -.duan-plan-content { - padding: 22px; - line-height: 1.9; - color: #25344d; -} - -.cxz-plan-layer { - overflow: hidden; - border-radius: 10px; - box-shadow: 0 26px 70px rgba(7, 26, 63, 0.32); -} - -.cxz-plan-layer .layui-layer-title { - height: 62px; - padding: 0 64px 0 28px; - border: 0; - background: linear-gradient(135deg, #08265f 0%, #123b82 58%, #6f4ab3 100%); - color: #fff; - font-size: 18px; - font-weight: 800; - line-height: 62px; -} - -.cxz-plan-layer .layui-layer-title::before { - content: ""; - display: inline-block; - width: 10px; - height: 10px; - margin-right: 10px; - border-radius: 50%; - background: #f7bc36; - box-shadow: 0 0 0 5px rgba(247, 188, 54, 0.16); - vertical-align: 1px; -} - -.cxz-plan-layer .layui-layer-setwin { - top: 16px; - right: 16px; - width: 30px; - height: 30px; -} - -.cxz-plan-layer .layui-layer-setwin .layui-layer-close1 { - position: relative; - display: block; - width: 30px; - height: 30px; - margin: 0; - border-radius: 50%; - background-image: none; - background-color: rgba(255, 255, 255, 0.16); - color: transparent; - font-size: 0; - line-height: 30px; - text-indent: 0; - transition: background-color 0.2s; -} - -.cxz-plan-layer .layui-layer-setwin .layui-layer-close1::before { - content: "\00d7"; - position: absolute; - inset: 0; - display: block; - color: rgba(255, 255, 255, 0.88); - font-family: Arial, Helvetica, sans-serif; - font-size: 22px; - font-weight: 400; - line-height: 29px; - text-align: center; - text-indent: 0; -} - -.cxz-plan-layer .layui-layer-setwin .layui-layer-close1:hover { - background-color: rgba(255, 255, 255, 0.28); -} - -.cxz-plan-layer .layui-layer-content { - background: #f5f7fb; -} - -.duan-plan-content--brand { - box-sizing: border-box; - max-height: calc(82vh - 126px); - padding: 16px 20px; - overflow: auto; - background: - linear-gradient(180deg, rgba(247, 188, 54, 0.08), rgba(247, 188, 54, 0) 150px), - #f5f7fb; -} - -.duan-plan-content--brand::-webkit-scrollbar { - width: 8px; -} - -.duan-plan-content--brand::-webkit-scrollbar-thumb { - border-radius: 999px; - background: rgba(16, 43, 106, 0.22); -} - -.duan-plan-doc { - box-sizing: border-box; - width: 100%; - max-width: 660px; - margin: 0 auto; - padding: 34px 34px 28px; - border-radius: 6px; - background: #fff; - color: #263955; - font-size: 15px; - line-height: 2; -} - -.duan-plan-doc * { - max-width: 100%; -} - -.duan-plan-doc > :first-child { - margin-top: 0 !important; -} - -.duan-plan-doc p, -.duan-plan-doc div { - margin-top: 0; - margin-bottom: 10px; -} - -.duan-plan-doc b, -.duan-plan-doc strong { - color: #d73a21; - font-weight: 800; -} - -.duan-plan-doc span[style*="background"], -.duan-plan-doc font[style*="background"] { - border-radius: 4px; - padding: 2px 6px; -} - -.cxz-plan-layer .layui-layer-btn { - padding: 12px 18px 18px; - border-top: 1px solid #e7edf6; - background: #f5f7fb; -} - -.cxz-plan-layer .layui-layer-btn .layui-layer-btn0 { - height: 38px; - min-width: 112px; - border: 0; - border-radius: 20px; - background: linear-gradient(135deg, #102b6a, #1c4b96); - box-shadow: 0 8px 18px rgba(16, 43, 106, 0.2); - color: #fff; - font-weight: 700; - line-height: 38px; -} - -@media (max-width: 768px) { - .cxz-plan-layer { - width: calc(100vw - 24px) !important; - left: 12px !important; - } - - .cxz-plan-layer .layui-layer-title { - height: 56px; - padding-left: 20px; - font-size: 16px; - line-height: 56px; - } - - .duan-plan-content--brand { - max-height: calc(82vh - 116px); - padding: 12px 14px; - } - - .duan-plan-doc { - max-width: none; - padding: 24px 18px; - font-size: 14px; - } -} -.duan-col-name { - width: 8%; -} -.duan-col-type { - width: 10%; -} -.duan-col-issue { - width: 9%; -} -.duan-col-open { - width: 11%; -} -.duan-col-group { - width: 14%; -} -.duan-col-status { - width: 8%; -} -.duan-col-copy { - width: 7%; -} -.duan-col-price { - width: 6%; -} -.duan-col-action { - width: 5%; -} - -/* shared purchase dialog */ -.cxz-dialog-overlay { - display: none; - position: fixed; - inset: 0; - z-index: 10000; - align-items: center; - justify-content: center; - padding: 20px; - background: rgba(0, 0, 0, 0.5); -} -.cxz-dialog-overlay.active { - display: flex; -} -.cxz-dialog-box { - width: 440px; - max-width: 100%; - overflow: hidden; - border-radius: 12px; - background: #fff; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); -} -.cxz-dialog-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 18px 24px; - background: linear-gradient(135deg, #102b6a, #1a3f8f); -} -.cxz-dialog-title { - color: #fff; - font-size: 17px; - font-weight: 700; -} -.cxz-dialog-close { - display: flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; - border: 0; - border-radius: 50%; - background: transparent; - color: rgba(255, 255, 255, 0.75); - cursor: pointer; - font-size: 24px; - line-height: 1; -} -.cxz-dialog-close:hover { - background: rgba(255, 255, 255, 0.15); - color: #fff; -} -.cxz-dialog-body { - padding: 24px; -} -.cxz-pay-summary { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 16px; - padding: 14px 16px; - border-radius: 8px; - background: #fff8ed; - color: #667085; -} -.cxz-pay-summary strong { - color: #f15a22; - font-size: 24px; - font-weight: 800; -} -.cxz-pay-option { - display: flex; - align-items: center; - gap: 14px; - margin-bottom: 12px; - padding: 16px 18px; - border: 2px solid #e5e7eb; - border-radius: 8px; - background: #fff; - cursor: pointer; - transition: all 0.25s; -} -.cxz-pay-option:hover, -.cxz-pay-option.selected { - border-color: #102b6a; - background: #f0f3fa; -} -.cxz-pay-radio { - display: flex; - align-items: center; - justify-content: center; - width: 20px; - height: 20px; - flex-shrink: 0; - border: 2px solid #e5e7eb; - border-radius: 50%; -} -.cxz-pay-option.selected .cxz-pay-radio { - border-color: #102b6a; - background: #102b6a; -} -.cxz-pay-option.selected .cxz-pay-radio::after { - content: ""; - width: 8px; - height: 8px; - border-radius: 50%; - background: #fff; -} -.cxz-pay-info { - flex: 1; - min-width: 0; -} -.cxz-pay-name { - color: #1a1a2e; - font-size: 15px; - font-weight: 600; -} -.cxz-pay-desc { - margin-top: 2px; - color: #6b7280; - font-size: 12px; -} -.cxz-pay-balance { - flex-shrink: 0; - color: #f15a22; - font-size: 15px; - font-weight: 700; - white-space: nowrap; -} -.cxz-pay-balance::before { - content: "\00A5"; - margin-right: 2px; - font-size: 12px; - font-weight: 400; -} -.cxz-point-option { - display: flex; - align-items: center; - gap: 8px; - margin: 4px 0 18px; - color: #667085; - font-size: 13px; -} -.cxz-point-option em { - margin-left: auto; - color: #98a2b3; - font-style: normal; -} -.cxz-dialog-footer { - padding: 0 24px 24px; -} -.cxz-dialog-confirm { - width: 100%; - padding: 14px; - border: 0; - border-radius: 8px; - background: linear-gradient(135deg, #102b6a, #1a3f8f); - color: #fff; - cursor: pointer; - font-size: 16px; - font-weight: 700; -} -.cxz-dialog-confirm:disabled { - cursor: not-allowed; - opacity: 0.55; -} - - -.duan-rec-hit { - color: #e83b24; - font-weight: 700; -} -.duan-rec-miss { - color: #a8b0bc; - font-weight: 700; -} - -/* redesigned payment dialog */ -.cxz-dialog-overlay { - background: rgba(10, 18, 34, 0.58); - backdrop-filter: blur(2px); -} - -.cxz-dialog-box { - width: 500px; - max-width: calc(100vw - 32px); - border-radius: 16px; - background: #fff; - box-shadow: 0 24px 70px rgba(10, 18, 34, 0.32); -} - -.cxz-dialog-header { - padding: 20px 22px 14px; - border-bottom: 0; - background: #fff; -} - -.cxz-dialog-title { - color: #102b6a; - font-size: 19px; - font-weight: 800; -} - -.cxz-dialog-close { - color: #7a8496; - font-size: 26px; -} - -.cxz-dialog-close:hover { - color: #102b6a; - background: #f1f4fa; -} - -.cxz-dialog-body { - padding: 0 22px 16px; -} - -.cxz-pay-hero { - padding: 20px; - border-radius: 14px; - background: linear-gradient(135deg, #102b6a 0%, #1e5790 100%); - color: #fff; -} - -.cxz-pay-hero-label { - color: rgba(255, 255, 255, 0.76); - font-size: 13px; -} - -.cxz-pay-hero-price { - margin-top: 8px; - color: #ffb12b; - font-size: 34px; - font-weight: 900; - line-height: 1; -} - -.cxz-pay-hero-sub { - display: flex; - flex-wrap: wrap; - gap: 8px 14px; - margin-top: 12px; - color: rgba(255, 255, 255, 0.78); - font-size: 12px; -} - -.cxz-pay-deduct { - color: #ffd48a; -} - -.cxz-pay-section-title { - margin: 18px 0 10px; - color: #102b6a; - font-size: 14px; - font-weight: 800; -} - -.cxz-pay-wallets { - display: grid; - gap: 10px; -} - -.cxz-pay-option { - display: grid; - grid-template-columns: 18px 1fr auto; - gap: 12px; - align-items: center; - width: 100%; - margin: 0; - padding: 14px 16px; - border: 1px solid #e1e7f0; - border-radius: 12px; - background: #f8fafd; - box-shadow: none; - text-align: left; -} - -.cxz-pay-option:hover, -.cxz-pay-option.selected { - border-color: #102b6a; - background: #fff; - box-shadow: 0 8px 22px rgba(16, 43, 106, 0.1); -} - -.cxz-pay-radio { - width: 16px; - height: 16px; - border: 1px solid #b8c2d2; -} - -.cxz-pay-option.selected .cxz-pay-radio { - border-color: #f15a22; - background: #f15a22; -} - -.cxz-pay-option.selected .cxz-pay-radio::after { - width: 6px; - height: 6px; -} - -.cxz-pay-info { - display: flex; - flex-direction: column; - gap: 2px; -} - -.cxz-pay-name { - color: #102b6a; - font-size: 14px; - font-weight: 800; -} - -.cxz-pay-desc { - display: block; - color: #8b95a8; - font-size: 12px; -} - -.cxz-pay-balance { - color: #f15a22; - font-size: 15px; - font-weight: 800; -} - -.cxz-pay-balance::before { - content: none; -} - -.cxz-point-card { - display: flex; - align-items: center; - justify-content: space-between; - gap: 14px; - margin-top: 12px; - padding: 14px 16px; - border: 1px dashed #f3b36d; - border-radius: 12px; - background: #fff8ed; - cursor: pointer; -} - -.cxz-point-main { - display: flex; - align-items: center; - gap: 10px; - min-width: 0; -} - -.cxz-point-card input { - width: 16px; - height: 16px; - accent-color: #f15a22; -} - -.cxz-point-title { - display: block; - color: #102b6a; - font-size: 14px; - font-weight: 800; -} - -.cxz-point-desc { - display: block; - margin-top: 2px; - color: #8b5b24; - font-size: 12px; -} - -.cxz-point-value { - color: #f15a22; - font-size: 14px; - font-weight: 800; - white-space: nowrap; -} - -.cxz-pay-total-card { - display: flex; - align-items: center; - justify-content: space-between; - gap: 16px; - margin-top: 14px; - padding: 14px 16px; - border-radius: 12px; - background: #f2f5fb; -} - -.cxz-pay-total-card span { - display: block; - color: #102b6a; - font-size: 14px; - font-weight: 800; -} - -.cxz-pay-total-card em { - display: block; - margin-top: 2px; - color: #7a8496; - font-size: 12px; - font-style: normal; -} - -.cxz-pay-total-card em.is-insufficient { - color: #e83b24; -} - -.cxz-pay-total-card strong { - color: #f15a22; - font-size: 18px; - font-weight: 900; - white-space: nowrap; -} - -.cxz-dialog-footer { - padding: 0 22px 22px; -} - -.cxz-dialog-confirm { - height: 46px; - padding: 0 16px; - border-radius: 12px; - background: linear-gradient(135deg, #f15a22, #ff8a20); - box-shadow: 0 10px 22px rgba(241, 90, 34, 0.24); -} - -.cxz-dialog-confirm:hover { - background: linear-gradient(135deg, #e94f18, #ff7b17); - box-shadow: 0 10px 22px rgba(241, 90, 34, 0.3); -} - -.cxz-dialog-confirm:disabled { - background: #c9d1de; - box-shadow: none; -} diff --git a/public/css/distribution.css b/public/css/distribution.css index 145b2a0..3e9803b 100644 --- a/public/css/distribution.css +++ b/public/css/distribution.css @@ -237,6 +237,10 @@ /* Balance Grid */ .balance-grid { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; @@ -280,6 +284,10 @@ /* Stats Grid */ .stats-grid { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; @@ -383,6 +391,10 @@ /* Action Grid */ .action-grid { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; @@ -451,6 +463,10 @@ /* Action Section (legacy 2-column card layout) */ .action-section { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; @@ -662,6 +678,10 @@ } .links-grid { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; @@ -773,6 +793,10 @@ } .team-stats { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; @@ -1134,6 +1158,10 @@ /* Promo Stats */ .promo-stats { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; @@ -1231,6 +1259,10 @@ /* 3-column stats for tuiguang page */ .stats-row { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; @@ -1316,6 +1348,10 @@ } .promo-info-grid { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 24px; @@ -1363,6 +1399,10 @@ .promo-flow-list { padding: 24px; + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; @@ -1519,6 +1559,10 @@ PROMO CONTENT 2-COLUMN LAYOUT ============================ */ .promo-content-grid { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: 1fr 1fr; gap: 24px; @@ -1921,6 +1965,10 @@ /* Tuiguang spacing refinement */ .promo-content { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr); gap: 32px; diff --git a/public/css/finance.css b/public/css/finance.css index 537eaa1..a8d3a55 100644 --- a/public/css/finance.css +++ b/public/css/finance.css @@ -62,6 +62,10 @@ /* Amount grid (6 items, 3 columns) */ .cz-amount-grid { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; @@ -774,6 +778,10 @@ /* Method select */ .tx-method-select { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; diff --git a/public/css/fufei.css b/public/css/fufei.css index 6788bb5..aa40f24 100644 --- a/public/css/fufei.css +++ b/public/css/fufei.css @@ -311,6 +311,10 @@ } .pay-info-grid { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; @@ -377,6 +381,10 @@ } .number-pool { + display: flex; + + flex-wrap: wrap; + display: grid; gap: 16px; } diff --git a/public/css/index.css b/public/css/index.css index 9473316..26e41de 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -258,13 +258,15 @@ body { } .hero__meta-grid { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); + display: flex; + flex-wrap: wrap; gap: 14px; margin-top: 18px; } .hero-meta { + flex: 1 1 calc(33.333% - 10px); + min-width: 160px; padding: 18px; border-radius: 20px; background: linear-gradient(180deg, rgba(16, 43, 106, .05), rgba(16, 43, 106, .02)); @@ -359,13 +361,15 @@ body { } .hero-card__stats { - display: grid; - grid-template-columns: repeat(3, 1fr); + display: flex; + flex-wrap: wrap; gap: 12px; margin-top: 22px; } .hero-stat { + flex: 1 1 calc(33.333% - 8px); + min-width: 120px; padding: 16px; border-radius: 18px; background: rgba(16, 43, 106, .05); @@ -397,14 +401,14 @@ body { } .hero-focus-list { - display: grid; + display: flex; + flex-direction: column; gap: 12px; margin-top: 18px; } .hero-focus-item { - display: grid; - grid-template-columns: 44px minmax(0, 1fr); + display: flex; gap: 12px; align-items: center; padding: 14px; @@ -508,12 +512,14 @@ body { } .lottery-nav__inner { - display: grid; - grid-template-columns: repeat(8, minmax(0, 1fr)); + display: flex; + flex-wrap: wrap; gap: 14px; } .lottery-nav__card { + flex: 0 0 calc(12.5% - 13px); + min-width: 138px; display: flex; flex-direction: column; justify-content: center; @@ -538,8 +544,9 @@ body { } .lottery-nav__icon { - display: grid; - place-items: center; + display: flex; + align-items: center; + justify-content: center; width: 58px; height: 58px; border-radius: 18px; @@ -582,13 +589,15 @@ body { } .draw__grid { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); + display: flex; + flex-wrap: wrap; gap: 18px; margin-top: 22px; } .draw-card { + flex: 0 0 calc(25% - 14px); + min-width: 260px; padding: 18px; border-radius: 22px; border: 1px solid rgba(16, 43, 106, .08); @@ -642,7 +651,9 @@ body { } .draw-card__balls--compact { - gap: 2.8px; + gap: 3px; + width: calc(22px * 10 + 3px * 9); + max-width: 100%; } .draw-card__foot { @@ -834,13 +845,14 @@ body { } .trend-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); + display: flex; + flex-wrap: wrap; gap: 12px; padding: 18px; } .trend-item { + flex: 0 0 calc(50% - 6px); display: flex; align-items: center; gap: 10px; @@ -863,13 +875,14 @@ body { } .combo-tool-grid { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); + display: flex; + flex-wrap: wrap; gap: 12px; padding: 18px; } .combo-tool-item { + flex: 0 0 calc(50% - 6px); display: flex; align-items: center; gap: 10px; @@ -908,13 +921,18 @@ body { } .article-matrix { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); + display: flex; + flex-wrap: wrap; gap: 10px; } .article-ad-strip { - grid-column: 1 / -1; + flex: 0 0 100%; +} + +.article-cluster { + flex: 0 0 calc(50% - 5px); + min-width: 0; } .article-ad-strip .ad-group { @@ -922,8 +940,8 @@ body { } .article-cluster__head { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; + display: flex; + justify-content: space-between; gap: 12px; align-items: center; padding: 18px 20px; @@ -971,7 +989,10 @@ body { .article-item__link { display: flex; align-items: center; - gap: 12px; + width: 100%; + min-width: 0; + box-sizing: border-box; + gap: 8px; padding: 12px 0; border-bottom: 1px dashed rgba(16, 43, 106, .1); transition: transform .2s ease, background .2s ease, padding .2s ease; @@ -993,10 +1014,40 @@ body { height: 24px; border-radius: 50%; flex: 0 0 auto; + border: 1px solid rgba(255, 255, 255, .82); + box-shadow: 0 3px 8px rgba(16, 43, 106, .14); +} + +.article-item__author { + position: relative; + flex: 0 0 82px; + max-width: 82px; + padding-right: 12px; + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #123a77; + font-size: 12px; + font-weight: 700; + line-height: 1.25; +} + +.article-item__author::after { + content: ""; + position: absolute; + right: 0; + top: 50%; + width: 1px; + height: 12px; + background: rgba(16, 43, 106, .16); + transform: translateY(-50%); } .article-item__title { - flex: 1; + flex: 1 1 auto; + min-width: 0; + max-width: min(330px, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -1008,6 +1059,7 @@ body { color: var(--text-soft); font-size: 12px; flex: 0 0 auto; + margin-left: auto; white-space: nowrap; } @@ -1031,6 +1083,8 @@ body { } .ad-item { + flex: 0 0 calc(12.5% - 11px); + min-width: 0; display: block; border-radius: 18px; overflow: hidden; @@ -1040,7 +1094,8 @@ body { } .ad-item img { - width: 157.7px; + display: block; + width: 100%; height: 94px; object-fit: cover; background: #fff; @@ -1052,12 +1107,14 @@ body { } .resource-section__inner { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); + display: flex; + flex-wrap: wrap; gap: 10px; } .resource-card { + flex: 0 0 calc(50% - 5px); + min-width: 0; padding: 20px; } @@ -1078,11 +1135,13 @@ body { } .resource-link { - display: inline-flex; + display: flex; + flex: 0 0 calc(25% - 9px); + min-width: 0; align-items: center; - gap: 10px; - min-width: calc(23% - 6px); - padding: 14px 16px; + gap: 8px; + box-sizing: border-box; + padding: 14px 12px; border-radius: 18px; background: linear-gradient(180deg, rgba(16, 43, 106, .05), rgba(255, 255, 255, .96)); border: 1px solid rgba(16, 43, 106, .08); @@ -1141,11 +1200,18 @@ body { .resource-link img { width: 16px; height: 16px; + flex: 0 0 16px; } .resource-link span { + display: block; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; color: var(--text); - font-size: 14px; + font-size: 13px; + line-height: 1.25; } .FooterPublicFriendship { @@ -1206,14 +1272,297 @@ body { flex-basis: auto; width: 100%; } + + .lottery-nav__card { + flex-basis: calc(25% - 11px); + } + + .draw-card { + flex-basis: calc(50% - 9px); + } +} + +@media (max-width: 900px) { + .article-cluster, + .resource-card { + flex-basis: 100%; + } + + .resource-link { + flex: 0 0 calc(25% - 9px); + } } @media (max-width: 768px) { + .hero, + .lottery-nav, + .draw, + .content, + .resource-section, + .site-footer, + .section-divider { + width: calc(100% - 20px); + } + .hero__inner { gap: 12px; } .hero__side { gap: 10px; + max-width: none; + } + + .hero__main, + .hero-card, + .draw, + .resource-card, + .article-cluster, + .ad-group { + border-radius: 18px; + } + + .hero__main, + .draw { + padding: 16px; + } + + .hero__carousel-wrap { + height: 240px; + border-radius: 14px; + } + + .section-divider { + padding: 14px 16px; + border-radius: 18px; + } + + .section-divider span, + .draw__title strong, + .resource-card__head h2 { + font-size: 20px; + } + + .lottery-nav__inner, + .draw__grid, + .article-matrix, + .resource-section__inner { + gap: 10px; + } + + .lottery-nav__card { + flex: 0 0 calc(50% - 5px); + min-width: 0; + padding: 14px 10px; + } + + .draw-card { + flex: 0 0 100%; + min-width: 0; + padding: 18px; + } + + .trend-item, + .combo-tool-item { + flex-basis: calc(50% - 6px); + min-width: 0; + } + + .article-cluster__head, + .draw-card__head, + .draw-card__foot { + align-items: flex-start; + flex-wrap: wrap; + } + + .draw-card__head { + align-items: center; + flex-wrap: nowrap; + } + + .draw-card__title { + min-width: 0; + } + + .draw-card__title img { + flex: 0 0 38px; + width: 38px; + height: 38px; + } + + .draw-card__link { + flex: 0 0 auto; + } + + .draw-card__balls { + gap: 6px; + min-height: auto; + margin: 12px 0 10px; + } + + .draw-card__balls--compact { + gap: 5px; + width: calc(28px * 10 + 5px * 9); + max-width: 100%; + } + + .draw-card__balls--compact .ball--compact { + flex-basis: 28px; + width: 28px; + min-width: 28px; + height: 28px; + font-size: 12px; + } + + .draw-card__foot { + align-items: center; + flex-wrap: nowrap; + } + + .article-cluster__more { + margin-left: auto; + white-space: nowrap; + } + + .article-item__link { + align-items: center; + flex-wrap: wrap; + gap: 6px 8px; + padding: 12px 0; + overflow: hidden; + } + + .article-item__author { + flex: 1 1 calc(100% - 130px); + max-width: none; + padding-right: 0; + color: #123a77; + font-size: 12px; + } + + .article-item__author::after { + display: none; + } + + .article-item__title { + flex: 0 0 100%; + min-width: 100%; + max-width: 100%; + padding-left: 32px; + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + color: var(--text); + font-size: 13px; + line-height: 1.55; + } + + .article-item__date { + display: block; + flex: 0 0 auto; + margin-left: auto; + color: var(--text-soft); + font-size: 11px; + line-height: 1.2; + } + + .article-cluster__list { + padding: 8px 14px 14px; + } + + .article-ad-strip .ad-group__grid { + gap: 10px; + width: 100%; + box-sizing: border-box; + overflow: hidden; + padding: 12px 14px 16px; + } + + .article-ad-strip .ad-item { + flex: 0 0 calc((100% - 10px) / 2); + width: calc((100% - 10px) / 2); + max-width: calc((100% - 10px) / 2); + box-sizing: border-box; + } + + .article-ad-strip .ad-item img { + width: 100%; + height: auto; + aspect-ratio: 1.75 / 1; + } + + .resource-card { + padding: 16px; + } + + .resource-card__body { + gap: 10px; + } + + .resource-link { + flex: 0 0 calc(50% - 5px); + padding: 12px 10px; + border-radius: 14px; + } + + .resource-link span { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } +} + +@media (max-width: 520px) { + .indexTopAppsinBox { + height: 48px; + padding: 0 12px; + } + + .indexTopAppText { + font-size: 14px; + } + + .hero__carousel-wrap { + height: 200px; + } + + .lottery-nav__card, + .trend-item, + .combo-tool-item, + .resource-link { + flex-basis: 100%; + } + + .article-item__author { + flex-basis: calc(100% - 124px); + } + + .hero-meta, + .hero-stat { + flex-basis: 100%; + } +} + +@media (max-width: 380px) { + .draw-card { + padding: 16px 14px; + } + + .draw-card__balls--compact { + gap: 4px; + width: calc(24px * 10 + 4px * 9); + } + + .draw-card__balls--compact .ball--compact { + flex-basis: 24px; + width: 24px; + min-width: 24px; + height: 24px; + font-size: 11px; } } diff --git a/public/css/mianfei.css b/public/css/mianfei.css index 5897ba5..8b84101 100644 --- a/public/css/mianfei.css +++ b/public/css/mianfei.css @@ -576,6 +576,10 @@ Collection Grid (mianfeishoucang.html) ============================================================ */ .cxz-collect-grid { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; @@ -1540,11 +1544,19 @@ } .cxz-article-nav { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .cxz-recommend-section { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; @@ -1567,6 +1579,10 @@ } .cxz-recommend-list { + display: flex; + + flex-wrap: wrap; + display: grid; gap: 10px; margin: 0; @@ -1575,6 +1591,10 @@ } .cxz-recommend-list li { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; @@ -1815,6 +1835,10 @@ } .cxz-comment-item { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; diff --git a/public/css/mianfeishoucang.css b/public/css/mianfeishoucang.css index 26b93d6..67ce969 100644 --- a/public/css/mianfeishoucang.css +++ b/public/css/mianfeishoucang.css @@ -243,6 +243,10 @@ /* === Expert Collection Cards === */ .sc-expert-grid { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; diff --git a/public/css/public.css b/public/css/public.css index a918c7c..3922c84 100644 --- a/public/css/public.css +++ b/public/css/public.css @@ -98,19 +98,40 @@ select { position: sticky; top: 0; z-index: 1000; - background: linear-gradient(90deg, rgba(8, 24, 60, .98), rgba(16, 43, 106, .98) 45%, rgba(15, 70, 126, .98)); - box-shadow: 0 14px 40px rgba(8, 24, 60, .28); + background: + linear-gradient(180deg, rgba(32, 74, 139, .98) 0%, rgba(18, 50, 111, .98) 48%, rgba(10, 31, 74, .98) 100%), + linear-gradient(90deg, rgba(8, 24, 60, .98), rgba(16, 43, 106, .98) 46%, rgba(15, 70, 126, .98)); + border-top: 1px solid rgba(255, 255, 255, .1); + border-bottom: 1px solid rgba(253, 185, 51, .36); + box-shadow: + 0 10px 24px rgba(8, 24, 60, .26), + inset 0 1px 0 rgba(255, 255, 255, .16), + inset 0 -1px 0 rgba(0, 0, 0, .24); +} + +.topbar::before { + content: ""; + position: absolute; + inset: 0 0 auto; + height: 22px; + pointer-events: none; + background: + linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)), + linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); } .topbar::after { content: ""; position: absolute; - inset: auto 0 0; - height: 2px; - background: linear-gradient(90deg, transparent, rgba(253, 185, 51, .95), transparent); + inset: auto 0 -10px; + height: 10px; + pointer-events: none; + background: linear-gradient(180deg, rgba(8, 24, 60, .24), rgba(8, 24, 60, 0)); } .topbar__inner { + position: relative; + z-index: 1; width: min(var(--max-width), 100%); margin: 0 auto; min-height: 82px; @@ -122,29 +143,49 @@ select { .topbar__logo { width: 200px; height: auto; + filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .24)); } .topbar__nav { flex: 1; display: flex; + flex-wrap: nowrap; align-items: center; gap: 8px; + min-width: 0; overflow: hidden; } +.topbar__nav::-webkit-scrollbar { + display: none; + width: 0; + height: 0; +} + .topbar__nav-link { position: relative; + display: inline-flex; + flex: 0 0 auto; + align-items: center; + justify-content: center; padding: 12px 18px; border-radius: 999px; + border: 1px solid transparent; color: rgba(255, 255, 255, .82); font-size: 15px; + line-height: 1; + white-space: nowrap; + text-shadow: 0 1px 2px rgba(0, 0, 0, .28); + box-shadow: none; transition: .24s ease; } .topbar__nav-link:hover, .topbar__nav-link.is-active { color: var(--white); - background: rgba(255, 255, 255, .08); + background: rgba(255, 255, 255, .06); + border-color: rgba(255, 255, 255, .08); + box-shadow: none; } .topbar__nav-link.is-active::after { @@ -173,11 +214,20 @@ select { gap: 10px; border-radius: 999px; padding: 4px 8px; + border: 1px solid transparent; transition: .24s ease; } .topbar__profile:hover { background: rgba(255, 255, 255, .08); + border-color: rgba(255, 255, 255, .14); +} + +.topbar__actions { + display: flex; + flex-direction: column; + align-items: stretch; + gap: 6px; } .topbar__btn { @@ -188,6 +238,16 @@ select { transition: .24s ease; } +.topbar__btn:hover { + filter: brightness(1.05); +} + +.topbar__actions .topbar__btn { + padding: 7px 16px; + line-height: 1.15; + text-align: center; +} + .topbar__btn--ghost { color: var(--white); background: transparent; @@ -198,7 +258,13 @@ select { color: var(--navy-deep); font-weight: 700; background: linear-gradient(135deg, #ffd26b, var(--gold)); - box-shadow: 0 10px 22px rgba(253, 185, 51, .24); + box-shadow: 0 4px 10px rgba(253, 185, 51, .16); +} + +.topbar__btn--center { + color: var(--white); + background: rgba(255, 255, 255, .1); + border: 1px solid rgba(255, 255, 255, .18); } .topbar__btn--logout { @@ -250,49 +316,151 @@ select { } .site-footer__inner { - padding: 24px 28px; + padding: 34px 38px; border-radius: 28px; border: 1px solid rgba(16, 43, 106, .08); background: linear-gradient(135deg, rgba(8, 24, 60, .98), rgba(16, 43, 106, .96) 55%, rgba(17, 74, 126, .96)); } +.site-footer__layout { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 56px; +} + +.site-footer__brand { + flex: 1 1 520px; + min-width: 0; + padding-left: 4px; +} + .site-footer__logo { - width: 220px; + width: 250px; } .site-footer__inner p { - margin: 16px 0 0; + margin: 10px 0 0; color: rgba(255, 255, 255, .8); line-height: 1.8; } +.site-footer__copyright { + font-size: 12px; +} + +.site-footer__desc { + max-width: 100%; + color: rgba(255, 255, 255, .62) !important; + font-size: 12px; +} + .site-footer__meta { display: flex; flex-wrap: wrap; - gap: 18px; - margin-top: 18px; + gap: 10px 22px; + margin-top: 0; color: rgba(255, 255, 255, .56); font-size: 12px; } -.site-footer__meta a { +.site-footer__meta a, +.index-style-02 { color: rgba(255, 255, 255, .56); } -.site-footer__meta a:hover { +.site-footer__meta a:hover, +.index-style-02:hover { color: rgba(255, 255, 255, .86); } +.site-footer__contact { + width: 360px; + padding: 0; + border: none; + background: transparent; + box-shadow: none; +} + +.site-footer__contact.is-empty { + display: none; +} + +.site-footer__contact-head { + display: flex; + flex-direction: column; + gap: 4px; + margin-bottom: 18px; +} + +.site-footer__contact-kicker { + color: rgba(253, 185, 51, .9) !important; + font-size: 11px !important; + font-weight: 800; + line-height: 1; + text-transform: uppercase; + letter-spacing: 0; +} + +.site-footer__contact-head strong { + color: var(--white); + font-size: 24px; + line-height: 1.2; +} + +.site-footer__contact-head span { + color: rgba(255, 255, 255, .58); + font-size: 12px; + line-height: 1.4; +} + +.site-footer__qr-grid { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 20px; +} + +.site-footer__qr-card { + flex: 0 0 132px; + min-width: 0; + padding: 8px 8px 10px; + border-radius: 16px; + background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(246, 249, 255, .96)); + text-align: center; + box-shadow: 0 8px 18px rgba(0, 0, 0, .12); +} + +.site-footer__qr-card img { + width: 116px; + height: 116px; + border-radius: 12px; + object-fit: cover; + background: var(--white); +} + +.site-footer__qr-card span { + display: block; + margin-top: 7px; + color: var(--navy-deep); + font-size: 12px; + font-weight: 700; + line-height: 1.2; +} + /* ---------------------------------------------------------- 4. Ball Styles (unified ball system) ---------------------------------------------------------- */ .ball { display: inline-flex; + box-sizing: border-box; + flex: 0 0 32px; align-items: center; justify-content: center; width: 32px; + min-width: 32px; height: 32px; - padding: 0 10px; + padding: 0; border-radius: 999px; color: var(--white); font-size: 14px; @@ -300,10 +468,12 @@ select { } .ball--compact { - width: 26px; - height: 26px; - font-size: 12px; - padding: 0 8px; + flex-basis: 22px; + width: 22px; + min-width: 22px; + height: 22px; + font-size: 11px; + padding: 0; } .ball--red { @@ -887,19 +1057,32 @@ select { gap: 8px; } + .topbar__logo { + width: 170px; + } + .topbar__nav { order: 3; width: 100%; + max-width: 100%; + flex: 0 0 100%; + flex-wrap: nowrap; overflow-x: auto; + overflow-y: hidden; justify-content: flex-start; gap: 4px; - padding-bottom: 4px; + padding-bottom: 0; + scrollbar-width: none; + -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .topbar__nav-link { + flex: 0 0 auto; padding: 6px 14px; font-size: 13px; + line-height: 1; + white-space: nowrap; } .topbar__btn { @@ -942,17 +1125,21 @@ select { } .ball { + flex-basis: 28px; + width: 28px; min-width: 28px; height: 28px; font-size: 12px; - padding: 0 8px; + padding: 0; } .ball--compact { - min-width: 24px; - height: 24px; + flex-basis: 22px; + width: 22px; + min-width: 22px; + height: 22px; font-size: 11px; - padding: 0 6px; + padding: 0; } .PublicAdvertisingUl { @@ -981,4 +1168,81 @@ select { padding: 18px 16px; border-radius: 18px; } + + .site-footer__layout { + flex-direction: column; + align-items: flex-start; + gap: 22px; + } + + .site-footer__brand { + flex-basis: auto; + width: 100%; + } + + .site-footer__contact { + width: 100%; + max-width: 360px; + } + + .site-footer__qr-grid { + justify-content: start; + } +} + +@media (max-width: 520px) { + .topbar__inner { + align-items: center; + } + + .topbar__logo { + width: 150px; + } + + .topbar__user, + .topbar__guest, + .topbar__logged { + gap: 6px; + } + + .topbar__avatar { + width: 34px; + height: 34px; + } + + .topbar__actions .topbar__btn { + padding: 6px 12px; + font-size: 12px; + } + + .topbar__nav { + margin-top: 2px; + } + + .site-footer__logo { + width: 190px; + } + + .site-footer__meta { + gap: 8px 14px; + } + + .site-footer__contact { + max-width: none; + } + + .site-footer__qr-grid { + gap: 12px; + } + + .site-footer__qr-card { + flex: 0 0 calc(50% - 6px); + padding: 8px 6px 10px; + } + + .site-footer__qr-card img { + width: 100%; + height: auto; + aspect-ratio: 1 / 1; + } } diff --git a/public/css/publish.css b/public/css/publish.css index bdf7d6e..535d8c1 100644 --- a/public/css/publish.css +++ b/public/css/publish.css @@ -236,6 +236,10 @@ } .cxz-select-row { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; diff --git a/public/css/tixian.css b/public/css/tixian.css index 9884ff0..fe08894 100644 --- a/public/css/tixian.css +++ b/public/css/tixian.css @@ -1,4 +1,8 @@ .tx-balance-grid { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; @@ -91,6 +95,10 @@ .tx-choice-grid, .tx-method-grid, .tx-account-grid { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; @@ -225,6 +233,10 @@ display: block; } .tx-add-grid { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; diff --git a/public/css/tixianlist.css b/public/css/tixianlist.css index ecd05c4..c941779 100644 --- a/public/css/tixianlist.css +++ b/public/css/tixianlist.css @@ -80,6 +80,10 @@ } .tl-flow-tabs { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 10px; @@ -163,6 +167,10 @@ } .tl-summary { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; diff --git a/public/css/tuiguang.css b/public/css/tuiguang.css index 0f8945d..bacebdc 100644 --- a/public/css/tuiguang.css +++ b/public/css/tuiguang.css @@ -7,6 +7,10 @@ } .tg-hero { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr); gap: 20px; @@ -154,6 +158,10 @@ } .tg-stats { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; @@ -314,6 +322,10 @@ } .tg-rule-grid { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; diff --git a/public/css/usercenter.css b/public/css/usercenter.css index 8a30826..8869e16 100644 --- a/public/css/usercenter.css +++ b/public/css/usercenter.css @@ -453,6 +453,10 @@ Balance Grid - 4 columns with colored icon badges ============================================================ */ .uc-balance-grid { + display: flex; + + flex-wrap: wrap; + display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; diff --git a/utils/ApiClient.js b/utils/ApiClient.js index 4d24772..569707a 100644 --- a/utils/ApiClient.js +++ b/utils/ApiClient.js @@ -704,7 +704,7 @@ const ApiClient = { shouldLoadMenuChildren() { if (typeof window === 'undefined') return true; - return /\/(?:cai|fufei|duanzuhe|shazuhe)\.html(?:$|\?)/.test( + return /\/(?:cai|fufei)\.html(?:$|\?)/.test( window.location.pathname + window.location.search ); }, diff --git a/utils/CommonUtil.js b/utils/CommonUtil.js index e69585c..6e166c0 100644 --- a/utils/CommonUtil.js +++ b/utils/CommonUtil.js @@ -165,8 +165,34 @@ const CommonUtil = { $('.topbar__ubadge, .uc-role').text(text); }, + installTopbarUserCenterEntry() { + if (typeof document === 'undefined') return; + const $ = this.$; + $('#loggedInBox').each((index, box) => { + const $box = $(box); + const $logout = $box.find('.topbar__btn--logout').first(); + let $actions = $box.find('.topbar__actions').first(); + if (!$actions.length) { + $actions = $('
    ', { class: 'topbar__actions' }); + if ($logout.length) $actions.insertBefore($logout); + else $box.append($actions); + } + if ($logout.length && !$logout.parent().is($actions)) { + $logout.appendTo($actions); + } + if ($actions.find('.topbar__btn--center').length) return; + const $entry = $('', { + href: 'usercenter.html', + class: 'topbar__btn topbar__btn--center', + text: '个人中心', + }); + $actions.prepend($entry); + }); + }, + applyWebConfigs(configs) { const $ = this.$; + this.ensureGlobalFooterLayout(); if (!configs) return; if (!Array.isArray(configs)) { @@ -185,7 +211,11 @@ const CommonUtil = { })); const copyrightItems = []; + const footerContactItems = []; configs.forEach((item) => { + const isFooterContact = this.isFooterContactConfig(item); + if (isFooterContact) footerContactItems.push(item); + if (item.type === 'web_title') { $('#page-title').text(item.content || ''); if (item.content) document.title = item.content; @@ -195,12 +225,214 @@ const CommonUtil = { this.setMeta('description', item.content || ''); } else if (item.type === 'web_icon') { this.setIcon(item.content || ''); - } else if (item.type === 'web_copyright') { + } else if (item.type === 'web_copyright' && !isFooterContact) { copyrightItems.push(item); } }); this.applyFooterCopyright(copyrightItems); + this.renderFooterContact(footerContactItems); + }, + + ensureGlobalFooterLayout() { + if (typeof document === 'undefined') return; + const $ = this.$; + $('.site-footer__inner').each((index, footerInner) => { + const $inner = $(footerInner); + let $layout = $inner.find('.site-footer__layout').first(); + + if ($layout.length) { + let $brand = $layout.find('.site-footer__brand').first(); + if (!$brand.length) { + $brand = $('
    ', { class: 'site-footer__brand' }).prependTo($layout); + } + let $contact = $layout.find('.site-footer__contact').first(); + if (!$contact.length) { + $contact = this.buildFooterContactShell($); + $layout.append($contact); + } else if (!$contact.find('.site-footer__qr-grid').length) { + $contact.append($('
    ', { class: 'site-footer__qr-grid' })); + } + return; + } + + const $desc = $inner.find('#additional-info').first().detach(); + const $logo = $inner.find('.site-footer__logo').first().detach(); + const $meta = $inner.find('.site-footer__meta').first().detach(); + const $copyright = $inner.find('#copyright-info').first().detach(); + + const $brand = $('
    ', { class: 'site-footer__brand' }); + if ($logo.length) { + $brand.append($logo); + } else { + $brand.append($('', { + src: '../images/home-logo.png', + alt: '神彩算', + class: 'site-footer__logo', + })); + } + + const $legal = $meta.length + ? $meta.addClass('site-footer__legal') + : $('
    ', { class: 'site-footer__legal site-footer__meta' }); + $brand.append($legal); + + if ($copyright.length) { + $brand.append($copyright.addClass('site-footer__copyright')); + } else { + $brand.append($('

    ', { + id: 'copyright-info', + class: 'site-footer__copyright', + text: '© 2014-2026 神彩算 版权所有', + })); + } + + if ($desc.length) { + $brand.append($desc.addClass('site-footer__desc')); + } else { + $brand.append($('

    ', { + id: 'additional-info', + class: 'site-footer__desc', + text: '本站内容仅供数据分析参考，不构成任何投注建议', + })); + } + + $layout = $('

    ', { class: 'site-footer__layout' }); + $layout.append($brand); + $layout.append(this.buildFooterContactShell($)); + $inner.empty().append($layout); + }); + }, + + buildFooterContactShell($) { + return $('
    ', { class: 'site-footer__contact' }) + .append( + $('
    ', { class: 'site-footer__contact-head' }) + .append($('', { class: 'site-footer__contact-kicker', text: 'Contact' })) + .append($('', { text: '联系客服' })) + .append($('', { text: '微信 / QQ 扫码咨询' })) + ) + .append( + $('
    ', { class: 'site-footer__qr-grid' }) + .append( + $('
    ', { class: 'site-footer__qr-card' }) + .append($('', { src: '../public/img/kfwx.jpg', alt: '客服微信二维码' })) + .append($('', { text: '客服微信' })) + ) + .append( + $('
    ', { class: 'site-footer__qr-card' }) + .append($('', { src: '../public/img/kfqq.jpg', alt: '客服QQ二维码' })) + .append($('', { text: '客服QQ' })) + ) + ); + }, + + isFooterContactConfig(item) { + if (!item) return false; + const text = [ + item.type, + item.title, + item.name, + item.label, + item.remark, + item.content, + ] + .filter(Boolean) + .join(' '); + return /(客服|联系|微信|QQ|wechat|weixin|wx|qq|qrcode|qr|二维码)/i.test(text) && + Boolean(this.extractFooterImageUrl(item)); + }, + + extractFooterImageUrl(item) { + if (!item) return ''; + const fields = [ + 'content', + 'url', + 'image', + 'img', + 'src', + 'qrCode', + 'qrcode', + 'qrCodeUrl', + 'qrcodeUrl', + 'wechatQr', + 'wechatQrcode', + 'wechatQrCode', + 'wechatQrCodeUrl', + 'qqQr', + 'qqQrcode', + 'qqQrCode', + 'qqQrCodeUrl', + 'ossUrl', + 'fileUrl', + ]; + const values = []; + fields.forEach((field) => { + if (item[field]) values.push(item[field]); + }); + + if (typeof item.content === 'string' && item.content.trim().charAt(0) === '{') { + try { + const parsed = JSON.parse(item.content); + fields.forEach((field) => { + if (parsed && parsed[field]) values.push(parsed[field]); + }); + } catch (error) { + // Non-JSON content is valid for plain image URLs. + } + } + + return values + .map((value) => String(value || '').trim()) + .find((value) => /^(https?:)?\/\//i.test(value) || /^data:image\//i.test(value) || /\.(png|jpe?g|webp|gif|svg)(\?.*)?$/i.test(value)) || ''; + }, + + renderFooterContact(items) { + const $ = this.$; + const $contact = $('.site-footer__contact'); + if (!$contact.length) return; + + const qrItems = []; + (Array.isArray(items) ? items : []).forEach((item) => { + const src = this.extractFooterImageUrl(item); + if (!src) return; + const text = [item.type, item.title, item.name, item.label, item.remark, item.content].filter(Boolean).join(' '); + const isQQ = /QQ|qq/.test(text); + const isWechat = /微信|wechat|weixin|wx/i.test(text); + qrItems.push({ + src, + title: isQQ ? '客服QQ' : isWechat ? '客服微信' : '客服二维码', + }); + }); + + const uniqueItems = qrItems + .filter((item, index, array) => array.findIndex((target) => target.src === item.src) === index) + .sort((a, b) => (a.title === '客服微信' ? -1 : 0) - (b.title === '客服微信' ? -1 : 0)); + const displayItems = uniqueItems.length + ? uniqueItems.slice(0, 2) + : [ + { + src: '../public/img/kfwx.jpg', + title: '客服微信', + }, + { + src: '../public/img/kfqq.jpg', + title: '客服QQ', + }, + ]; + + const $grid = $contact.find('.site-footer__qr-grid'); + if (!$grid.length) return; + $grid.empty(); + + displayItems.forEach((item) => { + $('
    ', { class: 'site-footer__qr-card' }) + .append($('', { src: item.src, alt: item.title + '二维码' })) + .append($('', { text: item.title })) + .appendTo($grid); + }); + + $contact.removeClass('is-empty'); }, applyFooterCopyright(items) { @@ -212,15 +444,20 @@ const CommonUtil = { .sort((a, b) => (Number(a.sort) || 0) - (Number(b.sort) || 0)); if (!list.length) return; - const footerInfo = list.find((item) => Number(item.sort) === 3) || list[list.length - 1]; - if (footerInfo?.content) $('#copyright-info').text(footerInfo.content.trim()); + const copyrightItem = list.find((item) => /©|版权|copyright/i.test(String(item.content || ''))) || null; + const descItem = + list.find((item) => /本站|历史数据|数据分析|投注建议|不涉及|仅供/i.test(String(item.content || ''))) || + list.find((item) => item !== copyrightItem && !/ICP备|工信部|公网安备|公安/.test(String(item.content || ''))) || + null; - const $meta = $('.site-footer__meta'); + if (copyrightItem?.content) $('#copyright-info').text(copyrightItem.content.trim()); + if (descItem?.content) $('#additional-info').text(descItem.content.trim()); + + const $meta = $('.site-footer__legal, .site-footer__meta').first(); if (!$meta.length) return; $meta.empty(); list - .filter((item) => item !== footerInfo) .forEach((item) => { const content = String(item.content || '').trim(); if (!content) return; @@ -231,20 +468,21 @@ const CommonUtil = { id: 'beian', href: 'https://beian.miit.gov.cn/', target: '_blank', + class: 'index-style-02', text: content, }).appendTo($meta); - } else { + } else if (isPolice) { $('', { - id: isPolice ? 'police-record' : undefined, + id: 'police-record', text: content, }).appendTo($meta); } }); - if (!$meta.children().length && footerInfo?.content) { + if (!$meta.children().length && descItem?.content) { $('', { id: 'additional-info', - text: footerInfo.content.trim(), + text: descItem.content.trim(), }).appendTo($meta); } }, @@ -296,6 +534,7 @@ const CommonUtil = { loadPageConfig(options = {}) { if (typeof ApiClient === 'undefined') return; this.installUnifiedPagination(); + this.ensureGlobalFooterLayout(); this.installWechatLoginEntry(); this.installWechatAccountBindEntry(); const loadHomeData = options.home !== false && this.isHomePageDom(); @@ -1532,4 +1771,13 @@ if (typeof module !== 'undefined' && module.exports) { } else if (typeof window !== 'undefined') { window.CommonUtil = CommonUtil; CommonUtil.installUnifiedPagination(); + const installTopbarUserCenterEntry = () => CommonUtil.installTopbarUserCenterEntry(); + const ensureGlobalFooterLayout = () => CommonUtil.ensureGlobalFooterLayout(); + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', installTopbarUserCenterEntry); + document.addEventListener('DOMContentLoaded', ensureGlobalFooterLayout); + } else { + installTopbarUserCenterEntry(); + ensureGlobalFooterLayout(); + } }