From a2593c1f84a8521560f9db6d99a015dce3e09f70 Mon Sep 17 00:00:00 2001
From: Han <1655466387@qq.com>
Date: Fri, 21 Feb 2025 18:46:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=89=8B=E6=9C=BA=E7=AB=AF?=
=?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/article/[...article].astro | 15 +--
src/styles/Article.less | 148 +++++++++++++++++++--------
src/styles/Base.less | 2 +-
3 files changed, 118 insertions(+), 47 deletions(-)
diff --git a/src/pages/article/[...article].astro b/src/pages/article/[...article].astro
index db0be91..f239d4b 100644
--- a/src/pages/article/[...article].astro
+++ b/src/pages/article/[...article].astro
@@ -40,18 +40,21 @@ import "../../styles/Article.less";
-
-
-
-
{post.data.categories}
-
-
+
+
+
+
+
{Twikoo.envId && }
diff --git a/src/styles/Article.less b/src/styles/Article.less
index a39e8dd..343161b 100644
--- a/src/styles/Article.less
+++ b/src/styles/Article.less
@@ -1,9 +1,116 @@
section.vh-container {
&>article.vh-article-main {
flex: 1;
- padding: 1rem 0;
min-width: 0;
+
+ &>header {
+ box-sizing: border-box;
+ padding: 2rem 1rem 1rem;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: max-content;
+ background: #fff;
+ border-top-left-radius: 0.5rem;
+ border-top-right-radius: 0.5rem;
+ box-shadow: 0 -3px 8px 6px rgba(7, 17, 27, 0.05);
+ overflow: hidden;
+
+ &>h1 {
+ width: 100%;
+ font-weight: 700;
+ }
+
+ &>.article-meta {
+ display: flex;
+ align-items: center;
+ gap: 1.18rem;
+ font-size: 0.85rem;
+
+ &>.article-meta-item {
+ display: flex;
+ align-items: center;
+ gap: 0.38rem;
+ width: max-content;
+
+ &>svg {
+ flex-shrink: 0;
+ height: 0.86rem;
+ width: auto;
+ }
+
+ &>time {
+ color: #9A9A9A;
+ }
+ }
+ }
+ }
+
+ &>main {
+ box-sizing: border-box;
+ padding: 1rem;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: max-content;
+ background: #fff;
+ border-bottom-left-radius: 0.5rem;
+ border-bottom-right-radius: 0.5rem;
+ box-shadow: 0 12px 8px 6px rgba(7, 17, 27, 0.05);
+ overflow: hidden;
+
+ &>.tag-list {
+ box-sizing: border-box;
+ padding-top: 2rem;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.58rem;
+ width: 100%;
+
+ &>a {
+ position: relative;
+ box-sizing: border-box;
+ padding: 0.28rem 0.68rem;
+ padding-left: 2rem;
+ display: flex;
+ align-items: center;
+ gap: 0.18rem;
+ height: 1.68rem;
+ width: max-content;
+ font-size: 0.875rem;
+ border-radius: 1rem;
+ background-color: #F5F6F8;
+ transition: background 0.16s ease-in-out, transform 0.16s ease-in-out;
+
+ &:hover {
+ background-color: #EEEFF3;
+ transform: translateY(-0.18rem);
+ }
+
+ &::before {
+ position: absolute;
+ left: 3px;
+ top: 50%;
+ transform: translateY(-50%);
+ content: '';
+ width: 1.38rem;
+ height: 1.38rem;
+ background: #fff url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M345%2039.1L472.8%20168.4c52.4%2053%2052.4%20138.2%200%20191.2L360.8%20472.9c-9.3%209.4-24.5%209.5-33.9%20.2s-9.5-24.5-.2-33.9L438.6%20325.9c33.9-34.3%2033.9-89.4%200-123.7L310.9%2072.9c-9.3-9.4-9.2-24.6%20.2-33.9s24.6-9.2%2033.9%20.2zM0%20229.5L0%2080C0%2053.5%2021.5%2032%2048%2032l149.5%200c17%200%2033.3%206.7%2045.3%2018.7l168%20168c25%2025%2025%2065.5%200%2090.5L277.3%20442.7c-25%2025-65.5%2025-90.5%200l-168-168C6.7%20262.7%200%20246.5%200%20229.5zM144%20144a32%2032%200%201%200%20-64%200%2032%2032%200%201%200%2064%200z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;
+ background-size: 0.88rem;
+ border-radius: 1rem;
+ overflow: hidden;
+ }
+ }
+ }
+ }
+
+ &>footer {
+ box-sizing: border-box;
+ width: 100%;
+ height: max-content;
+ }
+
// 文章内容样式开始=========================
h1,
h2,
@@ -153,42 +260,6 @@ section.vh-container {
}
}
- &>header {
- padding: 2rem 0;
- display: flex;
- flex-direction: column;
- width: 100%;
-
- &>h1 {
- width: 100%;
- font-weight: 700;
- }
-
- &>.article-meta {
- display: flex;
- align-items: center;
- gap: 1.18rem;
- font-size: 0.85rem;
-
- &>.article-meta-item {
- display: flex;
- align-items: center;
- gap: 0.38rem;
- width: max-content;
-
- &>svg {
- flex-shrink: 0;
- height: 0.86rem;
- width: auto;
- }
-
- &>time {
- color: #9A9A9A;
- }
- }
- }
- }
-
// 自定义组件样式
.vh-node {
margin: 0.618rem 0;
@@ -509,7 +580,6 @@ section.vh-container {
}
// 文章内容样式结束=========================
-
}
}
@@ -554,8 +624,6 @@ section.vh-container {
section.vh-container {
&>article.vh-article-main {
&>header {
- padding-top: 0;
-
&>h1 {
font-size: 1.36rem;
}
diff --git a/src/styles/Base.less b/src/styles/Base.less
index bb13f35..aaee630 100644
--- a/src/styles/Base.less
+++ b/src/styles/Base.less
@@ -74,7 +74,7 @@ html {
position: relative;
margin: 0;
box-sizing: border-box;
- padding: var(--vh-padding-top) 1rem 0;
+ padding: var(--vh-padding-top) 0.5rem 0;
display: flex;
flex-direction: column;
align-items: center;