修改问题

html/cjdlt.html

@@ -56,14 +56,12 @@
       </div>
     </nav>
 
+    <div class="breadcrumb-bigbox">
       <div class="breadcrumb-bar">
-      <a href="javascript:history.back();"
+        <a href="javascript:history.back();"><i class="layui-icon layui-icon-left"></i> 返回</a>
-        ><i class="layui-icon layui-icon-left"></i> 返回</a
-      >
         <span>/</span>
         <span>大乐透走势图</span>
       </div>
-
       <div class="page-title-bar">
         <div class="page-title">大乐透走势图</div>
         <div class="qishu">
@@ -73,6 +71,7 @@
         <div class="qishu-but" data-count="60">60期</div>
         </div>
       </div>
+    </div>
 
     <div class="table-wrapper">
       <table class="trend-table" border="1" id="trend-table">

html/fc3d.html

@@ -55,7 +55,7 @@
         </div>
       </div>
     </nav>
-
+    <div class="breadcrumb-bigbox">
       <div class="breadcrumb-bar">
         <a href="javascript:history.back();"
           ><i class="layui-icon layui-icon-left"></i> 返回</a
@@ -73,6 +73,7 @@
           <div class="qishu-but" data-count="60">60期</div>
         </div>
       </div>
+    </div>
 
     <div class="table-wrapper">
       <table class="trend-table" border="1" id="trend-table">
@@ -214,7 +215,12 @@
                 ? '<tr class="trend-period-separator">'
                 : "<tr>";
             html += '<td class="col-issue">' + item.issue + "</td>";
-            html += '<td class="col-code">' + CommonUtil.renderTrendOpenCode(item.openCode, { mode: "position" }) + "</td>";
+            html +=
+              '<td class="col-code">' +
+              CommonUtil.renderTrendOpenCode(item.openCode, {
+                mode: "position",
+              }) +
+              "</td>";
 
             // Type columns
             var typeNames = ["baozi", "zu3", "zu6"];
