feat(ui): 优化移动端评论展开逻辑和界面样式
- 仅当内容超过3行时才添加展开/收起功能 - 使用line-clamp实现更精确的内容截断 - 优化展开按钮样式，提升视觉一致性 - 调整黑夜模式下评论区域背景透明度 - 统一发送按钮中英文显示文本 - 优化头像样式，增加边框和圆角效果
This commit is contained in:
hehh
@@ -125,6 +125,15 @@
|
|||||||
transform: translateY(0) !important;
|
transform: translateY(0) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 修改发送按钮默认显示为"发送" */
|
||||||
|
.atk-send-btn:before {
|
||||||
|
content: "发送" !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-lang="en"] .atk-send-btn:before {
|
||||||
|
content: "Send" !important;
|
||||||
|
}
|
||||||
|
|
||||||
.atk-list-header {
|
.atk-list-header {
|
||||||
padding: 20px !important;
|
padding: 20px !important;
|
||||||
border-bottom: 1px solid rgba(128, 128, 128, 0.15) !important;
|
border-bottom: 1px solid rgba(128, 128, 128, 0.15) !important;
|
||||||
@@ -166,6 +175,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.atk-avatar {
|
.atk-avatar {
|
||||||
|
border-radius: 50% !important;
|
||||||
|
border: 2px solid #6c5ce7 !important;
|
||||||
box-shadow: 0 0 10px rgba(108, 92, 231, 0.2) !important;
|
box-shadow: 0 0 10px rgba(108, 92, 231, 0.2) !important;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
object-fit: cover; /* 修复头像拉伸问题 */
|
object-fit: cover; /* 修复头像拉伸问题 */
|
||||||
@@ -251,14 +262,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="night"] .atk-comment-wrap {
|
[data-theme="night"] .atk-comment-wrap {
|
||||||
background: rgba(30, 30, 35, 0.5);
|
background: rgba(40, 40, 45, 0.85); /* 提高背景不透明度以增强可读性 */
|
||||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="night"] .atk-comment-wrap:hover {
|
[data-theme="night"] .atk-comment-wrap:hover {
|
||||||
background: rgba(35, 35, 40, 0.7);
|
background: rgba(45, 45, 50, 0.95); /* 提高悬停时的背景不透明度 */
|
||||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
|
||||||
}
|
}
|
||||||
@@ -378,49 +389,58 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.atk-mobile .atk-comment .atk-content.clamped {
|
.atk-mobile .atk-comment .atk-content.clamped {
|
||||||
max-height: 100px !important;
|
display: -webkit-box;
|
||||||
overflow: hidden !important;
|
-webkit-line-clamp: 3;
|
||||||
position: relative !important;
|
-webkit-box-orient: vertical;
|
||||||
}
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
.atk-mobile .atk-comment .atk-content.clamped::after {
|
|
||||||
content: "" !important;
|
|
||||||
position: absolute !important;
|
|
||||||
bottom: 0 !important;
|
|
||||||
left: 0 !important;
|
|
||||||
right: 0 !important;
|
|
||||||
height: 40px !important;
|
|
||||||
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.9)) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme="night"] .atk-mobile .atk-comment .atk-content.clamped::after {
|
|
||||||
background: linear-gradient(to bottom, transparent, rgba(30, 30, 35, 0.9)) !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.atk-mobile .atk-expand-btn {
|
.atk-mobile .atk-expand-btn {
|
||||||
background: rgba(108, 92, 231, 0.1) !important;
|
background: transparent !important;
|
||||||
border: none !important;
|
border: none !important;
|
||||||
border-radius: 20px !important;
|
border-radius: 0 !important;
|
||||||
padding: 6px 15px !important;
|
padding: 8px 0 !important;
|
||||||
color: #6c5ce7 !important;
|
color: #6c5ce7 !important;
|
||||||
font-size: 0.9rem !important;
|
font-size: 0.9rem !important;
|
||||||
cursor: pointer !important;
|
cursor: pointer !important;
|
||||||
margin-top: 10px !important;
|
margin: 8px 0 0 0 !important;
|
||||||
transition: all 0.3s ease !important;
|
transition: all 0.3s ease !important;
|
||||||
margin-right: 0 !important; /* 重置移动端回复按钮的右边距 */
|
margin-right: 0 !important;
|
||||||
|
text-align: left !important;
|
||||||
|
width: 100% !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
font-weight: 500 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.atk-mobile .atk-expand-btn:hover {
|
.atk-mobile .atk-expand-btn:hover {
|
||||||
background: rgba(108, 92, 231, 0.2) !important;
|
background: transparent !important;
|
||||||
|
text-decoration: underline !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.atk-mobile .atk-expand-btn::before {
|
||||||
|
content: "展开全文";
|
||||||
|
}
|
||||||
|
|
||||||
|
.atk-mobile .atk-expand-btn[data-expanded="true"]::before {
|
||||||
|
content: "收起";
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-lang="en"] .atk-mobile .atk-expand-btn::before {
|
||||||
|
content: "Expand";
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-lang="en"] .atk-mobile .atk-expand-btn[data-expanded="true"]::before {
|
||||||
|
content: "Collapse";
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="night"] .atk-mobile .atk-expand-btn {
|
[data-theme="night"] .atk-mobile .atk-expand-btn {
|
||||||
background: rgba(0, 206, 201, 0.1) !important;
|
background: transparent !important;
|
||||||
color: #00cec9 !important;
|
color: #00cec9 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="night"] .atk-mobile .atk-expand-btn:hover {
|
[data-theme="night"] .atk-mobile .atk-expand-btn:hover {
|
||||||
background: rgba(0, 206, 201, 0.2) !important;
|
background: transparent !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Pagination styles */
|
/* Pagination styles */
|
||||||
@@ -574,4 +594,13 @@
|
|||||||
border: none !important;
|
border: none !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 黑夜模式下移动端评论背景色优化 */
|
||||||
|
[data-theme="night"] .atk-comment-wrap {
|
||||||
|
background: rgba(40, 40, 45, 0.9) !important; /* 提高移动端黑夜模式下的背景不透明度 */
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="night"] .atk-comment-wrap:hover {
|
||||||
|
background: rgba(45, 45, 50, 0.95) !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
48
js/about.js
48
js/about.js
@@ -606,28 +606,38 @@ class UIManager {
|
|||||||
// 检查是否已经处理过
|
// 检查是否已经处理过
|
||||||
if (el.dataset.mobileProcessed) return;
|
if (el.dataset.mobileProcessed) return;
|
||||||
|
|
||||||
// 添加移动端内容截断
|
// 检查内容是否超过3行才添加展开收起功能
|
||||||
el.classList.add('clamped');
|
const lineHeight = parseInt(window.getComputedStyle(el).lineHeight);
|
||||||
|
const paddingTop = parseInt(window.getComputedStyle(el).paddingTop);
|
||||||
|
const paddingBottom = parseInt(window.getComputedStyle(el).paddingBottom);
|
||||||
|
const actualHeight = el.clientHeight - paddingTop - paddingBottom;
|
||||||
|
|
||||||
// 创建展开/收起按钮
|
// 如果内容高度超过3倍行高，则添加展开收起功能
|
||||||
const btn = document.createElement('button');
|
if (actualHeight > lineHeight * 3) {
|
||||||
btn.className = 'atk-expand-btn';
|
// 添加移动端内容截断
|
||||||
const expandText = lang === 'zh' ? '展开' : 'Expand';
|
el.classList.add('clamped');
|
||||||
const collapseText = lang === 'zh' ? '收起' : 'Collapse';
|
el.style.setProperty('--max-lines', '3');
|
||||||
btn.textContent = expandText;
|
|
||||||
|
|
||||||
btn.addEventListener('click', (e) => {
|
// 创建展开/收起按钮
|
||||||
e.stopPropagation();
|
const btn = document.createElement('button');
|
||||||
const isClamped = el.classList.toggle('clamped');
|
btn.className = 'atk-expand-btn';
|
||||||
btn.textContent = isClamped ? expandText : collapseText;
|
const expandText = lang === 'zh' ? '展开' : 'Expand';
|
||||||
});
|
const collapseText = lang === 'zh' ? '收起' : 'Collapse';
|
||||||
|
btn.textContent = expandText;
|
||||||
|
|
||||||
// 将按钮插入到适当位置
|
btn.addEventListener('click', (e) => {
|
||||||
const actionsElement = el.closest('.atk-comment').querySelector('.atk-actions');
|
e.stopPropagation();
|
||||||
if (actionsElement) {
|
const isClamped = el.classList.toggle('clamped');
|
||||||
actionsElement.parentNode.insertBefore(btn, actionsElement);
|
btn.textContent = isClamped ? expandText : collapseText;
|
||||||
} else {
|
});
|
||||||
el.parentNode.appendChild(btn);
|
|
||||||
|
// 将按钮插入到适当位置
|
||||||
|
const actionsElement = el.closest('.atk-comment').querySelector('.atk-actions');
|
||||||
|
if (actionsElement) {
|
||||||
|
actionsElement.parentNode.insertBefore(btn, actionsElement);
|
||||||
|
} else {
|
||||||
|
el.parentNode.appendChild(btn);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 标记为已处理
|
// 标记为已处理
|
||||||
|
|||||||
Reference in New Issue
Block a user