振幅hover提示改为点击弹出右侧抽屉展示计算明细

振幅锁仓策略/index.html

@@ -34,8 +34,21 @@
   .section h2 { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
   .section h2 .arrow { display: inline-block; transition: transform .2s; font-size: 0.8rem; }
   .section.collapsed h2 .arrow { transform: rotate(-90deg); }
-  .tip { position: fixed; pointer-events: none; z-index: 100; background: var(--th-bg); color: var(--fg); border: 1px solid var(--th-border); padding: 8px 12px; border-radius: 6px; font-size: 0.8rem; line-height: 1.6; white-space: pre; box-shadow: 0 4px 12px rgba(0,0,0,.25); display: none; max-width: 220px; }
+  .drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 99; display: none; }
-  .section.collapsed table { display: none; }
+  .drawer-overlay.open { display: block; }
+  .drawer { position: fixed; top: 0; right: 0; width: 340px; height: 100%; background: var(--bg); border-left: 1px solid var(--th-border); z-index: 100; padding: 24px; transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; box-shadow: -4px 0 20px rgba(0,0,0,.15); }
+  .drawer.open { transform: translateX(0); }
+  .drawer h3 { font-size: 1rem; margin-bottom: 4px; }
+  .drawer .date-label { color: var(--sub); font-size: 0.82rem; margin-bottom: 16px; }
+  .drawer .calc-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-bottom: 14px; }
+  .drawer .calc-table td { padding: 4px 8px; border: 1px solid var(--td-border); text-align: center; }
+  .drawer .calc-table tr:first-child td { background: var(--th-bg); font-weight: 600; color: var(--th-fg); }
+  .drawer .result { font-size: 0.85rem; line-height: 1.8; color: var(--fg); }
+  .drawer .result b { font-size: 1.1rem; }
+  .drawer .close { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--sub); line-height: 1; }
+  .drawer .close:hover { color: var(--fg); }
+  .amp-clickable { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
+  .amp-clickable:hover { color: #3b82f6; }
   .toggle:hover { opacity: 0.8; }
 </style>
 </head>
@@ -84,68 +97,53 @@
 <tr><td>2026/7/9</td><td>994</td><td>987</td><td>994</td><td>981</td><td>13</td><td>17</td></tr>
 <tr><td>2026/7/10</td><td>986</td><td>996</td><td>1004</td><td>983</td><td>21</td><td>17</td></tr>
 <tr><td>2026/7/13</td><td>996</td><td>980</td><td>1001</td><td>980</td><td>21</td><td>17</td></tr>
-<tr><td>2026/7/14</td><td>982</td><td>983</td><td>986</td><td>974</td><td>12</td><td>18</td></tr>
+
-<tr><td>2026/7/15</td><td>982</td><td>979</td><td>988</td><td>975</td><td>13</td><td>16</td></tr>
+<div class="drawer-overlay" id="overlay" onclick="closeDrawer()"></div>
-<tr><td>2026/7/16</td><td>979</td><td>960</td><td>982</td><td>957</td><td>25</td><td>16</td></tr>
+<div class="drawer" id="drawer">
-<tr><td>2026/7/17</td><td>962</td><td>932</td><td>962</td><td>931</td><td>31</td><td>18</td></tr>
+  <button class="close" onclick="closeDrawer()">&times;</button>
-<tr><td>2026/7/20</td><td>934</td><td>926</td><td>939</td><td>924</td><td>15</td><td>20</td></tr>
+  <h3 id="drawer-title"></h3>
-<tr><td>2026/7/21</td><td>929</td><td>934</td><td>941</td><td>926</td><td>15</td><td>19</td></tr>
+  <p class="date-label" id="drawer-date"></p>
-<tr><td>2026/7/22</td><td>936</td><td>939</td><td>945</td><td>929</td><td>16</td><td>20</td></tr>
+  <table class="calc-table" id="drawer-table"></table>
-<tr><td>2026/7/23</td><td>938</td><td>931</td><td>941</td><td>925</td><td>16</td><td>20</td></tr>
+  <div class="result" id="drawer-result"></div>
-<tr><td>2026/7/24</td><td class="na">-</td><td class="na">-</td><td class="na">-</td><td class="na">-</td><td>0</td><td>19</td></tr>
-</table>
 </div>
 
-
-<div class="tip" id="tip"></div>
 <script>
-var btn = document.getElementById('toggle');
+// 绑定振幅点击 → 抽屉
-function setTheme(dark) {
+function closeDrawer() {
-  document.documentElement.setAttribute('data-theme', dark ? 'dark' : '');
+  document.getElementById('overlay').classList.remove('open');
-  btn.textContent = dark ? '☀️ 日间' : '🌙 暗夜';
+  document.getElementById('drawer').classList.remove('open');
-  localStorage.setItem('theme', dark ? 'dark' : 'light');
 }
-function toggleTheme() { setTheme(!document.documentElement.hasAttribute('data-theme')); }
-var saved = localStorage.getItem('theme');
-if (saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)) setTheme(true);
-function toggleSection(id) { document.getElementById(id).classList.toggle('collapsed'); }
-
-// 振幅 tooltip: 展示近 5 日计算明细
-var tip = document.getElementById('tip');
 document.querySelectorAll('table').forEach(function(tbl) {
   var rows = tbl.querySelectorAll('tr');
+  var product = tbl.closest('.section').querySelector('h2').textContent.replace(/[▼▶]/,'').trim();
   var ranges = [];
   for (var i = 1; i < rows.length; i++) {
+    var cells = rows[i].querySelectorAll('td');
     if (cells.length < 8) continue;
+    var date = cells[0].textContent.trim();
+    var wk = cells[1].textContent.trim();
     var diff = parseInt(cells[6].textContent) || 0;
-    ranges.push({ date: date, diff: diff });
+    ranges.push({ date: date, wk: wk, diff: diff });
     var ampCell = cells[7];
     var ampVal = parseInt(ampCell.textContent);
     if (isNaN(ampVal)) continue;
+    ampCell.classList.add('amp-clickable');
     (function(cell, idx) {
       var start = idx - 5;
       if (start < 0) return;
-      var parts = [];
+      cell.addEventListener('click', function() {
-      var sum = 0;
+        document.getElementById('drawer-title').textContent = product;
-      for (var j = start; j < idx; j++) {
+        document.getElementById('drawer-date').textContent = '目标日期: ' + ranges[idx].date + ' ' + ranges[idx].wk + ' 振幅 ' + ampVal;
-        parts.push(ranges[j].date + ': ' + ranges[j].diff);
+        var html = '<tr><td>日期</td><td>最高−最低</td></tr>';
-        sum += ranges[j].diff;
+        var sum = 0;
-      }
+        for (var j = start; j < idx; j++) {
-      var text = parts.join('\n') + '\n───────\n合计 ' + sum + ' ÷ 5 = ' + (sum / 5).toFixed(1) + '\n四舍五入 → ' + Math.round(sum / 5);
+          html += '<tr><td>' + ranges[j].date + ' ' + ranges[j].wk + '</td><td>' + ranges[j].diff + '</td></tr>';
-      cell.style.cursor = 'help';
+          sum += ranges[j].diff;
-      cell.addEventListener('mouseenter', function(e) {
+        }
-        tip.textContent = text;
+        document.getElementById('drawer-table').innerHTML = html;
-        tip.style.display = 'block';
+        document.getElementById('drawer-result').innerHTML = '合计 <b>' + sum + '</b> ÷ 5 = <b>' + (sum/5).toFixed(1) + '</b><br>四舍五入 → <b>' + Math.round(sum/5) + '</b>';
-      });
+        document.getElementById('overlay').classList.add('open');
-      cell.addEventListener('mousemove', function(e) {
+        document.getElementById('drawer').classList.add('open');
-        var x = e.clientX + 14, y = e.clientY + 14;
-        if (x + 230 > window.innerWidth) x = e.clientX - 230;
-        if (y + 120 > window.innerHeight) y = e.clientY - 130;
-        tip.style.left = x + 'px';
-        tip.style.top = y + 'px';
-      });
-      cell.addEventListener('mouseleave', function() {
-        tip.style.display = 'none';
       });
     })(ampCell, ranges.length - 1);
   }