anian/halo-theme-pix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化界面；修复异常

Browse Source
This commit is contained in:
阳春白雪糕
2026-07-29 00:17:31 +08:00
parent d575d584cb
commit 4b70da9ac3
7 changed files with 105 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/assets/css/anian.css
+16 -6
View File
@@ -888,7 +888,7 @@
.equipments_page #post_item .equipment_item {
width: 100%;
margin: 0;
padding: 20px 40px;
padding: 10px 40px;
border: 0;
display: flex;
align-items: center;
@@ -966,6 +966,19 @@
line-height: 1.6;
white-space: pre-wrap;
overflow-wrap: anywhere;
font-size: 16px;
}
@media only screen and (max-width:1366px) {
.equipments_page #post_item {
grid-template-columns: 1fr;
}
.equipments_page #post_item .equipment_item {
width: 70%;
margin-left: auto;
margin-right: auto;
}
}
@media only screen and (max-width:540px) {
@@ -974,14 +987,11 @@
}
.equipments_page #post_item .equipment_item {
padding: 20px;
width: 100%;
padding: 10px 20px;
}
.equipments_page #post_item .equipment_overlay {
padding: 24px;
}
.equipments_page #post_item .equipment_description {
font-size: 14px;
}
}
templates/assets/css/main.css
+19 -1
View File
@@ -6485,7 +6485,7 @@ a#listree-click.current,
height: 100dvh;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
box-sizing: border-box;
padding: 20px;
@@ -6985,6 +6985,8 @@ a#listree-click.current,
}
.common-fixed-bg {
position: relative;
z-index: 0;
background-size: cover;
background-attachment: fixed;
background-position: center center;
@@ -6994,6 +6996,22 @@ a#listree-click.current,
padding: 0;
}
.fixed-background-layer {
position: fixed;
z-index: -1;
inset: 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
pointer-events: none;
transition: opacity .6s ease;
}
.fixed-background-layer.is-visible {
opacity: 1;
}
/* 侧边栏订阅 */
.subscribe-widget {
padding: 16px;
templates/assets/js/app.js
+49 -7
View File
@@ -2522,15 +2522,55 @@ function initializeMomentFold() {
// 更换背景函数封装
function setFixedBackground(bgImageUrl) {
const body = document.body;
const requestId = (Number(body.dataset.backgroundRequestId) || 0) + 1;
body.dataset.backgroundRequestId = requestId;
// 传入空值时淡出并清除当前背景。
if (bgImageUrl == null || String(bgImageUrl).trim().toLowerCase() === 'null' || String(bgImageUrl).trim() === '') {
body.querySelectorAll('.fixed-background-layer').forEach((layer) => {
layer.classList.remove('is-visible');
setTimeout(() => layer.remove(), 650);
});
body.classList.remove('common-fixed-bg');
return;
}
const image = new Image();
image.onload = async () => {
if (typeof image.decode === 'function') {
try { await image.decode(); } catch (_) { }
}
if (body.dataset.backgroundRequestId !== String(requestId)) return;
const backgroundLayer = document.createElement('div');
backgroundLayer.className = 'fixed-background-layer';
backgroundLayer.style.backgroundImage = `url('${bgImageUrl}')`;
body.appendChild(backgroundLayer);
// 先应用透明状态，再切换到可见状态，确保每次调用都触发淡入。
backgroundLayer.offsetWidth;
requestAnimationFrame(() => backgroundLayer.classList.add('is-visible'));
body.querySelectorAll('.fixed-background-layer:not(:last-child)').forEach((layer) => {
layer.classList.remove('is-visible');
setTimeout(() => layer.remove(), 650);
});
};
body.classList.add('common-fixed-bg');
body.style.backgroundImage = `url('${bgImageUrl}')`;
image.src = bgImageUrl;
}
// 奇遇显示函数封装
function showCenterImage(imageUrl) {
function showCenterImage(imageUrl, duration = 2000) {
const container = document.getElementById('centerImgContainer');
const img = document.getElementById('targetImg');
// 清理上一次调用遗留的自动关闭定时器。
clearTimeout(container._centerImageCloseTimer);
clearTimeout(container._centerImageResetTimer);
// 重置所有状态（避免上一次操作残留影响）
container.classList.remove('container-fade-active');
img.classList.remove('img-fade-in', 'img-fade-out');
@@ -2547,15 +2587,17 @@ function showCenterImage(imageUrl) {
container.classList.add('container-fade-active');
img.classList.add('img-fade-in');
// 图片显示1.5秒后，执行自动关闭逻辑
setTimeout(() => {
// duration 为 0 时保持显示，不执行自动关闭逻辑。
if (duration <= 0) return;
container._centerImageCloseTimer = setTimeout(() => {
container.classList.remove('container-fade-active');
img.classList.add('img-fade-out');
setTimeout(() => {
container._centerImageResetTimer = setTimeout(() => {
img.classList.remove('img-fade-in', 'img-fade-out');
}, 500);
}, 1500);
}, duration);
}
// 定义图片加载失败的回调函数
@@ -2601,7 +2643,7 @@ function anian_renderLunarUI() {
textEl.innerHTML = text;
if (jieqi === '大寒') showCenterImage('/upload/qiyu-jieqi-dahan.png');
if (jieqi) showCenterImage('/upload/' + jieqi + '.webp');
// setFixedBackground('/upload/JX3WJ.mp4_20260207_022345.027.jpg');
};
templates/assets/js/pixplayer.js
+9 -4
View File
@@ -517,12 +517,17 @@ $(document).on('click', '.m_volume', function () {
}
});
$(document).on('click', '.vo_bar', function () {
var long = (getMousePosition().top) - ($(this).offset().top)
var meter = long / $(this).height();
var finalLong = 1 - meter;
$(document).on('click', '.vo_bar', function (event) {
var originalEvent = event.originalEvent || event;
var point = originalEvent.changedTouches && originalEvent.changedTouches.length
? originalEvent.changedTouches[0]
: originalEvent;
var offset = $(this).offset();
var meter = (point.pageY - offset.top) / $(this).height();
var finalLong = Math.max(0, Math.min(1, 1 - meter));
$('.vo_size').height(finalLong * $(this).height());
audiobox[0].volume = finalLong;
audiobox[0].muted = finalLong === 0;
});
//文章歌曲
templates/macro/equipment.html
+5 -5
View File
@@ -6,14 +6,14 @@
<div class="friends_cat_nav equipments_cat_nav">
<ul id="cat_nav_items">
<li>
<a th:attr="data-href=@{/equipments}"
<a th:attr="data-href=@{/qiyu}"
th:classappend="${#strings.isEmpty(selectedTag) ? 'active' : ''}"
class="cat-link">
<span>全部</span>
</a>
</li>
<li th:each="group : ${equipmentGroups}">
<a th:attr="data-href=@{/equipments(tag=${group.spec.displayName})}"
<a th:attr="data-href=@{/qiyu(tag=${group.spec.displayName})}"
th:classappend="${#strings.equals(selectedTag, group.spec.displayName) or #strings.equals(selectedTag, group.metadata.name) ? 'active' : ''}"
class="cat-link">
<span th:text="${group.spec.displayName}">分组</span>
@@ -48,12 +48,12 @@
<div id="t_pagination">
<div class="post-paging" th:with="_page = ${equipmentPage.page + 1}">
<a th:if="${equipmentPage.hasNext() and #strings.isEmpty(selectedTag)}"
th:attr="data=@{/equipments(page=${_page})}"
th:attr="data=@{/qiyu(page=${_page})}"
th:text="${theme.config.base_set.site_page}"></a>
<a th:if="${equipmentPage.hasNext() and not #strings.isEmpty(selectedTag)}"
th:attr="data=@{/equipments(tag=${selectedTag},page=${_page})}"
th:attr="data=@{/qiyu(tag=${selectedTag},page=${_page})}"
th:text="${theme.config.base_set.site_page}"></a>
<form class="page-jump-form" method="get" action="/equipments">
<form class="page-jump-form" method="get" action="/qiyu">
<span class="page-jump-label">转到</span>
<input th:if="${not #strings.isEmpty(selectedTag)}" type="hidden" name="tag"
th:value="${selectedTag}" />