Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 anian
|
e716097e07 | ||
|
anian
|
b387ea885c |
@@ -2,11 +2,20 @@
|
|||||||
|
|
||||||
> 基于原作者v1.2.5代码修改
|
> 基于原作者v1.2.5代码修改
|
||||||
|
|
||||||
|
#### v1.2.5-3
|
||||||
|
1. 朋友圈支持根据作者筛选内容（需同步更新插件）
|
||||||
|
2. 支持前台弹窗登入登出
|
||||||
|
2. 附录页面功能补全
|
||||||
|
3. 对线路切换、加载异常等情况进行了深度优化
|
||||||
|
|
||||||
|
#### v1.2.5-2
|
||||||
|
1. 添加侧边栏、页面、文章等HTML内容块
|
||||||
|
2. 通知书推送时机改为RSS触发
|
||||||
|
|
||||||
#### v1.2.5-1
|
#### v1.2.5-1
|
||||||
1. 修改全局样式以适配日记簿
|
1. 修改全局样式以适配日记簿
|
||||||
2. 片刻、图库支持视频并接入灯箱
|
2. 片刻、图库支持视频并接入灯箱
|
||||||
3. 更新remixicon
|
3. 更新remixicon
|
||||||
4. 片刻增加标签展示
|
4. 片刻增加标签展示
|
||||||
5. 适配多线路
|
5. 适配多线路
|
||||||
6. ···
|
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/8aea7800gy1i2vfbxoqhdj24w07c0b2p.jpg">
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<p class="name">黄诗扶</p>
|
||||||
|
<p class="bio">
|
||||||
|
又甜又脆的大冬枣！好听！好看！好吃！黄黄的伟大无需多言！
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="person">
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="/upload/ec39c62fly1i3rextah4gj22dc35s1ky.jpg">
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<p class="name">双笙</p>
|
||||||
|
<p class="bio">
|
||||||
|
什么？你问我为什么喜欢包包？可能因为是“青春”吧？
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="person">
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="/upload/005Jyswjgy1hywx7z7sb7j30zk1betbd.jpg">
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<p class="name">浅影阿</p>
|
||||||
|
<p class="bio">
|
||||||
|
谁能拒绝唱歌这么好看的老大呢？反正我是不行！下一位！
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="person">
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="/upload/ab0efe4ely1hnpfzqqw1oj23ls5eoqvg.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="/upload/logo.png">
|
||||||
|
</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.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-2025-hero">
|
||||||
|
<img src="/upload/2025-0-2.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ========= 12 个月：4 行 3 列 ========= -->
|
||||||
|
<div class="yg-grid-2025-3col">
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-1-1.png">
|
||||||
|
<img src="/upload/2025-1-2.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-2-1.png">
|
||||||
|
<img src="/upload/2025-2-2.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-3-1.png">
|
||||||
|
<img src="/upload/2025-3-2.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-4-1.png">
|
||||||
|
<img src="/upload/2025-4-2.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-5-1.png">
|
||||||
|
<img src="/upload/2025-5-2.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-6-1.png">
|
||||||
|
<img src="/upload/2025-6-2.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-7-1.png">
|
||||||
|
<img src="/upload/2025-7-2.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-8-1.png">
|
||||||
|
<img src="/upload/2025-8-2.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-9-1.png">
|
||||||
|
<img src="/upload/2025-9-2.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-10-1.png">
|
||||||
|
<img src="/upload/2025-10-2.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-11-1.png">
|
||||||
|
<img src="/upload/2025-11-2.png">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-card">
|
||||||
|
<img src="/upload/2025-12-1.png">
|
||||||
|
<img src="/upload/2025-12-2.png">
|
||||||
|
</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.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yg-grid-2026">
|
||||||
|
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-1.png"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-2.png"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-3.png"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-4.png"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-5.png"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-6.png"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-7.png"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-8.png"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-9.png"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-10.png"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-11.png"></div>
|
||||||
|
<div class="yg-2026-month"><img src="/upload/2026-12.png"></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,249 @@
|
|||||||
|
<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="/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.cc/explore/repos" 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="#" 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>
|
||||||
|
|
||||||
|
<a href="#" 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-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>
|
||||||
|
|
||||||
|
|
||||||
|
</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();
|
||||||
|
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.cc', 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.png">
|
||||||
|
<img id="calendar-2025-intro-img2" src="/upload/2025-0-2.png">
|
||||||
|
</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.png`;
|
||||||
|
monthImg2.src = `/upload/2025-${month}-2.png`;
|
||||||
|
|
||||||
|
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.png">
|
||||||
|
</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}.png`;
|
||||||
|
|
||||||
|
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,275 @@
|
|||||||
|
<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.cc/anian/halo-plugin-photos/releases.rss">
|
||||||
|
<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.cc/anian/halo-plugin-friends/releases.rss">
|
||||||
|
<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.cc/anian/halo-theme-pix/releases.rss">
|
||||||
|
<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: 1;
|
||||||
|
min-width: 320px;
|
||||||
|
/* 优化最小宽度 */
|
||||||
|
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-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: 380px;
|
||||||
|
/* 优化高度 */
|
||||||
|
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 {
|
||||||
|
min-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;">请求失败: ${error.message}</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,315 @@
|
|||||||
|
<style>
|
||||||
|
.store * {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "Inter", "Microsoft YaHei", Arial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store {
|
||||||
|
--primary: #50C878;
|
||||||
|
--primary-light: #90EE90;
|
||||||
|
--primary-dark: #3A9156;
|
||||||
|
--danger: #E74C3C;
|
||||||
|
--bg: #F9FFFB;
|
||||||
|
--shadow: 0 12px 30px rgba(80, 200, 120, .12);
|
||||||
|
--radius: 18px;
|
||||||
|
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: 10px;
|
||||||
|
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: 12px;
|
||||||
|
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: 9px;
|
||||||
|
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;
|
||||||
|
color: #7f8c8d;
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 8px 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 输入框 */
|
||||||
|
.store .input-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#file-path {
|
||||||
|
flex: 1;
|
||||||
|
padding: 8px 14px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 2px solid #e8f7ec;
|
||||||
|
font-size: 14px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#submit-btn {
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: none;
|
||||||
|
background: linear-gradient(135deg, #50c878, #3a9156);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部提示（改成浅黄色系） */
|
||||||
|
.store .tips {
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
color: #a97400;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(255, 215, 0, .12);
|
||||||
|
border: 1px solid rgba(243, 156, 18, .25);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 手机端 */
|
||||||
|
@media(max-width:520px) {
|
||||||
|
.store {
|
||||||
|
padding: 14px
|
||||||
|
}
|
||||||
|
|
||||||
|
.store .container {
|
||||||
|
padding: 22px 18px;
|
||||||
|
max-width: 95%
|
||||||
|
}
|
||||||
|
|
||||||
|
.store .title {
|
||||||
|
font-size: 22px
|
||||||
|
}
|
||||||
|
|
||||||
|
.store .input-group {
|
||||||
|
flex-direction: column
|
||||||
|
}
|
||||||
|
|
||||||
|
#submit-btn {
|
||||||
|
width: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.store .tag-list {
|
||||||
|
max-height: 120px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Toast */
|
||||||
|
.custom-toast {
|
||||||
|
position: fixed;
|
||||||
|
top: 26px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%) translateY(-80px);
|
||||||
|
background: #2ECC71;
|
||||||
|
color: #fff;
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
transition: .4s;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-show {
|
||||||
|
transform: translateX(-50%) translateY(0);
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-error {
|
||||||
|
background: #E74C3C
|
||||||
|
}
|
||||||
|
|
||||||
|
.toast-warning {
|
||||||
|
background: #F39C12
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="store">
|
||||||
|
<div class="container">
|
||||||
|
<div class="top-bar"></div>
|
||||||
|
|
||||||
|
<h1 class="title">Anian的储物柜</h1>
|
||||||
|
|
||||||
|
<div class="tag-container">
|
||||||
|
<div class="tag-search-wrapper">
|
||||||
|
<span class="search-icon">🔍</span>
|
||||||
|
<input id="tag-search" placeholder="搜索标签">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tag-list">
|
||||||
|
<div class="tag-item" data-value="test.zip">测试压缩包</div>
|
||||||
|
<div class="tag-item" data-value="docs/report.pdf">示例报告</div>
|
||||||
|
<div class="tag-item" data-value="images/banner.jpg">横幅图片</div>
|
||||||
|
<div class="tag-item" data-value="software/setup.exe">安装程序</div>
|
||||||
|
|
||||||
|
<div class="no-result" id="noResult">没有匹配的结果</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-group">
|
||||||
|
<input id="file-path" placeholder="请输入路径" autocomplete="off">
|
||||||
|
<button id="submit-btn">访问 / 下载</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="tips">⚠️ 错误过多将可能被封禁</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="custom-toast" id="customToast"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function initializeStoreEvents() {
|
||||||
|
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 toast = document.getElementById('customToast');
|
||||||
|
const tagItems = document.querySelectorAll('.tag-item');
|
||||||
|
const tagSearch = document.getElementById('tag-search');
|
||||||
|
const noResult = document.getElementById('noResult');
|
||||||
|
|
||||||
|
function showToast(msg, type = 'warning') {
|
||||||
|
toast.textContent = msg;
|
||||||
|
toast.className = 'custom-toast toast-' + type + ' toast-show';
|
||||||
|
setTimeout(() => toast.classList.remove('toast-show'), 2600);
|
||||||
|
}
|
||||||
|
|
||||||
|
tagItems.forEach(t => {
|
||||||
|
t.onclick = () => {
|
||||||
|
input.value = t.dataset.value;
|
||||||
|
showToast('已填入 ' + t.dataset.value, '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 ? 'block' : 'none';
|
||||||
|
};
|
||||||
|
|
||||||
|
function check(url) {
|
||||||
|
return new Promise(r => {
|
||||||
|
const xhr = new XMLHttpRequest();
|
||||||
|
xhr.open('HEAD', url, true);
|
||||||
|
xhr.timeout = 5000;
|
||||||
|
xhr.onload = () => r(xhr.status === 200);
|
||||||
|
xhr.onerror = () => r(false);
|
||||||
|
xhr.ontimeout = () => r(false);
|
||||||
|
xhr.send();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async function go() {
|
||||||
|
const v = input.value.trim();
|
||||||
|
if (!v) return showToast('请输入路径');
|
||||||
|
const url = '/' + v;
|
||||||
|
btn.textContent = '检测中...';
|
||||||
|
btn.disabled = true;
|
||||||
|
const ok = await check(url);
|
||||||
|
if (ok) {
|
||||||
|
showToast('资源存在，跳转中', 'success');
|
||||||
|
setTimeout(() => location.href = url, 700);
|
||||||
|
} else showToast('资源不存在', 'error');
|
||||||
|
setTimeout(() => { btn.textContent = '访问 / 下载'; btn.disabled = false }, 700);
|
||||||
|
}
|
||||||
|
|
||||||
|
btn.onclick = go;
|
||||||
|
input.onkeydown = e => { if (e.key === 'Enter') go(); };
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", initializeStoreEvents);
|
||||||
|
document.addEventListener("pjax:complete", initializeStoreEvents);
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
<div class="nav4lite-section">
|
||||||
|
<div class="nav4lite-grid">
|
||||||
|
<a href="/" class="nav4lite-item">
|
||||||
|
<span class="nav4lite-label">课外书</span>
|
||||||
|
</a>
|
||||||
|
<a href="/friends" class="nav4lite-item">
|
||||||
|
<span class="nav4lite-label">朋友圈</span>
|
||||||
|
</a>
|
||||||
|
<a href="/docs" class="nav4lite-item" target="_blank">
|
||||||
|
<span class="nav4lite-label">笔记本</span>
|
||||||
|
</a>
|
||||||
|
<a href="/address" class="nav4lite-item">
|
||||||
|
<span class="nav4lite-label">通讯录</span>
|
||||||
|
</a>
|
||||||
|
<a href="/navigator" class="nav4lite-center-dot" aria-label="查看详情"><i
|
||||||
|
class="sidebar-more ri-arrow-right-s-line"></i></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.cc" class="feedback-email">support@anian.cc</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" data-anianx-href="https://anian.cc">主线路</button>
|
||||||
|
<button class="anianx-btn" data-anianx-type="test">测速</button>
|
||||||
|
<button class="anianx-btn anianx-right" data-anianx-type="sub" data-anianx-href="https://www.anian.cc">副线路</button>
|
||||||
|
<div class="anianx-bubble" id="anianxBubble"><span id="anianxBubbleText" class="anianx-loading">当前线路检测中</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
+302
-12
@@ -1,36 +1,326 @@
|
|||||||
/* 瞬间标签与评论间距 */
|
/* 瞬间标签与评论间距 */
|
||||||
.moment_tag_gap {
|
.moment_tag_gap {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 灯箱视频格式 */
|
/* 灯箱视频格式 */
|
||||||
.fancybox-slide--video .fancybox-content {
|
.fancybox-slide--video .fancybox-content {
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fancybox-slide--video video.fancybox-video {
|
.fancybox-slide--video video.fancybox-video {
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
max-height: 75dvh !important;
|
max-height: 75dvh !important;
|
||||||
max-width: 75dvw !important;
|
max-width: 75dvw !important;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 片刻视频容器鼠标样式 */
|
/* 片刻视频容器鼠标样式 */
|
||||||
.fancybox.mo_img {
|
.fancybox.mo_img {
|
||||||
cursor: zoom-in;
|
cursor: zoom-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 图库视频图标hover放大 */
|
/* 图库视频图标hover放大 */
|
||||||
.video-fancybox .play-icon {
|
.video-fancybox .play-icon {
|
||||||
transition: all 0.4s ease !important;
|
transition: all 0.4s ease !important;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-fancybox:hover .play-icon {
|
.video-fancybox:hover .play-icon {
|
||||||
transform: scale(1.3) !important;
|
transform: scale(1.3) !important;
|
||||||
opacity: 1;
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1360px) {
|
||||||
|
.listree-box {
|
||||||
|
margin-left: calc((100vw - 1400px) / 2 + 291px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 登录容器 */
|
||||||
|
.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 {
|
||||||
|
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;
|
||||||
}
|
}
|
||||||
+628
-433
File diff suppressed because it is too large
Load Diff
+133
-83
@@ -3,61 +3,67 @@
|
|||||||
* 合并了原 1440px 和 1920px 的通用样式，并应用了你指定的 mod_third 布局
|
* 合并了原 1440px 和 1920px 的通用样式，并应用了你指定的 mod_third 布局
|
||||||
*/
|
*/
|
||||||
@media only screen and (min-width: 1366px) {
|
@media only screen and (min-width: 1366px) {
|
||||||
/* --- 你提供的统一布局样式 --- */
|
|
||||||
body.mod_third .main_wrap,
|
|
||||||
body.mod_third .go_top_box {
|
|
||||||
max-width: 1400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 导航和侧边栏宽度分配 */
|
/* --- 你提供的统一布局样式 --- */
|
||||||
body.mod_third .left_nav {
|
body.mod_third .main_wrap,
|
||||||
width: 21%;
|
body.mod_third .go_top_box {
|
||||||
}
|
max-width: 1400px;
|
||||||
body.mod_third .main_sidebar {
|
}
|
||||||
width: 21%;
|
|
||||||
}
|
|
||||||
body.mod_third .page_main {
|
|
||||||
width: 58%; /* 主内容区 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 底部导航栏和背景音乐盒定位 */
|
/* 导航和侧边栏宽度分配 */
|
||||||
body.mod_third .footer_nav {
|
body.mod_third .left_nav {
|
||||||
max-width: 1108px;
|
width: 21%;
|
||||||
}
|
}
|
||||||
body.mod_third .bgm_box {
|
|
||||||
margin-left: -75px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- 桌面端通用的基础样式合并 (源自原1440/1920) --- */
|
body.mod_third .main_sidebar {
|
||||||
.footer_top, .footer_text {
|
width: 21%;
|
||||||
font-size: 12px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.land_content {
|
body.mod_third .page_main {
|
||||||
max-width: 1080px;
|
width: 58%;
|
||||||
height: 607px;
|
/* 主内容区 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.land_right {
|
/* 底部导航栏和背景音乐盒定位 */
|
||||||
padding: 40px;
|
body.mod_third .footer_nav {
|
||||||
padding-top: 60px;
|
max-width: 1108px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.land_logo {
|
body.mod_third .bgm_box {
|
||||||
margin-bottom: 30px;
|
margin-left: -75px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.land_right .title {
|
/* --- 桌面端通用的基础样式合并 (源自原1440/1920) --- */
|
||||||
font-size: 32px;
|
.footer_top,
|
||||||
}
|
.footer_text {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.land_right .land_des {
|
.land_content {
|
||||||
font-size: 14px;
|
max-width: 1080px;
|
||||||
}
|
height: 607px;
|
||||||
|
}
|
||||||
|
|
||||||
.land_right .footer {
|
.land_right {
|
||||||
padding: 0 40px;
|
padding: 40px;
|
||||||
}
|
padding-top: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.land_logo {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.land_right .title {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.land_right .land_des {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.land_right .footer {
|
||||||
|
padding: 0 40px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -91,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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -103,7 +112,7 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.mod_third #top_third{
|
body.mod_third #top_third {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -118,7 +127,7 @@
|
|||||||
body.mod_third .top_bar {
|
body.mod_third .top_bar {
|
||||||
border-top-right-radius: 12px;
|
border-top-right-radius: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 平板端及以下 (<= 1200px)
|
* 平板端及以下 (<= 1200px)
|
||||||
@@ -201,17 +210,21 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.land_right .beian , .land_right .copyright {
|
.land_right .beian,
|
||||||
|
.land_right .copyright {
|
||||||
color: #293563;
|
color: #293563;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 小屏平板 (<= 960px)
|
* 小屏平板 (<= 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -219,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%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -237,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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -249,7 +265,7 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.mod_third_s #top_third{
|
body.mod_third_s #top_third {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -260,17 +276,19 @@
|
|||||||
.top_menu_box {
|
.top_menu_box {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 手机端 (<= 540px)
|
* 手机端 (<= 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top_right {
|
.top_right {
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
@@ -282,11 +300,15 @@
|
|||||||
height: 54px;
|
height: 54px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.moment_cat_nav, .posts_cat_nav, .photos_cat_nav {
|
.moment_cat_nav,
|
||||||
|
.posts_cat_nav,
|
||||||
|
.photos_cat_nav,
|
||||||
|
.friends_cat_nav {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#post_item,#photos_item {
|
#post_item,
|
||||||
|
#photos_item {
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -305,7 +327,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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -337,7 +360,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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -351,7 +376,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;
|
||||||
}
|
}
|
||||||
@@ -360,12 +386,15 @@
|
|||||||
width: calc(83px*3);
|
width: calc(83px*3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.t_media_item , a.up_img_btn{
|
.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;
|
||||||
}
|
}
|
||||||
@@ -378,7 +407,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;
|
||||||
@@ -388,13 +422,14 @@
|
|||||||
.top_left {
|
.top_left {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top_left .top_logo {
|
.top_left .top_logo {
|
||||||
display: block;
|
display: block;
|
||||||
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;
|
||||||
@@ -434,7 +469,8 @@
|
|||||||
height: 240px;
|
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;
|
||||||
@@ -452,7 +488,11 @@
|
|||||||
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -460,7 +500,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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -539,7 +579,8 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.land_right .beian , .land_right .copyright {
|
.land_right .beian,
|
||||||
|
.land_right .copyright {
|
||||||
color: #293563;
|
color: #293563;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -601,7 +642,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;
|
||||||
@@ -612,7 +654,12 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player_mod .tool , a.m_prev , a.m_next , .timer , a.m_volume , .player_hand {
|
.player_mod .tool,
|
||||||
|
a.m_prev,
|
||||||
|
a.m_next,
|
||||||
|
.timer,
|
||||||
|
a.m_volume,
|
||||||
|
.player_hand {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -691,25 +738,28 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body.mod_third_s .footer_nav_box .right {
|
body.mod_third_s .footer_nav_box .right {
|
||||||
width:100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 手机端文章目录调整 */
|
/* 手机端文章目录调整 */
|
||||||
h3.listree-titles {
|
h3.listree-titles {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
padding: 9px 0;
|
padding: 9px 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#listree-ol li a {
|
#listree-ol li a {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#listree-ol {
|
#listree-ol {
|
||||||
margin: 10px 0 15px -10px;
|
margin: 10px 0 15px -10px;
|
||||||
padding-right: 15px;
|
padding-right: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#listree-ol li {
|
#listree-ol li {
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
@@ -721,9 +771,9 @@
|
|||||||
.footer_menu a.playing-music i,
|
.footer_menu a.playing-music i,
|
||||||
.footer_menu a.playing-music .title {
|
.footer_menu a.playing-music .title {
|
||||||
color: #4CAF50;
|
color: #4CAF50;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
+224
-27
@@ -1,36 +1,233 @@
|
|||||||
// 接管手机端底部音乐按钮
|
// 接管手机端底部音乐按钮
|
||||||
function modify_m_bottom_music_button_link() {
|
function modify_m_bottom_music_button_link() {
|
||||||
const music = document.querySelector('a[href*="#m_bottom_music_button"]');
|
const music = document.querySelector('a[href*="#m_bottom_music_button"]');
|
||||||
if (!music) return;
|
if (!music) return;
|
||||||
music.addEventListener('click', function(event) {
|
music.addEventListener('click', function (event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
mu_box_show();
|
if (!box_up) mu_box_show();
|
||||||
});
|
else mu_box_hide(0);
|
||||||
}
|
|
||||||
|
|
||||||
// 视频默认正方形，播放恢复比例
|
|
||||||
function modify_moment_video_size() {
|
|
||||||
const videos = document.querySelectorAll('.pix_video');
|
|
||||||
videos.forEach(video => {
|
|
||||||
if (!video.hasAttribute('data-video-events-bound')) {
|
|
||||||
video.addEventListener('play', () => {
|
|
||||||
video.classList.add('is-playing');
|
|
||||||
});
|
|
||||||
video.addEventListener('ended', () => {
|
|
||||||
video.classList.remove('is-playing');
|
|
||||||
});
|
|
||||||
video.setAttribute('data-video-events-bound', 'true');
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 视频默认正方形，播放恢复比例（接入灯箱后已无用）
|
||||||
|
// function modify_moment_video_size() {
|
||||||
|
// const videos = document.querySelectorAll('.pix_video');
|
||||||
|
// videos.forEach(video => {
|
||||||
|
// if (!video.hasAttribute('data-video-events-bound')) {
|
||||||
|
// video.addEventListener('play', () => {
|
||||||
|
// video.classList.add('is-playing');
|
||||||
|
// });
|
||||||
|
// video.addEventListener('ended', () => {
|
||||||
|
// video.classList.remove('is-playing');
|
||||||
|
// });
|
||||||
|
// video.setAttribute('data-video-events-bound', 'true');
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// 登录逻辑
|
||||||
|
let csrfToken = '';
|
||||||
|
let publicKey = '';
|
||||||
|
let loginTimer = null;
|
||||||
|
let countdownSeconds = 3;
|
||||||
|
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 = '加载中...';
|
||||||
|
|
||||||
|
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) {
|
||||||
|
return 'error';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打开弹窗逻辑
|
||||||
|
async function open_login_box() {
|
||||||
|
if (loginTimer) {
|
||||||
|
clearInterval(loginTimer);
|
||||||
|
}
|
||||||
|
countdownSeconds = 3;
|
||||||
|
const success = await fetchCSRFToken();
|
||||||
|
if (success === 'logged') {
|
||||||
|
cocoMessage.success('您已经署名过了，请刷新');
|
||||||
|
login_modal.classList.remove('show');
|
||||||
|
} else if (success === 'ok') {
|
||||||
|
loginTimer = setInterval(() => {
|
||||||
|
if (countdownSeconds > 0) {
|
||||||
|
login_loginBtn.textContent = '请稍等...' + countdownSeconds;
|
||||||
|
} else {
|
||||||
|
clearInterval(loginTimer);
|
||||||
|
login_loginBtn.textContent = '署 名';
|
||||||
|
login_loginBtn.disabled = false;
|
||||||
|
}
|
||||||
|
countdownSeconds--;
|
||||||
|
}, 1000);
|
||||||
|
} else {
|
||||||
|
cocoMessage.error('服务器错误，请刷新');
|
||||||
|
login_modal.classList.remove('show');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关闭弹窗
|
||||||
|
login_closeBtn.addEventListener('click', () => {
|
||||||
|
login_modal.classList.remove('show');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 加密逻辑
|
||||||
|
function encryptPassword(password) {
|
||||||
|
try {
|
||||||
|
const encrypt = new JSEncrypt();
|
||||||
|
encrypt.setPublicKey(publicKey);
|
||||||
|
return encrypt.encrypt(password);
|
||||||
|
} catch (e) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交登录
|
||||||
|
login_loginBtn.addEventListener('click', async () => {
|
||||||
|
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_loginBtn.textContent = '验证中...';
|
||||||
|
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')) {
|
||||||
|
cocoMessage.success('署名成功，正在跳转...');
|
||||||
|
login_loginBtn.textContent = '跳转中...';
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.reload();
|
||||||
|
}, 800);
|
||||||
|
} else if (finalUrl.includes('error=invalid-credential')) {
|
||||||
|
cocoMessage.warning('署名人与心上锁不匹配');
|
||||||
|
fetchCSRFToken();
|
||||||
|
} else {
|
||||||
|
cocoMessage.error('速度过快，请稍后重试');
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
cocoMessage.error('服务器连接失败');
|
||||||
|
} finally {
|
||||||
|
loginTimer = setInterval(() => {
|
||||||
|
if (countdownSeconds > 0) {
|
||||||
|
login_loginBtn.textContent = '请稍等...' + countdownSeconds;
|
||||||
|
} else {
|
||||||
|
clearInterval(loginTimer);
|
||||||
|
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() {
|
||||||
|
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 令牌');
|
||||||
|
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) {
|
||||||
|
cocoMessage.success('您已成功退出登录');
|
||||||
|
setTimeout(() => {
|
||||||
|
window.location.reload();
|
||||||
|
}, 800);
|
||||||
|
} else {
|
||||||
|
throw new Error('退出请求被拒绝');
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Logout Error:', err);
|
||||||
|
cocoMessage.error('退出失败，请手动刷新页面');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showPixarCard() {
|
||||||
|
const wrapper = document.getElementById("pixarNoticeWrapper");
|
||||||
|
wrapper.style.display = "flex";
|
||||||
|
}
|
||||||
|
|
||||||
|
function hidePixarCard() {
|
||||||
|
const wrapper = document.getElementById("pixarNoticeWrapper");
|
||||||
|
wrapper.style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
function confirmPixarAction() {
|
||||||
|
customLogout();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -46,18 +243,18 @@ function modify_moment_video_size() {
|
|||||||
|
|
||||||
// 集合：PJAX（初始化执行+PJAX执行）
|
// 集合：PJAX（初始化执行+PJAX执行）
|
||||||
function init_anian_pjax() {
|
function init_anian_pjax() {
|
||||||
modify_moment_video_size();
|
// modify_moment_video_size();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 集合：初始化（仅初始化执行一次）
|
// 集合：初始化（仅初始化执行一次）
|
||||||
function init_anian_inport() {
|
function init_anian_inport() {
|
||||||
init_anian_pjax();
|
init_anian_pjax();
|
||||||
modify_m_bottom_music_button_link();
|
modify_m_bottom_music_button_link();
|
||||||
}
|
}
|
||||||
|
|
||||||
// PJAX监听
|
// PJAX监听
|
||||||
document.addEventListener('pjax:complete', function () {
|
document.addEventListener('pjax:complete', function () {
|
||||||
init_anian_pjax();
|
init_anian_pjax();
|
||||||
})
|
})
|
||||||
|
|
||||||
// 入口
|
// 入口
|
||||||
|
|||||||
+935
-782
File diff suppressed because it is too large
Load Diff
+227
-221
@@ -4,33 +4,33 @@
|
|||||||
|
|
||||||
|
|
||||||
function updateMusicBtnColor(state) {
|
function updateMusicBtnColor(state) {
|
||||||
if (state === 'play') {
|
if (state === 'play') {
|
||||||
// 播放
|
// 播放
|
||||||
$('.bg_music').css("background", "rgb(172, 202, 181)");
|
$('.bg_music').css("background", "rgb(172, 202, 181)");
|
||||||
$('.bg_music i').css("color", "white");
|
$('.bg_music i').css("color", "white");
|
||||||
} else if (state === 'pause') {
|
} else if (state === 'pause') {
|
||||||
// 暂停
|
// 暂停
|
||||||
$('.bg_music').css("background", "#EBF2ED");
|
$('.bg_music').css("background", "#EBF2ED");
|
||||||
$('.bg_music i').css("color", "rgb(174, 174, 174)");
|
$('.bg_music i').css("color", "rgb(174, 174, 174)");
|
||||||
} else {
|
} else {
|
||||||
// 默认
|
// 默认
|
||||||
$('.bg_music').css("background", "#EBF2ED");
|
$('.bg_music').css("background", "#EBF2ED");
|
||||||
$('.bg_music i').css("color", "rgb(174, 174, 174)");
|
$('.bg_music i').css("color", "rgb(174, 174, 174)");
|
||||||
|
|
||||||
// ✅ 初始化：隐藏歌词容器（真正关闭歌词功能）
|
// ✅ 初始化：隐藏歌词容器（真正关闭歌词功能）
|
||||||
if (Theme.play.lrc_open && typeof lyricsContainer !== 'undefined') {
|
if (Theme.play.lrc_open && typeof lyricsContainer !== 'undefined') {
|
||||||
lyricsContainer.css('display', 'none');
|
lyricsContainer.css('display', 'none');
|
||||||
}
|
}
|
||||||
|
|
||||||
// ✅ 按钮样式置为关闭状态视觉
|
// ✅ 按钮样式置为关闭状态视觉
|
||||||
$('a.bg_lrc i').css("color", "#aeaeae");
|
$('a.bg_lrc i').css("color", "#aeaeae");
|
||||||
$('a.bg_lrc').css("background", "#EBF2ED");
|
$('a.bg_lrc').css("background", "#EBF2ED");
|
||||||
|
|
||||||
$('.t_dark.top_tool.icon_color').hide();
|
$('.t_dark.top_tool.icon_color').hide();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var rem=[];
|
var rem = [];
|
||||||
rem.audio = $('<audio id="pix_player"></audio>');
|
rem.audio = $('<audio id="pix_player"></audio>');
|
||||||
|
|
||||||
var audiobox = $('<audio id="pix_player">');
|
var audiobox = $('<audio id="pix_player">');
|
||||||
@@ -43,30 +43,30 @@ var Paused = true;
|
|||||||
var playLrc = '';
|
var playLrc = '';
|
||||||
|
|
||||||
var m_cover = $('.player_mod .m_cover img');
|
var m_cover = $('.player_mod .m_cover img');
|
||||||
var m_title = $('.player_mod .m_info h2');
|
var m_title = $('.player_mod .m_info h2');
|
||||||
var m_artist = $('.player_mod .m_info small');
|
var m_artist = $('.player_mod .m_info small');
|
||||||
|
|
||||||
|
|
||||||
$(document).on('click','.play_btn',function(){
|
$(document).on('click', '.play_btn', function () {
|
||||||
$('.player_box').append(audiobox);
|
$('.player_box').append(audiobox);
|
||||||
$('.pix_player').removeClass('playing');
|
$('.pix_player').removeClass('playing');
|
||||||
$(this).parents('.pix_player').addClass('playing');
|
$(this).parents('.pix_player').addClass('playing');
|
||||||
var url = $(this).attr('data');
|
var url = $(this).attr('data');
|
||||||
var lrc = $(this).attr('lrc');
|
var lrc = $(this).attr('lrc');
|
||||||
var audio_s = $('#pix_player').attr('src');
|
var audio_s = $('#pix_player').attr('src');
|
||||||
|
|
||||||
var meta = $(this).siblings('.player_meta').find('.title');
|
var meta = $(this).siblings('.player_meta').find('.title');
|
||||||
playLrc = lrc;
|
playLrc = lrc;
|
||||||
m_title.text(meta.find('.name').text());
|
m_title.text(meta.find('.name').text());
|
||||||
m_artist.text(meta.find('.author').text());
|
m_artist.text(meta.find('.author').text());
|
||||||
m_cover.attr('src',$('.pix_player.playing .player_thum img').attr('src'));
|
m_cover.attr('src', $('.pix_player.playing .player_thum img').attr('src'));
|
||||||
|
|
||||||
if(audio_s == '' || audio_s !== url){
|
if (audio_s == '' || audio_s !== url) {
|
||||||
$('#pix_player').attr('src',url);
|
$('#pix_player').attr('src', url);
|
||||||
audiobox[0].play();
|
audiobox[0].play();
|
||||||
} else {
|
} else {
|
||||||
pasued();
|
pasued();
|
||||||
}
|
}
|
||||||
|
|
||||||
$(".play_btn").html("<i class='ri-play-line'></i>");
|
$(".play_btn").html("<i class='ri-play-line'></i>");
|
||||||
|
|
||||||
@@ -74,60 +74,61 @@ $(document).on('click','.play_btn',function(){
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 初始化函数
|
// 初始化函数
|
||||||
function initAudio(){
|
function initAudio() {
|
||||||
audiobox[0].addEventListener("play",audioplay);
|
audiobox[0].addEventListener("play", audioplay);
|
||||||
audiobox[0].addEventListener("pause",audiopause);
|
audiobox[0].addEventListener("pause", audiopause);
|
||||||
audiobox[0].addEventListener("timeupdate",updateProcess);
|
audiobox[0].addEventListener("timeupdate", updateProcess);
|
||||||
if(Theme.bgm_open == true){
|
if (Theme.bgm_open == true) {
|
||||||
audiobox[0].addEventListener("ended",endplay);
|
audiobox[0].addEventListener("ended", endplay);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//音乐结束触发
|
//音乐结束触发
|
||||||
function endplay(){
|
function endplay() {
|
||||||
var index = $('.musci_list_box li.active').index() + 1;
|
var index = $('.musci_list_box li.active').index() + 1;
|
||||||
var max = $('.musci_list_box li').length;
|
var max = $('.musci_list_box li').length;
|
||||||
var new_mid = 0;
|
var new_mid = 0;
|
||||||
if(loop=="one"){
|
if (loop == "one") {
|
||||||
new_mid = index-1;
|
new_mid = index - 1;
|
||||||
}else if(loop=="none") {
|
} else if (loop == "none") {
|
||||||
new_mid = (Math.floor(Math.random() * max) + 1)-1;
|
new_mid = (Math.floor(Math.random() * max) + 1) - 1;
|
||||||
}else if(loop=="all") {
|
} else if (loop == "all") {
|
||||||
new_mid = index > (max - 1) ? 0 : index;
|
new_mid = index > (max - 1) ? 0 : index;
|
||||||
}
|
}
|
||||||
mulist_play(new_mid);
|
mulist_play(new_mid);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 当音乐标签加载完成之后所触发的函数
|
// 当音乐标签加载完成之后所触发的函数
|
||||||
audiobox[0].oncanplay=function(){
|
audiobox[0].oncanplay = function () {
|
||||||
var duration=handleTime(this.duration);
|
var duration = handleTime(this.duration);
|
||||||
var currenttime=handleTime(this.currentTime);
|
var currenttime = handleTime(this.currentTime);
|
||||||
$(".timer .total_time").text(duration);
|
$(".timer .total_time").text(duration);
|
||||||
$(".timer .current_time").text(currenttime);
|
$(".timer .current_time").text(currenttime);
|
||||||
initAudio();
|
initAudio();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 音乐播放暂停的函数
|
// 音乐播放暂停的函数
|
||||||
function pasued(){
|
function pasued() {
|
||||||
if(Paused === false){
|
if (Paused === false) {
|
||||||
audiobox[0].pause();
|
audiobox[0].pause();
|
||||||
}else{
|
} else {
|
||||||
audiobox[0].play();
|
audiobox[0].play();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 音乐播放之后触发的函数
|
// 音乐播放之后触发的函数
|
||||||
function audioplay(){
|
function audioplay() {
|
||||||
|
box_up = true;
|
||||||
// 播放时
|
// 播放时
|
||||||
updateMusicBtnColor('play');
|
updateMusicBtnColor('play');
|
||||||
var mheight = $('.footer_nav_box').height();
|
var mheight = $('.footer_nav_box').height();
|
||||||
$('.footer_nav_box').animate({top:-mheight},200,'linear');
|
$('.footer_nav_box').animate({ top: -mheight }, 200, 'linear');
|
||||||
Paused=false;
|
Paused = false;
|
||||||
$(".pix_player.playing .play_btn").html("<i class='ri-pause-line'></i>");
|
$(".pix_player.playing .play_btn").html("<i class='ri-pause-line'></i>");
|
||||||
$('.m_play').html('<i class="ri-pause-circle-fill"></i>');
|
$('.m_play').html('<i class="ri-pause-circle-fill"></i>');
|
||||||
|
|
||||||
// 播放时显示歌词
|
// 播放时显示歌词
|
||||||
if(Theme.play.lrc_open && typeof lyricsContainer !== 'undefined'){
|
if (Theme.play.lrc_open && typeof lyricsContainer !== 'undefined') {
|
||||||
lyricsContainer.css('display', 'block');
|
lyricsContainer.css('display', 'block');
|
||||||
$('a.bg_lrc i').css("color", "");
|
$('a.bg_lrc i').css("color", "");
|
||||||
$('a.bg_lrc').css("background", "");
|
$('a.bg_lrc').css("background", "");
|
||||||
@@ -135,15 +136,15 @@ function audioplay(){
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 音乐暂停之后触发的函数
|
// 音乐暂停之后触发的函数
|
||||||
function audiopause(){
|
function audiopause() {
|
||||||
// 暂停时
|
// 暂停时
|
||||||
updateMusicBtnColor('pause');
|
updateMusicBtnColor('pause');
|
||||||
Paused=true;
|
Paused = true;
|
||||||
$(".pix_player.playing .play_btn").html("<i class='ri-play-line'></i>");
|
$(".pix_player.playing .play_btn").html("<i class='ri-play-line'></i>");
|
||||||
$('.m_play').html('<i class="ri-play-circle-fill"></i>');
|
$('.m_play').html('<i class="ri-play-circle-fill"></i>');
|
||||||
|
|
||||||
// 暂停时隐藏歌词
|
// 暂停时隐藏歌词
|
||||||
if(Theme.play.lrc_open && typeof lyricsContainer !== 'undefined'){
|
if (Theme.play.lrc_open && typeof lyricsContainer !== 'undefined') {
|
||||||
lyricsContainer.css('display', 'none');
|
lyricsContainer.css('display', 'none');
|
||||||
$('a.bg_lrc i').css("color", "#aeaeae");
|
$('a.bg_lrc i').css("color", "#aeaeae");
|
||||||
$('a.bg_lrc').css("background", "#EBF2ED");
|
$('a.bg_lrc').css("background", "#EBF2ED");
|
||||||
@@ -151,29 +152,29 @@ function audiopause(){
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 更新进度条
|
// 更新进度条
|
||||||
function updateProcess(){
|
function updateProcess() {
|
||||||
if(Paused!==false) return true;
|
if (Paused !== false) return true;
|
||||||
var duration = handleTime(this.duration);
|
var duration = handleTime(this.duration);
|
||||||
var currenttime = handleTime(this.currentTime);
|
var currenttime = handleTime(this.currentTime);
|
||||||
var percent = audiobox[0].currentTime/audiobox[0].duration;
|
var percent = audiobox[0].currentTime / audiobox[0].duration;
|
||||||
$(".player_mod .player_bar .progress").css('width',(percent)*100+"%");
|
$(".player_mod .player_bar .progress").css('width', (percent) * 100 + "%");
|
||||||
$(".timer .total_time").text(duration);
|
$(".timer .total_time").text(duration);
|
||||||
$(".timer .current_time").text(currenttime);
|
$(".timer .current_time").text(currenttime);
|
||||||
}
|
}
|
||||||
|
|
||||||
//循环歌曲 m_loop
|
//循环歌曲 m_loop
|
||||||
$(document).on('click','.m_loop',function(){
|
$(document).on('click', '.m_loop', function () {
|
||||||
if($(this).hasClass('all')){
|
if ($(this).hasClass('all')) {
|
||||||
$(this).removeClass('all');
|
$(this).removeClass('all');
|
||||||
$(this).addClass('one');
|
$(this).addClass('one');
|
||||||
$(this).html('<i class="ri-repeat-one-line"></i>');
|
$(this).html('<i class="ri-repeat-one-line"></i>');
|
||||||
loop = 'one';
|
loop = 'one';
|
||||||
}else if(($(this).hasClass('one'))){
|
} else if (($(this).hasClass('one'))) {
|
||||||
$(this).removeClass('one');
|
$(this).removeClass('one');
|
||||||
$(this).addClass('none');
|
$(this).addClass('none');
|
||||||
$(this).html('<i class="ri-shuffle-line"></i>');
|
$(this).html('<i class="ri-shuffle-line"></i>');
|
||||||
loop = 'none';
|
loop = 'none';
|
||||||
}else {
|
} else {
|
||||||
$(this).removeClass('none');
|
$(this).removeClass('none');
|
||||||
$(this).addClass('all');
|
$(this).addClass('all');
|
||||||
$(this).html('<i class="ri-repeat-line"></i>');
|
$(this).html('<i class="ri-repeat-line"></i>');
|
||||||
@@ -182,65 +183,65 @@ $(document).on('click','.m_loop',function(){
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 时间处理的函数
|
// 时间处理的函数
|
||||||
function handleTime(seconedTime){
|
function handleTime(seconedTime) {
|
||||||
var minute=parseInt(seconedTime/60,10);
|
var minute = parseInt(seconedTime / 60, 10);
|
||||||
if(minute<10){minute="0"+minute};
|
if (minute < 10) { minute = "0" + minute };
|
||||||
var second=(seconedTime-minute*60).toFixed(2).split(".")[0];
|
var second = (seconedTime - minute * 60).toFixed(2).split(".")[0];
|
||||||
if(second<10){second="0"+second};
|
if (second < 10) { second = "0" + second };
|
||||||
var Time=minute+":"+second;
|
var Time = minute + ":" + second;
|
||||||
return Time;
|
return Time;
|
||||||
}
|
}
|
||||||
|
|
||||||
//视频播放
|
//视频播放
|
||||||
var video = $('#pix_video_player');
|
var video = $('#pix_video_player');
|
||||||
$(document).on('click','.video_play_btn',function(){
|
$(document).on('click', '.video_play_btn', function () {
|
||||||
var video = $(this).siblings('#pix_video_player');
|
var video = $(this).siblings('#pix_video_player');
|
||||||
video.attr('controls','controls');
|
video.attr('controls', 'controls');
|
||||||
$(this).remove();
|
$(this).remove();
|
||||||
video[0].play();
|
video[0].play();
|
||||||
});
|
});
|
||||||
|
|
||||||
function stopOtherMedia(element) {
|
function stopOtherMedia(element) {
|
||||||
$("video").not(element).each(function(index, video) {
|
$("video").not(element).each(function (index, video) {
|
||||||
video.pause();
|
video.pause();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
//背景音乐
|
//背景音乐
|
||||||
function autoload_music() {
|
function autoload_music() {
|
||||||
var state = Theme.bgm_open;
|
var state = Theme.bgm_open;
|
||||||
var api = `${Theme.play.pix_mu_api || 'https://api.i-meto.com/meting/api'}?server=:server&type=:type&id=:id&r=:r`
|
var api = `${Theme.play.pix_mu_api || 'https://api.i-meto.com/meting/api'}?server=:server&type=:type&id=:id&r=:r`
|
||||||
var meta = {
|
var meta = {
|
||||||
server : Theme.play.mu_source,
|
server: Theme.play.mu_source,
|
||||||
type : Theme.play.mu_type,
|
type: Theme.play.mu_type,
|
||||||
id : Theme.play.play_id,
|
id: Theme.play.play_id,
|
||||||
auth : ''
|
auth: ''
|
||||||
}
|
}
|
||||||
if(state == true){
|
if (state == true) {
|
||||||
let url = api.replace(":server", meta.server).replace(":type", meta.type).replace(":id", meta.id).replace(":auth", meta.auth).replace(":r", Math.random());
|
let url = api.replace(":server", meta.server).replace(":type", meta.type).replace(":id", meta.id).replace(":auth", meta.auth).replace(":r", Math.random());
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: "get",
|
type: "get",
|
||||||
url:url,
|
url: url,
|
||||||
success: function (res) {
|
success: function (res) {
|
||||||
if(res.length > 0){
|
if (res.length > 0) {
|
||||||
var new_mid = 0;
|
var new_mid = 0;
|
||||||
if(loop=="none") {
|
if (loop == "none") {
|
||||||
new_mid = (Math.floor(Math.random() * res.length) + 1)-1;
|
new_mid = (Math.floor(Math.random() * res.length) + 1) - 1;
|
||||||
}
|
}
|
||||||
var f = res[new_mid];
|
var f = res[new_mid];
|
||||||
var playnum = 1;
|
var playnum = 1;
|
||||||
|
|
||||||
audiobox.attr('src',f.url);
|
audiobox.attr('src', f.url);
|
||||||
playLrc = f.lrc;
|
playLrc = f.lrc;
|
||||||
$('.player_mod .m_cover img').attr('src',f.pic);
|
$('.player_mod .m_cover img').attr('src', f.pic);
|
||||||
$('.player_mod .m_info h2').text(f.title || f.name);
|
$('.player_mod .m_info h2').text(f.title || f.name);
|
||||||
$('.player_mod .m_info small').text(f.author || f.artist);
|
$('.player_mod .m_info small').text(f.author || f.artist);
|
||||||
$('.player_box').append(audiobox);
|
$('.player_box').append(audiobox);
|
||||||
|
|
||||||
playlist.push(res);
|
playlist.push(res);
|
||||||
|
|
||||||
$.each(res, function(key, data) {
|
$.each(res, function (key, data) {
|
||||||
$(".musci_list_box").append('<li class="item" id='+ key +'>' + playnum++ + '. ' + (data.title || data.name) + ' - ' + (data.author || data.artist) + '</li>');
|
$(".musci_list_box").append('<li class="item" id=' + key + '>' + playnum++ + '. ' + (data.title || data.name) + ' - ' + (data.author || data.artist) + '</li>');
|
||||||
});
|
});
|
||||||
|
|
||||||
$(".musci_list_box li").removeClass('active').eq(new_mid).addClass('active');
|
$(".musci_list_box li").removeClass('active').eq(new_mid).addClass('active');
|
||||||
@@ -253,27 +254,27 @@ function autoload_music() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
//播放选中音乐
|
//播放选中音乐
|
||||||
function mulist_play(index){
|
function mulist_play(index) {
|
||||||
audiobox[0].removeEventListener("play",audioplay);
|
audiobox[0].removeEventListener("play", audioplay);
|
||||||
audiobox[0].removeEventListener("pause",audiopause);
|
audiobox[0].removeEventListener("pause", audiopause);
|
||||||
$(".pix_player.playing .play_btn").html("<i class='ri-play-line'></i>");
|
$(".pix_player.playing .play_btn").html("<i class='ri-play-line'></i>");
|
||||||
$(".m_play").html('<i class="ri-pause-circle-fill"></i>');
|
$(".m_play").html('<i class="ri-pause-circle-fill"></i>');
|
||||||
$('.musci_list_box li').eq(index).addClass('active').siblings().removeClass('active');
|
$('.musci_list_box li').eq(index).addClass('active').siblings().removeClass('active');
|
||||||
scrollToPosition(index);
|
scrollToPosition(index);
|
||||||
var data = playlist[0][index];
|
var data = playlist[0][index];
|
||||||
playLrc = data.lrc;
|
playLrc = data.lrc;
|
||||||
audiobox.attr('src',data.url);
|
audiobox.attr('src', data.url);
|
||||||
m_cover.attr('src',data.pic);
|
m_cover.attr('src', data.pic);
|
||||||
m_title.text(data.title || data.name);
|
m_title.text(data.title || data.name);
|
||||||
m_artist.text(data.author || data.artist);
|
m_artist.text(data.author || data.artist);
|
||||||
audiobox[0].play();
|
audiobox[0].play();
|
||||||
|
|
||||||
Paused = false;
|
Paused = false;
|
||||||
|
|
||||||
updateMusicBtnColor('play');
|
updateMusicBtnColor('play');
|
||||||
|
|
||||||
// 新增：切换歌曲后强制显示歌词
|
// 新增：切换歌曲后强制显示歌词
|
||||||
if(Theme.play.lrc_open && typeof lyricsContainer !== 'undefined'){
|
if (Theme.play.lrc_open && typeof lyricsContainer !== 'undefined') {
|
||||||
lyricsContainer.css('display', 'block');
|
lyricsContainer.css('display', 'block');
|
||||||
$('a.bg_lrc i').css("color", "");
|
$('a.bg_lrc i').css("color", "");
|
||||||
$('a.bg_lrc').css("background", "");
|
$('a.bg_lrc').css("background", "");
|
||||||
@@ -284,14 +285,14 @@ function mulist_play(index){
|
|||||||
$(document).on('click', '.ri-bar-chart-horizontal-line', function () {
|
$(document).on('click', '.ri-bar-chart-horizontal-line', function () {
|
||||||
var position = $('.musci_list_box li.active').index()
|
var position = $('.musci_list_box li.active').index()
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
if($('.m_list').attr('aria-expanded')){
|
if ($('.m_list').attr('aria-expanded')) {
|
||||||
scrollToPosition(position)
|
scrollToPosition(position)
|
||||||
}
|
}
|
||||||
}, 200);
|
}, 200);
|
||||||
});
|
});
|
||||||
|
|
||||||
//点击列表播放
|
//点击列表播放
|
||||||
$(document).on('click','.musci_list_box li',function(){
|
$(document).on('click', '.musci_list_box li', function () {
|
||||||
$('.musci_list_box li').removeClass('active');
|
$('.musci_list_box li').removeClass('active');
|
||||||
$(this).addClass('active');
|
$(this).addClass('active');
|
||||||
var id = $(this).attr('id');
|
var id = $(this).attr('id');
|
||||||
@@ -299,26 +300,26 @@ $(document).on('click','.musci_list_box li',function(){
|
|||||||
});
|
});
|
||||||
|
|
||||||
//上一首
|
//上一首
|
||||||
$(document).on('click','.m_prev',function(){
|
$(document).on('click', '.m_prev', function () {
|
||||||
var index = $('.musci_list_box li.active').index() - 1;
|
var index = $('.musci_list_box li.active').index() - 1;
|
||||||
var max = $('.musci_list_box li').length;
|
var max = $('.musci_list_box li').length;
|
||||||
var new_mid = 0;
|
var new_mid = 0;
|
||||||
if(loop=="none") {
|
if (loop == "none") {
|
||||||
new_mid = (Math.floor(Math.random() * max) + 1)-1;
|
new_mid = (Math.floor(Math.random() * max) + 1) - 1;
|
||||||
}else {
|
} else {
|
||||||
new_mid = index < 0 ? max - 1 : index;
|
new_mid = index < 0 ? max - 1 : index;
|
||||||
}
|
}
|
||||||
mulist_play(new_mid);
|
mulist_play(new_mid);
|
||||||
});
|
});
|
||||||
|
|
||||||
//下一首
|
//下一首
|
||||||
$(document).on('click','.m_next',function(){
|
$(document).on('click', '.m_next', function () {
|
||||||
var index = $('.musci_list_box li.active').index() + 1;
|
var index = $('.musci_list_box li.active').index() + 1;
|
||||||
var max = $('.musci_list_box li').length;
|
var max = $('.musci_list_box li').length;
|
||||||
var new_mid = 0;
|
var new_mid = 0;
|
||||||
if(loop=="none") {
|
if (loop == "none") {
|
||||||
new_mid = (Math.floor(Math.random() * max) + 1)-1;
|
new_mid = (Math.floor(Math.random() * max) + 1) - 1;
|
||||||
}else{
|
} else {
|
||||||
new_mid = index > (max - 1) ? 0 : index;
|
new_mid = index > (max - 1) ? 0 : index;
|
||||||
}
|
}
|
||||||
mulist_play(new_mid);
|
mulist_play(new_mid);
|
||||||
@@ -326,11 +327,11 @@ $(document).on('click','.m_next',function(){
|
|||||||
|
|
||||||
//播放和暂停
|
//播放和暂停
|
||||||
function m_play() {
|
function m_play() {
|
||||||
if(Paused === false){
|
if (Paused === false) {
|
||||||
audiobox[0].pause();
|
audiobox[0].pause();
|
||||||
$('.m_play').html('<i class="ri-play-circle-fill"></i>');
|
$('.m_play').html('<i class="ri-play-circle-fill"></i>');
|
||||||
Paused = true;
|
Paused = true;
|
||||||
}else{
|
} else {
|
||||||
audiobox[0].play();
|
audiobox[0].play();
|
||||||
$('.m_play').html('<i class="ri-pause-circle-fill"></i>');
|
$('.m_play').html('<i class="ri-pause-circle-fill"></i>');
|
||||||
Paused = false;
|
Paused = false;
|
||||||
@@ -338,8 +339,8 @@ function m_play() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
//播放按钮
|
//播放按钮
|
||||||
$(document).on('click','.m_play',function(){
|
$(document).on('click', '.m_play', function () {
|
||||||
if(!$("#pix_player").length > 0){
|
if (!$("#pix_player").length > 0) {
|
||||||
cocoMessage.error('没有音乐可播放');
|
cocoMessage.error('没有音乐可播放');
|
||||||
return false;
|
return false;
|
||||||
} else {
|
} else {
|
||||||
@@ -349,66 +350,70 @@ $(document).on('click','.m_play',function(){
|
|||||||
|
|
||||||
//触发显示播放器
|
//触发显示播放器
|
||||||
var trigger;
|
var trigger;
|
||||||
function mu_box_show(){
|
let box_up = false;
|
||||||
|
function mu_box_show() {
|
||||||
clearTimeout(trigger);
|
clearTimeout(trigger);
|
||||||
|
box_up = true;
|
||||||
var mheight = $('.footer_nav_box').height();
|
var mheight = $('.footer_nav_box').height();
|
||||||
$('.footer_nav_box').animate({top:-mheight},200,'linear');
|
$('.footer_nav_box').animate({ top: -mheight }, 200, 'linear');
|
||||||
}
|
}
|
||||||
|
|
||||||
function mu_box_hide() {
|
function mu_box_hide(time = 2000) {
|
||||||
trigger = setTimeout(function() {
|
clearTimeout(trigger);
|
||||||
// 获取屏幕宽度判断是否为手机端（与歌词容器响应式逻辑保持一致）
|
trigger = setTimeout(function () {
|
||||||
const isMobile = $(window).width() <= 767;
|
// 获取屏幕宽度判断是否为手机端（与歌词容器响应式逻辑保持一致）
|
||||||
// 手机端隐藏时额外向下偏移50px（可根据需要调整数值），非手机端保持默认0px
|
const isMobile = $(window).width() <= 767;
|
||||||
const hideTop = isMobile ? "50px" : "0px";
|
// 手机端隐藏时额外向下偏移50px（可根据需要调整数值），非手机端保持默认0px
|
||||||
|
const hideTop = isMobile ? "50px" : "0px";
|
||||||
// 执行隐藏动画
|
|
||||||
$('.footer_nav_box').animate({
|
// 执行隐藏动画
|
||||||
top: hideTop
|
$('.footer_nav_box').animate({
|
||||||
}, 200, 'linear');
|
top: hideTop
|
||||||
}, 2000);
|
}, 200, 'linear');
|
||||||
|
box_up = false;
|
||||||
|
}, time);
|
||||||
}
|
}
|
||||||
|
|
||||||
$(document).on('mouseenter', '.player_hand , .footer_nav_box', function(event) {
|
$(document).on('mouseenter', '.player_hand , .footer_nav_box', function (event) {
|
||||||
mu_box_show();
|
mu_box_show();
|
||||||
});
|
});
|
||||||
|
|
||||||
$(document).on('mouseleave', '.footer_nav_box .right_inner', function(event) {
|
$(document).on('mouseleave', '.footer_nav_box .right_inner', function (event) {
|
||||||
trigger = setTimeout(function(){
|
trigger = setTimeout(function () {
|
||||||
mu_box_hide();
|
mu_box_hide();
|
||||||
},2000);
|
}, 2000);
|
||||||
});
|
});
|
||||||
|
|
||||||
//音乐进度条跳转
|
//音乐进度条跳转
|
||||||
function getMousePosition(e){
|
function getMousePosition(e) {
|
||||||
var e = e || window.event;
|
var e = e || window.event;
|
||||||
var x = e.pageX;
|
var x = e.pageX;
|
||||||
var y = e.pageY;
|
var y = e.pageY;
|
||||||
return {'left':x,'top':y}
|
return { 'left': x, 'top': y }
|
||||||
}
|
}
|
||||||
|
|
||||||
$(document).on('click','.player_bar',function(){
|
$(document).on('click', '.player_bar', function () {
|
||||||
var long = (getMousePosition().left) - ($('.progress').offset().left);
|
var long = (getMousePosition().left) - ($('.progress').offset().left);
|
||||||
$('.progress').width(long);
|
$('.progress').width(long);
|
||||||
allTime = parseInt(audiobox[0].duration);
|
allTime = parseInt(audiobox[0].duration);
|
||||||
var nowtime = (long/$('.player_bar').width()) * allTime;
|
var nowtime = (long / $('.player_bar').width()) * allTime;
|
||||||
audiobox[0].currentTime = nowtime;
|
audiobox[0].currentTime = nowtime;
|
||||||
});
|
});
|
||||||
|
|
||||||
//音量调节 m_volume
|
//音量调节 m_volume
|
||||||
$(document).on('click','.m_volume',function(){
|
$(document).on('click', '.m_volume', function () {
|
||||||
if($(this).hasClass('mute')){
|
if ($(this).hasClass('mute')) {
|
||||||
$(this).removeClass('mute');
|
$(this).removeClass('mute');
|
||||||
$(this).html('<i class="ri-volume-down-line"></i>');
|
$(this).html('<i class="ri-volume-down-line"></i>');
|
||||||
audiobox[0].muted = false;
|
audiobox[0].muted = false;
|
||||||
}else{
|
} else {
|
||||||
$(this).addClass('mute');
|
$(this).addClass('mute');
|
||||||
audiobox[0].muted = true;
|
audiobox[0].muted = true;
|
||||||
$(this).html('<i class="ri-volume-mute-line"></i>');
|
$(this).html('<i class="ri-volume-mute-line"></i>');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
$(document).on('click','.vo_bar',function(){
|
$(document).on('click', '.vo_bar', function () {
|
||||||
var long = (getMousePosition().top) - ($(this).offset().top)
|
var long = (getMousePosition().top) - ($(this).offset().top)
|
||||||
var meter = long / $(this).height();
|
var meter = long / $(this).height();
|
||||||
var finalLong = 1 - meter;
|
var finalLong = 1 - meter;
|
||||||
@@ -418,34 +423,34 @@ $(document).on('click','.vo_bar',function(){
|
|||||||
|
|
||||||
//文章歌曲
|
//文章歌曲
|
||||||
function autoload_posts_music() {
|
function autoload_posts_music() {
|
||||||
post_playlist.splice(0,post_playlist.length);
|
post_playlist.splice(0, post_playlist.length);
|
||||||
var pid = $('.posts_mu_list').attr('pid');
|
var pid = $('.posts_mu_list').attr('pid');
|
||||||
var api = `${Theme.play.pix_mu_api || 'https://api.i-meto.com/meting/api'}?server=:server&type=:type&id=:id&r=:r`
|
var api = `${Theme.play.pix_mu_api || 'https://api.i-meto.com/meting/api'}?server=:server&type=:type&id=:id&r=:r`
|
||||||
var meta = {
|
var meta = {
|
||||||
server : $('.posts_mu_list').attr('mus_source'),
|
server: $('.posts_mu_list').attr('mus_source'),
|
||||||
type : $('.posts_mu_list').attr('mus_type'),
|
type: $('.posts_mu_list').attr('mus_type'),
|
||||||
id : $('.posts_mu_list').attr('plays_id'),
|
id: $('.posts_mu_list').attr('plays_id'),
|
||||||
mu_on: $('.posts_mu_list').attr('mu_on'),
|
mu_on: $('.posts_mu_list').attr('mu_on'),
|
||||||
auth : ''
|
auth: ''
|
||||||
}
|
}
|
||||||
if(pid && meta.mu_on=='true'){
|
if (pid && meta.mu_on == 'true') {
|
||||||
let url = api.replace(":server", meta.server).replace(":type", meta.type).replace(":id", meta.id).replace(":auth", meta.auth).replace(":r", Math.random());
|
let url = api.replace(":server", meta.server).replace(":type", meta.type).replace(":id", meta.id).replace(":auth", meta.auth).replace(":r", Math.random());
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: "get",
|
type: "get",
|
||||||
url:url,
|
url: url,
|
||||||
beforeSend: function () {
|
beforeSend: function () {
|
||||||
$('.posts_mu_list').html('<div class="loading_box"><div uk-spinner></div></div>');
|
$('.posts_mu_list').html('<div class="loading_box"><div uk-spinner></div></div>');
|
||||||
},
|
},
|
||||||
success: function (res) {
|
success: function (res) {
|
||||||
if(res.length > 0){
|
if (res.length > 0) {
|
||||||
$('.posts_mu_list .loading_box').remove();
|
$('.posts_mu_list .loading_box').remove();
|
||||||
var playnum = 1;
|
var playnum = 1;
|
||||||
if(!$('#pix_player').length > 0){
|
if (!$('#pix_player').length > 0) {
|
||||||
$('.player_box').append(audiobox);
|
$('.player_box').append(audiobox);
|
||||||
}
|
}
|
||||||
post_playlist.push(res);
|
post_playlist.push(res);
|
||||||
$.each(res, function(key, data) {
|
$.each(res, function (key, data) {
|
||||||
$(".posts_mu_list").append('<li class="item" id='+ key +'><div class="mu_id">' + playnum++ + '</div><a class="s_play_btn"><i class="ri-play-circle-line"></i></a><div class="mus_info">'+ (data.title || data.name) +' <span>- ' + (data.author || data.artist) + '</span></div></li>');
|
$(".posts_mu_list").append('<li class="item" id=' + key + '><div class="mu_id">' + playnum++ + '</div><a class="s_play_btn"><i class="ri-play-circle-line"></i></a><div class="mus_info">' + (data.title || data.name) + ' <span>- ' + (data.author || data.artist) + '</span></div></li>');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -454,25 +459,25 @@ function autoload_posts_music() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
//文章歌曲播放
|
//文章歌曲播放
|
||||||
$(document).on('click','.s_play_btn',function(){
|
$(document).on('click', '.s_play_btn', function () {
|
||||||
mu_box_show();
|
mu_box_show();
|
||||||
// 1. 同步更新文章内播放列表选中状态
|
// 1. 同步更新文章内播放列表选中状态
|
||||||
$('.posts_mu_list li').removeClass('active');
|
$('.posts_mu_list li').removeClass('active');
|
||||||
$(this).parent().addClass('active');
|
$(this).parent().addClass('active');
|
||||||
// 2. 同步更新全局播放列表选中状态（避免后续操作信息混乱）
|
// 2. 同步更新全局播放列表选中状态（避免后续操作信息混乱）
|
||||||
$('.musci_list_box li').removeClass('active');
|
$('.musci_list_box li').removeClass('active');
|
||||||
|
|
||||||
// 移除旧事件监听，防止重复触发
|
// 移除旧事件监听，防止重复触发
|
||||||
audiobox[0].removeEventListener("play",audioplay);
|
audiobox[0].removeEventListener("play", audioplay);
|
||||||
audiobox[0].removeEventListener("pause",audiopause);
|
audiobox[0].removeEventListener("pause", audiopause);
|
||||||
$(".m_play").html('<i class="ri-pause-circle-fill"></i>');
|
$(".m_play").html('<i class="ri-pause-circle-fill"></i>');
|
||||||
|
|
||||||
var id = $(this).parents('li').attr('id');
|
var id = $(this).parents('li').attr('id');
|
||||||
var data = post_playlist[0][id];
|
var data = post_playlist[0][id];
|
||||||
playLrc = data.lrc;
|
playLrc = data.lrc;
|
||||||
// 3. 修复歌手信息字段：优先用 data.author，其次用 data.artist
|
// 3. 修复歌手信息字段：优先用 data.author，其次用 data.artist
|
||||||
audiobox.attr('src',data.url);
|
audiobox.attr('src', data.url);
|
||||||
m_cover.attr('src',data.pic);
|
m_cover.attr('src', data.pic);
|
||||||
m_title.text(data.title || data.name); // 歌曲标题：优先 title，其次 name
|
m_title.text(data.title || data.name); // 歌曲标题：优先 title，其次 name
|
||||||
m_artist.text(data.author || data.artist); // 歌手信息：优先 author，其次 artist
|
m_artist.text(data.author || data.artist); // 歌手信息：优先 author，其次 artist
|
||||||
audiobox[0].play();
|
audiobox[0].play();
|
||||||
@@ -480,7 +485,7 @@ $(document).on('click','.s_play_btn',function(){
|
|||||||
Paused = false;
|
Paused = false;
|
||||||
|
|
||||||
// 新增：文章歌曲切换后强制显示歌词
|
// 新增：文章歌曲切换后强制显示歌词
|
||||||
if(Theme.play.lrc_open && typeof lyricsContainer !== 'undefined'){
|
if (Theme.play.lrc_open && typeof lyricsContainer !== 'undefined') {
|
||||||
lyricsContainer.css('display', 'block');
|
lyricsContainer.css('display', 'block');
|
||||||
$('a.bg_lrc i').css("color", "");
|
$('a.bg_lrc i').css("color", "");
|
||||||
$('a.bg_lrc').css("background", "");
|
$('a.bg_lrc').css("background", "");
|
||||||
@@ -488,8 +493,9 @@ $(document).on('click','.s_play_btn',function(){
|
|||||||
});
|
});
|
||||||
|
|
||||||
//播放器按钮
|
//播放器按钮
|
||||||
$(document).on('click','a.bg_music',function(){
|
$(document).on('click', 'a.bg_music', function () {
|
||||||
mu_box_show();
|
if (!box_up) mu_box_show();
|
||||||
|
else mu_box_hide(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
$(function () {
|
$(function () {
|
||||||
@@ -498,11 +504,11 @@ $(function () {
|
|||||||
});
|
});
|
||||||
|
|
||||||
//播放类型切换
|
//播放类型切换
|
||||||
$(document).on('click','.audio_c_btn',function(){
|
$(document).on('click', '.audio_c_btn', function () {
|
||||||
var type = $(this).attr('au_type');
|
var type = $(this).attr('au_type');
|
||||||
var input = $('<input type="text" placeholder="歌曲ID" name="moment_audio_api" id="moment_audio_api" class="required" required="required">');
|
var input = $('<input type="text" placeholder="歌曲ID" name="moment_audio_api" id="moment_audio_api" class="required" required="required">');
|
||||||
$('.type_audio_text').empty();
|
$('.type_audio_text').empty();
|
||||||
$('.'+type+'_audio.type_audio_text').append(input);
|
$('.' + type + '_audio.type_audio_text').append(input);
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.bg_lrc').click(function () {
|
$('.bg_lrc').click(function () {
|
||||||
@@ -526,13 +532,13 @@ $('.bg_lrc').click(function () {
|
|||||||
});
|
});
|
||||||
|
|
||||||
//创建容器
|
//创建容器
|
||||||
if(Theme.play.lrc_open){
|
if (Theme.play.lrc_open) {
|
||||||
var lyricsContainer = $('<div class="lyrics-container"></div>');
|
var lyricsContainer = $('<div class="lyrics-container"></div>');
|
||||||
$('.player_box').append(lyricsContainer);
|
$('.player_box').append(lyricsContainer);
|
||||||
var css = $(window).width() > 767 ?
|
var css = $(window).width() > 767 ?
|
||||||
{
|
{
|
||||||
//桌面歌词css（按照下面格式自行修改）
|
//桌面歌词css（按照下面格式自行修改）
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
bottom: '10px',
|
bottom: '10px',
|
||||||
left: '2%',
|
left: '2%',
|
||||||
width: '350px',
|
width: '350px',
|
||||||
@@ -543,7 +549,7 @@ if(Theme.play.lrc_open){
|
|||||||
} :
|
} :
|
||||||
{
|
{
|
||||||
//移动端歌词css（按照下面格式自行修改）
|
//移动端歌词css（按照下面格式自行修改）
|
||||||
position: 'fixed',
|
position: 'fixed',
|
||||||
top: '6px',
|
top: '6px',
|
||||||
left: '0',
|
left: '0',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
@@ -596,56 +602,56 @@ function parseLyrics(lrcOriginal) {
|
|||||||
|
|
||||||
// 更新歌词
|
// 更新歌词
|
||||||
function updateLyrics(currentTime, lyrics) {
|
function updateLyrics(currentTime, lyrics) {
|
||||||
for (var i = 0; i < lyrics.length; i++) {
|
for (var i = 0; i < lyrics.length; i++) {
|
||||||
if (currentTime >= lyrics[i].time && (i === lyrics.length - 1 || currentTime < lyrics[i + 1].time)) {
|
if (currentTime >= lyrics[i].time && (i === lyrics.length - 1 || currentTime < lyrics[i + 1].time)) {
|
||||||
// 定义各行列歌词内容
|
// 定义各行列歌词内容
|
||||||
var prevLine = (i - 1 >= 0 && typeof lyrics[i - 1].text === "string") ? lyrics[i - 1].text : ""; // 上一行（i-1）
|
var prevLine = (i - 1 >= 0 && typeof lyrics[i - 1].text === "string") ? lyrics[i - 1].text : ""; // 上一行（i-1）
|
||||||
var currentLine = (typeof lyrics[i].text === "string") ? lyrics[i].text : ""; // 当前行（i）
|
var currentLine = (typeof lyrics[i].text === "string") ? lyrics[i].text : ""; // 当前行（i）
|
||||||
var nextLine = (i + 1 < lyrics.length && typeof lyrics[i + 1].text === "string") ? lyrics[i + 1].text : ""; // 下一行（i+1）
|
var nextLine = (i + 1 < lyrics.length && typeof lyrics[i + 1].text === "string") ? lyrics[i + 1].text : ""; // 下一行（i+1）
|
||||||
var nextNextLine = (i + 2 < lyrics.length && typeof lyrics[i + 2].text === "string") ? lyrics[i + 2].text : ""; // 下下一行（i+2）
|
var nextNextLine = (i + 2 < lyrics.length && typeof lyrics[i + 2].text === "string") ? lyrics[i + 2].text : ""; // 下下一行（i+2）
|
||||||
|
|
||||||
// 判断设备类型（<=767px为移动端）
|
// 判断设备类型（<=767px为移动端）
|
||||||
var isMobile = $(window).width() <= 767;
|
var isMobile = $(window).width() <= 767;
|
||||||
|
|
||||||
if (isMobile) {
|
if (isMobile) {
|
||||||
// 移动端：仅显示当前行+下一行
|
// 移动端：仅显示当前行+下一行
|
||||||
lyricsContainer.html(`
|
lyricsContainer.html(`
|
||||||
<div class="current-line active" style="font-size: 14px; margin-bottom: 6px; line-height: 1.2;">${currentLine}</div>
|
<div class="current-line active" style="font-size: 14px; margin-bottom: 6px; line-height: 1.2;">${currentLine}</div>
|
||||||
<div class="current-line" style="font-size: 12px; opacity: 0.7; line-height: 1.2;">${nextLine}</div>
|
<div class="current-line" style="font-size: 12px; opacity: 0.7; line-height: 1.2;">${nextLine}</div>
|
||||||
`);
|
`);
|
||||||
// 移动端适配动画（2行滚动距离）
|
// 移动端适配动画（2行滚动距离）
|
||||||
$('.current-line').animate({
|
$('.current-line').animate({
|
||||||
top: '-=25px'
|
top: '-=25px'
|
||||||
}, 1000, function () {
|
}, 1000, function () {
|
||||||
$(this).css({
|
$(this).css({
|
||||||
top: '25px'
|
top: '25px'
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// 电脑端：保持原有4行显示
|
// 电脑端：保持原有4行显示
|
||||||
lyricsContainer.html(`
|
lyricsContainer.html(`
|
||||||
<div class="current-line" style="font-size: 10px; opacity: .4;">${prevLine}</div>
|
<div class="current-line" style="font-size: 10px; opacity: .4;">${prevLine}</div>
|
||||||
<div class="current-line active" style="font-size: 14px;">${currentLine}</div>
|
<div class="current-line active" style="font-size: 14px;">${currentLine}</div>
|
||||||
<div class="current-line" style="font-size: 12px; opacity: .4;">${nextLine}</div>
|
<div class="current-line" style="font-size: 12px; opacity: .4;">${nextLine}</div>
|
||||||
<div class="current-line" style="font-size: 10px; opacity: .1;">${nextNextLine}</div>
|
<div class="current-line" style="font-size: 10px; opacity: .1;">${nextNextLine}</div>
|
||||||
`);
|
`);
|
||||||
// 电脑端原动画
|
// 电脑端原动画
|
||||||
$('.current-line').animate({
|
$('.current-line').animate({
|
||||||
top: '-=30px'
|
top: '-=30px'
|
||||||
}, 2000, function () {
|
}, 2000, function () {
|
||||||
$(this).css({
|
$(this).css({
|
||||||
top: '30px'
|
top: '30px'
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 监听音频播放进度更新事件，更新歌词
|
// 监听音频播放进度更新事件，更新歌词
|
||||||
Theme.play.lrc_open && audiobox[0].addEventListener("timeupdate", async function () {
|
Theme.play.lrc_open && audiobox[0].addEventListener("timeupdate", async function () {
|
||||||
// 新增：只有歌词容器显示时才更新歌词（优化性能）
|
// 新增：只有歌词容器显示时才更新歌词（优化性能）
|
||||||
if(Theme.play.lrc_open && typeof lyricsContainer !== 'undefined' && lyricsContainer.css('display') !== 'none'){
|
if (Theme.play.lrc_open && typeof lyricsContainer !== 'undefined' && lyricsContainer.css('display') !== 'none') {
|
||||||
var lyrics = await fetchLyrics(playLrc)
|
var lyrics = await fetchLyrics(playLrc)
|
||||||
updateLyrics(this.currentTime, lyrics);
|
updateLyrics(this.currentTime, lyrics);
|
||||||
}
|
}
|
||||||
@@ -662,31 +668,31 @@ function scrollToPosition(position) {
|
|||||||
|
|
||||||
// 更新底部音乐图标颜色（根据是否播放）
|
// 更新底部音乐图标颜色（根据是否播放）
|
||||||
function updateFooterMusicIcon(isPlaying) {
|
function updateFooterMusicIcon(isPlaying) {
|
||||||
// 查找底部菜单中包含音乐图标的链接
|
// 查找底部菜单中包含音乐图标的链接
|
||||||
var $entry = $('.footer_menu a').filter(function() {
|
var $entry = $('.footer_menu a').filter(function () {
|
||||||
return $(this).find('.ri-netease-cloud-music-line').length > 0;
|
return $(this).find('.ri-netease-cloud-music-line').length > 0;
|
||||||
}).first();
|
}).first();
|
||||||
|
|
||||||
if ($entry.length) {
|
if ($entry.length) {
|
||||||
if (isPlaying) {
|
if (isPlaying) {
|
||||||
$entry.addClass('playing-music');
|
$entry.addClass('playing-music');
|
||||||
} else {
|
} else {
|
||||||
$entry.removeClass('playing-music');
|
$entry.removeClass('playing-music');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 绑定 audio 播放/暂停事件
|
// 绑定 audio 播放/暂停事件
|
||||||
audiobox[0].addEventListener("play", function () {
|
audiobox[0].addEventListener("play", function () {
|
||||||
updateFooterMusicIcon(true);
|
updateFooterMusicIcon(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
audiobox[0].addEventListener("pause", function () {
|
audiobox[0].addEventListener("pause", function () {
|
||||||
updateFooterMusicIcon(false);
|
updateFooterMusicIcon(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
// 初始和 PJAX 完成后同步状态
|
// 初始和 PJAX 完成后同步状态
|
||||||
function syncFooterWithAudioState() {
|
function syncFooterWithAudioState() {
|
||||||
var isPlaying = !!(audiobox && audiobox[0] && !audiobox[0].paused && !audiobox[0].ended);
|
var isPlaying = !!(audiobox && audiobox[0] && !audiobox[0].paused && !audiobox[0].ended);
|
||||||
updateFooterMusicIcon(isPlaying);
|
updateFooterMusicIcon(isPlaying);
|
||||||
}
|
}
|
||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
+27
-4
@@ -13,6 +13,29 @@
|
|||||||
<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="${#lists.isEmpty(param.author) ? 'active' : ''}" class="cat-link">
|
||||||
|
全部<span></span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<!-- 遍历所有作者 -->
|
||||||
|
<th:block th:each="author : ${authors}">
|
||||||
|
<li>
|
||||||
|
<a th:attr="data-href=@{|/friends?author=${author}|}"
|
||||||
|
th:classappend="${#strings.equals(param.author, author) ? 'active' : ''}"
|
||||||
|
th:text="${author}" class="cat-link">
|
||||||
|
<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}"
|
<div th:each="postInfo, iterstat: ${friends.items}"
|
||||||
@@ -66,9 +89,9 @@
|
|||||||
<th:block th:if="${friends.totalPages>1}">
|
<th:block th:if="${friends.totalPages>1}">
|
||||||
<div id="t_pagination">
|
<div id="t_pagination">
|
||||||
<div class="post-paging"
|
<div class="post-paging"
|
||||||
th:if="${friends.hasNext()}"
|
th:if="${friends.hasNext()}">
|
||||||
th:with="_page = ${friends.page+1}">
|
<!-- 直接使用后端生成的完整 nextUrl -->
|
||||||
<a th:data="${'/friends/page/'+_page}"
|
<a th:data="${friends.nextUrl}"
|
||||||
th:text="${theme.config.base_set.site_page}">
|
th:text="${theme.config.base_set.site_page}">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -87,4 +110,4 @@
|
|||||||
</div>
|
</div>
|
||||||
</th:block>
|
</th:block>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -1,20 +1,83 @@
|
|||||||
<th:block th:fragment="footer">
|
<th:block th:fragment="footer">
|
||||||
<th:block th:with="customJsVersion='1.2.5-1'">
|
<th:block th:with="customJsVersion='1.2.5-3'">
|
||||||
|
|
||||||
|
<!-- 奇遇容器 -->
|
||||||
<div class="center-img-container" id="centerImgContainer">
|
<div class="center-img-container" id="centerImgContainer">
|
||||||
<img class="center-img" id="targetImg">
|
<img class="center-img" id="targetImg">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script th:if="${pluginFinder.available('plugin-douban')}" th:src="@{/plugins/plugin-douban/assets/static/db.min.js(v=${customJsVersion})}" class="pjax"></script>
|
<!-- 登录容器 -->
|
||||||
|
<div class="custom-login-modal" id="customLoginModal">
|
||||||
|
<div class="login-modal-content login-modern-card">
|
||||||
|
<button class="close-modal-btn" id="closeLoginModal">×</button>
|
||||||
|
<form class="login-modern-form">
|
||||||
|
<p class="login-modern-title">日记簿署名</p>
|
||||||
|
<div class="login-modern-input-wrapper">
|
||||||
|
<i class="ri-user-line login-modern-icon"></i>
|
||||||
|
<input type="text" id="customUsername" class="login-modern-input" autocomplete="username"
|
||||||
|
placeholder="执笔人">
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
退出后您仍能以访客身份翻阅本日记簿...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pixar-notice-actions">
|
||||||
|
|
||||||
|
<!-- 确认按钮 -->
|
||||||
|
<button class="pixar-notice-btn pixar-notice-btn-confirm" aria-label="Confirm"
|
||||||
|
onclick="confirmPixarAction()">
|
||||||
|
<i class="ri-check-line"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- 关闭按钮 -->
|
||||||
|
<button class="pixar-notice-btn pixar-notice-btn-close" aria-label="Close"
|
||||||
|
onclick="hidePixarCard()">
|
||||||
|
<i class="ri-close-line"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</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/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/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/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/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/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/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/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.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/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/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/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/nprogress/nprogress.js(v=${customJsVersion})}" id="nprogress-js"></script>
|
||||||
@@ -25,17 +88,18 @@
|
|||||||
<script th:src="@{/assets/js/pix.js(v=${customJsVersion})}" id="pix-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/app.js(v=${customJsVersion})}" id="app-js"></script>
|
||||||
<script th:src="@{/assets/js/anian.js(v=${customJsVersion})}" id="anian-js"></script>
|
<script th:src="@{/assets/js/anian.js(v=${customJsVersion})}" id="anian-js"></script>
|
||||||
|
|
||||||
<link rel="prefetch" href="/upload/ma-shan-zheng.woff2" as="font" type="font/woff2" crossorigin>
|
<link rel="prefetch" href="/upload/ma-shan-zheng.woff2" crossorigin="anonymous">
|
||||||
<link rel="prefetch" href="/upload/mu-yao-sui-xin-shou-xie-ti.woff2" as="font" type="font/woff2" crossorigin>
|
<link rel="prefetch" href="/upload/mu-yao-sui-xin-shou-xie-ti.woff2" crossorigin="anonymous">
|
||||||
|
<link rel="prefetch" href="/upload/jiazai.gif">
|
||||||
|
|
||||||
</th:block>
|
</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)}"
|
||||||
th:utext="${theme.config.custom.footer_html}"> </th:block>
|
th:utext="${theme.config.custom.footer_html}"> </th:block>
|
||||||
</th:block>
|
</th:block>
|
||||||
+17
-12
@@ -1,4 +1,4 @@
|
|||||||
<th:block th:fragment="head" th:with="customJsVersion=${'1.2.5-1'}">
|
<th:block th:fragment="head" th:with="customJsVersion=${'1.2.5-3'}">
|
||||||
<th:block th:replace="~{'modules/variables/msg'}" />
|
<th:block th:replace="~{'modules/variables/msg'}" />
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
|
||||||
@@ -44,16 +44,21 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const card=document.getElementById('lineCard'),heading=document.getElementById('cardHeading'),para=document.getElementById('cardPara'),switchBtn=document.getElementById('switchBtn'),cancelBtn=document.getElementById('cancelBtn');
|
(function () {
|
||||||
const showCard=()=>{card.style.display='block';setTimeout(()=>{card.style.opacity='1';card.style.transform='translateY(0)';},10)};
|
const lineCardEl = document.getElementById('lineCard'), cardHeadingEl = document.getElementById('cardHeading'), cardParaEl = document.getElementById('cardPara'), switchLineBtn = document.getElementById('switchBtn'), cancelLineBtn = document.getElementById('cancelBtn');
|
||||||
const hideCard=()=>{card.style.opacity='0';card.style.transform='translateY(20px)';setTimeout(()=>{card.style.display='none'},300)};
|
const getCookie = (name) => document.cookie.split('; ').find(row => row.startsWith(`${name}=`))?.split('=')[1];
|
||||||
const handleSwitch=(baseUrl)=>{switchBtn.classList.add('loading');switchBtn.textContent='切换中';switchBtn.disabled=true;const currentScrollTop=window.scrollY||document.documentElement.scrollTop;document.cookie=`scrollParam=${currentScrollTop}; path=/; domain=anian.cc`;let finalUrl=baseUrl+location.pathname+location.search+location.hash;setTimeout(()=>location.href=finalUrl,500)};
|
const setSessionCookie = (name, value, domain = 'anian.cc') => document.cookie = `${name}=${value}; path=/; domain=${domain}; SameSite=Lax`;
|
||||||
let isResourceLoaded=false,pageLoadTimeoutTimer=null,isLoadTimeoutAborted=false;
|
const showLineCard = () => { lineCardEl.style.display = 'block'; setTimeout(() => { lineCardEl.style.opacity = '1'; lineCardEl.style.transform = 'translateY(0)'; }, 10) };
|
||||||
const currentHost=location.hostname,isMainDomain=currentHost.includes('anian.cc')&&!currentHost.includes('www.anian.cc');
|
const hideLineCard = (setNoPrompt = false, setNoSpeedTest = false) => { lineCardEl.style.opacity = '0'; lineCardEl.style.transform = 'translateY(20px)'; setTimeout(() => { lineCardEl.style.display = 'none'; if (setNoPrompt) setSessionCookie('noPrompt_anian_cc', 'true'); if (setNoSpeedTest) setSessionCookie('noSpeedTest_anian_cc', 'true'); }, 300) };
|
||||||
cancelBtn.addEventListener('click',hideCard);
|
const handleLineSwitch = (baseUrl) => { switchLineBtn.classList.add('loading'); switchLineBtn.textContent = '切换中'; switchLineBtn.disabled = true; const currentScrollTop = window.scrollY || document.documentElement.scrollTop; document.cookie = `scrollParam=${currentScrollTop}; path=/; domain=anian.cc`; let finalUrl = baseUrl + location.pathname + location.search + location.hash; setTimeout(() => location.href = finalUrl, 500) };
|
||||||
const scrollTop = document.cookie.split('; ').find(c => c.startsWith('scrollParam='))?.split('=')[1] ? decodeURIComponent(document.cookie.split('; ').find(c => c.startsWith('scrollParam='))?.split('=')[1]) : null;
|
let isResourceLoaded = false, pageLoadTimeoutTimer = null, isLoadTimeoutAborted = false;
|
||||||
if(!isMainDomain && !scrollTop && !isNaN(scrollTop)){heading.textContent='温馨提示';para.textContent='当前为备用线路，若主线路正常，请优先选择主线路';switchBtn.textContent='切换主线路';switchBtn.onclick=()=>handleSwitch('https://anian.cc');showCard();}
|
const currentHost = location.hostname, isMainDomain = currentHost === 'anian.cc', isSubDomain = currentHost === 'www.anian.cc', isTestDomain = !isMainDomain && !isSubDomain;
|
||||||
if(isMainDomain){pageLoadTimeoutTimer=setTimeout(()=>{if(!isResourceLoaded){isLoadTimeoutAborted=true;heading.textContent='线路异常';para.textContent='当前线路拥塞，若本地网络正常，可尝试切换至备用线路';switchBtn.textContent='切换副线路';switchBtn.onclick=()=>handleSwitch('https://www.anian.cc');showCard();}},15000);window.onload=()=>{isResourceLoaded=true;clearTimeout(pageLoadTimeoutTimer);if(isLoadTimeoutAborted)return;const xhr=new XMLHttpRequest();xhr.open('GET',`/upload/%E4%B8%8B%E8%BD%BD%20(9).mp4?_t=${Date.now()}`,true);let t=setTimeout(()=>{xhr.abort();heading.textContent='线路异常';para.textContent='当前线路拥塞，若本地网络正常，可尝试切换至备用线路';switchBtn.textContent='切换副线路';switchBtn.onclick=()=>handleSwitch('https://www.anian.cc');showCard()},7500);xhr.onload=xhr.onerror=xhr.onabort=()=>clearTimeout(t);xhr.send();}}
|
const scrollParam = getCookie('scrollParam'), noPromptCookie = getCookie('noPrompt_anian_cc'), noSpeedTestCookie = getCookie('noSpeedTest_anian_cc');
|
||||||
|
cancelLineBtn.addEventListener('click', () => { hideLineCard(!isMainDomain, isMainDomain); });
|
||||||
|
if (isSubDomain) { if (!scrollParam && !noPromptCookie) { cardHeadingEl.textContent = '温馨提示'; cardParaEl.textContent = '当前为备用线路，若主线路正常，请优先选择主线路'; switchLineBtn.textContent = '切换主线路'; switchLineBtn.onclick = () => handleLineSwitch('https://anian.cc'); showLineCard(); } }
|
||||||
|
if (isMainDomain) { if (!noSpeedTestCookie) { pageLoadTimeoutTimer = setTimeout(() => { if (!isResourceLoaded) { isLoadTimeoutAborted = true; cardHeadingEl.textContent = '线路异常'; cardParaEl.textContent = '当前线路拥塞，若本地网络正常，可尝试切换至备用线路'; switchLineBtn.textContent = '切换副线路'; switchLineBtn.onclick = () => handleLineSwitch('https://www.anian.cc'); showLineCard(); } }, 15000); window.onload = () => { isResourceLoaded = true; clearTimeout(pageLoadTimeoutTimer); if (isLoadTimeoutAborted) return; const xhr = new XMLHttpRequest(); xhr.open('GET', `/upload/%E4%B8%8B%E8%BD%BD%20(9).mp4?_t=${Date.now()}`, true); let t = setTimeout(() => { xhr.abort(); cardHeadingEl.textContent = '线路异常'; cardParaEl.textContent = '当前线路拥塞，若本地网络正常，可尝试切换至备用线路'; switchLineBtn.textContent = '切换副线路'; switchLineBtn.onclick = () => handleLineSwitch('https://www.anian.cc'); showLineCard() }, 7500); xhr.onload = xhr.onerror = xhr.onabort = () => clearTimeout(t); xhr.send(); } } }
|
||||||
|
if (isTestDomain) { if (!noPromptCookie) { cardHeadingEl.textContent = '线路警告'; cardParaEl.textContent = '当前为测试线路，若非开发所需，请优先选择主线路'; switchLineBtn.textContent = '切换主线路'; switchLineBtn.onclick = () => handleLineSwitch('https://anian.cc'); showLineCard(); } }
|
||||||
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<link rel="stylesheet" id="wp-block-library-css" th:href="@{/assets/css/style.min.css(v=${customJsVersion})}" media="all">
|
<link rel="stylesheet" id="wp-block-library-css" th:href="@{/assets/css/style.min.css(v=${customJsVersion})}" media="all">
|
||||||
@@ -97,4 +102,4 @@
|
|||||||
if (darkmode()) document.documentElement.classList.add('dark');
|
if (darkmode()) document.documentElement.classList.add('dark');
|
||||||
})(window)
|
})(window)
|
||||||
</script>
|
</script>
|
||||||
</th:block>
|
</th:block>
|
||||||
@@ -20,7 +20,7 @@
|
|||||||
|
|
||||||
</header><!-- #masthead -->
|
</header><!-- #masthead -->
|
||||||
|
|
||||||
<div class="index_banner">
|
<!-- <div class="index_banner">
|
||||||
<div class="bg bg1"></div>
|
<div class="bg bg1"></div>
|
||||||
<div class="bg bg2"></div>
|
<div class="bg bg2"></div>
|
||||||
<div class="user_info">
|
<div class="user_info">
|
||||||
@@ -32,4 +32,111 @@
|
|||||||
<div class="avatar"><img th:src="${theme.config.base_set.default_avatar}"></div>
|
<div class="avatar"><img th:src="${theme.config.base_set.default_avatar}"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
|
<div class="index_banner" id="banner" uk-img="loading: eager">
|
||||||
|
<div class="user_info">
|
||||||
|
<div class="top">
|
||||||
|
<div class="left">
|
||||||
|
<div class="name">[[${theme.config.base_set.nice_name}]]</div>
|
||||||
|
<div class="des">[[${theme.config.base_set.admin_des}]]</div>
|
||||||
|
</div>
|
||||||
|
<div class="avatar"><img th:src="${theme.config.base_set.default_avatar}"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// --------------------------
|
||||||
|
// 配置区域（请替换为实际图片地址）
|
||||||
|
// --------------------------
|
||||||
|
const BANNER_CONFIG = {
|
||||||
|
seasonal: {
|
||||||
|
'春季': '/upload/dingbu-chun.png', // 春季 Banner
|
||||||
|
'夏季': '/upload/dingbu-xia.png', // 夏季 Banner
|
||||||
|
'秋季': '/upload/dingbu-qiu.png', // 秋季 Banner
|
||||||
|
'冬季': '/upload/dingbu-dong.png' // 冬季 Banner
|
||||||
|
},
|
||||||
|
fallback: '/upload/dingbu-siji.png' // 兜底图
|
||||||
|
};
|
||||||
|
|
||||||
|
// --------------------------
|
||||||
|
// 原有 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=/; domain=anian.cc`;
|
||||||
|
}
|
||||||
|
|
||||||
|
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://cn.apihz.cn/api/time/getday.php?id=10011724&key=0bdd2d8b3d97c0d476c98a41f108a96f';
|
||||||
|
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 => {
|
||||||
|
if (data.code !== 200) throw new Error('API Error');
|
||||||
|
|
||||||
|
// 组装农历信息（保留原有逻辑）
|
||||||
|
const lunarInfo = {
|
||||||
|
ganzhiYear: data.ganzhinian || '',
|
||||||
|
lunarMonth: data.nyue || '',
|
||||||
|
lunarDay: data.nri || '',
|
||||||
|
jieqi: (data.JIEQICN || '').includes('第1天') ? data.jieqi : '',
|
||||||
|
jijie: data.jijie || '',
|
||||||
|
traditionalFestival: data.YIFESTIVAL || ''
|
||||||
|
};
|
||||||
|
|
||||||
|
// 存 Cookie 并设置 Banner
|
||||||
|
anian_setDailyCookie(cookieName, JSON.stringify(lunarInfo));
|
||||||
|
setBanner(lunarInfo);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
// 3. 失败兜底：显示默认图
|
||||||
|
setBanner(null);
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
@@ -5,9 +5,8 @@
|
|||||||
<div class="top_menu_box"
|
<div class="top_menu_box"
|
||||||
uk-dropdown="mode: click;flip: false;offset: 12;toggle:.top_nav_btn;animation:uk-animation-slide-top-small;animate-out:uk-animation-slide-top-small;delay-hide:5000;boundary: .top_bar;stretch: x;">
|
uk-dropdown="mode: click;flip: false;offset: 12;toggle:.top_nav_btn;animation:uk-animation-slide-top-small;animate-out:uk-animation-slide-top-small;delay-hide:5000;boundary: .top_bar;stretch: x;">
|
||||||
<div class="inner"
|
<div class="inner"
|
||||||
th:with="topMenu = ${#strings.isEmpty(theme.config.base_top_set.top_nav) ? menuFinder.getPrimary() : menuFinder.getByName(theme.config.base_top_set.top_nav)}">
|
th:with="topMenu = ${#strings.isEmpty(theme.config.base_top_set.top_nav) ? menuFinder.getPrimary() : menuFinder.getByName(theme.config.base_top_set.top_nav)}">
|
||||||
<div class="menu-top-container"
|
<div class="menu-top-container" th:if="${not #lists.isEmpty(topMenu)}">
|
||||||
th:if="${not #lists.isEmpty(topMenu)}">
|
|
||||||
<ul id="top_menu" class="menu">
|
<ul id="top_menu" class="menu">
|
||||||
<li class="menu-item menu-item-type-post_type menu-item-object-page"
|
<li class="menu-item menu-item-type-post_type menu-item-object-page"
|
||||||
th:each="menuItem : ${topMenu.menuItems}">
|
th:each="menuItem : ${topMenu.menuItems}">
|
||||||
@@ -23,7 +22,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="m_top_nav top_tool is_mobile">
|
<!-- <div class="m_top_nav top_tool is_mobile">
|
||||||
<a class="top_nav_btn" uk-toggle="target: #m_offcanvas"><i class="ri-menu-2-line"></i></a>
|
<a class="top_nav_btn" uk-toggle="target: #m_offcanvas"><i class="ri-menu-2-line"></i></a>
|
||||||
<div id="m_offcanvas" class="m_offcanvas uk-animation-fast"
|
<div id="m_offcanvas" class="m_offcanvas uk-animation-fast"
|
||||||
uk-offcanvas="overlay: true;mode: push;container:.main_wrap">
|
uk-offcanvas="overlay: true;mode: push;container:.main_wrap">
|
||||||
@@ -85,8 +84,7 @@
|
|||||||
<div th:unless="${not #lists.isEmpty(topMenu)}" class="nav_tips">请前往后台设置左侧菜单/移动端菜单</div>
|
<div th:unless="${not #lists.isEmpty(topMenu)}" class="nav_tips">请前往后台设置左侧菜单/移动端菜单</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
|
|
||||||
<!-- 搜索区域 -->
|
<!-- 搜索区域 -->
|
||||||
<div class="search_mod">
|
<div class="search_mod">
|
||||||
@@ -94,4 +92,10 @@
|
|||||||
<a onclick="SearchWidget.open()"><i class="ri-search-line s_toogle_btn"></i></a>
|
<a onclick="SearchWidget.open()"><i class="ri-search-line s_toogle_btn"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 回到顶部 -->
|
||||||
|
<div class="is_mobile">
|
||||||
|
<a class="tool_top" href="#page" uk-scroll="" data-pjax-state="">
|
||||||
|
<i class="ri-skip-up-line"></i></a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -16,7 +16,7 @@
|
|||||||
<div class="user_pannel round12" uk-dropdown="mode: click;toggle:#top_ava;pos:bottom-right;animation:uk-animation-slide-top-small">
|
<div class="user_pannel round12" uk-dropdown="mode: click;toggle:#top_ava;pos:bottom-right;animation:uk-animation-slide-top-small">
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<a href="/console" target="_blank" pjax="exclude"><i class="ri-function-line"></i>管理面板</a>
|
<a href="/console" target="_blank" pjax="exclude"><i class="ri-function-line"></i>管理面板</a>
|
||||||
<a class="logout" href="/logout"><i class="ri-logout-circle-r-line"></i>退出登录</a>
|
<a class="logout" href="javascript:void(0);" onclick="showPixarCard()"><i class="ri-logout-circle-r-line"></i>退出登录</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -24,7 +24,7 @@
|
|||||||
</th:block>
|
</th:block>
|
||||||
|
|
||||||
<div sec:authorize="isAnonymous()" class="top_tool">
|
<div sec:authorize="isAnonymous()" class="top_tool">
|
||||||
<a th:if="${theme.config.base_set.login_button}" onclick="loginUrl()"><i class="ri-user-3-line"></i></a>
|
<a th:if="${theme.config.base_set.login_button}" onclick="open_login_box()"><i class="ri-user-3-line"></i></a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -47,7 +47,7 @@
|
|||||||
<div class="user_pannel round12" uk-dropdown="mode: click;toggle:#top_ava2;pos:bottom-right;animation:uk-animation-slide-top-small">
|
<div class="user_pannel round12" uk-dropdown="mode: click;toggle:#top_ava2;pos:bottom-right;animation:uk-animation-slide-top-small">
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<a href="/console" target="_blank" pjax="exclude"><i class="ri-function-line"></i>管理面板</a>
|
<a href="/console" target="_blank" pjax="exclude"><i class="ri-function-line"></i>管理面板</a>
|
||||||
<a class="logout" href="/logout"><i class="ri-logout-circle-r-line"></i>退出登录</a>
|
<a class="logout" href="javascript:void(0);" onclick="showPixarCard()"><i class="ri-logout-circle-r-line"></i>退出登录</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -55,7 +55,7 @@
|
|||||||
</th:block>
|
</th:block>
|
||||||
|
|
||||||
<div sec:authorize="isAnonymous()" class="top_tool">
|
<div sec:authorize="isAnonymous()" class="top_tool">
|
||||||
<a th:if="${theme.config.base_set.login_button}" onclick="loginUrl()"><i class="ri-user-3-line"></i></a>
|
<a th:if="${theme.config.base_set.login_button}" onclick="open_login_box()"><i class="ri-user-3-line"></i></a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -124,7 +124,7 @@
|
|||||||
<div class="form_footer">
|
<div class="form_footer">
|
||||||
<div class="admin_tool">
|
<div class="admin_tool">
|
||||||
<a href="/console" target="_blank"><i class="ri-function-line"></i> 管理</a>
|
<a href="/console" target="_blank"><i class="ri-function-line"></i> 管理</a>
|
||||||
<a class="logout" href="/logout"><i class="ri-logout-circle-r-line"></i> 登出</a>
|
<a class="logout" href="javascript:void(0);" onclick="showPixarCard()"><i class="ri-logout-circle-r-line"></i> 登出</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="moment_sure">
|
<div class="moment_sure">
|
||||||
<button class="uk-modal-close push_close">取消</button>
|
<button class="uk-modal-close push_close">取消</button>
|
||||||
|
|||||||
+1
-1
@@ -33,7 +33,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>
|
||||||
|
|
||||||
|
|||||||
+2
-2
@@ -17,11 +17,11 @@ spec:
|
|||||||
issues: "https://github.com/chengzhongxue/halo-theme-pix/issues"
|
issues: "https://github.com/chengzhongxue/halo-theme-pix/issues"
|
||||||
settingName: "theme-pix-setting"
|
settingName: "theme-pix-setting"
|
||||||
configMapName: "theme-pix-configMap"
|
configMapName: "theme-pix-configMap"
|
||||||
version: "1.2.5-1"
|
version: "1.2.5-3"
|
||||||
require: ">=2.20.0"
|
require: ">=2.20.0"
|
||||||
customTemplates:
|
customTemplates:
|
||||||
page:
|
page:
|
||||||
- name: 落地页模版
|
- name: 落地页模版
|
||||||
description: 落地页
|
description: 落地页
|
||||||
screenshot:
|
screenshot:
|
||||||
file: landing.html
|
file: landing.html
|
||||||
Reference in New Issue
Block a user