<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TENGYUAN 个人博客</title>
<style>
/* 基础样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
/* 整体页面样式 */
body {
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
background-color: #0f172a;
color: #e2e8f0;
line-height: 1.6;
}
/* 主容器样式 */
.container {
display: flex;
max-width: 1600px;
height: 100vh;
margin: 0 auto;
position: relative;
background-color: #1e293b;
}
/* 左侧边栏样式 */
.left-side {
width: 260px;
border-right: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
flex-direction: column;
transition: all 0.3s ease;
background-color: #1e293b;
overflow: auto;
flex-shrink: 0;
z-index: 5;
}
/* 右侧边栏样式 */
.right-side {
width: 280px;
flex-shrink: 0;
margin-left: auto;
overflow: auto;
background-color: #1e293b;
display: flex;
flex-direction: column;
border-left: 1px solid rgba(255, 255, 255, 0.05);
}
/* 主要内容区域样式 */
.main {
flex-grow: 1;
display: flex;
flex-direction: column;
background-color: #0f172a;
}
/* Logo样式 */
.logo {
font-family: "PingFang SC", sans-serif;
font-size: 18px;
color: #f8fafc;
font-weight: 600;
text-align: center;
height: 68px;
line-height: 68px;
letter-spacing: 4px;
position: sticky;
top: 0;
background-color: #1e293b;
z-index: 2;
}
/* 侧边栏标题样式 */
.side-title {
font-family: "PingFang SC", sans-serif;
color: #94a3b8;
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
/* 侧边栏内容区域样式 */
.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: #94a3b8;
}
.side-menu a {
text-decoration: none;
color: #94a3b8;
display: flex;
align-items: center;
padding: 10px 0;
transition: all 0.3s ease;
border-radius: 6px;
}
.side-menu a:hover {
color: #ffffff;
background-color: rgba(255, 255, 255, 0.05);
transform: translateX(5px);
}
.side-menu a.active {
color: #ffffff;
background-color: rgba(99, 102, 241, 0.2);
border-left: 3px solid #6366f1;
}
/* 底部关注区域样式 */
.follow-me {
text-decoration: none;
font-size: 14px;
display: flex;
align-items: center;
margin-top: auto;
overflow: hidden;
color: #94a3b8;
padding: 0 25px;
height: 60px;
flex-shrink: 0;
border-top: 1px solid rgba(255, 255, 255, 0.05);
position: relative;
transition: all 0.3s ease;
}
.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: #ffffff;
left: 0;
top: -100%;
display: flex;
transition: 0.3s;
padding: 0 25px;
align-items: center;
background-color: rgba(30, 41, 59, 0.9);
width: 100%;
height: 100%;
}
.developer img {
border-radius: 50%;
width: 30px;
height: 30px;
object-fit: cover;
margin-right: 12px;
}
/* 搜索栏样式 - 美化版 */
.search-bar {
height: 60px;
background-color: #1e293b;
z-index: 3;
position: relative;
display: flex;
align-items: center;
padding: 0 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.search-container {
display: flex;
align-items: center;
width: 100%;
position: relative;
}
.search-bar input {
height: 50px;
width: 100%;
display: block;
background-color: rgba(255, 255, 255, 0.08);
border: 2px solid rgba(255, 255, 255, 0.1);
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: #ffffff;
font-family: "PingFang SC", sans-serif;
font-weight: 400;
border-radius: 10px;
transition: all 0.3s ease;
font-size: 16px;
}
.search-bar input:focus {
background-color: rgba(255, 255, 255, 0.12);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4);
border-color: rgba(99, 102, 241, 0.4);
}
.search-bar input::placeholder {
color: #64748b;
font-size: 15px;
}
/* 主内容容器样式 */
.main-container {
padding: 20px;
flex-grow: 1;
overflow: auto;
background-color: #0f172a;
}
/* 个人资料区域样式 */
.profile {
position: relative;
height: 40vh;
min-height: 250px;
max-height: 350px;
z-index: 1;
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
}
.profile-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.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: rgba(30, 41, 59, 0.9);
width: 100%;
display: flex;
border-radius: 0 0 8px 8px;
overflow-x: auto;
}
.profile-menu-link {
padding: 18px 20px;
color: #94a3b8;
transition: 0.3s;
cursor: pointer;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
position: relative;
}
.profile-menu-link.active, .profile-menu-link:hover {
color: #ffffff;
}
.profile-menu-link.active:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 3px;
background: linear-gradient(90deg, #6366f1, #8b5cf6);
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 rgba(30, 41, 59, 0.8);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.profile-name {
margin-left: 24px;
margin-bottom: 24px;
font-size: 24px;
color: #ffffff;
font-weight: 600;
font-family: "PingFang SC", sans-serif;
}
/* 社交图标样式 */
.social-icons {
display: flex;
margin-left: 24px;
}
.social-icon {
color: #cbd5e1;
margin-right: 15px;
font-size: 20px;
transition: all 0.3s ease;
}
.social-icon:hover {
color: #ffffff;
transform: translateY(-2px);
}
/* 时间线布局 */
.timeline {
display: flex;
padding-top: 20px;
position: relative;
z-index: 2;
}
.timeline-left {
width: 310px;
flex-shrink: 0;
}
.timeline-right {
flex-grow: 1;
padding-left: 20px;
}
/* 通用卡片样式 */
.box {
background-color: rgba(30, 41, 59, 0.8);
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.box:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
border-color: rgba(255, 255, 255, 0.2);
}
/* 账户按钮样式 */
.account-button {
border: 0;
background: transparent;
color: #94a3b8;
padding: 8px;
cursor: pointer;
position: relative;
border-radius: 50%;
transition: all 0.3s ease;
}
.account-button:hover {
background-color: rgba(255, 255, 255, 0.1);
color: #ffffff;
}
.account-button svg {
width: 20px;
height: 20px;
}
.account-button:not(.right-side-button) + .account-button:before {
position: absolute;
right: 5px;
top: 5px;
background-color: #6366f1;
width: 8px;
height: 8px;
border-radius: 50%;
content: "";
border: 2px solid #1e293b;
}
.account-profile {
width: 32px;
height: 32px;
border-radius: 50%;
margin: 0 10px;
object-fit: cover;
border: 2px solid rgba(255, 255, 255, 0.1);
}
.account-user {
display: inline-flex;
align-items: center;
color: #94a3b8;
font-weight: 500;
font-size: 14px;
transition: all 0.3s ease;
}
.account-user:hover {
color: #ffffff;
}
.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: rgba(30, 41, 59, 0.8);
z-index: 3;
flex-shrink: 0;
padding: 0 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* 遮罩层样式 */
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(15, 23, 42, 0.8);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: 0.3s;
z-index: 9;
}
/* 右侧边栏按钮样式 */
.right-side-button {
position: absolute;
right: 0;
top: 0;
height: 100%;
border: 0;
width: 52px;
background-color: rgba(30, 41, 59, 0.8);
border-left: 1px solid rgba(255, 255, 255, 0.1);
color: #ffffff;
display: none;
cursor: pointer;
transition: all 0.3s ease;
}
.right-side-button:hover {
background-color: rgba(30, 41, 59, 0.9);
}
.right-side-button:before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
background-color: #6366f1;
border: 2px solid #1e293b;
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;
}
.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 {
writing-mode: vertical-lr;
transform: rotate(180deg);
transform-origin: bottom;
display: flex;
align-items: center;
margin-top: -10px;
}
.left-side-button {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
height: 60px;
background-color: rgba(30, 41, 59, 0.5);
border: 0;
padding: 0;
line-height: 0;
color: #ffffff;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.left-side-button:hover {
background-color: rgba(30, 41, 59, 0.7);
}
.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 screen and (max-width: 480px) {
.profile-menu-link:nth-last-child(1),
.profile-menu-link:nth-last-child(2) {
display: none;
}
}
/* 滚动条样式 */
::-webkit-scrollbar {
width: 8px;
border-radius: 10px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
}
/* 字体图标样式 */
.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: 600;
color: #ffffff;
margin-bottom: 15px;
padding: 15px 15px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
}
.card-title i {
margin-right: 10px;
color: #8b5cf6;
}
/* 卡片内容样式 - 优化间距 */
.card-content {
padding: 15px;
}
/* 竖向轮播图样式 */
.vertical-carousel {
position: relative;
border-radius: 8px;
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;
}
.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: #e2e8f0;
}
.excerpt {
font-size: 15px;
margin-bottom: 10px;
color: #e2e8f0;
}
.title {
font-size: 22px;
font-weight: 600;
margin-bottom: 15px;
color: #ffffff;
}
.button {
display: inline-block;
padding: 8px 20px;
background-color: #6366f1;
color: white;
border-radius: 50px;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
}
.button:hover {
background-color: #8b5cf6;
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: #8b5cf6;
transform: scale(1.2);
}
/* 音乐播放器 - 优化大小 */
.music-player-container {
background: rgba(30, 41, 59, 0.8);
border-radius: 8px;
padding: 15px;
transition: all 0.3s ease;
width: 100%;
height: 100%;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.music-player {
display: flex;
align-items: center;
gap: 15px;
height: 100%;
}
.cover {
width: 80px;
height: 80px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
}
.cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.music-info {
flex-grow: 1;
text-align: left;
}
.music-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 5px;
color: #ffffff;
}
.music-artist {
font-size: 14px;
color: #94a3b8;
margin-bottom: 12px;
}
.progress-container {
width: 100%;
height: 4px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 2px;
margin-bottom: 10px;
cursor: pointer;
}
.progress {
height: 100%;
background: linear-gradient(90deg, #6366f1, #8b5cf6);
border-radius: 2px;
width: 0%;
transition: width 0.1s linear;
}
.time-info {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #94a3b8;
}
.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, #6366f1, #8b5cf6);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
border: none;
}
.play-pause-btn:hover {
transform: scale(1.1);
}
.control-btn {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
color: #e2e8f0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
border: none;
}
.control-btn:hover {
background-color: #8b5cf6;
color: white;
}
.pause-icon {
display: none;
}
.playing .play-icon {
display: none;
}
.playing .pause-icon {
display: block;
}
/* 个人空间卡片 - 优化大小 */
.space-card {
background: rgba(30, 41, 59, 0.8);
border-radius: 8px;
transition: all 0.3s ease;
display: flex;
align-items: stretch;
height: 100%;
position: relative;
overflow: hidden;
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.space-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.space-content {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
.space-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
color: #ffffff;
}
.space-desc {
font-size: 14px;
color: #94a3b8;
margin-bottom: 15px;
}
.space-button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
background: linear-gradient(90deg, #6366f1, #8b5cf6);
color: white;
border-radius: 50px;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
width: fit-content;
text-decoration: none;
}
.space-button:hover {
background: linear-gradient(90deg, #8b5cf6, #6366f1);
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: 8px;
overflow: hidden;
height: 180px;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.api-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.3s ease;
}
.api-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.api-card:hover img {
transform: scale(1.05);
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: white;
padding: 20px;
}
.overlay h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}
.overlay p {
font-size: 14px;
opacity: 0.9;
margin-bottom: 8px;
}
/* 媒体行布局 - 优化间距 */
.media-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
height: 180px; /* 统一高度 */
}
@media (max-width: 768px) {
.media-row {
grid-template-columns: 1fr;
height: auto;
}
}
/* 待办事项 */
.todo-list {
list-style: none;
}
.todo-item {
display: flex;
align-items: center;
padding: 12px 0;
border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.todo-checkbox {
margin-right: 12px;
accent-color: #8b5cf6;
}
.todo-text {
flex: 1;
color: #e2e8f0;
}
.todo-text.completed {
text-decoration: line-through;
opacity: 0.7;
}
.todo-delete {
color: #94a3b8;
cursor: pointer;
transition: all 0.3s ease;
}
.todo-delete:hover {
color: #8b5cf6;
}
.todo-add {
display: flex;
margin-top: 15px;
}
.todo-input {
flex: 1;
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px 0 0 8px;
background: rgba(255, 255, 255, 0.05);
color: #e2e8f0;
outline: none;
}
.todo-input:focus {
border-color: #8b5cf6;
}
.todo-submit {
padding: 12px 20px;
background: linear-gradient(90deg, #6366f1, #8b5cf6);
color: white;
border: none;
border-radius: 0 8px 8px 0;
cursor: pointer;
transition: all 0.3s ease;
}
.todo-submit:hover {
background: linear-gradient(90deg, #8b5cf6, #6366f1);
}
/* 天气小部件 */
.weather-widget {
padding: 15px;
}
.weather-current {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.weather-icon {
font-size: 2.5rem;
margin-right: 15px;
color: #8b5cf6;
}
.weather-temp {
font-size: 2rem;
font-weight: 600;
color: #ffffff;
}
.weather-desc {
font-size: 14px;
color: #94a3b8;
}
.weather-forecast {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.weather-day {
text-align: center;
padding: 12px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
}
.weather-day-icon {
font-size: 1.5rem;
margin: 8px 0;
color: #8b5cf6;
}
.weather-day-temp {
font-weight: 500;
color: #ffffff;
}
/* 公告栏 */
.announcement {
padding: 15px;
}
.announcement-content {
font-size: 14px;
color: #e2e8f0;
line-height: 1.7;
}
.announcement-content a {
color: #8b5cf6;
text-decoration: none;
transition: all 0.3s ease;
}
.announcement-content a:hover {
text-decoration: underline;
}
/* 赞赏码 */
.donate-box {
text-align: center;
padding: 15px;
}
.donate-title {
font-size: 16px;
color: #ffffff;
margin-bottom: 15px;
font-weight: 500;
}
.donate-image {
width: 180px;
height: 180px;
margin: 0 auto;
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.donate-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.donate-desc {
font-size: 14px;
color: #94a3b8;
margin-top: 10px;
}
/* 访客统计 */
.stats-chart {
height: 200px;
margin-top: 15px;
position: relative;
}
/* 最新评论 */
.comment-item {
padding: 12px 15px;
border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.comment-item:last-child {
border-bottom: none;
}
.comment-author {
font-weight: 600;
color: #ffffff;
}
.comment-text {
font-size: 14px;
color: #e2e8f0;
margin: 8px 0;
}
.comment-date {
font-size: 12px;
color: #94a3b8;
}
/* 日历小部件 */
.calendar-widget {
padding: 15px;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.calendar-title {
font-weight: 600;
font-size: 16px;
color: #ffffff;
}
.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: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
border: none;
color: #e2e8f0;
}
.calendar-nav-btn:hover {
background: #8b5cf6;
color: white;
}
.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
margin-bottom: 10px;
font-size: 12px;
color: #94a3b8;
}
.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: #e2e8f0;
}
.calendar-day:hover {
background: rgba(139, 92, 246, 0.2);
color: #ffffff;
}
.calendar-day.today {
background: #8b5cf6;
color: white;
font-weight: bold;
}
.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: rgba(255, 255, 255, 0.1);
border-radius: 50px;
font-size: 12px;
transition: all 0.3s ease;
color: #e2e8f0;
text-decoration: none;
}
.tag:hover {
background: #8b5cf6;
color: white;
}
/* 加载动画 */
@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, #6366f1, #8b5cf6);
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(99, 102, 241, 0.3);
}
.upward:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
/* 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: rgba(30, 41, 59, 0.9);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 8px 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
gap: 8px;
}
.fps-character {
font-size: 18px;
transform: translateY(2px);
opacity: 0.9;
}
.fps-value {
font-weight: bold;
font-size: 16px;
margin-right: 5px;
color: #8b5cf6;
}
.fps-status {
font-size: 14px;
color: #e2e8f0;
}
/* 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;
}
/* 主内容区域优化 */
.main-container {
padding: 20px 30px;
}
/* 时间线布局优化 */
.timeline {
gap: 20px;
}
</style>
<!-- 引入阿里巴巴图标库 -->
<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">
</head>
<body>
<!-- 主容器 - 使用Alpine.js管理状态 -->
<div class="container" x-data="{ rightSide: false, leftSide: 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" />
</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 d="M9 22V12h6v10" />
</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" />
<circle cx="12" cy="10" r="3" />
</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 d="M14 2v6h6M16 13H8M16 17H8M10 9H8" />
</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" />
<circle cx="8.5" cy="8.5" r="1.5" />
<path d="M21 15l-5-5L5 21" />
</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" />
</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" />
<path d="M16 2v4M8 2v4M3 10h18" />
</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" />
</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://pbs.twimg.com/profile_images/1253782473953157124/x56UURmt_400x400.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="iconfont icon-qq social-icon" title="QQ"></a>
<a href="#" class="iconfont icon-zhihu social-icon" title="知乎"></a>
<a href="#" class="iconfont icon-github social-icon" title="GitHub"></a>
<a href="#" class="iconfont icon-email social-icon" title="邮箱"></a>
<a href="#" class="iconfont icon-weixin social-icon" title="微信"></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">
<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 active">
<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">
<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 active"></button>
<button class="vertical-dot"></button>
<button class="vertical-dot"></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="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="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/68747470733a2f2f666173746c792e6a7364656c6976722e6e65742f67682f7661737473612f46696c65436f6465426f784056312e362f7374617469632f62616e6e6572732f696d675f312e706e67" alt="" src="http://api.yilx.net/upload/1742130278110.jpg">
<div class="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="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="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="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">
<button class="account-button">
<svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
<path d="M22 6l-5-5L5 21" />
</svg>
</button>
<button class="account-button">
<svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0" />
</svg>
</button>
<span class="account-user">TENG YUAN
<img src="https://images.genius.com/2326b69829d58232a2521f09333da1b3.1000x1000x1.jpg" alt="" class="account-profile">
<span>▼</span>
</span>
</div>
<!-- 天气小部件 -->
<div class="box">
<div class="card-title">
<i class="fas fa-cloud-sun"></i> 天气
</div>
<div class="weather-widget">
<div class="weather-current">
<div class="weather-icon">
<i class="fas fa-sun"></i>
</div>
<div>
<div class="weather-temp">25°C</div>
<div class="weather-desc">晴朗</div>
</div>
</div>
<div class="weather-forecast">
<div class="weather-day">
<div>明天</div>
<div class="weather-day-icon">
<i class="fas fa-cloud-sun"></i>
</div>
<div class="weather-day-temp">23°C</div>
</div>
<div class="weather-day">
<div>后天</div>
<div class="weather-day-icon">
<i class="fas fa-cloud-rain"></i>
</div>
<div class="weather-day-temp">20°C</div>
</div>
<div class="weather-day">
<div>周日</div>
<div class="weather-day-icon">
<i class="fas fa-sun"></i>
</div>
<div class="weather-day-temp">26°C</div>
</div>
</div>
</div>
</div>
<!-- 公告栏 -->
<div class="box">
<div class="card-title">
<i class="fas fa-bullhorn"></i> 公告栏
</div>
<div class="announcement">
<center>
<b>--- 主域名 ---
<br>
<a target="_blank" rel="noopener" href="https://tengyuan.icu" title="此线路部署于腾讯云服务器" class="anno_content">
<font color="#ffffff">tengyuan.icu</font>
</a> | <a target="_blank" rel="noopener" href="https://tengyuan.tech" title="此线路部署于雨云服务器" class="anno_content">
<font color="#ffffff">tengyuan.tech</font>
</a>
<br>--- 备用域名 ---
<br>
<a target="_blank" rel="noopener" href="暂无" title="暂无" class="anno_content">
<font color="#ffffff">暂无</font>
</a>
<br>
<a target="_blank" rel="noopener" href="暂无" title="暂无" class="anno_content">
<font color="#ffffff">暂无</font>
</a>
<br>--- 网站安卓APP ---
<br>🍧<a target="_blank" rel="noopener" href="暂无下载链接" title="点这里可以下载网站的安卓APP" class="anno_content">
<font color="#ffffff">点此下载</font>
</a>🍧
</b>
</center>
</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">
<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>本站总访客量：<strong>3253</strong>次</div>
<div>今日访客量：<strong>221</strong>次</div>
<div>项目/网站总数：<strong>6</strong></div>
<div>已经有<strong>22</strong>位小伙伴入驻本站啦！</div>
</div>
<div class="stats-chart">
<!-- 这里可以放置图表，实际项目中可以使用Chart.js等库 -->
<canvas id="visitorChart"></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年5月</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">
<!-- 日历日期将通过JS动态生成 -->
</div>
</div>
</div>
<!-- 标签云 -->
<div class="box">
<div class="card-title">
<i class="fas fa-tags"></i> 热门标签
</div>
<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 class="overlay" @click="rightSide = false; leftSide = false" :class="{ 'active': rightSide || leftSide }"></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">
<div class="fps-bubble">
<span class="fps-value">60</span>
<span class="fps-status">超流畅!</span>
<span class="fps-character">ヽ(•̀ω•́ )ゝ✧</span>
</div>
</div>
</div>
<!-- Alpine.js 用于交互功能 -->
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<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');
}
});
// 上一首/下一首按钮
prevBtn.addEventListener('click', () => {
// 这里可以添加切换歌曲的逻辑
alert('切换到上一首歌曲');
});
nextBtn.addEventListener('click', () => {
// 这里可以添加切换歌曲的逻辑
alert('切换到下一首歌曲');
});
// 歌曲结束时自动播放下一首
audio.addEventListener('ended', () => {
// 这里可以添加自动播放下一首的逻辑
alert('歌曲播放结束，可以在这里添加自动播放下一首的逻辑');
});
// 返回顶部按钮
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);
// 日历功能
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 nextMonthDays = 42 - (firstDayOfWeek + daysInMonth); // 6行x7天=42格
for (let i = 1; i <= nextMonthDays; 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') {
todoSubmit.click();
}
});
// 初始化加载待办事项
loadTodos();
// 模拟访客统计图表
function initVisitorChart() {
const canvas = document.getElementById('visitorChart');
if (!canvas) return;
const ctx = canvas.getContext('2d');
canvas.width = canvas.parentElement.offsetWidth;
canvas.height = canvas.parentElement.offsetHeight;
// 模拟数据
const labels = ['1日', '5日', '10日', '15日', '20日', '25日', '30日'];
const data = [50, 120, 80, 150, 200, 180, 220];
// 绘制图表
ctx.fillStyle = 'rgba(139, 92, 246, 0.2)';
ctx.strokeStyle = 'rgba(139, 92, 246, 1)';
ctx.lineWidth = 2;
const maxValue = Math.max(...data);
const scaleY = canvas.height / maxValue;
const stepX = canvas.width / (labels.length - 1);
ctx.beginPath();
ctx.moveTo(0, canvas.height - data[0] * scaleY);
for (let i = 1; i < data.length; i++) {
const x = i * stepX;
const y = canvas.height - data[i] * scaleY;
ctx.lineTo(x, y);
}
ctx.stroke();
// 填充区域
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.closePath();
ctx.fill();
// 绘制数据点
ctx.fillStyle = 'rgba(139, 92, 246, 1)';
for (let i = 0; i < data.length; i++) {
const x = i * stepX;
const y = canvas.height - data[i] * scaleY;
ctx.beginPath();
ctx.arc(x, y, 4, 0, Math.PI * 2);
ctx.fill();
}
}
// 初始化图表
window.addEventListener('load', initVisitorChart);
window.addEventListener('resize', initVisitorChart);
// FPS监控
(function() {
const fpsDisplay = document.getElementById('fpsDisplay');
const fpsValue = fpsDisplay.querySelector('.fps-value');
const fpsStatus = fpsDisplay.querySelector('.fps-status');
const fpsCharacter = fpsDisplay.querySelector('.fps-character');
let lastTime = performance.now();
let frameCount = 0;
let animationFrameId;
let lastFps = 60;
// 角色表情集合
const characters = {
excellent: ["ヽ(•̀ω•́ )ゝ✧", "(๑•̀ㅂ•́)و✧", "٩(◕‿◕｡)۶"],
good: ["(￣ω￣)", "(｀・ω・´)", "（￣︶￣）↗"],
normal: ["(´･_･`)", "( ˘･_･˘ )", "(；一_一)"],
low: ["(╥﹏╥)", "(´；ω；`)", "(>_<)"],
critical: ["(ﾟДﾟ≡ﾟДﾟ)", "(╯°□°）╯︵ ┻━┻", "Σ(°△°|||)︴"]
};
function updateFPS() {
const now = performance.now();
frameCount++;
if (now - lastTime >= 1000) {
const fps = Math.round(frameCount * 1000 / (now - lastTime));
lastFps = fps;
// 状态分类
let status = '', statusClass = '', character = '';
if (fps >= 55) {
status = '超流畅!';
statusClass = 'excellent';
character = characters.excellent[Math.floor(Math.random() * characters.excellent.length)];
} else if (fps >= 45) {
status = '流畅~';
statusClass = 'good';
character = characters.good[Math.floor(Math.random() * characters.good.length)];
} else if (fps >= 30) {
status = '一般般';
statusClass = 'normal';
character = characters.normal[Math.floor(Math.random() * characters.normal.length)];
} else if (fps >= 15) {
status = '卡卡哒';
statusClass = 'low';
character = characters.low[Math.floor(Math.random() * characters.low.length)];
} else {
status = '要崩溃!';
statusClass = 'critical';
character = characters.critical[Math.floor(Math.random() * characters.critical.length)];
}
// 更新显示
fpsValue.textContent = fps;
fpsStatus.textContent = status;
fpsCharacter.textContent = character;
// 更新状态类
fpsDisplay.className = 'comic-fps ' + statusClass;
frameCount = 0;
lastTime = now;
}
animationFrameId = requestAnimationFrame(updateFPS);
}
// 心跳动画
setInterval(() => {
if (lastFps >= 30) {
fpsCharacter.style.transform = 'translateY(0px)';
setTimeout(() => {
fpsCharacter.style.transform = 'translateY(2px)';
}, 100);
}
}, 3000);
updateFPS();
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
cancelAnimationFrame(animationFrameId);
} else {
lastTime = performance.now();
frameCount = 0;
updateFPS();
}
});
})();
</script>
</body>
</html>
index.html
style.css
index.js