优化界面;修复异常
This commit is contained in:
@@ -2,6 +2,11 @@
|
||||
|
||||
> 基于原作者v1.2.5代码修改
|
||||
|
||||
#### v1.2.5-9补丁
|
||||
1. 优化附录、奇遇页面(依赖装备插件v1.0.2-1)
|
||||
2. 修复音乐播放器无法调节音量
|
||||
3. 优化奇遇相关函数效果
|
||||
|
||||
#### v1.2.5-9
|
||||
1. 修复导航栏居中显示失效、分享海报高度、页码更新、加载动画异常
|
||||
2. 优化上一页动画效果
|
||||
|
||||
@@ -163,7 +163,7 @@
|
||||
@media (max-width: 767px) {
|
||||
#my-links-widget { margin-top: 40px !important; }
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
@media (min-width: 1367px) {
|
||||
.link-container { grid-template-columns: repeat(4, 1fr) !important; }
|
||||
}
|
||||
.ri-icon { color: white !important; fill: white !important; }
|
||||
@@ -248,4 +248,4 @@
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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');
|
||||
};
|
||||
|
||||
|
||||
@@ -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;
|
||||
});
|
||||
|
||||
//文章歌曲
|
||||
|
||||
@@ -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}" />
|
||||
|
||||
Reference in New Issue
Block a user