@@ -399,13 +405,22 @@
         }
 
         function loadData() {
-          ApiClient.requestLegacyLotteryResultCompat({ suoxie: "fc3d" }).then(function (res) {
+          ApiClient.requestLegacyLotteryResultCompat({ suoxie: "fc3d" }).then(
+            function (res) {
               if (res && res.data) {
-                allData = Array.isArray(res.data) ? res.data : (res.data && (res.data.records || res.data.rows || res.data.list || res.data.data)) || [];
+                allData = Array.isArray(res.data)
+                  ? res.data
+                  : (res.data &&
+                      (res.data.records ||
+                        res.data.rows ||
+                        res.data.list ||
+                        res.data.data)) ||
+                    [];
                 if (!Array.isArray(allData)) allData = [];
                 renderData(currentCount);
               }
-          });
+            },
+          );
         }
 
         $(document).on("click", ".qishu-but", function () {

html/index.html

@@ -319,7 +319,7 @@
         七星彩: {
           icon: "../images/icon-qxc.png",
           color: "violet",
-          blueColor: "violet",
+          blueColor: "blue",
           code: "qxc",
           accent: "#b06dff",
         },
@@ -401,8 +401,38 @@
           ? item.lotteryResult.expect || item.lotteryResult.name || ""
           : "";
       }
-      function buildBallHtml(openCode, cfg, compact) {
+      function buildBallHtml(result, cfg, compact) {
+        result = result || {};
+        var openCode = result.openCode || "";
         if (!openCode) return '<span class="ball ball--empty">--</span>';
+
+        if (
+          cfg.code === "qxc" &&
+          Array.isArray(result.redNumbers) &&
+          Array.isArray(result.blueNumbers)
+        ) {
+          var qxcHtml = "";
+          $.each(result.redNumbers, function (_, ball) {
+            qxcHtml +=
+              '<span class="ball ball--' +
+              cfg.color +
+              (compact ? " ball--compact" : "") +
+              '">' +
+              escapeHtml($.trim(ball)) +
+              "</span>";
+          });
+          $.each(result.blueNumbers, function (_, ball) {
+            qxcHtml +=
+              '<span class="ball ball--' +
+              cfg.blueColor +
+              (compact ? " ball--compact" : "") +
+              '">' +
+              escapeHtml($.trim(ball)) +
+              "</span>";
+          });
+          return qxcHtml || '<span class="ball ball--empty">--</span>';
+        }
+
         var html = "";
         var parts = String(openCode).split("+");
         $.each(parts[0] ? parts[0].split(",") : [], function (_, ball) {
@@ -569,7 +599,7 @@
               '">历史开奖</a></div><div class="draw-card__balls' +
               (compact ? " draw-card__balls--compact" : "") +
               '">' +
-              buildBallHtml(result.openCode || "", cfg, compact) +
+              buildBallHtml(result, cfg, compact) +
               '</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)

html/kl8.html

@@ -56,14 +56,12 @@
       </div>
     </nav>
 
+    <div class="breadcrumb-bigbox">
       <div class="breadcrumb-bar">
-      <a href="javascript:history.back();"
+        <a href="javascript:history.back();"><i class="layui-icon layui-icon-left"></i> 返回</a>
-        ><i class="layui-icon layui-icon-left"></i> 返回</a
-      >
         <span>/</span>
         <span>快乐8走势图</span>
       </div>
-
       <div class="page-title-bar">
         <div class="page-title">快乐8走势图</div>
         <div class="qishu">
@@ -73,6 +71,7 @@
         <div class="qishu-but" data-count="60">60期</div>
         </div>
       </div>
+    </div>
 
     <div class="table-wrapper">
       <table class="trend-table" border="1" id="trend-table">

html/pl3.html

@@ -56,14 +56,12 @@
       </div>
     </nav>
 
+    <div class="breadcrumb-bigbox">
       <div class="breadcrumb-bar">
-      <a href="javascript:history.back();"
+        <a href="javascript:history.back();"><i class="layui-icon layui-icon-left"></i> 返回</a>
-        ><i class="layui-icon layui-icon-left"></i> 返回</a
-      >
         <span>/</span>
         <span>排列三走势图</span>
       </div>
-
       <div class="page-title-bar">
         <div class="page-title">排列三走势图</div>
         <div class="qishu">
@@ -73,6 +71,7 @@
         <div class="qishu-but" data-count="60">60期</div>
         </div>
       </div>
+    </div>
 
     <div class="table-wrapper">
       <table class="trend-table" border="1" id="trend-table">

html/pl5.html

@@ -56,14 +56,12 @@
       </div>
     </nav>
 
+    <div class="breadcrumb-bigbox">
       <div class="breadcrumb-bar">
-      <a href="javascript:history.back();"
+        <a href="javascript:history.back();"><i class="layui-icon layui-icon-left"></i> 返回</a>
-        ><i class="layui-icon layui-icon-left"></i> 返回</a
-      >
         <span>/</span>
         <span>排列五走势图</span>
       </div>
-
       <div class="page-title-bar">
         <div class="page-title">排列五走势图</div>
         <div class="qishu">
@@ -73,6 +71,7 @@
         <div class="qishu-but" data-count="60">60期</div>
         </div>
       </div>
+    </div>
 
     <div class="table-wrapper">
       <table class="trend-table" border="1" id="trend-table">

html/qlc.html

@@ -56,14 +56,12 @@
       </div>
     </nav>
 
+    <div class="breadcrumb-bigbox">
       <div class="breadcrumb-bar">
-      <a href="javascript:history.back();"
+        <a href="javascript:history.back();"><i class="layui-icon layui-icon-left"></i> 返回</a>
-        ><i class="layui-icon layui-icon-left"></i> 返回</a
-      >
         <span>/</span>
         <span>七乐彩走势图</span>
       </div>
-
       <div class="page-title-bar">
         <div class="page-title">七乐彩走势图</div>
         <div class="qishu">
@@ -73,6 +71,7 @@
         <div class="qishu-but" data-count="60">60期</div>
         </div>
       </div>
+    </div>
 
     <div class="table-wrapper">
       <table class="trend-table" border="1" id="trend-table">

html/qxc.html

@@ -56,14 +56,12 @@
       </div>
     </nav>
 
+    <div class="breadcrumb-bigbox">
       <div class="breadcrumb-bar">
-      <a href="javascript:history.back();"
+        <a href="javascript:history.back();"><i class="layui-icon layui-icon-left"></i> 返回</a>
-        ><i class="layui-icon layui-icon-left"></i> 返回</a
-      >
         <span>/</span>
         <span>七星彩走势图</span>
       </div>
-
       <div class="page-title-bar">
         <div class="page-title">七星彩走势图</div>
         <div class="qishu">
@@ -73,6 +71,7 @@
         <div class="qishu-but" data-count="60">60期</div>
         </div>
       </div>
+    </div>
 
     <div class="table-wrapper">
       <table class="trend-table" border="1" id="trend-table">

html/ssq.html

@@ -56,14 +56,12 @@
       </div>
     </nav>
 
+    <div class="breadcrumb-bigbox">
       <div class="breadcrumb-bar">
-      <a href="javascript:history.back();"
+        <a href="javascript:history.back();"><i class="layui-icon layui-icon-left"></i> 返回</a>
-        ><i class="layui-icon layui-icon-left"></i> 返回</a
-      >
         <span>/</span>
         <span>双色球走势图</span>
       </div>
-
       <div class="page-title-bar">
         <div class="page-title">双色球走势图</div>
         <div class="qishu">
@@ -73,6 +71,7 @@
         <div class="qishu-but" data-count="60">60期</div>
         </div>
       </div>
+    </div>
 
     <div class="table-wrapper">
       <table class="trend-table" border="1" id="trend-table">

public/css/trend.css

@@ -7,10 +7,17 @@
 /* ----------------------------------------------------------
    1. Breadcrumb Bar
    ---------------------------------------------------------- */
-.breadcrumb-bar {
+
-  max-width: 1420px;
+.breadcrumb-bigbox {
   margin: 0 auto;
-  padding: 14px 20px 0;
+  margin-top: 30px;
+  width: 1380px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.breadcrumb-bar {
   font-size: 13px;
   color: var(--text-muted);
   display: flex;
@@ -40,14 +47,12 @@
    2. Page Title Bar & Period Selector
    ---------------------------------------------------------- */
 .page-title-bar {
-  max-width: 1420px;
+  box-sizing: border-box;
-  margin: 0 auto;
-  padding: 10px 20px 14px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
 }
 
 .page-title {
@@ -63,6 +68,8 @@
   display: flex;
   align-items: center;
   gap: 8px;
+  margin-left: auto;
+  flex-shrink: 0;
 }
 
 .qishu-but {
@@ -352,11 +359,35 @@
   font-size: 14px !important;
 }
 
-.zone-p1 { background: #e74c3c !important; color: #fff !important; font-size: 14px !important; }
+.zone-p1 {
-.zone-p2 { background: #f39c12 !important; color: #fff !important; font-size: 14px !important; }
+  background: #e74c3c !important;
-.zone-p3 { background: #27ae60 !important; color: #fff !important; font-size: 14px !important; }
+  color: #fff !important;
-.zone-p4 { background: #2980b9 !important; color: #fff !important; font-size: 14px !important; }
+  font-size: 14px !important;
-.zone-p5 { background: #8e44ad !important; color: #fff !important; font-size: 14px !important; }
+}
+
+.zone-p2 {
+  background: #f39c12 !important;
+  color: #fff !important;
+  font-size: 14px !important;
+}
+
+.zone-p3 {
+  background: #27ae60 !important;
+  color: #fff !important;
+  font-size: 14px !important;
+}
+
+.zone-p4 {
+  background: #2980b9 !important;
+  color: #fff !important;
+  font-size: 14px !important;
+}
+
+.zone-p5 {
+  background: #8e44ad !important;
+  color: #fff !important;
+  font-size: 14px !important;
+}
 
 .zone-g1 {
   background: linear-gradient(135deg, #e74c3c, #f15a22) !important;
@@ -372,9 +403,24 @@
   letter-spacing: 1px;
 }
 
-.zone-z1 { background: #e74c3c !important; color: #fff !important; font-size: 14px !important; }
+.zone-z1 {
-.zone-z2 { background: #27ae60 !important; color: #fff !important; font-size: 14px !important; }
+  background: #e74c3c !important;
-.zone-z3 { background: #3b6fd4 !important; color: #fff !important; font-size: 14px !important; }
+  color: #fff !important;
+  font-size: 14px !important;
+}
+
+.zone-z2 {
+  background: #27ae60 !important;
+  color: #fff !important;
+  font-size: 14px !important;
+}
+
+.zone-z3 {
+  background: #3b6fd4 !important;
+  color: #fff !important;
+  font-size: 14px !important;
+}
+
 .zone-sp {
   background: linear-gradient(135deg, #f5a623, #fdb933) !important;
   color: #fff !important;
@@ -950,6 +996,11 @@
     gap: 10px;
   }
 
+  .qishu {
+    margin-left: 0;
+    flex-shrink: 1;
+  }
+
   .page-title {
     font-size: 17px;
   }