朋友圈支持图片显示;手机端新增全局公告提示;更新部分页面;优化部分效果
This commit is contained in:
@@ -2,6 +2,12 @@
|
|||||||
|
|
||||||
> 基于原作者v1.2.5代码修改
|
> 基于原作者v1.2.5代码修改
|
||||||
|
|
||||||
|
#### v1.2.5-5
|
||||||
|
1. 朋友圈支持图片显示(需同步更新插件)
|
||||||
|
2. 手机端底部导航栏新增公告未读提示
|
||||||
|
3. 更新通讯录、储物柜
|
||||||
|
4. 优化操作提示、图片排版
|
||||||
|
|
||||||
#### v1.2.5-4
|
#### v1.2.5-4
|
||||||
1. 修复侧边栏测速异常、拖拽片刻图片异常、手机端文章目录异常、页面提示异常
|
1. 修复侧边栏测速异常、拖拽片刻图片异常、手机端文章目录异常、页面提示异常
|
||||||
2. 优化多种场景下的提示、衔接、样式
|
2. 优化多种场景下的提示、衔接、样式
|
||||||
|
|||||||
@@ -299,7 +299,7 @@
|
|||||||
<div class="people-grid">
|
<div class="people-grid">
|
||||||
<div class="person">
|
<div class="person">
|
||||||
<div class="avatar">
|
<div class="avatar">
|
||||||
<img src="/upload/8aea7800gy1i2vfbxoqhdj24w07c0b2p.jpg">
|
<img src="/upload/20260416214530_191_129.jpg">
|
||||||
</div>
|
</div>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p class="name">黄诗扶</p>
|
<p class="name">黄诗扶</p>
|
||||||
@@ -310,18 +310,18 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="person">
|
<div class="person">
|
||||||
<div class="avatar">
|
<div class="avatar">
|
||||||
<img src="/upload/ec39c62fly1i3rextah4gj22dc35s1ky.jpg">
|
<img src="/upload/20260416213611_190_129.jpg">
|
||||||
</div>
|
</div>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p class="name">双笙</p>
|
<p class="name">双笙</p>
|
||||||
<p class="bio">
|
<p class="bio">
|
||||||
什么?你问我为什么喜欢包包?可能因为是“青春”吧?
|
什么?你问我为什么喜欢包包?可能因为是青春吧?
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="person">
|
<div class="person">
|
||||||
<div class="avatar">
|
<div class="avatar">
|
||||||
<img src="/upload/005Jyswjgy1hywx7z7sb7j30zk1betbd.jpg">
|
<img src="/upload/005Jyswjgy1ic7xfxtlu8j33402c0npe.jpg">
|
||||||
</div>
|
</div>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p class="name">浅影阿</p>
|
<p class="name">浅影阿</p>
|
||||||
@@ -332,12 +332,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="person">
|
<div class="person">
|
||||||
<div class="avatar">
|
<div class="avatar">
|
||||||
<img src="/upload/ab0efe4ely1hnpfzqqw1oj23ls5eoqvg.jpg">
|
<img src="/upload/67f2efd2gy1i8iv8nkuqjj23344mokjp.jpg">
|
||||||
</div>
|
</div>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p class="name">平生不晚</p>
|
<p class="name">玄觞</p>
|
||||||
<p class="bio">
|
<p class="bio">
|
||||||
首先是戏腔好听,然后是妆造好看,最后就来到了这里
|
你们古风圈,怎么都喊女生王子,喊男生二婶呢?
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -199,8 +199,9 @@
|
|||||||
|
|
||||||
if (isUnread) {
|
if (isUnread) {
|
||||||
typeof initNoticeTip === 'function' && initNoticeTip();
|
typeof initNoticeTip === 'function' && initNoticeTip();
|
||||||
noticeCard.querySelector('.notice-title').textContent = `通知书`;
|
$('.footer_menu a[href="/navigator"]').css('color', '#ecc94b').find('i').css('color', '#ecc94b');
|
||||||
noticeCard.querySelector('.notice-desc').textContent = `有新通知待查看`;
|
noticeCard.querySelector('.notice-title').textContent = '通知书';
|
||||||
|
noticeCard.querySelector('.notice-desc').textContent = '有新通知待查看';
|
||||||
noticeCard.classList.add('notice-unread');
|
noticeCard.classList.add('notice-unread');
|
||||||
if(decorCircle) decorCircle.style.background = '#fef3c7';
|
if(decorCircle) decorCircle.style.background = '#fef3c7';
|
||||||
|
|
||||||
|
|||||||
+113
-88
@@ -3,7 +3,6 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-family: "Inter", "Microsoft YaHei", Arial;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.store {
|
.store {
|
||||||
@@ -13,7 +12,7 @@
|
|||||||
--danger: #E74C3C;
|
--danger: #E74C3C;
|
||||||
--bg: #F9FFFB;
|
--bg: #F9FFFB;
|
||||||
--shadow: 0 12px 30px rgba(80, 200, 120, .12);
|
--shadow: 0 12px 30px rgba(80, 200, 120, .12);
|
||||||
--radius: 18px;
|
--radius: 8px;
|
||||||
padding: 26px 14px;
|
padding: 26px 14px;
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
}
|
}
|
||||||
@@ -59,7 +58,7 @@
|
|||||||
#tag-search {
|
#tag-search {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 7px 12px 7px 34px;
|
padding: 7px 12px 7px 34px;
|
||||||
border-radius: 10px;
|
border-radius: 8px;
|
||||||
border: 1px solid #c9efd6;
|
border: 1px solid #c9efd6;
|
||||||
outline: none;
|
outline: none;
|
||||||
background: #fafffb;
|
background: #fafffb;
|
||||||
@@ -79,7 +78,7 @@
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
border-radius: 12px;
|
border-radius: 8px;
|
||||||
border: 1px solid #c9efd6;
|
border: 1px solid #c9efd6;
|
||||||
background: rgba(144, 238, 144, .08);
|
background: rgba(144, 238, 144, .08);
|
||||||
max-height: 100px;
|
max-height: 100px;
|
||||||
@@ -89,7 +88,7 @@
|
|||||||
|
|
||||||
.store .tag-item {
|
.store .tag-item {
|
||||||
padding: 5px 7px;
|
padding: 5px 7px;
|
||||||
border-radius: 9px;
|
border-radius: 8px;
|
||||||
border: 1px solid #90ee90;
|
border: 1px solid #90ee90;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -107,31 +106,66 @@
|
|||||||
.store .no-result {
|
.store .no-result {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
color: #7f8c8d;
|
color: #7f8c8d;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
padding: 8px 0;
|
min-height: 100%;
|
||||||
|
padding: 0;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 输入框 */
|
/* 输入框 */
|
||||||
.store .input-group {
|
.store .input-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 8px;
|
||||||
margin: 16px 0;
|
margin: 16px 0;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store .section-divider {
|
||||||
|
position: relative;
|
||||||
|
height: 18px;
|
||||||
|
margin: 6px 0 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store .section-divider::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background: linear-gradient(90deg, rgba(80, 200, 120, 0), rgba(80, 200, 120, .55), rgba(80, 200, 120, 0));
|
||||||
|
box-shadow: 0 1px 0 rgba(80, 200, 120, .12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.store .section-divider::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
transform: translate(-50%, -50%) rotate(45deg);
|
||||||
|
border-radius: 2px;
|
||||||
|
background: linear-gradient(135deg, #90ee90, #50c878);
|
||||||
|
box-shadow: -14px 0 0 -3px rgba(80, 200, 120, .5), 14px 0 0 -3px rgba(80, 200, 120, .5), 0 0 0 2px #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
#file-path {
|
#file-path {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 8px 14px;
|
padding: 8px 14px;
|
||||||
border-radius: 12px;
|
border-radius: 8px;
|
||||||
border: 2px solid #e8f7ec;
|
border: 2px solid #e8f7ec;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#submit-btn {
|
#submit-btn {
|
||||||
padding: 10px;
|
padding: 10px 20px;
|
||||||
border-radius: 12px;
|
border-radius: 8px;
|
||||||
border: none;
|
border: none;
|
||||||
background: linear-gradient(135deg, #50c878, #3a9156);
|
background: linear-gradient(135deg, #50c878, #3a9156);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@@ -139,17 +173,6 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 底部提示(改成浅黄色系) */
|
|
||||||
.store .tips {
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
color: #a97400;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: rgba(255, 215, 0, .12);
|
|
||||||
border: 1px solid rgba(243, 156, 18, .25);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 手机端 */
|
/* 手机端 */
|
||||||
@media(max-width:520px) {
|
@media(max-width:520px) {
|
||||||
.store {
|
.store {
|
||||||
@@ -166,7 +189,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.store .input-group {
|
.store .input-group {
|
||||||
flex-direction: column
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
#submit-btn {
|
#submit-btn {
|
||||||
@@ -176,34 +200,11 @@
|
|||||||
.store .tag-list {
|
.store .tag-list {
|
||||||
max-height: 120px
|
max-height: 120px
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/* Toast */
|
#file-path {
|
||||||
.custom-toast {
|
width: 100%;
|
||||||
position: fixed;
|
box-sizing: border-box;
|
||||||
top: 26px;
|
}
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%) translateY(-80px);
|
|
||||||
background: #2ECC71;
|
|
||||||
color: #fff;
|
|
||||||
padding: 12px 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
transition: .4s;
|
|
||||||
opacity: 0;
|
|
||||||
z-index: 9999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast-show {
|
|
||||||
transform: translateX(-50%) translateY(0);
|
|
||||||
opacity: 1
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast-error {
|
|
||||||
background: #E74C3C
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast-warning {
|
|
||||||
background: #F39C12
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@@ -211,58 +212,55 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="top-bar"></div>
|
<div class="top-bar"></div>
|
||||||
|
|
||||||
<h1 class="title">Anian的储物柜</h1>
|
<h1 class="title">储物柜</h1>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<input id="file-path" placeholder="请输入翻找目标..." autocomplete="off">
|
||||||
|
<button id="submit-btn">翻 找</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-divider" aria-hidden="true"></div>
|
||||||
|
|
||||||
<div class="tag-container">
|
<div class="tag-container">
|
||||||
<div class="tag-search-wrapper">
|
<div class="tag-search-wrapper">
|
||||||
<span class="search-icon">🔍</span>
|
<span class="search-icon"><i class="ri-search-line"></i></span>
|
||||||
<input id="tag-search" placeholder="搜索标签">
|
<input id="tag-search" placeholder="搜索标签..." autocomplete="off">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tag-list">
|
<div class="tag-list">
|
||||||
<div class="tag-item" data-value="test.zip">测试压缩包</div>
|
<div class="tag-item" data-value="/upload/jiazai.gif">加载动画</div>
|
||||||
<div class="tag-item" data-value="docs/report.pdf">示例报告</div>
|
<div class="tag-item" data-value="/upload/logo.png">网站Logo</div>
|
||||||
<div class="tag-item" data-value="images/banner.jpg">横幅图片</div>
|
<div class="tag-item" data-value="/upload/jiazai.gif">加载动画</div>
|
||||||
<div class="tag-item" data-value="software/setup.exe">安装程序</div>
|
<div class="tag-item" data-value="/upload/logo.png">网站Logo</div> <div class="tag-item" data-value="/upload/jiazai.gif">加载动画</div>
|
||||||
|
<div class="tag-item" data-value="/upload/logo.png">网站Logo</div> <div class="tag-item" data-value="/upload/jiazai.gif">加载动画</div>
|
||||||
|
<div class="tag-item" data-value="/upload/logo.png">网站Logo</div> <div class="tag-item" data-value="/upload/jiazai.gif">加载动画</div>
|
||||||
|
<div class="tag-item" data-value="/upload/logo.png">网站Logo</div> <div class="tag-item" data-value="/upload/jiazai.gif">加载动画</div>
|
||||||
|
<div class="tag-item" data-value="/upload/logo.png">网站Logo</div>
|
||||||
|
|
||||||
<div class="no-result" id="noResult">没有匹配的结果</div>
|
<div class="no-result" id="noResult">没有匹配的结果</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="input-group">
|
|
||||||
<input id="file-path" placeholder="请输入路径" autocomplete="off">
|
|
||||||
<button id="submit-btn">访问 / 下载</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="tips">⚠️ 错误过多将可能被封禁</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="custom-toast" id="customToast"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function initializeStoreEvents() {
|
function initializeStoreEvents() {
|
||||||
|
let closeLoading = null;
|
||||||
const container = document.querySelector(".store");
|
const container = document.querySelector(".store");
|
||||||
if (!container || container.dataset.init === "1") return;
|
if (!container || container.dataset.init === "1") return;
|
||||||
container.dataset.init = "1";
|
container.dataset.init = "1";
|
||||||
|
|
||||||
const input = document.getElementById('file-path');
|
const input = document.getElementById('file-path');
|
||||||
const btn = document.getElementById('submit-btn');
|
const btn = document.getElementById('submit-btn');
|
||||||
const toast = document.getElementById('customToast');
|
|
||||||
const tagItems = document.querySelectorAll('.tag-item');
|
const tagItems = document.querySelectorAll('.tag-item');
|
||||||
const tagSearch = document.getElementById('tag-search');
|
const tagSearch = document.getElementById('tag-search');
|
||||||
const noResult = document.getElementById('noResult');
|
const noResult = document.getElementById('noResult');
|
||||||
|
|
||||||
function showToast(msg, type = 'warning') {
|
|
||||||
toast.textContent = msg;
|
|
||||||
toast.className = 'custom-toast toast-' + type + ' toast-show';
|
|
||||||
setTimeout(() => toast.classList.remove('toast-show'), 2600);
|
|
||||||
}
|
|
||||||
|
|
||||||
tagItems.forEach(t => {
|
tagItems.forEach(t => {
|
||||||
t.onclick = () => {
|
t.onclick = () => {
|
||||||
input.value = t.dataset.value;
|
input.value = t.dataset.value;
|
||||||
showToast('已填入 ' + t.dataset.value, 'success');
|
cocoMessage.success('已填入对应标签信息');
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -277,39 +275,66 @@
|
|||||||
if (show) visible++;
|
if (show) visible++;
|
||||||
});
|
});
|
||||||
|
|
||||||
noResult.style.display = visible === 0 ? 'block' : 'none';
|
noResult.style.display = visible === 0 ? 'flex' : 'none';
|
||||||
};
|
};
|
||||||
|
|
||||||
function check(url) {
|
function check(url) {
|
||||||
return new Promise(r => {
|
return new Promise(r => {
|
||||||
const xhr = new XMLHttpRequest();
|
const xhr = new XMLHttpRequest();
|
||||||
xhr.open('HEAD', url, true);
|
try {
|
||||||
|
xhr.open('HEAD', url, true);
|
||||||
|
} catch (e) {
|
||||||
|
r(0);
|
||||||
|
return;
|
||||||
|
}
|
||||||
xhr.timeout = 5000;
|
xhr.timeout = 5000;
|
||||||
xhr.onload = () => r(xhr.status === 200);
|
xhr.onload = () => r(xhr.status);
|
||||||
xhr.onerror = () => r(false);
|
xhr.onerror = () => r(0);
|
||||||
xhr.ontimeout = () => r(false);
|
xhr.ontimeout = () => r(0);
|
||||||
xhr.send();
|
xhr.send();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function normalizeDestination(value) {
|
||||||
|
const trimmed = value.trim();
|
||||||
|
if (!trimmed || /\\/.test(trimmed)) return null;
|
||||||
|
|
||||||
|
const url = trimmed.charAt(0) === '/' ? trimmed : '/' + trimmed;
|
||||||
|
if (/^\/\//.test(url)) return null;
|
||||||
|
|
||||||
|
return url;
|
||||||
|
}
|
||||||
|
|
||||||
async function go() {
|
async function go() {
|
||||||
const v = input.value.trim();
|
const v = input.value.trim();
|
||||||
if (!v) return showToast('请输入路径');
|
if (!v) return cocoMessage.warning('请输入翻找目标');
|
||||||
const url = '/' + v;
|
const url = normalizeDestination(v);
|
||||||
btn.textContent = '检测中...';
|
if (!url) return cocoMessage.warning('翻找目标无效');
|
||||||
|
btn.textContent = '翻找中...';
|
||||||
|
closeLoading = cocoMessage.loading('正在翻找中,请稍候...');
|
||||||
btn.disabled = true;
|
btn.disabled = true;
|
||||||
const ok = await check(url);
|
try {
|
||||||
if (ok) {
|
const status = await check(url);
|
||||||
showToast('资源存在,跳转中', 'success');
|
if (status === 200) {
|
||||||
setTimeout(() => location.href = url, 700);
|
cocoMessage.success('翻找成功,即将打开目标页面');
|
||||||
} else showToast('资源不存在', 'error');
|
window.open(url, '_blank');
|
||||||
setTimeout(() => { btn.textContent = '访问 / 下载'; btn.disabled = false }, 700);
|
} else if (status === 404) {
|
||||||
|
cocoMessage.warning('翻找失败,失败过多将被封禁');
|
||||||
|
} else {
|
||||||
|
cocoMessage.error('翻找异常,请重试或刷新页面');
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
closeLoading?.();
|
||||||
|
closeLoading = null;
|
||||||
|
btn.textContent = '翻 找';
|
||||||
|
btn.disabled = false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
btn.onclick = go;
|
btn.onclick = go;
|
||||||
input.onkeydown = e => { if (e.key === 'Enter') go(); };
|
input.onkeydown = e => { if (e.key === 'Enter') go(); };
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", initializeStoreEvents);
|
initializeStoreEvents();
|
||||||
document.addEventListener("pjax:complete", initializeStoreEvents);
|
|
||||||
</script>
|
</script>
|
||||||
@@ -504,11 +504,12 @@ a:visited {
|
|||||||
color: #252525;
|
color: #252525;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 侧边栏颜色异常
|
||||||
a:hover,
|
a:hover,
|
||||||
a:focus,
|
a:focus,
|
||||||
a:active {
|
a:active {
|
||||||
color: #191970;
|
color: #191970;
|
||||||
}
|
} */
|
||||||
|
|
||||||
a:focus {
|
a:focus {
|
||||||
outline: thin dotted;
|
outline: thin dotted;
|
||||||
|
|||||||
@@ -30,6 +30,7 @@ let csrfToken = '';
|
|||||||
let publicKey = '';
|
let publicKey = '';
|
||||||
let loginTimer = null;
|
let loginTimer = null;
|
||||||
let countdownSeconds = 3;
|
let countdownSeconds = 3;
|
||||||
|
let closeLoading = null;
|
||||||
const login_modal = document.getElementById('customLoginModal');
|
const login_modal = document.getElementById('customLoginModal');
|
||||||
const login_closeBtn = document.getElementById('closeLoginModal');
|
const login_closeBtn = document.getElementById('closeLoginModal');
|
||||||
const login_loginBtn = document.getElementById('customLoginBtn');
|
const login_loginBtn = document.getElementById('customLoginBtn');
|
||||||
@@ -39,6 +40,7 @@ async function fetchCSRFToken() {
|
|||||||
login_modal.classList.add('show');
|
login_modal.classList.add('show');
|
||||||
login_loginBtn.disabled = true;
|
login_loginBtn.disabled = true;
|
||||||
login_loginBtn.textContent = '加载中...';
|
login_loginBtn.textContent = '加载中...';
|
||||||
|
closeLoading = cocoMessage.loading('正在加载署名信息...');
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch('/login', { credentials: 'include' });
|
const response = await fetch('/login', { credentials: 'include' });
|
||||||
@@ -62,19 +64,23 @@ async function fetchCSRFToken() {
|
|||||||
publicKey = publicKeyMatch[1].replace(/\\\//g, '/');
|
publicKey = publicKeyMatch[1].replace(/\\\//g, '/');
|
||||||
return 'ok';
|
return 'ok';
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
|
closeLoading?.()
|
||||||
|
cocoMessage.error('署名信息加载失败,请刷新');
|
||||||
|
if (loginTimer) { clearInterval(loginTimer) }
|
||||||
|
login_loginBtn.textContent = '错误!请刷新';
|
||||||
|
login_loginBtn.disabled = true;
|
||||||
return 'error';
|
return 'error';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 打开弹窗逻辑
|
// 打开弹窗逻辑
|
||||||
async function open_login_box() {
|
async function open_login_box() {
|
||||||
if (loginTimer) {
|
if (loginTimer) { clearInterval(loginTimer) }
|
||||||
clearInterval(loginTimer);
|
|
||||||
}
|
|
||||||
countdownSeconds = 3;
|
countdownSeconds = 3;
|
||||||
const success = await fetchCSRFToken();
|
const success = await fetchCSRFToken();
|
||||||
if (success === 'logged') {
|
if (success === 'logged') {
|
||||||
cocoMessage.success('您已经署名过了,请刷新');
|
closeLoading?.()
|
||||||
|
cocoMessage.success('您已署名成功,请刷新');
|
||||||
login_modal.classList.remove('show');
|
login_modal.classList.remove('show');
|
||||||
} else if (success === 'ok') {
|
} else if (success === 'ok') {
|
||||||
loginTimer = setInterval(() => {
|
loginTimer = setInterval(() => {
|
||||||
@@ -82,12 +88,15 @@ async function open_login_box() {
|
|||||||
login_loginBtn.textContent = '请稍等...' + countdownSeconds;
|
login_loginBtn.textContent = '请稍等...' + countdownSeconds;
|
||||||
} else {
|
} else {
|
||||||
clearInterval(loginTimer);
|
clearInterval(loginTimer);
|
||||||
|
closeLoading?.()
|
||||||
|
cocoMessage.success('署名信息加载完成');
|
||||||
login_loginBtn.textContent = '署 名';
|
login_loginBtn.textContent = '署 名';
|
||||||
login_loginBtn.disabled = false;
|
login_loginBtn.disabled = false;
|
||||||
}
|
}
|
||||||
countdownSeconds--;
|
countdownSeconds--;
|
||||||
}, 1000);
|
}, 1000);
|
||||||
} else {
|
} else {
|
||||||
|
closeLoading?.()
|
||||||
cocoMessage.error('服务器错误,请刷新');
|
cocoMessage.error('服务器错误,请刷新');
|
||||||
login_modal.classList.remove('show');
|
login_modal.classList.remove('show');
|
||||||
}
|
}
|
||||||
@@ -95,6 +104,7 @@ async function open_login_box() {
|
|||||||
|
|
||||||
// 关闭弹窗
|
// 关闭弹窗
|
||||||
login_closeBtn.addEventListener('click', () => {
|
login_closeBtn.addEventListener('click', () => {
|
||||||
|
closeLoading?.()
|
||||||
login_modal.classList.remove('show');
|
login_modal.classList.remove('show');
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -111,6 +121,7 @@ function encryptPassword(password) {
|
|||||||
|
|
||||||
// 提交登录
|
// 提交登录
|
||||||
login_loginBtn.addEventListener('click', async () => {
|
login_loginBtn.addEventListener('click', async () => {
|
||||||
|
let islogin = false;
|
||||||
const username = document.getElementById('customUsername').value.trim();
|
const username = document.getElementById('customUsername').value.trim();
|
||||||
const password = document.getElementById('customPassword').value.trim();
|
const password = document.getElementById('customPassword').value.trim();
|
||||||
if (!username || !password) {
|
if (!username || !password) {
|
||||||
@@ -119,7 +130,9 @@ login_loginBtn.addEventListener('click', async () => {
|
|||||||
}
|
}
|
||||||
const encryptedPwd = encryptPassword(password);
|
const encryptedPwd = encryptPassword(password);
|
||||||
login_loginBtn.disabled = true;
|
login_loginBtn.disabled = true;
|
||||||
|
login_closeBtn.disabled = true;
|
||||||
login_loginBtn.textContent = '验证中...';
|
login_loginBtn.textContent = '验证中...';
|
||||||
|
closeLoading = cocoMessage.loading('正在验证信息...');
|
||||||
try {
|
try {
|
||||||
countdownSeconds = 3
|
countdownSeconds = 3
|
||||||
const response = await fetch('/login', {
|
const response = await fetch('/login', {
|
||||||
@@ -141,6 +154,8 @@ login_loginBtn.addEventListener('click', async () => {
|
|||||||
clearInterval(loginTimer);
|
clearInterval(loginTimer);
|
||||||
}
|
}
|
||||||
if (finalUrl.includes('/uc')) {
|
if (finalUrl.includes('/uc')) {
|
||||||
|
islogin = true;
|
||||||
|
closeLoading?.()
|
||||||
cocoMessage.success('署名成功,正在跳转...');
|
cocoMessage.success('署名成功,正在跳转...');
|
||||||
login_loginBtn.textContent = '跳转中...';
|
login_loginBtn.textContent = '跳转中...';
|
||||||
const currentScrollTop = window.scrollY || document.documentElement.scrollTop;
|
const currentScrollTop = window.scrollY || document.documentElement.scrollTop;
|
||||||
@@ -148,24 +163,32 @@ login_loginBtn.addEventListener('click', async () => {
|
|||||||
$.cookie('load_type', 'login', { path: '/', domain: 'anian.cc' });
|
$.cookie('load_type', 'login', { path: '/', domain: 'anian.cc' });
|
||||||
window.location.reload();
|
window.location.reload();
|
||||||
} else if (finalUrl.includes('error=invalid-credential')) {
|
} else if (finalUrl.includes('error=invalid-credential')) {
|
||||||
|
closeLoading?.()
|
||||||
cocoMessage.warning('署名人与心上锁不匹配');
|
cocoMessage.warning('署名人与心上锁不匹配');
|
||||||
fetchCSRFToken();
|
|
||||||
} else {
|
} else {
|
||||||
|
closeLoading?.()
|
||||||
cocoMessage.error('速度过快,请稍后重试');
|
cocoMessage.error('速度过快,请稍后重试');
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
|
closeLoading?.()
|
||||||
cocoMessage.error('服务器连接失败');
|
cocoMessage.error('服务器连接失败');
|
||||||
} finally {
|
} finally {
|
||||||
loginTimer = setInterval(() => {
|
if (!islogin) {
|
||||||
if (countdownSeconds > 0) {
|
fetchCSRFToken();
|
||||||
login_loginBtn.textContent = '请稍等...' + countdownSeconds;
|
login_closeBtn.disabled = false;
|
||||||
} else {
|
loginTimer = setInterval(() => {
|
||||||
clearInterval(loginTimer);
|
if (countdownSeconds > 0) {
|
||||||
login_loginBtn.textContent = '署 名';
|
login_loginBtn.textContent = '请稍等...' + countdownSeconds;
|
||||||
login_loginBtn.disabled = false;
|
} else {
|
||||||
}
|
clearInterval(loginTimer);
|
||||||
countdownSeconds--;
|
closeLoading?.()
|
||||||
}, 1000);
|
cocoMessage.success('请重新尝试署名');
|
||||||
|
login_loginBtn.textContent = '署 名';
|
||||||
|
login_loginBtn.disabled = false;
|
||||||
|
}
|
||||||
|
countdownSeconds--;
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -242,13 +265,13 @@ function confirmPixarAction() {
|
|||||||
|
|
||||||
// 打开确认模态框
|
// 打开确认模态框
|
||||||
function openModal(title, msg, type) {
|
function openModal(title, msg, type) {
|
||||||
var modal = $('#momentsDeleteModal');
|
var modal = $('#momentsDeleteModal');
|
||||||
var card = modal.find('.moments-card-widget');
|
var card = modal.find('.moments-card-widget');
|
||||||
modal.find('.moments-title-text').text(title);
|
modal.find('.moments-title-text').text(title);
|
||||||
modal.find('.moments-message-text').text(msg);
|
modal.find('.moments-message-text').text(msg);
|
||||||
card.removeClass('theme-red theme-yellow theme-green').addClass('theme-' + type);
|
card.removeClass('theme-red theme-yellow theme-green').addClass('theme-' + type);
|
||||||
$('.moments-btn-cancel, .moments-btn-confirm').prop('disabled', false);
|
$('.moments-btn-cancel, .moments-btn-confirm').prop('disabled', false);
|
||||||
modal.fadeIn(200);
|
modal.fadeIn(200);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -2561,6 +2561,7 @@ async function initNoticeTip() {
|
|||||||
if (hasUnread) {
|
if (hasUnread) {
|
||||||
noticeBubble.classList.add('show');
|
noticeBubble.classList.add('show');
|
||||||
noticeBtn.classList.add('has-notice');
|
noticeBtn.classList.add('has-notice');
|
||||||
|
$('.footer_menu a[href="/navigator"]').css('color', '#ecc94b').find('i').css('color', '#ecc94b');
|
||||||
} else {
|
} else {
|
||||||
noticeBubble.classList.remove('show');
|
noticeBubble.classList.remove('show');
|
||||||
noticeBtn.classList.remove('has-notice');
|
noticeBtn.classList.remove('has-notice');
|
||||||
@@ -2802,7 +2803,7 @@ function initjump() {
|
|||||||
$.removeCookie('load_type', { path: '/', domain: 'anian.cc' });
|
$.removeCookie('load_type', { path: '/', domain: 'anian.cc' });
|
||||||
window.scroll_param = scrollParam;
|
window.scroll_param = scrollParam;
|
||||||
if (scrollParam && !isNaN(scrollParam)) {
|
if (scrollParam && !isNaN(scrollParam)) {
|
||||||
closeLoading = cocoMessage.loading('自动恢复原线路内容中...');
|
closeLoading = cocoMessage.loading('自动恢复原内容中...');
|
||||||
}
|
}
|
||||||
initTagSwitch().then(() => {
|
initTagSwitch().then(() => {
|
||||||
const loadPageTask = () => {
|
const loadPageTask = () => {
|
||||||
@@ -2831,7 +2832,7 @@ function initjump() {
|
|||||||
cocoMessage.success('登出成功!');
|
cocoMessage.success('登出成功!');
|
||||||
} else {
|
} else {
|
||||||
const msg = location.hostname === "anian.cc" ? '主线路' : (location.hostname === "www.anian.cc" ? '副线路' : '测试线路');
|
const msg = location.hostname === "anian.cc" ? '主线路' : (location.hostname === "www.anian.cc" ? '副线路' : '测试线路');
|
||||||
cocoMessage.success('已成功切换至${msg}');
|
cocoMessage.success('已成功切换至' + msg);
|
||||||
}
|
}
|
||||||
}).catch(() => closeLoading?.());
|
}).catch(() => closeLoading?.());
|
||||||
}
|
}
|
||||||
|
|||||||
+36
-14
@@ -1,6 +1,6 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html xmlns:th="https://www.thymeleaf.org"
|
<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">
|
<th:block th:fragment="content">
|
||||||
|
|
||||||
@@ -19,7 +19,7 @@
|
|||||||
<li>
|
<li>
|
||||||
<!-- 全部按钮 -->
|
<!-- 全部按钮 -->
|
||||||
<a th:attr="data-href=@{/friends}"
|
<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>
|
全部<span></span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
@@ -27,8 +27,8 @@
|
|||||||
<th:block th:each="author : ${authors}">
|
<th:block th:each="author : ${authors}">
|
||||||
<li>
|
<li>
|
||||||
<a th:attr="data-href=@{|/friends?author=${author}|}"
|
<a th:attr="data-href=@{|/friends?author=${author}|}"
|
||||||
th:classappend="${#strings.equals(param.author, author) ? 'active' : ''}"
|
th:classappend="${#strings.equals(param.author, author) ? 'active' : ''}"
|
||||||
th:text="${author}" class="cat-link">
|
th:text="${author}" class="cat-link">
|
||||||
<span></span>
|
<span></span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
@@ -38,10 +38,9 @@
|
|||||||
|
|
||||||
<div id="post_item" class="moment_list">
|
<div id="post_item" class="moment_list">
|
||||||
|
|
||||||
<div th:each="postInfo, iterstat: ${friends.items}"
|
<div th:each="postInfo, iterstat: ${friends.items}" th:id="${'post-'+postInfo.metadata.name}"
|
||||||
th:id="${'post-'+postInfo.metadata.name}"
|
class="loop_content p_item moment_item uk-animation-slide-bottom-small"
|
||||||
class="loop_content p_item moment_item uk-animation-slide-bottom-small"
|
th:with="spec = ${postInfo.spec}">
|
||||||
th:with="spec = ${postInfo.spec}">
|
|
||||||
|
|
||||||
<div class="p_item_inner">
|
<div class="p_item_inner">
|
||||||
|
|
||||||
@@ -58,7 +57,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<time itemprop="datePublished"
|
<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 th:replace="~{modules/widgets/time :: time(${spec.pubDate})}">
|
||||||
</th:block>
|
</th:block>
|
||||||
</time>
|
</time>
|
||||||
@@ -72,9 +71,34 @@
|
|||||||
<div th:utext="${spec.description}"></div>
|
<div th:utext="${spec.description}"></div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -88,11 +112,9 @@
|
|||||||
<!-- 分页:必须保持在 blog_list_inner 里面 -->
|
<!-- 分页:必须保持在 blog_list_inner 里面 -->
|
||||||
<th:block th:if="${friends.totalPages>1}">
|
<th:block th:if="${friends.totalPages>1}">
|
||||||
<div id="t_pagination">
|
<div id="t_pagination">
|
||||||
<div class="post-paging"
|
<div class="post-paging" th:if="${friends.hasNext()}">
|
||||||
th:if="${friends.hasNext()}">
|
|
||||||
<!-- 直接使用后端生成的完整 nextUrl -->
|
<!-- 直接使用后端生成的完整 nextUrl -->
|
||||||
<a th:data="${friends.nextUrl}"
|
<a th:data="${friends.nextUrl}" th:text="${theme.config.base_set.site_page}">
|
||||||
th:text="${theme.config.base_set.site_page}">
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<th:block th:fragment="footer">
|
<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">
|
<div class="center-img-container" id="centerImgContainer">
|
||||||
|
|||||||
@@ -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'}" />
|
<th:block th:replace="~{'modules/variables/msg'}" />
|
||||||
<meta charset="UTF-8">
|
<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">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
<style th:if="${theme.config.moments.img_style == 'one'}">
|
<style th:if="${theme.config.moments.img_style == 'one'}">
|
||||||
|
|
||||||
.img_list .list_inner {
|
.img_list .list_inner {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
@@ -48,14 +47,13 @@
|
|||||||
width: 30%;
|
width: 30%;
|
||||||
margin: 2px;
|
margin: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img_list span:nth-child(1):nth-last-child(4),
|
.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(3):nth-last-child(2),
|
||||||
.img_list span:nth-child(4):nth-last-child(1) {
|
.img_list span:nth-child(4):nth-last-child(1) {
|
||||||
width: 30%;
|
width: 30%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<style th:if="${theme.config.moments.img_style == 'two'}">
|
<style th:if="${theme.config.moments.img_style == 'two'}">
|
||||||
.img_list span:nth-last-child(1):first-child {
|
.img_list span:nth-last-child(1):first-child {
|
||||||
@@ -137,7 +135,8 @@
|
|||||||
grid-area: 5 / 4 / 7 / 7;
|
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;
|
height: 127.35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -165,82 +164,363 @@
|
|||||||
grid-area: 3 / 3 / 4 / 4;
|
grid-area: 3 / 3 / 4 / 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img_list .list_inner[num='7'] {
|
.img_list .list_inner[num='7'] {
|
||||||
display: grid;
|
display: grid;
|
||||||
/* 采用 6 列网格,支持 50% (span 3) 和 33.3% (span 2) 两种尺寸 */
|
/* 采用 6 列网格,支持 50% (span 3) 和 33.3% (span 2) 两种尺寸 */
|
||||||
grid-template-columns: repeat(6, 1fr);
|
grid-template-columns: repeat(6, 1fr);
|
||||||
|
|
||||||
/* 间距修正 */
|
/* 间距修正 */
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
|
|
||||||
/* 清除干扰 */
|
/* 清除干扰 */
|
||||||
justify-content: unset;
|
justify-content: unset;
|
||||||
align-content: unset;
|
align-content: unset;
|
||||||
align-items: unset;
|
align-items: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img_list .list_inner[num='7'] span {
|
.img_list .list_inner[num='7'] span {
|
||||||
/* 清除干扰,保持稳定性 */
|
/* 清除干扰,保持稳定性 */
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
||||||
/* 默认尺寸:中等 (33.3% 宽度, span 2/6) */
|
/* 默认尺寸:中等 (33.3% 宽度, span 2/6) */
|
||||||
grid-column: span 2;
|
grid-column: span 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 第一行 (Item 1, 2):大尺寸 (50% 宽度, span 3/6) */
|
/* 第一行 (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(1),
|
||||||
.img_list .list_inner[num='7'] span:nth-child(2) {
|
.img_list .list_inner[num='7'] span:nth-child(2) {
|
||||||
grid-column: span 3;
|
grid-column: span 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 第三行 (Item 6, 7):大尺寸 (50% 宽度, span 3/6) */
|
/* 第三行 (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(6),
|
||||||
.img_list .list_inner[num='7'] span:nth-child(7) {
|
.img_list .list_inner[num='7'] span:nth-child(7) {
|
||||||
grid-column: span 3;
|
grid-column: span 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 容器设置:保持 6 列网格,用于计算 1/3 和 1/2 宽度 */
|
/* 容器设置:保持 6 列网格,用于计算 1/3 和 1/2 宽度 */
|
||||||
.img_list .list_inner[num='8'] {
|
.img_list .list_inner[num='8'] {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(6, 1fr); /* 6 列 */
|
grid-template-columns: repeat(6, 1fr);
|
||||||
|
/* 6 列 */
|
||||||
|
|
||||||
max-height: 100vw;
|
max-height: 100vw;
|
||||||
|
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
|
|
||||||
justify-content: unset;
|
justify-content: unset;
|
||||||
align-content: unset;
|
align-content: unset;
|
||||||
align-items: unset;
|
align-items: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 默认规则:应用到所有子项,用于第 1 行和第 3 行 (1/3 宽度) */
|
/* 默认规则:应用到所有子项,用于第 1 行和第 3 行 (1/3 宽度) */
|
||||||
.img_list .list_inner[num='8'] span {
|
.img_list .list_inner[num='8'] span {
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
||||||
/* 跨 2 列 = 1/3 宽度 (6列/2=3张/行) */
|
/* 跨 2 列 = 1/3 宽度 (6列/2=3张/行) */
|
||||||
grid-column: span 2;
|
grid-column: span 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 特殊规则:仅应用于第 2 行的 2 张图片 (1/2 宽度) */
|
/* 特殊规则:仅应用于第 2 行的 2 张图片 (1/2 宽度) */
|
||||||
.img_list .list_inner[num='8'] span:nth-child(4),
|
.img_list .list_inner[num='8'] span:nth-child(4),
|
||||||
.img_list .list_inner[num='8'] span:nth-child(5) {
|
.img_list .list_inner[num='8'] span:nth-child(5) {
|
||||||
/* 跨 3 列 = 1/2 宽度 (6列/3=2张/行) */
|
/* 跨 3 列 = 1/2 宽度 (6列/3=2张/行) */
|
||||||
grid-column: span 3;
|
grid-column: span 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 确保第 1 行和第 3 行的宽度不被其他 CSS 规则干扰 */
|
/* 确保第 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+3),
|
||||||
.img_list .list_inner[num='8'] span:nth-child(n+6) { /* 第 6, 7, 8 个 */
|
/* 第 1, 2, 3 个 */
|
||||||
grid-column: span 2;
|
.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 {
|
.img_list span img {
|
||||||
|
|||||||
Reference in New Issue
Block a user