Skip to content

Commit f12b70b

Browse files
author
Weatheraintbad
committed
更新横屏模式
1 parent 8e22947 commit f12b70b

2 files changed

Lines changed: 176 additions & 35 deletions

File tree

‎bg2.png‎

3.46 MB
Loading

‎index.html‎

Lines changed: 176 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,17 @@
2121
margin: 0;
2222
padding: 0;
2323
height: 100%;
24-
background-color: #000000; /* 基础背景色为黑色 */
24+
background-color: #000000; /* 默认竖屏模式为黑色背景 */
2525
overflow-x: hidden; /* 防止水平滚动 */
2626
}
2727

28+
/* 横屏模式下隐藏黑色背景，使用透明背景 */
29+
@media (min-width: 584px) {
30+
html, body {
31+
background-color: transparent; /* 横屏模式下透明背景，让背景图片可见 */
32+
}
33+
}
34+
2835
* {
2936
margin: 0;
3037
padding: 0;
@@ -45,7 +52,7 @@
4552
/* 主容器 */
4653
.app-container {
4754
position: relative;
48-
width: 100vw;
55+
width: 100%;
4956
max-width: 583px;
5057
min-height: 100vh; /* 最小高度为视口高度 */
5158
background-image: url('bg1.png');
@@ -54,23 +61,81 @@
5461
background-size: 100% 100%; /* 宽度和高度都填满容器 */
5562
background-attachment: scroll;
5663
overflow-y: auto; /* 允许垂直滚动 */
57-
// padding-bottom: 20px; /* 底部留出空间 */
64+
margin: 0 auto;
5865
}
5966

60-
/* 当页面宽度大于583px时，采用固定大小的手机端布局 */
67+
/* 桌面端布局 */
6168
@media (min-width: 584px) {
6269
.app-container {
63-
width: 583px; /* 固定宽度 */
64-
margin: 0 auto; /* 居中显示 */
70+
width: 100%; /* 全宽度 */
71+
max-width: 100%; /* 取消最大宽度限制 */
72+
margin: 0; /* 取消居中 */
73+
background: transparent; /* 透明背景 */
74+
/* 使用 bg2 作为桌面端背景 */
75+
background-image: none; /* 移除原 bg1 背景 */
76+
height: 100vh; /* 固定高度，确保垂直居中 */
77+
overflow: hidden; /* 关闭滚动 */
78+
}
79+
80+
/* 桌面端使用 bg2 作为背景 */
81+
.app-container::before {
82+
content: '';
83+
position: fixed;
84+
top: 0;
85+
left: 0;
86+
width: 100%;
87+
height: 100%;
88+
background-image: url('bg2.png');
89+
background-repeat: repeat; /* 平铺填充 */
90+
background-size: cover; /* 覆盖整个屏幕，不留白 */
91+
background-position: center;
92+
z-index: -1;
6593
}
6694

95+
/* 魔法书随页面大小动态缩放，保持宽高比 */
6796
.magic-book {
68-
width: 280px; /* 固定宽度 */
69-
height: 420px; /* 固定高度 */
97+
width: 60vw; /* 随页面宽度动态缩放，放大为原来的 150% */
98+
max-width: 600px; /* 最大宽度限制，放大为原来的 150% */
99+
height: auto; /* 自动高度，保持宽高比 */
100+
aspect-ratio: 2 / 3; /* 宽高比 2:3 */
101+
margin: 0 auto; /* 垂直水平居中 */
102+
transform: translateY(50px); /* 向下移动 50px */
70103
}
71104

105+
/* 魔法书容器也需要保持宽高比 */
106+
.book-container {
107+
height: 100%;
108+
}
109+
110+
/* 确保魔法书组件垂直水平居中 */
111+
.book-section {
112+
display: flex;
113+
justify-content: center;
114+
align-items: center;
115+
}
116+
117+
/* 翻页动画位移调整 */
72118
.book-container.flipping {
73-
transform: translateX(50%); /* 向右位移50%宽度 */
119+
transform: translateX(80px); /* 调整位移 */
120+
}
121+
122+
/* 横屏模式下隐藏除魔法书之外的组件 */
123+
.header,
124+
.question-section,
125+
.btn-container,
126+
.footer {
127+
display: none;
128+
}
129+
130+
131+
/* 确保魔法书垂直水平居中显示 */
132+
.main-content {
133+
display: flex;
134+
justify-content: center;
135+
align-items: center;
136+
height: 100vh;
137+
width: 100%;
138+
overflow: hidden; /* 关闭横屏模式下的页面滚动 */
74139
}
75140
}
76141

@@ -158,12 +223,59 @@
158223
.main-content {
159224
// background: var(--white);// 取消白色圆角矩形背景
160225
border-radius: 25px;
161-
padding: 20px 0 50px 0;
226+
padding: 40px 20px 60px 20px;
162227
// box-shadow:
163228
0 20px 60px rgba(200, 16, 46, 0.15),
164229
0 0 0 1px rgba(200, 16, 46, 0.1);
165230
position: relative;
166231
overflow: visible;
232+
max-width: 1200px; /* 限制最大宽度 */
233+
margin: 0 auto; /* 居中显示 */
234+
}
235+
236+
/* 桌面端内容布局 */
237+
@media (min-width: 900px) {
238+
.main-content {
239+
display: flex;
240+
flex-direction: row;
241+
align-items: center;
242+
justify-content: center;
243+
gap: 60px;
244+
padding: 60px 40px;
245+
}
246+
247+
.book-section {
248+
flex: 0 0 auto;
249+
margin-bottom: 0;
250+
}
251+
252+
.question-section,
253+
.btn-container {
254+
flex: 1;
255+
max-width: 400px;
256+
margin-top: 60px;
257+
}
258+
259+
.question-input {
260+
font-size: 1.3rem;
261+
padding: 22px 24px;
262+
}
263+
264+
.ask-btn {
265+
width: 320px;
266+
height: 70px;
267+
font-size: 1.4rem;
268+
}
269+
270+
/* 魔法书随页面大小动态缩放，保持宽高比 */
271+
.magic-book {
272+
width: 60vw; /* 随页面宽度动态缩放，放大为原来的 150% */
273+
max-width: 600px; /* 最大宽度限制，放大为原来的 150% */
274+
height: auto; /* 自动高度，保持宽高比 */
275+
aspect-ratio: 2 / 3; /* 宽高比 2:3 */
276+
margin: 0 auto; /* 垂直水平居中 */
277+
transform: translateY(50px); /* 向下移动 50px */
278+
}
167279
}
168280

169281
.book-section {
@@ -413,7 +525,7 @@
413525
}
414526

415527
.question-section {
416-
margin-bottom: 40px;
528+
margin-bottom: 30px;
417529
}
418530

419531
.question-label {
@@ -562,7 +674,7 @@
562674

563675
.footer {
564676
text-align: center;
565-
margin-top: 60px;
677+
margin-top: 70px;
566678
color: #ffce7b;
567679
font-size: 0.9rem;
568680
position: relative;
@@ -602,12 +714,15 @@
602714
}
603715

604716
.magic-book {
605-
height: 480px; /* 宽高比 2:3，320 * 1.5 = 480 */
606-
max-width: 320px;
717+
width: 280px; /* 固定宽度，手机端大小 */
718+
height: 420px; /* 固定高度，手机端大小 */
719+
margin: 0 auto 40px;
720+
position: relative;
721+
cursor: pointer;
607722
}
608723

609724
.book-container {
610-
height: 480px;
725+
height: 420px;
611726
}
612727

613728
.book-container.flipping {
@@ -688,7 +803,7 @@
688803
<div class="container">
689804
<div class="header">
690805
<img src="title.png" alt="新年答案之书" class="title-image" style="display: block; margin: 0 auto; max-width: 70%; height: auto;">
691-
<p class="subtitle">提出你的问题，寻找新年的答案...</p>
806+
<!-- <p class="subtitle">提出你的问题，寻找新年的答案...</p>-->
692807
<div class="decorative-line"></div>
693808
</div>
694809

@@ -752,15 +867,15 @@
752867
<li class="book-page">
753868
<div class="book-inner-page">
754869
<div class="inner-page-content" style="font-size: 1.2rem; color: var(--text-dark); font-style: italic;">
755-
改变方向
870+
756871
</div>
757872
</div>
758873
</li>
759874
<!-- 内页 8 -->
760875
<li class="book-page">
761876
<div class="book-inner-page">
762877
<div class="inner-page-content" style="font-size: 1.2rem; color: var(--text-dark); font-style: italic;">
763-
放松点
878+
764879
</div>
765880
</div>
766881
</li>
@@ -790,20 +905,20 @@
790905
</div>
791906
</div>
792907

793-
<div class="question-section">
908+
<div class="content-right">
909+
<div class="question-section">
794910
<!-- <label for="question-input" class="question-label">你的问题</label>-->
795-
<input type="text" id="question-input" class="question-input" placeholder="输入你的问题..." autocomplete="off">
796-
</div>
797-
798-
<div class="btn-container">
799-
<button class="ask-btn" id="ask-btn">获取答案</button>
800-
</div>
911+
<input type="text" id="question-input" class="question-input" placeholder="输入问题，寻找新年的答案..." autocomplete="off">
912+
</div>
801913

802-
</div>
914+
<div class="btn-container">
915+
<button class="ask-btn" id="ask-btn">获取答案</button>
916+
</div>
803917

804-
<div class="footer">
805-
<p style="margin-top: -52px; font-size: 0.8rem;">记住，答案的力量在于你如何理解它</p>
806-
</div>
918+
<div class="footer">
919+
<p style="margin-top: -52px; font-size: 0.8rem;">记住，答案的力量在于你如何理解它</p>
920+
</div>
921+
</div>
807922
</div>
808923
</div>
809924

@@ -1029,17 +1144,43 @@
10291144
});
10301145

10311146
magicBook.addEventListener('click', function() {
1032-
const question = questionInput.value.trim();
1147+
// 检查是否是横屏模式
1148+
const isDesktop = window.innerWidth >= 584;
10331149

1034-
if (!question) {
1035-
// 如果输入框没有内容，唤起键盘准备输入
1036-
questionInput.focus();
1150+
if (isDesktop) {
1151+
// 横屏模式下直接播放动画加载答案
1152+
desktopGetAnswer();
10371153
} else {
1038-
// 如果输入框已有内容，执行获取答案的逻辑
1039-
getAnswer();
1154+
// 竖屏模式下保持原操作逻辑
1155+
const question = questionInput.value.trim();
1156+
if (!question) {
1157+
questionInput.focus();
1158+
} else {
1159+
getAnswer();
1160+
}
10401161
}
10411162
});
10421163

1164+
// 横屏模式获取答案函数
1165+
function desktopGetAnswer() {
1166+
// 检查是否已经翻页
1167+
if (isFlipped) {
1168+
// 反向翻页回到封面
1169+
bookContainer.classList.remove('flipping');
1170+
isFlipped = false;
1171+
return;
1172+
}
1173+
1174+
// 加载随机答案
1175+
const randomIndex = Math.floor(Math.random() * answers.length);
1176+
const answer = answers[randomIndex];
1177+
answerPageContent.textContent = answer;
1178+
1179+
// 播放翻页动画
1180+
bookContainer.classList.add('flipping');
1181+
isFlipped = true;
1182+
}
1183+
10431184
// 获取答案函数
10441185
function getAnswer() {
10451186
const question = questionInput.value.trim();

0 commit comments

Comments
 (0)