From 28a0cfb9e69df16bfbb51f89368521dc1f4215f0 Mon Sep 17 00:00:00 2001 From: "CSSC-WORK\\murmur" Date: Mon, 9 Dec 2024 10:08:23 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=BA=8F=E5=8F=B7=E4=BD=9C?= =?UTF-8?q?=E4=B8=BA=E6=B0=B4=E5=8D=B0=E8=83=8C=E6=99=AF=EF=BC=8C=E6=96=B9?= =?UTF-8?q?=E4=BE=BF=E8=AF=86=E5=88=AB=E6=8C=87=E4=BB=A4=E9=A1=BA=E5=BA=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- visa-scpi-example/index.html | 26 +++++++++++++++++++++----- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/visa-scpi-example/index.html b/visa-scpi-example/index.html index 8cffb15..5f73dec 100644 --- a/visa-scpi-example/index.html +++ b/visa-scpi-example/index.html @@ -18,6 +18,7 @@ gap: 10px; } .command-row { + position: relative; box-sizing: border-box; height: inherit; /* margin: 10px 0; */ @@ -30,6 +31,17 @@ /* width: calc(30% - 20px); */ } + .command-row::before { + content: attr(data-index); + position: absolute; + right: 50%; + top: 20%; + transform: translateY(-50%); + font-size: 40px; + color: rgba(0, 0, 0, 0.1); + pointer-events: none; + z-index: 1; + } .comment-input { display: inline-block; width: 100%; @@ -112,6 +124,10 @@ .toast.error { background-color: #f44336; } + + .command-row.active { + background-color: rgba(173, 216, 230, 0.7) !important; + } @@ -127,16 +143,17 @@ async function loadCommands() { const container = document.getElementById('commands-container'); - container.innerHTML = ''; + container.innerHTML = ''; const response = await fetch('commands.json'); commandsData = await response.json(); const commentsResponse = await fetch('comments.json'); const comments = await commentsResponse.json(); - commandsData.forEach(({ command, value }) => { + commandsData.forEach(({ command, value }, index) => { const row = document.createElement('div'); row.className = 'command-row'; + row.setAttribute('data-index', index + 1); const commentDisplay = document.createElement('span'); commentDisplay.className = 'comment-input'; @@ -171,11 +188,10 @@ input.type = 'number'; input.value = value; input.onfocus = () => { - // 天蓝色高亮所在div - row.style.backgroundColor = 'lightblue'; + row.classList.add('active'); }; input.onblur = () => { - row.style.backgroundColor = ''; + row.classList.remove('active'); }; // 与原值比较，变化则高亮