优化手机端样式

src/pages/article/[...article].astro

@@ -40,18 +40,21 @@ import "../../styles/Article.less";
 						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"> <path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L64 64C28.7 64 0 92.7 0 128l0 16 0 48L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-256 0-48 0-16c0-35.3-28.7-64-64-64l-40 0 0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L152 64l0-40zM48 192l80 0 0 56-80 0 0-56zm0 104l80 0 0 64-80 0 0-64zm128 0l96 0 0 64-96 0 0-64zm144 0l80 0 0 64-80 0 0-64zm80-48l-80 0 0-56 80 0 0 56zm0 160l0 40c0 8.8-7.2 16-16 16l-64 0 0-56 80 0zm-128 0l0 56-96 0 0-56 96 0zm-144 0l0 56-64 0c-8.8 0-16-7.2-16-16l0-40 80 0zM272 248l-96 0 0-56 96 0 0 56z"></path></svg>
 						<time>{fmtTime(post.data.date, "YYYY-MM-DD A")}</time>
 					</span>
-					<span class="article-meta-item">
-						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z"></path></svg>
-						<time>{fmtTime(post.data.updated || post.data.date, "YYYY-MM-DD A")}</time>
-					</span>
 					<a class="article-meta-item" href={`/categories/${post.data.categories}`}>
 						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M40 48C26.7 48 16 58.7 16 72l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24L40 48zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM16 232l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0z"></path></svg>
 						<span>{post.data.categories}</span>
 					</a>
 				</div>
 			</header>
-			<Content />
+			<main>
-			<Copyright site={Site} id={post.data.id} title={post.data.title} sitename={Title} time={fmtTime(post.data.date, "YYYY-MM-DD A")} auther={Author} />
+				<Content />
+				<nav class="tag-list">
+					{post.data.tags.map((i: any) => <a href={`/tags/${i}`}>{i}</a>)}
+				</nav>
+			</main>
+			<footer>
+				<Copyright site={Site} id={post.data.id} title={post.data.title} sitename={Title} time={fmtTime(post.data.date, "YYYY-MM-DD A")} auther={Author} />
+			</footer>
 			{Twikoo.envId && <Comment envId={Twikoo.envId} />}
 		</article>
 		<Aside />

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;
         }

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;