From 914b05192fce5ba060c3e598f64c8ed9a208031b Mon Sep 17 00:00:00 2001 From: npmrun <1549469775@qq.com> Date: Fri, 4 Jul 2025 00:09:16 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E4=B8=AA=E4=BA=BA?= =?UTF-8?q?=E7=BB=8F=E5=8E=86=E6=97=B6=E9=97=B4=E7=BA=BF=EF=BC=8C=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E6=95=99=E8=82=B2=E5=92=8C=E5=87=BA=E7=94=9F=E4=BF=A1?= =?UTF-8?q?=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/css/page/index.css | 145 ++++++++++++++++++++++++++++++++++++++--- src/views/page/index/index.pug | 42 +++++++++++- 2 files changed, 175 insertions(+), 12 deletions(-) diff --git a/public/css/page/index.css b/public/css/page/index.css index 12fc71c..7597681 100644 --- a/public/css/page/index.css +++ b/public/css/page/index.css @@ -1,21 +1,23 @@ .home-hero { - margin: 20px 20px 40px; + margin: 40px 20px 40px; /* background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); */ text-align: center; } .avatar-container { - width: 100px; - height: 100px; + width: 120px; + height: 120px; margin: 0 auto; position: relative; } -.avatar-container .author{ +.avatar-container .author { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; + font-size: 20px; + font-weight: bold; } .avatar-container:hover .avatar { transform: rotate(360deg); @@ -32,22 +34,146 @@ transition: 0.5s transform ease-in-out, 0.5s left ease-in-out; } -.time-line{ +.card { + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(12px); + border-radius: 8px; + padding: 20px; + width: 300px; + margin: 0 auto; + margin-bottom: 40px; + text-align: center; +} + +.time-line { display: flex; flex-direction: column; justify-content: center; + position: relative; +} + +.time-line:before { + content: ""; + width: 3px; + height: 100%; + background: rgba(255, 255, 255, 0.37); + backdrop-filter: blur(12px); + left: 50%; + top: 0; + position: absolute; + transform: translateX(-50%); +} + +.time-line::after { + content: ""; + position: absolute; + left: 50%; + top: 100%; + width: 0; + height: 0; + border-top: 12px solid rgba(255, 255, 255, 0.37); + border-right: 7px solid transparent; + border-left: 7px solid transparent; + backdrop-filter: blur(12px); + transform: translateX(-50%); +} + +.time-line a { + color: rgb(219, 255, 121); + text-decoration: underline; + font-weight: 600; + transition: color 0.2s, background 0.2s; + border-radius: 8px; + padding: 1px 4px; +} +.time-line a:hover { + color: #fff; + background: linear-gradient(90deg, #7ec6f7 0%, #ff8ca8 100%); + text-decoration: none; } .time-line-item { color: white; + width: 900px; + margin: 20px auto; + position: relative; +} + +.time-line-item:first-child { + margin-top: 0; } -.time-line-item.left { - border-right: 1px solid white; +.time-line-item:last-child { + margin-bottom: 50px; +} + +.timeline-icon { + position: absolute; + width: 100px; + height: 50px; + background-color: #ee4d4d7a; + backdrop-filter: blur(12px); + left: 50%; + top: 0; + transform: translateX(-50%); + display: flex; + align-items: center; + justify-content: center; + font-family: Arial, Helvetica, sans-serif; +} + +.time-line-item-title { + background-color: #ee4d4d7a; + backdrop-filter: blur(12px); + height: 50px; + line-height: 50px; + padding: 0 20px; +} + +.time-line-item:nth-child(odd) .time-line-item-content { + color: white; + width: 50%; + padding-right: 80px; +} + +.time-line-item:nth-child(odd) .time-line-item-content::before { + content: ""; + position: absolute; + left: calc(50% - 80px); + top: 20px; + width: 0; + height: 0; + border-top: 7px solid transparent; + border-bottom: 7px solid transparent; + border-left: 7px solid #ee4d4d7a; + backdrop-filter: blur(12px); +} + +.time-line-item:nth-child(even) .time-line-item-content { + float: right; + width: 50%; + padding-left: 80px; +} + +.time-line-item:nth-child(even) .time-line-item-content::before { + content: ""; + position: absolute; + right: calc(50% - 80px); + top: 20px; + width: 0; + height: 0; + border-top: 7px solid transparent; + border-bottom: 7px solid transparent; + border-right: 7px solid #ee4d4d7a; + backdrop-filter: blur(12px); } -.time-line-item.right { - border-left: 1px solid white; +.time-line-item-desc { + background-color: #ffffff54; + backdrop-filter: blur(12px); + color: #fff; + padding: 20px; + line-height: 1.4; } @media screen and (max-width: 768px) { @@ -56,4 +182,3 @@ margin-top: 20px; } } - \ No newline at end of file diff --git a/src/views/page/index/index.pug b/src/views/page/index/index.pug index 13e72bd..4e68df8 100644 --- a/src/views/page/index/index.pug +++ b/src/views/page/index/index.pug @@ -8,6 +8,44 @@ block pageContent .avatar-container .author #{$site.site_author} img.avatar(src="https://alist.xieyaxin.top/p/%E6%B8%B8%E5%AE%A2%E6%96%87%E4%BB%B6/%E5%85%AC%E5%85%B1%E4%BF%A1%E6%81%AF/avatar.jpg", alt="") + .card + div 人生轨迹 ul.time-line - li.time-line-item.left dsad - li.time-line-item.right dsad + li.time-line-item + .timeline-icon + div 第一份工作 + .time-line-item-content + .time-line-item-title ？？？ + .time-line-item-desc 做游戏的。 + li.time-line-item + .timeline-icon + div 大学毕业 + .time-line-item-content + .time-line-item-title 2014年09月 + .time-line-item-desc 我从 + a(href="https://www.jxnu.edu.cn/" target="_blank") 江西师范大学 + span 毕业，获得了软件工程（虚拟现实与技术）专业的学士学位。 + li.time-line-item + .timeline-icon + div 高中 + .time-line-item-content + .time-line-item-title ？？？ + .time-line-item-desc 宜春中学 + li.time-line-item + .timeline-icon + div 初中 + .time-line-item-content + .time-line-item-title ？？？ + .time-line-item-desc 宜春实验中学 + li.time-line-item + .timeline-icon + div 小学 + .time-line-item-content + .time-line-item-title ？？？ + .time-line-item-desc 宜春二小 + li.time-line-item + .timeline-icon + div 出生 + .time-line-item-content + .time-line-item-title 1996年06月 + .time-line-item-desc 我出生于江西省丰城市泉港镇。