<!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;
}
</style>
<!-- 引入阿里巴巴图标库 -->
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4005972_5ehi8q0b1j9.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>
<!-- 右侧时间线 - 博客文章 -->
<div class="timeline-right">
<!-- 这里可以添加博客文章卡片 -->
</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">TENG YUAN
<img src="https://images.genius.com/2326b69829d58232a2521f09333da1b3.1000x1000x1.jpg" alt="" class="account-profile">
<span>▼</span>
</span>
</div>
<!-- 这里可以添加右侧边栏内容 -->
</div>
<!-- 遮罩层 - 用于移动端侧边栏弹出时覆盖主内容 -->
<div class="overlay" @click="rightSide = false; leftSide = false" :class="{ 'active': rightSide || leftSide }"></div>
</div>
<!-- Alpine.js 用于交互功能 -->
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
</body>
</html>
index.html
style.css
index.js