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:
anian
2026-04-17 00:19:43 +08:00
parent 5a3544f8df
commit 565bf30ea5
11 changed files with 571 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/assets/css/style.css
+2 -1
View File
@@ -504,11 +504,12 @@ a:visited {
color: #252525;
}
/* 侧边栏颜色异常
a:hover,
a:focus,
a:active {
color: #191970;
}
} */
a:focus {
outline: thin dotted;
templates/assets/js/anian.js
+45 -22
View File
@@ -30,6 +30,7 @@ let csrfToken = '';
let publicKey = '';
let loginTimer = null;
let countdownSeconds = 3;
let closeLoading = null;
const login_modal = document.getElementById('customLoginModal');
const login_closeBtn = document.getElementById('closeLoginModal');
const login_loginBtn = document.getElementById('customLoginBtn');
@@ -39,6 +40,7 @@ async function fetchCSRFToken() {
login_modal.classList.add('show');
login_loginBtn.disabled = true;
login_loginBtn.textContent = '加载中...';
closeLoading = cocoMessage.loading('正在加载署名信息...');
try {
const response = await fetch('/login', { credentials: 'include' });
@@ -62,19 +64,23 @@ async function fetchCSRFToken() {
publicKey = publicKeyMatch[1].replace(/\\\//g, '/');
return 'ok';
} catch (err) {
closeLoading?.()
cocoMessage.error('署名信息加载失败，请刷新');
if (loginTimer) { clearInterval(loginTimer) }
login_loginBtn.textContent = '错误！请刷新';
login_loginBtn.disabled = true;
return 'error';
}
}
// 打开弹窗逻辑
async function open_login_box() {
if (loginTimer) {
clearInterval(loginTimer);
}
if (loginTimer) { clearInterval(loginTimer) }
countdownSeconds = 3;
const success = await fetchCSRFToken();
if (success === 'logged') {
cocoMessage.success('您已经署名过了，请刷新');
closeLoading?.()
cocoMessage.success('您已署名成功，请刷新');
login_modal.classList.remove('show');
} else if (success === 'ok') {
loginTimer = setInterval(() => {
@@ -82,12 +88,15 @@ async function open_login_box() {
login_loginBtn.textContent = '请稍等...' + countdownSeconds;
} else {
clearInterval(loginTimer);
closeLoading?.()
cocoMessage.success('署名信息加载完成');
login_loginBtn.textContent = '署 名';
login_loginBtn.disabled = false;
}
countdownSeconds--;
}, 1000);
} else {
closeLoading?.()
cocoMessage.error('服务器错误，请刷新');
login_modal.classList.remove('show');
}
@@ -95,6 +104,7 @@ async function open_login_box() {
// 关闭弹窗
login_closeBtn.addEventListener('click', () => {
closeLoading?.()
login_modal.classList.remove('show');
});
@@ -111,6 +121,7 @@ function encryptPassword(password) {
// 提交登录
login_loginBtn.addEventListener('click', async () => {
let islogin = false;
const username = document.getElementById('customUsername').value.trim();
const password = document.getElementById('customPassword').value.trim();
if (!username || !password) {
@@ -119,7 +130,9 @@ login_loginBtn.addEventListener('click', async () => {
}
const encryptedPwd = encryptPassword(password);
login_loginBtn.disabled = true;
login_closeBtn.disabled = true;
login_loginBtn.textContent = '验证中...';
closeLoading = cocoMessage.loading('正在验证信息...');
try {
countdownSeconds = 3
const response = await fetch('/login', {
@@ -141,6 +154,8 @@ login_loginBtn.addEventListener('click', async () => {
clearInterval(loginTimer);
}
if (finalUrl.includes('/uc')) {
islogin = true;
closeLoading?.()
cocoMessage.success('署名成功，正在跳转...');
login_loginBtn.textContent = '跳转中...';
const currentScrollTop = window.scrollY || document.documentElement.scrollTop;
@@ -148,24 +163,32 @@ login_loginBtn.addEventListener('click', async () => {
$.cookie('load_type', 'login', { path: '/', domain: 'anian.cc' });
window.location.reload();
} else if (finalUrl.includes('error=invalid-credential')) {
closeLoading?.()
cocoMessage.warning('署名人与心上锁不匹配');
fetchCSRFToken();
} else {
closeLoading?.()
cocoMessage.error('速度过快，请稍后重试');
}
} catch (err) {
closeLoading?.()
cocoMessage.error('服务器连接失败');
} finally {
loginTimer = setInterval(() => {
if (countdownSeconds > 0) {
login_loginBtn.textContent = '请稍等...' + countdownSeconds;
} else {
clearInterval(loginTimer);
login_loginBtn.textContent = '署 名';
login_loginBtn.disabled = false;
}
countdownSeconds--;
}, 1000);
if (!islogin) {
fetchCSRFToken();
login_closeBtn.disabled = false;
loginTimer = setInterval(() => {
if (countdownSeconds > 0) {
login_loginBtn.textContent = '请稍等...' + countdownSeconds;
} else {
clearInterval(loginTimer);
closeLoading?.()
cocoMessage.success('请重新尝试署名');
login_loginBtn.textContent = '署 名';
login_loginBtn.disabled = false;
}
countdownSeconds--;
}, 1000);
}
}
});
@@ -242,13 +265,13 @@ function confirmPixarAction() {
// 打开确认模态框
function openModal(title, msg, type) {
var modal = $('#momentsDeleteModal');
var card = modal.find('.moments-card-widget');
modal.find('.moments-title-text').text(title);
modal.find('.moments-message-text').text(msg);
card.removeClass('theme-red theme-yellow theme-green').addClass('theme-' + type);
$('.moments-btn-cancel, .moments-btn-confirm').prop('disabled', false);
modal.fadeIn(200);
var modal = $('#momentsDeleteModal');
var card = modal.find('.moments-card-widget');
modal.find('.moments-title-text').text(title);
modal.find('.moments-message-text').text(msg);
card.removeClass('theme-red theme-yellow theme-green').addClass('theme-' + type);
$('.moments-btn-cancel, .moments-btn-confirm').prop('disabled', false);
modal.fadeIn(200);
}
templates/assets/js/app.js
+3 -2
View File
@@ -2561,6 +2561,7 @@ async function initNoticeTip() {
if (hasUnread) {
noticeBubble.classList.add('show');
noticeBtn.classList.add('has-notice');
$('.footer_menu a[href="/navigator"]').css('color', '#ecc94b').find('i').css('color', '#ecc94b');
} else {
noticeBubble.classList.remove('show');
noticeBtn.classList.remove('has-notice');
@@ -2802,7 +2803,7 @@ function initjump() {
$.removeCookie('load_type', { path: '/', domain: 'anian.cc' });
window.scroll_param = scrollParam;
if (scrollParam && !isNaN(scrollParam)) {
closeLoading = cocoMessage.loading('自动恢复原线路内容中...');
closeLoading = cocoMessage.loading('自动恢复原内容中...');
}
initTagSwitch().then(() => {
const loadPageTask = () => {
@@ -2831,7 +2832,7 @@ function initjump() {
cocoMessage.success('登出成功！');
} else {
const msg = location.hostname === "anian.cc" ? '主线路' : (location.hostname === "www.anian.cc" ? '副线路' : '测试线路');
cocoMessage.success('已成功切换至${msg}');
cocoMessage.success('已成功切换至' + msg);
}
}).catch(() => closeLoading?.());
}
templates/friends.html
+36 -14
View File
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org"
th:replace="~{modules/layouts/layout :: layout(_head = null,_content = ~{::content},_title = ${title + ' - ' + site.title})}">
th:replace="~{modules/layouts/layout :: layout(_head = null,_content = ~{::content},_title = ${title + ' - ' + site.title})}">
<th:block th:fragment="content">
@@ -19,7 +19,7 @@
<li>
<!-- 全部按钮 -->
<a th:attr="data-href=@{/friends}"
th:classappend="${#lists.isEmpty(param.author) ? 'active' : ''}" class="cat-link">
th:classappend="${#lists.isEmpty(param.author) ? 'active' : ''}" class="cat-link">
全部<span></span>
</a>
</li>
@@ -27,8 +27,8 @@
<th:block th:each="author : ${authors}">
<li>
<a th:attr="data-href=@{|/friends?author=${author}|}"
th:classappend="${#strings.equals(param.author, author) ? 'active' : ''}"
th:text="${author}" class="cat-link">
th:classappend="${#strings.equals(param.author, author) ? 'active' : ''}"
th:text="${author}" class="cat-link">
<span></span>
</a>
</li>
@@ -38,10 +38,9 @@
<div id="post_item" class="moment_list">
<div th:each="postInfo, iterstat: ${friends.items}"
th:id="${'post-'+postInfo.metadata.name}"
class="loop_content p_item moment_item uk-animation-slide-bottom-small"
th:with="spec = ${postInfo.spec}">
<div th:each="postInfo, iterstat: ${friends.items}" th:id="${'post-'+postInfo.metadata.name}"
class="loop_content p_item moment_item uk-animation-slide-bottom-small"
th:with="spec = ${postInfo.spec}">
<div class="p_item_inner">
@@ -58,7 +57,7 @@
</div>
<time itemprop="datePublished"
th:datetime="${#dates.format(spec.pubDate, 'yyyy-MM-dd HH:mm')}">
th:datetime="${#dates.format(spec.pubDate, 'yyyy-MM-dd HH:mm')}">
<th:block th:replace="~{modules/widgets/time :: time(${spec.pubDate})}">
</th:block>
</time>
@@ -72,9 +71,34 @@
<div th:utext="${spec.description}"></div>
</a>
</div>
<!-- 图片列表 -->
<div class="img_list img-dynamic-container">
<div class="list_inner"
th:with="isImgList=${#strings.startsWith(spec.title, 'img:::')}"
th:attr="num=${isImgList ? #arrays.length(#strings.substringAfter(spec.title, 'img:::').split(',')) : 0}">
<!-- 只有识别为图片列表时才渲染 -->
<th:block th:if="${isImgList}">
<!-- 去掉前缀，分割数组 -->
<th:block
th:with="imgArray=${#strings.substringAfter(spec.title, 'img:::').split(',')}">
<th:block th:each="url : ${imgArray}"
th:with="cleanUrl=${#strings.trim(url)}">
<span class="fancybox mo_img"
th:if="${not #strings.isEmpty(cleanUrl)}"
th:href="|/upload/image-host/${cleanUrl}|"
th:data-fancybox="${'post-' + postInfo.metadata.name}">
<img class="lazy"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
th:data-src="|/upload/image-host/${cleanUrl}|"
alt="">
</span>
</th:block>
</th:block>
</th:block>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -88,11 +112,9 @@
<!-- 分页：必须保持在 blog_list_inner 里面 -->
<th:block th:if="${friends.totalPages>1}">
<div id="t_pagination">
<div class="post-paging"
th:if="${friends.hasNext()}">
<div class="post-paging" th:if="${friends.hasNext()}">
<!-- 直接使用后端生成的完整 nextUrl -->
<a th:data="${friends.nextUrl}"
th:text="${theme.config.base_set.site_page}">
<a th:data="${friends.nextUrl}" th:text="${theme.config.base_set.site_page}">
</a>
</div>
</div>
templates/modules/footer.html
+1 -1
View File
@@ -1,5 +1,5 @@
<th:block th:fragment="footer">
<th:block th:with="customJsVersion='1.2.5-4'">
<th:block th:with="customJsVersion='1.2.5-5'">
<!-- 奇遇容器 -->
<div class="center-img-container" id="centerImgContainer">
templates/modules/head.html
+1 -1
View File
@@ -1,4 +1,4 @@
<th:block th:fragment="head" th:with="customJsVersion=${'1.2.5-4'}">
<th:block th:fragment="head" th:with="customJsVersion=${'1.2.5-5'}">
<th:block th:replace="~{'modules/variables/msg'}" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
templates/modules/variables/moments-img-style.html
+353 -73
View File
@@ -1,5 +1,4 @@
<style th:if="${theme.config.moments.img_style == 'one'}">
.img_list .list_inner {
display: flex;
flex-wrap: wrap;
@@ -48,14 +47,13 @@
width: 30%;
margin: 2px;
}
.img_list span:nth-child(1):nth-last-child(4),
.img_list span:nth-child(3):nth-last-child(2),
.img_list span:nth-child(4):nth-last-child(1) {
width: 30%;
}
}
</style>
<style th:if="${theme.config.moments.img_style == 'two'}">
.img_list span:nth-last-child(1):first-child {
@@ -137,7 +135,8 @@
grid-area: 5 / 4 / 7 / 7;
}
.img_list .list_inner[num='5'] span:nth-child(4) img,.img_list .list_inner[num='5'] span:nth-child(5) img {
.img_list .list_inner[num='5'] span:nth-child(4) img,
.img_list .list_inner[num='5'] span:nth-child(5) img {
height: 127.35px;
}
@@ -165,82 +164,363 @@
grid-area: 3 / 3 / 4 / 4;
}
.img_list .list_inner[num='7'] {
display: grid;
/* 采用 6 列网格，支持 50% (span 3) 和 33.3% (span 2) 两种尺寸 */
grid-template-columns: repeat(6, 1fr);
/* 间距修正 */
gap: 6px;
padding: 3px;
/* 清除干扰 */
justify-content: unset;
align-content: unset;
align-items: unset;
}
.img_list .list_inner[num='7'] {
display: grid;
/* 采用 6 列网格，支持 50% (span 3) 和 33.3% (span 2) 两种尺寸 */
grid-template-columns: repeat(6, 1fr);
.img_list .list_inner[num='7'] span {
/* 清除干扰，保持稳定性 */
margin: 0 !important;
padding: 0 !important;
width: auto;
height: auto;
/* 默认尺寸：中等 (33.3% 宽度, span 2/6) */
grid-column: span 2;
}
/* 间距修正 */
gap: 6px;
padding: 3px;
/* 第一行 (Item 1, 2)：大尺寸 (50% 宽度, span 3/6) */
.img_list .list_inner[num='7'] span:nth-child(1),
.img_list .list_inner[num='7'] span:nth-child(2) {
grid-column: span 3;
}
/* 清除干扰 */
justify-content: unset;
align-content: unset;
align-items: unset;
}
/* 第三行 (Item 6, 7)：大尺寸 (50% 宽度, span 3/6) */
.img_list .list_inner[num='7'] span:nth-child(6),
.img_list .list_inner[num='7'] span:nth-child(7) {
grid-column: span 3;
}
.img_list .list_inner[num='7'] span {
/* 清除干扰，保持稳定性 */
margin: 0 !important;
padding: 0 !important;
width: auto;
height: auto;
/* 容器设置：保持 6 列网格，用于计算 1/3 和 1/2 宽度 */
.img_list .list_inner[num='8'] {
display: grid;
grid-template-columns: repeat(6, 1fr); /* 6 列 */
max-height: 100vw;
gap: 6px;
padding: 3px;
justify-content: unset;
align-content: unset;
align-items: unset;
}
/* 默认尺寸：中等 (33.3% 宽度, span 2/6) */
grid-column: span 2;
}
/* 默认规则：应用到所有子项，用于第 1 行和第 3 行 (1/3 宽度) */
.img_list .list_inner[num='8'] span {
margin: 0 !important;
padding: 0 !important;
width: auto;
height: auto;
/* 跨 2 列 = 1/3 宽度 (6列/2=3张/行) */
grid-column: span 2;
}
/* 第一行 (Item 1, 2)：大尺寸 (50% 宽度, span 3/6) */
.img_list .list_inner[num='7'] span:nth-child(1),
.img_list .list_inner[num='7'] span:nth-child(2) {
grid-column: span 3;
}
/* 特殊规则：仅应用于第 2 行的 2 张图片 (1/2 宽度) */
.img_list .list_inner[num='8'] span:nth-child(4),
.img_list .list_inner[num='8'] span:nth-child(5) {
/* 跨 3 列 = 1/2 宽度 (6列/3=2张/行) */
grid-column: span 3;
}
/* 第三行 (Item 6, 7)：大尺寸 (50% 宽度, span 3/6) */
.img_list .list_inner[num='7'] span:nth-child(6),
.img_list .list_inner[num='7'] span:nth-child(7) {
grid-column: span 3;
}
/* 确保第 1 行和第 3 行的宽度不被其他 CSS 规则干扰 */
.img_list .list_inner[num='8'] span:nth-child(-n+3), /* 第 1, 2, 3 个 */
.img_list .list_inner[num='8'] span:nth-child(n+6) { /* 第 6, 7, 8 个 */
grid-column: span 2;
}
/* 容器设置：保持 6 列网格，用于计算 1/3 和 1/2 宽度 */
.img_list .list_inner[num='8'] {
display: grid;
grid-template-columns: repeat(6, 1fr);
/* 6 列 */
max-height: 100vw;
gap: 6px;
padding: 3px;
justify-content: unset;
align-content: unset;
align-items: unset;
}
/* 默认规则：应用到所有子项，用于第 1 行和第 3 行 (1/3 宽度) */
.img_list .list_inner[num='8'] span {
margin: 0 !important;
padding: 0 !important;
width: auto;
height: auto;
/* 跨 2 列 = 1/3 宽度 (6列/2=3张/行) */
grid-column: span 2;
}
/* 特殊规则：仅应用于第 2 行的 2 张图片 (1/2 宽度) */
.img_list .list_inner[num='8'] span:nth-child(4),
.img_list .list_inner[num='8'] span:nth-child(5) {
/* 跨 3 列 = 1/2 宽度 (6列/3=2张/行) */
grid-column: span 3;
}
/* 确保第 1 行和第 3 行的宽度不被其他 CSS 规则干扰 */
.img_list .list_inner[num='8'] span:nth-child(-n+3),
/* 第 1, 2, 3 个 */
.img_list .list_inner[num='8'] span:nth-child(n+6) {
/* 第 6, 7, 8 个 */
grid-column: span 2;
}
/* 10 张：完整矩形（6 列，3+2+2+3） */
.img_list .list_inner[num='10'] {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
padding: 3px;
justify-content: unset;
align-content: unset;
align-items: unset;
}
.img_list .list_inner[num='10'] span {
margin: 0 !important;
padding: 0 !important;
width: auto;
height: auto;
grid-column: span 2;
}
.img_list .list_inner[num='10'] span:nth-child(4),
.img_list .list_inner[num='10'] span:nth-child(5),
.img_list .list_inner[num='10'] span:nth-child(6),
.img_list .list_inner[num='10'] span:nth-child(7) {
grid-column: span 3;
}
/* 11 张：完整矩形（6 列，2+3+3+3） */
.img_list .list_inner[num='11'] {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
padding: 3px;
justify-content: unset;
align-content: unset;
align-items: unset;
}
.img_list .list_inner[num='11'] span {
margin: 0 !important;
padding: 0 !important;
width: auto;
height: auto;
grid-column: span 2;
}
.img_list .list_inner[num='11'] span:nth-child(1),
.img_list .list_inner[num='11'] span:nth-child(2) {
grid-column: span 3;
}
/* 13 张：完整矩形（6 列，3+2+3+2+3） */
.img_list .list_inner[num='13'] {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
padding: 3px;
justify-content: unset;
align-content: unset;
align-items: unset;
}
.img_list .list_inner[num='13'] span {
margin: 0 !important;
padding: 0 !important;
width: auto;
height: auto;
grid-column: span 2;
}
.img_list .list_inner[num='13'] span:nth-child(4),
.img_list .list_inner[num='13'] span:nth-child(5),
.img_list .list_inner[num='13'] span:nth-child(9),
.img_list .list_inner[num='13'] span:nth-child(10) {
grid-column: span 3;
}
/* 14 张：完整矩形（6 列，3+3+2+3+3） */
.img_list .list_inner[num='14'] {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
padding: 3px;
justify-content: unset;
align-content: unset;
align-items: unset;
}
.img_list .list_inner[num='14'] span {
margin: 0 !important;
padding: 0 !important;
width: auto;
height: auto;
grid-column: span 2;
}
.img_list .list_inner[num='14'] span:nth-child(7),
.img_list .list_inner[num='14'] span:nth-child(8) {
grid-column: span 3;
}
/* 16 张：完整矩形（6 列，3+2+3+3+2+3） */
.img_list .list_inner[num='16'] {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
padding: 3px;
justify-content: unset;
align-content: unset;
align-items: unset;
}
.img_list .list_inner[num='16'] span {
margin: 0 !important;
padding: 0 !important;
width: auto;
height: auto;
grid-column: span 2;
}
.img_list .list_inner[num='16'] span:nth-child(4),
.img_list .list_inner[num='16'] span:nth-child(5),
.img_list .list_inner[num='16'] span:nth-child(12),
.img_list .list_inner[num='16'] span:nth-child(13) {
grid-column: span 3;
}
/* 17 张：完整矩形（6 列，2+3+2+3+2+3+2） */
.img_list .list_inner[num='17'] {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
padding: 3px;
justify-content: unset;
align-content: unset;
align-items: unset;
}
.img_list .list_inner[num='17'] span {
margin: 0 !important;
padding: 0 !important;
width: auto;
height: auto;
grid-column: span 2;
}
.img_list .list_inner[num='17'] span:nth-child(1),
.img_list .list_inner[num='17'] span:nth-child(2),
.img_list .list_inner[num='17'] span:nth-child(6),
.img_list .list_inner[num='17'] span:nth-child(7),
.img_list .list_inner[num='17'] span:nth-child(11),
.img_list .list_inner[num='17'] span:nth-child(12),
.img_list .list_inner[num='17'] span:nth-child(16),
.img_list .list_inner[num='17'] span:nth-child(17) {
grid-column: span 3;
}
/* 19 张：完整矩形（6 列，3+3+2+3+3+2+3） */
.img_list .list_inner[num='19'] {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
padding: 3px;
justify-content: unset;
align-content: unset;
align-items: unset;
}
.img_list .list_inner[num='19'] span {
margin: 0 !important;
padding: 0 !important;
width: auto;
height: auto;
grid-column: span 2;
}
.img_list .list_inner[num='19'] span:nth-child(7),
.img_list .list_inner[num='19'] span:nth-child(8),
.img_list .list_inner[num='19'] span:nth-child(15),
.img_list .list_inner[num='19'] span:nth-child(16) {
grid-column: span 3;
}
/* 20 张：完整矩形（6 列，3+2+3+2+3+2+3+2） */
.img_list .list_inner[num='20'] {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
padding: 3px;
justify-content: unset;
align-content: unset;
align-items: unset;
}
.img_list .list_inner[num='20'] span {
margin: 0 !important;
padding: 0 !important;
width: auto;
height: auto;
grid-column: span 2;
}
.img_list .list_inner[num='20'] span:nth-child(4),
.img_list .list_inner[num='20'] span:nth-child(5),
.img_list .list_inner[num='20'] span:nth-child(9),
.img_list .list_inner[num='20'] span:nth-child(10),
.img_list .list_inner[num='20'] span:nth-child(14),
.img_list .list_inner[num='20'] span:nth-child(15),
.img_list .list_inner[num='20'] span:nth-child(19),
.img_list .list_inner[num='20'] span:nth-child(20) {
grid-column: span 3;
}
/* 22 张：完整矩形（6 列，3+3+2+3+3+2+3+3） */
.img_list .list_inner[num='22'] {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
padding: 3px;
justify-content: unset;
align-content: unset;
align-items: unset;
}
.img_list .list_inner[num='22'] span {
margin: 0 !important;
padding: 0 !important;
width: auto;
height: auto;
grid-column: span 2;
}
.img_list .list_inner[num='22'] span:nth-child(7),
.img_list .list_inner[num='22'] span:nth-child(8),
.img_list .list_inner[num='22'] span:nth-child(15),
.img_list .list_inner[num='22'] span:nth-child(16) {
grid-column: span 3;
}
/* 23 张：完整矩形（6 列，3+2+3+2+3+2+3+2+3） */
.img_list .list_inner[num='23'] {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
padding: 3px;
justify-content: unset;
align-content: unset;
align-items: unset;
}
.img_list .list_inner[num='23'] span {
margin: 0 !important;
padding: 0 !important;
width: auto;
height: auto;
grid-column: span 2;
}
.img_list .list_inner[num='23'] span:nth-child(4),
.img_list .list_inner[num='23'] span:nth-child(5),
.img_list .list_inner[num='23'] span:nth-child(9),
.img_list .list_inner[num='23'] span:nth-child(10),
.img_list .list_inner[num='23'] span:nth-child(14),
.img_list .list_inner[num='23'] span:nth-child(15),
.img_list .list_inner[num='23'] span:nth-child(19),
.img_list .list_inner[num='23'] span:nth-child(20) {
grid-column: span 3;
}
.img_list span img {