<!DOCTYPE html>
<html lang="zh-CN" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TENGYUAN 个人博客</title>
<!-- 引入阿里巴巴图标库 -->
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4005972_5ehi8q0b1j9.css">
<!-- 引入Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- 访客统计 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Alpine.js 用于交互功能 -->
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<style>
/* 基础样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
/* CSS变量 - 主题颜色 */
:root {
/* 过渡效果应用于所有颜色变化 */
--transition-speed: 0.5s;
/* 暗色主题默认值 */
--bg-primary: #1a1a2e;
--bg-secondary: #16213e;
--bg-card: linear-gradient(135deg, rgba(22, 33, 62, 0.8), rgba(26, 26, 46, 0.9));
--text-primary: #e2e8f0;
--text-secondary: #94a3b8;
--text-accent: #ffffff;
--border-color: rgba(255, 255, 255, 0.1);
--accent-color: #1e90ff;
--accent-color-secondary: #00bfff;
--card-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
--hover-bg: rgba(255, 255, 255, 0.1);
--bio-bg: rgba(255, 255, 255, 0.05);
--skill-bg: rgba(30, 144, 255, 0.1);
--skill-border: rgba(30, 144, 255, 0.3);
--particle-color: rgba(30, 144, 255, 0.2);
--quote-color: rgba(30, 144, 255, 0.3);
}
/* 亮色主题 */
html[data-theme="light"] {
--bg-primary: #f8fafc;
--bg-secondary: #e2e8f0;
--bg-card: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 245, 255, 0.8));
--text-primary: #334155;
--text-secondary: #64748b;
--text-accent: #0f172a;
--border-color: rgba(0, 0, 0, 0.1);
--accent-color: #0284c7;
--accent-color-secondary: #0ea5e9;
--card-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
--hover-bg: rgba(0, 0, 0, 0.05);
--bio-bg: rgba(0, 0, 0, 0.03);
--skill-bg: rgba(14, 165, 233, 0.1);
--skill-border: rgba(14, 165, 233, 0.3);
--particle-color: rgba(14, 165, 233, 0.1);
--quote-color: rgba(14, 165, 233, 0.3);
}
/* 蓝色主题 */
html[data-theme="blue"] {
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--bg-card: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
--text-primary: #e2e8f0;
--text-secondary: #94a3b8;
--text-accent: #ffffff;
--border-color: rgba(255, 255, 255, 0.1);
--accent-color: #3b82f6;
--accent-color-secondary: #60a5fa;
--card-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
--hover-bg: rgba(59, 130, 246, 0.1);
--bio-bg: rgba(59, 130, 246, 0.05);
--skill-bg: rgba(59, 130, 246, 0.1);
--skill-border: rgba(59, 130, 246, 0.3);
--particle-color: rgba(59, 130, 246, 0.2);
--quote-color: rgba(59, 130, 246, 0.3);
}
/* 绿色主题 */
html[data-theme="green"] {
--bg-primary: #064e3b;
--bg-secondary: #065f46;
--bg-card: linear-gradient(135deg, rgba(6, 95, 70, 0.8), rgba(6, 78, 59, 0.9));
--text-primary: #ecfdf5;
--text-secondary: #a7f3d0;
--text-accent: #ffffff;
--border-color: rgba(255, 255, 255, 0.1);
--accent-color: #10b981;
--accent-color-secondary: #34d399;
--card-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
--hover-bg: rgba(16, 185, 129, 0.1);
--bio-bg: rgba(16, 185, 129, 0.05);
--skill-bg: rgba(16, 185, 129, 0.1);
--skill-border: rgba(16, 185, 129, 0.3);
--particle-color: rgba(16, 185, 129, 0.2);
--quote-color: rgba(16, 185, 129, 0.3);
}
/* 紫色主题 */
html[data-theme="purple"] {
--bg-primary: #2e1065;
--bg-secondary: #4c1d95;
--bg-card: linear-gradient(135deg, rgba(76, 29, 149, 0.8), rgba(46, 16, 101, 0.9));
--text-primary: #f5f3ff;
--text-secondary: #ddd6fe;
--text-accent: #ffffff;
--border-color: rgba(255, 255, 255, 0.1);
--accent-color: #8b5cf6;
--accent-color-secondary: #a78bfa;
--card-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
--hover-bg: rgba(139, 92, 246, 0.1);
--bio-bg: rgba(139, 92, 246, 0.05);
--skill-bg: rgba(139, 92, 246, 0.1);
--skill-border: rgba(139, 92, 246, 0.3);
--particle-color: rgba(139, 92, 246, 0.2);
--quote-color: rgba(139, 92, 246, 0.3);
}
/* 赛博朋克主题 */
html[data-theme="cyberpunk"] {
--bg-primary: #0c0a20;
--bg-secondary: #1a1033;
--bg-card: linear-gradient(135deg, rgba(26, 16, 51, 0.8), rgba(12, 10, 32, 0.9));
--text-primary: #e2e8f0;
--text-secondary: #94a3b8;
--text-accent: #f0f;
--border-color: rgba(255, 0, 255, 0.2);
--accent-color: #f0f;
--accent-color-secondary: #0ff;
--card-shadow: 0 15px 30px rgba(255, 0, 255, 0.2);
--hover-bg: rgba(255, 0, 255, 0.1);
--bio-bg: rgba(255, 0, 255, 0.05);
--skill-bg: rgba(255, 0, 255, 0.1);
--skill-border: rgba(0, 255, 255, 0.3);
--particle-color: rgba(255, 0, 255, 0.2);
--quote-color: rgba(0, 255, 255, 0.3);
}
/* 整体页面样式 - 漫画风格 */
body {
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* 主容器样式 */
.container {
display: flex;
max-width: 1600px;
height: 100vh;
margin: 0 auto;
position: relative;
background-color: var(--bg-secondary);
}
/* 左侧边栏样式 */
.left-side {
width: 260px;
border-right: 2px solid var(--border-color);
display: flex;
flex-direction: column;
transition: all 0.3s ease;
background-color: var(--bg-secondary);
overflow: auto;
flex-shrink: 0;
z-index: 50;
position: relative;
}
/* 右侧边栏样式 */
.right-side {
width: 280px;
flex-shrink: 0;
margin-left: auto;
overflow: auto;
background-color: var(--bg-secondary);
display: flex;
flex-direction: column;
border-left: 2px solid var(--border-color);
z-index: 40;
}
/* 主要内容区域样式 */
.main {
flex-grow: 1;
display: flex;
flex-direction: column;
background-color: var(--bg-primary);
overflow: hidden;
}
/* Logo样式 - 漫画风格 */
.logo {
font-family: "PingFang SC", sans-serif;
font-size: 18px;
color: var(--text-accent);
font-weight: 800; /* 加粗 */
text-align: center;
height: 68px;
line-height: 68px;
letter-spacing: 4px;
position: sticky;
top: 0;
background-color: var(--bg-secondary);
z-index: 2;
transition: all 0.3s ease;
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}
/* 侧边栏标题样式 */
.side-title {
font-family: "PingFang SC", sans-serif;
color: var(--text-secondary);
font-size: 14px;
font-weight: 800; /* 加粗 */
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 2px solid var(--border-color);
padding-bottom: 8px;
}
/* 侧边栏内容区域样式 */
.side-wrapper {
padding: 25px;
}
/* 侧边栏菜单样式 - 漫画风格 */
.side-menu {
display: flex;
flex-direction: column;
font-size: 15px;
white-space: nowrap;
}
.side-menu svg {
margin-right: 16px;
width: 16px;
color: var(--text-secondary);
}
.side-menu a {
text-decoration: none;
color: var(--text-secondary);
display: flex;
align-items: center;
padding: 10px 0;
transition: all 0.3s ease;
border-radius: 6px;
font-weight: 600;
}
.side-menu a:hover {
color: var(--text-accent);
background-color: var(--hover-bg);
transform: translateX(5px);
padding-left: 10px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.side-menu a.active {
color: var(--text-accent);
padding-left: 10px;
font-weight: 800;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
/* 底部关注区域样式 */
.follow-me {
text-decoration: none;
font-size: 14px;
display: flex;
align-items: center;
margin-top: auto;
overflow: hidden;
color: var(--text-secondary);
padding: 0 25px;
height: 60px;
flex-shrink: 0;
border-top: 2px solid var(--border-color);
position: relative;
transition: all 0.3s ease;
font-weight: 600;
}
.follow-me svg {
width: 16px;
height: 16px;
margin-right: 12px;
}
.follow-text {
display: flex;
align-items: center;
transition: 0.3s;
}
.follow-me:hover .follow-text {
transform: translateY(100%);
}
.follow-me:hover .developer {
top: 0;
}
.developer {
position: absolute;
color: var(--text-accent);
left: 0;
top: -100%;
display: flex;
transition: 0.3s;
padding: 0 25px;
align-items: center;
background-color: var(--bg-secondary);
width: 100%;
height: 100%;
font-weight: 600;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.developer img {
border-radius: 50%;
width: 30px;
height: 30px;
object-fit: cover;
margin-right: 12px;
border: 2px solid var(--border-color);
}
/* 搜索栏样式*/
.search-bar {
height: 100px;
background-color: var(--bg-secondary);
z-index: 3;
position: relative;
display: flex;
align-items: center;
padding: 0px;
border-bottom: 2px solid var(--border-color);
}
.search-container {
display: flex;
align-items: center;
width: 100%;
position: relative;
}
.search-bar input {
height: 50px;
width: 100%;
display: block;
background-color: var(--hover-bg);
border: 2px solid var(--border-color);
padding: 0 60px 0 50px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3e%3cpath d='M508.9 478.7L360 330a201.6 201.6 0 0045.2-127.3C405.3 90.9 314.4 0 202.7 0S0 91 0 202.7s91 202.6 202.7 202.6c48.2 0 92.4-17 127.3-45.2L478.7 509c4.2 4.1 11 4.1 15 0l15.2-15.1c4.1-4.2 4.1-11 0-15zm-306.2-116c-88.3 0-160-71.8-160-160s71.7-160 160-160 160 71.7 160 160-71.8 160-160 160z' data-original='%23000000' class='active-path' data-old_color='%23000000' fill='%2394a3b8'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 18px;
background-position: 20px 50%;
color: var(--text-primary);
}
.search-bar input::placeholder {
color: var(--text-secondary);
}
/* 主内容容器样式 */
.main-container {
padding: 30px;
flex-grow: 1;
overflow: auto;
background-color: var(--bg-primary);
}
/* 个人资料区域样式 - 漫画风格 */
.profile {
position: relative;
height: 40vh;
min-height: 250px;
max-height: 350px;
z-index: 1;
border-radius: 16px;
overflow: hidden;
margin-bottom: 30px;
box-shadow: var(--card-shadow);
border: 2px solid var(--border-color);
}
.profile-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.5s ease;
}
.profile:hover .profile-cover {
transform: scale(1.05);
}
.profile:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
left: 0;
top: 0;
background-image: url("https://images.unsplash.com/photo-1508247967583-7d982ea01526?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
filter: blur(50px);
opacity: 0.7;
}
/* 个人资料菜单样式 */
.profile-menu {
position: absolute;
bottom: 0;
padding-left: 200px;
background: var(--bg-secondary);
width: 100%;
display: flex;
border-radius: 0 0 16px 16px;
overflow-x: auto;
}
.profile-menu-link {
padding: 18px 20px;
color: var(--text-secondary);
transition: 0.3s;
cursor: pointer;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
position: relative;
}
.profile-menu-link.active, .profile-menu-link:hover {
color: var(--text-accent);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.profile-menu-link.active:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 3px;
background: linear-gradient(90deg, var(--accent-color), var(--accent-color-secondary));
border-radius: 3px 3px 0 0;
}
/* 头像区域样式 */
.profile-avatar {
position: absolute;
align-items: center;
display: flex;
z-index: 1;
bottom: 20px;
left: 30px;
}
.profile-img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--bg-secondary);
box-shadow: var(--card-shadow);
transition: transform 0.3s ease;
}
.profile-img:hover {
transform: scale(1.05);
}
.profile-name {
margin-left: 24px;
margin-bottom: 24px;
font-size: 24px;
color: #ffffff;
font-weight: 800;
font-family: "PingFang SC", sans-serif;
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}
/* 社交图标样式 - 美化版 */
.social-icons {
display: flex;
margin-left: 24px;
gap: 15px;
}
.social-icon {
color: #ffffff;
font-size: 20px;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.social-icon:hover {
transform: translateY(-5px) scale(1.1);
background: var(--accent-color);
border-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3),
0 0 15px var(--accent-color-secondary);
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
/* 时间线布局 */
.timeline {
display: flex;
padding-top: 20px;
position: relative;
z-index: 2;
gap: 30px;
}
.timeline-left {
width: 310px;
flex-shrink: 0;
}
.timeline-right {
flex-grow: 1;
}
/* 通用卡片样式 - 漫画风格 */
.box {
background-color: var(--bg-secondary);
border-radius: 16px;
box-shadow: var(--card-shadow);
margin-bottom: 30px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 2px solid var(--border-color);
overflow: hidden;
}
.box:hover {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
border-color: var(--accent-color);
}
/* 账户按钮样式 */
.account-button {
border: 0;
background: transparent;
color: var(--text-secondary);
padding: 8px;
cursor: pointer;
position: relative;
border-radius: 50%;
transition: all 0.3s ease;
}
.account-button:hover {
background-color: var(--hover-bg);
color: var(--text-accent);
}
.account-button svg {
width: 20px;
height: 20px;
}
.account-button:not(.right-side-button) + .account-button:before {
position: absolute;
right: 5px;
top: 5px;
background-color: var(--accent-color);
width: 8px;
height: 8px;
border-radius: 50%;
content: "";
border: 2px solid var(--bg-secondary);
}
.account-profile {
width: 32px;
height: 32px;
border-radius: 50%;
margin: 0 10px;
object-fit: cover;
border: 2px solid var(--border-color);
}
.account-user {
display: inline-flex;
align-items: center;
color: var(--text-secondary);
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
}
.account-user:hover {
color: var(--text-accent);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.account-user span {
font-size: 12px;
font-weight: normal;
margin-left: 5px;
}
/* 账户区域样式 */
.account {
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
background-color: var(--bg-secondary);
z-index: 3;
flex-shrink: 0;
padding: 0 20px;
border-bottom: 2px solid var(--border-color);
}
/* 遮罩层样式 */
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: 0.3s;
z-index: 9;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
/* 右侧边栏按钮样式 - 修复与搜索框重叠问题 */
.right-side-button {
position: absolute;
right: 0;
top: 0;
height: 100%;
border: 0;
width: 52px;
background-color: var(--bg-secondary);
border-left: 2px solid var(--border-color);
color: var(--text-accent);
display: none;
cursor: pointer;
transition: all 0.3s ease;
z-index: 4; /* 增加z-index确保按钮在上层 */
}
.right-side-button:hover {
background-color: var(--hover-bg);
}
.right-side-button:before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
background-color: var(--accent-color);
border: 2px solid var(--bg-secondary);
top: 13px;
right: 12px;
}
.right-side-button svg {
width: 22px;
}
/* 左侧边栏按钮样式 */
.left-side-button {
display: none;
}
/* 响应式设计 - 左侧边栏 */
@media screen and (max-width: 930px) {
.left-side.active {
z-index: 10;
width: 260px;
}
.left-side.active > *:not(.logo) {
opacity: 1;
transition: 0.3s 0.2s;
}
.left-side.active .left-side-button svg:first-child {
opacity: 0;
}
.left-side.active .left-side-button svg:last-child {
transform: translate(-50%, -50%);
opacity: 1;
}
.left-side:not(.active) {
width: 56px;
overflow: hidden;
}
.left-side:not(.active) > *:not(.logo):not(.left-side-button) {
opacity: 0;
}
.left-side:not(.active) .logo {
transform: rotate(90deg);
transform-origin: bottom;
display: flex;
align-items: center;
justify-content: center;
height: 100px;
padding-top: 100px;
}
.left-side-button {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
height: 60px;
background-color: var(--bg-secondary);
border: 0;
padding: 0;
line-height: 0;
color: var(--text-accent);
border-bottom: 2px solid var(--border-color);
transition: all 0.3s ease;
}
.left-side-button:hover {
background-color: var(--hover-bg);
}
.left-side-button svg {
transition: 0.2s;
width: 24px;
}
.left-side-button svg:last-child {
position: absolute;
left: 50%;
transform: translate(100%, -50%);
top: 50%;
opacity: 0;
}
}
/* 响应式设计 - 右侧边栏 */
@media screen and (max-width: 1210px) {
.right-side {
position: fixed;
right: 0;
top: 0;
transition: 0.3s;
height: 100%;
transform: translateX(280px);
z-index: 10;
}
.right-side.active {
transform: translatex(0);
}
.overlay.active {
z-index: 8;
opacity: 1;
visibility: visible;
pointer-events: all;
}
.right-side-button {
display: block;
}
}
/* 响应式设计 - 个人资料区域 */
@media screen and (max-width: 700px) {
.profile-avatar {
top: -25px;
left: 50%;
transform: translatex(-50%);
align-items: center;
flex-direction: column;
justify-content: center;
}
.profile-img {
height: 100px;
width: 100px;
}
.profile-name {
margin: 10px 0;
text-align: center;
}
.social-icons {
margin-left: 0;
justify-content: center;
}
.profile-menu {
padding-left: 0;
width: 100%;
overflow: auto;
justify-content: center;
}
.profile-menu-link {
padding: 16px;
font-size: 14px;
}
}
/* 响应式设计 - 时间线布局 */
@media screen and (max-width: 768px) {
.timeline {
flex-wrap: wrap;
flex-direction: column-reverse;
}
.timeline-right {
padding-left: 0;
margin-bottom: 20px;
}
.timeline-left {
width: 100%;
}
/* 修改媒体行布局，使音乐播放器和个人空间在移动端单独显示 */
.media-row {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 20px;
}
.main-container {
padding: 20px;
}
}
/* 响应式设计 - 个人资料菜单 */
@media screen and (max-width: 480px) {
.profile-menu-link:nth-last-child(1),
.profile-menu-link:nth-last-child(2) {
display: none;
}
.main-container {
padding: 15px;
}
}
/* 滚动条样式 */
::-webkit-scrollbar {
width: 8px;
border-radius: 10px;
}
::-webkit-scrollbar-track {
background: var(--hover-bg);
}
::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent-color);
}
/* 字体图标样式 */
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ========== 优化后的样式 ========== */
/* 卡片标题样式 */
.card-title {
font-size: 18px;
font-weight: 800;
color: var(--text-accent);
margin-bottom: 15px;
padding: 15px 15px 10px;
border-bottom: 2px solid var(--border-color);
display: flex;
align-items: center;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.card-title i {
margin-right: 10px;
color: var(--accent-color);
}
/* 卡片内容样式 */
.card-content {
padding: 15px;
}
/* 竖向轮播图样式 - 移除毛玻璃效果 */
.vertical-carousel {
position: relative;
border-radius: 16px;
overflow: hidden;
height: 400px;
}
.vertical-slides {
height: 100%;
display: flex;
flex-direction: column;
transition: transform 0.5s ease;
}
.vertical-slide {
height: 100%;
width: 100%;
flex-shrink: 0;
}
.vertical-blog-card {
display: block;
height: 100%;
position: relative;
}
.vertical-blog-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.vertical-blog-card:hover img {
transform: scale(1.05);
}
.vertical-text-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
color: white;
padding: 20px;
}
.vertical-text-slide {
display: none;
}
.vertical-text-slide.active {
display: block;
}
.date {
font-size: 14px;
opacity: 0.8;
margin-bottom: 8px;
color: var(--text-secondary);
}
.excerpt {
font-size: 15px;
margin-bottom: 10px;
color: var(--text-secondary);
}
.title {
font-size: 22px;
font-weight: 800;
margin-bottom: 15px;
color: var(--text-accent);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.button {
display: inline-block;
padding: 8px 20px;
background-color: var(--accent-color);
color: white;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
border: none;
cursor: pointer;
}
.button:hover {
background-color: var(--accent-color-secondary);
transform: translateY(-2px);
}
.vertical-dots {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 8px;
z-index: 10;
}
.vertical-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
border: none;
outline: none;
}
.vertical-dot.active {
background-color: var(--accent-color);
transform: scale(1.2);
}
/* 音乐播放器和个人空间布局优化 - 改为与项目板块相同的布局 */
.media-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 30px;
}
/* 音乐播放器 */
.music-player-container {
background: var(--bg-secondary);
border-radius: 16px;
padding: 15px;
transition: all 0.3s ease;
width: 100%;
border: 2px solid var(--border-color);
height: 100%;
display: flex;
flex-direction: column;
margin-bottom: 0; /* 移除底部边距，由media-row控制 */
}
.music-player {
display: flex;
align-items: center;
gap: 15px;
flex: 1;
}
.cover {
width: 80px;
height: 80px;
border-radius: 16px;
overflow: hidden;
flex-shrink: 0;
}
.cover img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.cover:hover img {
transform: scale(1.1);
}
.music-info {
flex-grow: 1;
text-align: left;
}
.music-title {
font-size: 16px;
font-weight: 800;
margin-bottom: 5px;
color: var(--text-accent);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.music-artist {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 12px;
}
.progress-container {
width: 100%;
height: 4px;
background-color: var(--hover-bg);
border-radius: 2px;
margin-bottom: 10px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.progress {
height: 100%;
background: linear-gradient(90deg, var(--accent-color), var(--accent-color-secondary));
border-radius: 2px;
width: 0%;
transition: width 0.1s linear;
position: relative;
}
.progress::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity 0.2s;
}
.progress-container:hover .progress::after {
opacity: 1;
}
.time-info {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--text-secondary);
}
.controls {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.play-pause-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent-color), var(--accent-color-secondary));
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
border: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.play-pause-btn:hover {
transform: scale(1.1);
box-shadow: 0 0 15px rgba(30, 144, 255, 0.5);
}
.control-btn {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--hover-bg);
color: var(--text-primary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
border: none;
}
.control-btn:hover {
background-color: var(--accent-color-secondary);
color: white;
}
.pause-icon {
display: none;
}
.playing .play-icon {
display: none;
}
.playing .pause-icon {
display: block;
}
/* 个人空间卡片 - 优化为与项目板块相同的布局 */
.space-card {
background: var(--bg-secondary);
border-radius: 16px;
transition: all 0.3s ease;
display: flex;
align-items: stretch;
position: relative;
overflow: hidden;
width: 100%;
border: 2px solid var(--border-color);
text-decoration: none;
height: 100%;
margin-bottom: 0; /* 移除底部边距，由media-row控制 */
}
.space-card:hover {
transform: translateY(-5px);
box-shadow: var(--card-shadow);
border-color: var(--accent-color);
}
.space-content {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
.space-title {
font-size: 18px;
font-weight: 800;
margin-bottom: 8px;
color: var(--text-accent);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.space-desc {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 15px;
}
.space-button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
background: linear-gradient(90deg, var(--accent-color), var(--accent-color-secondary));
color: white;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
width: fit-content;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.space-button:hover {
background: linear-gradient(90deg, var(--accent-color-secondary), var(--accent-color));
transform: translateY(-2px);
}
.space-image {
width: 40%;
position: relative;
overflow: hidden;
}
.space-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease;
}
.space-card:hover .space-image img {
transform: scale(1.05);
}
/* API列表 - 移除毛玻璃效果 */
.api-list {
margin-top: 30px;
}
.api-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
gap: 20px;
}
.api-card {
position: relative;
border-radius: 16px;
overflow: hidden;
height: 180px;
transition: all 0.3s ease;
border: 2px solid var(--border-color);
}
.api-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease;
}
.api-card:hover {
transform: translateY(-5px);
box-shadow: var(--card-shadow);
border-color: var(--accent-color);
}
.api-card:hover img {
transform: scale(1.05);
}
.card-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
color: white;
padding: 20px;
}
.card-overlay h3 {
font-size: 18px;
font-weight: 800;
margin-bottom: 8px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.card-overlay p {
font-size: 14px;
opacity: 0.9;
margin-bottom: 8px;
}
/* 待办事项 */
.todo-list {
list-style: none;
}
.todo-item {
display: flex;
align-items: center;
padding: 12px 0;
border-bottom: 2px dashed var(--border-color);
}
.todo-checkbox {
margin-right: 12px;
accent-color: var(--accent-color);
width: 18px;
height: 18px;
cursor: pointer;
}
.todo-text {
flex: 1;
color: var(--text-primary);
transition: all 0.3s ease;
font-weight: 600;
}
.todo-text.completed {
text-decoration: line-through;
opacity: 0.7;
}
.todo-delete {
color: var(--text-secondary);
cursor: pointer;
transition: all 0.3s ease;
padding: 5px;
}
.todo-delete:hover {
color: var(--accent-color);
}
.todo-add {
display: flex;
margin-top: 15px;
}
.todo-input {
flex: 1;
padding: 12px;
border: 2px solid var(--border-color);
border-radius: 8px 0 0 8px;
background: var(--hover-bg);
color: var(--text-primary);
outline: none;
font-weight: 600;
}
.todo-input:focus {
border-color: var(--accent-color);
}
.todo-submit {
padding: 12px 20px;
background: linear-gradient(90deg, var(--accent-color), var(--accent-color-secondary));
color: white;
border: none;
border-radius: 0 8px 8px 0;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.todo-submit:hover {
background: linear-gradient(90deg, var(--accent-color-secondary), var(--accent-color));
}
/* 天气小部件整体样式 */
.weather-widget {
padding: 15px;
display: flex;
flex-direction: column;
gap: 15px;
}
/* 地区信息样式 - 移到标题下方 */
.weather-location {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--border-color);
text-align: center;
font-weight: 600;
}
/* 今天天气样式 */
.weather-today {
background: var(--hover-bg);
border-radius: 12px;
padding: 15px;
border: 2px solid var(--border-color);
}
.weather-current {
display: flex;
align-items: center;
gap: 15px;
}
.weather-icon {
font-size: 2.5rem;
color: var(--accent-color);
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.weather-info {
flex: 1;
}
.weather-temp {
font-size: 1.8rem;
font-weight: 800;
margin-bottom: 5px;
color: var(--text-accent);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.weather-desc {
font-size: 14px;
opacity: 0.9;
color: var(--text-secondary);
}
/* 预报天气样式 */
.weather-forecast {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.weather-day {
background: var(--hover-bg);
border-radius: 10px;
padding: 12px;
text-align: center;
border: 2px solid var(--border-color);
transition: all 0.3s ease;
}
.weather-day:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border-color: var(--accent-color);
}
.weather-day-icon {
font-size: 1.8rem;
margin: 8px 0;
color: var(--accent-color);
}
.weather-day-temp {
font-weight: 800;
margin-bottom: 5px;
color: var(--text-accent);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
/* 公告栏 - 修复文字颜色跟随主题变化 */
.announcement {
padding: 15px;
}
.announcement-content {
font-size: 14px;
color: var(--text-primary); /* 使用继承的颜色，跟随主题变化 */
line-height: 1.7;
font-weight: 600;
}
.announcement-content a {
color: var(--accent-color);
text-decoration: none;
transition: all 0.3s ease;
font-weight: 600;
}
.announcement-content a:hover {
text-decoration: underline;
color: var(--accent-color-secondary);
}
/* 赞赏码 */
.donate-box {
text-align: center;
padding: 15px;
}
.donate-title {
font-size: 16px;
color: var(--text-accent);
margin-bottom: 15px;
font-weight: 800;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.donate-image {
width: 180px;
height: 180px;
margin: 0 auto;
border-radius: 8px;
overflow: hidden;
border: 2px solid var(--border-color);
transition: all 0.3s ease;
box-shadow: var(--card-shadow);
cursor: pointer; /* 添加指针样式表明可点击 */
}
.donate-image:hover {
transform: scale(1.05);
border-color: var(--accent-color);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.donate-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.donate-desc {
font-size: 14px;
color: var(--text-secondary);
margin-top: 10px;
font-weight: 600;
}
/* 赞赏码放大模态框 */
.donate-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.donate-modal.active {
opacity: 1;
visibility: visible;
}
.donate-modal-content {
max-width: 90%;
max-height: 90%;
position: relative;
border-radius: 8px;
overflow: hidden;
box-shadow: var(--card-shadow);
transform: scale(0.9);
transition: all 0.3s ease;
}
.donate-modal.active .donate-modal-content {
transform: scale(1);
}
.donate-modal-content img {
display: block;
max-width: 100%;
max-height: 80vh;
object-fit: contain;
}
.donate-modal-close {
position: absolute;
top: 15px;
right: 15px;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid rgba(255, 255, 255, 0.2);
font-size: 20px;
}
.donate-modal-close:hover {
background: rgba(255, 0, 0, 0.7);
transform: rotate(90deg);
}
/* 访客统计 */
.stats-chart {
height: 200px;
margin-top: 15px;
position: relative;
width: 100%;
}
/* 最新评论 */
.comment-item {
padding: 12px 15px;
border-bottom: 2px dashed var(--border-color);
transition: all 0.3s ease;
}
.comment-item:hover {
background: var(--hover-bg);
transform: translateX(5px);
}
.comment-item:last-child {
border-bottom: none;
}
.comment-author {
font-weight: 800;
color: var(--text-accent);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.comment-text {
font-size: 14px;
color: var(--text-primary);
margin: 8px 0;
font-weight: 600;
}
.comment-date {
font-size: 12px;
color: var(--text-secondary);
font-weight: 600;
}
/* 日历小部件 */
.calendar-widget {
padding: 15px;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.calendar-title {
font-weight: 800;
font-size: 16px;
color: var(--text-accent);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.calendar-nav {
display: flex;
gap: 8px;
}
.calendar-nav-btn {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: var(--hover-bg);
transition: all 0.3s ease;
border: none;
color: var(--text-primary);
}
.calendar-nav-btn:hover {
background: var(--accent-color);
color: white;
transform: scale(1.1);
}
.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
margin-bottom: 10px;
font-size: 12px;
color: var(--text-secondary);
font-weight: 600;
}
.calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
}
.calendar-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
color: var(--text-primary);
font-weight: 600;
}
.calendar-day:hover {
background: var(--hover-bg);
color: var(--text-accent);
transform: scale(1.1);
}
.calendar-day.today {
background: var(--accent-color);
color: white;
font-weight: 800;
box-shadow: 0 0 10px rgba(30, 144, 255, 0.5);
}
.calendar-day.other-month {
opacity: 0.4;
}
/* 标签云 */
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 15px;
}
.tag {
display: inline-block;
padding: 6px 12px;
background: var(--hover-bg);
border-radius: 50px;
font-size: 12px;
transition: all 0.3s ease;
color: var(--text-primary);
text-decoration: none;
font-weight: 600;
border: 2px solid var(--border-color);
}
.tag:hover {
background: var(--accent-color);
color: white;
transform: translateY(-2px) scale(1.05);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
border-color: var(--accent-color);
}
/* 加载动画 */
@keyframes fadeIn {
to { opacity: 1; }
}
/* 浮动按钮 */
.float-button {
position: fixed;
right: 20px;
bottom: 20px;
display: flex;
flex-direction: column;
gap: 12px;
z-index: 999;
}
.upward {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent-color), var(--accent-color-secondary));
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
border: none;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}
.upward:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.upward i {
transition: all 0.3s ease;
}
.upward:hover i {
transform: translateY(-3px);
}
/* FPS监控 */
.comic-fps {
position: fixed;
left: 10px;
bottom: 10px;
display: flex;
align-items: center;
z-index: 999;
user-select: none;
font-family: "PingFang SC", sans-serif;
}
.fps-bubble {
position: relative;
background: var(--bg-secondary);
border: 2px solid var(--border-color);
border-radius: 20px;
padding: 8px 15px;
box-shadow: var(--card-shadow);
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.fps-bubble:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
border-color: var(--accent-color);
}
.fps-character {
font-size: 18px;
transform: translateY(2px);
opacity: 0.9;
transition: all 0.3s ease;
}
.fps-value {
font-weight: 800;
font-size: 16px;
margin-right: 5px;
color: var(--accent-color);
transition: all 0.3s ease;
}
.fps-status {
font-size: 14px;
color: var(--text-primary);
font-weight: 600;
}
/* FPS状态颜色 */
.comic-fps.excellent {
--comic-accent: #10ac84;
}
.comic-fps.good {
--comic-accent: #feca57;
}
.comic-fps.normal {
--comic-accent: #ff9f43;
}
.comic-fps.low {
--comic-accent: #ee5253;
}
.comic-fps.critical {
--comic-accent: #ff4757;
animation: shake 0.5s infinite;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-3px); }
75% { transform: translateX(3px); }
}
/* 右侧边栏卡片间距优化 */
.right-side .box {
margin: 15px;
max-height: none;
overflow: visible;
}
/* 主内容区域优化 */
.main-container {
padding: 30px;
}
/* 时间线布局优化 */
.timeline {
gap: 30px;
}
/* ========== 主题选择面板优化 - 每行两个颜色 ========== */
.theme-panel {
position: fixed;
top: 80px;
right: 20px;
background: var(--bg-secondary);
border-radius: 20px;
box-shadow: var(--card-shadow);
border: 2px solid var(--border-color);
padding: 25px;
z-index: 1000; /* 增加z-index确保在最顶层 */
width: 350px;
transform: translateX(400px);
transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
overflow: hidden;
}
.theme-panel.active {
transform: translateX(0);
}
.theme-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid var(--border-color);
}
.theme-panel-title {
font-size: 20px;
font-weight: 800;
color: var(--text-accent);
display: flex;
align-items: center;
gap: 10px;
}
.theme-panel-title i {
color: var(--accent-color);
font-size: 22px;
}
.theme-panel-close {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--hover-bg);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid var(--border-color);
}
.theme-panel-close:hover {
background: var(--accent-color);
color: white;
transform: rotate(90deg);
border-color: transparent;
}
/* 主题选项 - 修改为每行两个 */
.theme-options {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 修改为两列布局 */
gap: 20px;
}
.theme-option {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
padding: 15px 10px;
border-radius: 15px;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.theme-option:hover {
background: var(--hover-bg);
transform: translateY(-5px);
}
.theme-option.active {
border-color: var(--accent-color);
background: var(--hover-bg);
}
.theme-option.active::before {
content: '✓';
position: absolute;
top: 5px;
right: 5px;
width: 20px;
height: 20px;
background: var(--accent-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
z-index: 2;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.theme-preview {
width: 70px;
height: 70px;
border-radius: 15px;
margin-bottom: 12px;
overflow: hidden;
position: relative;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
transform: perspective(800px) rotateX(10deg);
}
.theme-option:hover .theme-preview {
transform: perspective(800px) rotateX(0deg) scale(1.05);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}
.theme-preview-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.theme-preview-card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
height: 40%;
border-radius: 5px;
}
.theme-preview-accent {
position: absolute;
bottom: 10px;
right: 10px;
width: 15px;
height: 15px;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.theme-name {
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
text-align: center;
transition: all 0.3s ease;
}
.theme-option:hover .theme-name {
color: var(--accent-color);
}
/* 主题预览样式 */
.theme-dark .theme-preview-bg { background-color: #1a1a2e; }
.theme-dark .theme-preview-card { background-color: #16213e; }
.theme-dark .theme-preview-accent { background-color: #1e90ff; }
.theme-light .theme-preview-bg { background-color: #f8fafc; }
.theme-light .theme-preview-card { background-color: #ffffff; }
.theme-light .theme-preview-accent { background-color: #0ea5e9; }
.theme-blue .theme-preview-bg { background-color: #0f172a; }
.theme-blue .theme-preview-card { background-color: #1e293b; }
.theme-blue .theme-preview-accent { background-color: #3b82f6; }
.theme-green .theme-preview-bg { background-color: #064e3b; }
.theme-green .theme-preview-card { background-color: #065f46; }
.theme-green .theme-preview-accent { background-color: #10b981; }
.theme-purple .theme-preview-bg { background-color: #2e1065; }
.theme-purple .theme-preview-card { background-color: #4c1d95; }
.theme-purple .theme-preview-accent { background-color: #8b5cf6; }
.theme-cyberpunk .theme-preview-bg { background-color: #0c0a20; }
.theme-cyberpunk .theme-preview-card { background-color: #1a1033; }
.theme-cyberpunk .theme-preview-accent { background-color: #f0f; }
/* 主题切换按钮 */
.theme-toggle {
width: 45px;
height: 45px;
border-radius: 50%;
background: var(--hover-bg);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
border: 2px solid var(--border-color);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.theme-toggle:hover {
background: linear-gradient(135deg, var(--accent-color), var(--accent-color-secondary));
transform: scale(1.1) rotate(15deg);
border-color: transparent;
}
.theme-toggle i {
font-size: 20px;
color: var(--text-primary);
transition: all 0.3s ease;
}
.theme-toggle:hover i {
color: white;
transform: rotate(180deg);
}
.theme-toggle::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle, var(--accent-color-secondary) 0%, transparent 70%);
opacity: 0;
transition: all 0.3s ease;
}
.theme-toggle:hover::after {
opacity: 0.3;
}
/* 主题切换通知 */
.theme-notification {
position: fixed;
bottom: 30px;
right: 30px;
padding: 15px 25px;
border-radius: 15px;
background: var(--bg-secondary);
color: var(--text-primary);
font-weight: 600;
box-shadow: var(--card-shadow);
border: 2px solid var(--accent-color);
z-index: 1000;
transform: translateY(100px);
opacity: 0;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
align-items: center;
gap: 12px;
}
.theme-notification.show {
transform: translateY(0);
opacity: 1;
}
.theme-notification i {
font-size: 22px;
color: var(--accent-color);
animation: spin 1s ease;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 响应式优化 */
@media screen and (max-width: 1024px) {
.api-cards {
grid-template-columns: 1fr;
}
.theme-panel {
width: 320px;
}
.theme-options {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 768px) {
/* 移动端布局优化 - 音乐播放器和个人空间一行一个 */
.media-row {
grid-template-columns: 1fr;
}
.theme-panel {
width: 280px;
right: 10px;
}
}
@media screen and (max-width: 480px) {
.vertical-carousel {
height: 300px;
}
.theme-panel {
width: calc(100% - 20px);
max-width: 300px;
}
.theme-options {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
</head>
<body data-theme="dark">
<!-- 主容器 - 使用Alpine.js管理状态 -->
<div class="container" x-data="{ rightSide: false, leftSide: false, themePanel: false }">
<!-- 左侧边栏 - 导航菜单 -->
<div class="left-side" :class="{'active' : leftSide}">
<!-- 左侧边栏切换按钮 - 移动端显示 -->
<div class="left-side-button" @click="leftSide = !leftSide">
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
<svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M19 12H5M12 19l-7-7 7-7"></path>
</svg>
</div>
<!-- Logo区域 -->
<div class="logo">TENGYUAN</div>
<!-- 主菜单区域 -->
<div class="side-wrapper">
<div class="side-title">菜单</div>
<div class="side-menu">
<a href="#" class="active">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"></path>
<path d="M9 22V12h6v10"></path>
</svg>
首页
</a>
<a href="#">
<svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M2 3h6a4 4 0 0 1 4 4v10M16 7v10M3 11h18M11 3v18"></path>
</svg>
文章
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"></path>
<circle cx="12" cy="10" r="3"></circle>
</svg>
探索
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"></path>
<path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"></path>
</svg>
资源
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<path d="M21 15l-5-5L5 21"></path>
</svg>
作品集
</a>
</div>
</div>
<!-- 分类菜单区域 -->
<div class="side-wrapper">
<div class="side-title">分类</div>
<div class="side-menu">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"></path>
</svg>
技术
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<path d="M16 2v4M8 2v4M3 10h18"></path>
</svg>
设计
</a>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
商业
</a>
</div>
</div>
<!-- 关注我区域 -->
<a href="#" class="follow-me" target="_blank">
<span class="follow-text">
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
</svg>
关注我
</span>
<span class="developer">
<img src="https://a.520gexing.com/uploads/allimg/2019032616/3mltnpfys55.jpg">
开发者信息
</span>
</a>
</div>
<!-- 主内容区域 -->
<div class="main">
<!-- 搜索栏 - 已调整位置 -->
<div class="search-bar">
<input type="text" placeholder="搜索文章、标签或作者...">
<button class="right-side-button" @click="rightSide = !rightSide">
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
</button>
</div>
<!-- 主内容容器 -->
<div class="main-container">
<!-- 个人资料区域 -->
<div class="profile">
<div class="profile-avatar">
<img src="https://a.520gexing.com/uploads/allimg/2019032616/3mltnpfys55.jpg" alt="" class="profile-img">
<div class="profile-name">TENG YUAN</div>
<div class="social-icons">
<a href="#" class="social-icon" title="哔哩哔哩">
<i class="fab fa-bilibili"></i>
</a>
<a href="#" class="social-icon" title="抖音">
<i class="fab fa-tiktok"></i>
</a>
<a href="#" class="social-icon" title="小红书">
<i class="fas fa-book"></i>
</a>
<a href="mailto:your@email.com" class="social-icon" title="邮箱">
<i class="fas fa-envelope"></i>
</a>
</div>
</div>
<img src="https://api.yilx.net/img/pc" alt="" class="profile-cover">
<div class="profile-menu">
<a class="profile-menu-link active">博客</a>
<a class="profile-menu-link">关于</a>
<a class="profile-menu-link">项目</a>
<a class="profile-menu-link">联系</a>
<a class="profile-menu-link">相册</a>
<a class="profile-menu-link">收藏</a>
</div>
</div>
<!-- 时间线布局 -->
<div class="timeline">
<!-- 左侧时间线 - 个人信息和活动 -->
<div class="timeline-left">
<!-- 竖向轮播图卡片 -->
<div class="box">
<div class="vertical-carousel">
<div class="vertical-slides" style="transform: translateY(-200%);">
<div class="vertical-slide">
<a href="https://blog.tengyuan.icu" class="vertical-blog-card" target="_blank">
<img class="lazy" data-original="https://yilx.net/static/img/lxbg.jpeg" alt="MC开服教程" src="https://api.yilx.net/image/lunbotu/6.jpg">
<div class="vertical-text-content">
<div class="vertical-text-slide">
<p class="date">2025-04-21</p>
<h2 class="title">标题1</h2>
<p class="excerpt">描述</p>
</div>
</div>
</a>
</div>
<div class="vertical-slide">
<a href="https://blog.tengyuan.icu" class="vertical-blog-card" target="_blank">
<img class="lazy" data-original="https://yilx.net/static/img/lxbg.jpeg" alt="使用/give获取特殊nbt物品" src="https://yilx.net/static/img/lxbg.jpeg">
<div class="vertical-text-content">
<div class="vertical-text-slide">
<p class="date">2025-4-18</p>
<h2 class="title">标题2</h2>
<p class="excerpt">描述</p>
</div>
</div>
</a>
</div>
<div class="vertical-slide">
<a href="https://blog.tengyuan.icu" class="vertical-blog-card" target="_blank">
<img class="lazy" data-original="https://yilx.net/static/img/lxbg.jpeg" alt="标题3" src="http://localhost/static/img/tx.jpg">
<div class="vertical-text-content">
<div class="vertical-text-slide active">
<p class="date">2025-5-1</p>
<h2 class="title">标题3</h2>
<p class="excerpt">描述</p>
</div>
</div>
</a>
</div>
</div>
<div class="vertical-dots">
<button class="vertical-dot"></button>
<button class="vertical-dot"></button>
<button class="vertical-dot active"></button>
</div>
</div>
</div>
<!-- 待办事项 -->
<div class="box">
<div class="card-title">
<i class="fas fa-tasks"></i> 待办事项
</div>
<div class="card-content">
<ul class="todo-list" id="todoList">
<li class="todo-item">
<input type="checkbox" class="todo-checkbox" checked>
<span class="todo-text completed">完成首页设计</span>
<i class="fas fa-trash todo-delete"></i>
</li>
<li class="todo-item">
<input type="checkbox" class="todo-checkbox">
<span class="todo-text">添加音乐播放器</span>
<i class="fas fa-trash todo-delete"></i>
</li>
<li class="todo-item">
<input type="checkbox" class="todo-checkbox">
<span class="todo-text">优化移动端体验</span>
<i class="fas fa-trash todo-delete"></i>
</li>
</ul>
<div class="todo-add">
<input type="text" class="todo-input" placeholder="添加新任务...">
<button class="todo-submit">添加</button>
</div>
</div>
</div>
</div>
<!-- 右侧时间线 - 博客文章 -->
<div class="timeline-right">
<!-- 音乐播放器和个人空间 - 优化为两列布局 -->
<div class="media-row">
<!-- 音乐播放器 -->
<div class="box music-player-container">
<audio id="myAudio" src="https://api.yilx.net/music/Hyper-energetic-ACG"></audio>
<div class="music-player">
<div class="cover">
<img class="lazy" data-original="https://api.yilx.net/img/pm" alt="专辑封面" src="https://api.yilx.net/img/pm">
</div>
<div class="music-info">
<h3 class="music-title">随机音乐</h3>
<p class="music-artist">藤原的音乐推荐</p>
<div class="progress-container">
<div class="progress" id="progress"></div>
</div>
<div class="time-info">
<span id="current-time">0:00</span>
<span id="duration">0:00</span>
</div>
<div class="controls">
<button class="control-btn" id="prev-btn">
<i class="fas fa-step-backward"></i>
</button>
<button class="play-pause-btn" id="play-btn">
<span class="play-icon">
<i class="fas fa-play"></i>
</span>
<span class="pause-icon">
<i class="fas fa-pause"></i>
</span>
</button>
<button class="control-btn" id="next-btn">
<i class="fas fa-step-forward"></i>
</button>
</div>
</div>
</div>
</div>
<!-- 个人空间卡片 -->
<a href="https://b23.tv/pDBTVlx" class="box space-card" target="_blank">
<div class="space-content">
<h3 class="space-title">个人空间</h3>
<p class="space-desc">藤原的个人空间</p>
<span class="space-button">
前往空间
<i class="fas fa-arrow-right"></i>
</span>
</div>
<div class="space-image">
<img src="https://a.520gexing.com/uploads/allimg/2019032616/3mltnpfys55.jpg" alt="藤原的个人空间">
</div>
</a>
</div>
<!-- API列表 -->
<div class="api-list">
<h2 class="card-title"><i class="fas fa-link"></i> 我的项目</h2>
<div class="api-cards">
<a class="api-card box" target="_blank" href="http://blog.tengyuan.icu">
<img class="lazy" data-original="https://api.yilx.net/img/pc" alt="" src="http://api.yilx.net/upload/1742118988976.jpg">
<div class="card-overlay">
<h3>博客</h3>
<p>记录摆烂日常</p>
<p>site</p>
</div>
</a>
<a class="api-card box" target="_blank" href="https://api.yilx.net">
<img class="lazy" data-original="https://api.yilx.net/img/pc" alt="" src="https://api.yilx.net/img/pc">
<div class="card-overlay">
<h3>API站</h3>
<p>api站点/图床/统计</p>
<p>site</p>
</div>
</a>
<a class="api-card box" target="_blank" href="http://wp.tengyuan.icu">
<img class="lazy" data-original="https://camo.githubusercontent.com/01f699b5dd28e3fd101d0381f0c7471ed5a08210713d7663f0ad493d966be453/68747470733a2f2f666173746c792e6a7364656c6976722e6e65742f67682f7661737473612f46696c65436f64654278405631362f7374617469632f62616e6e6572732f696d675f312e706e67" alt="" src="http://api.yilx.net/upload/1742130278110.jpg">
<div class="card-overlay">
<h3>网盘</h3>
<p>开箱即用的文件快传系统</p>
<p>site</p>
</div>
</a>
<a class="api-card box" target="_blank" href="http://game.tengyuan.icu">
<img class="lazy" data-original="http://static.1heron.com/douyou8/ad/174409477289445.jpg" alt="" src="http://api.yilx.net/upload/1743067883203.jpg">
<div class="card-overlay">
<h3>TENGYUANの游戏小站</h3>
<p>游戏盛宴，一键解锁</p>
<p>project</p>
</div>
</a>
<a class="api-card box" target="_blank" href="http://tengyuan.icu">
<img class="lazy" data-original="https://api.yilx.net/img/pc" alt="" src="https://api.yilx.net/upload/1741001197606.jpg">
<div class="card-overlay">
<h3>TENGYUAN</h3>
<p>TENGYUAN</p>
<p>project</p>
</div>
</a>
<a class="api-card box" target="_blank" href="https://tengyuan.icu">
<img class="lazy" data-original="https://api.yilx.net/img/pc" alt="" src="http://api.yilx.net/upload/1741769788550.jpg">
<div class="card-overlay">
<h3>TENGYUAN1</h3>
<p>TENGYUAN1</p>
<p>project</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧边栏 -->
<div class="right-side" :class="{ 'active': rightSide }">
<!-- 账户控制区域 - 新增主题切换按钮 -->
<div class="account">
<div class="theme-toggle" id="themeToggleBtn" @click="themePanel = !themePanel">
<i class="fas fa-palette"></i>
</div>
<span class="account-user">TENG YUAN
<img src="https://a.520gexing.com/uploads/allimg/2019032616/3mltnpfys55.jpg" alt="" class="account-profile">
<span>▼</span>
</span>
</div>
<!-- 主题选择面板 - 美化版 -->
<div class="theme-panel" :class="{ 'active': themePanel }" id="themePanel">
<div class="theme-panel-header">
<div class="theme-panel-title">
<i class="fas fa-paint-brush"></i> 选择主题
</div>
<div class="theme-panel-close" @click="themePanel = false">
<i class="fas fa-times"></i>
</div>
</div>
<div class="theme-options">
<div class="theme-option theme-dark" data-theme="dark">
<div class="theme-preview">
<div class="theme-preview-bg"></div>
<div class="theme-preview-card"></div>
<div class="theme-preview-accent"></div>
</div>
<div class="theme-name">暗色</div>
</div>
<div class="theme-option theme-light" data-theme="light">
<div class="theme-preview">
<div class="theme-preview-bg"></div>
<div class="theme-preview-card"></div>
<div class="theme-preview-accent"></div>
</div>
<div class="theme-name">亮色</div>
</div>
<div class="theme-option theme-blue" data-theme="blue">
<div class="theme-preview">
<div class="theme-preview-bg"></div>
<div class="theme-preview-card"></div>
<div class="theme-preview-accent"></div>
</div>
<div class="theme-name">蓝色</div>
</div>
<div class="theme-option theme-green" data-theme="green">
<div class="theme-preview">
<div class="theme-preview-bg"></div>
<div class="theme-preview-card"></div>
<div class="theme-preview-accent"></div>
</div>
<div class="theme-name">绿色</div>
</div>
<div class="theme-option theme-purple" data-theme="purple">
<div class="theme-preview">
<div class="theme-preview-bg"></div>
<div class="theme-preview-card"></div>
<div class="theme-preview-accent"></div>
</div>
<div class="theme-name">紫色</div>
</div>
<div class="theme-option theme-cyberpunk" data-theme="cyberpunk">
<div class="theme-preview">
<div class="theme-preview-bg"></div>
<div class="theme-preview-card"></div>
<div class="theme-preview-accent"></div>
</div>
<div class="theme-name">赛博朋克</div>
</div>
</div>
</div>
<!-- 天气小部件 -->
<div class="box">
<div class="card-title">
<i class="fas fa-cloud-sun"></i> 天气
</div>
<div class="weather-widget">
<!-- 地区信息移到这里，放在天气内容的顶部 -->
<div id="weather-location" class="weather-location">加载中...</div>
<div class="weather-today">
<div class="weather-current">
<div class="weather-icon">
<i class="fas fa-spinner fa-spin"></i>
</div>
<div class="weather-info">
<div class="weather-temp">--°C</div>
<div class="weather-desc">获取天气中...</div>
</div>
</div>
</div>
<div class="weather-forecast">
<div class="weather-day">
<div>明天</div>
<div class="weather-day-icon">
<i class="fas fa-spinner fa-spin"></i>
</div>
<div class="weather-day-temp">--°C</div>
</div>
<div class="weather-day">
<div>后天</div>
<div class="weather-day-icon">
<i class="fas fa-spinner fa-spin"></i>
</div>
<div class="weather-day-temp">--°C</div>
</div>
</div>
</div>
</div>
<!-- 公告栏 - 修复文字颜色跟随主题变化 -->
<div class="box">
<div class="card-title">
<i class="fas fa-bullhorn"></i> 公告栏
</div>
<div class="announcement">
<div class="announcement-content">
<center>
<b>--- 主域名 ---
<br>
<a target="_blank" rel="noopener" href="https://tengyuan.icu" title="此线路部署于腾讯云服务器">
tengyuan.icu
</a> <a target="_blank" rel="noopener" href="https://tengyuan.tech" title="此线路部署于雨云服务器">
tengyuan.tech
</a>
<br>--- 备用域名 ---
<br>
<a target="_blank" rel="noopener" href="暂无" title="暂无">
暂无
</a>
<br>
<a target="_blank" rel="noopener" href="暂无" title="暂无">
暂无
</a>
<br>--- 网站安卓APP ---
<br>🍧<a target="_blank" rel="noopener" href="暂无下载链接" title="点这里可以下载网站的安卓APP">
点此下载
</a>🍧
</b>
</center>
</div>
</div>
</div>
<!-- 赞赏码板块 -->
<div class="box">
<div class="card-title">
<i class="fas fa-heart"></i> 支持我们
</div>
<div class="donate-box">
<div class="donate-title">感谢您的支持</div>
<div class="donate-image" id="donateImage">
<img src="https://bicool-user-assets--small-file.oss-rg-china-mainland.aliyuncs.com/b3ae0df4a91e6b70286a23e34cf7f61b.jpg" alt="赞赏码">
</div>
<div class="donate-desc">点击二维码放大查看</div>
</div>
</div>
<!-- 访客统计 -->
<div class="box">
<div class="card-title">
<i class="fas fa-chart-line"></i> 访客统计
</div>
<div class="announcement">
<div class="announcement-content">
<div>本站总访客量：<strong>3253</strong>次</div>
<div>今日访客量：<strong>221</strong>次</div>
<div>项目/网站总数：<strong>6</strong></div>
<div>已经有<strong>22</strong>位小伙伴入驻本站啦！</div>
</div>
</div>
<div class="stats-chart">
<!-- 这里可以放置图表，实际项目中可以使用Chart.js等库 -->
<canvas id="visitorChart" width="100%" height="200"></canvas>
</div>
</div>
<!-- 最新评论 -->
<div class="box">
<div class="card-title">
<i class="fas fa-comments"></i> 最新评论
</div>
<div class="announcement">
<div class="comment-item">
<div class="comment-author">张三</div>
<div class="comment-text">网站设计很棒！</div>
<div class="comment-date">2025-05-07</div>
</div>
<div class="comment-item">
<div class="comment-author">李四</div>
<div class="comment-text">音乐播放器很好用</div>
<div class="comment-date">2025-05-06</div>
</div>
<div class="comment-item">
<div class="comment-author">王五</div>
<div class="comment-text">期待更多内容</div>
<div class="comment-date">2025-05-05</div>
</div>
</div>
</div>
<!-- 日历小部件 -->
<div class="box">
<div class="card-title">
<i class="far fa-calendar-alt"></i> 日历
</div>
<div class="calendar-widget">
<div class="calendar-header">
<div class="calendar-title" id="calendarMonth">2025年 五月</div>
<div class="calendar-nav">
<div class="calendar-nav-btn" id="calendarPrev">
<i class="fas fa-chevron-left"></i>
</div>
<div class="calendar-nav-btn" id="calendarNext">
<i class="fas fa-chevron-right"></i>
</div>
</div>
</div>
<div class="calendar-weekdays">
<div>日</div>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
</div>
<div class="calendar-days" id="calendarDays"></div>
</div>
</div>
<!-- 标签云 -->
<div class="box">
<div class="card-title">
<i class="fas fa-tags"></i> 热门标签
</div>
<div class="announcement">
<div class="tag-cloud">
<a href="#" class="tag">前端</a>
<a href="#" class="tag">JavaScript</a>
<a href="#" class="tag">CSS</a>
<a href="#" class="tag">HTML</a>
<a href="#" class="tag">设计</a>
<a href="#" class="tag">动漫</a>
<a href="#" class="tag">游戏</a>
<a href="#" class="tag">音乐</a>
<a href="#" class="tag">摄影</a>
<a href="#" class="tag">旅行</a>
</div>
</div>
</div>
</div>
<!-- 遮罩层 - 用于移动端侧边栏弹出时覆盖主内容 -->
<div class="overlay" @click="rightSide = false; leftSide = false; themePanel = false" :class="{ 'active': rightSide || leftSide || themePanel }"></div>
<!-- 浮动按钮 -->
<div class="float-button">
<div class="upward" style="display: none;">
<i class="fas fa-arrow-up"></i>
</div>
</div>
<!-- FPS显示 -->
<div id="fpsDisplay" class="comic-fps excellent">
<div class="fps-bubble">
<span class="fps-value">60</span>
<span class="fps-status">超流畅!</span>
<span class="fps-character" style="transform: translateY(2px);">(๑•̀ㅂ•́)و✧</span>
</div>
</div>
<!-- 赞赏码放大模态框 -->
<div class="donate-modal" id="donateModal">
<div class="donate-modal-content">
<img src="https://bicool-user-assets--small-file.oss-rg-china-mainland.aliyuncs.com/b3ae0df4a91e6b70286a23e34cf7f61b.jpg" alt="赞赏码" id="donateModalImg">
<div class="donate-modal-close" id="donateModalClose">
<i class="fas fa-times"></i>
</div>
</div>
</div>
<!-- 主题切换通知 -->
<div class="theme-notification" id="themeNotification">
<i class="fas fa-check-circle"></i>
<span id="notificationText">已切换主题</span>
</div>
</div>
<script>
// 音乐播放器控制
const audio = document.getElementById('myAudio');
const playPauseBtn = document.getElementById('play-btn');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progress = document.getElementById('progress');
const currentTimeEl = document.getElementById('current-time');
const durationEl = document.getElementById('duration');
// 更新进度条
audio.addEventListener('timeupdate', () => {
const { currentTime, duration } = audio;
const progressPercent = (currentTime / duration) * 100;
progress.style.width = `${progressPercent}%`;
// 格式化时间显示
const formatTime = (time) => {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
};
currentTimeEl.textContent = formatTime(currentTime);
if (duration) {
durationEl.textContent = formatTime(duration);
}
});
// 点击进度条跳转
const progressContainer = document.querySelector('.progress-container');
progressContainer.addEventListener('click', (e) => {
const width = progressContainer.clientWidth;
const clickX = e.offsetX;
const duration = audio.duration;
audio.currentTime = (clickX / width) * duration;
});
playPauseBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playPauseBtn.classList.add('playing');
} else {
audio.pause();
playPauseBtn.classList.remove('playing');
}
});
// 音乐API基础URL
const musicApiBaseUrl = "https://api.yilx.net/music/";
// 音乐类型列表 - 可以根据实际API调整
const musicTypes = [
"Hyper-energetic-ACG",
"ACG",
"Chinese-style",
"Emotional",
"Energetic",
"Healing",
"Relaxing"
];
// 获取随机音乐类型
function getRandomMusicType() {
const randomIndex = Math.floor(Math.random() * musicTypes.length);
return musicTypes[randomIndex];
}
// 加载新音乐
function loadNewMusic() {
// 获取随机音乐类型
const musicType = getRandomMusicType();
// 构建完整的音乐URL
const musicUrl = `${musicApiBaseUrl}${musicType}`;
// 更新音频源
audio.src = musicUrl;
// 更新音乐标题
document.querySelector('.music-title').textContent = `随机音乐 - ${musicType}`;
// 加载并播放
audio.load();
audio.play();
playPauseBtn.classList.add('playing');
// 更新封面图片 - 这里假设有一个对应的封面API
const coverImg = document.querySelector('.cover img');
coverImg.src = `https://api.yilx.net/img/pm?t=${new Date().getTime()}`; // 添加时间戳避免缓存
}
// 上一首/下一首按钮 - 改为加载新音乐
prevBtn.addEventListener('click', () => {
loadNewMusic();
});
nextBtn.addEventListener('click', () => {
loadNewMusic();
});
// 歌曲结束时自动播放下一首
audio.addEventListener('ended', () => {
loadNewMusic();
});
// 返回顶部按钮
const upwardBtn = document.querySelector('.upward');
upwardBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
upwardBtn.style.display = 'flex';
} else {
upwardBtn.style.display = 'none';
}
});
// 竖向轮播图控制
let currentVerticalSlide = 0;
const verticalSlides = document.querySelectorAll('.vertical-slide');
const verticalTextSlides = document.querySelectorAll('.vertical-text-slide');
const verticalDots = document.querySelectorAll('.vertical-dot');
const verticalSlidesContainer = document.querySelector('.vertical-slides');
function showVerticalSlide(n) {
currentVerticalSlide = (n + verticalSlides.length) % verticalSlides.length;
// 更新轮播图位置
verticalSlidesContainer.style.transform = `translateY(-${currentVerticalSlide * 100}%)`;
// 更新文本和指示点状态
verticalTextSlides.forEach((slide, index) => {
if(index === currentVerticalSlide) {
slide.classList.add('active');
} else {
slide.classList.remove('active');
}
});
verticalDots.forEach((dot, index) => {
if(index === currentVerticalSlide) {
dot.classList.add('active');
} else {
dot.classList.remove('active');
}
});
}
verticalDots.forEach((dot, index) => {
dot.addEventListener('click', () => {
showVerticalSlide(index);
});
});
// 自动轮播
let slideInterval = setInterval(() => {
showVerticalSlide(currentVerticalSlide + 1);
}, 5000);
// 鼠标悬停时暂停轮播
const verticalCarousel = document.querySelector('.vertical-carousel');
verticalCarousel.addEventListener('mouseenter', () => {
clearInterval(slideInterval);
});
verticalCarousel.addEventListener('mouseleave', () => {
slideInterval = setInterval(() => {
showVerticalSlide(currentVerticalSlide + 1);
}, 5000);
});
showVerticalSlide(0);
// 主题选择功能 - 增强版
const themeOptions = document.querySelectorAll('.theme-option');
const html = document.documentElement;
// 检查本地存储中的主题设置
const currentTheme = localStorage.getItem('theme') || 'dark';
html.setAttribute('data-theme', currentTheme);
// 更新活动主题选项
function updateActiveThemeOption(theme) {
themeOptions.forEach(option => {
if (option.getAttribute('data-theme') === theme) {
option.classList.add('active');
} else {
option.classList.remove('active');
}
});
}
// 初始化时设置活动主题选项
updateActiveThemeOption(currentTheme);
// 主题选项点击事件 - 添加动画效果
themeOptions.forEach(option => {
option.addEventListener('click', function() {
const theme = this.getAttribute('data-theme');
// 添加点击动画效果
this.style.transform = 'scale(0.95)';
setTimeout(() => {
this.style.transform = '';
setTheme(theme);
}, 150);
});
});
// 设置主题
function setTheme(theme) {
// 添加过渡动画类
document.body.classList.add('theme-transition');
// 设置主题
html.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
updateActiveThemeOption(theme);
// 显示主题切换通知
showThemeNotification(theme);
// 移除过渡动画类
setTimeout(() => {
document.body.classList.remove('theme-transition');
}, 1000);
}
// 显示主题切换通知 - 增强版
function showThemeNotification(theme) {
const notification = document.getElementById('themeNotification');
const notificationText = document.getElementById('notificationText');
// 设置通知文本
let themeName = '';
let themeEmoji = '';
switch(theme) {
case 'dark':
themeName = '暗色';
themeEmoji = '🌙';
break;
case 'light':
themeName = '亮色';
themeEmoji = '☀️';
break;
case 'blue':
themeName = '蓝色';
themeEmoji = '🌊';
break;
case 'green':
themeName = '绿色';
themeEmoji = '🌿';
break;
case 'purple':
themeName = '紫色';
themeEmoji = '🔮';
break;
case 'cyberpunk':
themeName = '赛博朋克';
themeEmoji = '🤖';
break;
default:
themeName = '';
themeEmoji = '🎨';
}
notificationText.textContent = `${themeEmoji} 已切换至${themeName}主题`;
// 显示通知
notification.classList.add('show');
// 3秒后隐藏通知
setTimeout(() => {
notification.classList.remove('show');
}, 3000);
}
// 日历功能
function renderCalendar(year, month) {
const calendarDays = document.getElementById('calendarDays');
const calendarMonth = document.getElementById('calendarMonth');
// 设置月份标题
const monthNames = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
calendarMonth.textContent = `${year}年 ${monthNames[month]}`;
// 获取当月第一天和最后一天
const firstDay = new Date(year, month, 1);
const lastDay = new Date(year, month + 1, 0);
// 获取当月天数
const daysInMonth = lastDay.getDate();
// 获取当月第一天是星期几 (0-6, 0是星期日)
const firstDayOfWeek = firstDay.getDay();
// 获取上个月最后几天
const prevMonthLastDay = new Date(year, month, 0).getDate();
// 清空日历
calendarDays.innerHTML = '';
// 添加上个月的几天
for (let i = firstDayOfWeek - 1; i >= 0; i--) {
const dayElement = document.createElement('div');
dayElement.className = 'calendar-day other-month';
dayElement.textContent = prevMonthLastDay - i;
calendarDays.appendChild(dayElement);
}
// 添加当月天数
const today = new Date();
for (let i = 1; i <= daysInMonth; i++) {
const dayElement = document.createElement('div');
dayElement.className = 'calendar-day';
dayElement.textContent = i;
// 标记今天
if (year === today.getFullYear() && month === today.getMonth() && i === today.getDate()) {
dayElement.classList.add('today');
}
calendarDays.appendChild(dayElement);
}
// 添加下个月的前几天
const remainingDays = 42 - (firstDayOfWeek + daysInMonth); // 6行x7天=42格
for (let i = 1; i <= remainingDays; i++) {
const dayElement = document.createElement('div');
dayElement.className = 'calendar-day other-month';
dayElement.textContent = i;
calendarDays.appendChild(dayElement);
}
}
// 初始化日历
let currentDate = new Date();
let currentYear = currentDate.getFullYear();
let currentMonth = currentDate.getMonth();
renderCalendar(currentYear, currentMonth);
// 日历导航按钮
document.getElementById('calendarPrev').addEventListener('click', () => {
currentMonth--;
if (currentMonth < 0) {
currentMonth = 11;
currentYear--;
}
renderCalendar(currentYear, currentMonth);
});
document.getElementById('calendarNext').addEventListener('click', () => {
currentMonth++;
if (currentMonth > 11) {
currentMonth = 0;
currentYear++;
}
renderCalendar(currentYear, currentMonth);
});
// 待办事项功能
const todoList = document.getElementById('todoList');
const todoInput = document.querySelector('.todo-input');
const todoSubmit = document.querySelector('.todo-submit');
// 添加新任务
function addTodoItem(text, completed = false) {
const li = document.createElement('li');
li.className = 'todo-item';
li.innerHTML = `
<input type="checkbox" class="todo-checkbox" ${completed ? 'checked' : ''}>
<span class="todo-text ${completed ? 'completed' : ''}">${text}</span>
<i class="fas fa-trash todo-delete"></i>
`;
// 添加事件监听器
const checkbox = li.querySelector('.todo-checkbox');
const deleteBtn = li.querySelector('.todo-delete');
checkbox.addEventListener('change', function() {
const textElement = this.nextElementSibling;
textElement.classList.toggle('completed', this.checked);
saveTodos();
});
deleteBtn.addEventListener('click', function() {
li.remove();
saveTodos();
});
todoList.appendChild(li);
}
// 保存待办事项到本地存储
function saveTodos() {
const todos = [];
document.querySelectorAll('.todo-item').forEach(item => {
todos.push({
text: item.querySelector('.todo-text').textContent,
completed: item.querySelector('.todo-checkbox').checked
});
});
localStorage.setItem('todos', JSON.stringify(todos));
}
// 从本地存储加载待办事项
function loadTodos() {
const todos = JSON.parse(localStorage.getItem('todos')) || [];
todos.forEach(todo => {
addTodoItem(todo.text, todo.completed);
});
}
// 添加新任务
todoSubmit.addEventListener('click', function() {
const text = todoInput.value.trim();
if (text) {
addTodoItem(text);
todoInput.value = '';
saveTodos();
}
});
// 按Enter键添加任务
todoInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
const text = todoInput.value.trim();
if (text) {
addTodoItem(text);
todoInput.value = '';
saveTodos();
}
}
});
// 加载待办事项
loadTodos();
// 访客统计图表
function renderVisitorChart() {
const ctx = document.getElementById('visitorChart').getContext('2d');
// 模拟访客数据 - 最近7天
const dates = [];
const visitors = [];
// 生成最近7天的日期和模拟访客数据
for (let i = 6; i >= 0; i--) {
const date = new Date();
date.setDate(date.getDate() - i);
dates.push(date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }));
// 模拟数据，30-100之间
visitors.push(Math.floor(Math.random() * 70) + 30);
}
// 创建图表
new Chart(ctx, {
type: 'line',
data: {
labels: dates,
datasets: [{
label: '访客数量',
data: visitors,
backgroundColor: 'rgba(30, 144, 255, 0.2)',
borderColor: 'rgba(30, 144, 255, 1)',
borderWidth: 2,
tension: 0.4,
fill: true,
pointBackgroundColor: 'rgba(30, 144, 255, 1)',
pointBorderColor: '#fff',
pointBorderWidth: 2,
pointRadius: 4,
pointHoverRadius: 6
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
tooltip: {
backgroundColor: 'rgba(22, 33, 62, 0.8)',
titleColor: '#fff',
bodyColor: '#fff',
borderColor: 'rgba(255, 255, 255, 0.1)',
borderWidth: 1,
displayColors: false,
callbacks: {
title: function(tooltipItems) {
return tooltipItems[0].label;
},
label: function(context) {
return `访客数: ${context.raw}`;
}
}
}
},
scales: {
x: {
grid: {
display: false,
drawBorder: false
},
ticks: {
color: function() {
return document.documentElement.getAttribute('data-theme') === 'light' ? '#4a5568' : '#94a3b8';
}
}
},
y: {
beginAtZero: true,
grid: {
color: function() {
return document.documentElement.getAttribute('data-theme') === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)';
}
},
ticks: {
color: function() {
return document.documentElement.getAttribute('data-theme') === 'light' ? '#4a5568' : '#94a3b8';
},
stepSize: 20
}
}
}
}
});
}
// 当DOM加载完成后渲染图表
document.addEventListener('DOMContentLoaded', renderVisitorChart);
// 主题切换时重新渲染图表
themeOptions.forEach(option => {
option.addEventListener('click', () => {
// 延迟一点时间确保主题已经切换
setTimeout(() => {
// 清除旧图表
const oldChart = document.getElementById('visitorChart');
const parent = oldChart.parentNode;
parent.removeChild(oldChart);
// 创建新的canvas元素
const newChart = document.createElement('canvas');
newChart.id = 'visitorChart';
newChart.width = '100%';
newChart.height = '200';
parent.appendChild(newChart);
// 重新渲染图表
renderVisitorChart();
}, 100);
});
});
// FPS监控功能
const fpsDisplay = document.getElementById('fpsDisplay');
const fpsValue = document.querySelector('.fps-value');
const fpsStatus = document.querySelector('.fps-status');
const fpsCharacter = document.querySelector('.fps-character');
// FPS计算
let frameCount = 0;
let fps = 60;
let lastTime = performance.now();
let frameTime = 0;
function updateFPS() {
frameCount++;
const currentTime = performance.now();
frameTime += currentTime - lastTime;
lastTime = currentTime;
if (frameTime >= 1000) {
fps = Math.round((frameCount * 1000) / frameTime);
frameCount = 0;
frameTime = 0;
// 更新FPS显示
fpsValue.textContent = fps;
// 根据FPS值更新状态和表情
if (fps >= 55) {
fpsDisplay.className = 'comic-fps excellent';
fpsStatus.textContent = '超流畅!';
fpsCharacter.textContent = '(๑•̀ㅂ•́)و✧';
} else if (fps >= 45) {
fpsDisplay.className = 'comic-fps good';
fpsStatus.textContent = '流畅';
fpsCharacter.textContent = '(•̀ᴗ•́)و ̑̑';
} else if (fps >= 30) {
fpsDisplay.className = 'comic-fps normal';
fpsStatus.textContent = '一般';
fpsCharacter.textContent = '(・∀・)';
} else if (fps >= 15) {
fpsDisplay.className = 'comic-fps low';
fpsStatus.textContent = '卡顿';
fpsCharacter.textContent = '(￣▽￣")';
} else {
fpsDisplay.className = 'comic-fps critical';
fpsStatus.textContent = '严重卡顿!';
fpsCharacter.textContent = '(╥﹏╥)';
}
}
requestAnimationFrame(updateFPS);
}
// 启动FPS监控
requestAnimationFrame(updateFPS);
// 赞赏码放大功能
const donateImage = document.getElementById('donateImage');
const donateModal = document.getElementById('donateModal');
const donateModalImg = document.getElementById('donateModalImg');
const donateModalClose = document.getElementById('donateModalClose');
// 点击赞赏码打开模态框
donateImage.addEventListener('click', () => {
// 获取原始图片的src
const imgSrc = donateImage.querySelector('img').src;
// 设置模态框图片的src
donateModalImg.src = imgSrc;
// 显示模态框
donateModal.classList.add('active');
// 阻止页面滚动
document.body.style.overflow = 'hidden';
});
// 点击关闭按钮关闭模态框
donateModalClose.addEventListener('click', () => {
donateModal.classList.remove('active');
// 恢复页面滚动
document.body.style.overflow = '';
});
// 点击模态框背景关闭模态框
donateModal.addEventListener('click', (e) => {
if (e.target === donateModal) {
donateModal.classList.remove('active');
// 恢复页面滚动
document.body.style.overflow = '';
}
});
// ESC键关闭模态框
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && donateModal.classList.contains('active')) {
donateModal.classList.remove('active');
// 恢复页面滚动
document.body.style.overflow = '';
}
});
// 天气API配置
const weatherConfig = {
apiUrl: "https://cn.apihz.cn/api/tianqi/tqybmoji15ip.php",
id: "10003788", // 替换为你的用户ID
key: "ffa8afb46dce4916c5a74fd73c8de9f6", // 替换为你的API Key
ip: "", // 留空则使用访问者IP
uip: "" // 留空则使用访问者IP
};
// 获取天气数据
async function fetchWeatherData() {
try {
// 构建请求URL
const params = new URLSearchParams();
params.append('id', weatherConfig.id);
params.append('key', weatherConfig.key);
if (weatherConfig.ip) params.append('ip', weatherConfig.ip);
if (weatherConfig.uip) params.append('uip', weatherConfig.uip);
const url = `${weatherConfig.apiUrl}?${params.toString()}`;
const response = await fetch(url);
const data = await response.json();
if (data.code === 200) {
updateWeatherUI(data);
} else {
console.error("天气API错误:", data.msg);
updateWeatherUI(null); // 使用默认数据
}
} catch (error) {
console.error("获取天气数据失败:", error);
updateWeatherUI(null); // 使用默认数据
}
}
// 更新天气UI
function updateWeatherUI(apiData) {
const locationEl = document.getElementById('weather-location');
const weatherIcon = document.querySelector('.weather-current .weather-icon i');
const weatherTemp = document.querySelector('.weather-current .weather-temp');
const weatherDesc = document.querySelector('.weather-current .weather-desc');
const weatherDays = document.querySelectorAll('.weather-forecast .weather-day');
// 默认数据（当API请求失败时使用）
const defaultData = {
place: "北京",
data: [
{
week1: "今天",
wea1: "晴",
wea2: "晴",
wendu1: "25°",
wendu2: "17°"
},
{
week1: "明天",
wea1: "多云",
wea2: "多云",
wendu1: "23°",
wendu2: "18°"
},
{
week1: "后天",
wea1: "阴",
wea2: "小雨",
wendu1: "20°",
wendu2: "16°"
},
{
week1: "大后天",
wea1: "小雨",
wea2: "晴",
wendu1: "22°",
wendu2: "15°"
}
]
};
const weatherData = apiData || defaultData;
// 更新位置信息
locationEl.textContent = `📍 ${weatherData.place || "未知位置"}`;
// 更新当前天气（使用今天的数据）
const today = weatherData.data[0];
weatherIcon.className = `fas ${getWeatherIcon(today.wea1)}`;
weatherTemp.textContent = today.wendu1;
weatherDesc.textContent = `${today.wea1}${today.wea1 !== today.wea2 ? '转' + today.wea2 : ''}`;
// 更新预报天气（跳过今天，从明天开始）
for (let i = 0; i < 2; i++) {
const dayData = weatherData.data[i + 1]; // 从明天开始
if (weatherDays[i] && dayData) {
const dayEl = weatherDays[i];
// 更新日期显示
dayEl.querySelector('div:first-child').textContent =
i === 0 ? "明天" : "后天";
// 更新天气图标
const iconEl = dayEl.querySelector('.weather-day-icon i');
iconEl.className = `fas ${getWeatherIcon(dayData.wea1)}`;
// 更新温度
dayEl.querySelector('.weather-day-temp').textContent = dayData.wendu1;
}
}
}
// 天气图标映射
function getWeatherIcon(weatherText) {
const iconMap = {
"晴": "fa-sun",
"少云": "fa-cloud-sun",
"多云": "fa-cloud",
"阴": "fa-cloud",
"雾": "fa-smog",
"雷阵雨": "fa-bolt",
"小雨": "fa-cloud-rain",
"中雨": "fa-cloud-rain",
"大雨": "fa-cloud-showers-heavy",
"暴雨": "fa-cloud-showers-heavy",
"阵雨": "fa-cloud-rain",
"雨夹雪": "fa-cloud-meatball",
"小雪": "fa-snowflake",
"中雪": "fa-snowflake",
"大雪": "fa-snowflake",
"暴雪": "fa-snowflake",
"浮尘": "fa-smog",
"扬沙": "fa-smog",
"沙尘暴": "fa-smog"
};
// 尝试匹配完整文本
if (iconMap[weatherText]) {
return iconMap[weatherText];
}
// 尝试匹配部分文本
for (const key in iconMap) {
if (weatherText.includes(key)) {
return iconMap[key];
}
}
// 默认返回晴天图标
return "fa-sun";
}
// 页面加载时获取天气数据
document.addEventListener('DOMContentLoaded', () => {
fetchWeatherData();
// 每1小时更新一次天气数据
setInterval(fetchWeatherData, 60 * 60 * 1000);
});
</script>
</body>
</html>
index.html
style.css
index.js