Skip to content

Commit f6cc74d

Browse files
FfeixingFfeixing
authored
Update index.html
1 parent 1b568f9 commit f6cc74d

File tree

1 file changed

+11
-199
lines changed

1 file changed

+11
-199
lines changed

‎index.html‎

Lines changed: 11 additions & 199 deletions
Original file line numberDiff line numberDiff line change
@@ -3,213 +3,25 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>合集页面</title>
6+
<title>趣加APP</title>
77
<style>
8-
/* CSS 样式 */
9-
* {
8+
body, html {
109
margin: 0;
1110
padding: 0;
12-
box-sizing: border-box;
11+
height: 100%;
12+
overflow: hidden;
1313
}
14-
15-
body {
16-
font-family: Arial, sans-serif;
17-
background-color: #f5f5f5;
18-
}
19-
20-
.header {
21-
text-align: center;
22-
padding: 20px;
23-
background-color: #0073e6;
24-
color: white;
25-
}
26-
27-
.banner {
14+
iframe {
15+
position: absolute;
16+
top: 0;
17+
left: 0;
2818
width: 100%;
29-
height: auto;
30-
max-height: 200px;
31-
}
32-
33-
.category {
34-
display: flex;
35-
justify-content: space-around;
36-
padding: 10px;
37-
background-color: #fff;
38-
border-top: 1px solid #ddd;
39-
border-bottom: 1px solid #ddd;
40-
}
41-
42-
.category span {
43-
font-weight: bold;
44-
color: #0073e6;
45-
}
46-
47-
.article-list {
48-
display: flex;
49-
flex-direction: column;
50-
margin: 10px;
51-
}
52-
53-
.article-item {
54-
display: flex;
55-
align-items: center;
56-
padding: 10px;
57-
background-color: white;
58-
margin-bottom: 10px;
59-
border-radius: 8px;
60-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
61-
text-decoration: none;
62-
color: black;
63-
cursor: pointer;
64-
}
65-
66-
.article-image {
67-
width: 80px;
68-
height: 80px;
69-
border-radius: 5px;
70-
margin-right: 10px;
71-
}
72-
73-
.article-info h2 {
74-
font-size: 16px;
75-
margin-bottom: 5px;
76-
}
77-
78-
.date, .views {
79-
font-size: 12px;
80-
color: #777;
81-
}
82-
83-
/* 隐藏文章内容部分 */
84-
#article {
85-
display: none;
86-
padding: 20px;
87-
}
88-
89-
#article h1 {
90-
font-size: 22px;
91-
color: #0073e6;
92-
margin-bottom: 10px;
93-
}
94-
95-
#article .date {
96-
font-size: 12px;
97-
color: #777;
98-
}
99-
100-
#article .content {
101-
margin-top: 10px;
102-
line-height: 1.6;
103-
}
104-
105-
#article .content img {
106-
max-width: 100%;
107-
height: auto;
108-
margin: 10px 0;
109-
border-radius: 8px;
110-
}
111-
112-
#back-button {
113-
margin-top: 20px;
114-
padding: 10px;
115-
background-color: #0073e6;
116-
color: white;
19+
height: 100%;
11720
border: none;
118-
border-radius: 5px;
119-
cursor: pointer;
12021
}
12122
</style>
12223
</head>
12324
<body>
124-
<div class="header">
125-
<img src="https://static.codemao.cn/pickduck/SJU9FwEbyg.png?hash=Fh4UtRNbxMh8MGOblnSwMe62gQNu" alt="横幅" class="banner">
126-
<h1>“趣加应用”常见问题合集</h1>
127-
</div>
128-
129-
<div class="category">
130-
<span>全部</span>
131-
<span>最热</span>
132-
</div>
133-
134-
<div class="article-list">
135-
<div class="article-item" onclick="showArticle(1)">
136-
<img src="https://static.codemao.cn/pickduck/rJjenwEW1e.png?hash=FnM60Ia9GSuNBRr9-WRgCs19tUSC" alt="文章图片" class="article-image">
137-
<div class="article-info">
138-
<h2>常见问题 | 趣加应用软件打开持续白屏怎么办？</h2>
139-
<p class="date">10-31</p>
140-
<p class="views">-- 次浏览</p>
141-
</div>
142-
</div>
143-
<div class="article-item" onclick="showArticle(2)">
144-
<img src="https://static.codemao.cn/pickduck/rJjenwEW1e.png?hash=FnM60Ia9GSuNBRr9-WRgCs19tUSC" alt="文章图片" class="article-image">
145-
<div class="article-info">
146-
<h2>常见问题 | 趣加应用资源无法下载怎么办？</h2>
147-
<p class="date">10-31</p>
148-
<p class="views">-- 次浏览</p>
149-
</div>
150-
</div>
151-
<div class="article-item" onclick="showArticle(3)">
152-
<img src="https://static.codemao.cn/pickduck/rJjenwEW1e.png?hash=FnM60Ia9GSuNBRr9-WRgCs19tUSC" alt="文章图片" class="article-image">
153-
<div class="article-info">
154-
<h2>高级服务 | 我要成为管理员</h2>
155-
<p class="date">10-31</p>
156-
<p class="views">-- 次浏览</p>
157-
</div>
158-
</div>
159-
</div>
160-
161-
<!-- 模拟文章页面内容，用 JavaScript 动态填充 -->
162-
<div id="article">
163-
<h1 id="article-title"></h1>
164-
<p class="date" id="article-date"></p>
165-
<div class="content" id="article-content"></div>
166-
<button id="back-button" onclick="goBack()">返回</button>
167-
</div>
168-
169-
<script>
170-
// 定义每篇文章的内容
171-
const articles = {
172-
1: {
173-
title: "常见问题 | 趣加应用软件打开持续白屏怎么办？",
174-
date: "2024-10-31",
175-
content: "趣加应用0.3.4要求的安卓版本：安卓10以上，旧版本不受支持了。<br>推荐升级安卓系统再来使用趣加应用，低系统请暂时使用网页版。 有其他使用问题，请转到《趣加应用全站手册》https://ffeixing.github.io/qjyy/...<br><img src='image1-content.jpg' alt='文章配图'>"
176-
},
177-
2: {
178-
title: "常见问题 | 趣加应用资源无法下载怎么办？",
179-
date: "2024-10-31",
180-
content: "若有资源链接失效了，请联系资源原作者或与管理员取得联系；<br>若所有资源都无法下载，可能是服务器解析出现问题了，请耐心等待修复完成，等待期间可暂时收到复制链接密码到浏览器下载，麻烦各位了<br><img src='image2-content.jpg' alt='文章配图'>"
181-
},
182-
3: {
183-
title: "高级服务 | 我要成为管理员",
184-
date: "2024-10-31",
185-
content: "请填写下表，24小时内将审核完毕<br>https://www.wjx.cn/vm/eqHYoTl.aspx#<br><img src='image3-content.jpg' alt='文章配图'>"
186-
}
187-
};
188-
189-
// 显示文章内容
190-
function showArticle(articleId) {
191-
// 获取文章内容
192-
const article = articles[articleId];
193-
if (article) {
194-
document.getElementById('article-title').innerText = article.title;
195-
document.getElementById('article-date').innerText = article.date;
196-
document.getElementById('article-content').innerHTML = article.content; // 使用 innerHTML 支持图片和换行
197-
198-
// 隐藏主页，显示文章内容
199-
document.querySelector('.header').style.display = 'none';
200-
document.querySelector('.category').style.display = 'none';
201-
document.querySelector('.article-list').style.display = 'none';
202-
document.getElementById('article').style.display = 'block';
203-
}
204-
}
205-
206-
// 返回到主页
207-
function goBack() {
208-
document.querySelector('.header').style.display = 'block';
209-
document.querySelector('.category').style.display = 'flex';
210-
document.querySelector('.article-list').style.display = 'flex';
211-
document.getElementById('article').style.display = 'none';
212-
}
213-
</script>
25+
<iframe src="https://ffeixing.github.io/qjyy/qujia" frameborder="0"></iframe>
21426
</body>
215-
</html>
27+
</html>

0 commit comments

Comments
 (0)