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}
.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=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[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=>{