xinyouhe/zhaopin-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

箭头移到页面两侧悬浮(圆形,脱离内容区); 左右点击循环切换

Browse Source
This commit is contained in:
mzl92
2026-08-27 15:14:44 +08:00
parent 2a4060ae6d
commit 17a741fd78
2 changed files with 10 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+7 -9
View File
@@ -54,9 +54,9 @@ tr:hover td{background:#f8fafc;cursor:pointer}
.slider{position:relative;overflow:hidden;margin-bottom:4px} .slider{position:relative;overflow:hidden;margin-bottom:4px}
.sliderTrack{display:flex;transition:transform .35s ease;width:100%} .sliderTrack{display:flex;transition:transform .35s ease;width:100%}
.pane{flex:0 0 100%;min-width:100%;padding:2px 14px 2px 2px} .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{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)} .navArrow:hover{background:#fff;color:var(--pri);border-color:var(--pri)}
.navArrow.left{left:-4px}.navArrow.right{right:6px} .navArrow.left{left:10px}.navArrow.right{right:10px}
.dots{text-align:center;margin:2px 0 14px} .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{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} .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=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c])); const esc=s=>String(s??'').replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
// ---------- 左右滑动双屏(0=看板 1=列表) ---------- // ---------- 左右滑动双屏(0=看板 1=列表) ----------
let curPane=0; let curPane=0;
function slide(d){setPane(curPane+d)} function slide(d){setPane((curPane+d+2)%2)} // 循环: 0←→1 互相绕
function setPane(n){ function setPane(n){
n=Math.max(0,Math.min(1,n));curPane=n; curPane=(n+2)%2;
$('sliderTrack').style.transform=`translateX(-${n*100}%)`; $('sliderTrack').style.transform=`translateX(-${curPane*100}%)`;
document.querySelectorAll('.dot').forEach((el,i)=>el.classList.toggle('on',i===n)); document.querySelectorAll('.dot').forEach((el,i)=>el.classList.toggle('on',i===curPane));
document.querySelector('.navArrow.left').style.visibility=n===0?'hidden':'visible';
document.querySelector('.navArrow.right').style.visibility=n===1?'hidden':'visible';
setTimeout(()=>charts.forEach(c=>c.resize()),400); setTimeout(()=>charts.forEach(c=>c.resize()),400);
} }
document.addEventListener('keydown',e=>{ document.addEventListener('keydown',e=>{
scripts/smoke.js
+3 -2
View File
@@ -47,8 +47,9 @@ const sleep = (ms) => new Promise(r => setTimeout(r, ms));
console.log('== 4. 候选人列表与筛选(滑动到第二屏) =='); console.log('== 4. 候选人列表与筛选(滑动到第二屏) ==');
await p.evaluate(() => setPane(1)); await sleep(500); await p.evaluate(() => setPane(1)); await sleep(500);
ok('滑到列表屏(箭头状态)', await p.evaluate(() => document.querySelector('.navArrow.left').style.visibility === 'visible')); const loopCheck = await p.evaluate(() => { setPane(1); slide(1); return document.getElementById('sliderTrack').style.transform; });
await sleep(300); ok('循环滑动(末屏点右绕回首屏)', loopCheck === 'translateX(0%)');
await p.evaluate(() => setPane(1)); await sleep(400);
const rows1 = await p.evaluate(() => document.querySelectorAll('#tbody tr').length); const rows1 = await p.evaluate(() => document.querySelectorAll('#tbody tr').length);
ok(`默认列表有数据(${rows1}行)`, rows1 > 0); ok(`默认列表有数据(${rows1}行)`, rows1 > 0);
await p.selectOption('#q_level', '推荐'); await p.selectOption('#q_level', '推荐');