diff --git a/public/index.html b/public/index.html index efc9294..8344444 100644 --- a/public/index.html +++ b/public/index.html @@ -54,9 +54,9 @@ tr:hover td{background:#f8fafc;cursor:pointer} .slider{position:relative;overflow:hidden;margin-bottom:4px} .sliderTrack{display:flex;transition:transform .35s ease;width:100%} .pane{flex:0 0 100%;min-width:100%;padding:2px 14px 2px 2px} -.navArrow{position:absolute;top:46%;transform:translateY(-50%);z-index:5;width:34px;height:58px;border-radius:10px;background:rgba(255,255,255,.92);border:1px solid var(--line);font-size:26px;line-height:1;color:var(--txt);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.1)} -.navArrow:hover{background:#fff;color:var(--pri)} -.navArrow.left{left:-4px}.navArrow.right{right:6px} +.navArrow{position:fixed;top:50%;transform:translateY(-50%);z-index:6;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.95);border:1px solid var(--line);font-size:24px;line-height:1;color:var(--txt);cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.12)} +.navArrow:hover{background:#fff;color:var(--pri);border-color:var(--pri)} +.navArrow.left{left:10px}.navArrow.right{right:10px} .dots{text-align:center;margin:2px 0 14px} .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#cbd5e1;margin:0 5px;cursor:pointer;transition:all .2s} .dot.on{background:var(--pri);width:22px;border-radius:5px} @@ -156,13 +156,11 @@ const $=id=>document.getElementById(id); const esc=s=>String(s??'').replace(/[&<>"]/g,c=>({'&':'&','<':'<','>':'>','"':'"'}[c])); // ---------- 左右滑动双屏(0=看板 1=列表) ---------- let curPane=0; -function slide(d){setPane(curPane+d)} +function slide(d){setPane((curPane+d+2)%2)} // 循环: 0←→1 互相绕 function setPane(n){ - n=Math.max(0,Math.min(1,n));curPane=n; - $('sliderTrack').style.transform=`translateX(-${n*100}%)`; - document.querySelectorAll('.dot').forEach((el,i)=>el.classList.toggle('on',i===n)); - document.querySelector('.navArrow.left').style.visibility=n===0?'hidden':'visible'; - document.querySelector('.navArrow.right').style.visibility=n===1?'hidden':'visible'; + curPane=(n+2)%2; + $('sliderTrack').style.transform=`translateX(-${curPane*100}%)`; + document.querySelectorAll('.dot').forEach((el,i)=>el.classList.toggle('on',i===curPane)); setTimeout(()=>charts.forEach(c=>c.resize()),400); } document.addEventListener('keydown',e=>{ diff --git a/scripts/smoke.js b/scripts/smoke.js index 9793e64..e1e75c5 100644 --- a/scripts/smoke.js +++ b/scripts/smoke.js @@ -47,8 +47,9 @@ const sleep = (ms) => new Promise(r => setTimeout(r, ms)); console.log('== 4. 候选人列表与筛选(滑动到第二屏) =='); await p.evaluate(() => setPane(1)); await sleep(500); - ok('滑到列表屏(箭头状态)', await p.evaluate(() => document.querySelector('.navArrow.left').style.visibility === 'visible')); - await sleep(300); + const loopCheck = await p.evaluate(() => { setPane(1); slide(1); return document.getElementById('sliderTrack').style.transform; }); + ok('循环滑动(末屏点右绕回首屏)', loopCheck === 'translateX(0%)'); + await p.evaluate(() => setPane(1)); await sleep(400); const rows1 = await p.evaluate(() => document.querySelectorAll('#tbody tr').length); ok(`默认列表有数据(${rows1}行)`, rows1 > 0); await p.selectOption('#q_level', '推荐');