<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>藤原 | 个人博客</title>
<meta name="description" content="一个热衷于分享资源/教程/生活的站长的站点">
<meta name="keywords" content="tengyuanyy,tengyuanyy主页,个人导航页,藤原导航,藤原主页,藤原杂谈">
<link rel="icon" href="./static/img/favicon.ico">
<!-- 字体引入 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<!-- 使用Font Awesome图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* 代码一的基础样式 */
* {
outline: none;
box-sizing: border-box;
}
body {
font-family: "Source Sans Pro", sans-serif;
background-color: #373e57;
color: #ccc8db;
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* 主容器 */
.container {
background-color: #151728;
display: flex;
max-width: 1600px;
height: 100vh;
overflow: hidden;
margin: 0 auto;
}
/* 左侧边栏 */
.left-side {
width: 260px;
border-right: 1px solid #272a3a;
display: flex;
flex-direction: column;
transition: 0.3s;
background-color: #151728;
overflow: auto;
flex-shrink: 0;
}
/* 右侧边栏 */
.right-side {
width: 280px;
flex-shrink: 0;
margin-left: auto;
overflow: auto;
background-color: #1e2031;
display: flex;
flex-direction: column;
border-left: 1px solid #2a2d42;
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
}
/* 主要内容区域 */
.main {
flex-grow: 1;
display: flex;
flex-direction: column;
background-color: #181d2f;
}
/* 响应式设计 - 左侧边栏 */
@media screen and (max-width: 930px) {
.left-side.active {
z-index: 4;
}
.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;
}
}
/* 响应式设计 - 右侧边栏 */
@media screen and (max-width: 1210px) {
.right-side {
position: fixed;
right: 0;
top: 0;
transition: 0.3s;
height: 100%;
transform: translateX(280px);
z-index: 4;
}
.right-side.active {
transform: translatex(0);
}
}
/* 顶部Logo */
.logo {
font-family: "DM Sans", sans-serif;
font-size: 15px;
color: #fff;
font-weight: 600;
text-align: center;
height: 68px;
line-height: 68px;
letter-spacing: 4px;
position: sticky;
top: 0;
background: linear-gradient(to bottom, #151728 0%, #151728 76%, rgba(21, 23, 40, 0) 100%);
}
/* 侧边栏标题 */
.side-title {
font-family: "DM Sans", sans-serif;
color: #5c5e6e;
font-size: 15px;
font-weight: 600;
margin-bottom: 20px;
}
/* 侧边栏内容区域 */
.side-wrapper {
padding: 30px;
}
/* 侧边栏菜单 */
.side-menu {
display: flex;
flex-direction: column;
font-size: 15px;
white-space: nowrap;
}
.side-menu svg {
margin-right: 16px;
width: 16px;
}
.side-menu a {
text-decoration: none;
color: #9c9cab;
display: flex;
align-items: center;
}
.side-menu a:hover {
color: #fff;
}
.side-menu a:not(:last-child) {
margin-bottom: 20px;
}
/* 底部关注区域 */
.follow-me {
text-decoration: none;
font-size: 14px;
display: flex;
align-items: center;
margin-top: auto;
overflow: hidden;
color: #9c9cab;
padding: 0 20px;
height: 52px;
flex-shrink: 0;
border-top: 1px solid #272a3a;
position: relative;
}
.follow-me svg {
width: 16px;
height: 16px;
margin-right: 8px;
}
.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: #fff;
left: 0;
top: -100%;
display: flex;
transition: 0.3s;
padding: 0 20px;
align-items: center;
background-color: #272a3a;
width: 100%;
height: 100%;
}
.developer img {
border-radius: 50%;
width: 26px;
height: 26px;
object-fit: cover;
margin-right: 10px;
}
/* 搜索栏 */
.search-bar {
height: 60px;
background-color: #151728;
z-index: 3;
position: relative;
}
.search-bar input {
height: 100%;
width: 100%;
display: block;
background-color: transparent;
border: none;
padding: 0 54px;
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='%235C5D71'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: 16px;
background-position: 25px 50%;
color: #fff;
font-family: "Source Sans Pro", sans-serif;
font-weight: 600;
}
.search-bar input::placeholder {
color: #5c5d71;
}
/* 主内容容器 */
.main-container {
padding: 20px;
flex-grow: 1;
overflow: auto;
background-color: #24273b;
}
/* 账户按钮 */
.account-button {
border: 0;
background: 0;
color: #64677a;
padding: 0;
cursor: pointer;
position: relative;
}
.account-button svg {
width: 20px;
}
.account-button:not(.right-side-button) + .account-button:before {
position: absolute;
right: 0px;
top: -2px;
background-color: #1b86f8;
width: 8px;
height: 8px;
border-radius: 50%;
content: "";
border: 2px solid #151728;
}
.account-profile {
width: 28px;
height: 28px;
border-radius: 50%;
margin: 0 10px;
}
.account-user {
display: inline-flex;
align-items: center;
color: #64677a;
font-weight: 600;
}
.account-user span {
font-size: 10px;
font-weight: normal;
}
/* 账户区域 */
.account {
height: 60px;
display: flex;
justify-content: space-evenly;
align-items: center;
position: sticky;
top: 0;
background-color: #151728;
z-index: 3;
flex-shrink: 0;
}
/* 右侧搜索栏 */
.right-search svg {
width: 16px;
height: 16px;
}
.right-search {
padding-right: 10px;
display: flex;
align-items: center;
border-top: 1px solid #272a3a;
position: sticky;
bottom: 0;
margin-top: auto;
background-color: #25283b;
border-top: 1px solid #2f3246;
}
.right-search input {
padding-right: 10px;
background-color: #2a2d42;
color: #fff;
}
.right-search input::placeholder {
color: #5c5e6e;
}
.search-bar-svgs {
color: #5c5e6e;
display: flex;
transition: color 0.3s ease;
}
.search-bar-svgs svg {
margin-right: 16px;
}
.search-bar-svgs svg:hover {
color: #ff6b6b;
}
/* 遮罩层 */
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(36, 39, 59, 0.8);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: 0.3s;
}
@media screen and (max-width: 1210px) {
.overlay.active {
z-index: 3;
opacity: 1;
visibility: visible;
pointer-events: all;
}
}
/* 右侧边栏按钮 */
.right-side-button {
position: absolute;
right: 0;
top: 0;
height: 100%;
border: 0;
width: 52px;
background-color: #1e2031;
border-left: 1px solid #272a3a;
color: #fff;
display: none;
cursor: pointer;
}
.right-side-button:before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
background-color: #1b86f8;
border: 2px solid #1e2031;
top: 13px;
right: 12px;
}
.right-side-button svg {
width: 22px;
}
@media screen and (max-width: 1210px) {
.right-side-button {
display: block;
}
}
/* 左侧边栏按钮 */
.left-side-button {
display: none;
}
@media screen and (max-width: 930px) {
.left-side-button {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
height: 60px;
background-color: rgba(39, 42, 58, 0.5);
border: 0;
padding: 0;
line-height: 0;
color: #fff;
border-bottom: 1px solid #272a3a;
}
.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;
}
}
/* 滚动条样式 */
::-webkit-scrollbar {
width: 10px;
border-radius: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.01);
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.11);
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.1);
}
/* 代码二的样式 - 美化主题部分 */
:root {
--primary-color: #ffffff;
--secondary-color: #cccccc;
--dark-color: #121212;
--light-color: #1e1e1e;
--gray-color: #999999;
--light-gray: #2a2a2a;
--comic-bg: #1e1e1e;
--comic-border: 3px solid #444;
--comic-accent: #ff6b6b;
--comic-accent-light: #ff8e8e;
--comic-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
/* 漫画风格的页面边框 */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: var(--comic-border);
pointer-events: none;
z-index: 1000;
}
a {
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* 简约漫画卡片效果 - 美化 */
.comic-card {
background: var(--comic-bg);
border-radius: 12px;
border: var(--comic-border);
box-shadow: var(--comic-shadow);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
margin-bottom: 20px;
}
.comic-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
border-color: var(--comic-accent);
}
/* 漫画对话框效果 - 美化 */
.speech-bubble {
position: relative;
background: var(--comic-bg);
border-radius: 12px;
border: var(--comic-border);
padding: 1.5rem;
margin: 1.5rem 0;
box-shadow: var(--comic-shadow);
max-width: 80%;
}
.speech-bubble::after {
content: '';
position: absolute;
bottom: -10px;
left: 20px;
width: 20px;
height: 20px;
background: var(--comic-bg);
border-right: var(--comic-border);
border-bottom: var(--comic-border);
transform: rotate(45deg);
z-index: -1;
}
/* 英雄区域 - 美化 */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 8rem 2rem 4rem;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('https://api.yilx.net/img/pc') center/cover no-repeat;
opacity: 0.1;
z-index: -1;
filter: blur(2px);
}
.avatar {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--comic-bg);
box-shadow: var(--comic-shadow);
margin-bottom: 2rem;
border: var(--comic-border);
transition: all 0.3s ease;
}
.avatar:hover {
transform: scale(1.05);
border-color: var(--comic-accent);
}
.site-title {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--primary-color);
position: relative;
display: inline-block;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.site-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 4px;
background: var(--comic-accent);
transform: scaleX(0.8);
transition: transform 0.3s ease;
}
.site-title:hover::after {
transform: scaleX(1);
}
.motto {
font-size: 1.2rem;
color: var(--gray-color);
margin-bottom: 2rem;
font-weight: 500;
max-width: 600px;
line-height: 1.8;
position: relative;
}
.motto::before, .motto::after {
content: '"';
color: var(--comic-accent);
font-size: 1.5em;
line-height: 0;
position: relative;
top: 0.3em;
}
.motto::before {
margin-right: 5px;
}
.motto::after {
margin-left: 5px;
}
/* 主要内容区域 - 三栏布局 */
.content-container {
display: flex;
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
gap: 2rem;
}
/* 卡片通用样式 - 美化 */
.card {
background: #25283b;
border-radius: 12px;
border: 1px solid #2f3246;
padding: 1.8rem;
transition: all 0.3s ease;
margin-bottom: 1.8rem;
position: relative;
box-shadow: var(--comic-shadow);
}
.card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
border-color: var(--comic-accent);
}
.card-title {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 1.8rem;
display: flex;
align-items: center;
gap: 0.8rem;
color: var(--comic-accent);
position: relative;
padding-bottom: 10px;
border-bottom: 1px solid #2f3246;
}
.card-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background: var(--comic-accent);
border-radius: 3px;
}
.card-title i {
color: var(--comic-accent);
}
/* 竖向轮播图样式 - 美化 */
.vertical-carousel {
position: relative;
border-radius: 12px;
overflow: hidden;
height: 400px;
border: var(--comic-border);
box-shadow: var(--comic-shadow);
}
.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.8));
color: white;
padding: 1.8rem;
}
.vertical-text-slide {
display: none;
}
.vertical-text-slide.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.date {
font-size: 0.9rem;
opacity: 0.8;
margin-bottom: 0.5rem;
color: var(--comic-accent-light);
}
.excerpt {
font-size: 0.95rem;
margin-bottom: 0.8rem;
line-height: 1.6;
}
.title {
font-size: 1.6rem;
font-weight: 600;
margin-bottom: 1rem;
color: white;
}
.button {
display: inline-block;
padding: 0.6rem 1.8rem;
background-color: var(--comic-accent);
color: white;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
transition: all 0.3s ease;
border: var(--comic-border);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.button:hover {
background-color: var(--dark-color);
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
.vertical-dots {
position: absolute;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 0.8rem;
z-index: 10;
}
.vertical-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid #000;
cursor: pointer;
transition: all 0.3s ease;
}
.vertical-dot.active {
background-color: var(--comic-accent);
transform: scale(1.2);
box-shadow: 0 0 10px var(--comic-accent);
}
/* 音乐播放器 - 美化 */
.music-player-container {
background: var(--comic-bg);
border-radius: 12px;
border: var(--comic-border);
padding: 1.5rem;
transition: all 0.3s ease;
width: 100%;
box-shadow: var(--comic-shadow);
}
.music-player-container:hover {
border-color: var(--comic-accent);
}
.music-player {
display: flex;
align-items: center;
gap: 1.5rem;
}
.cover {
width: 90px;
height: 90px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
border: var(--comic-border);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.cover:hover {
transform: rotate(2deg) scale(1.05);
}
.cover img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.cover:hover img {
transform: scale(1.1);
}
.music-info {
flex-grow: 1;
text-align: left;
}
.music-title {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.3rem;
color: var(--primary-color);
}
.music-artist {
font-size: 0.95rem;
color: var(--gray-color);
margin-bottom: 1rem;
}
.progress-container {
width: 100%;
height: 5px;
background-color: var(--light-gray);
border-radius: 3px;
margin-bottom: 0.8rem;
cursor: pointer;
overflow: hidden;
}
.progress {
height: 100%;
background: linear-gradient(90deg, var(--comic-accent), var(--comic-accent-light));
border-radius: 3px;
width: 0%;
transition: width 0.1s linear;
position: relative;
}
.progress::after {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 5px;
background: white;
border-radius: 50%;
transform: translateX(50%);
}
.time-info {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
color: var(--gray-color);
margin-bottom: 1.2rem;
}
.controls {
display: flex;
align-items: center;
gap: 0.8rem;
}
.play-pause-btn {
width: 45px;
height: 45px;
border-radius: 50%;
background: linear-gradient(135deg, var(--comic-accent), var(--comic-accent-light));
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
}
.play-pause-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 15px rgba(255, 107, 107, 0.4);
}
.control-btn {
width: 35px;
height: 35px;
border-radius: 50%;
background-color: var(--light-gray);
color: var(--dark-color);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.control-btn:hover {
background: linear-gradient(135deg, var(--comic-accent), var(--comic-accent-light));
color: white;
transform: scale(1.1);
}
.pause-icon {
display: none;
}
.playing .play-icon {
display: none;
}
.playing .pause-icon {
display: block;
}
/* 个人空间卡片 - 美化 */
.space-card {
background: var(--comic-bg);
border-radius: 12px;
border: var(--comic-border);
transition: all 0.3s ease;
display: flex;
align-items: stretch;
height: 100%;
position: relative;
overflow: hidden;
width: 100%;
box-shadow: var(--comic-shadow);
}
.space-card:hover {
transform: translateY(-5px);
border-color: var(--comic-accent);
}
.space-content {
flex: 1;
padding: 1.8rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.space-title {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 0.8rem;
color: var(--primary-color);
}
.space-desc {
font-size: 0.95rem;
color: var(--gray-color);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.space-button {
display: inline-flex;
align-items: center;
gap: 0.8rem;
padding: 0.7rem 1.5rem;
background: linear-gradient(135deg, var(--comic-accent), var(--comic-accent-light));
color: white;
border-radius: 50px;
font-size: 0.95rem;
font-weight: 600;
transition: all 0.3s ease;
width: fit-content;
border: var(--comic-border);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.space-button:hover {
background: var(--dark-color);
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
.space-image {
width: 40%;
position: relative;
overflow: hidden;
}
.space-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}
.space-card:hover .space-image img {
transform: scale(1.1);
}
/* API列表 - 美化 */
.api-list {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem 4rem;
}
.api-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
gap: 1.8rem;
}
.api-card {
position: relative;
border-radius: 12px;
overflow: hidden;
height: 200px;
transition: all 0.3s ease;
border: var(--comic-border);
box-shadow: var(--comic-shadow);
}
.api-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
border-color: var(--comic-accent);
}
.api-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}
.api-card:hover img {
transform: scale(1.1);
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
color: white;
padding: 1.8rem;
}
.overlay h3 {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: white;
}
.overlay p {
font-size: 0.95rem;
opacity: 0.9;
margin-bottom: 0.5rem;
line-height: 1.6;
}
/* 页脚 - 美化 */
.footer {
background-color: var(--dark-color);
color: white;
padding: 3rem 2rem;
text-align: center;
border-top: var(--comic-border);
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
}
.footer-text {
font-size: 1.1rem;
margin-bottom: 1.5rem;
opacity: 0.8;
}
.icp {
font-size: 0.95rem;
opacity: 0.6;
}
.icp a {
color: var(--comic-accent-light);
margin-left: 0.5rem;
transition: all 0.3s ease;
}
.icp a:hover {
opacity: 1;
text-decoration: underline;
color: var(--comic-accent);
}
/* 浮动按钮 - 美化 */
.float-button {
position: fixed;
right: 2rem;
bottom: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
z-index: 999;
}
.upward {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, var(--comic-accent), var(--comic-accent-light));
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
border: var(--comic-border);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.upward:hover {
background: var(--dark-color);
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
/* 个人资料卡片 - 美化 */
.profile-card {
text-align: center;
padding: 2.8rem 1.8rem 1.8rem;
position: relative;
background: linear-gradient(135deg, #25283b, #1e2031);
border-radius: 12px;
border: var(--comic-border);
transition: all 0.3s ease;
overflow: hidden;
margin-bottom: 1.8rem;
box-shadow: var(--comic-shadow);
}
.profile-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.profile-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--comic-accent), var(--comic-accent-light));
}
.profile-avatar {
width: 110px;
height: 110px;
border-radius: 50%;
border: 3px solid var(--comic-bg);
object-fit: cover;
margin: -35px auto 1.5rem;
position: relative;
background-color: #f5f5f5;
z-index: 2;
border: var(--comic-border);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.profile-avatar:hover {
transform: scale(1.1) rotate(5deg);
border-color: var(--comic-accent);
}
.profile-name {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.8rem;
color: var(--primary-color);
position: relative;
}
.profile-name::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 3px;
background: var(--comic-accent);
border-radius: 3px;
}
.profile-bio {
font-size: 1rem;
color: var(--gray-color);
margin-bottom: 1.8rem;
line-height: 1.6;
}
.profile-stats {
display: flex;
justify-content: space-around;
margin-bottom: 1.8rem;
padding: 1rem 0;
background: rgba(0, 0, 0, 0.05);
border-radius: 12px;
border: 1px solid var(--light-gray);
}
.stat-item {
text-align: center;
padding: 0 0.8rem;
}
.stat-number {
font-size: 1.2rem;
font-weight: 600;
color: var(--comic-accent);
margin-bottom: 0.3rem;
}
.stat-label {
font-size: 0.8rem;
color: var(--gray-color);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.goto {
display: block;
width: 100%;
padding: 0.8rem;
background: linear-gradient(135deg, var(--comic-accent), var(--comic-accent-light));
color: white;
text-align: center;
border-radius: 50px;
font-weight: 600;
margin-bottom: 1.8rem;
transition: all 0.3s ease;
font-size: 0.95rem;
border: var(--comic-border);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.goto:hover {
background: var(--dark-color);
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
.contact-me {
display: flex;
justify-content: center;
gap: 1.2rem;
}
.image-box {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
border: var(--comic-border);
}
.image-box:hover {
background: linear-gradient(135deg, var(--comic-accent), var(--comic-accent-light));
color: white;
transform: translateY(-3px) scale(1.1);
box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
}
/* 赞赏码样式 - 美化 */
.donate-box {
text-align: center;
padding: 1.5rem 0;
}
.donate-title {
font-size: 1.1rem;
color: var(--primary-color);
margin-bottom: 1.5rem;
font-weight: 600;
position: relative;
display: inline-block;
}
.donate-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 3px;
background: var(--comic-accent);
border-radius: 3px;
}
.donate-image {
width: 200px;
height: 200px;
margin: 0 auto;
border-radius: 12px;
overflow: hidden;
border: var(--comic-border);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.donate-image:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.donate-desc {
font-size: 0.9rem;
color: var(--gray-color);
margin-top: 1rem;
}
/* 媒体行布局 */
.media-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.8rem;
margin-bottom: 1.8rem;
}
/* 日历小部件样式 - 美化 */
.calendar-widget {
padding: 1.5rem;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.calendar-title {
font-weight: 600;
font-size: 1.2rem;
color: var(--primary-color);
}
.calendar-nav {
display: flex;
gap: 0.8rem;
}
.calendar-nav-btn {
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: var(--light-gray);
transition: all 0.3s ease;
border: 1px solid var(--light-gray);
}
.calendar-nav-btn:hover {
background: linear-gradient(135deg, var(--comic-accent), var(--comic-accent-light));
color: white;
transform: scale(1.1);
}
.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
margin-bottom: 1rem;
font-size: 0.9rem;
color: var(--gray-color);
}
.calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.5rem;
}
.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: 0.9rem;
border: 1px solid transparent;
}
.calendar-day:hover {
background: var(--light-gray);
transform: scale(1.1);
}
.calendar-day.today {
background: linear-gradient(135deg, var(--comic-accent), var(--comic-accent-light));
color: white;
font-weight: bold;
transform: scale(1.1);
box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
}
.calendar-day.other-month {
opacity: 0.4;
}
/* 天气小部件 - 美化 */
.weather-widget {
padding: 1.5rem;
}
.weather-current {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
}
.weather-icon {
font-size: 3rem;
margin-right: 1.5rem;
color: var(--comic-accent);
}
.weather-temp {
font-size: 2.2rem;
font-weight: 600;
color: var(--primary-color);
}
.weather-desc {
font-size: 1rem;
color: var(--gray-color);
}
.weather-forecast {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.8rem;
}
.weather-day {
text-align: center;
padding: 0.8rem;
border-radius: 12px;
background: var(--light-gray);
transition: all 0.3s ease;
}
.weather-day:hover {
transform: translateY(-3px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.weather-day-icon {
font-size: 1.8rem;
margin: 0.5rem 0;
color: var(--comic-accent);
}
.weather-day-temp {
font-weight: 500;
color: var(--primary-color);
}
/* 搜索框样式 - 美化 */
.search-box {
position: relative;
margin-bottom: 1.8rem;
}
.search-input {
width: 100%;
padding: 0.9rem 1rem 0.9rem 3rem;
border-radius: 50px;
border: var(--comic-border);
background: var(--comic-bg);
font-family: inherit;
font-size: 0.95rem;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.search-input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.3);
border-color: var(--comic-accent);
}
.search-icon {
position: absolute;
left: 1.2rem;
top: 50%;
transform: translateY(-50%);
color: var(--gray-color);
}
/* 标签云样式 - 美化 */
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.tag {
display: inline-block;
padding: 0.5rem 1rem;
background: var(--light-gray);
border-radius: 50px;
font-size: 0.85rem;
transition: all 0.3s ease;
border: 1px solid var(--light-gray);
}
.tag:hover {
background: linear-gradient(135deg, var(--comic-accent), var(--comic-accent-light));
color: white;
transform: translateY(-3px);
box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
border-color: var(--comic-accent);
}
/* 访客统计图表容器 */
.stats-chart {
height: 200px;
margin-top: 1.5rem;
position: relative;
}
/* 待办事项样式 - 美化 */
.todo-list {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
}
.todo-item {
display: flex;
align-items: center;
padding: 0.8rem 0;
border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.todo-item:hover {
background: rgba(0, 0, 0, 0.05);
border-radius: 8px;
padding: 0.8rem;
}
.todo-checkbox {
margin-right: 1rem;
accent-color: var(--comic-accent);
width: 18px;
height: 18px;
cursor: pointer;
}
.todo-text {
flex: 1;
font-size: 0.95rem;
transition: all 0.3s ease;
}
.todo-text.completed {
text-decoration: line-through;
opacity: 0.7;
}
.todo-delete {
color: var(--gray-color);
cursor: pointer;
transition: all 0.3s ease;
padding: 0.5rem;
border-radius: 50%;
}
.todo-delete:hover {
color: var(--comic-accent);
background: rgba(255, 107, 107, 0.1);
transform: scale(1.1);
}
.todo-add {
display: flex;
margin-top: 1rem;
}
.todo-input {
flex: 1;
padding: 0.8rem 1rem;
border: var(--comic-border);
border-radius: 8px 0 0 8px;
background: var(--comic-bg);
font-family: inherit;
font-size: 0.95rem;
transition: all 0.3s ease;
}
.todo-input:focus {
outline: none;
border-color: var(--comic-accent);
}
.todo-submit {
padding: 0.8rem 1.5rem;
background: linear-gradient(135deg, var(--comic-accent), var(--comic-accent-light));
color: white;
border: none;
border-radius: 0 8px 8px 0;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
}
.todo-submit:hover {
background: var(--dark-color);
transform: translateY(-2px);
}
/* 加载动画 */
.tengyuan-loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.98);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 1;
transition: opacity 0.5s ease-out;
pointer-events: none;
}
.tengyuan-loading.hidden {
opacity: 0;
}
/* 确保主内容在加载时不可见 */
body.loading {
overflow: hidden;
height: 100vh;
}
body.loaded {
overflow: auto;
}
/* 头像容器 */
.tengyuan-avatar-container {
position: relative;
width: 120px;
height: 120px;
margin-bottom: 30px;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* 头像 */
.tengyuan-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
border: 2px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
/* 进度环 */
.tengyuan-progress-ring {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
.tengyuan-progress-circle {
fill: transparent;
stroke: #6B7280;
stroke-width: 3;
stroke-dasharray: 326.725;
stroke-dashoffset: 326.725;
stroke-linecap: round;
transform-origin: 50% 50%;
transform: rotate(-90deg);
animation: progress-rotate 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes progress-rotate {
0% {
stroke-dashoffset: 326.725;
transform: rotate(-90deg);
}
50% {
stroke-dashoffset: 0;
transform: rotate(270deg);
}
100% {
stroke-dashoffset: -326.725;
transform: rotate(630deg);
}
}
/* 季节文字 */
.tengyuan-quote {
font-family: 'Inter', 'Noto Sans SC', sans-serif;
font-size: 1.1rem;
color: #cccccc;
text-align: center;
margin-top: 24px;
line-height: 1.6;
opacity: 0;
animation: textAppear 1.2s ease-out 0.5s forwards;
position: relative;
max-width: 80%;
}
/* 季节飘落元素 */
.season-element {
position: absolute;
z-index: 1;
opacity: 0;
animation: falling linear infinite;
pointer-events: none;
will-change: transform;
}
@keyframes falling {
0% {
transform: translate(var(--start-x), -10vh) rotate(0deg);
opacity: 0;
}
10% {
opacity: var(--element-opacity);
}
90% {
opacity: var(--element-opacity);
}
100% {
transform: translate(calc(var(--start-x) + var(--random-x)), 110vh) rotate(360deg);
opacity: 0;
}
}
/* 季节指示器 - 修改为左下方位置 */
.season-indicator {
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
background: #1e1e1e;
padding: 4px 12px;
border-radius: 16px;
font-size: 0.85rem;
color: #cccccc;
font-weight: 500;
z-index: 4;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
white-space: nowrap;
min-width: 36px;
text-align: center;
}
/* FPS监控漫画风格 */
.comic-fps {
position: fixed;
left: 10px;
bottom: 10px;
display: flex;
align-items: center;
z-index: 999;
user-select: none;
font-family: 'Noto Sans SC', sans-serif;
}
.fps-bubble {
position: relative;
background: var(--comic-bg);
border: var(--comic-border);
border-radius: 12px;
padding: 10px 15px;
box-shadow: var(--comic-shadow);
display: flex;
align-items: center;
gap: 10px;
}
.fps-character {
font-size: 1.5rem;
transform: translateY(2px);
opacity: 0.9;
}
.fps-value {
font-weight: bold;
font-size: 1.1rem;
margin-right: 5px;
color: var(--comic-accent);
}
.fps-status {
font-size: 0.9rem;
}
/* FPS状态颜色 */
.comic-fps.excellent {
--comic-accent: #2ecc71;
}
.comic-fps.good {
--comic-accent: #f1c40f;
}
.comic-fps.normal {
--comic-accent: #e67e22;
}
.comic-fps.low {
--comic-accent: #e74c3c;
}
.comic-fps.critical {
--comic-accent: #c0392b;
animation: shake 0.5s infinite;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-3px); }
75% { transform: translateX(3px); }
}
/* 右侧边栏内容显示不全的修复 */
.right-side {
display: flex;
flex-direction: column;
height: 100vh;
}
.right-side > :not(.account):not(.right-search) {
flex-shrink: 0;
}
.right-side > .card {
overflow-y: auto;
flex-grow: 1;
margin-bottom: 0;
}
/* 响应式设计 */
@media (max-width: 1200px) {
.content-container {
flex-direction: column;
}
}
@media (max-width: 768px) {
.hero {
padding: 5rem 1rem 3rem;
}
.site-title {
font-size: 2rem;
}
.api-cards {
grid-template-columns: 1fr;
}
.space-card {
flex-direction: column;
height: auto;
}
.space-image {
width: 100%;
height: 150px;
}
.music-player {
flex-direction: column;
text-align: center;
}
.music-info {
text-align: center;
}
.controls {
justify-content: center;
}
.float-button {
right: 1rem;
bottom: 1rem;
}
.profile-avatar {
width: 80px;
height: 80px;
margin: -30px auto 1rem;
}
.donate-image {
width: 150px;
height: 150px;
}
.media-row {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body class="loading" x-data="{ rightSide: false, leftSide: false }">
<!-- 加载动画 -->
<div class="tengyuan-loading">
<div id="season-elements-container"></div>
<div class="tengyuan-avatar-container">
<img class="tengyuan-avatar" src="https://a.520gexing.com/uploads/allimg/2019032616/3mltnpfys55.jpg" alt="头像">
<div class="season-indicator" id="seasonIndicator"></div>
<svg class="tengyuan-progress-ring" viewBox="0 0 120 120">
<circle class="tengyuan-progress-circle" cx="60" cy="60" r="52.5"></circle>
</svg>
</div>
<div class="tengyuan-quote">
风穿过四季的门，
<br>每一片飘落都是时间的信。
</div>
</div>
<!-- 主容器 -->
<div class="container">
<!-- 左侧边栏 - 导航菜单 -->
<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">藤原</div>
<!-- 主菜单 -->
<div class="side-wrapper">
<div class="side-title">MENU</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 4v14a3 3 0 0 0-3-3H2z"></path>
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></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">CATEGORIES</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">
<!-- 英雄区域 -->
<section class="hero">
<img class="avatar" src="https://a.520gexing.com/uploads/allimg/2019032616/3mltnpfys55.jpg" alt="藤原的头像">
<h1 class="site-title">藤原の小站</h1>
<p class="motto">风带来故事的种子，时间使之发芽。</p>
<div class="speech-bubble">
欢迎来到我的个人空间，这里记录着我的学习、生活和创作的点滴。
</div>
</section>
<!-- 主要内容 - 三栏布局 -->
<div class="content-container">
<!-- 左侧内容区 -->
<div>
<!-- 竖向轮播图卡片 -->
<div class="card comic-card">
<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="media-row">
<!-- 音乐播放器 -->
<div class="music-player-container comic-card">
<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="space-card comic-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>
<!-- 待办事项 -->
<div class="card comic-card">
<div class="card-title">
<i class="fas fa-tasks"></i> 待办事项
</div>
<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>
<!-- API列表 -->
<div class="api-list">
<h2 class="card-title"><i class="fas fa-link"></i> 我的项目</h2>
<div class="api-cards">
<a class="api-card comic-card" 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 comic-card" 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 comic-card" 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 comic-card" 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 comic-card" 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 comic-card" 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-10 7L2 6" />
</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">藤原
<img src="https://images.genius.com/2326b69829d58232a2521f09333da1b3.1000x1000x1.jpg" alt="" class="account-profile" alt="">
<span>▼</span>
</span>
</div>
<!-- 个人资料卡片 -->
<div class="profile-card comic-card">
<img class="profile-avatar" src="https://a.520gexing.com/uploads/allimg/2019032616/3mltnpfys55.jpg" alt="藤原的头像">
<h2 class="profile-name">藤原</h2>
<p class="profile-bio">风带来故事的种子，时间使之发芽。</p>
<div class="profile-stats">
<div class="stat-item">
<div class="stat-number">4</div>
<div class="stat-label">网站</div>
</div>
<div class="stat-item">
<div class="stat-number">2</div>
<div class="stat-label">项目</div>
</div>
<div class="stat-item">
<div class="stat-number">2</div>
<div class="stat-label">分类</div>
</div>
</div>
<a href="https://blog.tengyuan.icu/" class="goto">前往博客</a>
<div class="contact-me">
<a class="image-box" href="https://github.com/tengyuan1101" target="_blank">
<i class="fab fa-github"></i>
</a>
<a class="image-box" href="https://www.zhihu.com/people/c829052124f7ba5840ed206f13691a6b" target="_blank">
<i class="fab fa-zhihu"></i>
</a>
<a class="image-box" href="mailto:2083737075@qq.com" target="_blank">
<i class="fas fa-envelope"></i>
</a>
</div>
</div>
<!-- 日历小部件 -->
<div class="card comic-card">
<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="card comic-card">
<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 class="card comic-card">
<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="card comic-card">
<div class="card-title">
<i class="fas fa-bullhorn"></i> 公告栏
</div>
<div class="content">
<center>
<b>--- 主域名 ---
<br>
<a target="_blank" rel="noopener" href="https://tengyuan.icu" title="此线路部署于腾讯云服务器" class="anno_content">
<font color="#000000">tengyuan.icu</font>
</a> | <a target="_blank" rel="noopener" href="https://tengyuan.tech" title="此线路部署于雨云服务器" class="anno_content">
<font color="#000000">tengyuan.tech</font>
</a>
<br>--- 备用域名 ---
<br>
<a target="_blank" rel="noopener" href="暂无" title="暂无" class="anno_content">
<font color="#000000">暂无</font>
</a>
<br>
<a target="_blank" rel="noopener" href="暂无" title="暂无" class="anno_content">
<font color="#000000">暂无</font>
</a>
<br>--- 网站安卓APP ---
<br>🍧<a target="_blank" rel="noopener" href="暂无下载链接" title="点这里可以下载网站的安卓APP" class="anno_content">
<font color="#000000">点此下载</font>
</a>🍧
</b>
</center>
</div>
</div>
<!-- 赞赏码板块 -->
<div class="card comic-card">
<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="card comic-card">
<div class="card-title">
<i class="fas fa-chart-line"></i> 访客统计
</div>
<div class="content">
<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="card comic-card">
<div class="card-title">
<i class="fas fa-comments"></i> 最新评论
</div>
<div class="content">
<div>
<strong>张三</strong>: 网站设计很棒！
<br><small>2025-05-07</small>
</div>
<div>
<strong>李四</strong>: 音乐播放器很好用
<br><small>2025-05-06</small>
</div>
<div>
<strong>王五</strong>: 期待更多内容
<br><small>2025-05-05</small>
</div>
</div>
</div>
<!-- 右侧搜索栏 -->
<div class="search-bar right-search">
<input type="text" placeholder="搜索文章..." />
<div class="search-bar-svgs">
<svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="3" />
<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" />
</svg>
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 469.34 469.34">
<path d="M456.84 76.17l-64-64.06c-16.13-16.13-44.18-16.17-60.37.04L45.77 301.67a10.73 10.73 0 00-2.7 4.59L.41 455.73a10.68 10.68 0 0013.19 13.2l149.33-42.7a10.73 10.73 0 004.58-2.7l289.33-286.98c8.06-8.07 12.5-18.78 12.5-30.19s-4.44-22.12-12.5-30.2zM285.99 89.74L325.25 129l-205 205-14.7-29.44a10.67 10.67 0 00-9.55-5.9H78.92L286 89.75zM26.2 443.14l13.9-48.64 34.74 34.74-48.64 13.9zm123.14-35.18L98.3 422.54l-51.5-51.5L61.38 320H89.4l18.38 36.77a10.67 10.67 0 004.77 4.77l36.78 18.39v28.03zm21.33-17.54v-17.09c0-4.04-2.28-7.72-5.9-9.54l-29.43-14.7 205-205 39.26 39.26-208.93 207.07zm271.11-268.7l-47.03 46.61L301 74.6l46.59-47c8.06-8.07 22.1-8.07 30.16 0l64 64c4.03 4.03 6.25 9.38 6.25 15.08s-2.22 11.05-6.22 15.05z" />
</svg>
<svg stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
<path d="M12 5v14M5 12h14" />
</svg>
</div>
</div>
</div>
<!-- 遮罩层 - 用于移动端侧边栏弹出时覆盖主内容 -->
<div class="overlay" @click="rightSide = false; leftSide = false" :class="{ 'active': rightSide || leftSide }"></div>
</div>
<!-- 页脚 -->
<footer class="footer">
<div class="footer-container">
<p class="footer-text">© 2025 藤原の小站 - 保留所有权利</p>
<p class="icp">
ICP备案号:
<a href="https://beian.miit.gov.cn/" target="_blank">待备案</a>
</p>
</div>
</footer>
<!-- 浮动按钮 -->
<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>
<!-- 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';
}
});
// 图片懒加载
document.addEventListener('DOMContentLoaded', function() {
const lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
if ('IntersectionObserver' in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.original;
lazyImage.classList.remove('lazy');
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// 不支持IntersectionObserver的备用方案
lazyImages.forEach(function(lazyImage) {
lazyImage.src = lazyImage.dataset.original;
lazyImage.classList.remove('lazy');
});
}
});
// 竖向轮播图控制
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);
// 季节SVG元素定义
const seasonSVGs = {
spring: [
// 粉色樱花
`<svg viewBox="0 0 100 100" width="30" height="30">
<path d="M50 20 Q60 0 70 20 T90 30 Q100 40 80 50 T70 70 Q60 90 50 70 T30 50 Q10 40 20 30 T30 20 Q40 0 50 20"
fill="#FF9FF3"/>
</svg>`,
// 黄色小花
`<svg viewBox="0 0 100 100" width="30" height="30">
<circle cx="50" cy="50" r="20" fill="#FECA57"/>
<circle cx="50" cy="30" r="8" fill="#FF9F43"/>
<circle cx="65" cy="40" r="8" fill="#FF9F43"/>
<circle cx="70" cy="60" r="8" fill="#FF9F43"/>
<circle cx="60" cy="75" r="8" fill="#FF9F43"/>
<circle cx="40" cy="75" r="8" fill="#FF9F43"/>
<circle cx="30" cy="60" r="8" fill="#FF9F43"/>
<circle cx="35" cy="40" r="8" fill="#FF9F43"/>
</svg>`
],
summer: [
// 绿色树叶1
`<svg viewBox="0 0 100 100" width="35" height="35">
<path d="M50 10 Q80 30 50 70 Q20 30 50 10"
fill="#1DD1A1" stroke="#10AC84" stroke-width="2"/>
</svg>`,
// 绿色树叶2
`<svg viewBox="0 0 100 100" width="35" height="35">
<path d="M50 10 L70 40 L50 70 L30 40 Z"
fill="#1DD1A1" stroke="#10AC84" stroke-width="2"/>
</svg>`
],
autumn: [
// 红色枫叶1
`<svg viewBox="0 0 100 100" width="32" height="32">
<path d="M50 10 Q70 20 60 40 Q80 30 70 50 Q60 70 50 60 Q40 70 30 50 Q20 30 40 40 Q30 20 50 10"
fill="#FF6B6B" stroke="#EE5253" stroke-width="2"/>
</svg>`,
// 红色枫叶2
`<svg viewBox="0 0 100 100" width="32" height="32">
<path d="M50 10 L60 30 L80 10 L70 40 L90 50 L70 60 L80 90 L60 70 L50 90 L40 70 L20 90 L30 60 L10 50 L30 40 L20 10 L40 30 Z"
fill="#FF6B6B" stroke="#EE5253" stroke-width="2"/>
</svg>`
],
winter: [
// 白色雪花1
`<svg viewBox="0 0 100 100" width="28" height="28">
<path d="M50 10 L60 30 L80 30 L65 45 L75 65 L50 55 L25 65 L35 45 L20 30 L40 30 Z"
fill="#C8D6E5" stroke="#FFFFFF" stroke-width="2"/>
</svg>`,
// 白色雪花2
`<svg viewBox="0 0 100 100" width="28" height="28">
<path d="M50 10 L60 25 L75 15 L65 35 L90 35 L70 50 L90 65 L65 65 L75 85 L60 75 L50 90 L40 75 L25 85 L35 65 L10 65 L30 50 L10 35 L35 35 L25 15 L40 25 Z"
fill="#FFFFFF" stroke="#C8D6E5" stroke-width="1"/>
</svg>`
]
};
function createSeasonElements() {
const container = document.getElementById('season-elements-container');
const now = new Date();
const month = now.getMonth() + 1;
let season, elementCount, elementOpacity;
// 季节判定
if (month >= 3 && month <= 5) { // 春 (3-5月)
season = "spring";
elementCount = 12;
elementOpacity = 0.6;
} else if (month >= 6 && month <= 8) { // 夏 (6-8月)
season = "summer";
elementCount = 10;
elementOpacity = 0.7;
} else if (month >= 9 && month <= 11) { // 秋 (9-11月)
season = "autumn";
elementCount = 15;
elementOpacity = 0.65;
} else { // 冬 (12-2月)
season = "winter";
elementCount = 18;
elementOpacity = 0.75;
}
// 设置季节标识
const seasonNames = {spring: "春", summer: "夏", autumn: "秋", winter: "冬"};
document.getElementById('seasonIndicator').textContent = seasonNames[season];
// 创建飘落元素
for (let i = 0; i < elementCount; i++) {
const element = document.createElement('div');
element.className = 'season-element';
// 随机选择当前季节的SVG
const svgIndex = Math.floor(Math.random() * seasonSVGs[season].length);
element.innerHTML = seasonSVGs[season][svgIndex];
// 设置随机位置和动画参数
const startX = Math.random() * 100;
const randomX = (Math.random() * 30) - 15; // -15px 到 15px 之间的随机偏移
element.style.left = `${startX}vw`;
element.style.setProperty('--start-x', `${(Math.random() * 15) - 7.5}px`);
element.style.setProperty('--random-x', `${randomX}px`);
element.style.setProperty('--element-opacity', elementOpacity);
element.style.animationDuration = `${(Math.random() * 6) + 6}s`; // 6-12秒
element.style.animationDelay = `${Math.random() * 3}s`; // 0-3秒延迟
container.appendChild(element);
}
}
// 页面加载完成后执行
window.addEventListener('load', function() {
createSeasonElements();
// 2秒后移除加载动画
setTimeout(() => {
const loadingElement = document.querySelector('.tengyuan-loading');
loadingElement.style.animation = 'fadeIn 0.4s ease-out reverse forwards';
setTimeout(() => {
loadingElement.remove();
document.body.classList.remove('loading');
document.body.classList.add('loaded');
}, 400);
}, 2000);
});
// 更新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();
}
});
})();
// 日历功能
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(255, 77, 77, 0.2)';
ctx.strokeStyle = 'rgba(255, 77, 77, 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(255, 77, 77, 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);
</script>
</body>
</html>
index.html
style.css
index.js