新增查下月按钮,优化按钮悬停效果
- 新增"查下月"按钮(getCustomMonthRange(-1)) - 按钮按逻辑排列:查当下 → 查下月 → 查上月 → 查上上月 → 查上上上月 - 按钮 hover 时颜色变亮 + 底部淡白底线,增加 transition 过渡 - 增大 padding 到 14px,按钮间距更舒适 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -330,13 +330,26 @@
|
||||
display: "block",
|
||||
lineHeight: "60px",
|
||||
height: "60px",
|
||||
padding: "0px 10px",
|
||||
padding: "0px 14px",
|
||||
textDecoration: "none",
|
||||
color: "#e5e5e5",
|
||||
cursor: "pointer",
|
||||
border: "none",
|
||||
borderBottom: "2px solid transparent",
|
||||
transition: "color 0.15s, border-bottom-color 0.15s",
|
||||
outline: "none",
|
||||
};
|
||||
Object.assign(button.style, copiedStyles);
|
||||
|
||||
button.addEventListener('mouseenter', () => {
|
||||
button.style.color = "#fff";
|
||||
button.style.borderBottomColor = "rgba(255,255,255,0.4)";
|
||||
});
|
||||
button.addEventListener('mouseleave', () => {
|
||||
button.style.color = "#e5e5e5";
|
||||
button.style.borderBottomColor = "transparent";
|
||||
});
|
||||
|
||||
// 处理点击事件回调
|
||||
if (typeof options.onClick === 'function') {
|
||||
button.addEventListener('click', options.onClick);
|
||||
@@ -413,6 +426,7 @@
|
||||
});
|
||||
const button4 = createQueryButton('查当周', getCurrentWeekRange);
|
||||
const button0 = createQueryButton('查当月', () => getCustomMonthRange(0));
|
||||
const buttonNext = createQueryButton('查下月', () => getCustomMonthRange(-1));
|
||||
const button1 = createQueryButton('查上月', () => getCustomMonthRange(1));
|
||||
const button2 = createQueryButton('查上上月', () => getCustomMonthRange(2));
|
||||
const button3 = createQueryButton('查上上上月', () => getCustomMonthRange(3));
|
||||
@@ -425,6 +439,7 @@
|
||||
container.appendChild(button);
|
||||
container.appendChild(button4);
|
||||
container.appendChild(button0);
|
||||
container.appendChild(buttonNext);
|
||||
container.appendChild(button1);
|
||||
container.appendChild(button2);
|
||||
container.appendChild(button3);
|
||||
|
||||
Reference in New Issue
Block a user