Skip to content

Commit e14eec7

Browse files
AINightCoderAINightCoder
committed
config: 手机弹窗优化
1 parent b7d11bb commit e14eec7

5 files changed

Lines changed: 132 additions & 16 deletions

File tree

‎quartz/components/PersonalIntro.tsx‎

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -227,31 +227,37 @@ PersonalIntro.css = `
227227
position: fixed;
228228
top: 0;
229229
left: 0;
230-
width: 100vw;
230+
width: 100%;
231+
height: 100%;
232+
/* 支持动态视口高度 */
231233
height: 100vh;
234+
height: 100dvh; /* 动态视口高度，支持现代浏览器 */
232235
background: rgba(0, 0, 0, 0.5);
233236
z-index: 1000;
234237
align-items: center;
235238
justify-content: center;
236239
overflow: hidden;
237240
/* 确保弹窗始终在视口中央 */
238241
inset: 0;
242+
/* 移动端优化 */
243+
-webkit-overflow-scrolling: touch;
239244
}
240245
241246
.wechat-modal-content {
242247
background: var(--light);
243248
border-radius: 12px;
244249
padding: 2rem;
245250
text-align: center;
246-
position: fixed;
247-
top: 50%;
248-
left: 50%;
249-
transform: translate(-50%, -50%);
251+
position: relative;
250252
max-width: 300px;
251253
width: 90%;
252254
max-height: 90vh;
255+
max-height: 90dvh; /* 动态视口高度 */
253256
overflow-y: auto;
254257
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
258+
/* 移动端优化 */
259+
margin: auto;
260+
-webkit-overflow-scrolling: touch;
255261
}
256262
257263
.wechat-close {
@@ -393,11 +399,30 @@ PersonalIntro.css = `
393399
}
394400
395401
/* 移动端微信弹窗优化 */
402+
.wechat-modal {
403+
/* 移动端确保全屏覆盖 */
404+
position: fixed;
405+
top: 0;
406+
left: 0;
407+
right: 0;
408+
bottom: 0;
409+
width: 100%;
410+
height: 100%;
411+
/* 避免使用vh单位在移动端的问题 */
412+
min-height: 100%;
413+
}
414+
396415
.wechat-modal-content {
397416
width: 95%;
398417
max-width: 280px;
399418
padding: 1.5rem;
400-
margin: 1rem;
419+
margin: 1rem auto;
420+
/* 移动端垂直居中优化 */
421+
position: absolute;
422+
top: 50%;
423+
left: 50%;
424+
transform: translate(-50%, -50%);
425+
max-height: calc(100% - 2rem);
401426
}
402427
403428
.wechat-qr {

‎quartz/components/scripts/graph.inline.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -585,8 +585,30 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
585585
const container = document.getElementById("global-graph-outer")
586586
const sidebar = container?.closest(".sidebar") as HTMLElement
587587

588+
// 锁定body滚动
589+
const lockBodyScroll = () => {
590+
const scrollY = window.scrollY
591+
document.body.style.position = 'fixed'
592+
document.body.style.top = `-${scrollY}px`
593+
document.body.style.width = '100%'
594+
document.body.setAttribute('data-scroll-y', scrollY.toString())
595+
}
596+
597+
// 解锁body滚动
598+
const unlockBodyScroll = () => {
599+
const scrollY = document.body.getAttribute('data-scroll-y')
600+
document.body.style.position = ''
601+
document.body.style.top = ''
602+
document.body.style.width = ''
603+
document.body.removeAttribute('data-scroll-y')
604+
if (scrollY) {
605+
window.scrollTo(0, parseInt(scrollY))
606+
}
607+
}
608+
588609
function renderGlobalGraph() {
589610
const slug = getFullSlug(window)
611+
lockBodyScroll()
590612
container?.classList.add("active")
591613
if (sidebar) {
592614
sidebar.style.zIndex = "1"
@@ -597,6 +619,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
597619
}
598620

599621
function hideGlobalGraph() {
622+
unlockBodyScroll()
600623
container?.classList.remove("active")
601624
if (sidebar) {
602625
sidebar.style.zIndex = ""

‎quartz/components/scripts/wechat.inline.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,38 @@ document.addEventListener("nav", () => {
77
return
88
}
99

10+
// 锁定body滚动
11+
const lockBodyScroll = () => {
12+
const scrollY = window.scrollY
13+
document.body.style.position = 'fixed'
14+
document.body.style.top = `-${scrollY}px`
15+
document.body.style.width = '100%'
16+
document.body.setAttribute('data-scroll-y', scrollY.toString())
17+
}
18+
19+
// 解锁body滚动
20+
const unlockBodyScroll = () => {
21+
const scrollY = document.body.getAttribute('data-scroll-y')
22+
document.body.style.position = ''
23+
document.body.style.top = ''
24+
document.body.style.width = ''
25+
document.body.removeAttribute('data-scroll-y')
26+
if (scrollY) {
27+
window.scrollTo(0, parseInt(scrollY))
28+
}
29+
}
30+
1031
// 显示微信弹窗
1132
const showWechatModal = (e: Event) => {
1233
e.preventDefault()
34+
lockBodyScroll()
1335
wechatModal.style.display = "flex"
1436
}
1537

1638
// 隐藏微信弹窗
1739
const hideWechatModal = (e: Event) => {
1840
e.preventDefault()
41+
unlockBodyScroll()
1942
wechatModal.style.display = "none"
2043
}
2144

‎quartz/components/styles/graph.scss‎

Lines changed: 52 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -43,31 +43,76 @@
4343
z-index: 9999;
4444
left: 0;
4545
top: 0;
46-
width: 100vw;
46+
width: 100%;
4747
height: 100%;
48+
/* 支持动态视口高度 */
49+
height: 100vh;
50+
height: 100dvh; /* 动态视口高度，支持现代浏览器 */
4851
backdrop-filter: blur(4px);
52+
background: rgba(0, 0, 0, 0.3);
4953
display: none;
5054
overflow: hidden;
55+
/* 确保弹窗始终在视口中央 */
56+
inset: 0;
57+
/* 移动端优化 */
58+
-webkit-overflow-scrolling: touch;
59+
/* 使用flex布局居中 */
60+
align-items: center;
61+
justify-content: center;
5162

5263
&.active {
53-
display: inline-block;
64+
display: flex;
5465
}
5566

5667
& > #global-graph-container {
5768
border: 1px solid var(--lightgray);
5869
background-color: var(--light);
5970
border-radius: 5px;
6071
box-sizing: border-box;
61-
position: fixed;
62-
top: 50%;
63-
left: 50%;
64-
transform: translate(-50%, -50%);
72+
position: relative;
6573
height: 80vh;
74+
height: 80dvh; /* 动态视口高度 */
6675
width: 80vw;
76+
max-width: 90%;
77+
max-height: 90%;
78+
/* 移动端优化 */
79+
margin: auto;
80+
-webkit-overflow-scrolling: touch;
6781

6882
@media all and not ($desktop) {
69-
width: 90%;
83+
width: 95%;
84+
height: 85vh;
85+
height: 85dvh;
86+
}
87+
88+
/* 移动端特定优化 */
89+
@media (max-width: 600px) {
90+
width: 98%;
91+
height: 90vh;
92+
height: 90dvh;
93+
/* 移动端垂直居中优化 */
94+
position: absolute;
95+
top: 50%;
96+
left: 50%;
97+
transform: translate(-50%, -50%);
98+
max-height: calc(100% - 2rem);
7099
}
71100
}
72101
}
102+
103+
/* 移动端全局图谱弹窗优化 */
104+
@media (max-width: 600px) {
105+
& > #global-graph-outer {
106+
/* 移动端确保全屏覆盖 */
107+
position: fixed;
108+
top: 0;
109+
left: 0;
110+
right: 0;
111+
bottom: 0;
112+
width: 100%;
113+
height: 100%;
114+
/* 避免使用vh单位在移动端的问题 */
115+
min-height: 100%;
116+
}
117+
}
73118
}

‎quartz/components/styles/popover.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,9 @@
7070
opacity 0.3s ease,
7171
visibility 0.3s ease;
7272

73-
@media all and ($mobile) {
74-
display: none !important;
75-
}
73+
// @media all and ($mobile) {
74+
// display: none !important;
75+
// }
7676
}
7777

7878
a:hover .popover,

0 commit comments

Comments
 (0)