四个合约页面统一添加表头

This commit is contained in:
fish
2026-07-24 17:43:46 +08:00
parent 4c3dd86c37
commit d95aa8d215
4 changed files with 56 additions and 5 deletions
+14 -1
View File
@@ -54,6 +54,11 @@
.nav-link { color: var(--sub); font-size: 0.82rem; margin-bottom: 4px; }
.nav-link a { color: #3b82f6; text-decoration: none; }
.nav-link a:hover { text-decoration: underline; }
.section { margin-bottom: 8px; }
.section h2 { font-size: 1.1rem; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; margin: 28px 0 10px; padding: 4px 0; }
.section h2 .arrow { display: inline-block; transition: transform .2s; font-size: 0.8rem; }
.section.collapsed h2 .arrow { transform: rotate(-90deg); }
.section.collapsed table { display: none; }
</style>
</head>
<body>
@@ -64,6 +69,8 @@
<p class="sub"><a href="index.html">返回总览</a> &nbsp;|&nbsp; <span>FG2609</span> &nbsp;|&nbsp; <a href="fg2610.html">FG2610</a> &nbsp;|&nbsp; <a href="fg2611.html">FG2611</a> &nbsp;|&nbsp; <a href="fg2701.html">FG2701</a></p>
<p class="formula">振幅算法:近 5 日均振幅 = 过去 5 个交易日 (最高 − 最低) 的均值,结果四舍五入取整</p>
<div class="section" id="sec-fg2609">
<h2 onclick="toggleSection('sec-fg2609')"><span class="arrow"></span> FG2609 玻璃</h2>
<table>
<tr><th>日期</th><th>星期</th><th>开盘</th><th>收盘</th><th>最高</th><th>最低</th><th>最高最低差价</th><th>振幅</th></tr>
<tr><td>2026/7/1</td><td>周三</td><td>972</td><td>961</td><td>972</td><td>956</td><td>16</td><td class="na">-</td></tr>
@@ -86,6 +93,7 @@
<tr><td>2026/7/24</td><td>周五</td><td>900</td><td>908</td><td>912</td><td>891</td><td>21</td><td class="amp-cell">23</td></tr>
<tr><td>2026/7/27</td><td>周一</td><td class="na">-</td><td class="na">-</td><td class="na">-</td><td class="na">-</td><td>0</td><td class="amp-cell">20</td></tr>
</table>
</div>
<div class="drawer-overlay" id="overlay" onclick="closeDrawer()"></div>
<div class="drawer" id="drawer">
@@ -119,6 +127,10 @@ function toggleTheme() {
} catch(e) {}
})();
function toggleSection(id) {
document.getElementById(id).classList.toggle('collapsed');
}
var activeRow = null;
function closeDrawer() {
document.getElementById('overlay').classList.remove('show');
@@ -131,7 +143,8 @@ document.querySelectorAll('.amp-cell').forEach(function(cell) {
var row = cell.parentElement;
var tbl = row.closest('table');
var rows = tbl.querySelectorAll('tr');
var product = 'FG2609 玻璃';
var h2 = tbl.closest('.section').querySelector('h2');
var product = h2.childNodes[h2.childNodes.length - 1].textContent.trim();
var ranges = [];
for (var i = 1; i < rows.length; i++) {
+13 -2
View File
@@ -37,7 +37,10 @@
.toggle-btn:hover { opacity: 0.8; }
.section { margin-bottom: 8px; }
.section h2 { font-size: 1.1rem; margin: 28px 0 10px; padding: 4px 0; }
.section h2 { font-size: 1.1rem; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; margin: 28px 0 10px; padding: 4px 0; }
.section h2 .arrow { display: inline-block; transition: transform .2s; font-size: 0.8rem; }
.section.collapsed h2 .arrow { transform: rotate(-90deg); }
.section.collapsed table { display: none; }
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 99; display: none; }
.drawer-overlay.show { display: block; }
@@ -64,6 +67,8 @@
<p class="sub"><a href="index.html">返回总览</a> &nbsp;|&nbsp; <a href="fg2609.html">FG2609</a> &nbsp;|&nbsp; <span>FG2610</span> &nbsp;|&nbsp; <a href="fg2611.html">FG2611</a> &nbsp;|&nbsp; <a href="fg2701.html">FG2701</a></p>
<p class="formula">振幅算法:近 5 日均振幅 = 过去 5 个交易日 (最高 − 最低) 的均值,结果四舍五入取整</p>
<div class="section" id="sec-fg2610">
<h2 onclick="toggleSection('sec-fg2610')"><span class="arrow"></span> FG2610 玻璃</h2>
<table>
<tr><th>日期</th><th>星期</th><th>开盘</th><th>收盘</th><th>最高</th><th>最低</th><th>最高最低差价</th><th>振幅</th></tr>
<tr><td>2026/7/1</td><td>周三</td><td>1015</td><td>1007</td><td>1015</td><td>1000</td><td>15</td><td class="na">-</td></tr>
@@ -86,6 +91,7 @@
<tr><td>2026/7/24</td><td>周五</td><td>938</td><td>944</td><td>947</td><td>928</td><td>19</td><td class="amp-cell">21</td></tr>
<tr><td>2026/7/27</td><td>周一</td><td class="na">-</td><td class="na">-</td><td class="na">-</td><td class="na">-</td><td>0</td><td class="amp-cell">18</td></tr>
</table>
</div>
<div class="drawer-overlay" id="overlay" onclick="closeDrawer()"></div>
<div class="drawer" id="drawer">
@@ -119,6 +125,10 @@ function toggleTheme() {
} catch(e) {}
})();
function toggleSection(id) {
document.getElementById(id).classList.toggle('collapsed');
}
var activeRow = null;
function closeDrawer() {
document.getElementById('overlay').classList.remove('show');
@@ -131,7 +141,8 @@ document.querySelectorAll('.amp-cell').forEach(function(cell) {
var row = cell.parentElement;
var tbl = row.closest('table');
var rows = tbl.querySelectorAll('tr');
var product = 'FG2610 玻璃';
var h2 = tbl.closest('.section').querySelector('h2');
var product = h2.childNodes[h2.childNodes.length - 1].textContent.trim();
var ranges = [];
for (var i = 1; i < rows.length; i++) {
+15 -1
View File
@@ -52,6 +52,12 @@
.drawer .result b { font-size: 1.1rem; }
.drawer .close-btn { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--sub); line-height: 1; }
.drawer .close-btn:hover { color: var(--fg); }
.section { margin-bottom: 8px; }
.section h2 { font-size: 1.1rem; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; margin: 28px 0 10px; padding: 4px 0; }
.section h2 .arrow { display: inline-block; transition: transform .2s; font-size: 0.8rem; }
.section.collapsed h2 .arrow { transform: rotate(-90deg); }
.section.collapsed table { display: none; }
</style>
</head>
<body>
@@ -62,6 +68,8 @@
<p class="sub"><a href="index.html">返回总览</a> &nbsp;|&nbsp; <a href="fg2609.html">FG2609</a> &nbsp;|&nbsp; <a href="fg2610.html">FG2610</a> &nbsp;|&nbsp; <span>FG2611</span> &nbsp;|&nbsp; <a href="fg2701.html">FG2701</a></p>
<p class="formula">振幅算法:近 5 日均振幅 = 过去 5 个交易日 (最高 − 最低) 的均值,结果四舍五入取整</p>
<div class="section" id="sec-fg2611">
<h2 onclick="toggleSection('sec-fg2611')"><span class="arrow"></span> FG2611 玻璃</h2>
<table>
<tr><th>日期</th><th>星期</th><th>开盘</th><th>收盘</th><th>最高</th><th>最低</th><th>最高最低差价</th><th>振幅</th></tr>
<tr><td>2026/7/1</td><td>周三</td><td>1011</td><td>1001</td><td>1011</td><td>994</td><td>17</td><td class="na">-</td></tr>
@@ -84,6 +92,7 @@
<tr><td>2026/7/24</td><td>周五</td><td>931</td><td>939</td><td>941</td><td>922</td><td>19</td><td class="amp-cell">19</td></tr>
<tr><td>2026/7/27</td><td>周一</td><td class="na">-</td><td class="na">-</td><td class="na">-</td><td class="na">-</td><td>0</td><td class="amp-cell">16</td></tr>
</table>
</div>
<div class="drawer-overlay" id="overlay" onclick="closeDrawer()"></div>
<div class="drawer" id="drawer">
@@ -117,6 +126,10 @@ function toggleTheme() {
} catch(e) {}
})();
function toggleSection(id) {
document.getElementById(id).classList.toggle('collapsed');
}
var activeRow = null;
function closeDrawer() {
document.getElementById('overlay').classList.remove('show');
@@ -129,7 +142,8 @@ document.querySelectorAll('.amp-cell').forEach(function(cell) {
var row = cell.parentElement;
var tbl = row.closest('table');
var rows = tbl.querySelectorAll('tr');
var product = 'FG2611 玻璃';
var h2 = tbl.closest('.section').querySelector('h2');
var product = h2.childNodes[h2.childNodes.length - 1].textContent.trim();
var ranges = [];
for (var i = 1; i < rows.length; i++) {
+14 -1
View File
@@ -51,6 +51,11 @@
.drawer .close-btn:hover { color: var(--fg); }
.amp-cell { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.amp-cell:hover { color: #3b82f6; }
.section { margin-bottom: 8px; }
.section h2 { font-size: 1.1rem; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; margin: 28px 0 10px; padding: 4px 0; }
.section h2 .arrow { display: inline-block; transition: transform .2s; font-size: 0.8rem; }
.section.collapsed h2 .arrow { transform: rotate(-90deg); }
.section.collapsed table { display: none; }
</style>
</head>
<body>
@@ -61,6 +66,8 @@
<p class="sub"><a href="index.html">返回总览</a> &nbsp;|&nbsp; <a href="fg2609.html">FG2609</a> &nbsp;|&nbsp; <a href="fg2610.html">FG2610</a> &nbsp;|&nbsp; <a href="fg2611.html">FG2611</a> &nbsp;|&nbsp; <span>FG2701</span></p>
<p class="formula">振幅算法:近 5 日均振幅 = 过去 5 个交易日 (最高 − 最低) 的均值,结果四舍五入取整</p>
<div class="section" id="sec-fg2701">
<h2 onclick="toggleSection('sec-fg2701')"><span class="arrow"></span> FG2701 玻璃</h2>
<table>
<tr><th>日期</th><th>星期</th><th>开盘</th><th>收盘</th><th>最高</th><th>最低</th><th>最高最低差价</th><th>振幅</th></tr>
<tr><td>2026/7/1</td><td>周三</td><td>1059</td><td>1054</td><td>1062</td><td>1050</td><td>12</td><td class="na">-</td></tr>
@@ -83,6 +90,7 @@
<tr><td>2026/7/24</td><td>周五</td><td>978</td><td>985</td><td>987</td><td>972</td><td>15</td><td class="amp-cell">17</td></tr>
<tr><td>2026/7/27</td><td>周一</td><td class="na">-</td><td class="na">-</td><td class="na">-</td><td class="na">-</td><td>0</td><td class="amp-cell">14</td></tr>
</table>
</div>
<div class="drawer-overlay" id="overlay" onclick="closeDrawer()"></div>
<div class="drawer" id="drawer">
@@ -116,6 +124,10 @@ function toggleTheme() {
} catch(e) {}
})();
function toggleSection(id) {
document.getElementById(id).classList.toggle('collapsed');
}
var activeRow = null;
function closeDrawer() {
document.getElementById('overlay').classList.remove('show');
@@ -144,7 +156,8 @@ document.querySelectorAll('.amp-cell').forEach(function(cell) {
if (start < 0) return;
var ampVal = cell.textContent.trim();
document.getElementById('drawer-title').textContent = 'FG2701 玻璃';
var h2 = tbl.closest('.section').querySelector('h2');
document.getElementById('drawer-title').textContent = h2.childNodes[h2.childNodes.length - 1].textContent.trim();
document.getElementById('drawer-date').textContent = '目标日期: ' + ranges[idx].date + ' ' + ranges[idx].wk + ' 振幅 ' + ampVal;
var html = '<tr><td>日期</td><td>最高−最低</td></tr>';