Compare commits
20 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 anian
|
d575d584cb | ||
|
anian
|
03e5e2f529 | ||
|
anian
|
711cff953b | ||
|
anian
|
7d56858616 | ||
 anian
|
32bf39f733 | ||
|
anian
|
041fd0f7cf | ||
|
anian
|
6675e378d2 | ||
|
anian
|
1953fa86c8 | ||
|
anian
|
048e4336d1 | ||
|
anian
|
92d591f70b | ||
|
anian
|
061b00fc05 | ||
|
anian
|
73dc2a1c1c | ||
|
anian
|
565bf30ea5 | ||
|
anian
|
5a3544f8df | ||
|
anian
|
ee5c1a2b5b | ||
|
anian
|
9c26bece1b | ||
|
anian
|
101189a077 | ||
|
anian
|
e716097e07 | ||
|
anian
|
b387ea885c | ||
|
anian
|
6810791637 |
@@ -0,0 +1,69 @@
|
|||||||
|
# halo-theme-pix
|
||||||
|
|
||||||
|
> 基于原作者v1.2.5代码修改
|
||||||
|
|
||||||
|
#### v1.2.5-9
|
||||||
|
1. 修复导航栏居中显示失效、分享海报高度、页码更新、加载动画异常
|
||||||
|
2. 优化上一页动画效果
|
||||||
|
3. 新增页面底部页码跳转功能
|
||||||
|
4. 重构课外书（依赖豆瓣插件v1.2.2-3，模板端处理，支持换行）
|
||||||
|
5. 新增奇遇页面（依赖装备插件，支持换行）
|
||||||
|
6. 新增网易云音乐播放JS函数`play_netease_music(2639350114)`
|
||||||
|
|
||||||
|
#### v1.2.5-8
|
||||||
|
1. 重写作文目录、置顶样式
|
||||||
|
2. 更换（通知书等）域名
|
||||||
|
3. 修复搜索结果无法PJAX跳转（依赖搜索插件v1.7.1-1）
|
||||||
|
4. 修复日记过多时无法搜索（依赖瞬间插件v1.13.1-1，基于源仓库）
|
||||||
|
5. 朋友圈内容支持搜索与跳转；大幅优化性能（依赖朋友圈插件v1.4.3-6）
|
||||||
|
6. 压缩、更换图片
|
||||||
|
7. 模板端全面支持page与tag参数（常驻显示，同步新增向上翻阅功能）
|
||||||
|
8. 取消自动恢复源内容功能
|
||||||
|
9. 前台编辑、发布日记将采用PJAX更新
|
||||||
|
10. 手机端播放器新增进度条
|
||||||
|
11. 抽象重复代码至函数、清理无效代码
|
||||||
|
12. 当前激活的标签将在导航栏中居中显示
|
||||||
|
13. 优化不同宽度下的显示效果
|
||||||
|
14. 重构分享海报布局
|
||||||
|
|
||||||
|
#### v1.2.5-7
|
||||||
|
1. 适配新接口（基于新版API-Python）
|
||||||
|
2. 更新附录页面、通知书页面
|
||||||
|
3. 朋友圈将不再显示内容为空的条目
|
||||||
|
4. 修复图文片刻中媒体库及拖拽时的图片样式
|
||||||
|
5. 修改灯箱相关UI颜色
|
||||||
|
6. 重写课外书分类获取逻辑（依赖豆瓣插件v1.2.2-2）
|
||||||
|
|
||||||
|
#### v1.2.5-6
|
||||||
|
1. 重构课外书页面
|
||||||
|
2. 音乐、背景、侧边栏等适配新接口（基于API-Python）
|
||||||
|
3. 修复分享海报空白、模态框失效等异常
|
||||||
|
|
||||||
|
#### v1.2.5-5
|
||||||
|
1. 朋友圈支持图片显示（需同步更新插件）
|
||||||
|
2. 手机端底部导航栏新增公告未读提示
|
||||||
|
3. 更新通讯录、储物柜
|
||||||
|
4. 优化操作提示、图片排版
|
||||||
|
|
||||||
|
#### v1.2.5-4
|
||||||
|
1. 修复侧边栏测速异常、拖拽片刻图片异常、手机端文章目录异常、页面提示异常
|
||||||
|
2. 优化多种场景下的提示、衔接、样式
|
||||||
|
3. 新增片刻删除提示框及删除动画
|
||||||
|
|
||||||
|
#### v1.2.5-3
|
||||||
|
1. 朋友圈支持根据作者筛选内容（需同步更新插件）
|
||||||
|
2. 支持前台弹窗登入登出
|
||||||
|
3. 附录页面功能补全
|
||||||
|
4. 对线路切换、加载异常等情况进行了深度优化
|
||||||
|
|
||||||
|
#### v1.2.5-2
|
||||||
|
1. 添加侧边栏、页面、文章等HTML内容块
|
||||||
|
2. 通知书推送时机改为RSS触发
|
||||||
|
|
||||||
|
#### v1.2.5-1
|
||||||
|
1. 修改全局样式以适配日记簿
|
||||||
|
2. 片刻、图库支持视频并接入灯箱
|
||||||
|
3. 更新remixicon
|
||||||
|
4. 片刻增加标签展示
|
||||||
|
5. 适配多线路
|
||||||
|
6. ···
|
||||||
@@ -0,0 +1,219 @@
|
|||||||
|
<style>
|
||||||
|
/**
|
||||||
|
* 字体应用
|
||||||
|
*/
|
||||||
|
|
||||||
|
.poem-container,
|
||||||
|
.poem-container * {
|
||||||
|
font-family: 'MaShanZheng' !important;
|
||||||
|
/* 全局应用自定义字体 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 容器整体样式
|
||||||
|
*/
|
||||||
|
.poem-container {
|
||||||
|
max-width: 860px;
|
||||||
|
margin: 2.5rem auto;
|
||||||
|
padding: 0 1rem;
|
||||||
|
line-height: 1.85;
|
||||||
|
color: #0a1f16;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 原文区域 (.poem-original) - 仿语文课本风格
|
||||||
|
* 注意: 侧边栏样式 (border-left) 是原始代码就存在的逻辑
|
||||||
|
*/
|
||||||
|
.poem-original {
|
||||||
|
background: #f0f9f4;
|
||||||
|
border-left: 4px solid #40916C;
|
||||||
|
/* 左侧粗边框 */
|
||||||
|
border: 1px solid #d1e7dd;
|
||||||
|
/* 其他三边细边框 */
|
||||||
|
padding: 1.4rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标题和作者 */
|
||||||
|
.poem-title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.7rem;
|
||||||
|
color: #1b4332;
|
||||||
|
margin: 0 0 0.5rem 0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poem-author {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
margin: 0 0 1rem 0;
|
||||||
|
color: #2d6a4f;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 原文内容段落 */
|
||||||
|
.poem-content p {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin: 0 0 0.7rem 0;
|
||||||
|
text-indent: 2em;
|
||||||
|
color: #081c15;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 赏析区域 (.appreciation)
|
||||||
|
*/
|
||||||
|
.appreciation {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 赏析标题 */
|
||||||
|
.appreciation-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1.45rem;
|
||||||
|
color: #1b4332;
|
||||||
|
margin: 0 0 1rem 0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 赏析标题左侧短杆 */
|
||||||
|
.appreciation-title span {
|
||||||
|
width: 8px;
|
||||||
|
height: 24px;
|
||||||
|
background: #40916c;
|
||||||
|
/* 亮绿色 */
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-right: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 赏析内容 */
|
||||||
|
.appreciation-content {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
color: #0f3424;
|
||||||
|
}
|
||||||
|
|
||||||
|
.appreciation-content p {
|
||||||
|
margin: 0 0 1rem 0;
|
||||||
|
text-indent: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 响应式调整 (手机端，最大宽度 768px)
|
||||||
|
*/
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.poem-container {
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poem-original {
|
||||||
|
padding: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poem-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poem-author {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poem-content p {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.appreciation-title {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.appreciation-content {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="poem-container">
|
||||||
|
<div class="poem-original">
|
||||||
|
<h2 class="poem-title">水调歌头·明月几时有</h2>
|
||||||
|
<p class="poem-author">宋·苏轼</p>
|
||||||
|
<div class="poem-content">
|
||||||
|
<p>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</p>
|
||||||
|
<p>明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。</p>
|
||||||
|
<p>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="appreciation">
|
||||||
|
<h3 class="appreciation-title">
|
||||||
|
<span></span>
|
||||||
|
开篇叩问：跨越时空的宇宙之思
|
||||||
|
</h3>
|
||||||
|
<div class="appreciation-content">
|
||||||
|
<p>“明月几时有？把酒问青天。” 开篇两句，便奠定了全词开阔的意境。苏轼以 “把酒问天” 的豪迈姿态，将个人置于广袤的宇宙背景之下，抛出了一个亘古不变的哲学命题 ——
|
||||||
|
明月从何时开始存在？这种对宇宙起源的追问，并非单纯的好奇，而是蕴含着词人对人生有限与宇宙无限的深层思考。在中秋之夜，皎洁的明月高悬天际，它见证了无数人间的悲欢离合，而人类的生命却如沧海一粟般短暂。苏轼借这一问，打破了传统中秋词
|
||||||
|
“伤春悲秋” 的局限，将个人的情感升华为对宇宙人生的宏观审视，尽显其 “大江东去” 般的豪放胸襟。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="appreciation-title">
|
||||||
|
<span></span>
|
||||||
|
中片想象：虚实交织的仙境与人间
|
||||||
|
</h3>
|
||||||
|
<div class="appreciation-content">
|
||||||
|
<p>“不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。” 这几句词，苏轼展开了丰富的想象，将笔触从人间转向仙境。他想象着天上的宫殿此刻正处于怎样的时光，甚至产生了 “乘风归去”
|
||||||
|
的念头，想要脱离尘世的烦恼，去往那清冷高洁的仙境。然而，“又恐琼楼玉宇，高处不胜寒” 一句，却又将他拉回现实。这里的 “高处不胜寒”，既是对仙境寒冷环境的想象，更是对官场高位、人生巅峰的隐喻。苏轼一生仕途坎坷，曾经历过
|
||||||
|
“乌台诗案” 的生死考验，他深知 “高处” 的危险与孤独。这种对仙境的向往与犹豫，实则是他对现实人生的矛盾与思考 —— 既渴望摆脱世俗的束缚，又无法割舍人间的情感与责任。</p>
|
||||||
|
<p>“起舞弄清影，何似在人间。”
|
||||||
|
在对仙境的想象与犹豫之后，苏轼最终回归现实。他在月光下起舞，与自己的影子嬉戏，突然领悟到：与其追求虚无缥缈的仙境，不如珍惜眼前的人间生活。这句词看似平淡，却蕴含着深刻的人生智慧。它体现了苏轼乐观旷达的人生态度 ——
|
||||||
|
既然无法改变命运的坎坷，不如坦然接受现实，在平凡的生活中寻找乐趣与意义。这种从 “出世” 到 “入世” 的转变，让全词的情感更加贴近人心，也让苏轼的形象更加丰满立体。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="appreciation-title">
|
||||||
|
<span></span>
|
||||||
|
下片抒情：由己及人的豁达之悟
|
||||||
|
</h3>
|
||||||
|
<div class="appreciation-content">
|
||||||
|
<p>“转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？”
|
||||||
|
词的下片，苏轼将视角从宇宙仙境拉回人间烟火，聚焦于中秋之夜的离别之情。月光转过朱红的楼阁，低低地照进雕花的门窗，照亮了无法入眠的词人。他看着皎洁的明月，不禁心生疑问：明月本应是团圆的象征，为何总在人们离别之时显得格外圆满？这句
|
||||||
|
“何事长向别时圆”，看似是对明月的埋怨，实则是词人对离别之苦的深情抒发。苏轼与弟弟苏辙手足情深，却因仕途奔波常年分离，中秋佳节本是团圆之日，他却只能独自对月思念，这种离别之痛在明月的映衬下更显浓烈。</p>
|
||||||
|
<p>然而，苏轼并未沉溺于离别之苦，而是迅速调整心态，发出了 “人有悲欢离合，月有阴晴圆缺，此事古难全”
|
||||||
|
的千古慨叹。他将人生的离别与月亮的圆缺联系起来，认识到无论是人生的悲欢离合，还是自然的阴晴圆缺，都是自古以来无法强求的事情。这种对人生无常的坦然接受，展现了苏轼超越常人的豁达与通透。他不再抱怨命运的不公，而是以一种平和的心态看待人生的起伏，这种人生态度不仅是对自己的慰藉，更是对世人的启示
|
||||||
|
—— 人生本就充满遗憾，唯有学会接受遗憾，才能获得内心的平静。</p>
|
||||||
|
<p>“但愿人长久，千里共婵娟。”
|
||||||
|
词的结尾，苏轼将个人的思念升华为对天下人的美好祝愿。他希望天下所有的亲人都能平安长久，即使相隔千里，也能共同欣赏这轮皎洁的明月。这句词没有丝毫的哀怨与悲戚，反而充满了温暖与希望。它跳出了个人情感的局限，展现了苏轼
|
||||||
|
“先天下之忧而忧，后天下之乐而乐” 的博大胸怀。“千里共婵娟” 不仅成为了中秋佳节最经典的祝福语，更成为了中华民族共同的文化记忆，每当人们在中秋之夜仰望明月时，都会想起这句充满温情与诗意的祝愿。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="appreciation-title">
|
||||||
|
<span></span>
|
||||||
|
语言艺术：豪放与婉约的完美融合
|
||||||
|
</h3>
|
||||||
|
<div class="appreciation-content">
|
||||||
|
<p>《水调歌头・明月几时有》在语言艺术上也达到了炉火纯青的境界。全词以 “明月” 为核心意象，贯穿始终，从 “问月” 到 “思月”，再到 “赞月”，层层递进，脉络清晰。语言风格上，既有 “把酒问青天”“我欲乘风归去”
|
||||||
|
的豪放洒脱，又有 “转朱阁，低绮户，照无眠” 的细腻婉约，豪放与婉约在词中完美融合，形成了独特的艺术魅力。</p>
|
||||||
|
<p>同时，词中运用了大量的设问、反问与感叹，如 “明月几时有？”“何事长向别时圆？”“此事古难全！”
|
||||||
|
等，这些句式不仅增强了词的节奏感与韵律感，更让词人的情感表达更加酣畅淋漓。此外，词中的比喻、拟人手法也运用得十分巧妙，如将明月比作 “婵娟”，赋予明月以人的情感与姿态，让明月更加生动形象，也让词的意境更加优美动人。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="appreciation-title">
|
||||||
|
<span></span>
|
||||||
|
传世价值：跨越千年的精神共鸣
|
||||||
|
</h3>
|
||||||
|
<div class="appreciation-content">
|
||||||
|
<p>
|
||||||
|
《水调歌头・明月几时有》之所以能够流传千古，不仅在于其高超的艺术造诣，更在于它蕴含的深刻人生哲理与真挚情感。它所展现的苏轼乐观旷达的人生态度，成为了后世无数人面对困境时的精神寄托。在漫长的历史长河中，无论是仕途失意的文人墨客，还是饱受生活磨难的普通百姓，都能从这首词中获得慰藉与力量。
|
||||||
|
</p>
|
||||||
|
<p>如今，每当中秋佳节来临，人们依然会吟诵
|
||||||
|
“但愿人长久，千里共婵娟”，这句词已经超越了时空的限制，成为了中华民族共同的文化符号。它提醒着我们，无论身处何方，无论经历怎样的坎坷，都要珍惜亲情、热爱生活，以豁达的心态面对人生的悲欢离合。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 class="appreciation-title">
|
||||||
|
<span></span>
|
||||||
|
结语：明月寄情，哲思传世
|
||||||
|
</h3>
|
||||||
|
<div class="appreciation-content">
|
||||||
|
<p>
|
||||||
|
《水调歌头・明月几时有》是一首兼具文学性、哲理性与情感性的千古佳作。它以明月为媒，将个人的情感与宇宙的奥秘、人生的智慧融为一体，展现了苏轼博大的胸襟与高超的艺术才华。这首词不仅是中国文学史上的瑰宝，更是中华民族精神文化的重要组成部分，它将永远照亮人们的心灵，陪伴我们度过每一个中秋之夜。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,624 @@
|
|||||||
|
<section class="people-list">
|
||||||
|
<style>
|
||||||
|
/* CSS 变量定义 (绿色主题) */
|
||||||
|
:root {
|
||||||
|
--green-text: #0f5132;
|
||||||
|
--green-light: #e9f7f1;
|
||||||
|
--green-border: #c3e6d3;
|
||||||
|
--green-link: #197d53;
|
||||||
|
--green-link-hover: #146343;
|
||||||
|
--green-glow: rgba(15, 81, 50, 0.2);
|
||||||
|
--avatar-w: 80px;
|
||||||
|
--avatar-h: 100px;
|
||||||
|
--radius: 12px;
|
||||||
|
--font: "Helvetica Neue", Arial, sans-serif;
|
||||||
|
--scratch-cursor-size: 100px;
|
||||||
|
/* 刮奖圆圈大小 */
|
||||||
|
--scratch-mask-color: #d1efe3;
|
||||||
|
/* 刮奖遮罩颜色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 整体容器样式 */
|
||||||
|
.people-list {
|
||||||
|
font-family: var(--font);
|
||||||
|
max-width: 860px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标题样式 */
|
||||||
|
.category-title {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--green-text);
|
||||||
|
margin: 0 0 16px 0;
|
||||||
|
padding-bottom: 6px;
|
||||||
|
border-bottom: 2px solid var(--green-border);
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 朋友圈链接样式 */
|
||||||
|
.people-friends-link {
|
||||||
|
font-size: 0.9rem !important;
|
||||||
|
font-weight: normal !important;
|
||||||
|
color: var(--green-link) !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
gap: 4px !important;
|
||||||
|
transition: color 0.2s ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.people-friends-link:hover {
|
||||||
|
color: var(--green-link-hover) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 分类区段 */
|
||||||
|
.category-section {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-section:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片网格布局 */
|
||||||
|
.people-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 单个卡片 (person) 基础样式 */
|
||||||
|
.person {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 14px;
|
||||||
|
border-radius: 14px;
|
||||||
|
background: var(--green-light);
|
||||||
|
align-items: center;
|
||||||
|
flex: 1 1 calc(50% - 6px);
|
||||||
|
min-width: 260px;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: default;
|
||||||
|
/* 默认光标 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 普通卡片：鼠标光晕效果 */
|
||||||
|
.person:not(.mystery-person)::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--green-glow);
|
||||||
|
transform: translate(-50%, -50%) scale(0);
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
left: 50%;
|
||||||
|
/* 默认居中 */
|
||||||
|
top: 50%;
|
||||||
|
/* 默认居中 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 悬停时光晕放大 */
|
||||||
|
.person:not(.mystery-person):hover::before {
|
||||||
|
transform: translate(-50%, -50%) scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 悬停时头像缩放 */
|
||||||
|
.person:not(.mystery-person):hover .avatar img {
|
||||||
|
transform: scale(1.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 悬停时背景色变化 */
|
||||||
|
.person:not(.mystery-person):hover {
|
||||||
|
background-color: #dff4ec;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 头像区域 */
|
||||||
|
.avatar {
|
||||||
|
width: var(--avatar-w);
|
||||||
|
height: var(--avatar-h);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
overflow: hidden;
|
||||||
|
background: #d1efe3;
|
||||||
|
flex-shrink: 0;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||||
|
transform-origin: center center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 信息区域 */
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name,
|
||||||
|
.bio {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--green-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bio {
|
||||||
|
margin-top: 1px;
|
||||||
|
font-size: 0.92rem;
|
||||||
|
color: #234437;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bio a {
|
||||||
|
color: var(--green-text);
|
||||||
|
text-decoration: none !important;
|
||||||
|
border-bottom: none !important;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 神秘嘉宾卡片 (刮奖效果) */
|
||||||
|
.mystery-person {
|
||||||
|
cursor: none;
|
||||||
|
/* 隐藏默认光标 */
|
||||||
|
background-color: var(--scratch-mask-color);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 刮奖遮罩 Canvas */
|
||||||
|
.mystery-mask {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
pointer-events: auto;
|
||||||
|
/* 允许鼠标事件交互 */
|
||||||
|
border-radius: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 刮奖提示文字 */
|
||||||
|
.mystery-hint {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
pointer-events: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--green-text);
|
||||||
|
font-size: 1.2rem;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mystery-hint i {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 刮奖自定义光标 */
|
||||||
|
.mystery-cursor {
|
||||||
|
position: absolute;
|
||||||
|
width: var(--scratch-cursor-size);
|
||||||
|
height: var(--scratch-cursor-size);
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid rgba(15, 81, 50, 0.6);
|
||||||
|
background-color: transparent;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 3;
|
||||||
|
display: none;
|
||||||
|
/* 默认隐藏 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 补充 CSS：普通卡片光晕位置 (用于JS鼠标追踪) */
|
||||||
|
.person:not(.mystery-person)::before {
|
||||||
|
left: var(--mouse-x, 50%);
|
||||||
|
top: var(--mouse-y, 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式调整 (max-width: 768px) */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.category-title {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.people-friends-link {
|
||||||
|
font-size: 0.85rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.person {
|
||||||
|
flex: 1 1 100%;
|
||||||
|
/* 单列显示 */
|
||||||
|
padding: 18px;
|
||||||
|
gap: 18px;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.people-grid {
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
--avatar-w: 90px;
|
||||||
|
--avatar-h: 110px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bio {
|
||||||
|
font-size: 0.96rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端隐藏普通卡片光晕 */
|
||||||
|
.person:not(.mystery-person)::before {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="category-section">
|
||||||
|
<h3 class="category-title">
|
||||||
|
近期联系
|
||||||
|
<a href="/friends" class="people-friends-link">
|
||||||
|
<i class="ri-group-line"></i> 前往朋友圈
|
||||||
|
</a>
|
||||||
|
</h3>
|
||||||
|
<div class="people-grid">
|
||||||
|
<div class="person">
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="/upload/20260416214530_191_129.jpg">
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<p class="name">黄诗扶</p>
|
||||||
|
<p class="bio">
|
||||||
|
又甜又脆的大冬枣！好听！好看！好吃！黄黄的伟大无需多言！
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="person">
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="/upload/20260416213611_190_129.jpg">
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<p class="name">双笙</p>
|
||||||
|
<p class="bio">
|
||||||
|
什么？你问我为什么喜欢包包？可能因为是青春吧？
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="person">
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="/upload/005Jyswjgy1ic7xfxtlu8j33402c0npe.jpg">
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<p class="name">浅影阿</p>
|
||||||
|
<p class="bio">
|
||||||
|
谁能拒绝唱歌这么好看的老大呢？反正我是不行！下一位！
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="person">
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="/upload/67f2efd2gy1i8iv8nkuqjj23344mokjp.jpg">
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<p class="name">玄觞</p>
|
||||||
|
<p class="bio">
|
||||||
|
你们古风圈，怎么都喊女生王子，喊男生二婶呢？
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="category-section">
|
||||||
|
<h3 class="category-title">神秘嘉宾</h3>
|
||||||
|
<div class="people-grid">
|
||||||
|
<div class="person mystery-person">
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="/upload/69e273f8ly8fnvmu255jyj20e80e8wev.jpg">
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<p class="name">蔡徐坤</p>
|
||||||
|
<p class="bio">
|
||||||
|
不要问为什么坤坤会在这里！因为！黑粉也是粉！
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<canvas class="mystery-mask"></canvas>
|
||||||
|
<div class="mystery-hint">
|
||||||
|
<i class="ri-hand-scratch-line"></i>
|
||||||
|
点击或悬浮，解锁神秘嘉宾
|
||||||
|
</div>
|
||||||
|
<div class="mystery-cursor"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="person mystery-person">
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="/themes/theme-pix/assets/img/logo.webp">
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<p class="name">敬请期待</p>
|
||||||
|
<p class="bio">
|
||||||
|
会是谁呢？我也不知道
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<canvas class="mystery-mask"></canvas>
|
||||||
|
<div class="mystery-hint">
|
||||||
|
<i class="ri-hand-scratch-line"></i>
|
||||||
|
点击或悬浮，解锁神秘嘉宾
|
||||||
|
</div>
|
||||||
|
<div class="mystery-cursor"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="category-section">
|
||||||
|
<h3 class="category-title">全部名单</h3>
|
||||||
|
<div class="people-grid">
|
||||||
|
<div class="person">
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="/upload/62a32171jw8f2kxo5x4j1j20ai0bvt9l.jpg">
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<p class="name">明月庄主</p>
|
||||||
|
<p class="bio">
|
||||||
|
眼睁睁的看着庄主结婚生娃，也算是从小看到大了
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="person">
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="/upload/80c44916gy1i6s8l132bhj20u01n14cu.jpg">
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<p class="name">杨馥羽</p>
|
||||||
|
<p class="bio">
|
||||||
|
剧是没看的，人是要夸可爱的，抖音是第一条推的
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="person">
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="/upload/mugu.jpg">
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<p class="name">木骨</p>
|
||||||
|
<p class="bio">
|
||||||
|
事情的起因要从那节最优化理论课说起...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="person">
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="/upload/001U2r7Jgy1i20tzkph8gj61vk2tcx6p02.jpg">
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<p class="name">音频怪物</p>
|
||||||
|
<p class="bio">
|
||||||
|
你知道的，我很少粉同性的，但...老妖他不一样！
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 存储事件监听引用，用于PJAX返回时清理
|
||||||
|
const eventListeners = {
|
||||||
|
personMouseMove: [],
|
||||||
|
mysteryMouseMove: [],
|
||||||
|
mysteryMouseLeave: [],
|
||||||
|
mysteryClick: [],
|
||||||
|
resize: []
|
||||||
|
};
|
||||||
|
|
||||||
|
// 普通卡片：鼠标跟踪脚本
|
||||||
|
function initPersonCards() {
|
||||||
|
// 清理之前的事件监听
|
||||||
|
eventListeners.personMouseMove.forEach(({ el, handler }) => {
|
||||||
|
el.removeEventListener('mousemove', handler);
|
||||||
|
});
|
||||||
|
eventListeners.personMouseMove = [];
|
||||||
|
|
||||||
|
const personCards = document.querySelectorAll('.person:not(.mystery-person)');
|
||||||
|
personCards.forEach(card => {
|
||||||
|
let lastMouseX = 50;
|
||||||
|
let lastMouseY = 50;
|
||||||
|
|
||||||
|
const handleMouseMove = (e) => {
|
||||||
|
const rect = card.getBoundingClientRect();
|
||||||
|
lastMouseX = ((e.clientX - rect.left) / rect.width) * 100;
|
||||||
|
lastMouseY = ((e.clientY - rect.top) / rect.height) * 100;
|
||||||
|
card.style.setProperty('--mouse-x', `${lastMouseX}%`);
|
||||||
|
card.style.setProperty('--mouse-y', `${lastMouseY}%`);
|
||||||
|
};
|
||||||
|
|
||||||
|
card.addEventListener('mousemove', handleMouseMove);
|
||||||
|
eventListeners.personMouseMove.push({ el: card, handler: handleMouseMove });
|
||||||
|
|
||||||
|
card.addEventListener('mouseleave', () => { });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 神秘嘉宾：刮奖效果脚本
|
||||||
|
function initMysteryCards() {
|
||||||
|
// 清理之前的事件监听
|
||||||
|
eventListeners.mysteryMouseMove.forEach(({ el, handler }) => {
|
||||||
|
el.removeEventListener('mousemove', handler);
|
||||||
|
});
|
||||||
|
eventListeners.mysteryMouseLeave.forEach(({ el, handler }) => {
|
||||||
|
el.removeEventListener('mouseleave', handler);
|
||||||
|
});
|
||||||
|
eventListeners.mysteryClick.forEach(({ el, handler }) => {
|
||||||
|
el.removeEventListener('click', handler);
|
||||||
|
});
|
||||||
|
eventListeners.resize.forEach(handler => {
|
||||||
|
window.removeEventListener('resize', handler);
|
||||||
|
});
|
||||||
|
eventListeners.mysteryMouseMove = [];
|
||||||
|
eventListeners.mysteryMouseLeave = [];
|
||||||
|
eventListeners.mysteryClick = [];
|
||||||
|
eventListeners.resize = [];
|
||||||
|
|
||||||
|
const mysteryCards = document.querySelectorAll('.mystery-person');
|
||||||
|
mysteryCards.forEach(card => {
|
||||||
|
const canvas = card.querySelector('.mystery-mask');
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const cursor = card.querySelector('.mystery-cursor');
|
||||||
|
const hintText = card.querySelector('.mystery-hint');
|
||||||
|
|
||||||
|
// 从:root获取 CSS 变量值
|
||||||
|
const computedStyle = getComputedStyle(document.documentElement);
|
||||||
|
const cursorSize = parseInt(computedStyle.getPropertyValue('--scratch-cursor-size'));
|
||||||
|
const maskColor = computedStyle.getPropertyValue('--scratch-mask-color');
|
||||||
|
|
||||||
|
// 重置/初始化 Canvas 状态
|
||||||
|
canvas.width = card.offsetWidth;
|
||||||
|
canvas.height = card.offsetHeight;
|
||||||
|
ctx.fillStyle = maskColor;
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
hintText.style.opacity = '1';
|
||||||
|
cursor.style.display = 'none';
|
||||||
|
canvas.style.display = 'block';
|
||||||
|
hintText.style.display = 'flex';
|
||||||
|
card.style.cursor = 'none';
|
||||||
|
|
||||||
|
function resizeMysteryCanvas() {
|
||||||
|
const rect = card.getBoundingClientRect();
|
||||||
|
canvas.width = rect.width;
|
||||||
|
canvas.height = rect.height;
|
||||||
|
fillMysteryMask();
|
||||||
|
}
|
||||||
|
|
||||||
|
function fillMysteryMask() {
|
||||||
|
ctx.fillStyle = maskColor;
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateMysteryCursor(x, y) {
|
||||||
|
// 光标位置计算
|
||||||
|
cursor.style.left = `${x - cursorSize / 2}px`;
|
||||||
|
cursor.style.top = `${y - cursorSize / 2}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function scratchMystery(x, y) {
|
||||||
|
fillMysteryMask();
|
||||||
|
ctx.globalCompositeOperation = 'destination-out';
|
||||||
|
ctx.beginPath();
|
||||||
|
// 刮奖半径同步光标大小
|
||||||
|
ctx.arc(x, y, cursorSize / 2, 0, Math.PI * 2);
|
||||||
|
ctx.fill();
|
||||||
|
ctx.globalCompositeOperation = 'source-over';
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleMouseMove = (e) => {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const x = e.clientX - rect.left;
|
||||||
|
const y = e.clientY - rect.top;
|
||||||
|
|
||||||
|
cursor.style.display = 'block';
|
||||||
|
hintText.style.opacity = '0';
|
||||||
|
updateMysteryCursor(x, y);
|
||||||
|
scratchMystery(x, y);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseLeave = () => {
|
||||||
|
cursor.style.display = 'none';
|
||||||
|
hintText.style.opacity = '1';
|
||||||
|
fillMysteryMask(); // 鼠标移开重新遮挡
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
// 清除遮罩，显示内容
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
setTimeout(() => {
|
||||||
|
canvas.style.display = 'none';
|
||||||
|
hintText.style.display = 'none';
|
||||||
|
card.style.cursor = 'default';
|
||||||
|
cursor.style.display = 'none';
|
||||||
|
}, 300);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 绑定事件
|
||||||
|
canvas.addEventListener('mousemove', handleMouseMove);
|
||||||
|
canvas.addEventListener('mouseleave', handleMouseLeave);
|
||||||
|
card.addEventListener('click', handleClick);
|
||||||
|
window.addEventListener('resize', resizeMysteryCanvas);
|
||||||
|
|
||||||
|
// 存储事件监听引用
|
||||||
|
eventListeners.mysteryMouseMove.push({ el: canvas, handler: handleMouseMove });
|
||||||
|
eventListeners.mysteryMouseLeave.push({ el: canvas, handler: handleMouseLeave });
|
||||||
|
eventListeners.mysteryClick.push({ el: card, handler: handleClick });
|
||||||
|
eventListeners.resize.push(resizeMysteryCanvas);
|
||||||
|
|
||||||
|
resizeMysteryCanvas();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化所有组件
|
||||||
|
function initPeopleList() {
|
||||||
|
initPersonCards();
|
||||||
|
initMysteryCards();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页面首次加载初始化
|
||||||
|
document.addEventListener('DOMContentLoaded', initPeopleList);
|
||||||
|
|
||||||
|
// PJAX跳转成功后重新初始化
|
||||||
|
document.addEventListener('pjax:success', function () {
|
||||||
|
// 仅当页面存在people-list组件时才初始化
|
||||||
|
if (document.querySelector('.people-list')) {
|
||||||
|
initPeopleList();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 页面隐藏时清理事件监听（避免内存泄漏）
|
||||||
|
document.addEventListener('visibilitychange', function () {
|
||||||
|
if (document.hidden) {
|
||||||
|
// 清理所有事件监听 (简化逻辑：仅清除存储的)
|
||||||
|
[...eventListeners.personMouseMove, ...eventListeners.mysteryMouseMove].forEach(({ el, handler }) => el.removeEventListener('mousemove', handler));
|
||||||
|
eventListeners.mysteryMouseLeave.forEach(({ el, handler }) => el.removeEventListener('mouseleave', handler));
|
||||||
|
eventListeners.mysteryClick.forEach(({ el, handler }) => el.removeEventListener('click', handler));
|
||||||
|
eventListeners.resize.forEach(handler => window.removeEventListener('resize', handler));
|
||||||
|
} else {
|
||||||
|
// 页面重新显示时重新初始化
|
||||||
|
if (document.querySelector('.people-list')) {
|
||||||
|
initPeopleList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
@@ -0,0 +1,332 @@
|
|||||||
|
<div class="year-gallery">
|
||||||
|
|
||||||
|
<!-- Tabs -->
|
||||||
|
<div class="yg-tabs">
|
||||||
|
<button class="yg-tab active" data-target="yg-2025">2025</button>
|
||||||
|
<button class="yg-tab" data-target="yg-2026">2026</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ================= 2025 ================= -->
|
||||||
|
<div class="yg-panel active" id="yg-2025">
|
||||||
|
|
||||||
|
<!-- 封面：像 2026 一样两个独立卡片 -->
|
||||||
|
<div class="yg-2025-hero-row">
|
||||||
|
<div class="yg-2025-hero">
|
||||||
|
<img src="/upload/2025-0-1.jpg">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-2025-hero">
|
||||||
|
<img src="/upload/2025-0-2.jpg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ========= 12 个月：4 行 3 列 ========= -->
|
||||||
|
<div class="yg-grid-2025-3col">
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-1-1.jpg">
|
||||||
|
<img src="/upload/2025-1-2.jpg">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-2-1.jpg">
|
||||||
|
<img src="/upload/2025-2-2.jpg">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-3-1.jpg">
|
||||||
|
<img src="/upload/2025-3-2.jpg">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-4-1.jpg">
|
||||||
|
<img src="/upload/2025-4-2.jpg">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-5-1.jpg">
|
||||||
|
<img src="/upload/2025-5-2.jpg">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-6-1.jpg">
|
||||||
|
<img src="/upload/2025-6-2.jpg">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-7-1.jpg">
|
||||||
|
<img src="/upload/2025-7-2.jpg">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-8-1.jpg">
|
||||||
|
<img src="/upload/2025-8-2.jpg">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-9-1.jpg">
|
||||||
|
<img src="/upload/2025-9-2.jpg">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-10-1.jpg">
|
||||||
|
<img src="/upload/2025-10-2.jpg">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-11-1.jpg">
|
||||||
|
<img src="/upload/2025-11-2.jpg">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-12-1.jpg">
|
||||||
|
<img src="/upload/2025-12-2.jpg">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ================= 2026（完全未改动） ================= -->
|
||||||
|
<div class="yg-panel" id="yg-2026">
|
||||||
|
|
||||||
|
<div class="yg-hero-row">
|
||||||
|
<div class="yg-hero">
|
||||||
|
<img src="/upload/2026.jpg">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-hero">
|
||||||
|
<img src="/upload/2026-0.jpg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-grid-2026">
|
||||||
|
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-1.jpg"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-2.jpg"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-3.jpg"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-4.jpg"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-5.jpg"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-6.jpg"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-7.jpg"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-8.jpg"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-9.jpg"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-10.jpg"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-11.jpg"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-12.jpg"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.year-gallery {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 50px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ---------------- Tabs ---------------- */
|
||||||
|
.yg-tabs {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yg-tab {
|
||||||
|
padding: 10px 25px;
|
||||||
|
margin: 0 5px;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid #9ad1a1;
|
||||||
|
background: #e9f7ec;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: .3s;
|
||||||
|
color: #2c6e3f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yg-tab.active {
|
||||||
|
background: #4caf50;
|
||||||
|
color: #fff;
|
||||||
|
border-color: #4caf50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yg-panel {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yg-panel.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* ================= 2025 ================= */
|
||||||
|
|
||||||
|
/* 封面像 2026 一样：两个独立卡片 */
|
||||||
|
.yg-2025-hero-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 14px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yg-2025-hero {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 6px 18px rgba(76, 175, 80, .18);
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yg-2025-hero img {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* 3 列 × 4 行 月份布局 */
|
||||||
|
.yg-grid-2025-3col {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yg-card {
|
||||||
|
border-radius: 14px;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 6px 18px rgba(76, 175, 80, .18);
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yg-grid-2025-3col .yg-card img {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 12px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 月份双图之间：只加一点点 */
|
||||||
|
.yg-card img+img {
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* ================= 2026 =================（未改） */
|
||||||
|
|
||||||
|
.yg-hero-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 16px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yg-hero {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 6px 22px rgba(76, 175, 80, .18);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yg-hero img {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 1185/1775;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yg-hero:first-child img {
|
||||||
|
object-position: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yg-grid-2026 {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yg-2026-month {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 14px;
|
||||||
|
box-shadow: 0 6px 18px rgba(76, 175, 80, .18);
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yg-2026-month img {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 1185/1775;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* 手机优化 */
|
||||||
|
@media(max-width:900px) {
|
||||||
|
|
||||||
|
.yg-2025-hero-row,
|
||||||
|
.yg-grid-2025-3col {
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yg-hero-row,
|
||||||
|
.yg-grid-2026 {
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yg-card,
|
||||||
|
.yg-2026-month {
|
||||||
|
padding: 6px;
|
||||||
|
box-shadow: 0 4px 12px rgba(76, 175, 80, .15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width:600px) {
|
||||||
|
.year-gallery {
|
||||||
|
margin: 25px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yg-card,
|
||||||
|
.yg-2026-month {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yg-2025-hero-row,
|
||||||
|
.yg-grid-2025-3col,
|
||||||
|
.yg-grid-2026,
|
||||||
|
.yg-hero-row {
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function initYearGallery() {
|
||||||
|
document.querySelectorAll(".yg-tab").forEach(btn => {
|
||||||
|
btn.onclick = () => {
|
||||||
|
document.querySelectorAll(".yg-tab").forEach(b => b.classList.remove("active"));
|
||||||
|
document.querySelectorAll(".yg-panel").forEach(p => p.classList.remove("active"));
|
||||||
|
btn.classList.add("active");
|
||||||
|
document.getElementById(btn.dataset.target).classList.add("active");
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", initYearGallery);
|
||||||
|
document.addEventListener("pjax:complete", initYearGallery);
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,268 @@
|
|||||||
|
<style>
|
||||||
|
/* 基础样式：保留原有3D旋转卡片核心样式，修复超链接消失问题 */
|
||||||
|
.dr_card_wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: clamp(300px, 70vw, 500px);
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 1;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
touch-action: pan-y;
|
||||||
|
margin: 0 0 50px 0;
|
||||||
|
/* 容器间距 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.dr_card_inner {
|
||||||
|
--dr-w: clamp(60px, 18vw, 100px);
|
||||||
|
--dr-h: clamp(110px, 30vw, 170px);
|
||||||
|
--dr-translateZ: calc((var(--dr-w) + var(--dr-h)));
|
||||||
|
--dr-rotateX: -15deg;
|
||||||
|
--dr-perspective: clamp(800px, 150vw, 1000px);
|
||||||
|
--dr-rotate-direction: 1;
|
||||||
|
/* 统一顺时针旋转，可修改为-1改为逆时针 */
|
||||||
|
position: absolute;
|
||||||
|
width: var(--dr-w);
|
||||||
|
height: var(--dr-h);
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%) perspective(var(--dr-perspective));
|
||||||
|
z-index: 2;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
animation: dr_card_rotating 25s linear infinite;
|
||||||
|
will-change: transform;
|
||||||
|
-webkit-will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dr_card_rotating {
|
||||||
|
from {
|
||||||
|
transform: translate(-50%, -50%) perspective(var(--dr-perspective)) rotateX(var(--dr-rotateX)) rotateY(0deg);
|
||||||
|
-webkit-transform: translate(-50%, -50%) perspective(var(--dr-perspective)) rotateX(var(--dr-rotateX)) rotateY(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translate(-50%, -50%) perspective(var(--dr-perspective)) rotateX(var(--dr-rotateX)) rotateY(calc(360deg * var(--dr-rotate-direction)));
|
||||||
|
-webkit-transform: translate(-50%, -50%) perspective(var(--dr-perspective)) rotateX(var(--dr-rotateX)) rotateY(calc(360deg * var(--dr-rotate-direction)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dr_card_card {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
transform: rotateY(calc((360deg / var(--dr-quantity)) * var(--dr-index))) translateZ(var(--dr-translateZ));
|
||||||
|
-webkit-transform: rotateY(calc((360deg / var(--dr-quantity)) * var(--dr-index))) translateZ(var(--dr-translateZ));
|
||||||
|
touch-action: manipulation;
|
||||||
|
z-index: 3;
|
||||||
|
/* 保证卡片层级高于背景 */
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
/* 过渡动画，优化交互体验 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.dr_card_card a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
tap-highlight-color: transparent;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dr_card_img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-color: #eee;
|
||||||
|
position: relative;
|
||||||
|
/* 为视频播放图标做定位容器 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图片卡片专属样式（绿色系，标识静态图片） */
|
||||||
|
.dr_card_card--img {
|
||||||
|
border: 2px solid #4CAF50;
|
||||||
|
/* 绿色边框，直观区分 */
|
||||||
|
background-color: rgba(76, 175, 80, 0.1);
|
||||||
|
/* 浅绿透明底色，增加层次感 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 视频卡片专属样式（蓝色系，标识动态视频） */
|
||||||
|
.dr_card_card--video {
|
||||||
|
border: 2px solid #2196F3;
|
||||||
|
/* 蓝色边框，直观区分 */
|
||||||
|
background-color: rgba(33, 150, 243, 0.1);
|
||||||
|
/* 浅蓝透明底色，增加层次感 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 视频卡片专属播放图标，用户一眼识别视频类型 */
|
||||||
|
.dr_card_card--video .dr_card_img::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: rgba(255, 255, 255, 0.9);
|
||||||
|
clip-path: polygon(50% 50%, 80% 50%, 65% 35%, 65% 65%);
|
||||||
|
/* 三角形播放按钮 */
|
||||||
|
z-index: 10;
|
||||||
|
pointer-events: none;
|
||||||
|
/* 不遮挡超链接点击 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片标签，明确标注图片/视频（强化信息） */
|
||||||
|
.dr_card_tag {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 5;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dr_card_tag--img {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dr_card_tag--video {
|
||||||
|
background-color: #2196F3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 交互反馈，强化用户认知（电脑端hover/手机端active） */
|
||||||
|
.dr_card_card--img:hover {
|
||||||
|
box-shadow: 0 0 18px rgba(76, 175, 80, 0.6);
|
||||||
|
/* 绿色阴影扩散 */
|
||||||
|
transform: rotateY(calc((360deg / var(--dr-quantity)) * var(--dr-index))) translateZ(var(--dr-translateZ)) scale(1.05);
|
||||||
|
/* 轻微放大 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.dr_card_card--video:hover {
|
||||||
|
box-shadow: 0 0 18px rgba(33, 150, 243, 0.6);
|
||||||
|
/* 蓝色阴影扩散 */
|
||||||
|
transform: rotateY(calc((360deg / var(--dr-quantity)) * var(--dr-index))) translateZ(var(--dr-translateZ)) scale(1.05);
|
||||||
|
/* 轻微放大 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.dr_card_card--img:active,
|
||||||
|
.dr_card_card--video:active {
|
||||||
|
opacity: 0.9;
|
||||||
|
/* 手机端触摸反馈，轻微透明 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 媒体查询：小屏手机优化 - 缩小标签文字及容器尺寸 */
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
.dr_card_inner {
|
||||||
|
--dr-rotateX: -10deg;
|
||||||
|
animation-duration: 30s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dr_card_card {
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dr_card_card--video .dr_card_img::after {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
/* 小屏缩小播放图标 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 手机端：缩小标签容器高度和文字大小 */
|
||||||
|
.dr_card_tag {
|
||||||
|
height: 16px;
|
||||||
|
/* 标签容器高度减小 */
|
||||||
|
line-height: 16px;
|
||||||
|
/* 行高与高度匹配，垂直居中 */
|
||||||
|
font-size: 10px;
|
||||||
|
/* 标签文字缩小 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<!-- 单个旋转容器：包含5张图片 + 5个视频（总计10张卡片） -->
|
||||||
|
<div class="dr_card_wrapper">
|
||||||
|
<div class="dr_card_inner" style="--dr-quantity: 10; --dr-rotate-direction: 1;">
|
||||||
|
<!-- 图片卡片（5张，随机挑选原图片集中的5张） -->
|
||||||
|
<div class="dr_card_card dr_card_card--img" style="--dr-index: 0;">
|
||||||
|
<div class="dr_card_tag dr_card_tag--img">图片</div>
|
||||||
|
<a href="/photos">
|
||||||
|
<div class="dr_card_img" style="background-image: url('/upload/3867579473.jpg');"></div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="dr_card_card dr_card_card--img" style="--dr-index: 1;">
|
||||||
|
<div class="dr_card_tag dr_card_tag--img">图片</div>
|
||||||
|
<a href="/photos">
|
||||||
|
<div class="dr_card_img" style="background-image: url('/upload/433739173.jpg');"></div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="dr_card_card dr_card_card--img" style="--dr-index: 2;">
|
||||||
|
<div class="dr_card_tag dr_card_tag--img">图片</div>
|
||||||
|
<a href="/photos">
|
||||||
|
<div class="dr_card_img" style="background-image: url('/upload/2026-0.png');"></div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="dr_card_card dr_card_card--img" style="--dr-index: 3;">
|
||||||
|
<div class="dr_card_tag dr_card_tag--img">图片</div>
|
||||||
|
<a href="/photos">
|
||||||
|
<div class="dr_card_img" style="background-image: url('/upload/IMG_20251207_103435.jpg');"></div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="dr_card_card dr_card_card--img" style="--dr-index: 4;">
|
||||||
|
<div class="dr_card_tag dr_card_tag--img">图片</div>
|
||||||
|
<a href="/photos">
|
||||||
|
<div class="dr_card_img" style="background-image: url('/upload/26szrmrp1fm.jpg');"></div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 视频卡片（5张，随机挑选原视频集中的5张） -->
|
||||||
|
<div class="dr_card_card dr_card_card--video" style="--dr-index: 5;">
|
||||||
|
<div class="dr_card_tag dr_card_tag--video">视频</div>
|
||||||
|
<a href="/videos">
|
||||||
|
<div class="dr_card_img" style="background-image: url('/upload/ec39c62fly1i3rextah4gj22dc35s1ky.jpg');">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="dr_card_card dr_card_card--video" style="--dr-index: 6;">
|
||||||
|
<div class="dr_card_tag dr_card_tag--video">视频</div>
|
||||||
|
<a href="/videos">
|
||||||
|
<div class="dr_card_img" style="background-image: url('/upload/8aea7800gy1i2vfbxoqhdj24w07c0b2p.jpg');">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="dr_card_card dr_card_card--video" style="--dr-index: 7;">
|
||||||
|
<div class="dr_card_tag dr_card_tag--video">视频</div>
|
||||||
|
<a href="/videos">
|
||||||
|
<div class="dr_card_img" style="background-image: url('/upload/IMG_20251207_161707.jpg');"></div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="dr_card_card dr_card_card--video" style="--dr-index: 8;">
|
||||||
|
<div class="dr_card_tag dr_card_tag--video">视频</div>
|
||||||
|
<a href="/videos">
|
||||||
|
<div class="dr_card_img" style="background-image: url('/upload/IMG_9900.jpg');"></div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="dr_card_card dr_card_card--video" style="--dr-index: 9;">
|
||||||
|
<div class="dr_card_tag dr_card_tag--video">视频</div>
|
||||||
|
<a href="/videos">
|
||||||
|
<div class="dr_card_img" style="background-image: url('/upload/IMG_9902.jpg');"></div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,363 @@
|
|||||||
|
<style>
|
||||||
|
/**
|
||||||
|
* 导航容器基础样式
|
||||||
|
*/
|
||||||
|
.nav-container {
|
||||||
|
font-family: 'Segoe UI', Roboto, sans-serif;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tab 导航栏
|
||||||
|
*/
|
||||||
|
.nav-tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #f9fef7;
|
||||||
|
border: 1px solid #e6f7ef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tab {
|
||||||
|
flex: 1;
|
||||||
|
padding: 10px 0;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #2d8659;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.nav-tab {
|
||||||
|
padding: 10px 0;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tab.active {
|
||||||
|
background-color: #4ade80;
|
||||||
|
/* 激活状态背景色 */
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tab:hover:not(.active) {
|
||||||
|
background-color: #e6f7ef;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 内容区标题样式
|
||||||
|
*/
|
||||||
|
.nav-section-title {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #2d8659;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
border-bottom: 2px solid #e6f7ef;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标题前的装饰块 */
|
||||||
|
.nav-section-title::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
width: 8px;
|
||||||
|
height: 24px;
|
||||||
|
background-color: #4ade80;
|
||||||
|
margin-right: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 卡片布局网格
|
||||||
|
*/
|
||||||
|
.nav-grid {
|
||||||
|
display: grid;
|
||||||
|
gap: 25px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.nav-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 575px) {
|
||||||
|
.nav-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 导航卡片样式
|
||||||
|
*/
|
||||||
|
.nav-card {
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4px 12px rgba(74, 222, 128, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border: 1px solid #e6f7ef;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 隐藏的链接，用于覆盖整个卡片 */
|
||||||
|
.nav-card-link {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 悬停效果 */
|
||||||
|
.nav-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 8px 20px rgba(74, 222, 128, 0.2);
|
||||||
|
border-color: #4ade80;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图片容器和图片缩放效果 */
|
||||||
|
.nav-card-img-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 56.25%;
|
||||||
|
/* 16:9 比例 */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-card-img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.5s ease;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-card:hover .nav-card-img {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 卡片内容 */
|
||||||
|
.nav-card-content {
|
||||||
|
padding: 20px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-card-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #2d8659;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-card:hover .nav-card-title {
|
||||||
|
color: #4ade80;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-card-desc {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标签区卡片特殊样式 (tag-section) */
|
||||||
|
.tag-section .nav-card {
|
||||||
|
background: #f9fef7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-section .nav-card-title {
|
||||||
|
color: #166534;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-section .nav-card:hover .nav-card-title {
|
||||||
|
color: #4ade80;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag-section .nav-card-desc {
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 内容切换和动画
|
||||||
|
*/
|
||||||
|
.nav-content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-content.active {
|
||||||
|
display: block;
|
||||||
|
animation: fadeIn 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="nav-container">
|
||||||
|
<div class="nav-tabs">
|
||||||
|
<div class="nav-tab active" data-target="category-content">文章分类</div>
|
||||||
|
<div class="nav-tab" data-target="tag-content">文章标签</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="category-content" class="nav-content active">
|
||||||
|
<h2 class="nav-section-title">热门分类</h2>
|
||||||
|
<div class="nav-grid category-section">
|
||||||
|
|
||||||
|
<div class="nav-card" onclick="pjaxNavigate('/categories/shi')">
|
||||||
|
<div class="nav-card-img-container">
|
||||||
|
<img src="/upload/shi.jpg" class="nav-card-img" alt="诗">
|
||||||
|
</div>
|
||||||
|
<div class="nav-card-content">
|
||||||
|
<h3 class="nav-card-title">诗</h3>
|
||||||
|
<p class="nav-card-desc">笔落山河凝气韵，字藏风月寄情长。一吟一咏皆风骨，半阙半章尽流芳。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-card" onclick="pjaxNavigate('/categories/ci')">
|
||||||
|
<div class="nav-card-img-container">
|
||||||
|
<img src="/upload/ci.jpg" class="nav-card-img" alt="词">
|
||||||
|
</div>
|
||||||
|
<div class="nav-card-content">
|
||||||
|
<h3 class="nav-card-title">词</h3>
|
||||||
|
<p class="nav-card-desc">锦字填成清浅调，柔肠织就婉约声。小令长调皆入画，浅唱低吟总关情。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-card" onclick="pjaxNavigate('/categories/qu')">
|
||||||
|
<div class="nav-card-img-container">
|
||||||
|
<img src="/upload/qu.jpg" class="nav-card-img" alt="曲">
|
||||||
|
</div>
|
||||||
|
<div class="nav-card-content">
|
||||||
|
<h3 class="nav-card-title">曲</h3>
|
||||||
|
<p class="nav-card-desc">俗韵唱尽人间味，清声漫染烟火色。嬉笑怒骂藏真意，浅白深醇总动人。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-card" onclick="pjaxNavigate('/categories/fu')">
|
||||||
|
<div class="nav-card-img-container">
|
||||||
|
<img src="/upload/fu.jpg" class="nav-card-img" alt="赋">
|
||||||
|
</div>
|
||||||
|
<div class="nav-card-content">
|
||||||
|
<h3 class="nav-card-title">赋</h3>
|
||||||
|
<p class="nav-card-desc">铺陈万象摛文彩，墨叙今古诉慨慷。骈俪藏锋含浩气，一赋千秋韵远长。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="tag-content" class="nav-content">
|
||||||
|
<h2 class="nav-section-title">热门标签</h2>
|
||||||
|
<div class="nav-grid tag-section">
|
||||||
|
|
||||||
|
<div class="nav-card" onclick="pjaxNavigate('/tags/li-yu')">
|
||||||
|
<div class="nav-card-img-container">
|
||||||
|
<img src="/upload/liyu.jpg" class="nav-card-img" alt="李煜">
|
||||||
|
</div>
|
||||||
|
<div class="nav-card-content">
|
||||||
|
<h3 class="nav-card-title">李煜</h3>
|
||||||
|
<p class="nav-card-desc">雕栏玉砌成追忆，故国不堪月明中。小楼昨夜东风起，一江春水诉愁浓。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-card" onclick="pjaxNavigate('/tags/li-qing-zhao')">
|
||||||
|
<div class="nav-card-img-container">
|
||||||
|
<img src="/upload/liqingzhao.jpg" class="nav-card-img" alt="李清照">
|
||||||
|
</div>
|
||||||
|
<div class="nav-card-content">
|
||||||
|
<h3 class="nav-card-title">李清照</h3>
|
||||||
|
<p class="nav-card-desc">漱玉词中藏婉绪，半生烟雨半生愁。雁字回时寻旧梦，黄花瘦尽女儿柔。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-card" onclick="pjaxNavigate('/tags/su-shi')">
|
||||||
|
<div class="nav-card-img-container">
|
||||||
|
<img src="/upload/sushi.jpg" class="nav-card-img" alt="苏轼">
|
||||||
|
</div>
|
||||||
|
<div class="nav-card-content">
|
||||||
|
<h3 class="nav-card-title">苏轼</h3>
|
||||||
|
<p class="nav-card-desc">大江东去豪情溢，竹杖芒鞋任平生。明月几时有把酒，豁达胸襟照汗青。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* PJAX 跳转核心函数
|
||||||
|
* 兼容 pjax.js 和 jquery-pjax，无 PJAX 时降级为原生跳转
|
||||||
|
*/
|
||||||
|
function pjaxNavigate(url) {
|
||||||
|
if (window.pjax) {
|
||||||
|
// 适配 pjax.js 原生库
|
||||||
|
pjax.loadUrl(url);
|
||||||
|
} else if (window.$ && $.pjax) {
|
||||||
|
// 适配 jquery-pjax 插件
|
||||||
|
$.pjax({ url: url, container: '#pjax-container' }); // 请替换为你的 PJAX 容器选择器
|
||||||
|
} else {
|
||||||
|
// 降级方案：无 PJAX 时使用原生跳转
|
||||||
|
window.location.href = url;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tab 切换功能
|
||||||
|
*/
|
||||||
|
document.querySelectorAll('.nav-tab').forEach(tab => {
|
||||||
|
tab.addEventListener('click', function () {
|
||||||
|
// 移除所有 Tab 的 active 状态
|
||||||
|
document.querySelectorAll('.nav-tab').forEach(item => item.classList.remove('active'));
|
||||||
|
// 激活当前点击的 Tab
|
||||||
|
this.classList.add('active');
|
||||||
|
|
||||||
|
// 切换内容区
|
||||||
|
const target = this.getAttribute('data-target');
|
||||||
|
document.querySelectorAll('.nav-content').forEach(content => {
|
||||||
|
content.classList.remove('active');
|
||||||
|
});
|
||||||
|
document.getElementById(target).classList.add('active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 优化点击体验（防止300ms延迟，依赖 FastClick 库）
|
||||||
|
*/
|
||||||
|
if ('addEventListener' in document) {
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
if (typeof FastClick !== 'undefined') {
|
||||||
|
FastClick.attach(document.body);
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,251 @@
|
|||||||
|
<div id="my-links-widget" style="max-width: 1200px; margin: 20px auto; padding: 0 15px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
|
||||||
|
<div id="link-container" class="link-container" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;">
|
||||||
|
<a href="/notice" target="_self" data-is-notice="true">
|
||||||
|
<div id="notice-card" class="link-card-default">
|
||||||
|
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
|
||||||
|
<div style="position: relative; z-index: 1;">
|
||||||
|
<div class="icon-box" style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
|
||||||
|
<i class="ri-megaphone-line ri-icon" style="font-size: 30px;"></i>
|
||||||
|
</div>
|
||||||
|
<h4 class="notice-title" style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">通知书</h4>
|
||||||
|
<p class="notice-desc" style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">最新通知与提醒</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/about" target="_self">
|
||||||
|
<div class="link-card-default">
|
||||||
|
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
|
||||||
|
<div style="position: relative; z-index: 1;">
|
||||||
|
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
|
||||||
|
<i class="ri-mail-line ri-icon" style="font-size: 30px;"></i>
|
||||||
|
</div>
|
||||||
|
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">告知信</h4>
|
||||||
|
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">翻阅日记前的须知</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/content" target="_self">
|
||||||
|
<div class="link-card-default">
|
||||||
|
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
|
||||||
|
<div style="position: relative; z-index: 1;">
|
||||||
|
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
|
||||||
|
<i class="ri-plant-line ri-icon" style="font-size: 30px;"></i>
|
||||||
|
</div>
|
||||||
|
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">自命题</h4>
|
||||||
|
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">不同的分类与标签</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/photos" target="_self">
|
||||||
|
<div class="link-card-default">
|
||||||
|
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
|
||||||
|
<div style="position: relative; z-index: 1;">
|
||||||
|
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
|
||||||
|
<i class="ri-folder-image-line ri-icon" style="font-size: 30px;"></i>
|
||||||
|
</div>
|
||||||
|
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">小插曲</h4>
|
||||||
|
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">值得的图片与视频</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/address" target="_self">
|
||||||
|
<div class="link-card-default">
|
||||||
|
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
|
||||||
|
<div style="position: relative; z-index: 1;">
|
||||||
|
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
|
||||||
|
<i class="ri-contacts-line ri-icon" style="font-size: 30px;"></i>
|
||||||
|
</div>
|
||||||
|
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">通讯录</h4>
|
||||||
|
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">猜猜看会有谁呢</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/friends" target="_self">
|
||||||
|
<div class="link-card-default">
|
||||||
|
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
|
||||||
|
<div style="position: relative; z-index: 1;">
|
||||||
|
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
|
||||||
|
<i class="ri-message-3-line ri-icon" style="font-size: 30px;"></i>
|
||||||
|
</div>
|
||||||
|
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">朋友圈</h4>
|
||||||
|
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">大家都在干什么</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/store" target="_self">
|
||||||
|
<div class="link-card-default">
|
||||||
|
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
|
||||||
|
<div style="position: relative; z-index: 1;">
|
||||||
|
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
|
||||||
|
<i class="ri-building-4-line ri-icon" style="font-size: 30px;"></i>
|
||||||
|
</div>
|
||||||
|
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">储物柜</h4>
|
||||||
|
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">左边翻翻右边找找</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/qiyu" target="_self">
|
||||||
|
<div class="link-card-default">
|
||||||
|
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
|
||||||
|
<div style="position: relative; z-index: 1;">
|
||||||
|
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
|
||||||
|
<i class="ri-book-3-line ri-icon" style="font-size: 30px;"></i>
|
||||||
|
</div>
|
||||||
|
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">奇遇书</h4>
|
||||||
|
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">每天都值得记录</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="https://api.anian.net" target="_blank">
|
||||||
|
<div class="link-card-default">
|
||||||
|
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
|
||||||
|
<div style="position: relative; z-index: 1;">
|
||||||
|
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
|
||||||
|
<i class="ri-git-repository-line ri-icon" style="font-size: 30px;"></i>
|
||||||
|
</div>
|
||||||
|
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">接口箱</h4>
|
||||||
|
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">运筹帷幄之中</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/news-2026" target="_self">
|
||||||
|
<div class="link-card-default">
|
||||||
|
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
|
||||||
|
<div style="position: relative; z-index: 1;">
|
||||||
|
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
|
||||||
|
<i class="ri-file-list-3-line ri-icon" style="font-size: 30px;"></i>
|
||||||
|
</div>
|
||||||
|
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">每日报</h4>
|
||||||
|
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">决胜千里之外</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="https://git.anian.net" target="_blank">
|
||||||
|
<div class="link-card-default">
|
||||||
|
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
|
||||||
|
<div style="position: relative; z-index: 1;">
|
||||||
|
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
|
||||||
|
<i class="ri-git-pull-request-line ri-icon" style="font-size: 30px;"></i>
|
||||||
|
</div>
|
||||||
|
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">代码库</h4>
|
||||||
|
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">如何实现的呢</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="books" target="_self">
|
||||||
|
<div class="link-card-default">
|
||||||
|
<div class="decor-circle" style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;"></div>
|
||||||
|
<div style="position: relative; z-index: 1;">
|
||||||
|
<div style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
|
||||||
|
<i class="ri-door-open-line ri-icon" style="font-size: 30px;"></i>
|
||||||
|
</div>
|
||||||
|
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">课外书</h4>
|
||||||
|
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">记忆中的锚点</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
#my-links-widget { margin-top: 40px !important; }
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.link-container { grid-template-columns: repeat(4, 1fr) !important; }
|
||||||
|
}
|
||||||
|
.ri-icon { color: white !important; fill: white !important; }
|
||||||
|
.link-container>a { display: flex !important; flex-direction: column !important; height: 100% !important; text-decoration: none !important; }
|
||||||
|
.link-container>a>div { flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; border-radius: 12px !important; padding: 25px 15px !important; text-align: center !important; position: relative !important; overflow: hidden !important; transition: all 0.3s ease !important; border: 2px solid #e2e8f0; }
|
||||||
|
.link-card-default { background: #f0f7f4 !important; }
|
||||||
|
|
||||||
|
.notice-unread {
|
||||||
|
background: #fffbeb !important;
|
||||||
|
border-color: #fce788 !important;
|
||||||
|
}
|
||||||
|
.notice-unread .icon-box { background: #d69e2e !important; }
|
||||||
|
.notice-unread .notice-title { color: #b7791f !important; }
|
||||||
|
.notice-unread .notice-desc { color: #d69e2e !important; font-weight: 500 !important; }
|
||||||
|
|
||||||
|
.link-card-hover { transform: translateY(-5px) !important; box-shadow: 0 10px 20px rgba(72, 187, 120, 0.15) !important; border-color: #74c69d !important; }
|
||||||
|
.notice-unread-hover { transform: translateY(-5px) !important; box-shadow: 0 10px 20px rgba(214, 158, 46, 0.15) !important; border-color: #ecc94b !important; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
const widget = document.getElementById('my-links-widget');
|
||||||
|
if (!widget) return;
|
||||||
|
|
||||||
|
async function initNoticeStatus() {
|
||||||
|
const noticeCard = document.getElementById('notice-card');
|
||||||
|
if (!noticeCard || typeof getAllLatestNoticeDatesFromRSS !== 'function') return;
|
||||||
|
|
||||||
|
const combinedDateStr = await getAllLatestNoticeDatesFromRSS();
|
||||||
|
const decorCircle = noticeCard.querySelector('.decor-circle');
|
||||||
|
|
||||||
|
const isUnread = combinedDateStr && (!getCookie('latest_notice_date') || getCookie('latest_notice_date') !== combinedDateStr);
|
||||||
|
|
||||||
|
if (isUnread) {
|
||||||
|
typeof initNoticeTip === 'function' && initNoticeTip();
|
||||||
|
$('.footer_menu a[href="/navigator"]').css('color', '#ecc94b').find('i').css('color', '#ecc94b');
|
||||||
|
noticeCard.querySelector('.notice-title').textContent = '通知书';
|
||||||
|
noticeCard.querySelector('.notice-desc').textContent = '有新通知待查看';
|
||||||
|
noticeCard.classList.add('notice-unread');
|
||||||
|
if(decorCircle) decorCircle.style.background = '#fef3c7';
|
||||||
|
|
||||||
|
const noticeLink = noticeCard.closest('a');
|
||||||
|
noticeLink.onclick = function() {
|
||||||
|
// $.cookie('latest_notice_date', combinedDateStr, { path: '/', domain: 'anian.net', expires: 365 });
|
||||||
|
$.cookie('latest_notice_date', combinedDateStr, { path: '/', expires: 365 });
|
||||||
|
typeof markAsRead === 'function' && markAsRead(combinedDateStr);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function initCardHover() {
|
||||||
|
document.querySelectorAll('.link-container > a').forEach(card => {
|
||||||
|
const cardDiv = card.querySelector('div');
|
||||||
|
const decorCircle = cardDiv.querySelector('.decor-circle');
|
||||||
|
|
||||||
|
card.onmouseenter = () => {
|
||||||
|
if (cardDiv.classList.contains('notice-unread')) {
|
||||||
|
cardDiv.classList.add('notice-unread-hover');
|
||||||
|
} else {
|
||||||
|
cardDiv.classList.add('link-card-hover');
|
||||||
|
}
|
||||||
|
if(decorCircle) decorCircle.style.transform = 'scale(1.5)';
|
||||||
|
};
|
||||||
|
|
||||||
|
card.onmouseleave = () => {
|
||||||
|
cardDiv.classList.remove('link-card-hover', 'notice-unread-hover');
|
||||||
|
if(decorCircle) decorCircle.style.transform = 'scale(1)';
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function initAll() {
|
||||||
|
if (!document.getElementById('my-links-widget')) return;
|
||||||
|
initCardHover();
|
||||||
|
initNoticeStatus();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener("DOMContentLoaded", initAll);
|
||||||
|
} else {
|
||||||
|
initAll();
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,213 @@
|
|||||||
|
<div class="tab-container" style="width: 100%; max-width: 1200px; margin: 30px auto 0;">
|
||||||
|
<div class="tab-nav" style="display: flex; border-bottom: 1px solid #a7f3d0; margin-bottom: 15px;">
|
||||||
|
<div class="tab-nav-item active" data-tab="tab1"
|
||||||
|
style="flex: 1; padding: 8px 0; cursor: pointer; background-color: #f0fdf4; border: 1px solid #a7f3d0; border-bottom: none; border-radius: 8px 8px 0 0; font-weight: 500; text-align: center; color: #065f46; transition: all 0.3s ease-in-out;">
|
||||||
|
黄黄日历</div>
|
||||||
|
<div class="tab-nav-item" data-tab="tab2"
|
||||||
|
style="flex: 1; padding: 8px 0; cursor: pointer; background-color: #ffffff; border: 1px solid #a7f3d0; border-bottom: none; border-radius: 8px 8px 0 0; font-weight: 500; text-align: center; color: #065f46; transition: all 0.3s ease-in-out;">
|
||||||
|
近日快讯</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-content" style="width: 100%; height: auto; position: relative;">
|
||||||
|
<div class="tab-panel active" id="tab1" style="display: block; width: 100%; height: auto;">
|
||||||
|
<div style="width:100%;height:auto;position:relative;overflow:hidden;">
|
||||||
|
<div id="calendar-img-container-2025"
|
||||||
|
style="width:100%;height:auto;position:relative;margin:0 auto;max-width:1200px;">
|
||||||
|
<div id="calendar-2025-global-blur"></div>
|
||||||
|
<div id="calendar-2025-intro">
|
||||||
|
<div id="calendar-2025-intro-mask"></div>
|
||||||
|
<img id="calendar-2025-intro-img1" src="/upload/2025-0-1.jpg">
|
||||||
|
<img id="calendar-2025-intro-img2" src="/upload/2025-0-2.jpg">
|
||||||
|
</div>
|
||||||
|
<div id="calendar-2025-month-group"
|
||||||
|
style="width:100%;height:auto;position:absolute;top:0;left:0;opacity:0;transition:opacity 1s ease-in-out;z-index:1;">
|
||||||
|
<img id="calendar-2025-month-1"
|
||||||
|
style="width:100%;height:auto;display:block;margin-bottom:5px;object-fit:contain;">
|
||||||
|
<img id="calendar-2025-month-2" style="width:100%;height:auto;display:block;object-fit:contain;">
|
||||||
|
</div>
|
||||||
|
<a id="calendar-2025-link" href="/calendar"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#calendar-2025-global-blur {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(255, 255, 255, .35);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
z-index: 9997;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity .8s ease;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#calendar-2025-intro {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 9999;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#calendar-2025-intro-mask {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(255, 255, 255, .25);
|
||||||
|
backdrop-filter: blur(18px);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#calendar-2025-intro img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
object-fit: contain;
|
||||||
|
opacity: .25;
|
||||||
|
transition: opacity .9s ease, transform 1s cubic-bezier(.22, .61, .36, 1);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#calendar-2025-intro-img1 {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#calendar-2025-intro-img2 {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#calendar-2025-link {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 10000;
|
||||||
|
pointer-events: auto;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-nav-item:hover:not(.active) {
|
||||||
|
background-color: #dcfce7;
|
||||||
|
border-color: #86efac;
|
||||||
|
color: #047857;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-nav-item.active {
|
||||||
|
background-color: #4ADE80 !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
border-color: #4ADE80 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function initializeCalendar2025() {
|
||||||
|
const container = document.getElementById('calendar-img-container-2025');
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
const globalBlur = document.getElementById("calendar-2025-global-blur");
|
||||||
|
const intro = document.getElementById("calendar-2025-intro");
|
||||||
|
const introImg1 = document.getElementById("calendar-2025-intro-img1");
|
||||||
|
const introImg2 = document.getElementById("calendar-2025-intro-img2");
|
||||||
|
const monthGroup = document.getElementById("calendar-2025-month-group");
|
||||||
|
const monthImg1 = document.getElementById("calendar-2025-month-1");
|
||||||
|
const monthImg2 = document.getElementById("calendar-2025-month-2");
|
||||||
|
|
||||||
|
const month = new Date().getMonth() + 1;
|
||||||
|
monthImg1.src = `/upload/2025-${month}-1.jpg`;
|
||||||
|
monthImg2.src = `/upload/2025-${month}-2.jpg`;
|
||||||
|
|
||||||
|
const waitImages = imgs => new Promise(res => {
|
||||||
|
let loaded = 0;
|
||||||
|
const done = () => (++loaded >= imgs.length && res());
|
||||||
|
imgs.forEach(img => {
|
||||||
|
if (img.complete) done();
|
||||||
|
else {
|
||||||
|
img.onload = done;
|
||||||
|
img.onerror = done;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const setHeightByImages = (img1, img2) => {
|
||||||
|
container.style.height = (img1.offsetHeight || 0) + (img2.offsetHeight || 0) + 5 + "px";
|
||||||
|
};
|
||||||
|
|
||||||
|
const smoothScrollToContainer = () => {
|
||||||
|
const rect = container.getBoundingClientRect();
|
||||||
|
const target = window.scrollY + rect.top + rect.height / 2 - window.innerHeight / 2;
|
||||||
|
$('html, body').animate({ scrollTop: target }, 800);
|
||||||
|
};
|
||||||
|
|
||||||
|
const init = async () => {
|
||||||
|
await waitImages([introImg1, introImg2]);
|
||||||
|
setHeightByImages(introImg1, introImg2);
|
||||||
|
|
||||||
|
introImg1.style.opacity = "1";
|
||||||
|
introImg1.style.transform = "translateX(0)";
|
||||||
|
introImg2.style.opacity = "1";
|
||||||
|
introImg2.style.transform = "translateX(0)";
|
||||||
|
|
||||||
|
smoothScrollToContainer();
|
||||||
|
|
||||||
|
await waitImages([monthImg1, monthImg2]);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
introImg1.style.transform = "translateX(100%)";
|
||||||
|
introImg2.style.transform = "translateX(-100%)";
|
||||||
|
introImg1.style.opacity = "0";
|
||||||
|
introImg2.style.opacity = "0";
|
||||||
|
|
||||||
|
intro.style.transition = "opacity .8s ease";
|
||||||
|
intro.style.opacity = 0;
|
||||||
|
globalBlur.style.opacity = 0;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
intro.remove();
|
||||||
|
globalBlur.remove();
|
||||||
|
}, 900);
|
||||||
|
|
||||||
|
monthGroup.style.opacity = 1;
|
||||||
|
monthGroup.style.zIndex = 3;
|
||||||
|
setHeightByImages(monthImg1, monthImg2);
|
||||||
|
}, 1500);
|
||||||
|
};
|
||||||
|
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", initializeCalendar2025);
|
||||||
|
document.addEventListener("pjax:complete", initializeCalendar2025);
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-panel" id="tab2" style="display: none; width: 100%; height: auto;">
|
||||||
|
<iframe src="https://60s.lylme.com/" width="100%" height="800px"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function initTabSwitch() {
|
||||||
|
const navItems = document.querySelectorAll('.tab-nav-item');
|
||||||
|
const panels = document.querySelectorAll('.tab-panel');
|
||||||
|
|
||||||
|
navItems.forEach(item => {
|
||||||
|
item.addEventListener('click', function () {
|
||||||
|
navItems.forEach(nav => nav.classList.remove('active'));
|
||||||
|
this.classList.add('active');
|
||||||
|
|
||||||
|
const targetTab = this.dataset.tab;
|
||||||
|
panels.forEach(panel => {
|
||||||
|
panel.style.display = 'none';
|
||||||
|
panel.classList.remove('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
const targetPanel = document.getElementById(targetTab);
|
||||||
|
targetPanel.style.display = 'block';
|
||||||
|
targetPanel.classList.add('active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', initTabSwitch);
|
||||||
|
document.addEventListener('pjax:complete', initTabSwitch);
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,187 @@
|
|||||||
|
<div class="tab-container" style="width: 100%; max-width: 1200px; margin: 30px auto 0;">
|
||||||
|
<div class="tab-nav" style="display: flex; border-bottom: 1px solid #a7f3d0; margin-bottom: 15px;">
|
||||||
|
<div class="tab-nav-item active" data-tab="tab1"
|
||||||
|
style="flex: 1; padding: 8px 0; cursor: pointer; background-color: #f0fdf4; border: 1px solid #a7f3d0; border-bottom: none; border-radius: 8px 8px 0 0; font-weight: 500; text-align: center; color: #065f46; transition: all 0.3s ease-in-out;">
|
||||||
|
黄黄日历</div>
|
||||||
|
<div class="tab-nav-item" data-tab="tab2"
|
||||||
|
style="flex: 1; padding: 8px 0; cursor: pointer; background-color: #ffffff; border: 1px solid #a7f3d0; border-bottom: none; border-radius: 8px 8px 0 0; font-weight: 500; text-align: center; color: #065f46; transition: all 0.3s ease-in-out;">
|
||||||
|
近日快讯</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-content" style="width: 100%; height: auto; position: relative;">
|
||||||
|
<div class="tab-panel active" id="tab1" style="display: block; width: 100%; height: auto;">
|
||||||
|
<div style="width: 100%; height: auto; position: relative; overflow: hidden;">
|
||||||
|
<div id="calendar-img-container-2026" style="width: 100%; height: auto; position: relative;">
|
||||||
|
<div id="calendar-2026-global-blur"></div>
|
||||||
|
<div id="calendar-2026-intro">
|
||||||
|
<div id="calendar-2026-intro-mask"></div>
|
||||||
|
<img id="calendar-2026-intro-img" src="/upload/2026-0.jpg">
|
||||||
|
</div>
|
||||||
|
<img id="calendar-2026-month"
|
||||||
|
style="width:100%;height:auto;position:absolute;top:0;left:0;object-fit:contain;opacity:0;transition:opacity 1s ease-in-out;z-index:1;pointer-events:none;">
|
||||||
|
<a id="calendar-2026-link" href="/calendar"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#calendar-2026-global-blur {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(255, 255, 255, .35);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
z-index: 9997;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity .8s ease;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#calendar-2026-intro {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 9999;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#calendar-2026-intro-mask {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(255, 255, 255, .25);
|
||||||
|
backdrop-filter: blur(18px);
|
||||||
|
}
|
||||||
|
|
||||||
|
#calendar-2026-intro-img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
opacity: .25;
|
||||||
|
transform: scale(.50);
|
||||||
|
transition: opacity .9s ease, transform 1s cubic-bezier(.22, .61, .36, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#calendar-2026-link {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 5;
|
||||||
|
pointer-events: auto;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-nav-item:hover:not(.active) {
|
||||||
|
background-color: #dcfce7;
|
||||||
|
border-color: #86efac;
|
||||||
|
color: #047857;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-nav-item.active {
|
||||||
|
background-color: #4ADE80 !important;
|
||||||
|
color: #ffffff !important;
|
||||||
|
border-color: #4ADE80 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function initializeCalendar2026() {
|
||||||
|
const container = document.getElementById('calendar-img-container-2026');
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
const intro = document.getElementById("calendar-2026-intro");
|
||||||
|
const introImg = document.getElementById("calendar-2026-intro-img");
|
||||||
|
const globalBlur = document.getElementById("calendar-2026-global-blur");
|
||||||
|
const monthImg = document.getElementById('calendar-2026-month');
|
||||||
|
|
||||||
|
const month = new Date().getMonth() + 1;
|
||||||
|
monthImg.src = `/upload/2026-${month}.jpg`;
|
||||||
|
|
||||||
|
container.style.height = "100vh";
|
||||||
|
|
||||||
|
const setHeight = img => {
|
||||||
|
if (img.complete)
|
||||||
|
container.style.height = img.offsetHeight + 'px';
|
||||||
|
else
|
||||||
|
img.onload = () => container.style.height = img.offsetHeight + 'px';
|
||||||
|
};
|
||||||
|
|
||||||
|
const smoothScrollToContainer = () => {
|
||||||
|
const rect = container.getBoundingClientRect();
|
||||||
|
const target =
|
||||||
|
window.scrollY +
|
||||||
|
rect.top +
|
||||||
|
rect.height / 2 -
|
||||||
|
window.innerHeight / 2;
|
||||||
|
$('html, body').animate({ scrollTop: target }, 800);
|
||||||
|
};
|
||||||
|
|
||||||
|
const init = async () => {
|
||||||
|
await new Promise(r =>
|
||||||
|
monthImg.complete ? r() : monthImg.onload = r
|
||||||
|
);
|
||||||
|
|
||||||
|
setHeight(monthImg);
|
||||||
|
|
||||||
|
introImg.style.opacity = "1";
|
||||||
|
introImg.style.transform = "scale(1)";
|
||||||
|
|
||||||
|
smoothScrollToContainer();
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
intro.style.transition = "opacity .8s ease";
|
||||||
|
intro.style.opacity = 0;
|
||||||
|
|
||||||
|
globalBlur.style.opacity = 0;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
intro.remove();
|
||||||
|
globalBlur.remove();
|
||||||
|
}, 800);
|
||||||
|
|
||||||
|
monthImg.style.opacity = 1;
|
||||||
|
monthImg.style.zIndex = 3;
|
||||||
|
setHeight(monthImg);
|
||||||
|
|
||||||
|
}, 1500);
|
||||||
|
};
|
||||||
|
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", initializeCalendar2026);
|
||||||
|
document.addEventListener("pjax:complete", initializeCalendar2026);
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-panel" id="tab2" style="display: none; width: 100%; height: auto;">
|
||||||
|
<iframe src="https://60s.lylme.com/" width="100%" height="800px"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function initTabSwitch() {
|
||||||
|
const navItems = document.querySelectorAll('.tab-nav-item');
|
||||||
|
const panels = document.querySelectorAll('.tab-panel');
|
||||||
|
|
||||||
|
navItems.forEach(item => {
|
||||||
|
item.addEventListener('click', function () {
|
||||||
|
navItems.forEach(nav => nav.classList.remove('active'));
|
||||||
|
this.classList.add('active');
|
||||||
|
|
||||||
|
const targetTab = this.dataset.tab;
|
||||||
|
panels.forEach(panel => {
|
||||||
|
panel.style.display = 'none';
|
||||||
|
panel.classList.remove('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
const targetPanel = document.getElementById(targetTab);
|
||||||
|
targetPanel.style.display = 'block';
|
||||||
|
targetPanel.classList.add('active');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', initTabSwitch);
|
||||||
|
document.addEventListener('pjax:complete', initTabSwitch);
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,353 @@
|
|||||||
|
<div id="anian-update-wrapper-2026" class="anian-feed-root-container">
|
||||||
|
<div class="anian-feed-grid">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="anian-feed-card" data-rss-url="https://git.anian.net/anian/halo-theme-pix/rss/branch/master">
|
||||||
|
<h3 class="anian-feed-caption">日记簿更新</h3>
|
||||||
|
<div class="anian-feed-list-box">
|
||||||
|
<div class="anian-loading">加载中...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="anian-feed-card" data-rss-url="https://git.anian.net/anian/halo-plugin-friends/rss/branch/master">
|
||||||
|
<h3 class="anian-feed-caption">朋友圈功能更新</h3>
|
||||||
|
<div class="anian-feed-list-box">
|
||||||
|
<div class="anian-loading">加载中...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="anian-feed-card" data-rss-url="https://git.anian.net/anian/halo-plugin-comment/rss/branch/master">
|
||||||
|
<h3 class="anian-feed-caption">评论功能更新</h3>
|
||||||
|
<div class="anian-feed-list-box">
|
||||||
|
<div class="anian-loading">加载中...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="anian-feed-card" data-rss-url="https://git.anian.net/anian/halo-plugin-photos/rss/branch/master">
|
||||||
|
<h3 class="anian-feed-caption">图库功能更新</h3>
|
||||||
|
<div class="anian-feed-list-box">
|
||||||
|
<div class="anian-loading">加载中...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="anian-feed-card" data-rss-url="https://git.anian.net/anian/halo-plugin-douban/rss/branch/master">
|
||||||
|
<h3 class="anian-feed-caption">课外书功能更新</h3>
|
||||||
|
<div class="anian-feed-list-box">
|
||||||
|
<div class="anian-loading">加载中...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="anian-feed-card" data-rss-url="https://git.anian.net/anian/halo-plugin-dever/rss/branch/master">
|
||||||
|
<h3 class="anian-feed-caption">插件开发容器更新</h3>
|
||||||
|
<div class="anian-feed-list-box">
|
||||||
|
<div class="anian-loading">加载中...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="anian-feed-card" data-rss-url="https://git.anian.net/anian/api-python/rss/branch/master">
|
||||||
|
<h3 class="anian-feed-caption">应用接口更新</h3>
|
||||||
|
<div class="anian-feed-list-box">
|
||||||
|
<div class="anian-loading">加载中...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="anian-feed-card" data-rss-url="https://git.anian.net/anian/anian-tool/rss/branch/master">
|
||||||
|
<h3 class="anian-feed-caption">小工具更新</h3>
|
||||||
|
<div class="anian-feed-list-box">
|
||||||
|
<div class="anian-loading">加载中...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="anian-feed-card" data-rss-url="https://git.anian.net/anian/memos/rss/branch/master">
|
||||||
|
<h3 class="anian-feed-caption">备忘录更新</h3>
|
||||||
|
<div class="anian-feed-list-box">
|
||||||
|
<div class="anian-loading">加载中...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="anian-feed-card" data-rss-url="https://git.anian.net/anian/halo-plugin-moments/rss/branch/master">
|
||||||
|
<h3 class="anian-feed-caption">日记功能更新</h3>
|
||||||
|
<div class="anian-feed-list-box">
|
||||||
|
<div class="anian-loading">加载中...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="anian-feed-card" data-rss-url="https://git.anian.net/anian/halo-plugin-search/rss/branch/master">
|
||||||
|
<h3 class="anian-feed-caption">搜索功能更新</h3>
|
||||||
|
<div class="anian-feed-list-box">
|
||||||
|
<div class="anian-loading">加载中...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="anian-feed-card" data-rss-url="https://git.anian.net/anian/weibo-rss/rss/branch/master">
|
||||||
|
<h3 class="anian-feed-caption">RSS功能更新</h3>
|
||||||
|
<div class="anian-feed-list-box">
|
||||||
|
<div class="anian-loading">加载中...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="anian-feed-card" data-rss-url="https://git.anian.net/anian/halo-plugin-equipments/rss/branch/master">
|
||||||
|
<h3 class="anian-feed-caption">奇遇功能更新</h3>
|
||||||
|
<div class="anian-feed-list-box">
|
||||||
|
<div class="anian-loading">加载中...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 样式作用域锁定 */
|
||||||
|
.anian-feed-root-container {
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #f9fdf8;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anian-feed-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 24px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anian-feed-card {
|
||||||
|
flex: 0 0 calc((100% - 24px) / 2);
|
||||||
|
max-width: calc((100% - 24px) / 2);
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #e1f3d8;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 12px rgba(103, 194, 58, 0.06);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
/* 防止内容溢出圆角 */
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anian-feed-card:first-child {
|
||||||
|
flex-basis: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.anian-feed-caption {
|
||||||
|
margin: 0;
|
||||||
|
padding: 12px 20px;
|
||||||
|
background-color: #f0f9eb;
|
||||||
|
color: #52c41a;
|
||||||
|
/* 更清新的绿色 */
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 600;
|
||||||
|
border-bottom: 1px solid #e1f3d8;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anian-feed-list-box {
|
||||||
|
max-height: 250px;
|
||||||
|
/* 优化高度 */
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 0;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 自定义滚动条 - 更精致 */
|
||||||
|
.anian-feed-list-box::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anian-feed-list-box::-webkit-scrollbar-track {
|
||||||
|
background: #f8fff5;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anian-feed-list-box::-webkit-scrollbar-thumb {
|
||||||
|
background: #b7eb8f;
|
||||||
|
border-radius: 10px;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anian-feed-list-box::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #95de64;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 加载状态美化 */
|
||||||
|
.anian-loading {
|
||||||
|
padding: 20px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
animation: fade 1.2s infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade {
|
||||||
|
from {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 列表项核心样式 - 无下划线 + 精致hover */
|
||||||
|
.anian-feed-item {
|
||||||
|
display: block;
|
||||||
|
padding: 16px 20px;
|
||||||
|
text-decoration: none !important;
|
||||||
|
/* 强制移除下划线 */
|
||||||
|
border-bottom: 1px dashed #f0f9eb;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
/* 统一过渡效果 */
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移除所有状态下的下划线 */
|
||||||
|
.anian-feed-item:link,
|
||||||
|
.anian-feed-item:visited,
|
||||||
|
.anian-feed-item:active {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 增强hover效果 */
|
||||||
|
.anian-feed-item:hover {
|
||||||
|
background-color: #f5fff0;
|
||||||
|
border-color: #d1f0b5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧小装饰 - 提升精致感 */
|
||||||
|
.anian-feed-item::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 3px;
|
||||||
|
height: 100%;
|
||||||
|
background: #67c23a;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anian-feed-item:hover::after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anian-feed-item-time {
|
||||||
|
display: block;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #8c8c8c;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anian-feed-item-title {
|
||||||
|
display: block;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #303133;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anian-feed-item:hover .anian-feed-item-title {
|
||||||
|
color: #52c41a;
|
||||||
|
/* hover时标题变色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 空数据/错误状态样式统一 */
|
||||||
|
.anian-feed-list-box>div {
|
||||||
|
padding: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式优化 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.anian-feed-root-container {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anian-feed-card {
|
||||||
|
flex: 0 0 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anian-feed-caption {
|
||||||
|
padding: 14px 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anian-feed-item {
|
||||||
|
padding: 14px 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
async function fetchRssContent(cardElement) {
|
||||||
|
const url = cardElement.getAttribute('data-rss-url');
|
||||||
|
const listBox = cardElement.querySelector('.anian-feed-list-box');
|
||||||
|
|
||||||
|
// 1. 如果你已经开启了服务器跨域，可以尝试直接请求 url
|
||||||
|
// 2. 如果依然报错，请恢复使用代理：const targetUrl = `https://api.allorigins.win/raw?url=${encodeURIComponent(url)}`;
|
||||||
|
const targetUrl = url;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(targetUrl);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP 错误! 状态码: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const xmlText = await response.text();
|
||||||
|
|
||||||
|
const parser = new DOMParser();
|
||||||
|
const xmlDoc = parser.parseFromString(xmlText, "text/xml");
|
||||||
|
|
||||||
|
// 检查是否有解析错误
|
||||||
|
const parseError = xmlDoc.getElementsByTagName("parsererror");
|
||||||
|
if (parseError.length > 0) {
|
||||||
|
listBox.innerHTML = '<div style="color:#f56c6c;">XML 解析错误</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const items = xmlDoc.querySelectorAll("item");
|
||||||
|
|
||||||
|
let htmlContent = "";
|
||||||
|
|
||||||
|
items.forEach((item, index) => {
|
||||||
|
const title = item.querySelector("title")?.textContent || "无标题";
|
||||||
|
const link = item.querySelector("link")?.textContent || "#";
|
||||||
|
const pubDateStr = item.querySelector("pubDate")?.textContent || "";
|
||||||
|
|
||||||
|
// 简单处理日期
|
||||||
|
const dateObj = new Date(pubDateStr);
|
||||||
|
const formattedTime = isNaN(dateObj) ? pubDateStr.split(' ').slice(0, 4).join(' ') :
|
||||||
|
`${dateObj.getFullYear()}-${(dateObj.getMonth() + 1).toString().padStart(2, '0')}-${dateObj.getDate().toString().padStart(2, '0')}`;
|
||||||
|
|
||||||
|
htmlContent += `
|
||||||
|
<a href="${link}" class="anian-feed-item" target="_blank" rel="noopener">
|
||||||
|
<span class="anian-feed-item-time">${formattedTime}</span>
|
||||||
|
<span class="anian-feed-item-title">${title}</span>
|
||||||
|
</a>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
|
||||||
|
listBox.innerHTML = htmlContent || '<div style="color:#999;">暂无更新内容</div>';
|
||||||
|
} catch (error) {
|
||||||
|
listBox.innerHTML = `<div style="color:#f56c6c;font-size:14px;">失败：超时或发生错误</div>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelectorAll('.anian-feed-card').forEach(card => {
|
||||||
|
fetchRssContent(card);
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,285 @@
|
|||||||
|
<style>
|
||||||
|
.adventure-quest-show-wrap * {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adventure-quest-show-wrap {
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 10px;
|
||||||
|
--aq-show-g2: #E1E9E5;
|
||||||
|
--aq-show-g3: #8fdbb5;
|
||||||
|
--aq-show-g4: #22BB6D;
|
||||||
|
--aq-show-text: #7aa1a1;
|
||||||
|
--aq-mask-bg: rgba(143, 219, 181, 0.9);
|
||||||
|
uk-width-2-3@m;
|
||||||
|
width: 100%;
|
||||||
|
max-width: calc(100% - 20px);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adventure-quest-show-tabs {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
overflow-x: auto;
|
||||||
|
scrollbar-width: none;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 18px;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adventure-quest-show-tab {
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
color: var(--aq-show-text);
|
||||||
|
background: var(--aq-show-g2);
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adventure-quest-show-tab:hover {
|
||||||
|
background: #22BB6D;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adventure-quest-show-tab.adventure-quest-show-active {
|
||||||
|
background: var(--aq-show-g4);
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.adventure-quest-show-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 16px;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 6px;
|
||||||
|
margin: 0 auto;
|
||||||
|
min-height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adventure-quest-show-card {
|
||||||
|
--aq-hover-text: #fff;
|
||||||
|
background: #f7f7f8;
|
||||||
|
border-radius: 5px;
|
||||||
|
/* 卡片基础圆角（遮罩可继承此值） */
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
aspect-ratio: 1/1 !important;
|
||||||
|
flex: 0 0 calc(50% - 8px) !important;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adventure-quest-show-card__img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adventure-quest-show-card__hover-text {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
color: var(--aq-hover-text);
|
||||||
|
border-radius: 15px;
|
||||||
|
background: var(--aq-mask-bg);
|
||||||
|
font-weight: bold;
|
||||||
|
transform: scale(0);
|
||||||
|
transform-origin: center;
|
||||||
|
transition: all 0.3s cubic-bezier(0.6, 0.4, 0, 1);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adventure-quest-show-card:hover .adventure-quest-show-card__hover-text {
|
||||||
|
transform: scale(1);
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 639px) {
|
||||||
|
.adventure-quest-show-card {
|
||||||
|
flex: 0 0 100% !important;
|
||||||
|
aspect-ratio: 1/1 !important;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adventure-quest-show-container {
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.adventure-quest-show-load {
|
||||||
|
text-align: center;
|
||||||
|
padding: 16px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adventure-quest-show-load button {
|
||||||
|
padding: 10px 15px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #22BB6D;
|
||||||
|
color: white;
|
||||||
|
transition: 0.2s;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adventure-quest-show-load button:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="adventure-quest-show-wrap">
|
||||||
|
<div class="adventure-quest-show-tabs" id="adventure-quest-show-tabs"></div>
|
||||||
|
<div class="adventure-quest-show-container" id="adventure-quest-show-container"></div>
|
||||||
|
<div class="adventure-quest-show-load">
|
||||||
|
<button id="adventure-quest-show-load-btn">翻阅更多</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let globalAdventureQuestState = {
|
||||||
|
adventureQuestCurrent: ''
|
||||||
|
};
|
||||||
|
|
||||||
|
function initializeAdventureQuestEvents() {
|
||||||
|
const wrap = document.querySelector(".adventure-quest-show-wrap");
|
||||||
|
if (!wrap) return;
|
||||||
|
|
||||||
|
const container = document.getElementById("adventure-quest-show-container");
|
||||||
|
const loadBtn = document.getElementById("adventure-quest-show-load-btn");
|
||||||
|
container.innerHTML = "";
|
||||||
|
loadBtn.style.display = "inline-block";
|
||||||
|
|
||||||
|
const adventureQuestData = {
|
||||||
|
"山林奇遇": [
|
||||||
|
{ src: "/upload/qiyu-jieqi-dahan.png", hoverText: "偶遇小鹿<br>aaa" },
|
||||||
|
{ src: "/upload/qiyu-jieqi-dahan.png", hoverText: "清凉沁心" }
|
||||||
|
|
||||||
|
],
|
||||||
|
"都市秘境": [
|
||||||
|
{ src: "/upload/qiyu-jieqi-dahan.png", hoverText: "偶遇小鹿" },
|
||||||
|
{ src: "/upload/qiyu-jieqi-dahan.png", hoverText: "清凉沁心" }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
const ALL_TAB = "全部";
|
||||||
|
|
||||||
|
function getTabFromUrl() {
|
||||||
|
const url = new URL(window.location.href);
|
||||||
|
return url.searchParams.get("tab");
|
||||||
|
}
|
||||||
|
|
||||||
|
function setTabToUrl(tab) {
|
||||||
|
const url = new URL(window.location.href);
|
||||||
|
url.searchParams.set("tab", tab);
|
||||||
|
history.replaceState(null, "", url.toString());
|
||||||
|
}
|
||||||
|
|
||||||
|
function getAllList() {
|
||||||
|
let arr = [];
|
||||||
|
Object.keys(adventureQuestData).forEach(k => arr = arr.concat(adventureQuestData[k]));
|
||||||
|
return arr;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCurrentList() {
|
||||||
|
return globalAdventureQuestState.adventureQuestCurrent === ALL_TAB ? getAllList() : adventureQuestData[globalAdventureQuestState.adventureQuestCurrent];
|
||||||
|
}
|
||||||
|
|
||||||
|
const tabNames = [ALL_TAB, ...Object.keys(adventureQuestData)];
|
||||||
|
let initialTab = getTabFromUrl();
|
||||||
|
|
||||||
|
if (!globalAdventureQuestState.adventureQuestCurrent) {
|
||||||
|
globalAdventureQuestState.adventureQuestCurrent = tabNames.includes(initialTab) ? initialTab : tabNames[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
let adventureQuestLoaded = 0;
|
||||||
|
const adventureQuestPer = 6;
|
||||||
|
|
||||||
|
const tabs = document.getElementById("adventure-quest-show-tabs");
|
||||||
|
tabs.innerHTML = "";
|
||||||
|
tabNames.forEach(name => {
|
||||||
|
const t = document.createElement("div");
|
||||||
|
t.className = "adventure-quest-show-tab" + (name === globalAdventureQuestState.adventureQuestCurrent ? " adventure-quest-show-active" : "");
|
||||||
|
t.innerText = name;
|
||||||
|
t.onclick = () => switchTab(name);
|
||||||
|
tabs.appendChild(t);
|
||||||
|
});
|
||||||
|
|
||||||
|
function switchTab(name) {
|
||||||
|
globalAdventureQuestState.adventureQuestCurrent = name;
|
||||||
|
adventureQuestLoaded = 0;
|
||||||
|
container.innerHTML = "";
|
||||||
|
setTabToUrl(name);
|
||||||
|
|
||||||
|
document.querySelectorAll(".adventure-quest-show-tab").forEach(t => t.classList.remove("adventure-quest-show-active"));
|
||||||
|
[...tabs.children].find(t => t.innerText === name).classList.add("adventure-quest-show-active");
|
||||||
|
|
||||||
|
loadMore();
|
||||||
|
}
|
||||||
|
|
||||||
|
function createAdventureQuestCard(item) {
|
||||||
|
const card = document.createElement("div");
|
||||||
|
card.className = "adventure-quest-show-card";
|
||||||
|
|
||||||
|
card.innerHTML = `
|
||||||
|
<img class="adventure-quest-show-card__img" src="${item.src}" alt="奇遇图片">
|
||||||
|
<span class="adventure-quest-show-card__hover-text">${item.hoverText}</span>
|
||||||
|
`;
|
||||||
|
|
||||||
|
return card;
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadMore() {
|
||||||
|
const list = getCurrentList();
|
||||||
|
if (!list || list.length === 0) {
|
||||||
|
loadBtn.style.display = "none";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const next = list.slice(adventureQuestLoaded, adventureQuestLoaded + adventureQuestPer);
|
||||||
|
if (next.length === 0) {
|
||||||
|
loadBtn.style.display = "none";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
adventureQuestLoaded += next.length;
|
||||||
|
|
||||||
|
next.forEach(item => {
|
||||||
|
const card = createAdventureQuestCard(item);
|
||||||
|
container.appendChild(card);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (adventureQuestLoaded >= list.length) {
|
||||||
|
loadBtn.style.display = "none";
|
||||||
|
} else {
|
||||||
|
loadBtn.style.display = "inline-block";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loadBtn.onclick = () => {
|
||||||
|
loadMore();
|
||||||
|
};
|
||||||
|
|
||||||
|
loadMore();
|
||||||
|
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
container.style.opacity = "1";
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", initializeAdventureQuestEvents);
|
||||||
|
document.addEventListener("pjax:complete", initializeAdventureQuestEvents);
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,340 @@
|
|||||||
|
<style>
|
||||||
|
.store * {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store {
|
||||||
|
--primary: #50C878;
|
||||||
|
--primary-light: #90EE90;
|
||||||
|
--primary-dark: #3A9156;
|
||||||
|
--danger: #E74C3C;
|
||||||
|
--bg: #F9FFFB;
|
||||||
|
--shadow: 0 12px 30px rgba(80, 200, 120, .12);
|
||||||
|
--radius: 8px;
|
||||||
|
padding: 26px 14px;
|
||||||
|
background: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.store .container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 420px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 32px 24px;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store .top-bar {
|
||||||
|
height: 4px;
|
||||||
|
width: 100%;
|
||||||
|
background: linear-gradient(90deg, #8ef5b4, #50C878, #3A9156);
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store .title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #2C3E50;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 搜索 */
|
||||||
|
.store .tag-container {
|
||||||
|
margin: 10px 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.store .tag-search-wrapper {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 6px
|
||||||
|
}
|
||||||
|
|
||||||
|
#tag-search {
|
||||||
|
width: 100%;
|
||||||
|
padding: 7px 12px 7px 34px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #c9efd6;
|
||||||
|
outline: none;
|
||||||
|
background: #fafffb;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store .search-icon {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 10px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标签居中 */
|
||||||
|
.store .tag-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #c9efd6;
|
||||||
|
background: rgba(144, 238, 144, .08);
|
||||||
|
max-height: 100px;
|
||||||
|
overflow-y: auto;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store .tag-item {
|
||||||
|
padding: 5px 7px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #90ee90;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #fff;
|
||||||
|
color: #2c6e49;
|
||||||
|
transition: .25s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store .tag-item:hover {
|
||||||
|
background: linear-gradient(135deg, #90ee90, #50c878);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 无结果提示 */
|
||||||
|
.store .no-result {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #7f8c8d;
|
||||||
|
font-size: 13px;
|
||||||
|
min-height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 输入框 */
|
||||||
|
.store .input-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
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 {
|
||||||
|
flex: 1;
|
||||||
|
padding: 8px 14px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 2px solid #e8f7ec;
|
||||||
|
font-size: 14px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#submit-btn {
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: none;
|
||||||
|
background: linear-gradient(135deg, #50c878, #3a9156);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 手机端 */
|
||||||
|
@media(max-width:520px) {
|
||||||
|
.store {
|
||||||
|
padding: 14px
|
||||||
|
}
|
||||||
|
|
||||||
|
.store .container {
|
||||||
|
padding: 22px 18px;
|
||||||
|
max-width: 95%
|
||||||
|
}
|
||||||
|
|
||||||
|
.store .title {
|
||||||
|
font-size: 22px
|
||||||
|
}
|
||||||
|
|
||||||
|
.store .input-group {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
#submit-btn {
|
||||||
|
width: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.store .tag-list {
|
||||||
|
max-height: 120px
|
||||||
|
}
|
||||||
|
|
||||||
|
#file-path {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="store">
|
||||||
|
<div class="container">
|
||||||
|
<div class="top-bar"></div>
|
||||||
|
|
||||||
|
<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-search-wrapper">
|
||||||
|
<span class="search-icon"><i class="ri-search-line"></i></span>
|
||||||
|
<input id="tag-search" placeholder="搜索标签..." autocomplete="off">
|
||||||
|
</div>
|
||||||
|
<div class="tag-list">
|
||||||
|
<div class="tag-item" data-value="/themes/theme-pix/assets/img/loading.webp">加载动画</div>
|
||||||
|
<div class="tag-item" data-value="/themes/theme-pix/assets/img/logo.webp">网站Logo</div>
|
||||||
|
<div class="tag-item" data-value="/themes/theme-pix/assets/img/banner-all.webp">全部横幅</div>
|
||||||
|
<div class="tag-item" data-value="/themes/theme-pix/assets/img/banner-dong.webp">冬季横幅</div>
|
||||||
|
<div class="tag-item" data-value="/themes/theme-pix/assets/img/cover-mei.webp">封面3</div>
|
||||||
|
<div class="tag-item" data-value="/themes/theme-pix/assets/img/banner-init.webp">初始横幅</div>
|
||||||
|
<div class="tag-item" data-value="/themes/theme-pix/assets/img/sidebar-notice.webp">侧边栏通知</div>
|
||||||
|
<div class="tag-item" data-value="/themes/theme-pix/assets/img/cover-song.webp">封面1</div>
|
||||||
|
<div class="tag-item" data-value="/themes/theme-pix/assets/img/sidebar-quote.webp">侧边栏引用</div>
|
||||||
|
<div class="tag-item" data-value="/themes/theme-pix/assets/img/cover-zhu.webp">封面2</div>
|
||||||
|
<div class="no-result" id="noResult">没有匹配的结果</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function initializeStoreEvents() {
|
||||||
|
let closeLoading = null;
|
||||||
|
const container = document.querySelector(".store");
|
||||||
|
if (!container || container.dataset.init === "1") return;
|
||||||
|
container.dataset.init = "1";
|
||||||
|
|
||||||
|
const input = document.getElementById('file-path');
|
||||||
|
const btn = document.getElementById('submit-btn');
|
||||||
|
const tagItems = document.querySelectorAll('.tag-item');
|
||||||
|
const tagSearch = document.getElementById('tag-search');
|
||||||
|
const noResult = document.getElementById('noResult');
|
||||||
|
|
||||||
|
tagItems.forEach(t => {
|
||||||
|
t.onclick = () => {
|
||||||
|
input.value = t.dataset.value;
|
||||||
|
cocoMessage.success('已填入对应标签信息');
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
tagSearch.oninput = () => {
|
||||||
|
const k = tagSearch.value.toLowerCase();
|
||||||
|
let visible = 0;
|
||||||
|
|
||||||
|
tagItems.forEach(t => {
|
||||||
|
const show = t.textContent.toLowerCase().includes(k) ||
|
||||||
|
t.dataset.value.toLowerCase().includes(k);
|
||||||
|
t.style.display = show ? 'inline-flex' : 'none';
|
||||||
|
if (show) visible++;
|
||||||
|
});
|
||||||
|
|
||||||
|
noResult.style.display = visible === 0 ? 'flex' : 'none';
|
||||||
|
};
|
||||||
|
|
||||||
|
function check(url) {
|
||||||
|
return new Promise(r => {
|
||||||
|
const xhr = new XMLHttpRequest();
|
||||||
|
try {
|
||||||
|
xhr.open('HEAD', url, true);
|
||||||
|
} catch (e) {
|
||||||
|
r(0);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
xhr.timeout = 5000;
|
||||||
|
xhr.onload = () => r(xhr.status);
|
||||||
|
xhr.onerror = () => r(0);
|
||||||
|
xhr.ontimeout = () => r(0);
|
||||||
|
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() {
|
||||||
|
const v = input.value.trim();
|
||||||
|
if (!v) return cocoMessage.warning('请输入翻找目标');
|
||||||
|
const url = normalizeDestination(v);
|
||||||
|
if (!url) return cocoMessage.warning('翻找目标无效');
|
||||||
|
btn.textContent = '翻找中...';
|
||||||
|
closeLoading = cocoMessage.loading('正在翻找中，请稍候...');
|
||||||
|
btn.disabled = true;
|
||||||
|
try {
|
||||||
|
const status = await check(url);
|
||||||
|
if (status === 200) {
|
||||||
|
cocoMessage.success('翻找成功，即将打开目标页面');
|
||||||
|
window.open(url, '_blank');
|
||||||
|
} else if (status === 404) {
|
||||||
|
cocoMessage.warning('翻找失败，失败过多将被封禁');
|
||||||
|
} else {
|
||||||
|
cocoMessage.error('翻找异常，请重试或刷新页面');
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
closeLoading?.();
|
||||||
|
closeLoading = null;
|
||||||
|
btn.textContent = '翻 找';
|
||||||
|
btn.disabled = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
btn.onclick = go;
|
||||||
|
input.onkeydown = e => { if (e.key === 'Enter') go(); };
|
||||||
|
}
|
||||||
|
|
||||||
|
initializeStoreEvents();
|
||||||
|
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
<div class="nav4lite-section">
|
||||||
|
<div class="nav4lite-grid">
|
||||||
|
<a href="/address" class="nav4lite-item">
|
||||||
|
<span class="nav4lite-label">通讯录</span>
|
||||||
|
</a>
|
||||||
|
<a href="/friends" class="nav4lite-item">
|
||||||
|
<span class="nav4lite-label">朋友圈</span>
|
||||||
|
</a>
|
||||||
|
<a href="/navigator" class="nav4lite-center-dot"><i
|
||||||
|
class="sidebar-more ri-arrow-right-s-line"></i></a>
|
||||||
|
<a href="/books" class="nav4lite-item">
|
||||||
|
<span class="nav4lite-label">课外书</span>
|
||||||
|
</a>
|
||||||
|
<a href="/store" class="nav4lite-item">
|
||||||
|
<span class="nav4lite-label">储物柜</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
<div class="subscribe-widget">
|
||||||
|
<div id="subscribe-message" class="subscribe-message">订阅更新</div>
|
||||||
|
|
||||||
|
<form class="subscribe-form" onsubmit="handleSubscribe(event)">
|
||||||
|
<input type="email" name="email" required class="subscribe-input" placeholder="请输入邮箱地址..." autocomplete="email">
|
||||||
|
<button type="submit" class="subscribe-btn" aria-label="Subscribe">
|
||||||
|
<i class="ri-arrow-right-line subscribe-icon"></i>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="subscribe-divider"></div>
|
||||||
|
|
||||||
|
<div class="subscribe-feedback">
|
||||||
|
反馈邮箱：<a href="mailto:support@anian.net" class="feedback-email">support@anian.net</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
<aside id="sideNotice" class="notice-box lotus">
|
||||||
|
<div class="notice-btn-wrap">
|
||||||
|
<span class="notice-bubble" id="noticeBubble">新功能</span>
|
||||||
|
<a href="/notice" class="notice-btn" id="noticeBtn">
|
||||||
|
<i class="remixicon ri-megaphone-line"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="notice-content">
|
||||||
|
<div class="content-inner">
|
||||||
|
在这里，你只能看到黄诗扶和一堆无厘头的话，但也请先仔细阅读<a href=/about>《翻阅须知》</a>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-title">叽 里<br>咕 噜</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
<div class="anian-lunar-date-widget">
|
||||||
|
<div class="anian-lunar-date-text" id="anianLunarText">
|
||||||
|
一日不见 · 如隔三秋
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
<div class="card-content">
|
||||||
|
<canvas id="canvas" style="width:100%;" width="820" height="250"></canvas>
|
||||||
|
</div>
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
<div class="anianx-wrap">
|
||||||
|
<div class="anianx-group">
|
||||||
|
<button class="anianx-btn anianx-left" data-anianx-type="main">观音签</button>
|
||||||
|
<button class="anianx-btn" data-anianx-type="test">测速</button>
|
||||||
|
<button class="anianx-btn anianx-right" data-anianx-type="sub">歇后语</button>
|
||||||
|
<div class="anianx-bubble" id="anianxBubble"><span id="anianxBubbleText">一日不见 · 如隔三秋</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
+12
-12
@@ -10,7 +10,7 @@ spec:
|
|||||||
- $formkit: attachment
|
- $formkit: attachment
|
||||||
name: favicon
|
name: favicon
|
||||||
label: favicon
|
label: favicon
|
||||||
value: /themes/theme-pix/assets/img/favicon.ico
|
value: /themes/theme-pix/assets/img/logo.webp
|
||||||
help: 建议制作一张400x400的png图像, 然后等比缩小到你想转换的ico尺寸,最后通过网上的工具转换成ico图标格式.
|
help: 建议制作一张400x400的png图像, 然后等比缩小到你想转换的ico尺寸,最后通过网上的工具转换成ico图标格式.
|
||||||
- $formkit: menuRadio
|
- $formkit: menuRadio
|
||||||
name: left_nav
|
name: left_nav
|
||||||
@@ -48,7 +48,7 @@ spec:
|
|||||||
- $formkit: attachment
|
- $formkit: attachment
|
||||||
name: default_avatar
|
name: default_avatar
|
||||||
label: 博主头像
|
label: 博主头像
|
||||||
value: /themes/theme-pix/assets/img/avatar.png
|
value: /themes/theme-pix/assets/img/logo.webp
|
||||||
|
|
||||||
- group: base_top_set
|
- group: base_top_set
|
||||||
label: 顶部设置
|
label: 顶部设置
|
||||||
@@ -56,7 +56,7 @@ spec:
|
|||||||
- $formkit: attachment
|
- $formkit: attachment
|
||||||
name: site_logo
|
name: site_logo
|
||||||
label: 常规LOGO
|
label: 常规LOGO
|
||||||
value: /themes/theme-pix/assets/img/avatar.png
|
value: /themes/theme-pix/assets/img/logo.webp
|
||||||
- $formkit: number
|
- $formkit: number
|
||||||
name: logo_height
|
name: logo_height
|
||||||
label: 常规LOGO高度尺寸
|
label: 常规LOGO高度尺寸
|
||||||
@@ -66,11 +66,11 @@ spec:
|
|||||||
name: m_site_logo
|
name: m_site_logo
|
||||||
label: 方形LOGO
|
label: 方形LOGO
|
||||||
help: 建议制作一张48*48的方形LOGO
|
help: 建议制作一张48*48的方形LOGO
|
||||||
value: /themes/theme-pix/assets/img/avatar.png
|
value: /themes/theme-pix/assets/img/logo.webp
|
||||||
- $formkit: attachment
|
- $formkit: attachment
|
||||||
name: mobile_logo
|
name: mobile_logo
|
||||||
label: 移动端LOGO
|
label: 移动端LOGO
|
||||||
value: /themes/theme-pix/assets/img/avatar.png
|
value: /themes/theme-pix/assets/img/logo.webp
|
||||||
- $formkit: checkbox
|
- $formkit: checkbox
|
||||||
name: top_nav_on_web
|
name: top_nav_on_web
|
||||||
id: top_nav_on_web
|
id: top_nav_on_web
|
||||||
@@ -316,7 +316,7 @@ spec:
|
|||||||
- $formkit: attachment
|
- $formkit: attachment
|
||||||
name: topbg_banner
|
name: topbg_banner
|
||||||
label: 顶部封面图
|
label: 顶部封面图
|
||||||
value: /themes/theme-pix/assets/img/banner.jpg
|
value: /themes/theme-pix/assets/img/banner-all.webp
|
||||||
- $formkit: radio
|
- $formkit: radio
|
||||||
name: home_post_type
|
name: home_post_type
|
||||||
label: 首页类型模式
|
label: 首页类型模式
|
||||||
@@ -425,7 +425,7 @@ spec:
|
|||||||
if: $get(donate_on).value
|
if: $get(donate_on).value
|
||||||
name: donate_pic
|
name: donate_pic
|
||||||
label: 打赏二维码
|
label: 打赏二维码
|
||||||
value: /themes/theme-pix/assets/img/avatar.png
|
value: /themes/theme-pix/assets/img/logo.webp
|
||||||
|
|
||||||
- group: moments
|
- group: moments
|
||||||
label: 瞬间设置
|
label: 瞬间设置
|
||||||
@@ -451,7 +451,7 @@ spec:
|
|||||||
- $formkit: attachment
|
- $formkit: attachment
|
||||||
name: banner
|
name: banner
|
||||||
label: 瞬间分享背景
|
label: 瞬间分享背景
|
||||||
value: /themes/theme-pix/assets/img/banner.jpg
|
value: /themes/theme-pix/assets/img/banner-all.webp
|
||||||
- $formkit: attachmentPolicySelect
|
- $formkit: attachmentPolicySelect
|
||||||
name: attachmentPolicy
|
name: attachmentPolicy
|
||||||
label: 附件存储策略
|
label: 附件存储策略
|
||||||
@@ -763,7 +763,7 @@ spec:
|
|||||||
label: 一言
|
label: 一言
|
||||||
value:
|
value:
|
||||||
title: 一言
|
title: 一言
|
||||||
yiyan_bg: /themes/theme-pix/assets/img/banner.jpg
|
yiyan_bg: /themes/theme-pix/assets/img/banner-all.webp
|
||||||
children:
|
children:
|
||||||
- $formkit: text
|
- $formkit: text
|
||||||
name: title
|
name: title
|
||||||
@@ -870,11 +870,11 @@ spec:
|
|||||||
- $formkit: attachment
|
- $formkit: attachment
|
||||||
name: land_logo
|
name: land_logo
|
||||||
label: LOGO或头像
|
label: LOGO或头像
|
||||||
value: /themes/theme-pix/assets/img/avatar.png
|
value: /themes/theme-pix/assets/img/logo.webp
|
||||||
- $formkit: attachment
|
- $formkit: attachment
|
||||||
name: land_feature
|
name: land_feature
|
||||||
label: 封面头图
|
label: 封面头图
|
||||||
value: /themes/theme-pix/assets/img/landimg.jpg
|
value: /themes/theme-pix/assets/img/logo.webp
|
||||||
- $formkit: text
|
- $formkit: text
|
||||||
name: land_title
|
name: land_title
|
||||||
label: 标题或名称
|
label: 标题或名称
|
||||||
@@ -938,7 +938,7 @@ spec:
|
|||||||
- $formkit: attachment
|
- $formkit: attachment
|
||||||
name: custom_login_background
|
name: custom_login_background
|
||||||
label: 背景图
|
label: 背景图
|
||||||
value: /themes/theme-pix/assets/img/default-header.png
|
value: /themes/theme-pix/assets/img/banner-all.webp
|
||||||
accepts:
|
accepts:
|
||||||
- "image/*"
|
- "image/*"
|
||||||
|
|
||||||
|
|||||||
+14
-3
@@ -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= ${'博客' + ' - ' + site.title})}">
|
th:replace="~{modules/layouts/layout :: layout(_head = null,_content = ~{::content},_title= ${'文章' + ' - ' + site.title})}">
|
||||||
|
|
||||||
<th:block th:fragment="content">
|
<th:block th:fragment="content">
|
||||||
|
|
||||||
@@ -8,9 +8,20 @@
|
|||||||
|
|
||||||
<th:block th:replace="~{modules/header}"/>
|
<th:block th:replace="~{modules/header}"/>
|
||||||
|
|
||||||
<div id="pjax-container" th:with="page = ${#strings.isEmpty(param.page) ? 1 : param.page}">
|
<div id="pjax-container" th:with="
|
||||||
|
page = ${#lists.isEmpty(param.page) or #strings.isEmpty(param.page[0]) ? 1 : param.page[0]},
|
||||||
|
tag = ${#lists.isEmpty(param.tag) ? null : param.tag[0]}
|
||||||
|
">
|
||||||
|
|
||||||
<th:block th:replace="~{macro/home-blog :: home-blog(${postFinder.list(page,site.post.postPageSize)},'/archives')}"></th:block>
|
<th:block th:if="${#strings.isEmpty(tag)}">
|
||||||
|
<th:block th:replace="~{macro/home-blog :: home-blog(${postFinder.list(page,site.post.postPageSize)},'/archives',null,null)}"></th:block>
|
||||||
|
</th:block>
|
||||||
|
|
||||||
|
<th:block th:unless="${#strings.isEmpty(tag)}" th:each="categoryItem : ${categoryFinder.listAll()}">
|
||||||
|
<th:block th:if="${#strings.equals(tag, categoryItem.spec.displayName) or #strings.equals(tag, categoryItem.metadata.name)}">
|
||||||
|
<th:block th:replace="~{macro/home-blog :: home-blog(${postFinder.listByCategory(page,site.post.postPageSize,categoryItem.metadata.name)},'/archives',${categoryItem.spec.displayName},${categoryItem.metadata.name})}"></th:block>
|
||||||
|
</th:block>
|
||||||
|
</th:block>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,987 @@
|
|||||||
|
/* 瞬间标签与评论间距 */
|
||||||
|
.moment_tag_gap {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 灯箱视频格式 */
|
||||||
|
.fancybox-slide--video .fancybox-content {
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fancybox-slide--video video.fancybox-video {
|
||||||
|
width: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
max-height: 75dvh !important;
|
||||||
|
max-width: 75dvw !important;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 片刻视频容器鼠标样式 */
|
||||||
|
.fancybox.mo_img {
|
||||||
|
cursor: zoom-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图库视频图标hover放大 */
|
||||||
|
.video-fancybox .play-icon {
|
||||||
|
transition: all 0.4s ease !important;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-fancybox:hover .play-icon {
|
||||||
|
transform: scale(1.3) !important;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 目录左边距：贴紧左侧边栏 */
|
||||||
|
.listree-box {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 960px) and (max-width: 1359.98px) {
|
||||||
|
.listree-box {
|
||||||
|
margin-left: calc((100vw - 860px) / 2 + 284px + 50px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1360px) {
|
||||||
|
.listree-box {
|
||||||
|
margin-left: calc((100vw - 1400px) / 2 + 291px + 50px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 登录容器 */
|
||||||
|
.custom-login-modal {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.55);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1999;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: all .25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-login-modal.show {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-modern-card {
|
||||||
|
width: 250px;
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 30px 25px;
|
||||||
|
border-radius: 14px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-modern-card::before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: 360px;
|
||||||
|
height: 360px;
|
||||||
|
background: #e6f9ee;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
left: -230px;
|
||||||
|
bottom: 20px;
|
||||||
|
border-radius: 40px;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-modern-form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-modern-title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1f2937;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-modern-input-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-modern-icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 2px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-login-modal input.login-modern-input {
|
||||||
|
width: 100%;
|
||||||
|
height: 38px;
|
||||||
|
padding-left: 30px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #1f2937;
|
||||||
|
background: transparent !important;
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
outline: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
border-bottom: 2px solid #cbd5e1 !important;
|
||||||
|
transition: border-color .2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-login-modal input.login-modern-input::placeholder {
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-login-modal input.login-modern-input:focus {
|
||||||
|
border-bottom: 2px solid #22c55e !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-modern-submit {
|
||||||
|
width: 100%;
|
||||||
|
height: 35px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #22c55e;
|
||||||
|
color: white;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
letter-spacing: .5px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background .2s;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-modern-submit:hover {
|
||||||
|
background: #16a34a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-modern-submit:disabled {
|
||||||
|
background: #a7d7bd;
|
||||||
|
cursor: not-allowed;
|
||||||
|
color: #f0fdf4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-modern-submit:disabled:hover {
|
||||||
|
background: #a7d7bd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-modal-btn {
|
||||||
|
position: absolute;
|
||||||
|
right: 5px;
|
||||||
|
top: 5px;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #9ca3af;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 退出登录 */
|
||||||
|
.pixar-notice-wrapper {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 1999;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(0, 0, 0, 0.35);
|
||||||
|
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixar-notice-card {
|
||||||
|
--pixar-ui-blue: #5c99e2;
|
||||||
|
--pixar-ui-green: #61c470;
|
||||||
|
--pixar-ui-green-shadow: #45a253;
|
||||||
|
--pixar-ui-red: #e65e5e;
|
||||||
|
--pixar-ui-red-shadow: #c14242;
|
||||||
|
--pixar-ui-cream: #f5f1e8;
|
||||||
|
--pixar-ui-dark: #4d4c4a;
|
||||||
|
--pixar-ui-green-border: #2e7d32;
|
||||||
|
--pixar-ui-red-border: #8f2d2d;
|
||||||
|
--pixar-button-depth: 0.15em;
|
||||||
|
width: 19em;
|
||||||
|
max-width: 300px;
|
||||||
|
background: var(--pixar-ui-cream);
|
||||||
|
border-radius: 1.5em;
|
||||||
|
padding: 1.2em;
|
||||||
|
border: 0.2em solid var(--pixar-ui-dark);
|
||||||
|
box-shadow: 0.6em 0.6em 0 var(--pixar-ui-dark);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
transition: transform .2s cubic-bezier(.34, 1.56, .64, 1),
|
||||||
|
box-shadow .2s cubic-bezier(.34, 1.56, .64, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixar-notice-card:hover {
|
||||||
|
transform: translateY(-.5em) rotate(-2deg);
|
||||||
|
box-shadow: .8em .8em 0 var(--pixar-ui-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixar-notice-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixar-notice-avatar {
|
||||||
|
width: 3.5em;
|
||||||
|
height: 3.5em;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(45deg, #f9a86d, #f48a58);
|
||||||
|
border: .2em solid var(--pixar-ui-dark);
|
||||||
|
box-shadow: .2em .2em 0 var(--pixar-ui-dark);
|
||||||
|
transition: transform .3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixar-notice-card:hover .pixar-notice-avatar {
|
||||||
|
transform: scale(1.05) rotate(5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixar-notice-username {
|
||||||
|
margin-left: .8em;
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--pixar-ui-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixar-notice-image-area {
|
||||||
|
background: #d8d2c6;
|
||||||
|
border-radius: 1em;
|
||||||
|
padding: .8em;
|
||||||
|
border: .2em solid var(--pixar-ui-dark);
|
||||||
|
box-shadow: inset .2em .2em 0 #b3ac9f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixar-notice-caption {
|
||||||
|
margin: 10px 5px !important;
|
||||||
|
font-size: .9em;
|
||||||
|
line-height: 1.4;
|
||||||
|
color: var(--pixar-ui-dark);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixar-notice-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-top: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixar-notice-btn {
|
||||||
|
border: .2em solid var(--pixar-ui-dark);
|
||||||
|
border-radius: 1em;
|
||||||
|
padding: .5em .8em;
|
||||||
|
font-size: 1.6em;
|
||||||
|
cursor: pointer;
|
||||||
|
background: var(--pixar-ui-green);
|
||||||
|
box-shadow:
|
||||||
|
0 var(--pixar-button-depth) 0 var(--pixar-ui-green-shadow),
|
||||||
|
0 .4em 0 var(--pixar-ui-dark);
|
||||||
|
transition: transform .1s ease,
|
||||||
|
box-shadow .1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixar-notice-btn:active {
|
||||||
|
transform: translateY(var(--pixar-button-depth));
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 var(--pixar-ui-green-shadow),
|
||||||
|
0 var(--pixar-button-depth) 0 var(--pixar-ui-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixar-notice-btn-close:disabled,
|
||||||
|
.pixar-notice-btn-confirm:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
transform: translateY(var(--pixar-button-depth));
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 var(--pixar-ui-green-shadow),
|
||||||
|
0 var(--pixar-button-depth) 0 var(--pixar-ui-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixar-notice-btn-close {
|
||||||
|
background: var(--pixar-ui-red);
|
||||||
|
box-shadow:
|
||||||
|
0 var(--pixar-button-depth) 0 var(--pixar-ui-red-shadow),
|
||||||
|
0 .4em 0 var(--pixar-ui-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixar-notice-btn-close:active {
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 var(--pixar-ui-red-shadow),
|
||||||
|
0 var(--pixar-button-depth) 0 var(--pixar-ui-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixar-notice-btn-confirm:hover {
|
||||||
|
border-color: var(--pixar-ui-green-border) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixar-notice-btn-close:hover {
|
||||||
|
border-color: var(--pixar-ui-red-border) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 按钮禁用样式 */
|
||||||
|
.push_item:disabled {
|
||||||
|
background: #c7d4ce;
|
||||||
|
cursor: not-allowed;
|
||||||
|
color: #f0fdf4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 删除确认弹窗样式 */
|
||||||
|
.moments-modal-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1999;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
animation: momentsFadeIn 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moments-card-widget {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
background-color: #ffffff;
|
||||||
|
text-align: left;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||||
|
animation: momentsSlideUp 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moments-card-header {
|
||||||
|
padding: 1.5rem;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moments-header-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moments-icon-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fee2e2;
|
||||||
|
width: 3rem;
|
||||||
|
height: 3rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moments-icon-wrapper svg {
|
||||||
|
color: #dc2626;
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moments-text-content {
|
||||||
|
flex: 1;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moments-title-text {
|
||||||
|
color: #111827;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moments-message-text {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moments-button-group {
|
||||||
|
margin-top: 1rem;
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moments-btn-confirm {
|
||||||
|
flex: 1;
|
||||||
|
display: inline-flex;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
background-color: #dc2626;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.3rem;
|
||||||
|
font-weight: 500;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
border-width: 1px;
|
||||||
|
border-color: transparent;
|
||||||
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moments-btn-confirm:hover {
|
||||||
|
background-color: #b91c1c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moments-btn-cancel {
|
||||||
|
flex: 1;
|
||||||
|
display: inline-flex;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: #374151;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.3rem;
|
||||||
|
font-weight: 500;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moments-btn-cancel:hover {
|
||||||
|
background-color: #f3f4f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moments-btn-confirm:disabled {
|
||||||
|
background-color: #fecaca;
|
||||||
|
cursor: not-allowed;
|
||||||
|
box-shadow: none;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.moments-btn-cancel:disabled,
|
||||||
|
.push_close:disabled {
|
||||||
|
background-color: #e7f0e5;
|
||||||
|
color: #9ca3af;
|
||||||
|
border-color: #e7f0e5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
box-shadow: none;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 追加：黄色警告模式 --- */
|
||||||
|
.theme-yellow .moments-icon-wrapper {
|
||||||
|
background-color: #fef3c7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-yellow .moments-icon-wrapper svg {
|
||||||
|
color: #d97706;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-yellow .moments-btn-confirm {
|
||||||
|
background-color: #d97706;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-yellow .moments-btn-confirm:hover {
|
||||||
|
background-color: #b45309;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 追加：绿色确认模式 --- */
|
||||||
|
.theme-green .moments-icon-wrapper {
|
||||||
|
background-color: #d1fae5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-green .moments-icon-wrapper svg {
|
||||||
|
color: #059669;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-green .moments-btn-confirm {
|
||||||
|
background-color: #059669;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-green .moments-btn-confirm:hover {
|
||||||
|
background-color: #047857;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 追加：红色保持默认，这里只是为了统一命名，可不加 --- */
|
||||||
|
.theme-red .moments-icon-wrapper {
|
||||||
|
background-color: #fee2e2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-red .moments-icon-wrapper svg {
|
||||||
|
color: #dc2626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-red .moments-btn-confirm {
|
||||||
|
background-color: #dc2626;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes momentsFadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes momentsSlideUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 删除动画 --- */
|
||||||
|
/* 飘散消失动画 (持续 0.8s) */
|
||||||
|
.moments-delete-disperse {
|
||||||
|
animation: momentsDeleteDisperse 0.8s ease-in forwards;
|
||||||
|
transform-origin: center bottom;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes momentsDeleteDisperse {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0) rotate(0deg) scale(1);
|
||||||
|
filter: blur(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
opacity: 0.9;
|
||||||
|
transform: translateY(-10px) rotate(2deg) scale(1.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-120px) rotate(-8deg) scale(0.6);
|
||||||
|
filter: blur(3px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item {
|
||||||
|
padding: 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
column-gap: 0;
|
||||||
|
row-gap: 0;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .loading_box {
|
||||||
|
text-align: center;
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item > .no-results {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item > #prev_pagination {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_card_item {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 40px;
|
||||||
|
border-right: 1px solid #e5e7eb;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_card_item:nth-child(2n) {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_card_inner {
|
||||||
|
display: grid !important;
|
||||||
|
grid-template-columns: 100px 1fr;
|
||||||
|
grid-template-rows: auto auto 1fr;
|
||||||
|
column-gap: 16px;
|
||||||
|
row-gap: 3px;
|
||||||
|
padding: 20px 0;
|
||||||
|
background: transparent;
|
||||||
|
width: 100%;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_media_col {
|
||||||
|
width: 100px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
grid-column: 1;
|
||||||
|
grid-row: 2 / 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.douban_page #post_item {
|
||||||
|
align-items: stretch !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_poster_link,
|
||||||
|
.douban_page #post_item .douban_poster_img {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_poster_img {
|
||||||
|
display: block;
|
||||||
|
height: 140px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_rating_wrap {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_text_col {
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_title_row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
grid-row: 1;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_title_text {
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
color: var(--pix-theme);
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.35;
|
||||||
|
font-weight: 650;
|
||||||
|
text-decoration: none;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_title_text:hover {
|
||||||
|
color: var(--hilight-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_title_text_plain,
|
||||||
|
.douban_page #post_item .douban_title_text_plain:hover {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_detail_link {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 3px 5px;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--pix-theme);
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.4;
|
||||||
|
text-decoration: none;
|
||||||
|
visibility: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: color 0.2s ease, background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_detail_link.is-visible {
|
||||||
|
visibility: visible;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_detail_link:hover {
|
||||||
|
background: var(--pix-background);
|
||||||
|
color: var(--hilight-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_sub_meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 2;
|
||||||
|
align-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_time_text {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 3px 8px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: rgba(168, 85, 247, 0.12);
|
||||||
|
color: #8b5cf6;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_type_badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 3px 8px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: rgba(14, 165, 233, 0.13);
|
||||||
|
color: #0284c7;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.4;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_score_badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 3px 8px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: rgba(249, 115, 22, 0.14);
|
||||||
|
color: #ea580c;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.4;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_content_box {
|
||||||
|
color: #55716a;
|
||||||
|
grid-column: 2;
|
||||||
|
grid-row: 3;
|
||||||
|
align-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_content_main {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #43584d;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
display: -webkit-box;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_expand_btn {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0;
|
||||||
|
color: var(--pix-theme);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_content_meta {
|
||||||
|
margin: 8px 0 0;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #76937f;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_detail_page #post_item {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_detail_page #post_item .douban_card_item {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
border-right: none;
|
||||||
|
padding: 35px 58px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_detail_page #post_item .douban_detail_link {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_detail_page #post_item .douban_title_text {
|
||||||
|
overflow: visible;
|
||||||
|
text-overflow: clip;
|
||||||
|
white-space: normal;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_detail_page #post_item .douban_content_main {
|
||||||
|
display: block;
|
||||||
|
overflow: visible;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
-webkit-line-clamp: unset;
|
||||||
|
-webkit-box-orient: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width:1359px) {
|
||||||
|
.douban_page #post_item {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_card_item {
|
||||||
|
border-right: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width:540px) {
|
||||||
|
.douban_page #post_item .douban_card_item {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_page #post_item .douban_card_inner {
|
||||||
|
column-gap: 11px;
|
||||||
|
row-gap: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.douban_detail_page #post_item .douban_card_item {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipments_page #post_item {
|
||||||
|
padding: 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
column-gap: 0;
|
||||||
|
row-gap: 0;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipments_page #post_item .loading_box,
|
||||||
|
.equipments_page #post_item > .no-results,
|
||||||
|
.equipments_page #post_item > #prev_pagination {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipments_page #post_item .equipment_item {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px 40px;
|
||||||
|
border: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipments_page #post_item .equipment_card_inner {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipments_page #post_item .equipment_visual {
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: transparent;
|
||||||
|
color: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
font: inherit;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipments_page #post_item .equipment_visual > img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipments_page #post_item .equipment_overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 30px;
|
||||||
|
overflow: auto;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(
|
||||||
|
circle closest-side at center,
|
||||||
|
rgba(0, 0, 0, 0.5) 0%,
|
||||||
|
rgba(0, 0, 0, 0.5) 70%,
|
||||||
|
rgba(0, 0, 0, 0.3) 85%,
|
||||||
|
rgba(0, 0, 0, 0) 100%
|
||||||
|
);
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.2s ease, visibility 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipments_page #post_item .equipment_visual:hover .equipment_overlay {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipments_page #post_item .equipment_description {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
overflow: auto;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width:540px) {
|
||||||
|
.equipments_page #post_item {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipments_page #post_item .equipment_item {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipments_page #post_item .equipment_overlay {
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equipments_page #post_item .equipment_description {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -129,6 +129,47 @@
|
|||||||
background-color: var(--dark-ac-btn);
|
background-color: var(--dark-ac-btn);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dark .listree-box {
|
||||||
|
color: var(--light-color);
|
||||||
|
background: rgb(27 29 48 / 94%);
|
||||||
|
border-color: var(--dark-border);
|
||||||
|
box-shadow: 0 18px 48px rgb(0 0 0 / 28%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .toc_nav .listree-btn:hover,
|
||||||
|
.dark .toc_nav .listree-btn.is-active {
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .toc_nav .listree-btn.is-active i {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark #listree-ol ul {
|
||||||
|
border-left-color: var(--dark-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark #listree-ol li a {
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark #listree-ol li a:hover {
|
||||||
|
color: var(--light-color);
|
||||||
|
background: rgb(255 255 255 / 7%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark #listree-ol>li.current>a,
|
||||||
|
.dark #listree-ol>li ul li.current>a {
|
||||||
|
color: var(--dark-ac-btn);
|
||||||
|
border-left-color: var(--dark-ac-btn);
|
||||||
|
background: rgb(43 72 255 / 13%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark #listree-ol::-webkit-scrollbar-thumb {
|
||||||
|
background: rgb(43 72 255 / 48%);
|
||||||
|
}
|
||||||
|
|
||||||
.dark .uk-dropdown{
|
.dark .uk-dropdown{
|
||||||
background: var(--dark-border);
|
background: var(--dark-border);
|
||||||
color: #666;
|
color: #666;
|
||||||
|
|||||||
+1586
-281
File diff suppressed because it is too large
Load Diff
+257
-92
@@ -1,47 +1,44 @@
|
|||||||
/**
|
/**
|
||||||
* 1440px
|
* 统一桌面端展示 (宽度 >= 1366px)
|
||||||
|
* 合并了原 1440px 和 1920px 的通用样式，并应用了你指定的 mod_third 布局
|
||||||
*/
|
*/
|
||||||
@media only screen and (max-width:1440px) {
|
@media only screen and (min-width: 1366px) {
|
||||||
.footer_top , .footer_text {
|
|
||||||
|
/* --- 你提供的统一布局样式 --- */
|
||||||
|
body.mod_third .main_wrap,
|
||||||
|
body.mod_third .go_top_box {
|
||||||
|
max-width: 1400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 导航和侧边栏宽度分配 */
|
||||||
|
body.mod_third .left_nav {
|
||||||
|
width: 21%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.mod_third .main_sidebar {
|
||||||
|
width: 21%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.mod_third .page_main {
|
||||||
|
width: 58%;
|
||||||
|
/* 主内容区 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部导航栏和背景音乐盒定位 */
|
||||||
|
body.mod_third .footer_nav {
|
||||||
|
max-width: 1108px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.mod_third .bgm_box {
|
||||||
|
margin-left: -75px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 桌面端通用的基础样式合并 (源自原1440/1920) --- */
|
||||||
|
.footer_top,
|
||||||
|
.footer_text {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.land_content {
|
|
||||||
max-width: 960px;
|
|
||||||
height: 550px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.land_right {
|
|
||||||
padding: 60px;
|
|
||||||
padding-top: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.land_logo {
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.land_right {
|
|
||||||
padding-top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.land_right .title {
|
|
||||||
font-size: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.land_right .land_des {
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.land_right .footer {
|
|
||||||
padding: 0 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width:1920px) {
|
|
||||||
.main_wrap , .footer_nav , .go_top_box {
|
|
||||||
max-width: 860px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.land_content {
|
.land_content {
|
||||||
max-width: 1080px;
|
max-width: 1080px;
|
||||||
height: 607px;
|
height: 607px;
|
||||||
@@ -67,20 +64,13 @@
|
|||||||
.land_right .footer {
|
.land_right .footer {
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.mod_third .main_wrap , body.mod_third .go_top_box {
|
|
||||||
max-width: 1180px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body.mod_third .footer_nav {
|
|
||||||
max-width: 885px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width:1366px) {
|
/**
|
||||||
|
* 笔记本/小屏显示器 (<= 1366px)
|
||||||
|
* 保持原样
|
||||||
|
*/
|
||||||
|
@media only screen and (max-width: 1366px) {
|
||||||
.land_content {
|
.land_content {
|
||||||
max-width: 860px;
|
max-width: 860px;
|
||||||
height: 500px;
|
height: 500px;
|
||||||
@@ -107,11 +97,14 @@
|
|||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.land_nav a span , .land_nav a i {
|
.land_nav a span,
|
||||||
|
.land_nav a i {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.mod_third .main_wrap , body.mod_third .go_top_box , body.mod_third .footer_nav {
|
body.mod_third .main_wrap,
|
||||||
|
body.mod_third .go_top_box,
|
||||||
|
body.mod_third .footer_nav {
|
||||||
max-width: 860px;
|
max-width: 860px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -119,7 +112,7 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.mod_third #top_third{
|
body.mod_third #top_third {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -136,7 +129,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width:1200px) {
|
/**
|
||||||
|
* 平板端及以下 (<= 1200px)
|
||||||
|
* 保持原样
|
||||||
|
*/
|
||||||
|
@media only screen and (max-width: 1200px) {
|
||||||
.land_page {
|
.land_page {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
@@ -213,14 +210,21 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.land_right .beian , .land_right .copyright {
|
.land_right .beian,
|
||||||
|
.land_right .copyright {
|
||||||
color: #293563;
|
color: #293563;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 小屏平板 (<= 960px)
|
||||||
|
* 540-960px 增加手机端底部导航
|
||||||
|
*/
|
||||||
@media only screen and (max-width:960px) {
|
@media only screen and (max-width:960px) {
|
||||||
.main_wrap , .top_bar , .footer_nav {
|
|
||||||
|
.main_wrap,
|
||||||
|
.top_bar,
|
||||||
|
.footer_nav {
|
||||||
max-width: 720px;
|
max-width: 720px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -228,7 +232,8 @@
|
|||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lbc .page_main , .lbc .footer_nav_box .right {
|
.lbc .page_main,
|
||||||
|
.lbc .footer_nav_box .right {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -246,7 +251,9 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.mod_third .main_wrap, body.mod_third .go_top_box, body.mod_third .footer_nav {
|
body.mod_third .main_wrap,
|
||||||
|
body.mod_third .go_top_box,
|
||||||
|
body.mod_third .footer_nav {
|
||||||
max-width: 720px;
|
max-width: 720px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -258,7 +265,7 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.mod_third_s #top_third{
|
body.mod_third_s #top_third {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -270,11 +277,44 @@
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 540-960px 也显示手机端底部导航，但不显示发布按钮 */
|
||||||
|
.footer_menu {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer_nav_box {
|
||||||
|
top: 56px;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer_nav_box .footer_player {
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.mod_third_s .footer_nav_box .right {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer_main {
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 110px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer_menu a.playing-music,
|
||||||
|
.footer_menu a.playing-music i,
|
||||||
|
.footer_menu a.playing-music .title {
|
||||||
|
color: #4CAF50;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 手机端 (<= 540px)
|
||||||
|
* 保持原样
|
||||||
|
*/
|
||||||
@media only screen and (max-width:540px) {
|
@media only screen and (max-width:540px) {
|
||||||
|
|
||||||
body.mod_third_s #top_third,body.mod_third #top_third{
|
body.mod_third_s #top_third,
|
||||||
|
body.mod_third #top_third {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -289,11 +329,16 @@
|
|||||||
height: 54px;
|
height: 54px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.moment_cat_nav, .posts_cat_nav, .photos_cat_nav {
|
.moment_cat_nav,
|
||||||
|
.posts_cat_nav,
|
||||||
|
.photos_cat_nav,
|
||||||
|
.douban_cat_nav,
|
||||||
|
.friends_cat_nav {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#post_item,#photos_item {
|
#post_item,
|
||||||
|
#photos_item {
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -312,7 +357,8 @@
|
|||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.normal_content .entry-content p, .normal_card_content .entry-content p {
|
.normal_content .entry-content p,
|
||||||
|
.normal_card_content .entry-content p {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -344,7 +390,9 @@
|
|||||||
padding-bottom: 100px;
|
padding-bottom: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.single_wrap .comments-area, .page_content .comments-area , .single_content .comments-area {
|
.single_wrap .comments-area,
|
||||||
|
.page_content .comments-area,
|
||||||
|
.single_content .comments-area {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -358,7 +406,8 @@
|
|||||||
padding-left: 50px;
|
padding-left: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comments-area ul.comment-list li .profile , .comments-area ul.comment-list li .profile a {
|
.comments-area ul.comment-list li .profile,
|
||||||
|
.comments-area ul.comment-list li .profile a {
|
||||||
width: 35px;
|
width: 35px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
}
|
}
|
||||||
@@ -367,17 +416,15 @@
|
|||||||
width: calc(83px*3);
|
width: calc(83px*3);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*.img_list a {*/
|
.t_media_item,
|
||||||
/* width: 30%;*/
|
a.up_img_btn {
|
||||||
/* margin: 2px;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
.t_media_item , a.up_img_btn{
|
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.single_content, .page_content, .page_wrap {
|
.single_content,
|
||||||
|
.page_content,
|
||||||
|
.page_wrap {
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
padding-bottom: 100px;
|
padding-bottom: 100px;
|
||||||
}
|
}
|
||||||
@@ -390,7 +437,12 @@
|
|||||||
bottom: 18%;
|
bottom: 18%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog_list_inner , .single_content, .page_content, .page_wrap , .normal_list_inner , .single_wrap {
|
.blog_list_inner,
|
||||||
|
.single_content,
|
||||||
|
.page_content,
|
||||||
|
.page_wrap,
|
||||||
|
.normal_list_inner,
|
||||||
|
.single_wrap {
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 199;
|
z-index: 199;
|
||||||
@@ -406,7 +458,8 @@
|
|||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top_bar , .dark .top_bar {
|
.top_bar,
|
||||||
|
.dark .top_bar {
|
||||||
height: 64px;
|
height: 64px;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
@@ -443,10 +496,11 @@
|
|||||||
|
|
||||||
.index_banner {
|
.index_banner {
|
||||||
margin-top: -64px;
|
margin-top: -64px;
|
||||||
height: 260px;
|
height: 240px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top_bar.uk-sticky-fixed.uk-active , .dark .top_bar.uk-sticky-fixed.uk-active {
|
.top_bar.uk-sticky-fixed.uk-active,
|
||||||
|
.dark .top_bar.uk-sticky-fixed.uk-active {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
backdrop-filter: none;
|
backdrop-filter: none;
|
||||||
-webkit-backdrop-filter: none;
|
-webkit-backdrop-filter: none;
|
||||||
@@ -455,14 +509,20 @@
|
|||||||
.top_bar.uk-sticky-fixed.uk-active.mobile_active {
|
.top_bar.uk-sticky-fixed.uk-active.mobile_active {
|
||||||
backdrop-filter: blur(0.5rem);
|
backdrop-filter: blur(0.5rem);
|
||||||
-webkit-backdrop-filter: blur(0.5rem);
|
-webkit-backdrop-filter: blur(0.5rem);
|
||||||
background: rgb(255 255 255 / 80%);
|
background: rgb(235 242 237 / 80%);
|
||||||
|
border-radius: 0;
|
||||||
|
height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .top_bar.uk-sticky-fixed.uk-active.mobile_active {
|
.dark .top_bar.uk-sticky-fixed.uk-active.mobile_active {
|
||||||
background: rgb(27 29 48 / 80%);
|
background: rgb(27 29 48 / 80%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.top_tool i , .dark .top_tool i , .dark .mobile_active .top_tool i , .t_dark a i , .dark .t_dark a i {
|
.top_tool i,
|
||||||
|
.dark .top_tool i,
|
||||||
|
.dark .mobile_active .top_tool i,
|
||||||
|
.t_dark a i,
|
||||||
|
.dark .t_dark a i {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -470,7 +530,7 @@
|
|||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top_tool input.s_input:focus ~ [class*=ri-] {
|
.top_tool input.s_input:focus~[class*=ri-] {
|
||||||
color: #4f4f4f;
|
color: #4f4f4f;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -549,7 +609,8 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.land_right .beian , .land_right .copyright {
|
.land_right .beian,
|
||||||
|
.land_right .copyright {
|
||||||
color: #293563;
|
color: #293563;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -611,7 +672,8 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.bg_music , .dark a.bg_music {
|
a.bg_music,
|
||||||
|
.dark a.bg_music {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
@@ -622,10 +684,67 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player_mod .tool , a.m_prev , a.m_next , .timer , a.m_volume , .player_hand {
|
a.m_prev,
|
||||||
|
a.m_next,
|
||||||
|
.timer,
|
||||||
|
a.m_volume,
|
||||||
|
.player_hand {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.player_mod .tool {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin: 4px 0;
|
||||||
|
position: relative;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player_mod .top {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player_mod .player_bar {
|
||||||
|
height: 20px;
|
||||||
|
background: transparent;
|
||||||
|
overflow: visible;
|
||||||
|
touch-action: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player_mod .player_bar::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 6px;
|
||||||
|
background: #ddd;
|
||||||
|
border-radius: 6px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .player_mod .player_bar::before {
|
||||||
|
background: #585858;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player_mod .player_bar .progress {
|
||||||
|
height: 6px;
|
||||||
|
top: 50%;
|
||||||
|
z-index: 2;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.player_mod .player_dot {
|
||||||
|
display: block;
|
||||||
|
width: 13px;
|
||||||
|
height: 13px;
|
||||||
|
margin-right: -9px;
|
||||||
|
z-index: 9;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
|
||||||
|
}
|
||||||
|
|
||||||
.player_mod .m_cover {
|
.player_mod .m_cover {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
@@ -642,7 +761,7 @@
|
|||||||
|
|
||||||
.bgm_box {
|
.bgm_box {
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
border-bottom: 1px solid #f4f4f4;
|
background: rgba(235, 242, 237, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer_nav_box .footer_player {
|
.footer_nav_box .footer_player {
|
||||||
@@ -666,7 +785,7 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
max-width: 100px;
|
max-width: 90px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.single_music_header .mu_img {
|
.single_music_header .mu_img {
|
||||||
@@ -686,15 +805,11 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: none;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*.img_list a:nth-child(1):nth-last-child(4), .img_list a:nth-child(3):nth-last-child(2), .img_list a:nth-child(4):nth-last-child(1) {*/
|
|
||||||
/* width: 30%;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
.admin_ava a.mobile_edit {
|
.admin_ava a.mobile_edit {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@@ -705,7 +820,57 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body.mod_third_s .footer_nav_box .right {
|
body.mod_third_s .footer_nav_box .right {
|
||||||
width:100%;
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 手机端文章目录调整 */
|
||||||
|
.listree-box {
|
||||||
|
left: 40px;
|
||||||
|
right: 12px;
|
||||||
|
max-width: 85vw;
|
||||||
|
max-height: calc(100vh - 96px);
|
||||||
|
margin-left: 0;
|
||||||
|
border-radius: 12px;
|
||||||
|
transform: translate3d(0, -8px, 0) scale(.98);
|
||||||
|
transform-origin: top center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listree-box.is-open {
|
||||||
|
transform: translate3d(0, 0, 0) scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#listree-ol {
|
||||||
|
max-height: min(56vh, 420px);
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px 8px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#listree-ol li {
|
||||||
|
line-height: inherit;
|
||||||
|
margin: 2px 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#listree-ol li a {
|
||||||
|
font-size: 0.82rem;
|
||||||
|
padding: 7px 9px 7px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc_nav .listree-btn.is-active i {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 手机端底部音乐按钮颜色 */
|
||||||
|
.footer_menu a.playing-music,
|
||||||
|
.footer_menu a.playing-music i,
|
||||||
|
.footer_menu a.playing-music .title {
|
||||||
|
color: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 手机端顶部工具按钮 */
|
||||||
|
.top_tool a {
|
||||||
|
padding: 6px;
|
||||||
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
:root {
|
:root {
|
||||||
--font-family: eafont,HarmonyOS_M,PingFang SC,Hiragino Sans GB,Microsoft YaHei,STHeiti,WenQuanYi Micro Hei,Helvetica,Arial,sans-serif;
|
--font-family: HarmonyOS_M, sans-serif;
|
||||||
--halo-comment-widget-base-font-family: var(--font-family);
|
--halo-comment-widget-base-font-family: var(--font-family);
|
||||||
/* 搜索 */
|
/* 搜索 */
|
||||||
--halo-search-widget-base-font-size: 1.04rem;
|
--halo-search-widget-base-font-size: 1.04rem;
|
||||||
--halo-search-widget-base-font-family: var(--font-family);
|
--halo-search-widget-base-font-family: var(--font-family);
|
||||||
--halo-search-widget-primary-color: #3451b2;
|
--halo-search-widget-primary-color: #4CCBA0;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
@@ -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;
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 303 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976L12 1zm0 2.049L5 4.604v9.185a4 4 0 0 0 1.781 3.328L12 20.597l5.219-3.48A4 4 0 0 0 19 13.79V4.604L12 3.05zM12 7a2 2 0 0 1 1.001 3.732L13 15h-2v-4.268A2 2 0 0 1 12 7z" fill="rgba(255,255,255,1)"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 456 B |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 383 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM9 9v6h2V9H9zm4 0v6h2V9h-2z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 238 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM10.622 8.415a.4.4 0 0 0-.622.332v6.506a.4.4 0 0 0 .622.332l4.879-3.252a.4.4 0 0 0 0-.666l-4.88-3.252z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 313 B |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M8 11.333l10.223-6.815a.5.5 0 0 1 .777.416v14.132a.5.5 0 0 1-.777.416L8 12.667V19a1 1 0 0 1-2 0V5a1 1 0 1 1 2 0v6.333z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 256 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 12.667L5.777 19.482A.5.5 0 0 1 5 19.066V4.934a.5.5 0 0 1 .777-.416L16 11.333V5a1 1 0 0 1 2 0v14a1 1 0 0 1-2 0v-6.333z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 259 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18"><path fill="none" d="M0 0h24v24H0z"/><path d="M2 19h20v2H2v-2zM2 5l5 3.5L12 2l5 6.5L22 5v12H2V5zm2 3.841V15h16V8.841l-3.42 2.394L12 5.28l-4.58 5.955L4 8.84z" fill="rgba(255,193,116,1)"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 275 B |
@@ -0,0 +1,283 @@
|
|||||||
|
// 接管手机端底部音乐按钮
|
||||||
|
function modify_m_bottom_music_button_link() {
|
||||||
|
const music = document.querySelector('a[href*="#m_bottom_music_button"]');
|
||||||
|
if (!music) return;
|
||||||
|
music.addEventListener('click', function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
if (!box_up) mu_box_show();
|
||||||
|
else mu_box_hide(0);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 登录逻辑
|
||||||
|
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');
|
||||||
|
|
||||||
|
// 获取令牌及公钥
|
||||||
|
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' });
|
||||||
|
if (response.url.includes('/uc')) {
|
||||||
|
return 'logged';
|
||||||
|
}
|
||||||
|
const htmlText = await response.text();
|
||||||
|
const parser = new DOMParser();
|
||||||
|
const doc = parser.parseFromString(htmlText, 'text/html');
|
||||||
|
// 获取 CSRF Token
|
||||||
|
const csrfInput = doc.querySelector('input[name="_csrf"]');
|
||||||
|
if (!csrfInput || !csrfInput.value) {
|
||||||
|
throw new Error('页面未找到 CSRF 令牌');
|
||||||
|
}
|
||||||
|
csrfToken = csrfInput.value;
|
||||||
|
// 获取 PublicKey
|
||||||
|
const publicKeyMatch = htmlText.match(/const publicKey = "([^"]+)";/);
|
||||||
|
if (!publicKeyMatch || !publicKeyMatch[1]) {
|
||||||
|
throw new Error('页面未找到 PublicKey');
|
||||||
|
}
|
||||||
|
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) }
|
||||||
|
countdownSeconds = 3;
|
||||||
|
const success = await fetchCSRFToken();
|
||||||
|
if (success === 'logged') {
|
||||||
|
closeLoading?.()
|
||||||
|
cocoMessage.success('您已署名成功，请刷新');
|
||||||
|
login_modal.classList.remove('show');
|
||||||
|
} else if (success === 'ok') {
|
||||||
|
loginTimer = setInterval(() => {
|
||||||
|
if (countdownSeconds > 0) {
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关闭弹窗
|
||||||
|
login_closeBtn.addEventListener('click', () => {
|
||||||
|
closeLoading?.()
|
||||||
|
login_modal.classList.remove('show');
|
||||||
|
if (loginTimer) { clearInterval(loginTimer) }
|
||||||
|
});
|
||||||
|
|
||||||
|
// 加密逻辑
|
||||||
|
function encryptPassword(password) {
|
||||||
|
try {
|
||||||
|
const encrypt = new JSEncrypt();
|
||||||
|
encrypt.setPublicKey(publicKey);
|
||||||
|
return encrypt.encrypt(password);
|
||||||
|
} catch (e) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交登录
|
||||||
|
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) {
|
||||||
|
cocoMessage.warning('请先填写信息');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
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', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/x-www-form-urlencoded',
|
||||||
|
},
|
||||||
|
credentials: 'include',
|
||||||
|
body: new URLSearchParams({
|
||||||
|
_csrf: csrfToken,
|
||||||
|
username: username,
|
||||||
|
password: encryptedPwd,
|
||||||
|
'remember-me': 'true'
|
||||||
|
})
|
||||||
|
});
|
||||||
|
// 核心细节：判断最终落点 URL
|
||||||
|
const finalUrl = response.url;
|
||||||
|
if (loginTimer) {
|
||||||
|
clearInterval(loginTimer);
|
||||||
|
}
|
||||||
|
if (finalUrl.includes('/uc')) {
|
||||||
|
islogin = true;
|
||||||
|
closeLoading?.()
|
||||||
|
cocoMessage.success('署名成功，正在跳转...');
|
||||||
|
login_loginBtn.textContent = '跳转中...';
|
||||||
|
const currentScrollTop = window.scrollY || document.documentElement.scrollTop;
|
||||||
|
$.cookie('load_type', 'login', { path: '/' });
|
||||||
|
window.location.reload();
|
||||||
|
} else if (finalUrl.includes('error=invalid-credential')) {
|
||||||
|
closeLoading?.()
|
||||||
|
cocoMessage.warning('署名人与心上锁不匹配');
|
||||||
|
} else {
|
||||||
|
closeLoading?.()
|
||||||
|
cocoMessage.error('速度过快，请稍后重试');
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
closeLoading?.()
|
||||||
|
cocoMessage.error('服务器连接失败');
|
||||||
|
} finally {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 回车登录
|
||||||
|
document.addEventListener("keydown", function (e) {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
const modal = document.getElementById("customLoginModal");
|
||||||
|
if (modal.classList.contains("show")) {
|
||||||
|
document.getElementById("customLoginBtn").click();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// 退出登录
|
||||||
|
async function customLogout() {
|
||||||
|
$('.pixar-notice-btn-confirm, .pixar-notice-btn-close').prop('disabled', true);
|
||||||
|
let closeLoading = cocoMessage.loading('退出登录中...');
|
||||||
|
try {
|
||||||
|
const getResponse = await fetch('/logout', { credentials: 'include' });
|
||||||
|
const htmlText = await getResponse.text();
|
||||||
|
const parser = new DOMParser();
|
||||||
|
const doc = parser.parseFromString(htmlText, 'text/html');
|
||||||
|
const logoutCsrfToken = doc.querySelector('input[name="_csrf"]')?.value;
|
||||||
|
if (!logoutCsrfToken) {
|
||||||
|
cocoMessage.error('页面未找到 CSRF 令牌');
|
||||||
|
$('.pixar-notice-btn-confirm, .pixar-notice-btn-close').prop('disabled', false);
|
||||||
|
closeLoading();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const postResponse = await fetch('/logout', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/x-www-form-urlencoded',
|
||||||
|
},
|
||||||
|
credentials: 'include',
|
||||||
|
body: new URLSearchParams({
|
||||||
|
'_csrf': logoutCsrfToken
|
||||||
|
})
|
||||||
|
});
|
||||||
|
if (postResponse.ok) {
|
||||||
|
closeLoading();
|
||||||
|
cocoMessage.success('您已成功退出登录');
|
||||||
|
const currentScrollTop = window.scrollY || document.documentElement.scrollTop;
|
||||||
|
$.cookie('load_type', 'logout', { path: '/' });
|
||||||
|
window.location.reload();
|
||||||
|
} else {
|
||||||
|
closeLoading();
|
||||||
|
$('.pixar-notice-btn-confirm, .pixar-notice-btn-close').prop('disabled', false);
|
||||||
|
throw new Error('退出请求被拒绝');
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
closeLoading();
|
||||||
|
$('.pixar-notice-btn-confirm, .pixar-notice-btn-close').prop('disabled', false);
|
||||||
|
console.error('Logout Error:', err);
|
||||||
|
cocoMessage.error('退出失败，请手动刷新页面');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function open_logout_box() {
|
||||||
|
const wrapper = document.getElementById("pixarNoticeWrapper");
|
||||||
|
wrapper.style.display = "flex";
|
||||||
|
}
|
||||||
|
|
||||||
|
function hidePixarCard() {
|
||||||
|
const wrapper = document.getElementById("pixarNoticeWrapper");
|
||||||
|
wrapper.style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
function confirmPixarAction() {
|
||||||
|
customLogout();
|
||||||
|
}
|
||||||
|
|
||||||
|
function initDoubanDetailLinks() {
|
||||||
|
document.querySelectorAll('.douban_page:not(.douban_detail_page) .douban_card_item').forEach(function (card) {
|
||||||
|
var link = card.querySelector('.douban_detail_link');
|
||||||
|
var title = card.querySelector('.douban_title_text');
|
||||||
|
var content = card.querySelector('.douban_content_main');
|
||||||
|
|
||||||
|
if (!link || !title || !content) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var titleOverflow = title.scrollWidth > title.clientWidth;
|
||||||
|
var contentOverflow = content.scrollHeight > content.clientHeight + 1;
|
||||||
|
link.classList.toggle('is-visible', titleOverflow || contentOverflow);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('pjax:complete', initDoubanDetailLinks);
|
||||||
|
document.addEventListener('DOMContentLoaded', initDoubanDetailLinks);
|
||||||
|
window.addEventListener('resize', initDoubanDetailLinks);
|
||||||
|
|
||||||
|
// 打开确认模态框
|
||||||
|
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);
|
||||||
|
$('body').off('click', '#momentsCancelBtn');
|
||||||
|
$('body').off('click', '#momentsConfirmBtn');
|
||||||
|
modal.fadeIn(200);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 主题通用交互初始化
|
||||||
|
modify_m_bottom_music_button_link();
|
||||||
+2141
-512
File diff suppressed because it is too large
Load Diff
+181
-134
@@ -1,13 +1,13 @@
|
|||||||
main_content = $('.moment_type_main');
|
main_content = $('.moment_type_main');
|
||||||
function remove_image_temp(){
|
function remove_image_temp() {
|
||||||
if(!$('.image_edit_temp .add_img_box').length > 0){
|
if (!$('.image_edit_temp .add_img_box').length > 0) {
|
||||||
var temp = $('.add_img_box');
|
var temp = $('.add_img_box');
|
||||||
$('.image_edit_temp').html(temp);
|
$('.image_edit_temp').html(temp);
|
||||||
}
|
}
|
||||||
main_content.empty();
|
main_content.empty();
|
||||||
}
|
}
|
||||||
|
|
||||||
function back_image_temp(){
|
function back_image_temp() {
|
||||||
var temp = $('.add_img_box');
|
var temp = $('.add_img_box');
|
||||||
main_content.html(temp);
|
main_content.html(temp);
|
||||||
$('.image_edit_temp').empty();
|
$('.image_edit_temp').empty();
|
||||||
@@ -42,8 +42,8 @@ $('body').on('click', '.moment_card_type a', function () {
|
|||||||
$('body').on('click', '.edit_content .push_card', function () {
|
$('body').on('click', '.edit_content .push_card', function () {
|
||||||
var card_url = $('.edit_card_box .edit_content input').val();
|
var card_url = $('.edit_card_box .edit_content input').val();
|
||||||
var num = $('.card_sortble .moment_card_item').length;
|
var num = $('.card_sortble .moment_card_item').length;
|
||||||
if (num > 2) {
|
if (num > 4) {
|
||||||
cocoMessage.error('最多插入3个卡片');
|
cocoMessage.error('最多插入5个卡片');
|
||||||
$('.edit_card_box .edit_content input').val('');
|
$('.edit_card_box .edit_content input').val('');
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
@@ -58,7 +58,7 @@ $('body').on('click', '.edit_content .push_card', function () {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function card_post(card_url){
|
function card_post(card_url) {
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: 'GET',
|
type: 'GET',
|
||||||
url: `/apis/api.console.halo.run/v1alpha1/posts?keyword=${card_url}&labelSelector=content.halo.run%2Fdeleted%3Dfalse&page=1&size=20`,
|
url: `/apis/api.console.halo.run/v1alpha1/posts?keyword=${card_url}&labelSelector=content.halo.run%2Fdeleted%3Dfalse&page=1&size=20`,
|
||||||
@@ -68,12 +68,12 @@ function card_post(card_url){
|
|||||||
success: function (data) {
|
success: function (data) {
|
||||||
$('.edit_card_box .edit_content input').val('');
|
$('.edit_card_box .edit_content input').val('');
|
||||||
if (data.total > 0) {
|
if (data.total > 0) {
|
||||||
if(data.total>1){
|
if (data.total > 1) {
|
||||||
cocoMessage.error('当前搜索的文章有多个无法选择');
|
cocoMessage.error('当前搜索的文章有多个无法选择');
|
||||||
}else{
|
} else {
|
||||||
var item = data.items[0]
|
var item = data.items[0]
|
||||||
$('.show_card').show();
|
$('.show_card').show();
|
||||||
$('.card_sortble').append(getcard(item.post.metadata.name,item.post.spec.cover,item.post.spec.title,'post'));
|
$('.card_sortble').append(getcard(item.post.metadata.name, item.post.spec.cover, item.post.spec.title, 'post'));
|
||||||
cocoMessage.success('已生成卡片');
|
cocoMessage.success('已生成卡片');
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -86,7 +86,7 @@ function card_post(card_url){
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function edit_page(card_url){
|
function edit_page(card_url) {
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: 'GET',
|
type: 'GET',
|
||||||
url: `/apis/api.console.halo.run/v1alpha1/singlepages?keyword=${card_url}&labelSelector=content.halo.run%2Fdeleted%3Dfalse&page=1&size=20`,
|
url: `/apis/api.console.halo.run/v1alpha1/singlepages?keyword=${card_url}&labelSelector=content.halo.run%2Fdeleted%3Dfalse&page=1&size=20`,
|
||||||
@@ -96,12 +96,12 @@ function edit_page(card_url){
|
|||||||
success: function (data) {
|
success: function (data) {
|
||||||
$('.edit_card_box .edit_content input').val('');
|
$('.edit_card_box .edit_content input').val('');
|
||||||
if (data.total > 0) {
|
if (data.total > 0) {
|
||||||
if(data.total>1){
|
if (data.total > 1) {
|
||||||
cocoMessage.error('当前搜索的页面有多个无法选择');
|
cocoMessage.error('当前搜索的页面有多个无法选择');
|
||||||
}else{
|
} else {
|
||||||
var item = data.items[0]
|
var item = data.items[0]
|
||||||
$('.show_card').show();
|
$('.show_card').show();
|
||||||
$('.card_sortble').append(getcard(item.page.metadata.name,item.page.spec.cover,item.page.spec.title,'page'));
|
$('.card_sortble').append(getcard(item.page.metadata.name, item.page.spec.cover, item.page.spec.title, 'page'));
|
||||||
cocoMessage.success('已生成卡片');
|
cocoMessage.success('已生成卡片');
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -113,7 +113,7 @@ function edit_page(card_url){
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function getcard(name,cover,title,type){
|
function getcard(name, cover, title, type) {
|
||||||
|
|
||||||
return `<div class="moment_card_item" pid="${name}" type="${type}">
|
return `<div class="moment_card_item" pid="${name}" type="${type}">
|
||||||
<a>
|
<a>
|
||||||
@@ -127,31 +127,25 @@ function getcard(name,cover,title,type){
|
|||||||
</div>`
|
</div>`
|
||||||
}
|
}
|
||||||
|
|
||||||
$(document).on('click', '.de_card', function() {
|
$(document).on('click', '.de_card', function () {
|
||||||
var msg = "确认删除此卡片？";
|
|
||||||
var num = $('.moment_card_item').length;
|
var num = $('.moment_card_item').length;
|
||||||
if (confirm(msg)==true){
|
$(this).parents('.moment_card_item').remove();
|
||||||
$(this).parents('.moment_card_item').remove();
|
if (num == 1) {
|
||||||
} else {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(num == 1){
|
|
||||||
$(".show_card").hide();
|
$(".show_card").hide();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
//图文编辑 返回图文编辑区域
|
//图文编辑 返回图文编辑区域
|
||||||
$('body').on('click', '.moment_image_type a', function() {
|
$('body').on('click', '.moment_image_type a', function () {
|
||||||
back_image_temp();
|
back_image_temp();
|
||||||
$('.push_item').attr('type','image');
|
$('.push_item').attr('type', 'image');
|
||||||
});
|
});
|
||||||
|
|
||||||
//发布音乐--------------------------------------------------------------
|
//发布音乐--------------------------------------------------------------
|
||||||
$('body').on('click', '.moment_audio_type a', function() {
|
$('body').on('click', '.moment_audio_type a', function () {
|
||||||
$('.push_item').attr('type','audio');
|
$('.push_item').attr('type', 'audio');
|
||||||
main_content = $('.moment_type_main');
|
main_content = $('.moment_type_main');
|
||||||
if($('.add_audio_box').length > 0){
|
if ($('.add_audio_box').length > 0) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
remove_image_temp();
|
remove_image_temp();
|
||||||
@@ -180,57 +174,57 @@ $('body').on('click', '.moment_audio_type a', function() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
//音乐和视频上传
|
//音乐和视频上传
|
||||||
$(document).on('change','#moment_img_up',function(){
|
$(document).on('change', '#moment_img_up', function () {
|
||||||
if($('#moment_img_up').val() == '')
|
if ($('#moment_img_up').val() == '')
|
||||||
return;
|
return;
|
||||||
var f = this.files[0];
|
var f = this.files[0];
|
||||||
var formData = new FormData();
|
var formData = new FormData();
|
||||||
formData.append('file',f);
|
formData.append('file', f);
|
||||||
const policyName = Theme.moments.policy_name;
|
const policyName = Theme.moments.policy_name;
|
||||||
const groupName = Theme.moments.group_name;
|
const groupName = Theme.moments.group_name;
|
||||||
policyName && formData.append('policyName',policyName)
|
policyName && formData.append('policyName', policyName)
|
||||||
groupName && formData.append('groupName',groupName)
|
groupName && formData.append('groupName', groupName)
|
||||||
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: "POST",
|
type: "POST",
|
||||||
url: `${Theme.moments.attachments_upload_api}`,
|
url: `${Theme.moments.attachments_upload_api}`,
|
||||||
dataType: 'json',
|
dataType: 'json',
|
||||||
data: formData,
|
data: formData,
|
||||||
processData : false,
|
processData: false,
|
||||||
contentType : false,
|
contentType: false,
|
||||||
beforeSend: function () {
|
beforeSend: function () {
|
||||||
cocoMessage.info('上传中...');
|
cocoMessage.info('上传中...');
|
||||||
$('.m_media_left i').remove();
|
$('.m_media_left i').remove();
|
||||||
$('.m_media_left').append("<div class='up_loading' uk-spinner='ratio: .6'></div>");
|
$('.m_media_left').append("<div class='up_loading' uk-spinner='ratio: .6'></div>");
|
||||||
var imged = $('.m_media_left img');
|
var imged = $('.m_media_left img');
|
||||||
if(imged.length > 0){
|
if (imged.length > 0) {
|
||||||
imged.remove();
|
imged.remove();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
success: function(data){
|
success: function (data) {
|
||||||
var thum = data.metadata.annotations["storage.halo.run/uri"] || data.metadata.annotations["storage.halo.run/external-link"]
|
var thum = data.metadata.annotations["storage.halo.run/uri"] || data.metadata.annotations["storage.halo.run/external-link"]
|
||||||
$('.m_media_left .up_loading').remove();
|
$('.m_media_left .up_loading').remove();
|
||||||
$('.m_media_left').append('<img src="/themes/theme-pix/assets/img/video.png" data="'+thum+'">');
|
$('.m_media_left').append('<img src="/themes/theme-pix/assets/img/logo.webp" data="' + thum + '">');
|
||||||
cocoMessage.success('上传成功');
|
cocoMessage.success('上传成功');
|
||||||
$('input#moment_video_url').val(thum)
|
$('input#moment_video_url').val(thum)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
$('body').on('click', '.audio_choose a', function() {
|
$('body').on('click', '.audio_choose a', function () {
|
||||||
var text = '# 请插入封面,歌名以及歌曲外链';
|
var text = '# 请插入封面,歌名以及歌曲外链';
|
||||||
var type = $(this).attr('au_type');
|
var type = $(this).attr('au_type');
|
||||||
if(type != 'local'){
|
if (type != 'local') {
|
||||||
var text = '# 请输入歌曲ID';
|
var text = '# 请输入歌曲ID';
|
||||||
}
|
}
|
||||||
$('.edit_audio_box .tips').text(text);
|
$('.edit_audio_box .tips').text(text);
|
||||||
});
|
});
|
||||||
|
|
||||||
//发布视频--------------------------------------------------------------
|
//发布视频--------------------------------------------------------------
|
||||||
$('body').on('click', '.moment_video_type a', function() {
|
$('body').on('click', '.moment_video_type a', function () {
|
||||||
$('.push_item').attr('type','video');
|
$('.push_item').attr('type', 'video');
|
||||||
main_content = $('.moment_type_main');
|
main_content = $('.moment_type_main');
|
||||||
if($('.add_video_box').length > 0){
|
if ($('.add_video_box').length > 0) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
remove_image_temp();
|
remove_image_temp();
|
||||||
@@ -265,10 +259,10 @@ $('body').on('click', '.moment_video_type a', function() {
|
|||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$('body').on('click', '.video_choose a', function() {
|
$('body').on('click', '.video_choose a', function () {
|
||||||
var text = '# 请上传视频或填写视频外链';
|
var text = '# 请上传视频或填写视频外链';
|
||||||
var type = $(this).attr('vi_type');
|
var type = $(this).attr('vi_type');
|
||||||
if(type == 'bili'){
|
if (type == 'bili') {
|
||||||
var text = '# 请输入B站视频bvid';
|
var text = '# 请输入B站视频bvid';
|
||||||
}
|
}
|
||||||
$('.edit_video_box .tips').text(text);
|
$('.edit_video_box .tips').text(text);
|
||||||
@@ -279,75 +273,91 @@ $('body').on('click', '.video_choose a', function() {
|
|||||||
|
|
||||||
//});
|
//});
|
||||||
|
|
||||||
//删除片刻文章
|
//删除片刻
|
||||||
$('body').on('click', '.control_delete_post', function() {
|
// 全局变量暂存当前要删除的 ID
|
||||||
var pid = $(this).parent().attr('pid');
|
window.currentDeletePid = null;
|
||||||
|
|
||||||
var msg = "确定删除瞬间？";
|
// 删除片刻文章 - 打开弹窗
|
||||||
if (confirm(msg)==true){
|
$('body').on('click', '.control_delete_post', function () {
|
||||||
|
window.currentDeletePid = $(this).parent().attr('pid');
|
||||||
|
openModal('删除确认', '确定删除瞬间？该条数据将被永久移除！', 'red');
|
||||||
|
|
||||||
|
// 点击取消按钮 - 关闭弹窗
|
||||||
|
$('body').on('click', '#momentsCancelBtn', function (e) {
|
||||||
|
$('#momentsDeleteModal').fadeOut(200);
|
||||||
|
window.currentDeletePid = null;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 点击确认删除 - 执行 AJAX
|
||||||
|
$('body').on('click', '#momentsConfirmBtn', function () {
|
||||||
|
var pid = window.currentDeletePid;
|
||||||
|
if (!pid) return;
|
||||||
|
let closeLoading = cocoMessage.loading('正在删除...');
|
||||||
|
$('.moments-btn-cancel, .moments-btn-confirm').prop('disabled', true);
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: 'DELETE',
|
type: 'DELETE',
|
||||||
dataType: 'json',
|
dataType: 'json',
|
||||||
url: `/apis/${Theme.moments.api}/v1alpha1/moments/`+pid,
|
url: `/apis/${Theme.moments.api}/v1alpha1/moments/` + pid,
|
||||||
contentType: "application/json",
|
contentType: "application/json",
|
||||||
beforeSend: function () {
|
|
||||||
cocoMessage.info('处理中..');
|
|
||||||
},
|
|
||||||
success: function (data) {
|
success: function (data) {
|
||||||
|
$('#momentsDeleteModal').fadeOut(200);
|
||||||
|
closeLoading?.()
|
||||||
cocoMessage.success('删除成功');
|
cocoMessage.success('删除成功');
|
||||||
setTimeout(()=>{
|
window.currentDeletePid = null;
|
||||||
$(`#post-${pid}`)[0].remove()
|
const $post = $(`#post-${pid}`);
|
||||||
},1000)
|
if (!$post.length) return;
|
||||||
|
$post.addClass('moments-delete-disperse');
|
||||||
|
setTimeout(() => $post.remove(), 800);
|
||||||
},
|
},
|
||||||
error: function (request) {
|
error: function (request) {
|
||||||
if(request.status){
|
if (request.status) {
|
||||||
|
closeLoading?.()
|
||||||
cocoMessage.error('瞬间不存在或已删除');
|
cocoMessage.error('瞬间不存在或已删除');
|
||||||
}else{
|
} else {
|
||||||
|
closeLoading?.()
|
||||||
cocoMessage.error('删除失败');
|
cocoMessage.error('删除失败');
|
||||||
}
|
}
|
||||||
console.log(request)
|
console.log(request)
|
||||||
|
$('.moments-btn-cancel, .moments-btn-confirm').prop('disabled', false);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
} else {
|
});
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
//置顶片刻
|
//置顶片刻
|
||||||
$('body').on('click', '.sticky_btn', function() {
|
$('body').on('click', '.sticky_btn', function () {
|
||||||
var pid = $(this).parent().attr('pid');
|
var pid = $(this).parent().attr('pid');
|
||||||
var stick = $(this).hasClass('stick');
|
var stick = $(this).hasClass('stick');
|
||||||
if(stick){
|
if (stick) {
|
||||||
var state = 'stick';
|
var state = 'stick';
|
||||||
} else {
|
} else {
|
||||||
var state = 'unstick';
|
var state = 'unstick';
|
||||||
}
|
}
|
||||||
var msg = "确定执行此操作？";
|
var msg = "确定执行此操作？";
|
||||||
if (confirm(msg)==true){
|
if (confirm(msg) == true) {
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: 'POST',
|
type: 'POST',
|
||||||
dataType: 'json',
|
dataType: 'json',
|
||||||
url: Theme.ajaxurl,
|
url: Theme.ajaxurl,
|
||||||
data: {
|
data: {
|
||||||
'action':'stick_moment',
|
'action': 'stick_moment',
|
||||||
pid:pid,
|
pid: pid,
|
||||||
state:state
|
state: state
|
||||||
},
|
},
|
||||||
beforeSend: function () {
|
beforeSend: function () {
|
||||||
cocoMessage.info('处理中..');
|
cocoMessage.info('处理中..');
|
||||||
},
|
},
|
||||||
success: function (data) {
|
success: function (data) {
|
||||||
if(data.state == '1'){
|
if (data.state == '1') {
|
||||||
cocoMessage.success(data.msg);
|
cocoMessage.success(data.msg);
|
||||||
if(data.type == 'stick'){
|
if (data.type == 'stick') {
|
||||||
var post_item = $('#post-'+pid+'.moment_item');
|
var post_item = $('#post-' + pid + '.moment_item');
|
||||||
post_item.remove();
|
post_item.remove();
|
||||||
$('.moment_list').prepend(post_item.prop('outerHTML'));
|
$('.moment_list').prepend(post_item.prop('outerHTML'));
|
||||||
$('#post-'+pid+'.moment_item').find('.post_footer_meta .right').prepend('<span class="sticky_icon"><i class="ri-fire-line"></i> TOP</span>');
|
$('#post-' + pid + '.moment_item').find('.post_footer_meta .right').prepend('<span class="sticky_icon"><i class="ri-fire-line"></i> TOP</span>');
|
||||||
$('#post-'+pid+'.moment_item').find('.post_control').remove();
|
$('#post-' + pid + '.moment_item').find('.post_control').remove();
|
||||||
} else {
|
} else {
|
||||||
$('#post-'+pid+'.moment_item').find('.sticky_icon').remove();
|
$('#post-' + pid + '.moment_item').find('.sticky_icon').remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
@@ -362,40 +372,48 @@ $('body').on('click', '.sticky_btn', function() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
//编辑片刻
|
//编辑片刻
|
||||||
$('body').on('click', '.control_edit_post', function() {
|
$('body').on('click', '.control_edit_post', function () {
|
||||||
|
$('.push_close, .push_item').prop('disabled', true);
|
||||||
|
let closeLoading = null;
|
||||||
|
$(".loca_text").empty().attr("state", '0');
|
||||||
|
$(".loca_text").attr("uk-tooltip", "title:获取位置; pos: top; offset:2;");
|
||||||
|
$('.moment_image_type a').click();
|
||||||
|
$('#topic_content').val('');
|
||||||
|
$(".simi a").html('<i class="ri-lock-unlock-line"></i>').attr('visible', 'PUBLIC');
|
||||||
|
$(".simi a").children().css({ "background": "#e3efe7", "color": "#66c187" });
|
||||||
$('.t_media_item').remove();
|
$('.t_media_item').remove();
|
||||||
$('#moment_audio_api').remove();
|
$('#moment_audio_api').remove();
|
||||||
var pid = $(this).parent().attr('pid');
|
var pid = $(this).parent().attr('pid');
|
||||||
$('.push_item').html('<i class="ri-edit-box-line"></i>更新');
|
$('.push_item').html('<i class="ri-edit-box-line"></i>更新');
|
||||||
$('.push_item').attr('pid',pid).attr('action','update')
|
$('.push_item').attr('pid', pid).attr('action', 'update')
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: 'GET',
|
type: 'GET',
|
||||||
url: `/apis/${Theme.moments.api}/v1alpha1/moments/`+pid,
|
url: `/apis/${Theme.moments.api}/v1alpha1/moments/` + pid,
|
||||||
beforeSend: function () {
|
beforeSend: function () {
|
||||||
cocoMessage.info('数据拉取中');
|
closeLoading = cocoMessage.loading('数据拉取中...');
|
||||||
//$('.t_form').before('<div class="edit_overlay"></div>');
|
//$('.t_form').before('<div class="edit_overlay"></div>');
|
||||||
},
|
},
|
||||||
success: function (data) {
|
success: function (data) {
|
||||||
$('.push_item').attr('version',data.metadata.version)
|
$('.push_item').attr('version', data.metadata.version)
|
||||||
$('.push_item').attr('owner',data.spec.owner)
|
$('.push_item').attr('owner', data.spec.owner)
|
||||||
$('.push_item').attr('releaseTime',data.spec.releaseTime)
|
$('.push_item').attr('releaseTime', data.spec.releaseTime)
|
||||||
//发布状态
|
//发布状态
|
||||||
if(data.spec.visible == 'PRIVATE'){
|
if (data.spec.visible == 'PRIVATE') {
|
||||||
$(".simi a").html('<i class="ri-lock-line"></i>').attr('visible','PRIVATE');
|
$(".simi a").html('<i class="ri-lock-line"></i>').attr('visible', 'PRIVATE');
|
||||||
$(".simi a").children().css({"background":"#ddd","color":"#c6c6c6"});
|
$(".simi a").children().css({ "background": "#ddd", "color": "#c6c6c6" });
|
||||||
} else {
|
} else {
|
||||||
$(".simi a").html('<i class="ri-lock-unlock-line"></i>').attr('visible','PUBLIC');
|
$(".simi a").html('<i class="ri-lock-unlock-line"></i>').attr('visible', 'PUBLIC');
|
||||||
$(".simi a").children().css({"background":"#e3efe7","color":"#66c187"});
|
$(".simi a").children().css({ "background": "#e3efe7", "color": "#66c187" });
|
||||||
}
|
}
|
||||||
var medium = data.spec.content.medium;
|
var medium = data.spec.content.medium;
|
||||||
var tags = data.spec.tags
|
var tags = data.spec.tags
|
||||||
if(medium.length > 0){
|
if (medium.length > 0) {
|
||||||
var type = medium[0].type;
|
var type = medium[0].type;
|
||||||
}
|
}
|
||||||
let content = data.spec.content.html;
|
let content = data.spec.content.html;
|
||||||
if(content == null){
|
if (content == null) {
|
||||||
content = '';
|
content = '';
|
||||||
}else{
|
} else {
|
||||||
|
|
||||||
// 创建一个新的HTML解析器对象
|
// 创建一个新的HTML解析器对象
|
||||||
var parser = new DOMParser();
|
var parser = new DOMParser();
|
||||||
@@ -417,16 +435,15 @@ $('body').on('click', '.control_edit_post', function() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
$('#topic_content').val(content);
|
$('#topic_content').val(content);
|
||||||
if(tags.length > 0){
|
if (tags.length > 0) {
|
||||||
$('.t_cat_toogle span').text(tags[0]);
|
$('.t_cat_toogle span').text(tags[0]);
|
||||||
}
|
}
|
||||||
|
|
||||||
if(data.metadata.annotations?.mylocal!=null && data.metadata.annotations?.mylocal!='') {
|
if (data.metadata.annotations?.mylocal != null && data.metadata.annotations?.mylocal != '') {
|
||||||
$('.loca_text').text(data.metadata.annotations?.mylocal);
|
$('.loca_text').text(data.metadata.annotations?.mylocal);
|
||||||
}
|
}
|
||||||
|
|
||||||
switch(type)
|
switch (type) {
|
||||||
{
|
|
||||||
case "PHOTO":
|
case "PHOTO":
|
||||||
//if(data.moment_data.length > 0){ 文字片刻没有数据
|
//if(data.moment_data.length > 0){ 文字片刻没有数据
|
||||||
edit_image(data);
|
edit_image(data);
|
||||||
@@ -442,61 +459,91 @@ $('body').on('click', '.control_edit_post', function() {
|
|||||||
edit_video(data);
|
edit_video(data);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
cocoMessage.success('拉取完成');
|
closeLoading();
|
||||||
|
cocoMessage.success('数据拉取完成');
|
||||||
|
$('.push_close, .push_item').prop('disabled', false);
|
||||||
|
},
|
||||||
|
error: function () {
|
||||||
|
closeLoading();
|
||||||
|
cocoMessage.error('数据拉取失败');
|
||||||
|
$('.push_close').prop('disabled', false);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
//发布片刻重置
|
//发布片刻重置
|
||||||
$('body').on('click', '.normal_edit,.center .mobile_edit', function() {
|
$('body').on('click', '.normal_edit,.center .mobile_edit', function () {
|
||||||
$('.push_item').attr('action','push').html('<i class="ri-send-plane-2-line"></i>发布');
|
$('.push_item').attr('action', 'push').html('<i class="ri-send-plane-2-line"></i>发布');
|
||||||
$('.moment_image_type a').click();
|
$('.moment_image_type a').click();
|
||||||
$(".simi a").html('<i class="ri-lock-unlock-line"></i>').attr('visible','PUBLIC');
|
$(".simi a").html('<i class="ri-lock-unlock-line"></i>').attr('visible', 'PUBLIC');
|
||||||
$(".simi a").children().css({"background":"#e3efe7","color":"#66c187"});
|
$(".simi a").children().css({ "background": "#e3efe7", "color": "#66c187" });
|
||||||
$('#topic_content').val('');
|
$('#topic_content').val('');
|
||||||
const mylocalValue = getCookie('mylocal');
|
$(".loca_text").empty().attr("state", '0');
|
||||||
$(".loca_text").html(mylocalValue).attr("state",'1');
|
$('#set_local, [name="set_local"]').val('');
|
||||||
$('.t_media_item').remove();
|
$('.t_media_item').remove();
|
||||||
|
$('.t_cat_toogle span').text('叽里咕噜');
|
||||||
});
|
});
|
||||||
|
|
||||||
//编辑片刻类型------------------------------------------------------------------------------
|
//编辑片刻类型（已兼容图片+视频）------------------------------------------------------------------------------
|
||||||
function edit_image(data){
|
function edit_image(data) {
|
||||||
var m_data = data.spec.content.medium;
|
var m_data = data.spec.content.medium;
|
||||||
$('.t_media_item').remove();
|
$('.t_media_item').remove();
|
||||||
$('.moment_image_type a').click();
|
$('.moment_image_type a').click();
|
||||||
if(m_data.length > 0){
|
|
||||||
var new_data = m_data.reverse();
|
if (m_data && m_data.length > 0) {
|
||||||
$.each(new_data, function(index, value) {
|
// reverse() 是为了配合 prepend，确保显示顺序与发布时一致
|
||||||
var thum = value.url;
|
var new_data = [...m_data].reverse();
|
||||||
|
|
||||||
|
$.each(new_data, function (index, value) {
|
||||||
var src = value.url;
|
var src = value.url;
|
||||||
var type = value.originType;
|
var type = value.originType || ""; // 获取 MIME 类型
|
||||||
var media = `<div class="t_media_item" data-type="${type}" data-src="${src}" data-thum="${thum}">`;
|
var mediaInnerHtml = '';
|
||||||
media += '<a class="topic-img-de"><i class="ri-subtract-line"></i></a>';
|
|
||||||
media += '<img src="'+thum+'">';//图片预览
|
// --- 核心逻辑：判定是否为视频 ---
|
||||||
media += '</div>';
|
// 1. 检查 MIME 类型是否以 video/ 开头
|
||||||
|
// 2. 检查文件名后缀是否为常见的视频格式（防止 originType 丢失的情况）
|
||||||
|
var isVideo = type.startsWith('video/') ||
|
||||||
|
src.toLowerCase().endsWith('.mp4') ||
|
||||||
|
src.toLowerCase().endsWith('.webm') ||
|
||||||
|
src.toLowerCase().endsWith('.mov');
|
||||||
|
|
||||||
|
if (isVideo) {
|
||||||
|
// 如果是视频，使用 video 标签预览
|
||||||
|
mediaInnerHtml = `<video src="${src}" class="pix_video" preload="metadata" muted></video>`;
|
||||||
|
} else {
|
||||||
|
// 如果是图片，保持原有的 img 标签
|
||||||
|
mediaInnerHtml = `<img src="${src}">`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 构建外层容器
|
||||||
|
var media = `<div class="t_media_item" data-type="${type}" data-src="${src}">
|
||||||
|
<a class="topic-img-de"><i class="ri-subtract-line"></i></a>
|
||||||
|
${mediaInnerHtml}
|
||||||
|
</div>`;
|
||||||
|
|
||||||
$(".img_show").prepend(media);
|
$(".img_show").prepend(media);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function edit_video(data){
|
function edit_video(data) {
|
||||||
var m_data = data.spec.content.medium[0];
|
var m_data = data.spec.content.medium[0];
|
||||||
var type = m_data.originType;
|
var type = m_data.originType;
|
||||||
//var url = m_data.url;
|
//var url = m_data.url;
|
||||||
$('.moment_video_type a').click();
|
$('.moment_video_type a').click();
|
||||||
|
|
||||||
var add = setInterval(function() {
|
var add = setInterval(function () {
|
||||||
if(type != 'video/bili'){
|
if (type != 'video/bili') {
|
||||||
var url = m_data.url;
|
var url = m_data.url;
|
||||||
|
|
||||||
$('input#moment_video_url').val(url);
|
$('input#moment_video_url').val(url);
|
||||||
if(url !== ''){
|
if (url !== '') {
|
||||||
$('.m_media_left i').remove();
|
$('.m_media_left i').remove();
|
||||||
$('.m_media_left').append('<img src="/themes/theme-pix/assets/img/video.png" data="'+url+'">');
|
$('.m_media_left').append('<img src="/themes/theme-pix/assets/img/logo.webp" data="' + url + '">');
|
||||||
}
|
}
|
||||||
|
|
||||||
} else if(type == 'video/bili') {
|
} else if (type == 'video/bili') {
|
||||||
if($('.video_choose').length > 0){
|
if ($('.video_choose').length > 0) {
|
||||||
var bvid = m_data.url;
|
var bvid = m_data.url;
|
||||||
UIkit.switcher('.video_choose').show(1);
|
UIkit.switcher('.video_choose').show(1);
|
||||||
$('input#moment_video_bili').val(bvid);
|
$('input#moment_video_bili').val(bvid);
|
||||||
@@ -504,26 +551,26 @@ function edit_video(data){
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if($('.edit_video_box').length == 1){
|
if ($('.edit_video_box').length == 1) {
|
||||||
clearInterval(add);
|
clearInterval(add);
|
||||||
}
|
}
|
||||||
|
|
||||||
}, 100);
|
}, 100);
|
||||||
}
|
}
|
||||||
|
|
||||||
function edit_audio(data){
|
function edit_audio(data) {
|
||||||
var m_data = data.spec.content.medium[0];
|
var m_data = data.spec.content.medium[0];
|
||||||
var type = m_data.originType;
|
var type = m_data.originType;
|
||||||
$('.moment_audio_type a').click();
|
$('.moment_audio_type a').click();
|
||||||
var add = setInterval(function() {
|
var add = setInterval(function () {
|
||||||
if(type == 'audio/netease' || type == 'audio/tencent' || type == 'audio/kugou' || type == 'audio/kuwo'){
|
if (type == 'audio/netease' || type == 'audio/tencent' || type == 'audio/kugou' || type == 'audio/kuwo') {
|
||||||
var result = type.substring(type.indexOf("audio/") + 6);
|
var result = type.substring(type.indexOf("audio/") + 6);
|
||||||
if($('.audio_choose').length > 0){
|
if ($('.audio_choose').length > 0) {
|
||||||
var n_id = m_data.url;
|
var n_id = m_data.url;
|
||||||
var index = $('.audio_choose li.'+result+'').index();
|
var index = $('.audio_choose li.' + result + '').index();
|
||||||
UIkit.switcher('.audio_choose').show(index);
|
UIkit.switcher('.audio_choose').show(index);
|
||||||
$('.edit_audio_box .tips').text('# 请输入歌曲ID');
|
$('.edit_audio_box .tips').text('# 请输入歌曲ID');
|
||||||
$('.'+result+'_audio').append('<input type="text" placeholder="歌曲ID" name="moment_audio_api" id="moment_audio_api" class="required" required="required">');
|
$('.' + result + '_audio').append('<input type="text" placeholder="歌曲ID" name="moment_audio_api" id="moment_audio_api" class="required" required="required">');
|
||||||
$('input#moment_audio_api').val(n_id);
|
$('input#moment_audio_api').val(n_id);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
@@ -533,7 +580,7 @@ function edit_audio(data){
|
|||||||
$('.edit_audio_box .tips').text('# 请插入歌曲外链');
|
$('.edit_audio_box .tips').text('# 请插入歌曲外链');
|
||||||
$('input#moment_audio_url').val(url);
|
$('input#moment_audio_url').val(url);
|
||||||
}
|
}
|
||||||
if($('.edit_audio_box').length == 1){
|
if ($('.edit_audio_box').length == 1) {
|
||||||
clearInterval(add);
|
clearInterval(add);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -545,15 +592,15 @@ function edit_card(data) {
|
|||||||
$('.card_sortble .moment_card_item').remove();
|
$('.card_sortble .moment_card_item').remove();
|
||||||
$('.moment_card_type a').click();
|
$('.moment_card_type a').click();
|
||||||
var pid = data.metadata.name;
|
var pid = data.metadata.name;
|
||||||
var card_list = $("#post-"+pid+"").find('.moment_card_item');
|
var card_list = $("#post-" + pid + "").find('.moment_card_item');
|
||||||
var add = setInterval(function() {
|
var add = setInterval(function () {
|
||||||
$('.show_card').show();
|
$('.show_card').show();
|
||||||
$.each(m_data, function(index, value) {
|
$.each(m_data, function (index, value) {
|
||||||
var srcValue = card_list.eq(index).find('img').attr('src');
|
var srcValue = card_list.eq(index).find('img').attr('src');
|
||||||
var h4Text = card_list.eq(index).find('h4').text();
|
var h4Text = card_list.eq(index).find('h4').text();
|
||||||
$('.card_sortble').append(getcard(value.url,srcValue,h4Text,value.originType));
|
$('.card_sortble').append(getcard(value.url, srcValue, h4Text, value.originType));
|
||||||
});
|
});
|
||||||
if($('.edit_card_box').length == 1){
|
if ($('.edit_card_box').length == 1) {
|
||||||
clearInterval(add);
|
clearInterval(add);
|
||||||
}
|
}
|
||||||
}, 100);
|
}, 100);
|
||||||
|
|||||||
@@ -129,7 +129,7 @@ var pix = {
|
|||||||
} else {
|
} else {
|
||||||
msg_modal_inner.html(`
|
msg_modal_inner.html(`
|
||||||
<p class="no_posts"><small># 暂无消息 #</small><img class="s_nodata"
|
<p class="no_posts"><small># 暂无消息 #</small><img class="s_nodata"
|
||||||
src="/themes/theme-pix/assets/img/nodata.png"></p>
|
src="/themes/theme-pix/assets/img/no-data.webp"></p>
|
||||||
<p class="msg_limit">只显示最新10条未读和已读信息</p>
|
<p class="msg_limit">只显示最新10条未读和已读信息</p>
|
||||||
`)
|
`)
|
||||||
}
|
}
|
||||||
@@ -137,7 +137,7 @@ var pix = {
|
|||||||
error: function () {
|
error: function () {
|
||||||
msg_modal_inner.html(`
|
msg_modal_inner.html(`
|
||||||
<p class="no_posts"><small># 暂无消息 #</small><img class="s_nodata"
|
<p class="no_posts"><small># 暂无消息 #</small><img class="s_nodata"
|
||||||
src="/themes/theme-pix/assets/img/nodata.png"></p>
|
src="/themes/theme-pix/assets/img/no-data.webp"></p>
|
||||||
<p class="msg_limit">只显示最新10条未读和已读信息</p>
|
<p class="msg_limit">只显示最新10条未读和已读信息</p>
|
||||||
`)
|
`)
|
||||||
|
|
||||||
@@ -163,6 +163,31 @@ var pix = {
|
|||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
centerCategoryNavActive: function ($link) {
|
||||||
|
var $activeLink = $link && $link.length ? $link : $('.moment_cat_nav .active, .posts_cat_nav .active, .photos_cat_nav .active, .douban_cat_nav .active, .friends_cat_nav .active').first();
|
||||||
|
if (!$activeLink || !$activeLink.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var navEl = $activeLink.closest('.moment_cat_nav, .posts_cat_nav, .photos_cat_nav, .douban_cat_nav, .friends_cat_nav').find('ul').get(0);
|
||||||
|
if (!navEl) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var linkEl = $activeLink.get(0);
|
||||||
|
var maxScrollLeft = navEl.scrollWidth - navEl.clientWidth;
|
||||||
|
if (maxScrollLeft <= 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var navRect = navEl.getBoundingClientRect();
|
||||||
|
var linkRect = linkEl.getBoundingClientRect();
|
||||||
|
var targetScrollLeft = navEl.scrollLeft + (linkRect.left - navRect.left) - (navRect.width / 2 - linkRect.width / 2);
|
||||||
|
targetScrollLeft = Math.max(0, Math.min(maxScrollLeft, targetScrollLeft));
|
||||||
|
|
||||||
|
$(navEl).stop(true).animate({ scrollLeft: targetScrollLeft }, 220);
|
||||||
|
},
|
||||||
|
|
||||||
topCategoriesBarScroll: function () {
|
topCategoriesBarScroll: function () {
|
||||||
if (document.getElementById("cat_nav_items")) {
|
if (document.getElementById("cat_nav_items")) {
|
||||||
let xscroll = document.getElementById("cat_nav_items");
|
let xscroll = document.getElementById("cat_nav_items");
|
||||||
|
|||||||
+413
-272
File diff suppressed because it is too large
Load Diff
+551
-345
@@ -5,157 +5,234 @@ const poster = (function() {
|
|||||||
const DEBUG = false
|
const DEBUG = false
|
||||||
|
|
||||||
const WIDTH = 700
|
const WIDTH = 700
|
||||||
const HEIGHT = 1160
|
const HEIGHT = 850
|
||||||
|
|
||||||
function init(config) {
|
/**
|
||||||
const $container = document.querySelector(config.selector)
|
* 将图片URL加载为Image对象，并返回Promise
|
||||||
$container.style.border = '1px solid #f0f0f0'
|
* @param {string} url - 图片URL
|
||||||
const $wrapper = createDom('div', 'id', 'wrapper')
|
* @returns {Promise<Image>} - 加载完成的Image对象
|
||||||
const $canvas = createDom('canvas', 'id', 'canvas', 'block')
|
*/
|
||||||
const $day = createDom('canvas', 'id', 'day')
|
function loadImage(url) {
|
||||||
const $date = createDom('canvas', 'id', 'date')
|
return new Promise((resolve, reject) => {
|
||||||
const $title = createDom('canvas', 'id', 'title')
|
const img = new Image();
|
||||||
const $content = createDom('canvas', 'id', 'content')
|
img.crossOrigin = "Anonymous";
|
||||||
const $logo = createDom('canvas', 'id', 'logo')
|
img.onload = () => resolve(img);
|
||||||
const $description = createDom('canvas', 'id', 'description')
|
img.onerror = () => reject(new Error('Failed to load image: ' + url));
|
||||||
|
img.src = url;
|
||||||
appendChilds($wrapper, $canvas, $day, $date, $title, $content, $logo, $description)
|
});
|
||||||
$container.appendChild($wrapper)
|
|
||||||
|
|
||||||
const date = new Date()
|
|
||||||
|
|
||||||
// day
|
|
||||||
const dayStyle = {
|
|
||||||
font: 'bold 80px Helvetica',
|
|
||||||
color: 'rgba(255, 255, 255, 1)',
|
|
||||||
position: 'right'
|
|
||||||
}
|
|
||||||
drawOneline($day, dayStyle, date.getDate());
|
|
||||||
|
|
||||||
// date
|
|
||||||
const dateStyle = {
|
|
||||||
font: '23px Helvetica',
|
|
||||||
color: 'rgba(255, 255, 255, 1)',
|
|
||||||
position: 'right'
|
|
||||||
}
|
|
||||||
drawOneline($date, dateStyle, date.getFullYear() + '/' + (date.getMonth() + 1))
|
|
||||||
|
|
||||||
// title canvas
|
|
||||||
const titleStyle = {
|
|
||||||
font: '30px Helvetica',
|
|
||||||
lineHeight: 1.5,
|
|
||||||
color: 'rgba(255, 255, 255, 1)',
|
|
||||||
length: 2,
|
|
||||||
position: 'left'
|
|
||||||
}
|
|
||||||
titleStyle.font = (config.titleStyle && config.titleStyle.font) || titleStyle.font
|
|
||||||
titleStyle.color = (config.titleStyle && config.titleStyle.color) || titleStyle.color
|
|
||||||
titleStyle.position = (config.titleStyle && config.titleStyle.position) || titleStyle.position
|
|
||||||
drawMoreLines($title, titleStyle, config.title)
|
|
||||||
|
|
||||||
// content canvas
|
|
||||||
const contentStyle = {
|
|
||||||
font: '22px Helvetica',
|
|
||||||
lineHeight: 1.5,
|
|
||||||
position: 'left',
|
|
||||||
color: 'rgba(236, 241, 255, 1)'
|
|
||||||
}
|
|
||||||
contentStyle.font = (config.contentStyle && config.contentStyle.font) || contentStyle.font
|
|
||||||
contentStyle.color = (config.contentStyle && config.contentStyle.color) || contentStyle.color
|
|
||||||
contentStyle.lineHeight = (config.contentStyle && config.contentStyle.lineHeight) || contentStyle.lineHeight
|
|
||||||
contentStyle.position = (config.contentStyle && config.contentStyle.position) || contentStyle.position
|
|
||||||
drawMoreLines($content, contentStyle, config.content);
|
|
||||||
|
|
||||||
// description
|
|
||||||
const descriptionStyle = {
|
|
||||||
font: '24px Helvetica',
|
|
||||||
color: 'rgba(180, 180, 180, 1)',
|
|
||||||
lineHeight: 1.2,
|
|
||||||
position: 'left'
|
|
||||||
}
|
|
||||||
drawMoreLines($description, descriptionStyle, config.description)
|
|
||||||
|
|
||||||
|
|
||||||
// background image
|
|
||||||
const image = new Image();
|
|
||||||
image.crossOrigin = "Anonymous";
|
|
||||||
|
|
||||||
//logo
|
|
||||||
const logo = new Image();
|
|
||||||
logo.crossOrigin = "Anonymous";
|
|
||||||
logo.src = config.logo;
|
|
||||||
|
|
||||||
//qrcode
|
|
||||||
const qrcode = new Image();
|
|
||||||
qrcode.src = config.qrcode;
|
|
||||||
|
|
||||||
|
|
||||||
const onload = function() {
|
|
||||||
$canvas.width = WIDTH;
|
|
||||||
$canvas.height = HEIGHT;
|
|
||||||
image.src = config.banner;
|
|
||||||
image.onload = function() {
|
|
||||||
const ctx = $canvas.getContext('2d')
|
|
||||||
ctx.fillStyle = 'rgba(255, 255, 255, 1)';
|
|
||||||
ctx.fillRect(0, 0, $canvas.width, $canvas.height);
|
|
||||||
|
|
||||||
// banner
|
|
||||||
imgRect = coverImg($canvas.width - 40, $canvas.height / 1.2 - 40, image.width, image.height);
|
|
||||||
ctx.drawImage(image, imgRect.sx, imgRect.sy, imgRect.sWidth, imgRect.sHeight, 20, 20, $canvas.width - 40, $canvas.height / 1.2 - 40);
|
|
||||||
|
|
||||||
//覆盖层
|
|
||||||
ctx.fillStyle="rgba(0, 0, 0, 0.3)";
|
|
||||||
ctx.fillRect(20,20,$canvas.width - 40,$canvas.height / 1.2 - 40);
|
|
||||||
|
|
||||||
// 时间
|
|
||||||
ctx.drawImage($day, -20, 50)
|
|
||||||
ctx.drawImage($date, -21, 125)
|
|
||||||
|
|
||||||
//logo
|
|
||||||
var logowidth = logo.width;
|
|
||||||
var logoheight = logo.height;
|
|
||||||
var scale = logowidth / logoheight;
|
|
||||||
var logoh = 60;
|
|
||||||
var cwidth = logoh * scale;
|
|
||||||
ctx.drawImage(logo, 60, $canvas.height / 1.2 + 30, cwidth, logoh);
|
|
||||||
|
|
||||||
ctx.drawImage(qrcode, $canvas.width - 160, $canvas.height / 1.2 + 20, 120, 120);
|
|
||||||
|
|
||||||
//标题文字
|
|
||||||
ctx.drawImage($title, 20, $canvas.height / 2 + 20)
|
|
||||||
ctx.drawImage($content, 20, $canvas.height / 2 + 120)
|
|
||||||
ctx.drawImage($description, 20, $canvas.height / 1.2 + 110)
|
|
||||||
ctx.strokeStyle = 'rgba(122, 122, 122, 0.5)';
|
|
||||||
|
|
||||||
const img = new Image();
|
|
||||||
img.crossOrigin = "Anonymous";
|
|
||||||
img.src = $canvas.toDataURL('image/png')
|
|
||||||
const radio = config.radio || 0.7
|
|
||||||
img.width = WIDTH * radio
|
|
||||||
img.height = HEIGHT * radio
|
|
||||||
img.className = 'poster_load';
|
|
||||||
ctx.clearRect(0, 0, $canvas.width, $canvas.height)
|
|
||||||
$canvas.style.display = 'none'
|
|
||||||
|
|
||||||
if ($container.querySelector('.poster_load')) {
|
|
||||||
$container.querySelector('.poster_load').src = img.src;
|
|
||||||
} else {
|
|
||||||
$container.appendChild(img);
|
|
||||||
}
|
|
||||||
|
|
||||||
$container.appendChild(img);
|
|
||||||
$container.removeChild($wrapper)
|
|
||||||
if (config.callback) {
|
|
||||||
config.callback($container)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onload()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//裁切
|
/**
|
||||||
function containImg(sx, sy, box_w, box_h, source_w, source_h) {
|
* 核心初始化函数
|
||||||
|
* @param {object} config - 配置对象
|
||||||
|
*/
|
||||||
|
function init(config) {
|
||||||
|
const $container = config.container || document.querySelector(config.selector)
|
||||||
|
if (!$container) {
|
||||||
|
if (config.callback) {
|
||||||
|
config.callback(null)
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// ------------------ 【修复点 2：清理容器，避免PJAX残余】 ------------------
|
||||||
|
// 在重新绘制前，确保清空容器，移除旧的 img 和 wrapper
|
||||||
|
$container.innerHTML = '';
|
||||||
|
// -----------------------------------------------------------------------
|
||||||
|
|
||||||
|
$container.style.border = '1px solid #f0f0f0'
|
||||||
|
const $wrapper = createDom('div', 'id', 'wrapper')
|
||||||
|
const $canvas = createDom('canvas', 'id', 'canvas', 'block')
|
||||||
|
const $day = createDom('canvas', 'id', 'day')
|
||||||
|
const $date = createDom('canvas', 'id', 'date')
|
||||||
|
const $title = createDom('canvas', 'id', 'title')
|
||||||
|
const $content = createDom('canvas', 'id', 'content')
|
||||||
|
const $logo = createDom('canvas', 'id', 'logo')
|
||||||
|
const $siteName = createDom('canvas', 'id', 'siteName')
|
||||||
|
const $description = createDom('canvas', 'id', 'description')
|
||||||
|
const $customText1 = createDom('canvas', 'id', 'customText1')
|
||||||
|
const $customText2 = createDom('canvas', 'id', 'customText2')
|
||||||
|
|
||||||
|
appendChilds($wrapper, $canvas, $day, $siteName, $date, $title, $content, $logo, $description, $customText1, $customText2)
|
||||||
|
$container.appendChild($wrapper)
|
||||||
|
|
||||||
|
const date = new Date()
|
||||||
|
|
||||||
|
// day canvas
|
||||||
|
const dayStyle = {
|
||||||
|
font: 'bold 80px Helvetica',
|
||||||
|
color: 'rgba(255, 255, 255, 1)',
|
||||||
|
position: 'right'
|
||||||
|
}
|
||||||
|
drawOneline($day, dayStyle, date.getDate());
|
||||||
|
|
||||||
|
// date canvas
|
||||||
|
const dateStyle = {
|
||||||
|
font: '23px Helvetica',
|
||||||
|
color: 'rgba(255, 255, 255, 1)',
|
||||||
|
position: 'right'
|
||||||
|
}
|
||||||
|
drawOneline($date, dateStyle, date.getFullYear() + '/' + (date.getMonth() + 1))
|
||||||
|
|
||||||
|
// title canvas
|
||||||
|
const titleStyle = {
|
||||||
|
font: '30px Helvetica',
|
||||||
|
lineHeight: 1.5,
|
||||||
|
color: 'rgba(255, 255, 255, 1)',
|
||||||
|
length: 2,
|
||||||
|
position: 'left'
|
||||||
|
}
|
||||||
|
titleStyle.font = (config.titleStyle && config.titleStyle.font) || titleStyle.font
|
||||||
|
titleStyle.color = (config.titleStyle && config.titleStyle.color) || titleStyle.color
|
||||||
|
titleStyle.position = (config.titleStyle && config.titleStyle.position) || titleStyle.position
|
||||||
|
drawMoreLines($title, titleStyle, config.title)
|
||||||
|
|
||||||
|
// site name canvas
|
||||||
|
const siteNameStyle = {
|
||||||
|
font: '40px Helvetica',
|
||||||
|
lineHeight: 1.3,
|
||||||
|
color: 'rgba(255, 255, 255, 0.95)',
|
||||||
|
position: 'left'
|
||||||
|
}
|
||||||
|
siteNameStyle.font = (config.siteNameStyle && config.siteNameStyle.font) || siteNameStyle.font
|
||||||
|
siteNameStyle.color = (config.siteNameStyle && config.siteNameStyle.color) || siteNameStyle.color
|
||||||
|
siteNameStyle.lineHeight = (config.siteNameStyle && config.siteNameStyle.lineHeight) || siteNameStyle.lineHeight
|
||||||
|
siteNameStyle.position = (config.siteNameStyle && config.siteNameStyle.position) || siteNameStyle.position
|
||||||
|
drawMoreLines($siteName, siteNameStyle, config.siteName)
|
||||||
|
|
||||||
|
// description canvas
|
||||||
|
const descriptionStyle = {
|
||||||
|
font: '25px Helvetica',
|
||||||
|
color: 'rgba(236, 241, 255, 1)',
|
||||||
|
lineHeight: 1.2,
|
||||||
|
position: 'left'
|
||||||
|
}
|
||||||
|
descriptionStyle.font = (config.descriptionStyle && config.descriptionStyle.font) || descriptionStyle.font
|
||||||
|
descriptionStyle.color = (config.descriptionStyle && config.descriptionStyle.color) || descriptionStyle.color
|
||||||
|
descriptionStyle.lineHeight = (config.descriptionStyle && config.descriptionStyle.lineHeight) || descriptionStyle.lineHeight
|
||||||
|
descriptionStyle.position = (config.descriptionStyle && config.descriptionStyle.position) || descriptionStyle.position
|
||||||
|
drawMoreLines($description, descriptionStyle, config.description)
|
||||||
|
|
||||||
|
// custom text 1 canvas
|
||||||
|
const customText1Style = {
|
||||||
|
font: '28px Helvetica',
|
||||||
|
lineHeight: 1.3,
|
||||||
|
position: 'left',
|
||||||
|
color: 'rgba(0, 0, 0, 1)'
|
||||||
|
}
|
||||||
|
customText1Style.font = (config.customText1Style && config.customText1Style.font) || customText1Style.font
|
||||||
|
customText1Style.color = (config.customText1Style && config.customText1Style.color) || customText1Style.color
|
||||||
|
customText1Style.lineHeight = (config.customText1Style && config.customText1Style.lineHeight) || customText1Style.lineHeight
|
||||||
|
customText1Style.position = (config.customText1Style && config.customText1Style.position) || customText1Style.position
|
||||||
|
drawMoreLines($customText1, customText1Style, config.customText1 || '')
|
||||||
|
|
||||||
|
// custom text 2 canvas
|
||||||
|
const customText2Style = {
|
||||||
|
font: '28px Helvetica',
|
||||||
|
lineHeight: 1.3,
|
||||||
|
position: 'left',
|
||||||
|
color: 'rgba(0, 0, 0, 1)'
|
||||||
|
}
|
||||||
|
customText2Style.font = (config.customText2Style && config.customText2Style.font) || customText2Style.font
|
||||||
|
customText2Style.color = (config.customText2Style && config.customText2Style.color) || customText2Style.color
|
||||||
|
customText2Style.lineHeight = (config.customText2Style && config.customText2Style.lineHeight) || customText2Style.lineHeight
|
||||||
|
customText2Style.position = (config.customText2Style && config.customText2Style.position) || customText2Style.position
|
||||||
|
drawMoreLines($customText2, customText2Style, config.customText2 || '')
|
||||||
|
|
||||||
|
// content canvas
|
||||||
|
const contentStyle = {
|
||||||
|
font: '22px Helvetica',
|
||||||
|
lineHeight: 1.5,
|
||||||
|
position: 'left',
|
||||||
|
color: 'rgba(236, 241, 255, 1)'
|
||||||
|
}
|
||||||
|
contentStyle.font = (config.contentStyle && config.contentStyle.font) || contentStyle.font
|
||||||
|
contentStyle.color = (config.contentStyle && config.contentStyle.color) || contentStyle.color
|
||||||
|
contentStyle.lineHeight = (config.contentStyle && config.contentStyle.lineHeight) || contentStyle.lineHeight
|
||||||
|
contentStyle.position = (config.contentStyle && config.contentStyle.position) || contentStyle.position
|
||||||
|
drawMoreLines($content, contentStyle, config.content);
|
||||||
|
|
||||||
|
|
||||||
|
// ------------------ 【修复点 1：使用 Promise.all 等待所有图片加载】 ------------------
|
||||||
|
Promise.all([
|
||||||
|
loadImage(config.banner),
|
||||||
|
loadImage(config.logo),
|
||||||
|
loadImage(config.qrcode)
|
||||||
|
]).then(([image, logo, qrcode]) => {
|
||||||
|
|
||||||
|
$canvas.width = WIDTH;
|
||||||
|
$canvas.height = HEIGHT;
|
||||||
|
const ctx = $canvas.getContext('2d')
|
||||||
|
|
||||||
|
// 1. 绘制背景
|
||||||
|
ctx.fillStyle = 'rgba(255, 255, 255, 1)';
|
||||||
|
ctx.fillRect(0, 0, $canvas.width, $canvas.height);
|
||||||
|
|
||||||
|
// 2. 绘制 Banner
|
||||||
|
const imgRect = coverImg($canvas.width - 40, $canvas.height / 1.2 - 40, image.width, image.height);
|
||||||
|
ctx.drawImage(image, imgRect.sx, imgRect.sy, imgRect.sWidth, imgRect.sHeight, 20, 20, $canvas.width - 40, $canvas.height / 1.2 - 40);
|
||||||
|
|
||||||
|
// 3. 绘制覆盖层
|
||||||
|
ctx.fillStyle="rgba(0, 0, 0, 0.6)";
|
||||||
|
ctx.fillRect(20, 20, $canvas.width - 40, $canvas.height / 1.2 - 40);
|
||||||
|
|
||||||
|
// 4. 绘制时间 (使用预先绘制好的 Canvas)
|
||||||
|
ctx.drawImage($day, -20, 50)
|
||||||
|
ctx.drawImage($date, -21, 125)
|
||||||
|
|
||||||
|
// 5. 绘制 Logo
|
||||||
|
var logoh = 140;
|
||||||
|
var cwidth = logoh * (logo.width / logo.height);
|
||||||
|
ctx.drawImage(logo, 20, $canvas.height / 1.2 - 10, cwidth, logoh);
|
||||||
|
|
||||||
|
// 6. 绘制二维码
|
||||||
|
ctx.drawImage(qrcode, $canvas.width - 150, $canvas.height / 1.2 + 10, 120, 120);
|
||||||
|
|
||||||
|
// 7. 绘制文字 (使用预先绘制好的 Canvas)
|
||||||
|
ctx.drawImage($siteName, 10, 60)
|
||||||
|
ctx.drawImage($description, 10, 120)
|
||||||
|
ctx.drawImage($customText1, 270, $canvas.height / 2 + 310)
|
||||||
|
ctx.drawImage($customText2, 215, $canvas.height / 2 + 360)
|
||||||
|
ctx.drawImage($title, 20, $canvas.height / 2 + 60)
|
||||||
|
ctx.drawImage($content, 20, $canvas.height / 2 + 120)
|
||||||
|
ctx.strokeStyle = 'rgba(122, 122, 122, 0.5)';
|
||||||
|
|
||||||
|
// 8. 转换并显示最终图片
|
||||||
|
const img = new Image();
|
||||||
|
img.crossOrigin = "Anonymous";
|
||||||
|
img.src = $canvas.toDataURL('image/png')
|
||||||
|
const radio = config.radio || 0.7
|
||||||
|
img.width = WIDTH * radio
|
||||||
|
img.height = HEIGHT * radio
|
||||||
|
img.className = 'poster_load';
|
||||||
|
|
||||||
|
// 清理 Canvas 避免在屏幕上停留
|
||||||
|
ctx.clearRect(0, 0, $canvas.width, $canvas.height)
|
||||||
|
$canvas.style.display = 'none'
|
||||||
|
|
||||||
|
// 移除旧的 wrapper 并添加最终海报图
|
||||||
|
$container.appendChild(img);
|
||||||
|
// 必须先移除再调用 callback，以确保 DOM 结构干净
|
||||||
|
$container.removeChild($wrapper)
|
||||||
|
|
||||||
|
if (config.callback) {
|
||||||
|
config.callback($container)
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
console.error('海报图片加载失败:', error);
|
||||||
|
// 可在此处添加错误处理，例如显示一个错误信息
|
||||||
|
if ($wrapper.parentNode === $container) {
|
||||||
|
$container.removeChild($wrapper);
|
||||||
|
}
|
||||||
|
if (config.callback) {
|
||||||
|
// 即使失败也调用回调，传入 null 或错误信息，以便上层逻辑处理
|
||||||
|
config.callback(null);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// -----------------------------------------------------------------------
|
||||||
|
}
|
||||||
|
|
||||||
|
// 裁剪函数（不变）
|
||||||
|
function containImg(sx, sy, box_w, box_h, source_w, source_h) {
|
||||||
var dx = sx,
|
var dx = sx,
|
||||||
dy = sy,
|
dy = sy,
|
||||||
dWidth = box_w,
|
dWidth = box_w,
|
||||||
@@ -176,243 +253,372 @@ const poster = (function() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function coverImg(box_w, box_h, source_w, source_h) {
|
// 覆盖函数：按目标区域等比缩放并居中裁切，尽量不留白
|
||||||
var sx = 0,
|
function coverImg(box_w, box_h, source_w, source_h) {
|
||||||
sy = 0,
|
const scale = Math.max(box_w / source_w, box_h / source_h);
|
||||||
sWidth = source_w,
|
const sWidth = box_w / scale;
|
||||||
sHeight = source_h;
|
const sHeight = box_h / scale;
|
||||||
if (source_w > source_h || (source_w == source_h && box_w < box_h)) {
|
const sx = (source_w - sWidth) / 2;
|
||||||
sWidth = box_w * sHeight / box_h;
|
const sy = (source_h - sHeight) / 2;
|
||||||
sx = (source_w - sWidth) / 2;
|
|
||||||
} else if (source_w < source_h || (source_w == source_h && box_w > box_h)) {
|
|
||||||
sHeight = box_h * sWidth / box_w;
|
|
||||||
sy = (source_h - sHeight) / 2;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
sx,
|
|
||||||
sy,
|
|
||||||
sWidth,
|
|
||||||
sHeight
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
return {
|
||||||
|
sx,
|
||||||
|
sy,
|
||||||
|
sWidth,
|
||||||
|
sHeight
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建 DOM 元素（不变）
|
||||||
function createDom(name, key, value, display = 'none') {
|
function createDom(name, key, value, display = 'none') {
|
||||||
const $dom = document.createElement(name)
|
const $dom = document.createElement(name)
|
||||||
$dom.setAttribute(key, value)
|
$dom.setAttribute(key, value)
|
||||||
$dom.style.display = display
|
$dom.style.display = display
|
||||||
$dom.width = WIDTH
|
$dom.width = WIDTH
|
||||||
return $dom
|
$dom.height = HEIGHT // 新增：确保 canvas 都有默认高度，尽管后续会重设
|
||||||
|
return $dom
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 追加子元素（不变）
|
||||||
function appendChilds(parent, ...doms) {
|
function appendChilds(parent, ...doms) {
|
||||||
doms.forEach(dom => {
|
doms.forEach(dom => {
|
||||||
parent.appendChild(dom)
|
parent.appendChild(dom)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 绘制单行文本（不变）
|
||||||
function drawOneline(canvas, style, content) {
|
function drawOneline(canvas, style, content) {
|
||||||
const ctx = canvas.getContext('2d')
|
const ctx = canvas.getContext('2d')
|
||||||
canvas.height = parseInt(style.font.match(/\d+/), 10) + 20
|
canvas.height = parseInt(style.font.match(/\d+/), 10) + 20
|
||||||
ctx.font = style.font
|
ctx.font = style.font
|
||||||
ctx.fillStyle = style.color
|
ctx.fillStyle = style.color
|
||||||
ctx.textBaseline = 'top'
|
ctx.textBaseline = 'top'
|
||||||
|
|
||||||
let lineWidth = 0
|
let lineWidth = 0
|
||||||
let idx = 0
|
let idx = 0
|
||||||
let truncated = false
|
let truncated = false
|
||||||
for (let i = 0; i < content.length; i++) {
|
for (let i = 0; i < content.length; i++) {
|
||||||
lineWidth += ctx.measureText(content[i]).width;
|
lineWidth += ctx.measureText(content[i]).width;
|
||||||
if (lineWidth > canvas.width - 60) {
|
if (lineWidth > canvas.width - 60) {
|
||||||
truncated = true
|
truncated = true
|
||||||
idx = i
|
idx = i
|
||||||
break
|
break
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
let padding = 30
|
let padding = 30
|
||||||
|
|
||||||
if (truncated) {
|
if (truncated) {
|
||||||
content = content.substring(0, idx)
|
content = content.substring(0, idx)
|
||||||
padding = canvas.width / 2 - lineWidth / 2
|
// 修正：如果内容被截断，应该重新计算截断后的文本宽度，再计算 padding
|
||||||
}
|
lineWidth = ctx.measureText(content).width;
|
||||||
|
if (style.position === 'center') {
|
||||||
|
padding = canvas.width / 2 - lineWidth / 2;
|
||||||
|
} else if (style.position === 'left') {
|
||||||
|
padding = 30; // 保持左侧间距
|
||||||
|
} else {
|
||||||
|
padding = canvas.width - 30; // 保持右侧间距
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (DEBUG) {
|
if (DEBUG) {
|
||||||
ctx.strokeStyle = "#6fda92";
|
ctx.strokeStyle = "#6fda92";
|
||||||
ctx.strokeRect(0, 0, canvas.width, canvas.height);
|
ctx.strokeRect(0, 0, canvas.width, canvas.height);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (style.position === 'center') {
|
if (style.position === 'center') {
|
||||||
ctx.textAlign = 'center';
|
ctx.textAlign = 'center';
|
||||||
ctx.fillText(content, canvas.width / 2, 0)
|
ctx.fillText(content, canvas.width / 2, 0)
|
||||||
} else if (style.position === 'left') {
|
} else if (style.position === 'left') {
|
||||||
ctx.fillText(content, padding, 0)
|
ctx.textAlign = 'left'
|
||||||
} else {
|
ctx.fillText(content, padding, 0)
|
||||||
ctx.textAlign = 'right'
|
} else {
|
||||||
ctx.fillText(content, canvas.width - padding, 0)
|
ctx.textAlign = 'right'
|
||||||
}
|
ctx.fillText(content, canvas.width - padding, 0)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 绘制多行文本（不变）
|
||||||
function drawMoreLines(canvas, style, content) {
|
function drawMoreLines(canvas, style, content) {
|
||||||
const ctx = canvas.getContext('2d')
|
const ctx = canvas.getContext('2d')
|
||||||
const fontHeight = parseInt(style.font.match(/\d+/), 10)
|
const fontHeight = parseInt(style.font.match(/\d+/), 10)
|
||||||
|
let totalLines = 0;
|
||||||
|
|
||||||
if (DEBUG) {
|
// 预计算行高并设置 Canvas 高度
|
||||||
ctx.strokeStyle = "#6fda92";
|
let lineWidth = 0
|
||||||
ctx.strokeRect(0, 0, canvas.width, canvas.height);
|
let currentLine = 0
|
||||||
}
|
for (let i = 0; i < content.length; i++) {
|
||||||
|
lineWidth += ctx.measureText(content[i]).width;
|
||||||
ctx.font = style.font
|
if (lineWidth > canvas.width - 120) {
|
||||||
ctx.fillStyle = style.color
|
currentLine++;
|
||||||
ctx.textBaseline = 'top'
|
lineWidth = 0
|
||||||
ctx.textAlign = 'center'
|
}
|
||||||
|
if (i === content.length - 1) {
|
||||||
let alignX = 0
|
currentLine++;
|
||||||
|
}
|
||||||
if (style.position === 'center') {
|
|
||||||
alignX = canvas.width / 2;
|
|
||||||
} else if (style.position === 'left') {
|
|
||||||
ctx.textAlign = 'left'
|
|
||||||
alignX = 40
|
|
||||||
} else {
|
|
||||||
ctx.textAlign = 'right'
|
|
||||||
alignX = canvas.width - 40
|
|
||||||
}
|
|
||||||
|
|
||||||
let lineWidth = 0
|
|
||||||
let lastSubStrIndex = 0
|
|
||||||
let offsetY = 0
|
|
||||||
for (let i = 0; i < content.length; i++) {
|
|
||||||
lineWidth += ctx.measureText(content[i]).width;
|
|
||||||
if (lineWidth > canvas.width - 120) {
|
|
||||||
ctx.fillText(content.substring(lastSubStrIndex, i), alignX, offsetY);
|
|
||||||
offsetY += fontHeight * style.lineHeight
|
|
||||||
lineWidth = 0
|
|
||||||
lastSubStrIndex = i
|
|
||||||
}
|
}
|
||||||
if (i === content.length - 1) {
|
totalLines = currentLine;
|
||||||
ctx.fillText(content.substring(lastSubStrIndex, i + 1), alignX, offsetY);
|
canvas.height = (fontHeight * style.lineHeight) * totalLines + 20; // 留出一些底部边距
|
||||||
|
|
||||||
|
if (DEBUG) {
|
||||||
|
ctx.strokeStyle = "#6fda92";
|
||||||
|
ctx.strokeRect(0, 0, canvas.width, canvas.height);
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.font = style.font
|
||||||
|
ctx.fillStyle = style.color
|
||||||
|
ctx.textBaseline = 'top'
|
||||||
|
ctx.textAlign = 'center'
|
||||||
|
|
||||||
|
let alignX = 0
|
||||||
|
|
||||||
|
if (style.position === 'center') {
|
||||||
|
alignX = canvas.width / 2;
|
||||||
|
} else if (style.position === 'left') {
|
||||||
|
ctx.textAlign = 'left'
|
||||||
|
alignX = 40
|
||||||
|
} else {
|
||||||
|
ctx.textAlign = 'right'
|
||||||
|
alignX = canvas.width - 40
|
||||||
|
}
|
||||||
|
|
||||||
|
lineWidth = 0
|
||||||
|
let lastSubStrIndex = 0
|
||||||
|
let offsetY = 0
|
||||||
|
for (let i = 0; i < content.length; i++) {
|
||||||
|
lineWidth += ctx.measureText(content[i]).width;
|
||||||
|
if (lineWidth > canvas.width - 120) {
|
||||||
|
ctx.fillText(content.substring(lastSubStrIndex, i), alignX, offsetY);
|
||||||
|
offsetY += fontHeight * style.lineHeight
|
||||||
|
lineWidth = 0
|
||||||
|
lastSubStrIndex = i
|
||||||
|
}
|
||||||
|
if (i === content.length - 1) {
|
||||||
|
ctx.fillText(content.substring(lastSubStrIndex, i + 1), alignX, offsetY);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
init
|
init
|
||||||
}
|
}
|
||||||
})()
|
})()
|
||||||
|
|
||||||
|
|
||||||
|
// ajax生成文章海报
|
||||||
|
// 此处调用部分需要确保在 PJAX 环境下，该事件监听器能够重新绑定（如果使用传统的 document.ready，在 PJAX 中需要改为监听 pjax:success 等事件）
|
||||||
//ajax生成文章海报
|
|
||||||
$('body').on('click', '.cr_poster', function () {
|
$('body').on('click', '.cr_poster', function () {
|
||||||
var post_id = $(this).attr('poster-data');
|
let closeLoading = null;
|
||||||
var banner = $(this).attr('banner');
|
closeLoading = cocoMessage.loading('海报生成中...');
|
||||||
var single_content = $('.single-content')
|
var $trigger = $(this);
|
||||||
var t_content = $('#post-'+post_id+' .t_content')
|
var post_id = $(this).attr('poster-data');
|
||||||
var content = single_content.length>0 ? single_content[0].innerText : t_content[0].innerText
|
var banner = $(this).attr('banner');
|
||||||
var content_length = content.length
|
var single_content = $('.single-content');
|
||||||
var permalink = t_content.length>0 ? window.location.origin + '/moments/'+post_id : window.location.origin + window.location.pathname;
|
var t_content = $('#post-'+post_id+' .t_content');
|
||||||
var title = t_content.length>0 ? Theme.site_title+'-瞬间' : document.title;
|
var modal = '#share_modal_' + post_id;
|
||||||
new QRious({ element: document.getElementById("twoCode"), value: permalink, size: 260, });
|
var $modalList = $(modal);
|
||||||
$('.poster_box').remove();
|
var $modal = $trigger.closest(modal);
|
||||||
$('#share_modal_' + post_id + ' .poster_box_ap').append('<div class="poster_box"></div>');
|
if ($modal.length === 0) {
|
||||||
|
$modal = $(modal + ':visible').first();
|
||||||
if (content_length > 120) {
|
}
|
||||||
content = content.substring(0, 80) + '...'
|
if ($modal.length === 0) {
|
||||||
}
|
$modal = $modalList.first();
|
||||||
|
|
||||||
function Posterdown(e) {
|
|
||||||
if (e == null) {
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var modal = '#share_modal_' + post_id;
|
if ($modal.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
var url = $('' + modal + ' .poster_box img').attr('src');
|
// 确保 content 区域存在
|
||||||
$('' + modal + ' .post_share_box').removeClass('hide');
|
var content_element = single_content.length > 0 ? single_content[0] : (t_content.length > 0 ? t_content[0] : null);
|
||||||
$('' + modal + ' .poster_download').attr('href', url).attr('download', 'poster_' + post_id + '.png');
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#share_modal_' + post_id + ' .poster_box').append('<div class="loading_box"><div uk-spinner></div></div>');
|
if (!content_element) {
|
||||||
$('.loading_box').remove();
|
// 如果没有内容元素，则不执行后续操作或给出提示
|
||||||
poster.init({
|
console.error('无法获取文章内容元素。');
|
||||||
banner: banner,
|
return;
|
||||||
selector: '.poster_box',
|
}
|
||||||
title: title,
|
|
||||||
content: content,
|
|
||||||
logo: Theme.site_logo,
|
|
||||||
qrcode: $('#twoCode').attr('src'),
|
|
||||||
description: Theme.admin_des,
|
|
||||||
callback: Posterdown
|
|
||||||
});
|
|
||||||
|
|
||||||
|
var content = content_element.innerText;
|
||||||
|
var content_length = content.length;
|
||||||
|
var permalink = t_content.length > 0 ? window.location.origin + '/moments/' + post_id : window.location.origin + window.location.pathname;
|
||||||
|
var title = t_content.length > 0 ? '瞬间' : (document.title || '').split(' - ')[0];
|
||||||
|
var siteName = Theme.site_title;
|
||||||
|
|
||||||
|
// 确保 QRious 库可用
|
||||||
|
if (typeof QRious === 'undefined') {
|
||||||
|
console.error('QRious 库未加载。');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查 #twoCode 是否存在，如果不存在需要动态创建，否则 QRious 会失败
|
||||||
|
let twoCodeCanvas = document.getElementById("twoCode");
|
||||||
|
if (!twoCodeCanvas) {
|
||||||
|
twoCodeCanvas = document.createElement('canvas');
|
||||||
|
twoCodeCanvas.id = 'twoCode';
|
||||||
|
twoCodeCanvas.style.display = 'none';
|
||||||
|
document.body.appendChild(twoCodeCanvas); // 插入到 DOM 中
|
||||||
|
}
|
||||||
|
|
||||||
|
new QRious({ element: twoCodeCanvas, value: permalink, size: 260, });
|
||||||
|
|
||||||
|
var $posterBoxAp = $modal.find('.poster_box_ap').first();
|
||||||
|
if ($posterBoxAp.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ------------------ 【修复点 2：清理容器】 ------------------
|
||||||
|
// 仅在当前弹窗作用域内移除旧容器，避免影响 PJAX 残留节点
|
||||||
|
$posterBoxAp.find('.poster_box').remove();
|
||||||
|
// 重新创建并插入新的 poster_box
|
||||||
|
var $posterBox = $('<div class="poster_box"></div>');
|
||||||
|
$posterBoxAp.append($posterBox);
|
||||||
|
// -----------------------------------------------------------------------
|
||||||
|
|
||||||
|
if (content_length > 120) {
|
||||||
|
content = content.substring(0, 82) + '...'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 海报生成回调
|
||||||
|
function Posterdown(e) {
|
||||||
|
// 检查海报是否成功生成
|
||||||
|
if (e && $posterBox.find('img').length > 0) {
|
||||||
|
closeLoading?.()
|
||||||
|
cocoMessage.success("海报生成成功！") // 图片加载完成后才触发
|
||||||
|
var url = $posterBox.find('img').attr('src');
|
||||||
|
var $shareBox = $modal.find('.post_share_box');
|
||||||
|
|
||||||
|
$shareBox.removeClass('hide');
|
||||||
|
$modal.find('.poster_download').attr('href', url).attr('download', 'poster_' + post_id + '.png');
|
||||||
|
} else {
|
||||||
|
// 错误处理，如果海报生成失败
|
||||||
|
closeLoading?. ();
|
||||||
|
cocoMessage.error("海报生成失败，请重试！")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
poster.init({
|
||||||
|
banner: banner,
|
||||||
|
selector: modal + ' .poster_box',
|
||||||
|
container: $posterBox[0],
|
||||||
|
title: title,
|
||||||
|
siteName: siteName,
|
||||||
|
description: Theme.admin_des,
|
||||||
|
content: content,
|
||||||
|
logo: Theme.site_logo,
|
||||||
|
qrcode: $('#twoCode').attr('src'),
|
||||||
|
customText1: '扫描右侧二维码',
|
||||||
|
customText2: '或访问：https://anian.net',
|
||||||
|
customText1Style: {
|
||||||
|
font: '24px Helvetica',
|
||||||
|
color: 'rgba(0, 0, 0, 1)'
|
||||||
|
},
|
||||||
|
customText2Style: {
|
||||||
|
font: '24px Helvetica',
|
||||||
|
color: 'rgba(0, 0, 0, 1)'
|
||||||
|
},
|
||||||
|
callback: Posterdown
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).on('pjax:success', function (event) {
|
||||||
|
// 清理 PJAX 残留的 modal：只删除那些在当前页面没有对应按钮的 modal
|
||||||
|
var allModals = $('[id^="share_modal_"]');
|
||||||
|
var currentPostIds = {};
|
||||||
|
|
||||||
|
// 收集当前页面所有的 post_id
|
||||||
|
$('.cr_poster').each(function() {
|
||||||
|
var pid = $(this).attr('poster-data');
|
||||||
|
if (pid) {
|
||||||
|
currentPostIds[pid] = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 只删除残留的 modal（不在当前页面按钮列表中的）
|
||||||
|
allModals.each(function() {
|
||||||
|
var $m = $(this);
|
||||||
|
var modalId = $m.attr('id');
|
||||||
|
var postId = modalId ? modalId.replace('share_modal_', '') : null;
|
||||||
|
|
||||||
|
if (postId && !currentPostIds[postId]) {
|
||||||
|
$m.remove();
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
function convertImgToBase64(url, callback) {
|
function convertImgToBase64(url, callback) {
|
||||||
var canvas = document.createElement('canvas');
|
var canvas = document.createElement('canvas');
|
||||||
var img = new Image();
|
var img = new Image();
|
||||||
img.crossOrigin = 'Anonymous';
|
img.crossOrigin = 'Anonymous';
|
||||||
img.onload = function () {
|
img.onload = function () {
|
||||||
canvas.width = img.width;
|
canvas.width = img.width;
|
||||||
canvas.height = img.height;
|
canvas.height = img.height;
|
||||||
var ctx = canvas.getContext('2d');
|
var ctx = canvas.getContext('2d');
|
||||||
ctx.drawImage(img, 0, 0);
|
ctx.drawImage(img, 0, 0);
|
||||||
var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase();
|
var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase();
|
||||||
var dataURL = canvas.toDataURL('image/' + ext);
|
// 修正：确保 toDataURL 使用正确的 MIME type，如果是 jpg/jpeg 应使用 image/jpeg
|
||||||
callback(dataURL);
|
var mimeType = (ext === 'jpg' || ext === 'jpeg') ? 'image/jpeg' : 'image/png';
|
||||||
canvas = null;
|
var dataURL = canvas.toDataURL(mimeType);
|
||||||
};
|
callback(dataURL);
|
||||||
img.src = url;
|
canvas = null;
|
||||||
|
};
|
||||||
|
img.onerror = function() {
|
||||||
|
console.error('convertImgToBase64: 无法加载图片 ' + url);
|
||||||
|
callback(null);
|
||||||
|
}
|
||||||
|
img.src = url;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function handleShare(e, pic, title,pathname) {
|
function handleShare(e, pic, title, pathname) {
|
||||||
var permalink = window.location.origin + pathname;
|
var permalink = window.location.origin + pathname;
|
||||||
switch (e) {
|
|
||||||
case 'wb':
|
// 确保 cocoMessage 库可用
|
||||||
var url = `https://service.weibo.com/share/share.php?url=${permalink}&type=button&language=zh_cn&pic=${pic}&title=${title}`
|
if (typeof cocoMessage === 'undefined') {
|
||||||
window.open(url);
|
console.error('cocoMessage 库未加载。');
|
||||||
break
|
// 如果 cocoMessage 不可用，可以替换为原生的 alert
|
||||||
case 'qzone':
|
if (e === 'copy') {
|
||||||
var url = `https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${permalink}&title=${title}&pics=${pic}`
|
alert("链接已复制到剪贴板！");
|
||||||
window.open(url);
|
|
||||||
break
|
|
||||||
case "qq":
|
|
||||||
var url = `http://connect.qq.com/widget/shareqq/index.html?url=${permalink}&title=${title}&pics=${pic}`
|
|
||||||
window.open(url);
|
|
||||||
break;
|
|
||||||
case "copy":
|
|
||||||
if (navigator.clipboard) {
|
|
||||||
navigator.clipboard.writeText(permalink).then(function() {
|
|
||||||
cocoMessage.success("链接已复制到剪贴板！");
|
|
||||||
}, function(err) {
|
|
||||||
cocoMessage.error("复制失败，请手动复制链接");
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// 兼容旧浏览器
|
|
||||||
var tempInput = document.createElement('input');
|
|
||||||
tempInput.value = permalink;
|
|
||||||
document.body.appendChild(tempInput);
|
|
||||||
tempInput.select();
|
|
||||||
try {
|
|
||||||
document.execCommand('copy');
|
|
||||||
cocoMessage.success("链接已复制到剪贴板！");
|
|
||||||
} catch (err) {
|
|
||||||
cocoMessage.error("复制失败，请手动复制链接");
|
|
||||||
}
|
}
|
||||||
document.body.removeChild(tempInput);
|
}
|
||||||
}
|
|
||||||
break;
|
switch (e) {
|
||||||
default:
|
case 'wb':
|
||||||
break
|
var url = `https://service.weibo.com/share/share.php?url=${encodeURIComponent(permalink)}&type=button&language=zh_cn&pic=${encodeURIComponent(pic)}&title=${encodeURIComponent(title)}`
|
||||||
}
|
window.open(url);
|
||||||
|
break
|
||||||
|
case 'qzone':
|
||||||
|
var url = `https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${encodeURIComponent(permalink)}&title=${encodeURIComponent(title)}&pics=${encodeURIComponent(pic)}`
|
||||||
|
window.open(url);
|
||||||
|
break
|
||||||
|
case "qq":
|
||||||
|
var url = `http://connect.qq.com/widget/shareqq/index.html?url=${encodeURIComponent(permalink)}&title=${encodeURIComponent(title)}&pics=${encodeURIComponent(pic)}`
|
||||||
|
window.open(url);
|
||||||
|
break;
|
||||||
|
case "copy":
|
||||||
|
if (navigator.clipboard) {
|
||||||
|
navigator.clipboard.writeText(permalink).then(function() {
|
||||||
|
cocoMessage.success("链接已复制到剪贴板！");
|
||||||
|
}, function(err) {
|
||||||
|
cocoMessage.error("复制失败，请手动复制链接");
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// 兼容旧浏览器
|
||||||
|
var tempInput = document.createElement('input');
|
||||||
|
tempInput.value = permalink;
|
||||||
|
document.body.appendChild(tempInput);
|
||||||
|
tempInput.select();
|
||||||
|
try {
|
||||||
|
document.execCommand('copy');
|
||||||
|
cocoMessage.success("链接已复制到剪贴板！");
|
||||||
|
} catch (err) {
|
||||||
|
cocoMessage.error("复制失败，请手动复制链接");
|
||||||
|
}
|
||||||
|
document.body.removeChild(tempInput);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
+1
-1
File diff suppressed because one or more lines are too long
Regular → Executable
+750
-99
@@ -1,21 +1,21 @@
|
|||||||
/*
|
/*
|
||||||
* Remix Icon v3.5.0
|
* Remix Icon v4.8.0
|
||||||
* https://remixicon.com
|
* https://remixicon.com
|
||||||
* https://github.com/Remix-Design/RemixIcon
|
* https://github.com/Remix-Design/RemixIcon
|
||||||
*
|
*
|
||||||
* Copyright RemixIcon.com
|
* Copyright RemixIcon.com
|
||||||
* Released under the Apache License Version 2.0
|
* Released under the Apache License Version 2.0
|
||||||
*
|
*
|
||||||
* Date: 2023-07-30
|
* Date: 2025-12-26
|
||||||
*/
|
*/
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "remixicon";
|
font-family: "remixicon";
|
||||||
src: url('remixicon.eot?t=1690730386070'); /* IE9*/
|
src: url('remixicon.eot?t=1766743011500'); /* IE9*/
|
||||||
src: url('remixicon.eot?t=1690730386070#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
src: url('remixicon.eot?t=1766743011500#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||||
url("remixicon.woff2?t=1690730386070") format("woff2"),
|
url("remixicon.woff2?t=1766743011500") format("woff2"),
|
||||||
url("remixicon.woff?t=1690730386070") format("woff"),
|
url("remixicon.woff?t=1766743011500") format("woff"),
|
||||||
url('remixicon.ttf?t=1690730386070') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
url('remixicon.ttf?t=1766743011500') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||||
url('remixicon.svg?t=1690730386070#remixicon') format('svg'); /* iOS 4.1- */
|
url('remixicon.svg?t=1766743011500#remixicon') format('svg'); /* iOS 4.1- */
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -258,8 +258,8 @@
|
|||||||
.ri-book-3-line:before { content: "\ead5"; }
|
.ri-book-3-line:before { content: "\ead5"; }
|
||||||
.ri-book-fill:before { content: "\ead6"; }
|
.ri-book-fill:before { content: "\ead6"; }
|
||||||
.ri-book-line:before { content: "\ead7"; }
|
.ri-book-line:before { content: "\ead7"; }
|
||||||
.ri-book-mark-fill:before { content: "\ead8"; }
|
.ri-book-marked-fill:before { content: "\ead8"; }
|
||||||
.ri-book-mark-line:before { content: "\ead9"; }
|
.ri-book-marked-line:before { content: "\ead9"; }
|
||||||
.ri-book-open-fill:before { content: "\eada"; }
|
.ri-book-open-fill:before { content: "\eada"; }
|
||||||
.ri-book-open-line:before { content: "\eadb"; }
|
.ri-book-open-line:before { content: "\eadb"; }
|
||||||
.ri-book-read-fill:before { content: "\eadc"; }
|
.ri-book-read-fill:before { content: "\eadc"; }
|
||||||
@@ -798,8 +798,8 @@
|
|||||||
.ri-file-list-line:before { content: "\ecf1"; }
|
.ri-file-list-line:before { content: "\ecf1"; }
|
||||||
.ri-file-lock-fill:before { content: "\ecf2"; }
|
.ri-file-lock-fill:before { content: "\ecf2"; }
|
||||||
.ri-file-lock-line:before { content: "\ecf3"; }
|
.ri-file-lock-line:before { content: "\ecf3"; }
|
||||||
.ri-file-mark-fill:before { content: "\ecf4"; }
|
.ri-file-marked-fill:before { content: "\ecf4"; }
|
||||||
.ri-file-mark-line:before { content: "\ecf5"; }
|
.ri-file-marked-line:before { content: "\ecf5"; }
|
||||||
.ri-file-music-fill:before { content: "\ecf6"; }
|
.ri-file-music-fill:before { content: "\ecf6"; }
|
||||||
.ri-file-music-line:before { content: "\ecf7"; }
|
.ri-file-music-line:before { content: "\ecf7"; }
|
||||||
.ri-file-paper-2-fill:before { content: "\ecf8"; }
|
.ri-file-paper-2-fill:before { content: "\ecf8"; }
|
||||||
@@ -2493,91 +2493,742 @@
|
|||||||
.ri-font-family:before { content: "\f390"; }
|
.ri-font-family:before { content: "\f390"; }
|
||||||
.ri-font-mono:before { content: "\f391"; }
|
.ri-font-mono:before { content: "\f391"; }
|
||||||
.ri-font-sans-serif:before { content: "\f392"; }
|
.ri-font-sans-serif:before { content: "\f392"; }
|
||||||
.ri-font-sans:before { content: "\f393"; }
|
.ri-hard-drive-3-fill:before { content: "\f393"; }
|
||||||
.ri-hard-drive-3-fill:before { content: "\f394"; }
|
.ri-hard-drive-3-line:before { content: "\f394"; }
|
||||||
.ri-hard-drive-3-line:before { content: "\f395"; }
|
.ri-kick-fill:before { content: "\f395"; }
|
||||||
.ri-kick-fill:before { content: "\f396"; }
|
.ri-kick-line:before { content: "\f396"; }
|
||||||
.ri-kick-line:before { content: "\f397"; }
|
.ri-list-check-3:before { content: "\f397"; }
|
||||||
.ri-list-check-3:before { content: "\f398"; }
|
.ri-list-indefinite:before { content: "\f398"; }
|
||||||
.ri-list-indefinite:before { content: "\f399"; }
|
.ri-list-ordered-2:before { content: "\f399"; }
|
||||||
.ri-list-ordered-2:before { content: "\f39a"; }
|
.ri-list-radio:before { content: "\f39a"; }
|
||||||
.ri-list-radio:before { content: "\f39b"; }
|
.ri-openbase-fill:before { content: "\f39b"; }
|
||||||
.ri-openbase-fill:before { content: "\f39c"; }
|
.ri-openbase-line:before { content: "\f39c"; }
|
||||||
.ri-openbase-line:before { content: "\f39d"; }
|
.ri-planet-fill:before { content: "\f39d"; }
|
||||||
.ri-planet-fill:before { content: "\f39e"; }
|
.ri-planet-line:before { content: "\f39e"; }
|
||||||
.ri-planet-line:before { content: "\f39f"; }
|
.ri-prohibited-fill:before { content: "\f39f"; }
|
||||||
.ri-prohibited-fill:before { content: "\f3a0"; }
|
.ri-prohibited-line:before { content: "\f3a0"; }
|
||||||
.ri-prohibited-line:before { content: "\f3a1"; }
|
.ri-quote-text:before { content: "\f3a1"; }
|
||||||
.ri-quote-text:before { content: "\f3a2"; }
|
.ri-seo-fill:before { content: "\f3a2"; }
|
||||||
.ri-seo-fill:before { content: "\f3a3"; }
|
.ri-seo-line:before { content: "\f3a3"; }
|
||||||
.ri-seo-line:before { content: "\f3a4"; }
|
.ri-slash-commands:before { content: "\f3a4"; }
|
||||||
.ri-slash-commands:before { content: "\f3a5"; }
|
.ri-archive-2-fill:before { content: "\f3a5"; }
|
||||||
.ri-archive-2-fill:before { content: "\f3a6"; }
|
.ri-archive-2-line:before { content: "\f3a6"; }
|
||||||
.ri-archive-2-line:before { content: "\f3a7"; }
|
.ri-inbox-2-fill:before { content: "\f3a7"; }
|
||||||
.ri-inbox-2-fill:before { content: "\f3a8"; }
|
.ri-inbox-2-line:before { content: "\f3a8"; }
|
||||||
.ri-inbox-2-line:before { content: "\f3a9"; }
|
.ri-shake-hands-fill:before { content: "\f3a9"; }
|
||||||
.ri-shake-hands-fill:before { content: "\f3aa"; }
|
.ri-shake-hands-line:before { content: "\f3aa"; }
|
||||||
.ri-shake-hands-line:before { content: "\f3ab"; }
|
.ri-supabase-fill:before { content: "\f3ab"; }
|
||||||
.ri-supabase-fill:before { content: "\f3ac"; }
|
.ri-supabase-line:before { content: "\f3ac"; }
|
||||||
.ri-supabase-line:before { content: "\f3ad"; }
|
.ri-water-percent-fill:before { content: "\f3ad"; }
|
||||||
.ri-water-percent-fill:before { content: "\f3ae"; }
|
.ri-water-percent-line:before { content: "\f3ae"; }
|
||||||
.ri-water-percent-line:before { content: "\f3af"; }
|
.ri-yuque-fill:before { content: "\f3af"; }
|
||||||
.ri-yuque-fill:before { content: "\f3b0"; }
|
.ri-yuque-line:before { content: "\f3b0"; }
|
||||||
.ri-yuque-line:before { content: "\f3b1"; }
|
.ri-crosshair-2-fill:before { content: "\f3b1"; }
|
||||||
.ri-crosshair-2-fill:before { content: "\f3b2"; }
|
.ri-crosshair-2-line:before { content: "\f3b2"; }
|
||||||
.ri-crosshair-2-line:before { content: "\f3b3"; }
|
.ri-crosshair-fill:before { content: "\f3b3"; }
|
||||||
.ri-crosshair-fill:before { content: "\f3b4"; }
|
.ri-crosshair-line:before { content: "\f3b4"; }
|
||||||
.ri-crosshair-line:before { content: "\f3b5"; }
|
.ri-file-close-fill:before { content: "\f3b5"; }
|
||||||
.ri-file-close-fill:before { content: "\f3b6"; }
|
.ri-file-close-line:before { content: "\f3b6"; }
|
||||||
.ri-file-close-line:before { content: "\f3b7"; }
|
.ri-infinity-fill:before { content: "\f3b7"; }
|
||||||
.ri-infinity-fill:before { content: "\f3b8"; }
|
.ri-infinity-line:before { content: "\f3b8"; }
|
||||||
.ri-infinity-line:before { content: "\f3b9"; }
|
.ri-rfid-fill:before { content: "\f3b9"; }
|
||||||
.ri-rfid-fill:before { content: "\f3ba"; }
|
.ri-rfid-line:before { content: "\f3ba"; }
|
||||||
.ri-rfid-line:before { content: "\f3bb"; }
|
.ri-slash-commands-2:before { content: "\f3bb"; }
|
||||||
.ri-slash-commands-2:before { content: "\f3bc"; }
|
.ri-user-forbid-fill:before { content: "\f3bc"; }
|
||||||
.ri-user-forbid-fill:before { content: "\f3bd"; }
|
.ri-user-forbid-line:before { content: "\f3bd"; }
|
||||||
.ri-user-forbid-line:before { content: "\f3be"; }
|
.ri-beer-fill:before { content: "\f3be"; }
|
||||||
.ri-beer-fill:before { content: "\f3bf"; }
|
.ri-beer-line:before { content: "\f3bf"; }
|
||||||
.ri-beer-line:before { content: "\f3c0"; }
|
.ri-circle-fill:before { content: "\f3c0"; }
|
||||||
.ri-circle-fill:before { content: "\f3c1"; }
|
.ri-circle-line:before { content: "\f3c1"; }
|
||||||
.ri-circle-line:before { content: "\f3c2"; }
|
.ri-dropdown-list:before { content: "\f3c2"; }
|
||||||
.ri-dropdown-list:before { content: "\f3c3"; }
|
.ri-file-image-fill:before { content: "\f3c3"; }
|
||||||
.ri-file-image-fill:before { content: "\f3c4"; }
|
.ri-file-image-line:before { content: "\f3c4"; }
|
||||||
.ri-file-image-line:before { content: "\f3c5"; }
|
.ri-file-pdf-2-fill:before { content: "\f3c5"; }
|
||||||
.ri-file-pdf-2-fill:before { content: "\f3c6"; }
|
.ri-file-pdf-2-line:before { content: "\f3c6"; }
|
||||||
.ri-file-pdf-2-line:before { content: "\f3c7"; }
|
.ri-file-video-fill:before { content: "\f3c7"; }
|
||||||
.ri-file-video-fill:before { content: "\f3c8"; }
|
.ri-file-video-line:before { content: "\f3c8"; }
|
||||||
.ri-file-video-line:before { content: "\f3c9"; }
|
.ri-folder-image-fill:before { content: "\f3c9"; }
|
||||||
.ri-folder-image-fill:before { content: "\f3ca"; }
|
.ri-folder-image-line:before { content: "\f3ca"; }
|
||||||
.ri-folder-image-line:before { content: "\f3cb"; }
|
.ri-folder-video-fill:before { content: "\f3cb"; }
|
||||||
.ri-folder-video-fill:before { content: "\f3cc"; }
|
.ri-folder-video-line:before { content: "\f3cc"; }
|
||||||
.ri-folder-video-line:before { content: "\f3cd"; }
|
.ri-hexagon-fill:before { content: "\f3cd"; }
|
||||||
.ri-hexagon-fill:before { content: "\f3ce"; }
|
.ri-hexagon-line:before { content: "\f3ce"; }
|
||||||
.ri-hexagon-line:before { content: "\f3cf"; }
|
.ri-menu-search-fill:before { content: "\f3cf"; }
|
||||||
.ri-menu-search-fill:before { content: "\f3d0"; }
|
.ri-menu-search-line:before { content: "\f3d0"; }
|
||||||
.ri-menu-search-line:before { content: "\f3d1"; }
|
.ri-octagon-fill:before { content: "\f3d1"; }
|
||||||
.ri-octagon-fill:before { content: "\f3d2"; }
|
.ri-octagon-line:before { content: "\f3d2"; }
|
||||||
.ri-octagon-line:before { content: "\f3d3"; }
|
.ri-pentagon-fill:before { content: "\f3d3"; }
|
||||||
.ri-pentagon-fill:before { content: "\f3d4"; }
|
.ri-pentagon-line:before { content: "\f3d4"; }
|
||||||
.ri-pentagon-line:before { content: "\f3d5"; }
|
.ri-rectangle-fill:before { content: "\f3d5"; }
|
||||||
.ri-rectangle-fill:before { content: "\f3d6"; }
|
.ri-rectangle-line:before { content: "\f3d6"; }
|
||||||
.ri-rectangle-line:before { content: "\f3d7"; }
|
.ri-robot-2-fill:before { content: "\f3d7"; }
|
||||||
.ri-robot-2-fill:before { content: "\f3d8"; }
|
.ri-robot-2-line:before { content: "\f3d8"; }
|
||||||
.ri-robot-2-line:before { content: "\f3d9"; }
|
.ri-shapes-fill:before { content: "\f3d9"; }
|
||||||
.ri-shapes-fill:before { content: "\f3da"; }
|
.ri-shapes-line:before { content: "\f3da"; }
|
||||||
.ri-shapes-line:before { content: "\f3db"; }
|
.ri-square-fill:before { content: "\f3db"; }
|
||||||
.ri-square-fill:before { content: "\f3dc"; }
|
.ri-square-line:before { content: "\f3dc"; }
|
||||||
.ri-square-line:before { content: "\f3dd"; }
|
.ri-tent-fill:before { content: "\f3dd"; }
|
||||||
.ri-tent-fill:before { content: "\f3de"; }
|
.ri-tent-line:before { content: "\f3de"; }
|
||||||
.ri-tent-line:before { content: "\f3df"; }
|
.ri-threads-fill:before { content: "\f3df"; }
|
||||||
.ri-threads-fill:before { content: "\f3e0"; }
|
.ri-threads-line:before { content: "\f3e0"; }
|
||||||
.ri-threads-line:before { content: "\f3e1"; }
|
.ri-tree-fill:before { content: "\f3e1"; }
|
||||||
.ri-tree-fill:before { content: "\f3e2"; }
|
.ri-tree-line:before { content: "\f3e2"; }
|
||||||
.ri-tree-line:before { content: "\f3e3"; }
|
.ri-triangle-fill:before { content: "\f3e3"; }
|
||||||
.ri-triangle-fill:before { content: "\f3e4"; }
|
.ri-triangle-line:before { content: "\f3e4"; }
|
||||||
.ri-triangle-line:before { content: "\f3e5"; }
|
.ri-twitter-x-fill:before { content: "\f3e5"; }
|
||||||
.ri-twitter-x-fill:before { content: "\f3e6"; }
|
.ri-twitter-x-line:before { content: "\f3e6"; }
|
||||||
.ri-twitter-x-line:before { content: "\f3e7"; }
|
.ri-verified-badge-fill:before { content: "\f3e7"; }
|
||||||
.ri-verified-badge-fill:before { content: "\f3e8"; }
|
.ri-verified-badge-line:before { content: "\f3e8"; }
|
||||||
.ri-verified-badge-line:before { content: "\f3e9"; }
|
.ri-armchair-fill:before { content: "\f3e9"; }
|
||||||
|
.ri-armchair-line:before { content: "\f3ea"; }
|
||||||
|
.ri-bnb-fill:before { content: "\f3eb"; }
|
||||||
|
.ri-bnb-line:before { content: "\f3ec"; }
|
||||||
|
.ri-bread-fill:before { content: "\f3ed"; }
|
||||||
|
.ri-bread-line:before { content: "\f3ee"; }
|
||||||
|
.ri-btc-fill:before { content: "\f3ef"; }
|
||||||
|
.ri-btc-line:before { content: "\f3f0"; }
|
||||||
|
.ri-calendar-schedule-fill:before { content: "\f3f1"; }
|
||||||
|
.ri-calendar-schedule-line:before { content: "\f3f2"; }
|
||||||
|
.ri-dice-1-fill:before { content: "\f3f3"; }
|
||||||
|
.ri-dice-1-line:before { content: "\f3f4"; }
|
||||||
|
.ri-dice-2-fill:before { content: "\f3f5"; }
|
||||||
|
.ri-dice-2-line:before { content: "\f3f6"; }
|
||||||
|
.ri-dice-3-fill:before { content: "\f3f7"; }
|
||||||
|
.ri-dice-3-line:before { content: "\f3f8"; }
|
||||||
|
.ri-dice-4-fill:before { content: "\f3f9"; }
|
||||||
|
.ri-dice-4-line:before { content: "\f3fa"; }
|
||||||
|
.ri-dice-5-fill:before { content: "\f3fb"; }
|
||||||
|
.ri-dice-5-line:before { content: "\f3fc"; }
|
||||||
|
.ri-dice-6-fill:before { content: "\f3fd"; }
|
||||||
|
.ri-dice-6-line:before { content: "\f3fe"; }
|
||||||
|
.ri-dice-fill:before { content: "\f3ff"; }
|
||||||
|
.ri-dice-line:before { content: "\f400"; }
|
||||||
|
.ri-drinks-fill:before { content: "\f401"; }
|
||||||
|
.ri-drinks-line:before { content: "\f402"; }
|
||||||
|
.ri-equalizer-2-fill:before { content: "\f403"; }
|
||||||
|
.ri-equalizer-2-line:before { content: "\f404"; }
|
||||||
|
.ri-equalizer-3-fill:before { content: "\f405"; }
|
||||||
|
.ri-equalizer-3-line:before { content: "\f406"; }
|
||||||
|
.ri-eth-fill:before { content: "\f407"; }
|
||||||
|
.ri-eth-line:before { content: "\f408"; }
|
||||||
|
.ri-flower-fill:before { content: "\f409"; }
|
||||||
|
.ri-flower-line:before { content: "\f40a"; }
|
||||||
|
.ri-glasses-2-fill:before { content: "\f40b"; }
|
||||||
|
.ri-glasses-2-line:before { content: "\f40c"; }
|
||||||
|
.ri-glasses-fill:before { content: "\f40d"; }
|
||||||
|
.ri-glasses-line:before { content: "\f40e"; }
|
||||||
|
.ri-goggles-fill:before { content: "\f40f"; }
|
||||||
|
.ri-goggles-line:before { content: "\f410"; }
|
||||||
|
.ri-image-circle-fill:before { content: "\f411"; }
|
||||||
|
.ri-image-circle-line:before { content: "\f412"; }
|
||||||
|
.ri-info-i:before { content: "\f413"; }
|
||||||
|
.ri-money-rupee-circle-fill:before { content: "\f414"; }
|
||||||
|
.ri-money-rupee-circle-line:before { content: "\f415"; }
|
||||||
|
.ri-news-fill:before { content: "\f416"; }
|
||||||
|
.ri-news-line:before { content: "\f417"; }
|
||||||
|
.ri-robot-3-fill:before { content: "\f418"; }
|
||||||
|
.ri-robot-3-line:before { content: "\f419"; }
|
||||||
|
.ri-share-2-fill:before { content: "\f41a"; }
|
||||||
|
.ri-share-2-line:before { content: "\f41b"; }
|
||||||
|
.ri-sofa-fill:before { content: "\f41c"; }
|
||||||
|
.ri-sofa-line:before { content: "\f41d"; }
|
||||||
|
.ri-svelte-fill:before { content: "\f41e"; }
|
||||||
|
.ri-svelte-line:before { content: "\f41f"; }
|
||||||
|
.ri-vk-fill:before { content: "\f420"; }
|
||||||
|
.ri-vk-line:before { content: "\f421"; }
|
||||||
|
.ri-xrp-fill:before { content: "\f422"; }
|
||||||
|
.ri-xrp-line:before { content: "\f423"; }
|
||||||
|
.ri-xtz-fill:before { content: "\f424"; }
|
||||||
|
.ri-xtz-line:before { content: "\f425"; }
|
||||||
|
.ri-archive-stack-fill:before { content: "\f426"; }
|
||||||
|
.ri-archive-stack-line:before { content: "\f427"; }
|
||||||
|
.ri-bowl-fill:before { content: "\f428"; }
|
||||||
|
.ri-bowl-line:before { content: "\f429"; }
|
||||||
|
.ri-calendar-view:before { content: "\f42a"; }
|
||||||
|
.ri-carousel-view:before { content: "\f42b"; }
|
||||||
|
.ri-code-block:before { content: "\f42c"; }
|
||||||
|
.ri-color-filter-fill:before { content: "\f42d"; }
|
||||||
|
.ri-color-filter-line:before { content: "\f42e"; }
|
||||||
|
.ri-contacts-book-3-fill:before { content: "\f42f"; }
|
||||||
|
.ri-contacts-book-3-line:before { content: "\f430"; }
|
||||||
|
.ri-contract-fill:before { content: "\f431"; }
|
||||||
|
.ri-contract-line:before { content: "\f432"; }
|
||||||
|
.ri-drinks-2-fill:before { content: "\f433"; }
|
||||||
|
.ri-drinks-2-line:before { content: "\f434"; }
|
||||||
|
.ri-export-fill:before { content: "\f435"; }
|
||||||
|
.ri-export-line:before { content: "\f436"; }
|
||||||
|
.ri-file-check-fill:before { content: "\f437"; }
|
||||||
|
.ri-file-check-line:before { content: "\f438"; }
|
||||||
|
.ri-focus-mode:before { content: "\f439"; }
|
||||||
|
.ri-folder-6-fill:before { content: "\f43a"; }
|
||||||
|
.ri-folder-6-line:before { content: "\f43b"; }
|
||||||
|
.ri-folder-check-fill:before { content: "\f43c"; }
|
||||||
|
.ri-folder-check-line:before { content: "\f43d"; }
|
||||||
|
.ri-folder-close-fill:before { content: "\f43e"; }
|
||||||
|
.ri-folder-close-line:before { content: "\f43f"; }
|
||||||
|
.ri-folder-cloud-fill:before { content: "\f440"; }
|
||||||
|
.ri-folder-cloud-line:before { content: "\f441"; }
|
||||||
|
.ri-gallery-view-2:before { content: "\f442"; }
|
||||||
|
.ri-gallery-view:before { content: "\f443"; }
|
||||||
|
.ri-hand:before { content: "\f444"; }
|
||||||
|
.ri-import-fill:before { content: "\f445"; }
|
||||||
|
.ri-import-line:before { content: "\f446"; }
|
||||||
|
.ri-information-2-fill:before { content: "\f447"; }
|
||||||
|
.ri-information-2-line:before { content: "\f448"; }
|
||||||
|
.ri-kanban-view-2:before { content: "\f449"; }
|
||||||
|
.ri-kanban-view:before { content: "\f44a"; }
|
||||||
|
.ri-list-view:before { content: "\f44b"; }
|
||||||
|
.ri-lock-star-fill:before { content: "\f44c"; }
|
||||||
|
.ri-lock-star-line:before { content: "\f44d"; }
|
||||||
|
.ri-puzzle-2-fill:before { content: "\f44e"; }
|
||||||
|
.ri-puzzle-2-line:before { content: "\f44f"; }
|
||||||
|
.ri-puzzle-fill:before { content: "\f450"; }
|
||||||
|
.ri-puzzle-line:before { content: "\f451"; }
|
||||||
|
.ri-ram-2-fill:before { content: "\f452"; }
|
||||||
|
.ri-ram-2-line:before { content: "\f453"; }
|
||||||
|
.ri-ram-fill:before { content: "\f454"; }
|
||||||
|
.ri-ram-line:before { content: "\f455"; }
|
||||||
|
.ri-receipt-fill:before { content: "\f456"; }
|
||||||
|
.ri-receipt-line:before { content: "\f457"; }
|
||||||
|
.ri-shadow-fill:before { content: "\f458"; }
|
||||||
|
.ri-shadow-line:before { content: "\f459"; }
|
||||||
|
.ri-sidebar-fold-fill:before { content: "\f45a"; }
|
||||||
|
.ri-sidebar-fold-line:before { content: "\f45b"; }
|
||||||
|
.ri-sidebar-unfold-fill:before { content: "\f45c"; }
|
||||||
|
.ri-sidebar-unfold-line:before { content: "\f45d"; }
|
||||||
|
.ri-slideshow-view:before { content: "\f45e"; }
|
||||||
|
.ri-sort-alphabet-asc:before { content: "\f45f"; }
|
||||||
|
.ri-sort-alphabet-desc:before { content: "\f460"; }
|
||||||
|
.ri-sort-number-asc:before { content: "\f461"; }
|
||||||
|
.ri-sort-number-desc:before { content: "\f462"; }
|
||||||
|
.ri-stacked-view:before { content: "\f463"; }
|
||||||
|
.ri-sticky-note-add-fill:before { content: "\f464"; }
|
||||||
|
.ri-sticky-note-add-line:before { content: "\f465"; }
|
||||||
|
.ri-swap-2-fill:before { content: "\f466"; }
|
||||||
|
.ri-swap-2-line:before { content: "\f467"; }
|
||||||
|
.ri-swap-3-fill:before { content: "\f468"; }
|
||||||
|
.ri-swap-3-line:before { content: "\f469"; }
|
||||||
|
.ri-table-3:before { content: "\f46a"; }
|
||||||
|
.ri-table-view:before { content: "\f46b"; }
|
||||||
|
.ri-text-block:before { content: "\f46c"; }
|
||||||
|
.ri-text-snippet:before { content: "\f46d"; }
|
||||||
|
.ri-timeline-view:before { content: "\f46e"; }
|
||||||
|
.ri-blogger-fill:before { content: "\f46f"; }
|
||||||
|
.ri-blogger-line:before { content: "\f470"; }
|
||||||
|
.ri-chat-thread-fill:before { content: "\f471"; }
|
||||||
|
.ri-chat-thread-line:before { content: "\f472"; }
|
||||||
|
.ri-discount-percent-fill:before { content: "\f473"; }
|
||||||
|
.ri-discount-percent-line:before { content: "\f474"; }
|
||||||
|
.ri-exchange-2-fill:before { content: "\f475"; }
|
||||||
|
.ri-exchange-2-line:before { content: "\f476"; }
|
||||||
|
.ri-git-fork-fill:before { content: "\f477"; }
|
||||||
|
.ri-git-fork-line:before { content: "\f478"; }
|
||||||
|
.ri-input-field:before { content: "\f479"; }
|
||||||
|
.ri-progress-1-fill:before { content: "\f47a"; }
|
||||||
|
.ri-progress-1-line:before { content: "\f47b"; }
|
||||||
|
.ri-progress-2-fill:before { content: "\f47c"; }
|
||||||
|
.ri-progress-2-line:before { content: "\f47d"; }
|
||||||
|
.ri-progress-3-fill:before { content: "\f47e"; }
|
||||||
|
.ri-progress-3-line:before { content: "\f47f"; }
|
||||||
|
.ri-progress-4-fill:before { content: "\f480"; }
|
||||||
|
.ri-progress-4-line:before { content: "\f481"; }
|
||||||
|
.ri-progress-5-fill:before { content: "\f482"; }
|
||||||
|
.ri-progress-5-line:before { content: "\f483"; }
|
||||||
|
.ri-progress-6-fill:before { content: "\f484"; }
|
||||||
|
.ri-progress-6-line:before { content: "\f485"; }
|
||||||
|
.ri-progress-7-fill:before { content: "\f486"; }
|
||||||
|
.ri-progress-7-line:before { content: "\f487"; }
|
||||||
|
.ri-progress-8-fill:before { content: "\f488"; }
|
||||||
|
.ri-progress-8-line:before { content: "\f489"; }
|
||||||
|
.ri-remix-run-fill:before { content: "\f48a"; }
|
||||||
|
.ri-remix-run-line:before { content: "\f48b"; }
|
||||||
|
.ri-signpost-fill:before { content: "\f48c"; }
|
||||||
|
.ri-signpost-line:before { content: "\f48d"; }
|
||||||
|
.ri-time-zone-fill:before { content: "\f48e"; }
|
||||||
|
.ri-time-zone-line:before { content: "\f48f"; }
|
||||||
|
.ri-arrow-down-wide-fill:before { content: "\f490"; }
|
||||||
|
.ri-arrow-down-wide-line:before { content: "\f491"; }
|
||||||
|
.ri-arrow-left-wide-fill:before { content: "\f492"; }
|
||||||
|
.ri-arrow-left-wide-line:before { content: "\f493"; }
|
||||||
|
.ri-arrow-right-wide-fill:before { content: "\f494"; }
|
||||||
|
.ri-arrow-right-wide-line:before { content: "\f495"; }
|
||||||
|
.ri-arrow-up-wide-fill:before { content: "\f496"; }
|
||||||
|
.ri-arrow-up-wide-line:before { content: "\f497"; }
|
||||||
|
.ri-bluesky-fill:before { content: "\f498"; }
|
||||||
|
.ri-bluesky-line:before { content: "\f499"; }
|
||||||
|
.ri-expand-height-fill:before { content: "\f49a"; }
|
||||||
|
.ri-expand-height-line:before { content: "\f49b"; }
|
||||||
|
.ri-expand-width-fill:before { content: "\f49c"; }
|
||||||
|
.ri-expand-width-line:before { content: "\f49d"; }
|
||||||
|
.ri-forward-end-fill:before { content: "\f49e"; }
|
||||||
|
.ri-forward-end-line:before { content: "\f49f"; }
|
||||||
|
.ri-forward-end-mini-fill:before { content: "\f4a0"; }
|
||||||
|
.ri-forward-end-mini-line:before { content: "\f4a1"; }
|
||||||
|
.ri-friendica-fill:before { content: "\f4a2"; }
|
||||||
|
.ri-friendica-line:before { content: "\f4a3"; }
|
||||||
|
.ri-git-pr-draft-fill:before { content: "\f4a4"; }
|
||||||
|
.ri-git-pr-draft-line:before { content: "\f4a5"; }
|
||||||
|
.ri-play-reverse-fill:before { content: "\f4a6"; }
|
||||||
|
.ri-play-reverse-line:before { content: "\f4a7"; }
|
||||||
|
.ri-play-reverse-mini-fill:before { content: "\f4a8"; }
|
||||||
|
.ri-play-reverse-mini-line:before { content: "\f4a9"; }
|
||||||
|
.ri-rewind-start-fill:before { content: "\f4aa"; }
|
||||||
|
.ri-rewind-start-line:before { content: "\f4ab"; }
|
||||||
|
.ri-rewind-start-mini-fill:before { content: "\f4ac"; }
|
||||||
|
.ri-rewind-start-mini-line:before { content: "\f4ad"; }
|
||||||
|
.ri-scroll-to-bottom-fill:before { content: "\f4ae"; }
|
||||||
|
.ri-scroll-to-bottom-line:before { content: "\f4af"; }
|
||||||
|
.ri-add-large-fill:before { content: "\f4b0"; }
|
||||||
|
.ri-add-large-line:before { content: "\f4b1"; }
|
||||||
|
.ri-aed-electrodes-fill:before { content: "\f4b2"; }
|
||||||
|
.ri-aed-electrodes-line:before { content: "\f4b3"; }
|
||||||
|
.ri-aed-fill:before { content: "\f4b4"; }
|
||||||
|
.ri-aed-line:before { content: "\f4b5"; }
|
||||||
|
.ri-alibaba-cloud-fill:before { content: "\f4b6"; }
|
||||||
|
.ri-alibaba-cloud-line:before { content: "\f4b7"; }
|
||||||
|
.ri-align-item-bottom-fill:before { content: "\f4b8"; }
|
||||||
|
.ri-align-item-bottom-line:before { content: "\f4b9"; }
|
||||||
|
.ri-align-item-horizontal-center-fill:before { content: "\f4ba"; }
|
||||||
|
.ri-align-item-horizontal-center-line:before { content: "\f4bb"; }
|
||||||
|
.ri-align-item-left-fill:before { content: "\f4bc"; }
|
||||||
|
.ri-align-item-left-line:before { content: "\f4bd"; }
|
||||||
|
.ri-align-item-right-fill:before { content: "\f4be"; }
|
||||||
|
.ri-align-item-right-line:before { content: "\f4bf"; }
|
||||||
|
.ri-align-item-top-fill:before { content: "\f4c0"; }
|
||||||
|
.ri-align-item-top-line:before { content: "\f4c1"; }
|
||||||
|
.ri-align-item-vertical-center-fill:before { content: "\f4c2"; }
|
||||||
|
.ri-align-item-vertical-center-line:before { content: "\f4c3"; }
|
||||||
|
.ri-apps-2-add-fill:before { content: "\f4c4"; }
|
||||||
|
.ri-apps-2-add-line:before { content: "\f4c5"; }
|
||||||
|
.ri-close-large-fill:before { content: "\f4c6"; }
|
||||||
|
.ri-close-large-line:before { content: "\f4c7"; }
|
||||||
|
.ri-collapse-diagonal-2-fill:before { content: "\f4c8"; }
|
||||||
|
.ri-collapse-diagonal-2-line:before { content: "\f4c9"; }
|
||||||
|
.ri-collapse-diagonal-fill:before { content: "\f4ca"; }
|
||||||
|
.ri-collapse-diagonal-line:before { content: "\f4cb"; }
|
||||||
|
.ri-dashboard-horizontal-fill:before { content: "\f4cc"; }
|
||||||
|
.ri-dashboard-horizontal-line:before { content: "\f4cd"; }
|
||||||
|
.ri-expand-diagonal-2-fill:before { content: "\f4ce"; }
|
||||||
|
.ri-expand-diagonal-2-line:before { content: "\f4cf"; }
|
||||||
|
.ri-expand-diagonal-fill:before { content: "\f4d0"; }
|
||||||
|
.ri-expand-diagonal-line:before { content: "\f4d1"; }
|
||||||
|
.ri-firebase-fill:before { content: "\f4d2"; }
|
||||||
|
.ri-firebase-line:before { content: "\f4d3"; }
|
||||||
|
.ri-flip-horizontal-2-fill:before { content: "\f4d4"; }
|
||||||
|
.ri-flip-horizontal-2-line:before { content: "\f4d5"; }
|
||||||
|
.ri-flip-horizontal-fill:before { content: "\f4d6"; }
|
||||||
|
.ri-flip-horizontal-line:before { content: "\f4d7"; }
|
||||||
|
.ri-flip-vertical-2-fill:before { content: "\f4d8"; }
|
||||||
|
.ri-flip-vertical-2-line:before { content: "\f4d9"; }
|
||||||
|
.ri-flip-vertical-fill:before { content: "\f4da"; }
|
||||||
|
.ri-flip-vertical-line:before { content: "\f4db"; }
|
||||||
|
.ri-formula:before { content: "\f4dc"; }
|
||||||
|
.ri-function-add-fill:before { content: "\f4dd"; }
|
||||||
|
.ri-function-add-line:before { content: "\f4de"; }
|
||||||
|
.ri-goblet-2-fill:before { content: "\f4df"; }
|
||||||
|
.ri-goblet-2-line:before { content: "\f4e0"; }
|
||||||
|
.ri-golf-ball-fill:before { content: "\f4e1"; }
|
||||||
|
.ri-golf-ball-line:before { content: "\f4e2"; }
|
||||||
|
.ri-group-3-fill:before { content: "\f4e3"; }
|
||||||
|
.ri-group-3-line:before { content: "\f4e4"; }
|
||||||
|
.ri-heart-add-2-fill:before { content: "\f4e5"; }
|
||||||
|
.ri-heart-add-2-line:before { content: "\f4e6"; }
|
||||||
|
.ri-id-card-fill:before { content: "\f4e7"; }
|
||||||
|
.ri-id-card-line:before { content: "\f4e8"; }
|
||||||
|
.ri-information-off-fill:before { content: "\f4e9"; }
|
||||||
|
.ri-information-off-line:before { content: "\f4ea"; }
|
||||||
|
.ri-java-fill:before { content: "\f4eb"; }
|
||||||
|
.ri-java-line:before { content: "\f4ec"; }
|
||||||
|
.ri-layout-grid-2-fill:before { content: "\f4ed"; }
|
||||||
|
.ri-layout-grid-2-line:before { content: "\f4ee"; }
|
||||||
|
.ri-layout-horizontal-fill:before { content: "\f4ef"; }
|
||||||
|
.ri-layout-horizontal-line:before { content: "\f4f0"; }
|
||||||
|
.ri-layout-vertical-fill:before { content: "\f4f1"; }
|
||||||
|
.ri-layout-vertical-line:before { content: "\f4f2"; }
|
||||||
|
.ri-menu-fold-2-fill:before { content: "\f4f3"; }
|
||||||
|
.ri-menu-fold-2-line:before { content: "\f4f4"; }
|
||||||
|
.ri-menu-fold-3-fill:before { content: "\f4f5"; }
|
||||||
|
.ri-menu-fold-3-line:before { content: "\f4f6"; }
|
||||||
|
.ri-menu-fold-4-fill:before { content: "\f4f7"; }
|
||||||
|
.ri-menu-fold-4-line:before { content: "\f4f8"; }
|
||||||
|
.ri-menu-unfold-2-fill:before { content: "\f4f9"; }
|
||||||
|
.ri-menu-unfold-2-line:before { content: "\f4fa"; }
|
||||||
|
.ri-menu-unfold-3-fill:before { content: "\f4fb"; }
|
||||||
|
.ri-menu-unfold-3-line:before { content: "\f4fc"; }
|
||||||
|
.ri-menu-unfold-4-fill:before { content: "\f4fd"; }
|
||||||
|
.ri-menu-unfold-4-line:before { content: "\f4fe"; }
|
||||||
|
.ri-mobile-download-fill:before { content: "\f4ff"; }
|
||||||
|
.ri-mobile-download-line:before { content: "\f500"; }
|
||||||
|
.ri-nextjs-fill:before { content: "\f501"; }
|
||||||
|
.ri-nextjs-line:before { content: "\f502"; }
|
||||||
|
.ri-nodejs-fill:before { content: "\f503"; }
|
||||||
|
.ri-nodejs-line:before { content: "\f504"; }
|
||||||
|
.ri-pause-large-fill:before { content: "\f505"; }
|
||||||
|
.ri-pause-large-line:before { content: "\f506"; }
|
||||||
|
.ri-play-large-fill:before { content: "\f507"; }
|
||||||
|
.ri-play-large-line:before { content: "\f508"; }
|
||||||
|
.ri-play-reverse-large-fill:before { content: "\f509"; }
|
||||||
|
.ri-play-reverse-large-line:before { content: "\f50a"; }
|
||||||
|
.ri-police-badge-fill:before { content: "\f50b"; }
|
||||||
|
.ri-police-badge-line:before { content: "\f50c"; }
|
||||||
|
.ri-prohibited-2-fill:before { content: "\f50d"; }
|
||||||
|
.ri-prohibited-2-line:before { content: "\f50e"; }
|
||||||
|
.ri-shopping-bag-4-fill:before { content: "\f50f"; }
|
||||||
|
.ri-shopping-bag-4-line:before { content: "\f510"; }
|
||||||
|
.ri-snowflake-fill:before { content: "\f511"; }
|
||||||
|
.ri-snowflake-line:before { content: "\f512"; }
|
||||||
|
.ri-square-root:before { content: "\f513"; }
|
||||||
|
.ri-stop-large-fill:before { content: "\f514"; }
|
||||||
|
.ri-stop-large-line:before { content: "\f515"; }
|
||||||
|
.ri-tailwind-css-fill:before { content: "\f516"; }
|
||||||
|
.ri-tailwind-css-line:before { content: "\f517"; }
|
||||||
|
.ri-tooth-fill:before { content: "\f518"; }
|
||||||
|
.ri-tooth-line:before { content: "\f519"; }
|
||||||
|
.ri-video-off-fill:before { content: "\f51a"; }
|
||||||
|
.ri-video-off-line:before { content: "\f51b"; }
|
||||||
|
.ri-video-on-fill:before { content: "\f51c"; }
|
||||||
|
.ri-video-on-line:before { content: "\f51d"; }
|
||||||
|
.ri-webhook-fill:before { content: "\f51e"; }
|
||||||
|
.ri-webhook-line:before { content: "\f51f"; }
|
||||||
|
.ri-weight-fill:before { content: "\f520"; }
|
||||||
|
.ri-weight-line:before { content: "\f521"; }
|
||||||
|
.ri-book-shelf-fill:before { content: "\f522"; }
|
||||||
|
.ri-book-shelf-line:before { content: "\f523"; }
|
||||||
|
.ri-brain-2-fill:before { content: "\f524"; }
|
||||||
|
.ri-brain-2-line:before { content: "\f525"; }
|
||||||
|
.ri-chat-search-fill:before { content: "\f526"; }
|
||||||
|
.ri-chat-search-line:before { content: "\f527"; }
|
||||||
|
.ri-chat-unread-fill:before { content: "\f528"; }
|
||||||
|
.ri-chat-unread-line:before { content: "\f529"; }
|
||||||
|
.ri-collapse-horizontal-fill:before { content: "\f52a"; }
|
||||||
|
.ri-collapse-horizontal-line:before { content: "\f52b"; }
|
||||||
|
.ri-collapse-vertical-fill:before { content: "\f52c"; }
|
||||||
|
.ri-collapse-vertical-line:before { content: "\f52d"; }
|
||||||
|
.ri-dna-fill:before { content: "\f52e"; }
|
||||||
|
.ri-dna-line:before { content: "\f52f"; }
|
||||||
|
.ri-dropper-fill:before { content: "\f530"; }
|
||||||
|
.ri-dropper-line:before { content: "\f531"; }
|
||||||
|
.ri-expand-diagonal-s-2-fill:before { content: "\f532"; }
|
||||||
|
.ri-expand-diagonal-s-2-line:before { content: "\f533"; }
|
||||||
|
.ri-expand-diagonal-s-fill:before { content: "\f534"; }
|
||||||
|
.ri-expand-diagonal-s-line:before { content: "\f535"; }
|
||||||
|
.ri-expand-horizontal-fill:before { content: "\f536"; }
|
||||||
|
.ri-expand-horizontal-line:before { content: "\f537"; }
|
||||||
|
.ri-expand-horizontal-s-fill:before { content: "\f538"; }
|
||||||
|
.ri-expand-horizontal-s-line:before { content: "\f539"; }
|
||||||
|
.ri-expand-vertical-fill:before { content: "\f53a"; }
|
||||||
|
.ri-expand-vertical-line:before { content: "\f53b"; }
|
||||||
|
.ri-expand-vertical-s-fill:before { content: "\f53c"; }
|
||||||
|
.ri-expand-vertical-s-line:before { content: "\f53d"; }
|
||||||
|
.ri-gemini-fill:before { content: "\f53e"; }
|
||||||
|
.ri-gemini-line:before { content: "\f53f"; }
|
||||||
|
.ri-reset-left-fill:before { content: "\f540"; }
|
||||||
|
.ri-reset-left-line:before { content: "\f541"; }
|
||||||
|
.ri-reset-right-fill:before { content: "\f542"; }
|
||||||
|
.ri-reset-right-line:before { content: "\f543"; }
|
||||||
|
.ri-stairs-fill:before { content: "\f544"; }
|
||||||
|
.ri-stairs-line:before { content: "\f545"; }
|
||||||
|
.ri-telegram-2-fill:before { content: "\f546"; }
|
||||||
|
.ri-telegram-2-line:before { content: "\f547"; }
|
||||||
|
.ri-triangular-flag-fill:before { content: "\f548"; }
|
||||||
|
.ri-triangular-flag-line:before { content: "\f549"; }
|
||||||
|
.ri-user-minus-fill:before { content: "\f54a"; }
|
||||||
|
.ri-user-minus-line:before { content: "\f54b"; }
|
||||||
|
.ri-account-box-2-fill:before { content: "\f54c"; }
|
||||||
|
.ri-account-box-2-line:before { content: "\f54d"; }
|
||||||
|
.ri-account-circle-2-fill:before { content: "\f54e"; }
|
||||||
|
.ri-account-circle-2-line:before { content: "\f54f"; }
|
||||||
|
.ri-alarm-snooze-fill:before { content: "\f550"; }
|
||||||
|
.ri-alarm-snooze-line:before { content: "\f551"; }
|
||||||
|
.ri-arrow-down-box-fill:before { content: "\f552"; }
|
||||||
|
.ri-arrow-down-box-line:before { content: "\f553"; }
|
||||||
|
.ri-arrow-left-box-fill:before { content: "\f554"; }
|
||||||
|
.ri-arrow-left-box-line:before { content: "\f555"; }
|
||||||
|
.ri-arrow-left-down-box-fill:before { content: "\f556"; }
|
||||||
|
.ri-arrow-left-down-box-line:before { content: "\f557"; }
|
||||||
|
.ri-arrow-left-up-box-fill:before { content: "\f558"; }
|
||||||
|
.ri-arrow-left-up-box-line:before { content: "\f559"; }
|
||||||
|
.ri-arrow-right-box-fill:before { content: "\f55a"; }
|
||||||
|
.ri-arrow-right-box-line:before { content: "\f55b"; }
|
||||||
|
.ri-arrow-right-down-box-fill:before { content: "\f55c"; }
|
||||||
|
.ri-arrow-right-down-box-line:before { content: "\f55d"; }
|
||||||
|
.ri-arrow-right-up-box-fill:before { content: "\f55e"; }
|
||||||
|
.ri-arrow-right-up-box-line:before { content: "\f55f"; }
|
||||||
|
.ri-arrow-up-box-fill:before { content: "\f560"; }
|
||||||
|
.ri-arrow-up-box-line:before { content: "\f561"; }
|
||||||
|
.ri-bar-chart-box-ai-fill:before { content: "\f562"; }
|
||||||
|
.ri-bar-chart-box-ai-line:before { content: "\f563"; }
|
||||||
|
.ri-brush-ai-fill:before { content: "\f564"; }
|
||||||
|
.ri-brush-ai-line:before { content: "\f565"; }
|
||||||
|
.ri-camera-ai-fill:before { content: "\f566"; }
|
||||||
|
.ri-camera-ai-line:before { content: "\f567"; }
|
||||||
|
.ri-chat-ai-fill:before { content: "\f568"; }
|
||||||
|
.ri-chat-ai-line:before { content: "\f569"; }
|
||||||
|
.ri-chat-smile-ai-fill:before { content: "\f56a"; }
|
||||||
|
.ri-chat-smile-ai-line:before { content: "\f56b"; }
|
||||||
|
.ri-chat-voice-ai-fill:before { content: "\f56c"; }
|
||||||
|
.ri-chat-voice-ai-line:before { content: "\f56d"; }
|
||||||
|
.ri-code-ai-fill:before { content: "\f56e"; }
|
||||||
|
.ri-code-ai-line:before { content: "\f56f"; }
|
||||||
|
.ri-color-filter-ai-fill:before { content: "\f570"; }
|
||||||
|
.ri-color-filter-ai-line:before { content: "\f571"; }
|
||||||
|
.ri-custom-size:before { content: "\f572"; }
|
||||||
|
.ri-fediverse-fill:before { content: "\f573"; }
|
||||||
|
.ri-fediverse-line:before { content: "\f574"; }
|
||||||
|
.ri-flag-off-fill:before { content: "\f575"; }
|
||||||
|
.ri-flag-off-line:before { content: "\f576"; }
|
||||||
|
.ri-home-9-fill:before { content: "\f577"; }
|
||||||
|
.ri-home-9-line:before { content: "\f578"; }
|
||||||
|
.ri-image-ai-fill:before { content: "\f579"; }
|
||||||
|
.ri-image-ai-line:before { content: "\f57a"; }
|
||||||
|
.ri-image-circle-ai-fill:before { content: "\f57b"; }
|
||||||
|
.ri-image-circle-ai-line:before { content: "\f57c"; }
|
||||||
|
.ri-info-card-fill:before { content: "\f57d"; }
|
||||||
|
.ri-info-card-line:before { content: "\f57e"; }
|
||||||
|
.ri-landscape-ai-fill:before { content: "\f57f"; }
|
||||||
|
.ri-landscape-ai-line:before { content: "\f580"; }
|
||||||
|
.ri-letter-spacing-2:before { content: "\f581"; }
|
||||||
|
.ri-line-height-2:before { content: "\f582"; }
|
||||||
|
.ri-mail-ai-fill:before { content: "\f583"; }
|
||||||
|
.ri-mail-ai-line:before { content: "\f584"; }
|
||||||
|
.ri-mic-2-ai-fill:before { content: "\f585"; }
|
||||||
|
.ri-mic-2-ai-line:before { content: "\f586"; }
|
||||||
|
.ri-mic-ai-fill:before { content: "\f587"; }
|
||||||
|
.ri-mic-ai-line:before { content: "\f588"; }
|
||||||
|
.ri-movie-ai-fill:before { content: "\f589"; }
|
||||||
|
.ri-movie-ai-line:before { content: "\f58a"; }
|
||||||
|
.ri-music-ai-fill:before { content: "\f58b"; }
|
||||||
|
.ri-music-ai-line:before { content: "\f58c"; }
|
||||||
|
.ri-notification-snooze-fill:before { content: "\f58d"; }
|
||||||
|
.ri-notification-snooze-line:before { content: "\f58e"; }
|
||||||
|
.ri-php-fill:before { content: "\f58f"; }
|
||||||
|
.ri-php-line:before { content: "\f590"; }
|
||||||
|
.ri-pix-fill:before { content: "\f591"; }
|
||||||
|
.ri-pix-line:before { content: "\f592"; }
|
||||||
|
.ri-pulse-ai-fill:before { content: "\f593"; }
|
||||||
|
.ri-pulse-ai-line:before { content: "\f594"; }
|
||||||
|
.ri-quill-pen-ai-fill:before { content: "\f595"; }
|
||||||
|
.ri-quill-pen-ai-line:before { content: "\f596"; }
|
||||||
|
.ri-speak-ai-fill:before { content: "\f597"; }
|
||||||
|
.ri-speak-ai-line:before { content: "\f598"; }
|
||||||
|
.ri-star-off-fill:before { content: "\f599"; }
|
||||||
|
.ri-star-off-line:before { content: "\f59a"; }
|
||||||
|
.ri-translate-ai-2:before { content: "\f59b"; }
|
||||||
|
.ri-translate-ai:before { content: "\f59c"; }
|
||||||
|
.ri-user-community-fill:before { content: "\f59d"; }
|
||||||
|
.ri-user-community-line:before { content: "\f59e"; }
|
||||||
|
.ri-vercel-fill:before { content: "\f59f"; }
|
||||||
|
.ri-vercel-line:before { content: "\f5a0"; }
|
||||||
|
.ri-video-ai-fill:before { content: "\f5a1"; }
|
||||||
|
.ri-video-ai-line:before { content: "\f5a2"; }
|
||||||
|
.ri-video-on-ai-fill:before { content: "\f5a3"; }
|
||||||
|
.ri-video-on-ai-line:before { content: "\f5a4"; }
|
||||||
|
.ri-voice-ai-fill:before { content: "\f5a5"; }
|
||||||
|
.ri-voice-ai-line:before { content: "\f5a6"; }
|
||||||
|
.ri-ai-generate-2:before { content: "\f5a7"; }
|
||||||
|
.ri-ai-generate-text:before { content: "\f5a8"; }
|
||||||
|
.ri-anthropic-fill:before { content: "\f5a9"; }
|
||||||
|
.ri-anthropic-line:before { content: "\f5aa"; }
|
||||||
|
.ri-apps-2-ai-fill:before { content: "\f5ab"; }
|
||||||
|
.ri-apps-2-ai-line:before { content: "\f5ac"; }
|
||||||
|
.ri-camera-lens-ai-fill:before { content: "\f5ad"; }
|
||||||
|
.ri-camera-lens-ai-line:before { content: "\f5ae"; }
|
||||||
|
.ri-clapperboard-ai-fill:before { content: "\f5af"; }
|
||||||
|
.ri-clapperboard-ai-line:before { content: "\f5b0"; }
|
||||||
|
.ri-claude-fill:before { content: "\f5b1"; }
|
||||||
|
.ri-claude-line:before { content: "\f5b2"; }
|
||||||
|
.ri-closed-captioning-ai-fill:before { content: "\f5b3"; }
|
||||||
|
.ri-closed-captioning-ai-line:before { content: "\f5b4"; }
|
||||||
|
.ri-dvd-ai-fill:before { content: "\f5b5"; }
|
||||||
|
.ri-dvd-ai-line:before { content: "\f5b6"; }
|
||||||
|
.ri-film-ai-fill:before { content: "\f5b7"; }
|
||||||
|
.ri-film-ai-line:before { content: "\f5b8"; }
|
||||||
|
.ri-font-size-ai:before { content: "\f5b9"; }
|
||||||
|
.ri-mixtral-fill:before { content: "\f5ba"; }
|
||||||
|
.ri-mixtral-line:before { content: "\f5bb"; }
|
||||||
|
.ri-movie-2-ai-fill:before { content: "\f5bc"; }
|
||||||
|
.ri-movie-2-ai-line:before { content: "\f5bd"; }
|
||||||
|
.ri-mv-ai-fill:before { content: "\f5be"; }
|
||||||
|
.ri-mv-ai-line:before { content: "\f5bf"; }
|
||||||
|
.ri-perplexity-fill:before { content: "\f5c0"; }
|
||||||
|
.ri-perplexity-line:before { content: "\f5c1"; }
|
||||||
|
.ri-poker-clubs-fill:before { content: "\f5c2"; }
|
||||||
|
.ri-poker-clubs-line:before { content: "\f5c3"; }
|
||||||
|
.ri-poker-diamonds-fill:before { content: "\f5c4"; }
|
||||||
|
.ri-poker-diamonds-line:before { content: "\f5c5"; }
|
||||||
|
.ri-poker-hearts-fill:before { content: "\f5c6"; }
|
||||||
|
.ri-poker-hearts-line:before { content: "\f5c7"; }
|
||||||
|
.ri-poker-spades-fill:before { content: "\f5c8"; }
|
||||||
|
.ri-poker-spades-line:before { content: "\f5c9"; }
|
||||||
|
.ri-safe-3-fill:before { content: "\f5ca"; }
|
||||||
|
.ri-safe-3-line:before { content: "\f5cb"; }
|
||||||
|
.ri-accessibility-fill:before { content: "\f5cc"; }
|
||||||
|
.ri-accessibility-line:before { content: "\f5cd"; }
|
||||||
|
.ri-alarm-add-fill:before { content: "\f5ce"; }
|
||||||
|
.ri-alarm-add-line:before { content: "\f5cf"; }
|
||||||
|
.ri-arrow-down-long-fill:before { content: "\f5d0"; }
|
||||||
|
.ri-arrow-down-long-line:before { content: "\f5d1"; }
|
||||||
|
.ri-arrow-left-down-long-fill:before { content: "\f5d2"; }
|
||||||
|
.ri-arrow-left-down-long-line:before { content: "\f5d3"; }
|
||||||
|
.ri-arrow-left-long-fill:before { content: "\f5d4"; }
|
||||||
|
.ri-arrow-left-long-line:before { content: "\f5d5"; }
|
||||||
|
.ri-arrow-left-up-long-fill:before { content: "\f5d6"; }
|
||||||
|
.ri-arrow-left-up-long-line:before { content: "\f5d7"; }
|
||||||
|
.ri-arrow-right-down-long-fill:before { content: "\f5d8"; }
|
||||||
|
.ri-arrow-right-down-long-line:before { content: "\f5d9"; }
|
||||||
|
.ri-arrow-right-long-fill:before { content: "\f5da"; }
|
||||||
|
.ri-arrow-right-long-line:before { content: "\f5db"; }
|
||||||
|
.ri-arrow-right-up-long-fill:before { content: "\f5dc"; }
|
||||||
|
.ri-arrow-right-up-long-line:before { content: "\f5dd"; }
|
||||||
|
.ri-arrow-up-long-fill:before { content: "\f5de"; }
|
||||||
|
.ri-arrow-up-long-line:before { content: "\f5df"; }
|
||||||
|
.ri-chess-fill:before { content: "\f5e0"; }
|
||||||
|
.ri-chess-line:before { content: "\f5e1"; }
|
||||||
|
.ri-diamond-fill:before { content: "\f5e2"; }
|
||||||
|
.ri-diamond-line:before { content: "\f5e3"; }
|
||||||
|
.ri-diamond-ring-fill:before { content: "\f5e4"; }
|
||||||
|
.ri-diamond-ring-line:before { content: "\f5e5"; }
|
||||||
|
.ri-figma-fill:before { content: "\f5e6"; }
|
||||||
|
.ri-figma-line:before { content: "\f5e7"; }
|
||||||
|
.ri-firefox-browser-fill:before { content: "\f5e8"; }
|
||||||
|
.ri-firefox-browser-line:before { content: "\f5e9"; }
|
||||||
|
.ri-jewelry-fill:before { content: "\f5ea"; }
|
||||||
|
.ri-jewelry-line:before { content: "\f5eb"; }
|
||||||
|
.ri-multi-image-fill:before { content: "\f5ec"; }
|
||||||
|
.ri-multi-image-line:before { content: "\f5ed"; }
|
||||||
|
.ri-no-credit-card-fill:before { content: "\f5ee"; }
|
||||||
|
.ri-no-credit-card-line:before { content: "\f5ef"; }
|
||||||
|
.ri-service-bell-fill:before { content: "\f5f0"; }
|
||||||
|
.ri-service-bell-line:before { content: "\f5f1"; }
|
||||||
|
.ri-ai-agent-fill:before { content: "\f5f2"; }
|
||||||
|
.ri-ai-agent-line:before { content: "\f5f3"; }
|
||||||
|
.ri-ai-generate-2-fill:before { content: "\f5f4"; }
|
||||||
|
.ri-ai-generate-2-line:before { content: "\f5f5"; }
|
||||||
|
.ri-ai-generate-3d-fill:before { content: "\f5f6"; }
|
||||||
|
.ri-ai-generate-3d-line:before { content: "\f5f7"; }
|
||||||
|
.ri-ai:before { content: "\f5f8"; }
|
||||||
|
.ri-apps-ai-fill:before { content: "\f5f9"; }
|
||||||
|
.ri-apps-ai-line:before { content: "\f5fa"; }
|
||||||
|
.ri-atom-fill:before { content: "\f5fb"; }
|
||||||
|
.ri-atom-line:before { content: "\f5fc"; }
|
||||||
|
.ri-book-ai-fill:before { content: "\f5fd"; }
|
||||||
|
.ri-book-ai-line:before { content: "\f5fe"; }
|
||||||
|
.ri-brain-3-fill:before { content: "\f5ff"; }
|
||||||
|
.ri-brain-3-line:before { content: "\f600"; }
|
||||||
|
.ri-brain-ai-3-fill:before { content: "\f601"; }
|
||||||
|
.ri-brain-ai-3-line:before { content: "\f602"; }
|
||||||
|
.ri-brush-ai-3-fill:before { content: "\f603"; }
|
||||||
|
.ri-brush-ai-3-line:before { content: "\f604"; }
|
||||||
|
.ri-camera-4-fill:before { content: "\f605"; }
|
||||||
|
.ri-camera-4-line:before { content: "\f606"; }
|
||||||
|
.ri-camera-ai-2-fill:before { content: "\f607"; }
|
||||||
|
.ri-camera-ai-2-line:before { content: "\f608"; }
|
||||||
|
.ri-chat-ai-2-fill:before { content: "\f609"; }
|
||||||
|
.ri-chat-ai-2-line:before { content: "\f60a"; }
|
||||||
|
.ri-chat-ai-3-fill:before { content: "\f60b"; }
|
||||||
|
.ri-chat-ai-3-line:before { content: "\f60c"; }
|
||||||
|
.ri-chat-ai-4-fill:before { content: "\f60d"; }
|
||||||
|
.ri-chat-ai-4-line:before { content: "\f60e"; }
|
||||||
|
.ri-chat-smile-ai-3-fill:before { content: "\f60f"; }
|
||||||
|
.ri-chat-smile-ai-3-line:before { content: "\f610"; }
|
||||||
|
.ri-deepseek-fill:before { content: "\f611"; }
|
||||||
|
.ri-deepseek-line:before { content: "\f612"; }
|
||||||
|
.ri-file-ai-2-fill:before { content: "\f613"; }
|
||||||
|
.ri-file-ai-2-line:before { content: "\f614"; }
|
||||||
|
.ri-file-ai-fill:before { content: "\f615"; }
|
||||||
|
.ri-file-ai-line:before { content: "\f616"; }
|
||||||
|
.ri-function-ai-fill:before { content: "\f617"; }
|
||||||
|
.ri-function-ai-line:before { content: "\f618"; }
|
||||||
|
.ri-game-2-fill:before { content: "\f619"; }
|
||||||
|
.ri-game-2-line:before { content: "\f61a"; }
|
||||||
|
.ri-goblet-broken-fill:before { content: "\f61b"; }
|
||||||
|
.ri-goblet-broken-line:before { content: "\f61c"; }
|
||||||
|
.ri-lightbulb-ai-fill:before { content: "\f61d"; }
|
||||||
|
.ri-lightbulb-ai-line:before { content: "\f61e"; }
|
||||||
|
.ri-loop-left-ai-fill:before { content: "\f61f"; }
|
||||||
|
.ri-loop-left-ai-line:before { content: "\f620"; }
|
||||||
|
.ri-loop-right-ai-fill:before { content: "\f621"; }
|
||||||
|
.ri-loop-right-ai-line:before { content: "\f622"; }
|
||||||
|
.ri-message-ai-3-fill:before { content: "\f623"; }
|
||||||
|
.ri-message-ai-3-line:before { content: "\f624"; }
|
||||||
|
.ri-painting-ai-fill:before { content: "\f625"; }
|
||||||
|
.ri-painting-ai-line:before { content: "\f626"; }
|
||||||
|
.ri-painting-fill:before { content: "\f627"; }
|
||||||
|
.ri-painting-line:before { content: "\f628"; }
|
||||||
|
.ri-pencil-ai-2-fill:before { content: "\f629"; }
|
||||||
|
.ri-pencil-ai-2-line:before { content: "\f62a"; }
|
||||||
|
.ri-pencil-ai-fill:before { content: "\f62b"; }
|
||||||
|
.ri-pencil-ai-line:before { content: "\f62c"; }
|
||||||
|
.ri-remix-fill:before { content: "\f62d"; }
|
||||||
|
.ri-remix-line:before { content: "\f62e"; }
|
||||||
|
.ri-search-ai-2-fill:before { content: "\f62f"; }
|
||||||
|
.ri-search-ai-2-line:before { content: "\f630"; }
|
||||||
|
.ri-search-ai-3-fill:before { content: "\f631"; }
|
||||||
|
.ri-search-ai-3-line:before { content: "\f632"; }
|
||||||
|
.ri-search-ai-4-fill:before { content: "\f633"; }
|
||||||
|
.ri-search-ai-4-line:before { content: "\f634"; }
|
||||||
|
.ri-search-ai-fill:before { content: "\f635"; }
|
||||||
|
.ri-search-ai-line:before { content: "\f636"; }
|
||||||
|
.ri-speech-to-text-fill:before { content: "\f637"; }
|
||||||
|
.ri-speech-to-text-line:before { content: "\f638"; }
|
||||||
|
.ri-target-fill:before { content: "\f639"; }
|
||||||
|
.ri-target-line:before { content: "\f63a"; }
|
||||||
|
.ri-text-to-speech-fill:before { content: "\f63b"; }
|
||||||
|
.ri-text-to-speech-line:before { content: "\f63c"; }
|
||||||
|
.ri-wrench-fill:before { content: "\f63d"; }
|
||||||
|
.ri-wrench-line:before { content: "\f63e"; }
|
||||||
|
.ri-area-chart-fill:before { content: "\f63f"; }
|
||||||
|
.ri-area-chart-line:before { content: "\f640"; }
|
||||||
|
.ri-baseball-fill:before { content: "\f641"; }
|
||||||
|
.ri-baseball-line:before { content: "\f642"; }
|
||||||
|
.ri-binoculars-fill:before { content: "\f643"; }
|
||||||
|
.ri-binoculars-line:before { content: "\f644"; }
|
||||||
|
.ri-cursor-hand:before { content: "\f645"; }
|
||||||
|
.ri-emotion-add-fill:before { content: "\f646"; }
|
||||||
|
.ri-emotion-add-line:before { content: "\f647"; }
|
||||||
|
.ri-file-scan-fill:before { content: "\f648"; }
|
||||||
|
.ri-file-scan-line:before { content: "\f649"; }
|
||||||
|
.ri-fiverr-fill:before { content: "\f64a"; }
|
||||||
|
.ri-fiverr-line:before { content: "\f64b"; }
|
||||||
|
.ri-font-serif:before { content: "\f64c"; }
|
||||||
|
.ri-ghost-3-fill:before { content: "\f64d"; }
|
||||||
|
.ri-ghost-3-line:before { content: "\f64e"; }
|
||||||
|
.ri-gitee-fill:before { content: "\f64f"; }
|
||||||
|
.ri-gitee-line:before { content: "\f650"; }
|
||||||
|
.ri-global-off-fill:before { content: "\f651"; }
|
||||||
|
.ri-global-off-line:before { content: "\f652"; }
|
||||||
|
.ri-image-download-fill:before { content: "\f653"; }
|
||||||
|
.ri-image-download-line:before { content: "\f654"; }
|
||||||
|
.ri-image-upload-fill:before { content: "\f655"; }
|
||||||
|
.ri-image-upload-line:before { content: "\f656"; }
|
||||||
|
.ri-issues-fill:before { content: "\f657"; }
|
||||||
|
.ri-issues-line:before { content: "\f658"; }
|
||||||
|
.ri-issues-reopen-fill:before { content: "\f659"; }
|
||||||
|
.ri-issues-reopen-line:before { content: "\f65a"; }
|
||||||
|
.ri-network-error-fill:before { content: "\f65b"; }
|
||||||
|
.ri-network-error-line:before { content: "\f65c"; }
|
||||||
|
.ri-network-fill:before { content: "\f65d"; }
|
||||||
|
.ri-network-line:before { content: "\f65e"; }
|
||||||
|
.ri-network-off-fill:before { content: "\f65f"; }
|
||||||
|
.ri-network-off-line:before { content: "\f660"; }
|
||||||
|
.ri-piano-fill:before { content: "\f661"; }
|
||||||
|
.ri-piano-grand-fill:before { content: "\f662"; }
|
||||||
|
.ri-piano-grand-line:before { content: "\f663"; }
|
||||||
|
.ri-piano-line:before { content: "\f664"; }
|
||||||
|
.ri-plug-3-fill:before { content: "\f665"; }
|
||||||
|
.ri-plug-3-line:before { content: "\f666"; }
|
||||||
|
.ri-send-ins-fill:before { content: "\f667"; }
|
||||||
|
.ri-send-ins-line:before { content: "\f668"; }
|
||||||
|
.ri-signal-cellular-1-fill:before { content: "\f669"; }
|
||||||
|
.ri-signal-cellular-1-line:before { content: "\f66a"; }
|
||||||
|
.ri-signal-cellular-2-fill:before { content: "\f66b"; }
|
||||||
|
.ri-signal-cellular-2-line:before { content: "\f66c"; }
|
||||||
|
.ri-signal-cellular-3-fill:before { content: "\f66d"; }
|
||||||
|
.ri-signal-cellular-3-line:before { content: "\f66e"; }
|
||||||
|
.ri-signal-cellular-off-fill:before { content: "\f66f"; }
|
||||||
|
.ri-signal-cellular-off-line:before { content: "\f670"; }
|
||||||
|
.ri-stacked-chart-fill:before { content: "\f671"; }
|
||||||
|
.ri-stacked-chart-line:before { content: "\f672"; }
|
||||||
|
.ri-upwork-fill:before { content: "\f673"; }
|
||||||
|
.ri-upwork-line:before { content: "\f674"; }
|
||||||
|
|
||||||
|
|||||||
Regular → Executable
BIN
Binary file not shown.
Regular → Executable
BIN
Binary file not shown.
Regular → Executable
BIN
Binary file not shown.
@@ -1 +1,74 @@
|
|||||||
@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}#nprogress{pointer-events:none}#nprogress .bar{background:#172eff;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #29d,0 0 5px #29d;opacity:1;-webkit-transform:rotate(3deg) translate(0,-4px);-ms-transform:rotate(3deg) translate(0,-4px);transform:rotate(3deg) translate(0,-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:solid 2px transparent;border-top-color:#29d;border-left-color:#29d;border-radius:50%;-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}
|
@-webkit-keyframes nprogress-spinner {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
-webkit-transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes nprogress-spinner {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#nprogress {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nprogress .bar {
|
||||||
|
background: #22bb6d; /* ? 修改后的横条颜色 */
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1031;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nprogress .peg {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
width: 100px;
|
||||||
|
height: 100%;
|
||||||
|
box-shadow: 0 0 10px #22bb6d, 0 0 5px #22bb6d;
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotate(3deg) translate(0, -4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ? 修改 Spinner -> 使用自定义图片且居中 */
|
||||||
|
#nprogress .spinner {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1031;
|
||||||
|
top: 15px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ? 不再使用旋转圆形，换成图片 */
|
||||||
|
#nprogress .spinner-icon {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url("/themes/theme-pix/assets/img/loading.webp");
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nprogress-custom-parent {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nprogress-custom-parent #nprogress .bar,
|
||||||
|
.nprogress-custom-parent #nprogress .spinner {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|||||||
+20
-18
@@ -2433,17 +2433,19 @@ select.uk-form-width-xsmall {
|
|||||||
color: #666
|
color: #666
|
||||||
}
|
}
|
||||||
|
|
||||||
.uk-spinner>* {
|
.uk-spinner {
|
||||||
animation: uk-spinner-rotate 1.4s linear infinite
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
background-image: url("/themes/theme-pix/assets/img/loading.webp");
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uk-spinner>*>* {
|
/* 隐藏内部那个 svg */
|
||||||
stroke-dasharray: 88px;
|
.uk-spinner > svg {
|
||||||
stroke-dashoffset: 0;
|
display: none !important;
|
||||||
transform-origin: center;
|
|
||||||
animation: uk-spinner-dash 1.4s ease-in-out infinite;
|
|
||||||
stroke-width: 1;
|
|
||||||
stroke-linecap: round
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.uk-totop {
|
.uk-totop {
|
||||||
@@ -3257,9 +3259,9 @@ iframe[uk-cover] {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: -270px;
|
left: -150px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 270px;
|
width: 150px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background: #222;
|
background: #222;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
@@ -3276,7 +3278,7 @@ iframe[uk-cover] {
|
|||||||
|
|
||||||
.uk-offcanvas-flip .uk-offcanvas-bar {
|
.uk-offcanvas-flip .uk-offcanvas-bar {
|
||||||
left: auto;
|
left: auto;
|
||||||
right: -270px
|
right: -150px
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width:640px) {
|
@media (min-width:640px) {
|
||||||
@@ -3318,7 +3320,7 @@ iframe[uk-cover] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.uk-open>.uk-offcanvas-reveal {
|
.uk-open>.uk-offcanvas-reveal {
|
||||||
width: 270px
|
width: 150px
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width:640px) {
|
@media (min-width:640px) {
|
||||||
@@ -3382,11 +3384,11 @@ iframe[uk-cover] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
:not(.uk-offcanvas-flip).uk-offcanvas-container-animation {
|
:not(.uk-offcanvas-flip).uk-offcanvas-container-animation {
|
||||||
left: 270px
|
left: 150px
|
||||||
}
|
}
|
||||||
|
|
||||||
.uk-offcanvas-flip.uk-offcanvas-container-animation {
|
.uk-offcanvas-flip.uk-offcanvas-container-animation {
|
||||||
left: -270px
|
left: -150px
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width:640px) {
|
@media (min-width:640px) {
|
||||||
@@ -3395,7 +3397,7 @@ iframe[uk-cover] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.uk-offcanvas-flip.uk-offcanvas-container-animation {
|
.uk-offcanvas-flip.uk-offcanvas-container-animation {
|
||||||
left: -350px
|
left: -200px
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -3439,7 +3441,7 @@ iframe[uk-cover] {
|
|||||||
left: 10px;
|
left: 10px;
|
||||||
z-index: 1040;
|
z-index: 1040;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 350px
|
width: 200px
|
||||||
}
|
}
|
||||||
|
|
||||||
.uk-notification-bottom-right,
|
.uk-notification-bottom-right,
|
||||||
@@ -3539,7 +3541,7 @@ iframe[uk-cover] {
|
|||||||
.uk-sortable-drag {
|
.uk-sortable-drag {
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
z-index: 1050 !important;
|
z-index: 1050 !important;
|
||||||
pointer-events: none
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.uk-sortable-placeholder {
|
.uk-sortable-placeholder {
|
||||||
|
|||||||
@@ -35,7 +35,7 @@
|
|||||||
</th:block>
|
</th:block>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div th:if="${posts.hasNext}" class="arc_pagenav">
|
<div th:if="${posts.hasNext}" class="arc_pagenav post-paging">
|
||||||
<a th:data="@{${posts.nextUrl}}" th:text="${theme.config.base_set.site_page}"></a>
|
<a th:data="@{${posts.nextUrl}}" th:text="${theme.config.base_set.site_page}"></a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,33 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns:th="https://www.thymeleaf.org"
|
||||||
|
th:replace="~{modules/layouts/layout :: layout(_head = null,_content = ~{::content},_title = ${douban != null and douban.spec != null ? douban.spec.name + ' - ' + site.title : title + ' - ' + site.title})}">
|
||||||
|
|
||||||
|
<th:block th:fragment="content">
|
||||||
|
|
||||||
|
<div class="page_main uk-width-2-3@m">
|
||||||
|
|
||||||
|
<th:block th:replace="~{modules/header}" />
|
||||||
|
|
||||||
|
<div id="pjax-container">
|
||||||
|
<div class="blog_list douban_page douban_detail_page">
|
||||||
|
<div class="blog_list_inner" uk-height-viewport="offset-top: true">
|
||||||
|
|
||||||
|
<div id="post_item" class="moment_list douban_list">
|
||||||
|
<th:block th:replace="~{macro/douban-item :: douban-item(${douban})}"></th:block>
|
||||||
|
<th:block th:if="${douban == null or douban.spec == null}">
|
||||||
|
<th:block th:replace="~{macro/tpl/content-none}" />
|
||||||
|
</th:block>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="comment_form_reset"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<th:block th:replace="~{modules/footer-main}" />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</th:block>
|
||||||
|
|
||||||
|
</html>
|
||||||
+73
-35
@@ -8,48 +8,86 @@
|
|||||||
|
|
||||||
<th:block th:replace="~{modules/header}" />
|
<th:block th:replace="~{modules/header}" />
|
||||||
|
|
||||||
<div id="pjax-container">
|
<div id="pjax-container" th:with="
|
||||||
|
page = ${#lists.isEmpty(param.page) or #strings.isEmpty(param.page[0]) ? 1 : param.page[0]},
|
||||||
|
selectedTag = ${#lists.isEmpty(param.tag) ? null : param.tag[0]},
|
||||||
|
doubanPage = ${doubanFinder.list(page, 10, selectedTag, null)}
|
||||||
|
">
|
||||||
|
|
||||||
<main id="primary" class="site-main">
|
<div class="blog_list douban_page">
|
||||||
|
<div class="blog_list_inner" uk-height-viewport="offset-top: true">
|
||||||
|
|
||||||
<div class="page_content" uk-height-viewport="offset-top: true">
|
<div class="friends_cat_nav douban_cat_nav">
|
||||||
|
<ul id="cat_nav_items">
|
||||||
|
<li>
|
||||||
|
<a th:attr="data-href=@{/books}"
|
||||||
|
th:classappend="${#strings.isEmpty(selectedTag) ? 'active' : ''}"
|
||||||
|
class="cat-link">
|
||||||
|
全部<span></span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li th:each="type : ${types}">
|
||||||
|
<a th:attr="data-href=@{/books(tag=${type.key})}"
|
||||||
|
th:classappend="${#strings.equals(selectedTag, type.key) ? 'active' : ''}"
|
||||||
|
class="cat-link">
|
||||||
|
<span th:text="${#strings.isEmpty(type.name) ? type.key : type.name}">类型</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="post_item" class="moment_list douban_list">
|
||||||
|
<th:block th:each="doubanItem : ${doubanPage.items}">
|
||||||
|
<th:block th:replace="~{macro/douban-item :: douban-item(${doubanItem})}"></th:block>
|
||||||
|
</th:block>
|
||||||
|
|
||||||
|
<th:block th:if="${#lists.isEmpty(doubanPage.items)}">
|
||||||
|
<th:block th:replace="~{macro/tpl/content-none}" />
|
||||||
|
</th:block>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<th:block th:if="${doubanPage.totalPages > 1}">
|
||||||
|
<div id="t_pagination">
|
||||||
|
<div class="post-paging" th:with="_page = ${doubanPage.page + 1}">
|
||||||
|
<a th:if="${doubanPage.hasNext() and #strings.isEmpty(selectedTag)}"
|
||||||
|
th:attr="data=@{/books(page=${_page})}"
|
||||||
|
th:text="${theme.config.base_set.site_page}"></a>
|
||||||
|
<a th:if="${doubanPage.hasNext() and not #strings.isEmpty(selectedTag)}"
|
||||||
|
th:attr="data=@{/books(tag=${selectedTag},page=${_page})}"
|
||||||
|
th:text="${theme.config.base_set.site_page}"></a>
|
||||||
|
<form class="page-jump-form" method="get" action="/books">
|
||||||
|
<span class="page-jump-label">转到</span>
|
||||||
|
<input th:if="${not #strings.isEmpty(selectedTag)}" type="hidden" name="tag"
|
||||||
|
th:value="${selectedTag}" />
|
||||||
|
<span class="page-jump-input-wrap">
|
||||||
|
<button class="page-jump-step page-jump-step-down" type="button"
|
||||||
|
title="减少页码" aria-label="减少页码">
|
||||||
|
<i class="ri-subtract-line" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
<input class="page-jump-input" type="number" name="page" min="1"
|
||||||
|
th:max="${doubanPage.totalPages}" th:value="${doubanPage.page}"
|
||||||
|
inputmode="numeric" aria-label="页码" autocomplete="off" required />
|
||||||
|
<button class="page-jump-step page-jump-step-up" type="button"
|
||||||
|
title="增加页码" aria-label="增加页码">
|
||||||
|
<i class="ri-add-line" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
<span class="page-jump-total">/ [[${doubanPage.totalPages}]]</span>
|
||||||
|
<button class="page-jump-submit" type="submit" title="跳转到指定页"
|
||||||
|
aria-label="跳转到指定页">
|
||||||
|
<i class="ri-arrow-right-line" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
<article class="post-276 page type-page status-publish hentry">
|
|
||||||
<header class="entry-header">
|
|
||||||
<div class="left">
|
|
||||||
<i class="ri-focus-2-line"></i>
|
|
||||||
<h1 class="entry-title" th:text="${title}"></h1>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="entry-content single-content">
|
|
||||||
<section class="db--container">
|
|
||||||
<nav class="db--nav">
|
|
||||||
<div th:each="type : ${types}" class="db--navItem JiEun"
|
|
||||||
th:classappend="${type.key == 'movie' ? 'current' : ''}"
|
|
||||||
th:data-type="${type.key}" th:text="${type.key}"></div>
|
|
||||||
</nav>
|
|
||||||
<div class="db--genres"></div>
|
|
||||||
<div class="db--type">
|
|
||||||
<div class="db--typeItem" data-status="mark">想看</div>
|
|
||||||
<div class="db--typeItem" data-status="doing">在看</div>
|
|
||||||
<div class="db--typeItem is-active" data-status="done">看过</div>
|
|
||||||
</div>
|
|
||||||
<div class="db--list db--list__card" data-type="movie">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="block-more block-more__centered">
|
|
||||||
<div class="lds-ripple u-hide">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</th:block>
|
||||||
|
|
||||||
|
<div id="comment_form_reset"></div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</main>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,39 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns:th="https://www.thymeleaf.org"
|
||||||
|
th:replace="~{modules/layouts/layout :: layout(_head = null,_content = ~{::content},_title = ${title + ' - ' + site.title})}">
|
||||||
|
|
||||||
|
<th:block th:fragment="content">
|
||||||
|
|
||||||
|
<div class="page_main uk-width-2-3@m">
|
||||||
|
|
||||||
|
<th:block th:replace="~{modules/header}" />
|
||||||
|
|
||||||
|
<div id="pjax-container" th:with="
|
||||||
|
page = ${#lists.isEmpty(param.page) or #strings.isEmpty(param.page[0]) ? 1 : param.page[0]},
|
||||||
|
selectedTag = ${#lists.isEmpty(param.tag) ? null : param.tag[0]},
|
||||||
|
equipmentGroups = ${groups},
|
||||||
|
pageSize = ${equipments.size}
|
||||||
|
">
|
||||||
|
|
||||||
|
<!-- 未筛选时直接查询全部装备。 -->
|
||||||
|
<th:block th:if="${#strings.isEmpty(selectedTag)}"
|
||||||
|
th:with="equipmentPage = ${equipmentFinder.list(page, pageSize)}">
|
||||||
|
<th:block th:replace="~{macro/equipment :: equipment-page(${equipmentPage},${equipmentGroups},${selectedTag})}"></th:block>
|
||||||
|
</th:block>
|
||||||
|
|
||||||
|
<!-- URL 中的 tag 使用分组 displayName，Finder 查询使用分组 metadata.name。 -->
|
||||||
|
<th:block th:unless="${#strings.isEmpty(selectedTag)}" th:each="group : ${equipmentGroups}">
|
||||||
|
<th:block th:if="${#strings.equals(selectedTag, group.spec.displayName) or #strings.equals(selectedTag, group.metadata.name)}"
|
||||||
|
th:with="equipmentPage = ${equipmentFinder.list(page, pageSize, group.metadata.name)}">
|
||||||
|
<th:block th:replace="~{macro/equipment :: equipment-page(${equipmentPage},${equipmentGroups},${selectedTag})}"></th:block>
|
||||||
|
</th:block>
|
||||||
|
</th:block>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<th:block th:replace="~{modules/footer-main}" />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</th:block>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -15,7 +15,7 @@
|
|||||||
<div class="nodata_main" uk-height-viewport="offset-top: true" >
|
<div class="nodata_main" uk-height-viewport="offset-top: true" >
|
||||||
<section class="error-404 not-found">
|
<section class="error-404 not-found">
|
||||||
<div class="page-content no_resault">
|
<div class="page-content no_resault">
|
||||||
<img src="/themes/theme-pix/assets/img/404.png">
|
<img src="/themes/theme-pix/assets/img/not-found.webp">
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,100 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html xmlns:th="https://www.thymeleaf.org"
|
||||||
|
th:replace="~{modules/layouts/layout :: layout(_head = null,_content = ~{::content},_title = ${title + ' - ' + site.title})}">
|
||||||
|
|
||||||
|
<th:block th:fragment="content">
|
||||||
|
|
||||||
|
<div class="page_main uk-width-2-3@m">
|
||||||
|
|
||||||
|
<th:block th:replace="~{modules/header}" />
|
||||||
|
|
||||||
|
<div id="pjax-container">
|
||||||
|
|
||||||
|
<div class="blog_list">
|
||||||
|
<div class="blog_list_inner" uk-height-viewport="offset-top: true">
|
||||||
|
|
||||||
|
<div id="post_item" class="moment_list">
|
||||||
|
<!-- 作者姓名不为空才渲染朋友圈动态 -->
|
||||||
|
<div th:id="${'post-'+friend.metadata.name}"
|
||||||
|
class="loop_content p_item moment_item uk-animation-slide-bottom-small"
|
||||||
|
th:if="${friend.spec != null and not #strings.isEmpty(friend.spec.author)}"
|
||||||
|
th:with="postInfo = ${friend}, spec = ${friend.spec}">
|
||||||
|
|
||||||
|
<div class="p_item_inner">
|
||||||
|
|
||||||
|
<div class="list_user_meta">
|
||||||
|
<div class="avatar">
|
||||||
|
<img th:src="@{${spec.logo}}">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="name">
|
||||||
|
<div class="avatar_title">
|
||||||
|
<a target="_blank" th:href="${spec.authorUrl}">
|
||||||
|
[[${spec.author}]]
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<time itemprop="datePublished"
|
||||||
|
th:datetime="${#dates.format(spec.pubDate, 'yyyy-MM-dd HH:mm')}">
|
||||||
|
<th:block th:replace="~{modules/widgets/time :: time(${spec.pubDate})}">
|
||||||
|
</th:block>
|
||||||
|
</time>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="blog_content">
|
||||||
|
<div class="entry-content">
|
||||||
|
<div class="p_title moment-collapse-container">
|
||||||
|
<a th:if="${not #strings.isEmpty(spec.postLink)}"
|
||||||
|
target="_blank" th:href="${spec.postLink}">
|
||||||
|
<div th:utext="${spec.description ?: '无内容'}"></div>
|
||||||
|
</a>
|
||||||
|
<div th:unless="${not #strings.isEmpty(spec.postLink)}"
|
||||||
|
th:utext="${spec.description ?: '无内容'}"></div>
|
||||||
|
</div>
|
||||||
|
<div class="img_list img-dynamic-container">
|
||||||
|
<div class="list_inner"
|
||||||
|
th:with="imgRaw=${spec.imageFiles},isImgList=${not #strings.isEmpty(imgRaw)}"
|
||||||
|
th:attr="num=${isImgList ? #arrays.length(imgRaw.split(',')) : 0}">
|
||||||
|
<th:block th:if="${isImgList}">
|
||||||
|
<th:block th:with="imgArray=${imgRaw.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>
|
||||||
|
|
||||||
|
<!-- 作者姓名为空：只展示404图片 -->
|
||||||
|
<div th:if="${friend.spec == null or #strings.isEmpty(friend.spec.author)}" style="text-align:center;padding:80px 0;">
|
||||||
|
<img src="/themes/theme-pix/assets/img/not-found.webp"style="max-width:400px;width:100%;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="comment_form_reset"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<th:block th:replace="~{modules/footer-main}" />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</th:block>
|
||||||
|
|
||||||
|
</html>
|
||||||
Regular → Executable
+100
-21
@@ -1,74 +1,153 @@
|
|||||||
<!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">
|
||||||
|
|
||||||
<div class="page_main uk-width-2-3@m">
|
<div class="page_main uk-width-2-3@m">
|
||||||
|
|
||||||
<th:block th:replace="~{modules/header}"/>
|
<th:block th:replace="~{modules/header}" />
|
||||||
|
|
||||||
<div id="pjax-container">
|
<div id="pjax-container" th:with="
|
||||||
|
selectedTag = ${#lists.isEmpty(param.tag) ? null : param.tag[0]},
|
||||||
|
friendPage = ${friends}
|
||||||
|
">
|
||||||
|
|
||||||
<div class="blog_list">
|
<div class="blog_list">
|
||||||
<div class="blog_list_inner" uk-height-viewport="offset-top: true">
|
<div class="blog_list_inner" uk-height-viewport="offset-top: true">
|
||||||
|
|
||||||
|
<!-- 作者姓名导航栏（参照图库风格新增） -->
|
||||||
|
<div class="friends_cat_nav">
|
||||||
|
<ul id="cat_nav_items">
|
||||||
|
<li>
|
||||||
|
<!-- 全部按钮 -->
|
||||||
|
<a th:attr="data-href=@{/friends}"
|
||||||
|
th:classappend="${#strings.isEmpty(selectedTag) ? 'active' : ''}" class="cat-link">
|
||||||
|
全部<span></span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<!-- 遍历所有作者 -->
|
||||||
|
<th:block th:each="authorLink : ${authors}">
|
||||||
|
<li>
|
||||||
|
<a th:attr="data-href=@{/friends(tag=${authorLink.spec.displayName})}"
|
||||||
|
th:classappend="${#strings.equals(selectedTag, authorLink.spec.displayName) ? 'active' : ''}"
|
||||||
|
th:text="${authorLink.spec.displayName}" class="cat-link">
|
||||||
|
<span></span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</th:block>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="post_item" class="moment_list">
|
<div id="post_item" class="moment_list">
|
||||||
|
|
||||||
<div th:each="postInfo, iterstat: ${friends.items}" th:id="${'post-'+postInfo.metadata.name}"
|
<div th:each="postInfo, iterstat: ${friendPage.items}" 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:if="${postInfo.spec != null and not #strings.isEmpty(postInfo.spec.description)}"
|
||||||
|
th:with="spec = ${postInfo.spec}">
|
||||||
|
|
||||||
<div class="p_item_inner">
|
<div class="p_item_inner">
|
||||||
|
|
||||||
<div class="list_user_meta">
|
<div class="list_user_meta">
|
||||||
<div class="avatar">
|
<div class="avatar">
|
||||||
<img th:src="@{${spec.logo}}">
|
<img th:src="@{${spec.logo}}">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="name">
|
<div class="name">
|
||||||
<div class="avatar_title">
|
<div class="avatar_title">
|
||||||
<a target="_blank" th:href="${spec.authorUrl}">[[${spec.author}]]</a>
|
<a target="_blank" th:href="${spec.authorUrl}">
|
||||||
|
[[${spec.author}]]
|
||||||
|
</a>
|
||||||
</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:block th:replace="~{modules/widgets/time :: time(${spec.pubDate})}">
|
||||||
|
</th:block>
|
||||||
</time>
|
</time>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="blog_content">
|
<div class="blog_content">
|
||||||
<div class="entry-content">
|
<div class="entry-content">
|
||||||
<div class="p_title">
|
<div class="p_title moment-collapse-container">
|
||||||
<a target="_blank" th:href="${spec.postLink}"><i class="ri-at-line"></i>[[${spec.title}]]</a>
|
<a target="_blank" th:href="${spec.postLink}">
|
||||||
|
<div th:utext="${spec.description}"></div>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<th:block th:with="excerpt = ${#strings.length(spec.description) > 100 ? 100 : #strings.length(spec.description)}">
|
<!-- 图片列表 -->
|
||||||
<div class="t_content" th:text="${#strings.substring(spec.description,0,excerpt)+'...'}">
|
<div class="img_list img-dynamic-container">
|
||||||
|
<div class="list_inner"
|
||||||
|
th:with="imgRaw=${spec.imageFiles},isImgList=${not #strings.isEmpty(imgRaw)}"
|
||||||
|
th:attr="num=${isImgList ? #arrays.length(imgRaw.split(',')) : 0}">
|
||||||
|
<!-- 仅使用 imageFiles；字段缺失或为空时不显示图片 -->
|
||||||
|
<th:block th:if="${isImgList}">
|
||||||
|
<th:block th:with="imgArray=${imgRaw.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>
|
||||||
</th:block>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<th:block th:if="${#lists.isEmpty(friends.items)}">
|
<!-- 空数据 -->
|
||||||
<th:block th:replace="~{macro/tpl/content-none}"/>
|
<th:block th:if="${#lists.isEmpty(friendPage.items)}">
|
||||||
|
<th:block th:replace="~{macro/tpl/content-none}" />
|
||||||
</th:block>
|
</th:block>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<th:block th:if="${friends.totalPages>1}">
|
|
||||||
|
<!-- 分页：必须保持在 blog_list_inner 里面 -->
|
||||||
|
<th:block th:if="${friendPage.totalPages>1}">
|
||||||
<div id="t_pagination">
|
<div id="t_pagination">
|
||||||
<div class="post-paging" th:if="${friends.hasNext()}"
|
<div class="post-paging">
|
||||||
th:with="_page = ${friends.page+1}">
|
<a th:if="${friendPage.hasNext()}" th:data="${friendPage.nextUrl}"
|
||||||
<a th:data="${'/friends/page/'+_page+'?preview-theme=theme-pix'}" th:text="${theme.config.base_set.site_page}"></a>
|
th:text="${theme.config.base_set.site_page}"></a>
|
||||||
|
<form class="page-jump-form" method="get" action="/friends">
|
||||||
|
<span class="page-jump-label">转到</span>
|
||||||
|
<input th:if="${not #strings.isEmpty(selectedTag)}" type="hidden" name="tag"
|
||||||
|
th:value="${selectedTag}" />
|
||||||
|
<span class="page-jump-input-wrap">
|
||||||
|
<button class="page-jump-step page-jump-step-down" type="button"
|
||||||
|
title="减少页码" aria-label="减少页码"><i class="ri-subtract-line"
|
||||||
|
aria-hidden="true"></i></button>
|
||||||
|
<input class="page-jump-input" type="number" name="page" min="1"
|
||||||
|
th:max="${friendPage.totalPages}" th:value="${friendPage.page}"
|
||||||
|
inputmode="numeric" aria-label="页码" autocomplete="off" required />
|
||||||
|
<button class="page-jump-step page-jump-step-up" type="button"
|
||||||
|
title="增加页码" aria-label="增加页码"><i class="ri-add-line"
|
||||||
|
aria-hidden="true"></i></button>
|
||||||
|
</span>
|
||||||
|
<span class="page-jump-total">/ [[${friendPage.totalPages}]]</span>
|
||||||
|
<button class="page-jump-submit" type="submit" title="跳转到指定页"
|
||||||
|
aria-label="跳转到指定页"><i class="ri-arrow-right-line"></i></button>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</th:block>
|
</th:block>
|
||||||
|
|
||||||
<div id="comment_form_reset"></div>
|
<div id="comment_form_reset"></div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<th:block th:replace="~{modules/footer-main}"/>
|
<th:block th:replace="~{modules/footer-main}" />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</th:block>
|
</th:block>
|
||||||
|
|||||||
@@ -10,16 +10,20 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div id="pjax-container" th:with="page = ${#strings.isEmpty(param.page) ? 1 : param.page}">
|
<div id="pjax-container" th:with="
|
||||||
|
page = ${#lists.isEmpty(param.page) ? 1 : param.page[0]},
|
||||||
|
tag = ${#lists.isEmpty(param.tag) ? null : param.tag[0]}
|
||||||
|
">
|
||||||
|
|
||||||
<th:block th:if="${theme.config.style.home_post_type=='moment' && pluginFinder.available('PluginMoments')}">
|
<th:block th:if="${theme.config.style.home_post_type=='moment' && pluginFinder.available('PluginMoments')}"
|
||||||
|
th:with="momentPage = ${#strings.isEmpty(tag) ? momentFinder.list(page, site.post.postPageSize) : momentFinder.listByTag(page, site.post.postPageSize, tag)}">
|
||||||
<th:block
|
<th:block
|
||||||
th:replace="~{macro/home-moment :: home-moment(${momentFinder.list(page, site.post.postPageSize)},${momentFinder.listAllTags()})}">
|
th:replace="~{macro/home-moment :: home-moment(${momentPage},${momentFinder.listAllTags()},'/')}">
|
||||||
</th:block>
|
</th:block>
|
||||||
</th:block>
|
</th:block>
|
||||||
|
|
||||||
<th:block th:if="${theme.config.style.home_post_type=='post' || (not (theme.config.style.home_post_type=='moment' && pluginFinder.available('PluginMoments'))) }">
|
<th:block th:if="${theme.config.style.home_post_type=='post' || (not (theme.config.style.home_post_type=='moment' && pluginFinder.available('PluginMoments'))) }">
|
||||||
<th:block th:replace="~{macro/home-blog :: home-blog(${posts},'/')}"></th:block>
|
<th:block th:replace="~{macro/home-blog :: home-blog(${posts},'/',null,null)}"></th:block>
|
||||||
</th:block>
|
</th:block>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,63 @@
|
|||||||
|
<th:block th:fragment="douban-item(doubanItem)" th:if="${doubanItem != null and doubanItem.spec != null}"
|
||||||
|
th:with="spec = ${doubanItem.spec}, faves = ${doubanItem.faves}, score = ${faves == null ? spec.score : (not #strings.isEmpty(faves.score) ? faves.score : spec.score)}, isRead = ${faves != null and faves.status == 'done'}">
|
||||||
|
|
||||||
|
<div th:id="${'post-' + doubanItem.metadata.name}"
|
||||||
|
class="loop_content p_item moment_item douban_card_item uk-animation-slide-bottom-small">
|
||||||
|
|
||||||
|
<div class="p_item_inner douban_card_inner">
|
||||||
|
<div class="douban_text_col">
|
||||||
|
<div class="douban_title_row">
|
||||||
|
<a th:if="${isRead and not #strings.isEmpty(spec.link)}"
|
||||||
|
class="douban_title_text"
|
||||||
|
th:href="${spec.link}"
|
||||||
|
th:text="${spec.name}">
|
||||||
|
豆瓣条目
|
||||||
|
</a>
|
||||||
|
<span th:unless="${isRead and not #strings.isEmpty(spec.link)}"
|
||||||
|
class="douban_title_text douban_title_text_plain"
|
||||||
|
th:text="${spec.name}">
|
||||||
|
豆瓣条目
|
||||||
|
</span>
|
||||||
|
<a class="douban_detail_link"
|
||||||
|
th:href="${'/books/' + doubanItem.metadata.name}"
|
||||||
|
aria-label="查看详情" title="查看详情">
|
||||||
|
详情
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="douban_media_col">
|
||||||
|
<span class="fancybox"
|
||||||
|
th:href="${#strings.isEmpty(spec.poster) ? '/themes/theme-pix/assets/img/banner-all.webp' : spec.poster}"
|
||||||
|
th:data-fancybox="${'douban-' + doubanItem.metadata.name}">
|
||||||
|
<img class="douban_poster_img"
|
||||||
|
th:src="${#strings.isEmpty(spec.poster) ? '/themes/theme-pix/assets/img/banner-all.webp' : spec.poster}"
|
||||||
|
th:alt="${spec.name}">
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="douban_sub_meta">
|
||||||
|
<time class="douban_time_text"
|
||||||
|
th:if="${faves != null and faves.createTime != null}"
|
||||||
|
th:datetime="${#dates.format(faves.createTime, 'yyyy-MM-dd HH:mm')}">
|
||||||
|
<span th:text="${#dates.format(faves.createTime, 'yyyy-MM-dd')}">2025-01-01</span>
|
||||||
|
</time>
|
||||||
|
<span class="douban_type_badge" th:text="${spec.type}">类型</span>
|
||||||
|
<span class="douban_score_badge"
|
||||||
|
th:if="${not #strings.isEmpty(score)}"
|
||||||
|
th:text="|${score}分|">评分</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="douban_content_box">
|
||||||
|
<p class="douban_content_main"
|
||||||
|
th:text="${#strings.isEmpty(spec.cardSubtitle) ? '暂无简介' : spec.cardSubtitle}">
|
||||||
|
暂无简介
|
||||||
|
</p>
|
||||||
|
<p class="douban_content_meta">
|
||||||
|
<span th:if="${not #strings.isEmpty(spec.year)}" th:text="${spec.year}"></span>
|
||||||
|
<span th:if="${not #strings.isEmpty(spec.pubdate)}" th:text="${spec.pubdate}"></span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</th:block>
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
<th:block th:fragment="equipment-page(equipmentPage,equipmentGroups,selectedTag)">
|
||||||
|
|
||||||
|
<div class="blog_list equipments_page">
|
||||||
|
<div class="blog_list_inner" uk-height-viewport="offset-top: true">
|
||||||
|
|
||||||
|
<div class="friends_cat_nav equipments_cat_nav">
|
||||||
|
<ul id="cat_nav_items">
|
||||||
|
<li>
|
||||||
|
<a th:attr="data-href=@{/equipments}"
|
||||||
|
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})}"
|
||||||
|
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>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="post_item" class="moment_list equipment_list">
|
||||||
|
<article th:each="equipment : ${equipmentPage.items}"
|
||||||
|
class="loop_content p_item moment_item equipment_item uk-animation-slide-bottom-small"
|
||||||
|
th:if="${equipment.spec != null and not #strings.isEmpty(equipment.spec.cover)}">
|
||||||
|
|
||||||
|
<div class="p_item_inner equipment_card_inner">
|
||||||
|
<div class="equipment_visual">
|
||||||
|
<img loading="lazy" th:src="${equipment.spec.cover}"
|
||||||
|
th:alt="${equipment.spec.description}">
|
||||||
|
<span class="equipment_overlay"
|
||||||
|
th:if="${not #strings.isEmpty(equipment.spec.description)}">
|
||||||
|
<span class="equipment_description" th:text="${equipment.spec.description}">描述</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<th:block th:if="${#lists.isEmpty(equipmentPage.items)}">
|
||||||
|
<th:block th:replace="~{macro/tpl/content-none}" />
|
||||||
|
</th:block>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<th:block th:if="${equipmentPage.totalPages > 1}">
|
||||||
|
<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: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:text="${theme.config.base_set.site_page}"></a>
|
||||||
|
<form class="page-jump-form" method="get" action="/equipments">
|
||||||
|
<span class="page-jump-label">转到</span>
|
||||||
|
<input th:if="${not #strings.isEmpty(selectedTag)}" type="hidden" name="tag"
|
||||||
|
th:value="${selectedTag}" />
|
||||||
|
<span class="page-jump-input-wrap">
|
||||||
|
<button class="page-jump-step page-jump-step-down" type="button"
|
||||||
|
title="减少页码" aria-label="减少页码">
|
||||||
|
<i class="ri-subtract-line" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
<input class="page-jump-input" type="number" name="page" min="1"
|
||||||
|
th:max="${equipmentPage.totalPages}" th:value="${equipmentPage.page}"
|
||||||
|
inputmode="numeric" aria-label="页码" autocomplete="off" required />
|
||||||
|
<button class="page-jump-step page-jump-step-up" type="button"
|
||||||
|
title="增加页码" aria-label="增加页码">
|
||||||
|
<i class="ri-add-line" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
<span class="page-jump-total">/ [[${equipmentPage.totalPages}]]</span>
|
||||||
|
<button class="page-jump-submit" type="submit" title="跳转到指定页"
|
||||||
|
aria-label="跳转到指定页">
|
||||||
|
<i class="ri-arrow-right-line" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</th:block>
|
||||||
|
|
||||||
|
<div id="comment_form_reset"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</th:block>
|
||||||
@@ -1,22 +1,28 @@
|
|||||||
<th:block th:fragment="home-blog(_posts,path)">
|
<th:block th:fragment="home-blog(_posts,path,tag,selectedCategory)">
|
||||||
|
|
||||||
<div class="normal_list">
|
<div class="normal_list">
|
||||||
<div class="normal_list_inner" uk-height-viewport="offset-top: true">
|
<div class="normal_list_inner" uk-height-viewport="offset-top: true">
|
||||||
|
|
||||||
<div class="posts_cat_nav">
|
<div class="posts_cat_nav">
|
||||||
<ul id="cat_nav_items">
|
<ul id="cat_nav_items">
|
||||||
<li><a th:data="|${path}?preview-theme=theme-pix|" class="active">全部<span></span></a>
|
<li><a th:data="${path}" th:classappend="${#strings.isEmpty(tag) ? 'active' : ''}">全部<span></span></a>
|
||||||
</li>
|
</li>
|
||||||
<li th:if="${theme.config.post.post_nav == 'category'}" th:each="categoryItem,iStat : ${categoryFinder.listAll()}">
|
<li th:if="${theme.config.post.post_nav == 'category'}" th:each="categoryItem,iStat : ${categoryFinder.listAll()}">
|
||||||
<a th:data="|${categoryItem.status.permalink}?preview-theme=theme-pix|"
|
<a th:if="${path == '/archives'}" th:data="@{/archives(tag=${categoryItem.spec.displayName})}"
|
||||||
class="">[[${categoryItem.spec.displayName}]]<span></span></a>
|
th:classappend="${#strings.equals(tag, categoryItem.spec.displayName) or #strings.equals(selectedCategory, categoryItem.metadata.name) ? 'active' : ''}">[[${categoryItem.spec.displayName}]]<span></span></a>
|
||||||
|
<a th:unless="${path == '/archives'}" th:data="${categoryItem.status.permalink}"
|
||||||
|
th:classappend="${#strings.equals(tag, categoryItem.spec.displayName) or #strings.equals(selectedCategory, categoryItem.metadata.name) ? 'active' : ''}">[[${categoryItem.spec.displayName}]]<span></span></a>
|
||||||
</li>
|
</li>
|
||||||
<li th:if="${theme.config.post.post_nav == 'custom_category'}"
|
<li th:if="${theme.config.post.post_nav == 'custom_category'}"
|
||||||
th:each="category : ${theme.config.post.nav_category}">
|
th:each="category : ${theme.config.post.nav_category}">
|
||||||
<th:block th:with="categoryItem = ${categoryFinder.getByName(category)}">
|
<th:block th:with="categoryItem = ${categoryFinder.getByName(category)}">
|
||||||
<a th:if="${categoryItem!=null}"
|
<a th:if="${categoryItem!=null and path == '/archives'}"
|
||||||
th:data="|${categoryItem.status.permalink}?preview-theme=theme-pix|"
|
th:data="@{/archives(tag=${categoryItem.spec.displayName})}"
|
||||||
class="">[[${categoryItem.spec.displayName}]]<span></span>
|
th:classappend="${#strings.equals(tag, categoryItem.spec.displayName) or #strings.equals(selectedCategory, categoryItem.metadata.name) ? 'active' : ''}">[[${categoryItem.spec.displayName}]]<span></span>
|
||||||
|
</a>
|
||||||
|
<a th:if="${categoryItem!=null and path != '/archives'}"
|
||||||
|
th:data="${categoryItem.status.permalink}"
|
||||||
|
th:classappend="${#strings.equals(tag, categoryItem.spec.displayName) or #strings.equals(selectedCategory, categoryItem.metadata.name) ? 'active' : ''}">[[${categoryItem.spec.displayName}]]<span></span>
|
||||||
</a>
|
</a>
|
||||||
</th:block>
|
</th:block>
|
||||||
</li>
|
</li>
|
||||||
@@ -26,13 +32,39 @@
|
|||||||
<div id="post_item" class="norpost_list " th:with='postItems=${_posts.items}'
|
<div id="post_item" class="norpost_list " th:with='postItems=${_posts.items}'
|
||||||
th:classappend="${theme.config.post.post_list_type == 'grid' ? 'uk-grid-small uk-grid' : ''}">
|
th:classappend="${theme.config.post.post_list_type == 'grid' ? 'uk-grid-small uk-grid' : ''}">
|
||||||
<th:block th:replace="~{'macro/tpl/content-post'}"></th:block>
|
<th:block th:replace="~{'macro/tpl/content-post'}"></th:block>
|
||||||
|
<th:block th:if="${#lists.isEmpty(postItems)}">
|
||||||
|
<th:block th:replace="~{macro/tpl/content-none}"/>
|
||||||
|
</th:block>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<th:block th:if="${_posts.totalPages>1}">
|
<th:block th:if="${_posts.totalPages>1}">
|
||||||
<div id="pagination">
|
<div id="pagination">
|
||||||
<div class="post-paging" th:if="${_posts.hasNext()}"
|
<div class="post-paging"
|
||||||
th:with="_page = ${_posts.page+1},_path = ${path == '/archives' ? path+'?preview-theme=theme-pix&page='+_page : path +'page/'+_page+'?preview-theme=theme-pix' }">
|
th:with="_page = ${_posts.page+1},_path = ${path +'page/'+_page }">
|
||||||
<a th:data="${_path}" th:text="${theme.config.base_set.site_page}"></a>
|
<a th:if="${_posts.hasNext() and path == '/archives' and #strings.isEmpty(tag)}"
|
||||||
|
th:data="@{/archives(page=${_page})}" th:text="${theme.config.base_set.site_page}"></a>
|
||||||
|
<a th:if="${_posts.hasNext() and path == '/archives' and not #strings.isEmpty(tag)}"
|
||||||
|
th:data="@{/archives(tag=${tag},page=${_page})}" th:text="${theme.config.base_set.site_page}"></a>
|
||||||
|
<a th:if="${_posts.hasNext() and path != '/archives'}" th:data="${_path}"
|
||||||
|
th:text="${theme.config.base_set.site_page}"></a>
|
||||||
|
<form class="page-jump-form" method="get" th:action="@{${path}}">
|
||||||
|
<span class="page-jump-label">转到</span>
|
||||||
|
<input th:if="${not #strings.isEmpty(tag)}" type="hidden" name="tag" th:value="${tag}" />
|
||||||
|
<span class="page-jump-input-wrap">
|
||||||
|
<button class="page-jump-step page-jump-step-down" type="button"
|
||||||
|
title="减少页码" aria-label="减少页码"><i class="ri-subtract-line"
|
||||||
|
aria-hidden="true"></i></button>
|
||||||
|
<input class="page-jump-input" type="number" name="page" min="1"
|
||||||
|
th:max="${_posts.totalPages}" th:value="${_posts.page}"
|
||||||
|
inputmode="numeric" aria-label="页码" autocomplete="off" required />
|
||||||
|
<button class="page-jump-step page-jump-step-up" type="button"
|
||||||
|
title="增加页码" aria-label="增加页码"><i class="ri-add-line"
|
||||||
|
aria-hidden="true"></i></button>
|
||||||
|
</span>
|
||||||
|
<span class="page-jump-total">/ [[${_posts.totalPages}]]</span>
|
||||||
|
<button class="page-jump-submit" type="submit" title="跳转到指定页"
|
||||||
|
aria-label="跳转到指定页"><i class="ri-arrow-right-line"></i></button>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</th:block>
|
</th:block>
|
||||||
|
|||||||
@@ -1,14 +1,14 @@
|
|||||||
<th:block th:fragment="home-moment(_moments,tags)">
|
<th:block th:fragment="home-moment(_moments,tags,path)" th:with="_path = ${#strings.isEmpty(path) ? '/moments' : path}">
|
||||||
|
|
||||||
<div class="blog_list">
|
<div class="blog_list">
|
||||||
<div class="blog_list_inner" uk-height-viewport="offset-top: true">
|
<div class="blog_list_inner" uk-height-viewport="offset-top: true">
|
||||||
<div class="moment_cat_nav">
|
<div class="moment_cat_nav">
|
||||||
<ul id="cat_nav_items">
|
<ul id="cat_nav_items">
|
||||||
<li><a data="/moments?preview-theme=theme-pix" class="" th:classappend="${#lists.isEmpty(param.tag) ? 'active' : ''}"
|
<li><a th:data="@{${_path}}" class="" th:classappend="${#lists.isEmpty(param.tag) ? 'active' : ''}"
|
||||||
><span>全部</span></a>
|
><span>全部</span></a>
|
||||||
</li>
|
</li>
|
||||||
<li th:each="tag,iStat : ${tags}">
|
<li th:each="tag,iStat : ${tags}">
|
||||||
<a th:data="|/moments?preview-theme=theme-pix&tag=${tag.name}|" class=""
|
<a th:data="@{${_path}(tag=${tag.name})}" class=""
|
||||||
th:classappend="${#lists.contains(param.tag, tag.name) ? 'active' : ''}"
|
th:classappend="${#lists.contains(param.tag, tag.name) ? 'active' : ''}"
|
||||||
><span>[[${tag.name}]]</span></a>
|
><span>[[${tag.name}]]</span></a>
|
||||||
</li>
|
</li>
|
||||||
@@ -26,9 +26,32 @@
|
|||||||
</div>
|
</div>
|
||||||
<th:block th:if="${_moments.totalPages>1}">
|
<th:block th:if="${_moments.totalPages>1}">
|
||||||
<div id="t_pagination">
|
<div id="t_pagination">
|
||||||
<div class="post-paging" th:if="${_moments.hasNext()}"
|
<div class="post-paging"
|
||||||
th:with="tag = ${not #lists.isEmpty(param.tag) ? '?tag='+param.tag : ''},_page = ${_moments.page+1}">
|
th:with="tag = ${#lists.isEmpty(param.tag) ? null : param.tag[0]},_page = ${_moments.page+1}">
|
||||||
<a th:data="${'/moments/page/'+_page+tag+'?preview-theme=theme-pix'}" th:text="${theme.config.base_set.site_page}"></a>
|
<a th:if="${_moments.hasNext() and #strings.isEmpty(tag)}"
|
||||||
|
th:data="@{${_path}(page=${_page})}"
|
||||||
|
th:text="${theme.config.base_set.site_page}"></a>
|
||||||
|
<a th:if="${_moments.hasNext() and not #strings.isEmpty(tag)}"
|
||||||
|
th:data="@{${_path}(tag=${tag},page=${_page})}"
|
||||||
|
th:text="${theme.config.base_set.site_page}"></a>
|
||||||
|
<form class="page-jump-form" method="get" th:action="@{${_path}}">
|
||||||
|
<span class="page-jump-label">转到</span>
|
||||||
|
<input th:if="${not #strings.isEmpty(tag)}" type="hidden" name="tag" th:value="${tag}" />
|
||||||
|
<span class="page-jump-input-wrap">
|
||||||
|
<button class="page-jump-step page-jump-step-down" type="button"
|
||||||
|
title="减少页码" aria-label="减少页码"><i class="ri-subtract-line"
|
||||||
|
aria-hidden="true"></i></button>
|
||||||
|
<input class="page-jump-input" type="number" name="page" min="1"
|
||||||
|
th:max="${_moments.totalPages}" th:value="${_moments.page}"
|
||||||
|
inputmode="numeric" aria-label="页码" autocomplete="off" required />
|
||||||
|
<button class="page-jump-step page-jump-step-up" type="button"
|
||||||
|
title="增加页码" aria-label="增加页码"><i class="ri-add-line"
|
||||||
|
aria-hidden="true"></i></button>
|
||||||
|
</span>
|
||||||
|
<span class="page-jump-total">/ [[${_moments.totalPages}]]</span>
|
||||||
|
<button class="page-jump-submit" type="submit" title="跳转到指定页"
|
||||||
|
aria-label="跳转到指定页"><i class="ri-arrow-right-line"></i></button>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</th:block>
|
</th:block>
|
||||||
|
|||||||
@@ -0,0 +1,105 @@
|
|||||||
|
<th:block th:fragment="home-photos(photoPage,groups,tag,selectedGroup)">
|
||||||
|
<div class="normal_list">
|
||||||
|
<div class="normal_list_inner" uk-height-viewport="offset-top: true">
|
||||||
|
|
||||||
|
<!-- 分类导航 -->
|
||||||
|
<div class="photos_cat_nav">
|
||||||
|
<ul id="cat_nav_items">
|
||||||
|
<li>
|
||||||
|
<!-- 修改：href 改为 data-href，并添加一个通用 class 如 'cat-link' -->
|
||||||
|
<a th:attr="data-href=@{/photos}"
|
||||||
|
th:classappend="${#strings.isEmpty(tag) and #strings.isEmpty(selectedGroup) ? 'active' : ''}"
|
||||||
|
class="cat-link">
|
||||||
|
全部<span></span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<th:block th:each="photoGroup : ${groups}">
|
||||||
|
<li>
|
||||||
|
<!-- 修改：这里也改为 data-href -->
|
||||||
|
<a th:attr="data-href=@{/photos(tag=${photoGroup.spec.displayName})}"
|
||||||
|
th:classappend="${#strings.equals(tag, photoGroup.spec.displayName) or #strings.equals(selectedGroup, photoGroup.metadata.name) ? 'active' : ''}"
|
||||||
|
th:text="${photoGroup.spec.displayName}" class="cat-link">
|
||||||
|
<span></span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</th:block>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 相册列表 -->
|
||||||
|
<div id="photos_item" class="norpost_list">
|
||||||
|
<div th:unless="${#lists.isEmpty(photoPage.items)}" class="gallery-photos page">
|
||||||
|
|
||||||
|
<div th:each="photo : ${photoPage.items}" class="gallery-photo">
|
||||||
|
|
||||||
|
<th:block th:with="
|
||||||
|
img = ${!#strings.isEmpty(photo.spec.cover) ? photo.spec.cover : photo.spec.url},
|
||||||
|
isVideo = ${#strings.endsWith(img, '.mp4') or #strings.endsWith(img, '.webm') or #strings.endsWith(img, '.ogg')}
|
||||||
|
">
|
||||||
|
|
||||||
|
<span th:if="${isVideo}" th:href="${img}" data-fancybox="gallery"
|
||||||
|
class="fancybox video-fancybox"
|
||||||
|
style="position: relative; display: block; cursor: pointer;">
|
||||||
|
<video class="photo-img" preload="metadata" muted playsinline>
|
||||||
|
<source th:src="${img}" th:type="${#strings.endsWith(img, '.mp4') ? 'video/mp4' :
|
||||||
|
(#strings.endsWith(img, '.webm') ? 'video/webm' : 'video/ogg')}" />
|
||||||
|
</video>
|
||||||
|
<div
|
||||||
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;">
|
||||||
|
<i class="ri-play-circle-line play-icon"
|
||||||
|
style="color: #41b87e; font-size: 40px; background-color: rgba(255, 255, 255, 0.8); border-radius: 50%;"></i>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span th:unless="${isVideo}" th:href="${img}" data-fancybox="gallery"
|
||||||
|
class="fancybox" th:data-thumb="${img}"
|
||||||
|
style="position: relative; display: block;">
|
||||||
|
<img class="photo-img" loading="lazy" th:src="${img}" />
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</th:block>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 空数据 -->
|
||||||
|
<th:block th:if="${#lists.isEmpty(photoPage.items)}">
|
||||||
|
<th:block th:replace="~{macro/tpl/content-none}" />
|
||||||
|
</th:block>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<th:block th:if="${photoPage.hasPrevious()} or ${photoPage.hasNext()}">
|
||||||
|
<div id="p_pagination">
|
||||||
|
<div class="post-paging"
|
||||||
|
th:with="_page = ${photoPage.page+1}">
|
||||||
|
<a th:if="${photoPage.hasNext() and #strings.isEmpty(tag)}"
|
||||||
|
th:data="@{/photos(page=${_page})}"
|
||||||
|
th:text="${theme.config.base_set.site_page}"></a>
|
||||||
|
<a th:if="${photoPage.hasNext() and not #strings.isEmpty(tag)}"
|
||||||
|
th:data="@{/photos(tag=${tag},page=${_page})}"
|
||||||
|
th:text="${theme.config.base_set.site_page}"></a>
|
||||||
|
<form class="page-jump-form" method="get" action="/photos">
|
||||||
|
<span class="page-jump-label">转到</span>
|
||||||
|
<input th:if="${not #strings.isEmpty(tag)}" type="hidden" name="tag" th:value="${tag}" />
|
||||||
|
<span class="page-jump-input-wrap">
|
||||||
|
<button class="page-jump-step page-jump-step-down" type="button"
|
||||||
|
title="减少页码" aria-label="减少页码"><i class="ri-subtract-line"
|
||||||
|
aria-hidden="true"></i></button>
|
||||||
|
<input class="page-jump-input" type="number" name="page" min="1"
|
||||||
|
th:max="${photoPage.totalPages}" th:value="${photoPage.page}"
|
||||||
|
inputmode="numeric" aria-label="页码" autocomplete="off" required />
|
||||||
|
<button class="page-jump-step page-jump-step-up" type="button"
|
||||||
|
title="增加页码" aria-label="增加页码"><i class="ri-add-line"
|
||||||
|
aria-hidden="true"></i></button>
|
||||||
|
</span>
|
||||||
|
<span class="page-jump-total">/ [[${photoPage.totalPages}]]</span>
|
||||||
|
<button class="page-jump-submit" type="submit" title="跳转到指定页"
|
||||||
|
aria-label="跳转到指定页"><i class="ri-arrow-right-line"></i></button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</th:block>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</th:block>
|
||||||
@@ -31,7 +31,7 @@
|
|||||||
<div class="post_footer_meta">
|
<div class="post_footer_meta">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<span class="post_views"><i class="ri-eye-line"></i>[[${post.stats.visit}]]</span>
|
<span class="post_views"><i class="ri-eye-line"></i>[[${post.stats.visit}]]</span>
|
||||||
<span class="comnum"><i class="ri-chat-4-line"></i><small>[[${post.stats.comment}]]</small></span>
|
<span class="comnum"><i class="ri-chat-4-line"></i>[[${post.stats.comment}]]</span>
|
||||||
<a class="up_like " data-action="up" data-key="post" th:data-id="${post.metadata.name}">
|
<a class="up_like " data-action="up" data-key="post" th:data-id="${post.metadata.name}">
|
||||||
<i class="ri-heart-2-line"></i>
|
<i class="ri-heart-2-line"></i>
|
||||||
<span>[[${post.stats.upvote}]]</span>
|
<span>[[${post.stats.upvote}]]</span>
|
||||||
|
|||||||
@@ -28,7 +28,7 @@
|
|||||||
[[${post.stats.visit}]]
|
[[${post.stats.visit}]]
|
||||||
</span>
|
</span>
|
||||||
<span class="comnum"><i class="ri-chat-4-line"></i>
|
<span class="comnum"><i class="ri-chat-4-line"></i>
|
||||||
<small> [[${post.stats.comment}]] </small>
|
<small>[[${post.stats.comment}]]</small>
|
||||||
</span>
|
</span>
|
||||||
<a class="up_like " data-action="up" data-key="post" th:data-id="${post.metadata.name}">
|
<a class="up_like " data-action="up" data-key="post" th:data-id="${post.metadata.name}">
|
||||||
<i class="ri-heart-2-line"></i>
|
<i class="ri-heart-2-line"></i>
|
||||||
|
|||||||
@@ -1,18 +1,19 @@
|
|||||||
<th:block th:fragment="content-moment(moments)">
|
<th:block th:fragment="content-moment(moments)">
|
||||||
|
|
||||||
<div th:each="moment,iStat : ${moments}" th:id="${'post-'+moment.metadata.name}"
|
<div th:each="moment,iStat : ${moments}" th:id="${'post-'+moment.metadata.name}"
|
||||||
class="loop_content p_item moment_item">
|
class="loop_content p_item moment_item">
|
||||||
<div class="p_item_inner">
|
<div class="p_item_inner">
|
||||||
|
<!-- 帖子控制按钮（编辑/删除） -->
|
||||||
<div th:if="${roleName == 'super-role' || moment.owner.name == user.name}" class="post_control">
|
<div th:if="${roleName == 'super-role' || moment.owner.name == user.name}" class="post_control">
|
||||||
<a class="post_control_btn"><i class="ri-menu-3-line"></i></a>
|
<a class="post_control_btn"><i class="ri-menu-3-line"></i></a>
|
||||||
<div class="post_control_box">
|
<div class="post_control_box">
|
||||||
<div class="post_control_list round8 shadow uk-animation-slide-bottom-small uk-animation-fast"
|
<div class="post_control_list round8 shadow uk-animation-slide-bottom-small uk-animation-fast"
|
||||||
th:pid="${moment.metadata.name}">
|
th:pid="${moment.metadata.name}">
|
||||||
<a class="control_edit_post control_type" uk-toggle="target: #create_post_box">编辑瞬间</a>
|
<a class="control_edit_post control_type" uk-toggle="target: #create_post_box">编辑瞬间</a>
|
||||||
<a class="control_delete_post control_type">删除瞬间</a>
|
<a class="control_delete_post control_type">删除瞬间</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 用户信息（头像/名称/时间） -->
|
||||||
<div class="list_user_meta">
|
<div class="list_user_meta">
|
||||||
<div class="avatar">
|
<div class="avatar">
|
||||||
<img th:src="@{${moment.owner.avatar}}">
|
<img th:src="@{${moment.owner.avatar}}">
|
||||||
@@ -20,55 +21,58 @@
|
|||||||
<div class="name">
|
<div class="name">
|
||||||
[[${moment.owner.displayName}]]
|
[[${moment.owner.displayName}]]
|
||||||
<time itemprop="datePublished"
|
<time itemprop="datePublished"
|
||||||
th:datetime="${#dates.format(moment.spec.releaseTime, 'yyyy-MM-dd HH:mm')}">
|
th:datetime="${#dates.format(moment.spec.releaseTime, 'yyyy-MM-dd HH:mm')}">
|
||||||
<th:block th:replace="~{modules/widgets/time :: time(${moment.spec.releaseTime})}"></th:block>
|
<th:block th:replace="~{modules/widgets/time :: time(${moment.spec.releaseTime})}"></th:block>
|
||||||
</time>
|
</time>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 内容区域 -->
|
||||||
<div class="blog_content">
|
<div class="blog_content">
|
||||||
<div class="entry-content" th:with="content=${moment.spec.content}">
|
<div class="entry-content" th:with="content=${moment.spec.content}">
|
||||||
<div class="p_title"></div>
|
<div class="p_title"></div>
|
||||||
<div class="t_content" th:utext="${content.html}">
|
<!-- 内容容器（仅新增moment-collapse-container类） -->
|
||||||
|
<div class="t_content moment-collapse-container" th:utext="${content.html}">
|
||||||
<th:block th:utext="${content.html}"></th:block>
|
<th:block th:utext="${content.html}"></th:block>
|
||||||
</div>
|
</div>
|
||||||
<th:block th:replace="~{'macro/tpl/moment-medium'}" />
|
<th:block th:replace="~{'macro/tpl/moment-medium'}" />
|
||||||
</div>
|
</div>
|
||||||
|
<!-- IP地址显示 -->
|
||||||
<span class="ip_loca" th:if="${not #strings.isEmpty(moment.metadata.annotations.mylocal)}">
|
<span class="ip_loca" th:if="${not #strings.isEmpty(moment.metadata.annotations.mylocal)}">
|
||||||
<i class="ri-map-pin-2-line"></i>
|
<i class="ri-map-pin-2-line"></i>
|
||||||
[[${moment.metadata.annotations.mylocal}]]
|
[[${moment.metadata.annotations.mylocal}]]
|
||||||
</span>
|
</span>
|
||||||
|
<!-- 底部操作栏 -->
|
||||||
<div class="entry-footer">
|
<div class="entry-footer">
|
||||||
<div class="post_footer_meta">
|
<div class="post_footer_meta">
|
||||||
|
<!-- 左侧（点赞/分享） -->
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<a class="up_like " data-action="up" data-key="moment" th:data-id="${moment.metadata.name}">
|
<a class="up_like " data-action="up" data-key="moment" th:data-id="${moment.metadata.name}">
|
||||||
<i class="ri-heart-2-line"></i>
|
<i class="ri-heart-2-line"></i>
|
||||||
<span th:text="${moment.stats.upvote}"></span>
|
<span th:text="${moment.stats.upvote}"></span>
|
||||||
</a>
|
</a>
|
||||||
<div class="pix_share_btn" th:with="_cover = ${not #strings.isEmpty(theme.config.moments.banner) ? theme.config.moments.banner : '/themes/theme-pix/assets/img/banner.jpg'}">
|
<div class="pix_share_btn"
|
||||||
<a class="pix_icon share_btn_icon cr_poster"
|
th:with="_cover = ${not #strings.isEmpty(theme.config.moments.banner) ? theme.config.moments.banner : '/themes/theme-pix/assets/img/banner-all.webp'}">
|
||||||
th:poster-data="${moment.metadata.name}"
|
<a class="pix_icon share_btn_icon cr_poster" th:poster-data="${moment.metadata.name}"
|
||||||
th:banner = "${_cover}"
|
th:banner="${_cover}" th:uk-toggle="|target: #share_modal_${moment.metadata.name}|"
|
||||||
th:uk-toggle="|target: #share_modal_${moment.metadata.name}|"
|
uk-tooltip="title: 瞬间分享; pos: top;" tabindex="0" title=""
|
||||||
uk-tooltip="title: 瞬间分享; pos: top;" tabindex="0" title=""
|
aria-describedby="uk-tooltip-250" aria-expanded="false"><i
|
||||||
aria-describedby="uk-tooltip-250" aria-expanded="false"><i
|
|
||||||
class="ri-share-forward-box-line"></i></a>
|
class="ri-share-forward-box-line"></i></a>
|
||||||
<div th:id="|share_modal_${moment.metadata.name}|" class="uk-flex-top poster_modal uk-modal"
|
<div th:id="|share_modal_${moment.metadata.name}|"
|
||||||
uk-modal>
|
class="uk-flex-top poster_modal uk-modal" uk-modal>
|
||||||
<div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
|
<div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
|
||||||
<button class="uk-modal-close-outside uk-icon uk-close"
|
<button class="uk-modal-close-outside uk-icon uk-close" type="button"
|
||||||
type="button" uk-close></button>
|
uk-close></button>
|
||||||
<div class="poster_box_ap"></div>
|
<div class="poster_box_ap"></div>
|
||||||
<div class="post_share_box hide">
|
<div class="post_share_box hide">
|
||||||
<a th:onclick="handleShare('wb','[(${_cover})]','[(${site.title+'-瞬间'})]','[(${'/moments/'+moment.metadata.name})]')"
|
<a th:onclick="handleShare('wb','[(${_cover})]','[(${site.title+'-瞬间'})]','[(${'/moments/'+moment.metadata.name})]')"
|
||||||
uk-tooltip="title: 微博分享; pos: top;" target="_blank">
|
uk-tooltip="title: 微博分享; pos: top;" target="_blank">
|
||||||
<i class="ri-weibo-line"></i></a>
|
<i class="ri-weibo-line"></i></a>
|
||||||
<a th:onclick="handleShare('qzone','[(${_cover})]','[(${site.title+'-瞬间'})]','[(${'/moments/'+moment.metadata.name})]')"
|
<a th:onclick="handleShare('qzone','[(${_cover})]','[(${site.title+'-瞬间'})]','[(${'/moments/'+moment.metadata.name})]')"
|
||||||
uk-tooltip="title: QQ分享; pos: top;" target="_blank">
|
uk-tooltip="title: QQ分享; pos: top;" target="_blank">
|
||||||
<i class="ri-chrome-line"></i>
|
<i class="ri-chrome-line"></i>
|
||||||
</a>
|
</a>
|
||||||
<a th:onclick="handleShare('qq','[(${_cover})]','[(${site.title+'-瞬间'})]','[(${'/moments/'+moment.metadata.name})]')"
|
<a th:onclick="handleShare('qq','[(${_cover})]','[(${site.title+'-瞬间'})]','[(${'/moments/'+moment.metadata.name})]')"
|
||||||
uk-tooltip="title: QQ好友分享; pos: top;" target="_blank">
|
uk-tooltip="title: QQ好友分享; pos: top;" target="_blank">
|
||||||
<i class="ri-qq-line"></i>
|
<i class="ri-qq-line"></i>
|
||||||
</a>
|
</a>
|
||||||
<a th:onclick="handleShare('copy','','','[(${'/moments/'+moment.metadata.name})]')"
|
<a th:onclick="handleShare('copy','','','[(${'/moments/'+moment.metadata.name})]')"
|
||||||
@@ -83,17 +87,26 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 右侧（评论数 + 新增标签显示） -->
|
||||||
<div class="right" th:if="${(not theme.config.com.com_close) && haloCommentEnabled}">
|
<div class="right" th:if="${(not theme.config.com.com_close) && haloCommentEnabled}">
|
||||||
|
<!-- 新增：标签显示（样式与分类一致） -->
|
||||||
|
<th:block th:if="${not #lists.isEmpty(moment.spec.tags)}">
|
||||||
|
<div class="normal_cat"># [[${moment.spec.tags[0]}]]</div>
|
||||||
|
</th:block>
|
||||||
|
<span class="moment_tag_gap"></span>
|
||||||
<span class="comnum show_comment" th:pid="${moment.metadata.name}"><i
|
<span class="comnum show_comment" th:pid="${moment.metadata.name}"><i
|
||||||
class="ri-message-3-line"></i>[[${moment.stats.totalComment}]]</span>
|
class="ri-message-3-line"></i>[[${moment.stats.totalComment}]]</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 评论区 -->
|
||||||
<div th:if="${(not theme.config.com.com_close) && haloCommentEnabled}" th:id="${'halo-comment-'+moment.metadata.name}" class="topic_comments_wrap" style="display: none">
|
<div th:if="${(not theme.config.com.com_close) && haloCommentEnabled}"
|
||||||
|
th:id="${'halo-comment-'+moment.metadata.name}" class="topic_comments_wrap" style="display: none">
|
||||||
<div class="topic_comments comments comments-area" data="moment">
|
<div class="topic_comments comments comments-area" data="moment">
|
||||||
<div class="toi_comments_main halo-comment">
|
<div class="toi_comments_main halo-comment">
|
||||||
<th:block th:replace="~{modules/widgets/halo-comment :: halo-comment(name=${moment.metadata.name},kind='Moment',group='moment.halo.run')}"></th:block>
|
<th:block
|
||||||
|
th:replace="~{modules/widgets/halo-comment :: halo-comment(name=${moment.metadata.name},kind='Moment',group='moment.halo.run')}">
|
||||||
|
</th:block>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<section class="no-results not-found">
|
<section class="no-results not-found">
|
||||||
<div class="page-content no_resault">
|
<div class="page-content no_resault">
|
||||||
<img src="/themes/theme-pix/assets/img/nodata.png">
|
<img src="/themes/theme-pix/assets/img/no-data.webp">
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -1,54 +1,52 @@
|
|||||||
<div th:id="${'post-'+post.metadata.name}"
|
<div th:id="${'post-'+post.metadata.name}"
|
||||||
class="loop_content p_item uk-animation-slide-bottom-small" th:classappend="${post.spec.pinned ? 'sticky' :''}">
|
class="loop_content p_item uk-animation-slide-bottom-small" th:classappend="${post.spec.pinned ? 'sticky' :''}">
|
||||||
<div class="normal_item_inner">
|
<div class="normal_item_inner">
|
||||||
<div class="normal_content">
|
<div class="normal_card_content">
|
||||||
<div class="entry-content">
|
<div class="feature round12">
|
||||||
<h2 class="entry-title"><a th:href="@{${post.status.permalink}}" rel="bookmark">[[${post.spec.title}]]</a></h2>
|
<a th:href="@{${post.status.permalink}}"
|
||||||
<div class="entry_meta">
|
th:with="cover_img=${#strings.contains(theme.config.post.post_banner,'http') ? ((#strings.contains(theme.config.post.post_banner,'?') ? theme.config.post.post_banner : theme.config.post.post_banner+'?')+','+post.spec.title): theme.config.post.post_banner}">
|
||||||
<span class="nickname">@[[${post.owner.displayName}]]
|
<img class="round12 shadow lazy"
|
||||||
</span> - <time itemprop="datePublished" th:datetime="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd HH:mm')}">
|
th:with="_cover = ${#strings.isEmpty(post.spec.cover) ? cover_img : thumbnail.gen(post.spec.cover, 's')}"
|
||||||
<th:block th:replace="~{modules/widgets/time :: time(${post.spec.publishTime})}"></th:block>
|
th:data-src="${_cover}" alt="">
|
||||||
</time>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<th:block th:if="${not #strings.isEmpty(post.status.excerpt)}">
|
<div class="card_right">
|
||||||
<p th:with="post_word_max = ${#conversions.convert(theme.config.post.post_word_max, 'java.lang.Integer') >= 0 ? theme.config.post.post_word_max : 100 },
|
<div class="entry-content">
|
||||||
excerpt = ${#strings.length(post.status.excerpt) > #conversions.convert(post_word_max, 'java.lang.Integer') ? post_word_max : #strings.length(post.status.excerpt)}">
|
<h2 class="entry-title"><a th:href="@{${post.status.permalink}}" rel="bookmark">[[${post.spec.title}]]</a></h2>
|
||||||
[[${#strings.substring(post.status.excerpt,0,excerpt)+'...'}]]
|
<div class="entry_meta">
|
||||||
</p>
|
<span class="nickname">@[[${post.owner.displayName}]]</span> - <time itemprop="datePublished"
|
||||||
</th:block>
|
th:datetime="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd HH:mm')}">
|
||||||
<div class="feature round12">
|
<th:block th:replace="~{modules/widgets/time :: time(${post.spec.publishTime})}"></th:block></time>
|
||||||
<a th:href="@{${post.status.permalink}}"
|
|
||||||
th:with="cover_img=${#strings.contains(theme.config.post.post_banner,'http') ? ((#strings.contains(theme.config.post.post_banner,'?') ? theme.config.post.post_banner : theme.config.post.post_banner+'?')+','+post.spec.title): theme.config.post.post_banner}">
|
|
||||||
<img class="round12 shadow lazy"
|
|
||||||
th:with="_cover = ${#strings.isEmpty(post.spec.cover) ? cover_img : thumbnail.gen(post.spec.cover, 'm')}"
|
|
||||||
th:src="@{/assets/img/lazyload.png}"
|
|
||||||
th:data-src="${_cover}" alt="">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div><!-- .entry-content -->
|
|
||||||
<div class="entry-footer">
|
|
||||||
<div class="post_footer_meta">
|
|
||||||
<div class="left">
|
|
||||||
<span class="post_views"><i class="ri-eye-line"></i>
|
|
||||||
[[${post.stats.visit}]]
|
|
||||||
</span>
|
|
||||||
<span class="comnum"><i class="ri-chat-4-line"></i>
|
|
||||||
<small> [[${post.stats.comment}]] </small>
|
|
||||||
</span>
|
|
||||||
<a class="up_like " data-key="post" data-action="up" th:data-id="${post.metadata.name}">
|
|
||||||
<i class="ri-heart-2-line"></i>
|
|
||||||
<span>[[${post.stats.upvote}]]</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="right">
|
|
||||||
<span th:if="${post.spec.pinned}" class="sticky_icon"><i class="ri-fire-line"></i> TOP</span>
|
|
||||||
<th:block th:if="${not #lists.isEmpty(post.categories)}">
|
|
||||||
<div class="normal_cat"># [[${post.categories[0].spec.displayName}]]</div>
|
|
||||||
</th:block>
|
|
||||||
</div>
|
</div>
|
||||||
|
<th:block th:if="${not #strings.isEmpty(post.status.excerpt)}">
|
||||||
|
<p th:with="post_word_max = ${#conversions.convert(theme.config.post.post_word_max, 'java.lang.Integer') >= 0 ? theme.config.post.post_word_max : 100 },
|
||||||
|
excerpt = ${#strings.length(post.status.excerpt) > #conversions.convert(post_word_max, 'java.lang.Integer') ? post_word_max : #strings.length(post.status.excerpt)}">
|
||||||
|
[[${#strings.substring(post.status.excerpt,0,excerpt)+'...'}]]
|
||||||
|
</p>
|
||||||
|
</th:block>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- .entry-footer -->
|
<div class="entry-footer">
|
||||||
|
<div class="post_footer_meta">
|
||||||
|
<div class="left">
|
||||||
|
<span class="post_views"><i class="ri-eye-line"></i>[[${post.stats.visit}]]</span>
|
||||||
|
<span class="comnum"><i class="ri-chat-4-line"></i><small>[[${post.stats.comment}]]</small></span>
|
||||||
|
<a class="up_like " data-action="up" data-key="post" th:data-id="${post.metadata.name}">
|
||||||
|
<i class="ri-heart-2-line"></i>
|
||||||
|
<span>[[${post.stats.upvote}]]</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<span th:if="${post.spec.pinned}" class="sticky_icon"><i class="ri-fire-line"></i> TOP</span>
|
||||||
|
<th:block th:if="${not #lists.isEmpty(post.categories)}">
|
||||||
|
<div class="normal_cat"># [[${post.categories[0].spec.displayName}]]</div>
|
||||||
|
</th:block>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -4,12 +4,6 @@
|
|||||||
<i class="ri-focus-2-line"></i>
|
<i class="ri-focus-2-line"></i>
|
||||||
<h1 class="entry-title" th:text="${singlePage.spec.title}"></h1>
|
<h1 class="entry-title" th:text="${singlePage.spec.title}"></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
|
||||||
<time itemprop="datePublished"
|
|
||||||
th:datetime="${#dates.format(singlePage.spec.publishTime, 'yyyy-MM-dd HH:mm')}">
|
|
||||||
[[${#dates.format(singlePage.spec.publishTime, 'yyyy年MM月dd日')}]]
|
|
||||||
</time>
|
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="entry-content single-content">
|
<div class="entry-content single-content">
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
<div class="blog_header">
|
<div class="blog_header">
|
||||||
|
|
||||||
<div th:if="${mu_on == 'true' && not #strings.isEmpty(plays_id)}" class="single_music_header">
|
<div th:if="${mu_on == 'true' && not #strings.isEmpty(plays_id)}" class="single_music_header">
|
||||||
<div class="mu_img"><img class="round12 shadow lazy" src="/themes/theme-pix/assets/img/lazyload.png" th:data-src="${_cover}" ></div>
|
<div class="mu_img"><img class="round12 shadow lazy" src="/themes/theme-pix/assets/img/logo.webp" th:data-src="${_cover}" ></div>
|
||||||
<div class="right_info">
|
<div class="right_info">
|
||||||
<h2 class="entry-title" th:text="${post.spec.title}"></h2>
|
<h2 class="entry-title" th:text="${post.spec.title}"></h2>
|
||||||
<div class="header_meta">
|
<div class="header_meta">
|
||||||
|
|||||||
@@ -1,33 +1,43 @@
|
|||||||
<th:block th:if="${not #lists.isEmpty(content.medium)}">
|
<th:block th:if="${not #lists.isEmpty(content.medium)}">
|
||||||
<div class="img_list" th:if="${#strings.contains(content.medium,'PHOTO')}">
|
|
||||||
<div class="list_inner" th:num="${content.medium.size}">
|
|
||||||
<span th:each="momentItem : ${content.medium}" th:if="${momentItem.type.name == 'PHOTO'}"
|
|
||||||
class="fancybox mo_img" th:href="${momentItem.url}"
|
|
||||||
th:data-fancybox="${'post-images-'+moment.metadata.name}">
|
|
||||||
<img class="lazy" th:src="@{/assets/img/lazyload.png}" th:data-src="${momentItem.url}">
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="video_list" th:if="${#strings.contains(content.medium,'VIDEO')}">
|
|
||||||
<div class="list_inner">
|
|
||||||
<th:block th:each="momentItem : ${content.medium}">
|
|
||||||
<div class="pix_local_player"
|
|
||||||
th:if="${momentItem.type.name == 'VIDEO' && momentItem.originType != 'video/bili'}">
|
|
||||||
<div class="video_play_btn">
|
|
||||||
<a><i class="ri-play-mini-line"></i></a>
|
|
||||||
</div>
|
|
||||||
<video th:src="${momentItem.url}" id="pix_video_player" objectfit="cover" x5-video-player-type="h5"
|
|
||||||
onplay="stopOtherMedia(this)"></video>
|
|
||||||
</div>
|
|
||||||
<div class="pix_bili_player"
|
|
||||||
th:if="${momentItem.type.name == 'VIDEO' && momentItem.originType == 'video/bili'}">
|
|
||||||
<iframe th:src="|//player.bilibili.com/player.html?bvid=${momentItem.url}&autoplay=0&page=1|"
|
|
||||||
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
|
|
||||||
</div>
|
|
||||||
</th:block>
|
|
||||||
|
|
||||||
|
<div class="img_list">
|
||||||
|
<div class="list_inner" th:num="${content.medium.size}">
|
||||||
|
<th:block th:each="momentItem : ${content.medium}">
|
||||||
|
|
||||||
|
<th:block th:with="isStrictVideo=${momentItem.type.name == 'VIDEO'},
|
||||||
|
isVideoExt=${#strings.endsWith(#strings.toLowerCase(momentItem.url), '.mp4')
|
||||||
|
|| #strings.endsWith(#strings.toLowerCase(momentItem.url), '.webm')
|
||||||
|
|| #strings.endsWith(#strings.toLowerCase(momentItem.url), '.ogv')}">
|
||||||
|
|
||||||
|
<div class="pix_bili_player" th:if="${isStrictVideo && momentItem.originType == 'video/bili'}">
|
||||||
|
<iframe th:src="|//player.bilibili.com/player.html?bvid=${momentItem.url}&autoplay=0&page=1|"
|
||||||
|
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 非 Bilibili 视频：使用 Fancybox 灯箱 -->
|
||||||
|
<span th:if="${(isStrictVideo || isVideoExt) && momentItem.originType != 'video/bili'}"
|
||||||
|
class="fancybox mo_img" th:href="${momentItem.url}"
|
||||||
|
th:data-fancybox="${'post-images-' + moment.metadata.name}" th:data-type="video">
|
||||||
|
<video th:src="${momentItem.url}" class="pix_video"
|
||||||
|
style="width:100%; border-radius:8px;"></video>
|
||||||
|
<div
|
||||||
|
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;">
|
||||||
|
<i class="ri-play-circle-line"
|
||||||
|
style="color: #41b87e; font-size: 40px; background-color: rgba(255, 255, 255, 0.8); border-radius: 50%;"></i>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span th:if="${momentItem.type.name == 'PHOTO' && !isVideoExt}" class="fancybox mo_img"
|
||||||
|
th:href="${momentItem.url}" th:data-fancybox="${'post-images-' + moment.metadata.name}">
|
||||||
|
<img class="lazy" th:src="@{/assets/img/logo.webp}" th:data-src="${momentItem.url}">
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</th:block>
|
||||||
|
|
||||||
|
</th:block>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="audio_list" th:if="${#strings.contains(content.medium,'AUDIO')}">
|
<div class="audio_list" th:if="${#strings.contains(content.medium,'AUDIO')}">
|
||||||
<div class="list_inner">
|
<div class="list_inner">
|
||||||
<th:block th:each="momentItem : ${content.medium}">
|
<th:block th:each="momentItem : ${content.medium}">
|
||||||
@@ -39,8 +49,7 @@
|
|||||||
<div class="pix_player qt" th:if="${momentItem.type.name == 'AUDIO' &&
|
<div class="pix_player qt" th:if="${momentItem.type.name == 'AUDIO' &&
|
||||||
(momentItem.originType == 'audio/netease' || momentItem.originType == 'audio/tencent' ||
|
(momentItem.originType == 'audio/netease' || momentItem.originType == 'audio/tencent' ||
|
||||||
momentItem.originType == 'audio/kugou' || momentItem.originType == 'audio/kuwo')}"
|
momentItem.originType == 'audio/kugou' || momentItem.originType == 'audio/kuwo')}"
|
||||||
th:id="${momentItem.url}"
|
th:id="${momentItem.url}" th:type="${momentItem.originType}">
|
||||||
th:type="${momentItem.originType}">
|
|
||||||
</div>
|
</div>
|
||||||
</th:block>
|
</th:block>
|
||||||
</div>
|
</div>
|
||||||
@@ -51,29 +60,29 @@
|
|||||||
<th:block th:each="momentItem : ${content.medium}">
|
<th:block th:each="momentItem : ${content.medium}">
|
||||||
<th:block th:if="${momentItem.type.name == 'POST'}">
|
<th:block th:if="${momentItem.type.name == 'POST'}">
|
||||||
<div class="moment_card_item loop_card_item" th:pid="${momentItem.url}"
|
<div class="moment_card_item loop_card_item" th:pid="${momentItem.url}"
|
||||||
th:type="${momentItem.originType}">
|
th:type="${momentItem.originType}">
|
||||||
<th:block th:if="${momentItem.originType == 'post'}">
|
<th:block th:if="${momentItem.originType == 'post'}">
|
||||||
<a th:with="post = ${postFinder.getByName(momentItem.url)}"
|
<a th:with="post = ${postFinder.getByName(momentItem.url)}"
|
||||||
th:href="@{${post.status.permalink}}" target="_blank">
|
th:href="@{${post.status.permalink}}">
|
||||||
<div class="left"><img th:src="${post.spec.cover}"></div>
|
<div class="left"><img th:src="${post.spec.cover}"></div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<h4 th:text="${post.spec.title}"></h4>
|
<h4 th:text="${post.spec.title}"></h4>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<th:block th:if="${!post.spec.excerpt.autoGenerate}"
|
<th:block th:if="${!post.spec.excerpt.autoGenerate}"
|
||||||
th:text="${post.spec.excerpt.raw}" />
|
th:text="${post.spec.excerpt.raw}" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</th:block>
|
</th:block>
|
||||||
<th:block th:if="${momentItem.originType == 'page'}">
|
<th:block th:if="${momentItem.originType == 'page'}">
|
||||||
<a th:with="page = ${singlePageFinder.getByName(momentItem.url)}"
|
<a th:with="page = ${singlePageFinder.getByName(momentItem.url)}"
|
||||||
th:href="@{${page.status.permalink}}" target="_blank">
|
th:href="@{${page.status.permalink}}" target="_blank">
|
||||||
<div class="left"><img th:src="${page.spec.cover}"></div>
|
<div class="left"><img th:src="${page.spec.cover}"></div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<h4 th:text="${page.spec.title}"></h4>
|
<h4 th:text="${page.spec.title}"></h4>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<th:block th:if="${!page.spec.excerpt.autoGenerate}"
|
<th:block th:if="${!page.spec.excerpt.autoGenerate}"
|
||||||
th:text="${page.spec.excerpt.raw}" />
|
th:text="${page.spec.excerpt.raw}" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
@@ -86,4 +95,5 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</th:block>
|
</th:block>
|
||||||
+124
-20
@@ -1,27 +1,131 @@
|
|||||||
<th:block th:fragment="footer">
|
<th:block th:fragment="footer">
|
||||||
<script th:if="${pluginFinder.available('plugin-douban')}" th:src="@{/plugins/plugin-douban/assets/static/db.min.js?v='1.1.6'}" class="pjax"></script>
|
<th:block th:with="customJsVersion='1.2.5-9'">
|
||||||
<script th:src="@{/assets/libs/axios/axios.min.js}" id="axios.min-js"></script>
|
|
||||||
<script th:src="@{/assets/libs/jsencrypt/jsencrypt.min.js}" id="jsencrypt.min-js"></script>
|
<!-- 奇遇容器 -->
|
||||||
<script th:src="@{/assets/libs/jquery/jquery.min.js}" id="jquery.min-js"></script>
|
<div class="center-img-container" id="centerImgContainer">
|
||||||
<script th:src="@{/assets/libs/qrious/qrious.min.js}"></script>
|
<img class="center-img" id="targetImg">
|
||||||
<script th:src="@{/assets/libs/uikit/uikit.min.js}" id="uikit.js-js"></script>
|
</div>
|
||||||
<script th:src="@{/assets/libs/jquery/jquery.cookie.js}" id="jquery.cookie-js"></script>
|
|
||||||
<script th:src="@{/assets/libs/fancybox/jquery.fancybox.min.js}" id="fancybox.js-js"></script>
|
<!-- 登录容器 -->
|
||||||
<script th:src="@{/assets/libs/jquery/jquery.form.js}" id="jquery.form-js"></script>
|
<div class="custom-login-modal" id="customLoginModal">
|
||||||
<script th:src="@{/assets/libs/jquery/jquery.validate.js}" id="jquery.validate-js"></script>
|
<div class="login-modal-content login-modern-card">
|
||||||
<script th:src="@{/assets/libs/message/coco-message.js}" id="mesage-js"></script>
|
<button class="close-modal-btn" id="closeLoginModal">×</button>
|
||||||
<script th:src="@{/assets/libs/lazyload/lazyload.min.js}" id="lazyload-js"></script>
|
<form class="login-modern-form">
|
||||||
<script th:src="@{/assets/js/moment-push.js?v={version}(version=${theme.spec.version})}" id="moment-push-js"></script>
|
<p class="login-modern-title">日记簿署名</p>
|
||||||
<script th:src="@{/assets/libs/nprogress/nprogress.js}" id="nprogress-js"></script>
|
<div class="login-modern-input-wrapper">
|
||||||
<script th:src="@{/assets/js/poster.js?v={version}(version=${theme.spec.version})}" id="poster-js"></script>
|
<i class="ri-user-line login-modern-icon"></i>
|
||||||
<script th:src="@{/assets/libs/pjax/pjax.min.js}" id="pjax-js"></script>
|
<input type="text" id="customUsername" class="login-modern-input" autocomplete="username"
|
||||||
<script th:src="@{/assets/js/pixplayer.js?v={version}(version=${theme.spec.version})}" id="pixplayer.js-js"></script>
|
placeholder="执笔人">
|
||||||
<script th:src="@{/assets/js/pix.js?v={version}(version=${theme.spec.version})}" id="pix-js"></script>
|
</div>
|
||||||
<script th:src="@{/assets/js/app.js?v={version}(version=${theme.spec.version})}" id="app-js"></script>
|
<div class="login-modern-input-wrapper">
|
||||||
|
<i class="ri-lock-line login-modern-icon"></i>
|
||||||
|
<input type="password" id="customPassword" class="login-modern-input"
|
||||||
|
autocomplete="current-password" placeholder="心上锁">
|
||||||
|
</div>
|
||||||
|
<button type="button" class="login-modern-submit" id="customLoginBtn">
|
||||||
|
落 款
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 退出登录 -->
|
||||||
|
<div id="pixarNoticeWrapper" class="pixar-notice-wrapper">
|
||||||
|
<div class="pixar-notice-card" role="article" aria-labelledby="pixarNoticeUsername">
|
||||||
|
|
||||||
|
<div class="pixar-notice-header">
|
||||||
|
<div class="pixar-notice-avatar"></div>
|
||||||
|
<p class="pixar-notice-username" id="pixarNoticeUsername">阿年的日记簿</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pixar-notice-image-area">
|
||||||
|
<p class="pixar-notice-caption">
|
||||||
|
您确定要退出登录吗？<br>
|
||||||
|
请注意：<br>
|
||||||
|
未保存的内容将会被清空！
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pixar-notice-actions">
|
||||||
|
|
||||||
|
<!-- 关闭按钮 -->
|
||||||
|
<button class="pixar-notice-btn pixar-notice-btn-close" aria-label="Close"
|
||||||
|
onclick="hidePixarCard()">
|
||||||
|
<i class="ri-close-line"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- 确认按钮 -->
|
||||||
|
<button class="pixar-notice-btn pixar-notice-btn-confirm" aria-label="Confirm"
|
||||||
|
onclick="confirmPixarAction()">
|
||||||
|
<i class="ri-check-line"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 删除确认弹窗 -->
|
||||||
|
<div class="moments-modal-overlay" id="momentsDeleteModal" style="display: none;">
|
||||||
|
<div class="moments-card-widget">
|
||||||
|
<div class="moments-card-header">
|
||||||
|
<!-- 新增这一层包裹 -->
|
||||||
|
<div class="moments-header-row">
|
||||||
|
<div class="moments-icon-wrapper">
|
||||||
|
<svg aria-hidden="true" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"
|
||||||
|
fill="none">
|
||||||
|
<path
|
||||||
|
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
|
||||||
|
stroke-linejoin="round" stroke-linecap="round"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="moments-text-content">
|
||||||
|
<span class="moments-title-text"></span>
|
||||||
|
<p class="moments-message-text"></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="moments-button-group">
|
||||||
|
<button class="moments-btn-cancel" type="button" id="momentsCancelBtn">取消</button>
|
||||||
|
<button class="moments-btn-confirm" type="button" id="momentsConfirmBtn">确认</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <script th:if="${pluginFinder.available('plugin-douban')}"
|
||||||
|
th:src="@{/plugins/plugin-douban/assets/static/db.min.js(v=${customJsVersion})}" class="pjax"></script> -->
|
||||||
|
<script th:src="@{/assets/libs/axios/axios.min.js(v=${customJsVersion})}" id="axios.min-js"></script>
|
||||||
|
<script th:src="@{/assets/libs/jsencrypt/jsencrypt.min.js(v=${customJsVersion})}"
|
||||||
|
id="jsencrypt.min-js"></script>
|
||||||
|
<script th:src="@{/assets/libs/jquery/jquery.min.js(v=${customJsVersion})}" id="jquery.min-js"></script>
|
||||||
|
<script th:src="@{/assets/libs/qrious/qrious.min.js(v=${customJsVersion})}"></script>
|
||||||
|
<script th:src="@{/assets/libs/uikit/uikit.min.js(v=${customJsVersion})}" id="uikit.js-js"></script>
|
||||||
|
<script th:src="@{/assets/libs/jquery/jquery.cookie.js(v=${customJsVersion})}" id="jquery.cookie-js"></script>
|
||||||
|
<script th:src="@{/assets/libs/fancybox/jquery.fancybox.min.js(v=${customJsVersion})}"
|
||||||
|
id="fancybox.js-js"></script>
|
||||||
|
<script th:src="@{/assets/libs/jquery/jquery.form.js(v=${customJsVersion})}" id="jquery.form-js"></script>
|
||||||
|
<script th:src="@{/assets/libs/jquery/jquery.validate.js(v=${customJsVersion})}"
|
||||||
|
id="jquery.validate-js"></script>
|
||||||
|
<script th:src="@{/assets/libs/message/coco-message.js(v=${customJsVersion})}" id="mesage-js"></script>
|
||||||
|
<script th:src="@{/assets/libs/lazyload/lazyload.min.js(v=${customJsVersion})}" id="lazyload-js"></script>
|
||||||
|
<script th:src="@{/assets/libs/nprogress/nprogress.js(v=${customJsVersion})}" id="nprogress-js"></script>
|
||||||
|
<script th:src="@{/assets/libs/pjax/pjax.min.js(v=${customJsVersion})}" id="pjax-js"></script>
|
||||||
|
<script th:src="@{/assets/js/moment-push.js(v=${customJsVersion})}" id="moment-push-js"></script>
|
||||||
|
<script th:src="@{/assets/js/poster.js(v=${customJsVersion})}" id="poster-js"></script>
|
||||||
|
<script th:src="@{/assets/js/pixplayer.js(v=${customJsVersion})}" id="pixplayer.js-js"></script>
|
||||||
|
<script th:src="@{/assets/js/pix.js(v=${customJsVersion})}" id="pix-js"></script>
|
||||||
|
<script th:src="@{/assets/js/app.js(v=${customJsVersion})}" id="app-js"></script>
|
||||||
|
<script th:src="@{/assets/js/anian.js(v=${customJsVersion})}" id="anian-js"></script>
|
||||||
|
|
||||||
|
<link rel="prefetch" href="/upload/ma-shan-zheng.woff2" crossorigin="anonymous">
|
||||||
|
<link rel="prefetch" href="/upload/mu-yao-sui-xin-shou-xie-ti.woff2" crossorigin="anonymous">
|
||||||
|
<link rel="prefetch" href="/themes/theme-pix/assets/img/loading.webp">
|
||||||
|
|
||||||
|
</th:block>
|
||||||
|
|
||||||
<!-- 自定义js -->
|
<!-- 自定义js -->
|
||||||
<script type="text/javascript" th:if="${not #strings.isEmpty(theme.config.custom.code_js)}"
|
<script type="text/javascript" th:if="${not #strings.isEmpty(theme.config.custom.code_js)}"
|
||||||
th:utext="${theme.config.custom.code_js}">
|
th:utext="${theme.config.custom.code_js}">
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<th:block th:if="${not #strings.isEmpty(theme.config.custom.footer_html)}"
|
<th:block th:if="${not #strings.isEmpty(theme.config.custom.footer_html)}"
|
||||||
|
|||||||
+35
-94
@@ -1,109 +1,50 @@
|
|||||||
<th:block th:fragment="head">
|
<th:block th:fragment="head" th:with="customJsVersion=${'1.2.5-9'}">
|
||||||
|
<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"
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
|
||||||
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
|
|
||||||
<title th:text="${site_title}"></title>
|
<title th:text="${site_title}"></title>
|
||||||
<link rel="shortcut icon" th:href="@{${theme.config.base_set.favicon}}" title="Favicon">
|
<link rel="shortcut icon" th:href="@{${theme.config.base_set.favicon}}" title="Favicon">
|
||||||
<th:block th:replace="~{modules/variables/cst-script-parameter}"/>
|
|
||||||
<meta name="robots" content="max-image-preview:large">
|
<meta name="robots" content="max-image-preview:large">
|
||||||
|
|
||||||
<th:block th:if="${not #strings.isEmpty(theme.config.custom.head_html)}"
|
<link rel="stylesheet" id="wp-block-library-css" th:href="@{/assets/css/style.min.css(v=${customJsVersion})}" media="all">
|
||||||
th:utext="${theme.config.custom.head_html}"> </th:block>
|
<link rel="stylesheet" id="pix-style-css" th:href="@{/assets/css/style.css(v=${customJsVersion})}" media="all">
|
||||||
|
<link rel="stylesheet" id="fancybox.css-css" th:href="@{/assets/libs/fancybox/jquery.fancybox.min.css(v=${customJsVersion})}" media="all">
|
||||||
|
<link rel="stylesheet" id="nprogress.css-css" th:href="@{/assets/libs/nprogress/nprogress.css(v=${customJsVersion})}" media="all">
|
||||||
|
<link rel="stylesheet" id="iconfont-css" th:href="@{/assets/libs/fonts/remixicon.css(v=${customJsVersion})}" media="all">
|
||||||
|
<link rel="stylesheet" id="uikit.css-css" th:href="@{/assets/libs/uikit/uikit.min.css(v=${customJsVersion})}" media="all">
|
||||||
|
<link rel="stylesheet" id="main.css-css" th:href="@{/assets/css/main.css(v=${customJsVersion})}" media="all">
|
||||||
|
<link rel="stylesheet" id="dark-css" th:href="@{/assets/css/dark.css(v=${customJsVersion})}" media="all">
|
||||||
|
<link rel="stylesheet" id="mobile-css" th:href="@{/assets/css/mobile.css(v=${customJsVersion})}" media="all">
|
||||||
|
<link rel="stylesheet" id="album-css" th:href="@{/assets/css/album.css(v=${customJsVersion})}" media="all">
|
||||||
|
<link rel="stylesheet" id="anian-css" th:href="@{/assets/css/anian.css(v=${customJsVersion})}" media="all">
|
||||||
|
<link th:if="${theme.config.style.theme_set != 'green-normal' && theme.config.style.theme_set != 'dark-theme'}" rel="stylesheet" id="theme.color-css" th:href="@{/assets/css/{theme_set}.css(theme_set=${theme.config.style.theme_set},v=${customJsVersion})}" media="all">
|
||||||
|
<!-- <link th:if="${pluginFinder.available('plugin-douban')}" rel="stylesheet" id="wpd-css-css" th:href="@{/plugins/plugin-douban/assets/static/db.min.css(v=${customJsVersion})}" type="text/css" media="screen"> -->
|
||||||
|
|
||||||
<meta property="og:title" th:content="${site_title}">
|
<style th:if="${not #strings.isEmpty(theme.config.custom.code_css)}" th:utext="${theme.config.custom.code_css}"></style>
|
||||||
<meta property="og:site_name" th:content="${site.title}">
|
<style>:root { --toc-color: [(${theme.config.post.tocColor})]; } .wp-block-button__link { color: #fff; background-color: #32373c; border-radius: 9999px; text-decoration: none; padding: .6em 1.3em; } .wp-block-file__button { background: #32373c; color: #fff; text-decoration: none; }</style>
|
||||||
<meta property="og:type" content="website">
|
<style th:if="${!theme.config.post.toc.mobile_open}">@media screen and (max-width: 768px) { .listree-box, .toc_nav { display: none !important; } }</style>
|
||||||
<link rel="stylesheet" id="wp-block-library-css" th:href="@{/assets/css/style.min.css?v={version}(version=${theme.spec.version})}" media="all">
|
<style th:if="${not #strings.isEmpty(theme.config.base_set.custom_fonts)}">@font-face { font-family: "HarmonyOS_M"; src: url("[(${theme.config.base_set.custom_fonts})]") format("truetype"); font-display: swap; }</style>
|
||||||
<style id="classic-theme-styles-inline-css">
|
|
||||||
/*! This file is auto-generated */
|
|
||||||
.wp-block-button__link {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #32373c;
|
|
||||||
border-radius: 9999px;
|
|
||||||
box-shadow: none;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: calc(.667em + 2px) calc(1.333em + 2px);
|
|
||||||
font-size: 1.125em
|
|
||||||
}
|
|
||||||
|
|
||||||
.wp-block-file__button {
|
<th:block th:replace="~{modules/variables/cst-script-parameter}" />
|
||||||
background: #32373c;
|
<th:block th:if="${not #strings.isEmpty(theme.config.custom.head_html)}" th:utext="${theme.config.custom.head_html}"></th:block>
|
||||||
color: #fff;
|
<meta property="og:title" th:content="${site_title}"><meta property="og:site_name" th:content="${site.title}"><meta property="og:type" content="website">
|
||||||
text-decoration: none
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<link rel="stylesheet" id="pix-style-css" th:href="@{/assets/css/style.css?v={version}(version=${theme.spec.version})}" media="all">
|
|
||||||
<link rel="stylesheet" id="fancybox.css-css" th:href="@{/assets/libs/fancybox/jquery.fancybox.min.css}" media="all">
|
|
||||||
<link rel="stylesheet" id="nprogress.css-css" th:href="@{/assets/libs/nprogress/nprogress.css}" media="all">
|
|
||||||
<link rel="stylesheet" id="iconfont-css" th:href="@{/assets/libs/fonts/remixicon.css}" media="all">
|
|
||||||
<link rel="stylesheet" id="uikit.css-css" th:href="@{/assets/libs/uikit/uikit.min.css}" media="all">
|
|
||||||
<link rel="stylesheet" id="main.css-css" th:href="@{/assets/css/main.css?v={version}(version=${theme.spec.version})}" media="all">
|
|
||||||
<link th:if="${theme.config.style.theme_set != 'green-normal' && theme.config.style.theme_set != 'dark-theme'}"
|
|
||||||
rel="stylesheet" id="theme.color-css" th:href="@{/assets/css/{theme_set}.css?v={version}(version=${theme.spec.version},theme_set=${theme.config.style.theme_set})}" media="all">
|
|
||||||
<link rel="stylesheet" id="dark-css" th:href="@{/assets/css/dark.css?v={version}(version=${theme.spec.version})}" media="all">
|
|
||||||
<link rel="stylesheet" id="mobile-css" th:href="@{/assets/css/mobile.css?v={version}(version=${theme.spec.version})}" media="all">
|
|
||||||
<link rel="stylesheet" id="album-css" th:href="@{/assets/css/album.css?v={version}(version=${theme.spec.version})}" media="all">
|
|
||||||
<script th:src="@{/assets/libs/imgstatus/imgStatus.min.js}" id="imgstatus-js"></script>
|
|
||||||
<script th:src="@{/assets/libs/waterfall/waterfall.min.js}" id="waterfall-js"></script>
|
|
||||||
<script th:if="${pluginFinder.available('PluginPrismJS')}" src="/plugins/PluginPrismJS/assets/static/highlight.js/highlight.min.js"></script>
|
|
||||||
<link th:if="${pluginFinder.available('plugin-douban')}" rel="stylesheet" id="wpd-css-css" th:href="@{/plugins/plugin-douban/assets/static/db.min.css}" type="text/css"
|
|
||||||
media="screen">
|
|
||||||
<style type="text/css"
|
|
||||||
th:if="${not #strings.isEmpty(theme.config.custom.code_css)}"
|
|
||||||
th:utext="${theme.config.custom.code_css}" ></style>
|
|
||||||
<style type="text/css">
|
|
||||||
:root {
|
|
||||||
--toc-color: [(${theme.config.post.tocColor})];
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style type="text/css" th:if="${!theme.config.post.toc.mobile_open}">
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
.listree-box {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<!-- 自定义css -->
|
|
||||||
<style type="text/css" th:if="${not #strings.isEmpty(theme.config.base_set.custom_fonts)}">
|
|
||||||
@font-face {
|
|
||||||
font-style: normal;
|
|
||||||
font-family: "HarmonyOS_M";
|
|
||||||
src: url("[(${theme.config.base_set.custom_fonts})]") format("truetype");
|
|
||||||
font-display: swap;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
<script th:src="@{/assets/libs/imgstatus/imgStatus.min.js(v=${customJsVersion})}" id="imgstatus-js"></script>
|
||||||
|
<script th:src="@{/assets/libs/waterfall/waterfall.min.js(v=${customJsVersion})}" id="waterfall-js"></script>
|
||||||
|
<script th:if="${pluginFinder.available('PluginPrismJS')}" th:src="@{/plugins/PluginPrismJS/assets/static/highlight.js/highlight.min.js(v=${customJsVersion})}"></script>
|
||||||
<th:block th:replace="~{'modules/variables/moments-img-style'}"></th:block>
|
<th:block th:replace="~{'modules/variables/moments-img-style'}"></th:block>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
(win => {
|
(win => {
|
||||||
win.getCookie = function(name) {
|
win.getCookie = (name) => {
|
||||||
var cookieArr = document.cookie.split(';');
|
let pair = document.cookie.split('; ').find(row => row.startsWith(name + '='));
|
||||||
for (var i = 0; i < cookieArr.length; i++) {
|
return pair ? decodeURIComponent(pair.split('=')[1]) : "";
|
||||||
var cookiePair = cookieArr[i].split('=');
|
};
|
||||||
var cookieName = cookiePair[0].trim();
|
win.darkmode = () => {
|
||||||
if (cookieName === name) {
|
const dark = getCookie("dark");
|
||||||
return decodeURIComponent(cookiePair[1]);
|
return dark ? (dark === 'dark') : (Theme.theme_set === 'dark-theme');
|
||||||
}
|
};
|
||||||
}
|
if (darkmode()) document.documentElement.classList.add('dark');
|
||||||
return "";
|
|
||||||
}
|
|
||||||
win.darkmode = function () {
|
|
||||||
$darkmode = false;
|
|
||||||
const dark = getCookie("dark")
|
|
||||||
if (dark) {
|
|
||||||
$darkmode = (dark == 'dark') ? true : false;
|
|
||||||
} else if (Theme.theme_set == 'dark-theme') {
|
|
||||||
$darkmode = true;
|
|
||||||
}
|
|
||||||
return $darkmode;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (darkmode()) {
|
|
||||||
document.documentElement.classList.add('dark')
|
|
||||||
}
|
|
||||||
})(window)
|
})(window)
|
||||||
</script>
|
</script>
|
||||||
</th:block>
|
</th:block>
|
||||||
@@ -20,8 +20,7 @@
|
|||||||
|
|
||||||
</header><!-- #masthead -->
|
</header><!-- #masthead -->
|
||||||
|
|
||||||
<div class="index_banner"
|
<div class="index_banner" id="banner" uk-img="loading: eager">
|
||||||
th:data-src="${theme.config.style.topbg_banner}" uk-img="loading: eager">
|
|
||||||
<div class="user_info">
|
<div class="user_info">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
@@ -32,3 +31,98 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// --------------------------
|
||||||
|
// 配置区域（请替换为实际图片地址）
|
||||||
|
// --------------------------
|
||||||
|
const BANNER_CONFIG = {
|
||||||
|
seasonal: {
|
||||||
|
'春': '/themes/theme-pix/assets/img/banner-chun.webp',
|
||||||
|
'夏': '/themes/theme-pix/assets/img/banner-xia.webp',
|
||||||
|
'秋': '/themes/theme-pix/assets/img/banner-qiu.webp',
|
||||||
|
'冬': '/themes/theme-pix/assets/img/banner-dong.webp'
|
||||||
|
},
|
||||||
|
fallback: '/themes/theme-pix/assets/img/banner-all.webp'
|
||||||
|
};
|
||||||
|
|
||||||
|
// --------------------------
|
||||||
|
// 原有 Cookie 工具函数（保持不变）
|
||||||
|
// --------------------------
|
||||||
|
function anian_setDailyCookie(name, value) {
|
||||||
|
const now = new Date();
|
||||||
|
const china = new Date(now.getTime() + 8 * 3600 * 1000);
|
||||||
|
const expires = new Date(Date.UTC(china.getUTCFullYear(), china.getUTCMonth(), china.getUTCDate(), 15, 59, 59));
|
||||||
|
document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; expires=${expires.toUTCString()}; path=/`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function anian_getCookie(name) {
|
||||||
|
const nameEQ = encodeURIComponent(name) + '=';
|
||||||
|
const ca = document.cookie.split(';');
|
||||||
|
for (let i = 0; i < ca.length; i++) {
|
||||||
|
let c = ca[i];
|
||||||
|
while (c.charAt(0) === ' ') c = c.substring(1);
|
||||||
|
if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length));
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --------------------------
|
||||||
|
// 新增：Banner 图片切换逻辑
|
||||||
|
// --------------------------
|
||||||
|
function setBanner(lunarInfo) {
|
||||||
|
const banner = document.getElementById('banner');
|
||||||
|
if (!banner) return;
|
||||||
|
|
||||||
|
// 根据季节选图，无匹配则用兜底
|
||||||
|
const season = lunarInfo?.jijie;
|
||||||
|
const imgUrl = BANNER_CONFIG.seasonal[season] || BANNER_CONFIG.fallback;
|
||||||
|
|
||||||
|
// 可以根据日期、节日覆盖imgUrl
|
||||||
|
|
||||||
|
// 设置图片并触发 UIkit 加载
|
||||||
|
banner.setAttribute('data-src', imgUrl);
|
||||||
|
window.UIkit && UIkit.update(banner);
|
||||||
|
}
|
||||||
|
|
||||||
|
// --------------------------
|
||||||
|
// 初始化逻辑（优化版）
|
||||||
|
// --------------------------
|
||||||
|
(function() {
|
||||||
|
const apiUrl = 'https://api.anian.net/lunar/api';
|
||||||
|
const cookieName = 'anian_lunar_info';
|
||||||
|
|
||||||
|
// 1. 优先尝试从 Cookie 读取
|
||||||
|
const cached = anian_getCookie(cookieName);
|
||||||
|
if (cached) {
|
||||||
|
try {
|
||||||
|
setBanner(JSON.parse(cached));
|
||||||
|
return; // 有缓存直接结束
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. 无缓存则请求 API
|
||||||
|
fetch(apiUrl)
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(data => {
|
||||||
|
// 组装农历信息，保持 cookie 字段名不变
|
||||||
|
const lunarInfo = {
|
||||||
|
ganzhiYear: data.nian || '',
|
||||||
|
lunarMonth: data.yue || '',
|
||||||
|
lunarDay: data.ri || '',
|
||||||
|
jieqi: data.jieqi || '',
|
||||||
|
jijie: data.jijie || '',
|
||||||
|
shengxiao: data.shengxiao || '',
|
||||||
|
traditionalFestival: data.jieri || ''
|
||||||
|
};
|
||||||
|
|
||||||
|
// 存 Cookie 并设置 Banner
|
||||||
|
anian_setDailyCookie(cookieName, JSON.stringify(lunarInfo));
|
||||||
|
setBanner(lunarInfo);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
// 3. 失败兜底：显示默认图
|
||||||
|
setBanner(null);
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user