diff --git a/app/static/css/button.css b/app/static/css/button.css
new file mode 100644
index 0000000..9953857
--- /dev/null
+++ b/app/static/css/button.css
@@ -0,0 +1,37 @@
+/* 按钮(上一篇，下一篇)样式 */
+.pagination {
+ padding: 20px;
+ max-width: 600px;
+}
+
+.arrow {
+ margin-right: 15px;
+ display: flex;
+ align-items: center;
+ background: #007BFF; /* 按钮背景颜色 */
+ border: none;
+ color: #FFF; /* 按钮文字颜色 */
+ padding: 5px 12px;
+ font-size: 20px;
+ border-radius: 5px;
+ transition: background-color 0.3s ease;
+}
+
+.arrow i {
+ margin: 0 5px;
+}
+
+.arrow:hover {
+ background-color: #0056b3; /* 按钮悬停时的背景颜色 */
+ cursor: pointer;
+}
+
+.arrow:focus {
+ outline: none;
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5);
+}
+
+/* 为首页时按钮(Pre Article)的背景颜色 */
+.gray-background {
+ background-color: #6c757d !important;
+}
diff --git a/app/templates/userpage_get.html b/app/templates/userpage_get.html
index 9a9f640..6f08ab7 100644
--- a/app/templates/userpage_get.html
+++ b/app/templates/userpage_get.html
@@ -6,6 +6,8 @@
content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes"/>
+
+
{{ yml['header'] | safe }}
@@ -41,17 +43,6 @@
white-space: pre-wrap;
}
- .arrow {
- padding: 0;
- font-size: 20px;
- line-height: 21px;
- display: inline-block;
- }
-
- .arrow:hover {
- cursor: pointer;
- }
-
@@ -71,9 +62,14 @@
{% endfor %}
-
-
-
+
阅读文章并回答问题
@@ -200,9 +196,9 @@
- // 刷新页面或进入页面时判断，若不是首篇文章，则上一篇按钮可见
- if (sessionStorage.getItem('pre_page_button') !== 'display' && sessionStorage.getItem('pre_page_button')) {
- $('#load_pre_article').show();
+ // 刷新页面或进入页面时判断，若是首篇文章，则颜色为灰色
+ if (sessionStorage.getItem('pre_page_button') === 'display' || !sessionStorage.getItem('pre_page_button')) {
+ $('#load_pre_article').addClass('gray-background');
}
// 事件监听器
@@ -224,7 +220,6 @@
function load_next_article() {
- $("#load_next_article").prop("disabled", true)
$.ajax({
url: '/get_next_article/{{username}}',
dataType: 'json',
@@ -274,13 +269,13 @@
document.querySelector('#user_level').classList.add('mark'); // do the same thing for user difficulty level
setTimeout(() => {document.querySelector('#user_level').classList.remove('mark');}, 2000);
}
-
+
function check_pre(visited_articles){
if((visited_articles=='')||(visited_articles['index']<=0)){
- $('#load_pre_article').hide();
+ $('#load_pre_article').addClass('gray-background'); // 设置为灰色
sessionStorage.setItem('pre_page_button', 'display')
- } else {
- $('#load_pre_article').show();
+ }else{
+ $('#load_pre_article').removeClass('gray-background'); // 设置为正常蓝色
sessionStorage.setItem('pre_page_button', 'show')
}
}