鑲＄エ澶氳偂楠岃瘉宸ュ叿路缃戦〉鐗?/title> <style> :root{--bg:#f5f7fa;--card:#fff;--header:#2c3e50;--accent:#0066cc;--red:#d93025;--green:#188038;--border:#e0e4e8;--text:#333;--muted:#888;--radius:12px;--shadow:0 2px 10px rgba(0,0,0,.08)} *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} body{background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--text);padding-bottom:40px} header{background:var(--header);color:#fff;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;position:sticky;top:0;z-index:20} header h1{font-size:18px;font-weight:700} header .status{font-size:12px;opacity:.9;display:flex;align-items:center;gap:6px} .status-dot{width:8px;height:8px;border-radius:50%;background:#ffaa00;display:inline-block} .status-dot.ok{background:#4caf50} .status-dot.err{background:#f44336} .toolbar{background:var(--card);padding:12px 14px;margin:12px 12px 0;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-wrap:wrap;gap:8px;align-items:center} .toolbar input{font-size:14px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;flex:1 1 130px;min-width:110px} .toolbar input[type=date]{flex:0 1 150px} .toolbar button{background:var(--accent);color:#fff;border:none;padding:9px 14px;border-radius:8px;font-size:14px;cursor:pointer;transition:opacity .15s;white-space:nowrap} .toolbar button:active{opacity:.7} .toolbar button.secondary{background:#5f7d9c} .toolbar button.danger{background:#c62828} .toolbar button.green{background:var(--green)} .stats{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 12px 0;padding:10px 14px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);font-size:13px;font-weight:600} .stats span{white-space:nowrap} .stat-win{color:var(--green)} .stat-win.hot{color:var(--red)} .table-wrap{margin:12px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow-x:auto;-webkit-overflow-scrolling:touch} table{border-collapse:collapse;width:100%;min-width:960px;font-size:13px} th,td{padding:9px 10px;border-bottom:1px solid var(--border);text-align:center;white-space:nowrap} th{background:#f0f3f7;font-weight:700;position:sticky;top:0;z-index:2} td.name,td.note{text-align:left} .td-code{font-family:Consolas,monospace;font-weight:600} .td-target{font-weight:700} .td-target.yes{color:var(--red)} .td-target.pending{color:var(--accent)} .td-target.no{color:var(--green)} .td-pct{font-family:Consolas,monospace} .td-pct.positive{color:var(--red)} .td-pct.negative{color:var(--green)} .note-cell{max-width:150px;overflow:hidden;text-overflow:ellipsis} .btn-del{background:none;border:none;color:#c62828;cursor:pointer;font-size:16px;padding:2px 6px} .modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;align-items:center;justify-content:center;padding:16px} .modal.active{display:flex} .modal-content{background:#fff;border-radius:14px;width:100%;max-width:860px;max-height:90vh;overflow:auto;padding:18px} .modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} .modal-header h2{font-size:17px} .modal-close{background:none;border:none;font-size:24px;cursor:pointer;line-height:1} .sector-bar{display:flex;gap:16px;margin-bottom:14px;font-size:14px;flex-wrap:wrap} .sector-bar .ind{color:#cc6600;font-weight:600} .sector-bar .con{color:var(--accent);font-weight:600} .detail-table{width:100%;min-width:600px;font-size:13px;border-collapse:collapse} .detail-table th,.detail-table td{padding:7px 8px;border-bottom:1px solid var(--border);text-align:center} .detail-summary{margin-top:14px;font-size:15px;font-weight:700;text-align:center;padding:10px;background:#f9fafb;border-radius:8px} .toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;padding:10px 18px;border-radius:22px;font-size:14px;z-index:100;opacity:0;transition:opacity .3s;pointer-events:none} .toast.show{opacity:1} @media(max-width:640px){ header h1{font-size:16px} .toolbar input{flex:1 1 100%;min-width:100%} .toolbar button{flex:1 1 auto} } </style> </head> <body> <header> <h1>馃搱鑲＄エ澶氳偂楠岃瘉宸ュ叿</h1> <div class="status"><span class="status-dot" id="statusDot"></span><span id="statusText">鏁版嵁婧愬垵濮嬪寲涓?..</span></div> </header> <div class="toolbar"> <input type="text" id="codeInput" placeholder="鑲＄エ鍚嶇О/浠ｇ爜锛屽 600519" autocomplete="off"> <input type="date" id="dateInput"> <button id="btnAdd">娣诲姞</button> <button class="secondary" id="btnRefresh">鍏ㄩ儴楠岃瘉</button> <button class="secondary" id="btnSave">淇濆瓨閰嶇疆</button> <label class="secondary" style="padding:9px 14px;border-radius:8px;background:#5f7d9c;color:#fff;cursor:pointer;font-size:14px">瀵煎叆閰嶇疆<input type="file" id="fileImport" accept=".json" style="display:none"></label> </div> <div class="stats" id="statsBar"> <span id="statCount">0 鏀偂绁?/span> <span class="stat-win" id="statClose">鏀剁洏浠疯儨鐜? --</span> <span class="stat-win" id="statHigh3">鏈€楂樹环鑳滅巼鈪? --</span> <span class="stat-win" id="statHigh4">鏈€楂樹环鑳滅巼鈪? --</span> <span class="stat-win" id="statHigh5">鏈€楂樹环鑳滅巼鈪? --</span> </div> <div class="table-wrap"> <table> <thead><tr> <th>鎿嶄綔</th><th>鑲＄エ浠ｇ爜</th><th>鑲＄エ鍚嶇О</th><th>鍩哄噯鏃?/th><th>鍩哄噯浠?/th><th>Day2</th><th>Day3</th><th>Day4</th><th>Day5</th><th>杈炬垚鐩爣</th><th>鏈€楂樹环</th><th>澶囨敞</th> </tr></thead> <tbody id="tableBody"></tbody> </table> </div> <div class="modal" id="detailModal"><div class="modal-content"><div class="modal-header"><h2 id="detailTitle">璇︽儏</h2><button class="modal-close" id="btnCloseModal">脳</button></div><div class="sector-bar" id="detailSector"></div><div style="overflow-x:auto"><table class="detail-table" id="detailTable"><thead><tr><th>浜ゆ槗鏃?/th><th>鏃ユ湡</th><th>寮€鐩?/th><th>鏈€楂?/th><th>鏈€浣?/th><th>鏀剁洏</th><th>鎴愪氦閲?/th><th>绱鏀剁泭</th></tr></thead><tbody id="detailBody"></tbody></table></div><div class="detail-summary" id="detailSummary"></div></div></div> <div class="toast" id="toast"></div> <script src="app.js"></script> </body> </html>