diff --git a/src/components/Archive/Archive.less b/src/components/Archive/Archive.less index beb41ca..1b255c2 100644 --- a/src/components/Archive/Archive.less +++ b/src/components/Archive/Archive.less @@ -1,138 +1,134 @@ -section.vh-container { - &>section.vh-archive-main { - flex: 1; - padding: 2rem 1rem; - border-radius: 1rem; - background-color: #fff; - overflow: hidden; +section.vh-archive-main { + flex: 1; + padding: 2rem 1rem; + border-radius: 1rem; + background-color: var(--vh-white-color); + overflow: hidden; - &>.archive-list { + &>.archive-list { + display: flex; + flex-direction: column; + gap: 1rem; + + &>.archive-list-item { display: flex; flex-direction: column; - gap: 1rem; - &>.archive-list-item { + &>p, + a { display: flex; - flex-direction: column; - - &>p, - a { - display: flex; - align-items: center; - width: 100%; - height: 2.5rem; - border-radius: 1rem; - font-size: var(--vh-size-p); - transition: background .16s; + align-items: center; + width: 100%; + height: 2.5rem; + border-radius: 1rem; + font-size: 1rem; + transition: background .18s; - &:not(.title) { - - &:hover { - background-color: var(--vh-main-color); - - &>i { - &::before { - height: 50.66%; - } - } - - &>span { - padding-left: 0.28rem; - } - } - - &>em { - color: var(--vh-black-38); - font-size: var(--vh-size-span); - font-weight: 500; - } + &:not(.title) { + &:hover { + background-color: #EEEFF3; &>i { - &::before { - width: 0.25rem; - height: 0.25rem; - border: none; - border-radius: 0.25rem; - background-color: #4E667F; - } - - &::after { - content: ""; - position: absolute; - width: 0.125rem; - height: 1rem; - left: calc(50% - 0.0625rem); - transform: translateY(-50%); - border-left: 2px dashed rgba(0, 0, 0, .1); - pointer-events: none; + height: 50.66%; } } - &>span { - font-size: var(--vh-size-p); - color: var(--vh-black-100); - font-weight: 600; + padding-left: 0.28rem; } } &>em { - flex-shrink: 0; - width: 5.05rem; - height: 3.75rem; - color: var(--vh-black-100); - font-size: 1.5rem; - font-weight: 600; - line-height: 3.75rem; - text-align: right; - font-style: normal; + color: var(--vh-font-28); + font-size: 0.875rem; + font-weight: 500; } &>i { - position: relative; - width: 2.5rem; - height: 100%; - &::before { - content: ''; + width: 0.25rem; + height: 0.25rem; + border: none; + border-radius: 0.25rem; + background-color: #4E667F; + } + + &::after { + content: ""; position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - display: block; - width: 0.36rem; - height: 0.36rem; - border: solid 0.28rem #0000006D; - border-radius: 50%; - background-color: #fff; - transition: all .3s; + width: 0.125rem; + height: 1rem; + left: calc(50% - 0.0625rem); + transform: translateY(-50%); + border-left: 2px dashed rgba(0, 0, 0, .1); + pointer-events: none; } } - &>span { - flex: 1; - white-space: nowrap; - overflow: hidden; - color: var(--vh-black-66); - font-weight: 500; - text-overflow: ellipsis; - transition: all .16s; - } - &>cite { - margin-left: auto; - width: 7.8rem; - font-size: var(--vh-size-span); - color: var(--vh-black-66); - font-weight: 400; - font-style: normal; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + &>span { + font-size: 1rem; + color: var(--vh-font-color); + font-weight: 600; } } + + &>em { + flex-shrink: 0; + width: 5.05rem; + height: 3.75rem; + color: var(--vh-font-color); + font-size: 1.5rem; + font-weight: 600; + line-height: 3.75rem; + text-align: right; + font-style: normal; + } + + &>i { + position: relative; + width: 2.5rem; + height: 100%; + + &::before { + content: ''; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + display: block; + width: 0.36rem; + height: 0.36rem; + border: solid 0.28rem #0000006D; + border-radius: 50%; + background-color: var(--vh-white-color); + transition: all .3s; + } + } + + &>span { + flex: 1; + white-space: nowrap; + overflow: hidden; + color: var(--vh-font-66); + font-weight: 500; + text-overflow: ellipsis; + transition: all .18s; + } + + &>cite { + margin-left: auto; + width: 7.8rem; + font-size: 0.875rem; + color: var(--vh-font-66); + font-weight: 400; + font-style: normal; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } } } } @@ -140,18 +136,15 @@ section.vh-container { - @media screen and (max-width: 1198px) { - section.vh-container { - &>section.vh-archive-main { - &>.archive-list { - &>.archive-list-item { + section.vh-archive-main { + &>.archive-list { + &>.archive-list-item { - &>p, - a { - &>cite { - display: none; - } + &>p, + a { + &>cite { + display: none; } } } @@ -160,40 +153,37 @@ section.vh-container { } @media screen and (max-width: 888px) { - section.vh-container { - &>section.vh-archive-main { - padding: 0; - background-color: transparent; + section.vh-archive-main { + padding: 0; + background-color: transparent; - &>.archive-list { - &>.archive-list-item { - - &>p, - a { - - &:not(.title) { - &>em { - font-size: var(--vh-size-h3); - } - - &>span { - font-size: var(--vh-size-h2); - } - } + &>.archive-list { + &>.archive-list-item { + &>p, + a { + &:not(.title) { &>em { - width: 3rem; - font-size: 1.2rem; - } - - &>i { - width: 1.8rem; + font-size: 0.8rem; } &>span { - font-size: var(--vh-size-h3); + font-size: 0.88rem; } } + + &>em { + width: 3rem; + font-size: 1.2rem; + } + + &>i { + width: 1.8rem; + } + + &>span { + font-size: 0.8rem; + } } } } diff --git a/src/components/ArticleCard/ArticleCard.astro b/src/components/ArticleCard/ArticleCard.astro index 22a0455..c372f68 100644 --- a/src/components/ArticleCard/ArticleCard.astro +++ b/src/components/ArticleCard/ArticleCard.astro @@ -13,13 +13,13 @@ import "./ArticleCard.less";
-
{post.data.title}
+
{post.data.title}
- {post.data.categories} -

{post.data.title}

+ {post.data.categories} +

{post.data.title}

-

{description}

+

{description}

{fmtTime(post.data.date)}
 diff --git a/src/components/ArticleCard/ArticleCard.less b/src/components/ArticleCard/ArticleCard.less index d206c21..690ebfa 100644 --- a/src/components/ArticleCard/ArticleCard.less +++ b/src/components/ArticleCard/ArticleCard.less @@ -1,226 +1,222 @@ -section.article-list { - flex: 1; +.article-list-main { position: relative; - padding-bottom: 6rem; - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1.6rem; + box-sizing: border-box; + padding-bottom: 6.88rem; width: 100%; - min-width: 0; height: max-content; - overflow: hidden; - &>.vh-article-item { - box-sizing: border-box; + &>section.article-list { + position: relative; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.288rem; width: 100%; - height: initial; - min-height: max-content; - border: solid 1px #eee; - border-radius: 1rem; - background-color: #fff; + min-width: 0; + height: max-content; overflow: hidden; - &>a.vh-article-link { - position: relative; + &>.vh-article-item { box-sizing: border-box; - display: flex; - flex-direction: column; width: 100%; - height: max-content; - min-height: 100%; - border-radius: 0.618rem; + height: initial; + min-height: max-content; + border: solid 1px #eee; + border-radius: 1rem; + background-color: #fff; overflow: hidden; - transition: background 0.16s; - &:hover { - &>.vh-article-banner { - &>img { - transform: scale(1.08); - } - } - } - - &.active { - &::before { - content: "置顶"; - position: absolute; - top: 1.6rem; - left: 0.66rem; - box-sizing: border-box; - padding: 0.18rem 1rem; - width: max-content; - height: max-content; - font-size: var(--vh-size-p); - color: #fff; - border-radius: 0.66rem; - transform: rotate(-45deg); - /* 确保元素有半透明背景 */ - background: #00000033; - box-shadow: 0 2rem 1rem rgba(0, 0, 0, 0.1); - z-index: 1; - /* 高斯模糊效果 */ - backdrop-filter: blur(6px); - -webkit-backdrop-filter: blur(6px); - /* 兼容旧版浏览器 */ - } - - &>.vh-article-banner { - &::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.06); - z-index: 1; - pointer-events: none; - } - } - } - - - &>.vh-article-banner { + &>a.vh-article-link { position: relative; - flex-shrink: 0; box-sizing: border-box; - width: 100%; - height: 12rem; - overflow: hidden; - - &>img { - width: 100%; - height: 100%; - object-fit: cover; - // transition公共区域有动画效果 - } - } - - - &>.vh-article-desc { - flex: 1; - box-sizing: border-box; - padding: 1.188rem; display: flex; flex-direction: column; width: 100%; - height: 100%; - min-height: max-content; + height: max-content; + min-height: 100%; + border-radius: 0.618rem; overflow: hidden; + transition: background 0.18s; - &>header { + &:hover { + &>.vh-article-banner { + &>img { + transform: scale(1.08); + } + } + } + + &.active { + &::before { + content: "置顶"; + position: absolute; + top: 1.6rem; + left: 0.66rem; + box-sizing: border-box; + padding: 0.18rem 1rem; + width: max-content; + height: max-content; + font-size: 1rem; + color: #fff; + border-radius: 0.66rem; + transform: rotate(-45deg); + /* 确保元素有半透明背景 */ + background: #00000033; + box-shadow: 0 2rem 1rem rgba(0, 0, 0, 0.1); + z-index: 1; + /* 高斯模糊效果 */ + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + /* 兼容旧版浏览器 */ + } + + &>.vh-article-banner { + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.06); + z-index: 1; + pointer-events: none; + } + } + } + + + &>.vh-article-banner { + flex-shrink: 0; + position: relative; + box-sizing: border-box; + width: 100%; + height: 12rem; + overflow: hidden; + + &>img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + + + &>.vh-article-desc { + flex: 1; + box-sizing: border-box; + padding: 1.188rem; display: flex; flex-direction: column; - gap: 0.36rem; - - &>.vh-article-categories { - box-sizing: border-box; - width: max-content; - font-size: var(--vh-size-span); - font-weight: 700; - /* 默认渐变色起始 */ - --gradient-color-1: #a32cc4; - /* 默认渐变色中间 */ - --gradient-color-2: #b65fcf; - /* 默认渐变色结束 */ - --gradient-color-3: #e39ff6; - background: linear-gradient(118deg, var(--gradient-color-1), var(--gradient-color-2) 26%, var(--gradient-color-3)); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - color: transparent; - - &.vh-categories-Code { - /* 默认渐变色起始 */ - --gradient-color-1: #f48600; - /* 默认渐变色中间 */ - --gradient-color-2: #ffa12e; - /* 默认渐变色结束 */ - --gradient-color-3: #ffe9c9; - } - - &.vh-categories-Daily { - /* 默认渐变色起始 */ - --gradient-color-1: #6270ee; - /* 默认渐变色中间 */ - --gradient-color-2: #2b90d9; - /* 默认渐变色结束 */ - --gradient-color-3: #37dede; - } - - &.vh-categories-Software { - /* 默认渐变色起始 */ - --gradient-color-1: #006633; - /* 默认渐变色中间 */ - --gradient-color-2: #00cc66; - /* 默认渐变色结束 */ - --gradient-color-3: #66ff99; - } - - &.vh-categories-Share { - /* 默认渐变色起始 */ - --gradient-color-1: rgb(240, 45, 133); - /* 默认渐变色中间 */ - --gradient-color-2: #f95ba5; - /* 默认渐变色结束 */ - --gradient-color-3: #f4bdd0; - } - } - - &>.title { - margin: 0; - font-size: var(--vh-size-h1); - font-weight: 600; - line-height: 1.36; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - text-overflow: ellipsis; - word-break: break-all; - overflow: hidden; - } - } - - &>.vh-article-excerpt { - margin: 0.88rem 0; width: 100%; - height: max-content; - color: var(--vh-black-66); - font-size: var(--vh-size-small); - letter-spacing: 0.88px; - line-height: 1.28rem; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - text-overflow: ellipsis; - word-break: break-all; + height: 100%; + min-height: max-content; overflow: hidden; - } - &>footer { - margin-top: auto; - font-size: var(--vh-size-mini); - color: var(--vh-black-100); + &>header { + display: flex; + flex-direction: column; + gap: 0.36rem; + + &>.vh-article-cat { + box-sizing: border-box; + width: max-content; + font-size: 0.875rem; + font-weight: 700; + /* 默认渐变色起始 */ + --gradient-color-1: #a32cc4; + /* 默认渐变色中间 */ + --gradient-color-2: #b65fcf; + /* 默认渐变色结束 */ + --gradient-color-3: #e39ff6; + background: linear-gradient(118deg, var(--gradient-color-1), var(--gradient-color-2) 26%, var(--gradient-color-3)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + color: transparent; + + &.vh-cat-Code { + /* 默认渐变色起始 */ + --gradient-color-1: #f48600; + /* 默认渐变色中间 */ + --gradient-color-2: #ffa12e; + /* 默认渐变色结束 */ + --gradient-color-3: #ffe9c9; + } + + &.vh-cat-Daily { + /* 默认渐变色起始 */ + --gradient-color-1: #6270ee; + /* 默认渐变色中间 */ + --gradient-color-2: #2b90d9; + /* 默认渐变色结束 */ + --gradient-color-3: #37dede; + } + + &.vh-cat-Software { + /* 默认渐变色起始 */ + --gradient-color-1: #006633; + /* 默认渐变色中间 */ + --gradient-color-2: #00cc66; + /* 默认渐变色结束 */ + --gradient-color-3: #66ff99; + } + + &.vh-cat-Share { + /* 默认渐变色起始 */ + --gradient-color-1: rgb(240, 45, 133); + /* 默认渐变色中间 */ + --gradient-color-2: #f95ba5; + /* 默认渐变色结束 */ + --gradient-color-3: #f4bdd0; + } + } + + &>.title { + font-size: 1.06rem; + font-weight: 600; + line-height: 1.36; + } + } + + &>.vh-article-excerpt { + margin: 0.88rem 0; + width: 100%; + height: max-content; + color: var(--vh-font-66); + font-size: 0.805rem; + letter-spacing: 0.88px; + line-height: 1.28rem; + } + + &>footer { + margin-top: auto; + font-size: 0.805rem; + color: var(--vh-font-color); + } } } } - } - &>.vh-article-pagination { - position: absolute; - bottom: 0; - right: 0; + &>.vh-article-pagination { + position: absolute; + bottom: 0; + right: 0; + } } } @media screen and (max-width: 1150px) { - section.article-list { - grid-template-columns: repeat(2, 1fr); + .article-list-main { + &>section.article-list { + grid-template-columns: repeat(2, 1fr); + } } } @media screen and (max-width: 556px) { - section.article-list { - grid-template-columns: repeat(1, 1fr); + .article-list-main { + &>section.article-list { + grid-template-columns: repeat(1, 1fr); + } } } \ No newline at end of file diff --git a/src/components/Aside/Aside.astro b/src/components/Aside/Aside.astro index 7983eab..a180678 100644 --- a/src/components/Aside/Aside.astro +++ b/src/components/Aside/Aside.astro @@ -7,13 +7,16 @@ import { Image } from "astro:assets"; import { fmtTime } from "@/utils/index"; // 获取用户配置数据 import SITE_CONFIG from "@/config"; -const { Avatar, Author, Motto, WebSites, GoogleAds } = SITE_CONFIG; +const { Avatar, Author, Motto, WebSites, GoogleAds, AsideShow } = SITE_CONFIG; // 获取文章数据 -import { getCategories, getTags, getRecommendArticles } from "@/utils/getPostInfo"; +import { getCategories, getTags, getRecommendArticles, getCountInfo } from "@/utils/getPostInfo"; +// 获取数据统计 // 分类列表 const categories = getCategories(); // 热门标签 -const tags = getTags(); +const tags = getTags().slice(0, 16); +// 获取网站统计数据 +const CountInfo = getCountInfo(); // 最新文章 const recommendArticles = getRecommendArticles(); // Google 广告组件 @@ -24,68 +27,107 @@ import "./Aside.less";