性能、逻辑、结构优化 ✅
This commit is contained in:
Han
+132
-142
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,13 +13,13 @@ import "./ArticleCard.less";
|
||||
|
||||
<article class="vh-article-item vh-animation vh-animation-init">
|
||||
<a class={`vh-article-link${post.data.top ? " active" : ""}`} href={`/article/${post.data.id}`}>
|
||||
<section class="vh-article-banner"><Image src="/assets/images/lazy-loading.webp" data-vh-lz-src={ARTICLE_COVER} alt={post.data.title} width="10" height="10" /></section>
|
||||
<section class="vh-article-banner"><Image src="/assets/images/lazy-loading.webp" data-vh-lz-src={ARTICLE_COVER} alt={post.data.title} width="1" height="1" /></section>
|
||||
<section class="vh-article-desc">
|
||||
<header>
|
||||
<span class={`vh-article-categories vh-categories-${post.data.categories}`}>{post.data.categories}</span>
|
||||
<h2 class="title">{post.data.title}</h2>
|
||||
<span class={`vh-article-cat vh-cat-${post.data.categories}`}>{post.data.categories}</span>
|
||||
<h2 class="title vh-ellipsis">{post.data.title}</h2>
|
||||
</header>
|
||||
<p class="vh-article-excerpt">{description}</p>
|
||||
<p class="vh-article-excerpt vh-ellipsis-2">{description}</p>
|
||||
<footer>{fmtTime(post.data.date)}</footer>
|
||||
</section>
|
||||
</a>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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";
|
||||
|
||||
<aside class="vh-aside">
|
||||
<!-- 头像块 -->
|
||||
<section class="vh-aside-item user">
|
||||
<Image class="vh-aside-avatar" src="/assets/images/lazy-loading.webp" data-vh-lz-src={Avatar} alt={Author} width="1" height="1" />
|
||||
<span class="vh-aside-auther">{Author}</span>
|
||||
<p class="vh-aside-motto">{Motto}</p>
|
||||
<section class="vh-aside-links">
|
||||
{
|
||||
WebSites.map(item => (
|
||||
<a class="vh-aside-links-item" href={item.link} title={item.text} target="_blank" rel="noopener nofollow">
|
||||
<Svg src={item.icon} />
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</section>
|
||||
</section>
|
||||
{
|
||||
AsideShow.WebSitesShow && (
|
||||
<section class="vh-aside-item user">
|
||||
<Image class="vh-aside-avatar" src="/assets/images/lazy-loading.webp" data-vh-lz-src={Avatar} alt={Author} width="1" height="1" />
|
||||
<span class="vh-aside-auther">{Author}</span>
|
||||
<p class="vh-aside-motto">{Motto}</p>
|
||||
<section class="vh-aside-links">
|
||||
{WebSites.map(item => (
|
||||
<a class="vh-aside-links-item" href={item.link} title={item.text} target="_blank" rel="noopener nofollow">
|
||||
<Svg src={item.icon} />
|
||||
</a>
|
||||
))}
|
||||
</section>
|
||||
<section class="vh-aside-info">
|
||||
<div class="art-item count">
|
||||
<span>{CountInfo.ArticleCount}</span>
|
||||
<p>文章数</p>
|
||||
</div>
|
||||
<div class="cat-item count">
|
||||
<span>{CountInfo.CategoryCount}</span>
|
||||
<p>分类数</p>
|
||||
</div>
|
||||
<div class="tag-item count">
|
||||
<span>{CountInfo.TagCount}</span>
|
||||
<p>标签数</p>
|
||||
</div>
|
||||
</section>
|
||||
<canvas class="vh-aside-canvas" width="888" height="1888" />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
<!-- 公告块 -->
|
||||
{
|
||||
AsideShow.TipsShow && (
|
||||
<section class="vh-aside-item tips">
|
||||
<span>
|
||||
<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 stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M3 9.662c2 2.338 2 4.338 0 6.338c3 .5 4.5 1 5 4c2 -3 6 -4 9 0c0 -3 1 -4 4 -4.004q -3 -2.995 0 -5.996c-3 0 -5 -2 -5 -5c-2 4 -5 3 -7.5 -1c-.5 3 -2.5 5 -5.5 5.662" />
|
||||
</svg>
|
||||
公告
|
||||
</span>
|
||||
<div class="tips-content">
|
||||
<p>欢迎访问我的博客，我是一名前端工程师，喜欢分享前端知识和技巧。</p>
|
||||
<p>如果你对我的博客感兴趣，欢迎关注我的公众号，我会定期发布一些前端技术文章和教程。</p>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
<!-- 分类块 -->
|
||||
<section class="vh-aside-item categories">
|
||||
<h3>分类</h3>
|
||||
<div class="vh-aside-categories">
|
||||
{
|
||||
categories
|
||||
.sort((a: any, b: any) => b.count - a.count)
|
||||
.map(i => (
|
||||
<a href={`/categories/${i.title}`}>
|
||||
<span>{i.title}</span>
|
||||
<i>{i.count}</i>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
{
|
||||
AsideShow.CategoriesShow && (
|
||||
<section class="vh-aside-item cat">
|
||||
<h3>分类</h3>
|
||||
<div class="vh-aside-cat">
|
||||
{categories
|
||||
.sort((a: any, b: any) => b.count - a.count)
|
||||
.map(i => (
|
||||
<a href={`/categories/${i.title}`}>
|
||||
<span>{i.title}</span>
|
||||
<i>{i.count}</i>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
<!-- 标签块 -->
|
||||
<section class="vh-aside-item tags">
|
||||
<h3>热门标签</h3>
|
||||
<div class="vh-aside-tags">
|
||||
{
|
||||
tags.map(i => (
|
||||
<a href={`/tag/${i}`}>
|
||||
<span>{i}</span>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
{
|
||||
AsideShow.TagsShow && (
|
||||
<section class="vh-aside-item tags">
|
||||
<h3>热门标签</h3>
|
||||
<div class="vh-aside-tags">
|
||||
{tags.map(i => (
|
||||
<a href={`/tag/${i[0]}`}>
|
||||
<span>{i[0]}</span>
|
||||
<em>{i[1]}</em>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
<section class="sticky-aside">
|
||||
<!-- 最新文章块 -->
|
||||
{
|
||||
recommendArticles.length && (
|
||||
recommendArticles.length && AsideShow.recommendArticleShow && (
|
||||
<section class="vh-aside-item articles">
|
||||
<h3>推荐文章</h3>
|
||||
<div class="vh-aside-articles">
|
||||
{recommendArticles.map(async i => (
|
||||
<a href={`/article/${(await i).id}`}>
|
||||
<p class="cover">
|
||||
<Image src="/assets/images/lazy-loading.webp" data-vh-lz-src={(await i).cover} alt={(await i).title} width="1" height="1" />
|
||||
</p>
|
||||
<p class="info">
|
||||
<span>{(await i).title}</span>
|
||||
<time>{fmtTime((await i).date, "YYYY-MM-DD A")}</time>
|
||||
</p>
|
||||
{recommendArticles.map((i, idx) => (
|
||||
<a href={`/article/${i.id}`}>
|
||||
<span>
|
||||
{idx < 3 ? <i>{idx + 1}</i> : <em>{idx + 1}.</em>}
|
||||
<cite class="vh-ellipsis">{i.title}</cite>
|
||||
</span>
|
||||
<time>{fmtTime(i.date, "YYYY-MM-DD A")}</time>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
+194
-95
@@ -1,26 +1,29 @@
|
||||
aside.vh-aside {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0.88rem 0.66rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: 288px;
|
||||
height: initial;
|
||||
width: var(--vh-aside-width);
|
||||
height: auto;
|
||||
|
||||
&>.sticky-aside {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: var(--vh-padding-top);
|
||||
top: calc(66px + 1rem);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.vh-aside-item {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0.75rem;
|
||||
padding: 1.28rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -28,28 +31,16 @@ aside.vh-aside {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: max-content;
|
||||
border-radius: 1rem;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
border-radius: var(--vh-main-radius);
|
||||
background-color: var(--vh-white-color);
|
||||
box-shadow: var(--vh-box-shadow);
|
||||
overflow: hidden;
|
||||
|
||||
&>h3 {
|
||||
padding-bottom: 0.618rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.68rem;
|
||||
width: 100%;
|
||||
font-size: var(--vh-size-h1);
|
||||
font-weight: 600;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 0.25rem;
|
||||
height: 1.16rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--vh-main-color-88);
|
||||
}
|
||||
font-size: 0.68rem;
|
||||
font-weight: 400;
|
||||
color: var(--vh-font-56);
|
||||
}
|
||||
|
||||
// 用户信息
|
||||
@@ -84,7 +75,7 @@ aside.vh-aside {
|
||||
|
||||
&>.vh-aside-motto {
|
||||
font-size: 0.86rem;
|
||||
color: var(--vh-black-66);
|
||||
color: var(--vh-font-66);
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -102,12 +93,15 @@ aside.vh-aside {
|
||||
width: 1.88rem;
|
||||
height: 1.88rem;
|
||||
border: solid 1px #333;
|
||||
background-color: #fff;
|
||||
background-color: var(--vh-white-color);
|
||||
border-radius: 0.38rem;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
&:hover {
|
||||
color: var(--vh-white-color);
|
||||
border-color: var(--vh-white-color);
|
||||
|
||||
&::after {
|
||||
height: 100%;
|
||||
}
|
||||
@@ -121,7 +115,7 @@ aside.vh-aside {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
background-color: var(--vh-main-color-88);
|
||||
transition: height 0.16s ease-in-out;
|
||||
transition: height 0.18s ease-in-out;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@@ -133,11 +127,90 @@ aside.vh-aside {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>.vh-aside-info {
|
||||
box-sizing: border-box;
|
||||
padding: 0 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
|
||||
&>.count {
|
||||
box-sizing: border-box;
|
||||
padding: 1rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 0.66rem;
|
||||
text-align: center;
|
||||
background: var(--vh-white-color);
|
||||
border-radius: var(--vh-main-radius);
|
||||
user-select: none;
|
||||
transition: box-shadow 0.18s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--vh-box-shadow);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&>span {
|
||||
font-size: 1.05rem;
|
||||
color: var(--vh-font-color);
|
||||
}
|
||||
|
||||
&>p {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vh-font-56);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>.vh-aside-canvas {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 公告
|
||||
&.tips {
|
||||
align-items: flex-start;
|
||||
|
||||
&>span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.288rem;
|
||||
font-size: 1rem;
|
||||
|
||||
&>svg {
|
||||
margin-bottom: 0.188rem;
|
||||
color: var(--vh-main-color);
|
||||
width: 1.18rem;
|
||||
height: 1.18rem;
|
||||
object-fit: contain;
|
||||
animation: talking-tag-active 0.18s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
&>.tips-content {
|
||||
font-size: 0.88rem;
|
||||
|
||||
p {
|
||||
padding: 0.28rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 分类
|
||||
&.categories {
|
||||
&>.vh-aside-categories {
|
||||
&.cat {
|
||||
&>.vh-aside-cat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
@@ -149,20 +222,21 @@ aside.vh-aside {
|
||||
&>a {
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0.5rem 0.28rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 2.36rem;
|
||||
height: 2.18rem;
|
||||
font-size: 0.88rem;
|
||||
border-radius: 0.38rem;
|
||||
background-color: #fff;
|
||||
transition: all 0.16s ease-in-out;
|
||||
background-color: var(--vh-white-color);
|
||||
transition: all 0.18s ease-in-out;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
padding-left: 0.66rem;
|
||||
background-color: var(--vh-main-color-66);
|
||||
color: var(--vh-white-color);
|
||||
|
||||
&>i {
|
||||
background-color: transparent;
|
||||
@@ -173,13 +247,14 @@ aside.vh-aside {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 1.75rem;
|
||||
font-size: var(--vh-size-span);
|
||||
width: 1.68rem;
|
||||
height: 1.28rem;
|
||||
color: var(--vh-white-color);
|
||||
font-size: 0.66rem;
|
||||
font-style: normal;
|
||||
border-radius: 0.38rem;
|
||||
background-color: var(--vh-main-color-66);
|
||||
transition: background 0.16s ease-in-out;
|
||||
transition: background 0.18s ease-in-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@@ -191,35 +266,39 @@ aside.vh-aside {
|
||||
&>.vh-aside-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
gap: 0.68rem 1rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
overflow: hidden;
|
||||
|
||||
&>a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.18rem;
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
|
||||
&:hover {
|
||||
&>span {
|
||||
background-color: var(--vh-main-color);
|
||||
color: var(--vh-main-color);
|
||||
}
|
||||
}
|
||||
|
||||
&>span {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.618rem;
|
||||
width: max-content;
|
||||
height: 1.75rem;
|
||||
border-radius: 0.38rem;
|
||||
background-color: var(--vh-main-color-38);
|
||||
font-size: var(--vh-size-span);
|
||||
font-style: normal;
|
||||
line-height: 1.75rem;
|
||||
transition: background 0.16s ease-in-out;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
transition: color 0.18s ease-in-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&>em {
|
||||
// display: none;
|
||||
color: var(--vh-font-28);
|
||||
font-size: 0.688rem;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -236,73 +315,93 @@ aside.vh-aside {
|
||||
|
||||
&>a {
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.625rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 4.6rem;
|
||||
border-bottom: 1px dashed #f3f2f2;
|
||||
height: 2.68rem;
|
||||
overflow: hidden;
|
||||
|
||||
&:nth-last-of-type(1) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&>span {
|
||||
&>cite {
|
||||
color: var(--vh-main-color);
|
||||
|
||||
&>p {
|
||||
&>img {
|
||||
transform: scale(1.2);
|
||||
&::after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>p {
|
||||
&:nth-of-type(2) {
|
||||
&>span {
|
||||
&>i {
|
||||
background-color: var(--vh-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
&>span {
|
||||
&>i {
|
||||
background-color: var(--vh-import);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>span {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
gap: 0.618rem;
|
||||
width: 100%;
|
||||
|
||||
&.cover {
|
||||
flex-shrink: 0;
|
||||
width: 3.88rem;
|
||||
height: 3.88rem;
|
||||
border-radius: 0.288rem;
|
||||
overflow: hidden;
|
||||
&>cite {
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
border-bottom: 1px solid transparent;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
font-style: normal;
|
||||
transition: color 0.288s ease-in-out;
|
||||
|
||||
&>img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.16s ease-in-out;
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background-color: var(--vh-main-color);
|
||||
transition: width 0.58s cubic-bezier(.6, .1, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&>i {
|
||||
flex-shrink: 0;
|
||||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
border-radius: 0.18rem;
|
||||
color: var(--vh-white-color);
|
||||
text-align: center;
|
||||
font-size: 0.66rem;
|
||||
font-style: normal;
|
||||
background-color: var(--vh-success);
|
||||
}
|
||||
|
||||
|
||||
&>span {
|
||||
width: 100%;
|
||||
font-size: var(--vh-size-h3);
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&>time {
|
||||
color: #858585;
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
&>em {
|
||||
flex-shrink: 0;
|
||||
width: max-content;
|
||||
font-style: normal;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--vh-font-66);
|
||||
}
|
||||
}
|
||||
|
||||
&>time {
|
||||
color: var(--vh-font-56);
|
||||
font-size: 0.688rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@ section.vh-back-top {
|
||||
height: 2.6rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #e5e7eb;
|
||||
background-color: #fff;
|
||||
background-color: var(--vh-white-color);
|
||||
transform: translateX(1rem);
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
|
||||
@@ -4,13 +4,13 @@
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
background-color: var(--vh-white-color);
|
||||
box-shadow: var(--vh-box-shadow);
|
||||
overflow: hidden;
|
||||
|
||||
// 评论样式
|
||||
.twikoo {
|
||||
font-size: var(--vh-size-h2);
|
||||
font-size: 0.88rem;
|
||||
|
||||
img:not(.tk-avatar-img) {
|
||||
cursor: pointer;
|
||||
@@ -28,7 +28,7 @@
|
||||
ol {
|
||||
li {
|
||||
color: #33333388;
|
||||
font-size: var(--vh-size-span);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
|
||||
:not(pre) {
|
||||
&>code {
|
||||
background-color: var(--vh-black-16);
|
||||
background-color: var(--vh-font-16);
|
||||
padding: .125rem .375rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
@@ -53,19 +53,19 @@
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--vh-black-100);
|
||||
color: var(--vh-font-color);
|
||||
font-weight: 400;
|
||||
font-size: var(--vh-size-span);
|
||||
font-size: 0.875rem;
|
||||
line-height: 28px;
|
||||
|
||||
|
||||
a {
|
||||
color: var(--vh-black-56);
|
||||
box-shadow: inset 0 -.12rem #60a5fa;
|
||||
color: var(--vh-font-56);
|
||||
box-shadow: inset 0 -.12rem var(--vh-main-color);
|
||||
transition: box-shadow .2s ease-in-out, color .2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 -1.5rem #60a5fa66;
|
||||
box-shadow: inset 0 -1.5rem var(--vh-main-color-38);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -78,7 +78,7 @@
|
||||
}
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
color: var(--vh-white-color);
|
||||
}
|
||||
|
||||
.tk-admin-warn p {
|
||||
@@ -190,7 +190,7 @@
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
border-radius: 50%;
|
||||
background: #fff url("/public/assets/images/admin.svg") no-repeat;
|
||||
background: var(--vh-white-color) url("/public/assets/images/admin.svg") no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
@@ -215,7 +215,7 @@
|
||||
|
||||
&>.tk-nick {
|
||||
position: relative;
|
||||
color: var(--vh-black-100);
|
||||
color: var(--vh-font-color);
|
||||
line-height: 1.18rem;
|
||||
|
||||
&.tk-nick-link {
|
||||
@@ -229,7 +229,7 @@
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background-color: var(--vh-black-88);
|
||||
background-color: var(--vh-font-88);
|
||||
transition: all 0.28s;
|
||||
}
|
||||
|
||||
@@ -292,7 +292,7 @@
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
border-radius: 0.2rem;
|
||||
background-color: var(--vh-black-6);
|
||||
background-color: var(--vh-font-6);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -324,7 +324,7 @@
|
||||
// 头像尺寸和圆角
|
||||
--waline-avatar-size: 2.56rem;
|
||||
--waline-avatar-radius: 0.58rem;
|
||||
font-size: var(--vh-size-h2);
|
||||
font-size: 0.88rem;
|
||||
|
||||
.wl-comment {
|
||||
.wl-panel {
|
||||
@@ -350,8 +350,8 @@
|
||||
|
||||
&>.wl-head {
|
||||
.wl-nick {
|
||||
color: var(--vh-black-100);
|
||||
font-size: var(--vh-size-h2);
|
||||
color: var(--vh-font-color);
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.18;
|
||||
|
||||
&::after {
|
||||
@@ -362,7 +362,7 @@
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background-color: var(--vh-black-88);
|
||||
background-color: var(--vh-font-88);
|
||||
transition: all 0.28s;
|
||||
}
|
||||
|
||||
@@ -389,8 +389,8 @@
|
||||
|
||||
p {
|
||||
padding: 0.18rem 0;
|
||||
color: var(--vh-black-100);
|
||||
font-size: var(--vh-size-span);
|
||||
color: var(--vh-font-color);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
@@ -400,7 +400,7 @@
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--vh-black-100);
|
||||
color: var(--vh-font-color);
|
||||
font-size: 0.76rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -415,7 +415,7 @@
|
||||
// item 中 wl-card 虚线间距
|
||||
&>.wl-card {
|
||||
padding-bottom: 1.25rem;
|
||||
border-bottom-color: var(--vh-black-16);
|
||||
border-bottom-color: var(--vh-font-16);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -448,7 +448,7 @@
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--vh-black-56);
|
||||
color: var(--vh-font-56);
|
||||
line-height: 1.288;
|
||||
}
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
position: relative;
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
color: #33333388;
|
||||
color: var(--vh-font-56) !important;
|
||||
box-shadow: none !important;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: #60a5fa;
|
||||
background-color: var(--vh-main-color);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
font-size: 0.875rem !important;
|
||||
|
||||
&>span {
|
||||
color: #9CC5FB;
|
||||
color: var(--vh-main-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
width: max-content;
|
||||
height: 100%;
|
||||
line-height: 1.25rem;
|
||||
color: #fff;
|
||||
color: var(--vh-white-color);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@@ -96,11 +96,11 @@
|
||||
&.text {
|
||||
&>p {
|
||||
|
||||
font-size: var(--vh-size-h2);
|
||||
font-size: 0.88rem;
|
||||
|
||||
&>a {
|
||||
color: #94A3B8;
|
||||
transition: opacity 0.16s ease-in-out;
|
||||
transition: opacity 0.18s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.88;
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
---
|
||||
// 当前路由
|
||||
const { activeNav } = Astro.props;
|
||||
// 站点配置
|
||||
import SITE_CONFIG from "@/config";
|
||||
const { Navs } = SITE_CONFIG;
|
||||
// Svg 组件
|
||||
@@ -11,24 +14,22 @@ import "./Header.less";
|
||||
|
||||
<header class="vh-header">
|
||||
<section class="main">
|
||||
<a href="/" class="index">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-smart-home"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M19 8.71l-5.333 -4.148a2.666 2.666 0 0 0 -3.274 0l-5.334 4.148a2.665 2.665 0 0 0 -1.029 2.105v7.2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-7.2c0 -.823 -.38 -1.6 -1.03 -2.105"></path><path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0"></path></svg>
|
||||
<a href="/" class="home vh-hover">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M19 8.71l-5.333 -4.148a2.666 2.666 0 0 0 -3.274 0l-5.334 4.148a2.665 2.665 0 0 0 -1.029 2.105v7.2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-7.2c0 -.823 -.38 -1.6 -1.03 -2.105"></path><path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0"></path></svg>
|
||||
<span>Home</span>
|
||||
</a>
|
||||
<div class="link-list vh-link-list">
|
||||
<nav>
|
||||
{
|
||||
Navs.map(i => (
|
||||
<a class={i.link.replace("/", "")} href={i.link} target={i.target ? "_blank" : "_self"}>
|
||||
<a class={`nav-link vh-hover${i.link.includes(activeNav) ? " active" : ""}`} href={i.link} target={i.target ? "_blank" : "_self"}>
|
||||
{i.text}
|
||||
<Svg src={i.icon} />
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div class="nav-btn">
|
||||
<span class="nav-btn-item search-btn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path></svg> 搜索</span>
|
||||
<span class="nav-btn-item menu-btn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"></path></svg></span>
|
||||
</div>
|
||||
<span class="nav-link vh-hover search-btn"><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 stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg> 搜索</span>
|
||||
<span class="nav-link vh-hover menu-btn"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 6h16"></path><path d="M7 12h13"></path><path d="M10 18h10"></path></svg></span>
|
||||
</nav>
|
||||
<Search />
|
||||
</section>
|
||||
</header>
|
||||
</header>
|
||||
@@ -3,70 +3,46 @@ header.vh-header {
|
||||
left: 0;
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: 3.6rem;
|
||||
background-color: var(--vh-white-6);
|
||||
height: 66px;
|
||||
backdrop-filter: blur(2rem);
|
||||
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
background-color: rgba(255, 255, 255, 0.36);
|
||||
box-shadow: var(--vh-box-shadow);
|
||||
transition: background-color 0.18s ease-in-out;
|
||||
z-index: 9;
|
||||
|
||||
&>section.main {
|
||||
position: relative;
|
||||
&>section {
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
padding: 0 1rem;
|
||||
padding: 0 0.88rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
height: 100%;
|
||||
max-width: var(--vh-main-max-width);
|
||||
|
||||
a,
|
||||
span.nav-btn-item {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
&>.home {
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.5rem;
|
||||
padding: 0.266rem 0.188rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
gap: 0.618rem;
|
||||
width: max-content;
|
||||
height: 80%;
|
||||
font-size: var(--vh-size-p);
|
||||
font-weight: 700;
|
||||
z-index: 1;
|
||||
transition: all 0.08s ease-in-out;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
height: max-content;
|
||||
color: var(--vh-font-color);
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
transform: scale(1.2);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
opacity: 0;
|
||||
&>span {
|
||||
color: var(--vh-white-color);
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--vh-main-color);
|
||||
opacity: 0;
|
||||
transition: transform 0.16s ease-in-out, opacity 0.16s ease-in-out;
|
||||
z-index: -1;
|
||||
&>span {
|
||||
font-size: 0.98rem;
|
||||
font-weight: 600;
|
||||
padding-top: 0.188rem;
|
||||
transition: all 0.1s;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&>svg {
|
||||
@@ -74,123 +50,63 @@ header.vh-header {
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
&.index {
|
||||
padding-right: 2rem;
|
||||
|
||||
&>span {
|
||||
box-sizing: border-box;
|
||||
padding-top: 0.188rem;
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
font-size: 1.088rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.search-btn {
|
||||
&>svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>.link-list,
|
||||
&>.nav-btn {
|
||||
flex: 1;
|
||||
&>nav {
|
||||
box-sizing: border-box;
|
||||
padding-right: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 0.88rem;
|
||||
margin-left: auto;
|
||||
gap: 1.18rem;
|
||||
height: 100%;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
|
||||
&:nth-last-of-type(1) {
|
||||
padding-right: 0;
|
||||
}
|
||||
&>.nav-link {
|
||||
box-sizing: border-box;
|
||||
padding: 0.288rem 0.36rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.28rem;
|
||||
line-height: inherit;
|
||||
height: max-content;
|
||||
font-size: 0.98rem;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
|
||||
&>a,
|
||||
&>span {
|
||||
&.active {
|
||||
pointer-events: none;
|
||||
&.search-btn,
|
||||
&.menu-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
&.menu-btn {
|
||||
display: none;
|
||||
|
||||
&>svg {
|
||||
height: 1.28rem;
|
||||
}
|
||||
}
|
||||
|
||||
&>svg {
|
||||
pointer-events: none;
|
||||
height: 1rem;
|
||||
width: auto;
|
||||
height: 1.18rem;
|
||||
object-fit: contain;
|
||||
stroke: var(--vh-black-88);
|
||||
stroke-width: 2.88px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>.nav-btn {
|
||||
flex: none;
|
||||
width: max-content;
|
||||
|
||||
&>.menu-btn {
|
||||
display: none;
|
||||
|
||||
&>svg {
|
||||
box-sizing: border-box;
|
||||
padding: 0.36rem;
|
||||
width: 1.88rem;
|
||||
height: 1.88rem;
|
||||
border: 1px solid var(--vh-black-16);
|
||||
border-radius: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 888px) {
|
||||
header.vh-header {
|
||||
padding: 0;
|
||||
|
||||
&>section.main {
|
||||
a {
|
||||
font-size: var(--vh-size-span);
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
&>svg {
|
||||
width: 1.18rem;
|
||||
height: 1.18rem;
|
||||
}
|
||||
}
|
||||
|
||||
&>.link-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 888px) {
|
||||
header.vh-header {
|
||||
&>section.main {
|
||||
&>.nav-btn {
|
||||
&>.menu-btn {
|
||||
&>section {
|
||||
&>nav {
|
||||
&>a.nav-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&>.menu-btn.nav-link {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
import SITE_INFO from "@/config";
|
||||
import "./MainHeader.less";
|
||||
---
|
||||
|
||||
<div class="header-main">
|
||||
<div class="avatar">
|
||||
<img src="/assets/images/lazy-loading.webp" data-vh-lz-src={SITE_INFO.Avatar} alt="avatar" />
|
||||
</div>
|
||||
<h3 class="auther">{SITE_INFO.Author || "-"}</h3>
|
||||
<p class="desc"></p>
|
||||
</div>
|
||||
@@ -0,0 +1,105 @@
|
||||
.header-main {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 0.88rem;
|
||||
width: 100%;
|
||||
height: var(--vh-main-header-height);
|
||||
transition: height 0.3s ease-in-out;
|
||||
z-index: 1;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background: var(--vh-home-banner) no-repeat top center;
|
||||
background-size: cover;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&>.avatar {
|
||||
width: 8.5rem;
|
||||
height: 8.5rem;
|
||||
border: 2px solid var(--vh-white-color);
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(18.88deg);
|
||||
}
|
||||
|
||||
&>img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&>.auther {
|
||||
padding-top: 1.88rem;
|
||||
font-size: 1.88rem;
|
||||
font-weight: 600;
|
||||
color: var(--vh-white-color);
|
||||
}
|
||||
|
||||
&>.desc {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0.66rem 0.66rem 0;
|
||||
width: 100%;
|
||||
max-width: 26rem;
|
||||
height: max-content;
|
||||
color: var(--vh-white-color);
|
||||
text-align: center;
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.5rem;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
opacity: .5;
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgb(0 0 0 / 70%)), color-stop(35%, var(--vh-white-color)), color-stop(65%, var(--vh-white-color)), color-stop(100%, rgb(0 0 0 / 70%)));
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "|";
|
||||
padding-left: 0.188rem;
|
||||
display: inline-block;
|
||||
animation: blink 1s infinite;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1150px) {
|
||||
.header-main {
|
||||
height: 26rem;
|
||||
|
||||
&>.avatar {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
}
|
||||
|
||||
&>.auther {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -7,7 +7,7 @@
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(0, 0, 0, 0.26);
|
||||
overflow: hidden;
|
||||
transition: opacity 0.16s ease-in-out, z-index 0.16s ease-in-out;
|
||||
transition: opacity 0.18s ease-in-out;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
@@ -38,9 +38,9 @@
|
||||
width: 100%;
|
||||
max-width: 17.6rem;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
background-color: var(--vh-white-color);
|
||||
transform: translateX(-1rem);
|
||||
transition: transform 0.16s ease-in;
|
||||
transition: transform 0.18s ease-in;
|
||||
overflow: hidden;
|
||||
|
||||
&>.vh-mobilesidebar-list {
|
||||
@@ -69,7 +69,7 @@
|
||||
gap: 0.618rem;
|
||||
width: 100%;
|
||||
height: 2.25rem;
|
||||
font-size: var(--vh-size-p);
|
||||
font-size: 1rem;
|
||||
color: #66758c;
|
||||
font-weight: 600;
|
||||
border-radius: 0.375rem;
|
||||
@@ -87,11 +87,11 @@
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: #fff;
|
||||
background-color: #3366FF;
|
||||
color: var(--vh-white-color);
|
||||
background-color: var(--vh-main-color);
|
||||
|
||||
&>svg {
|
||||
stroke: #fff;
|
||||
stroke: var(--vh-white-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
width: auto;
|
||||
height: 0.888rem;
|
||||
object-fit: contain;
|
||||
transition: stroke 0.16s ease-in-out;
|
||||
transition: stroke 0.18s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,12 +6,10 @@ import { fmtPage } from "@/utils/index";
|
||||
import "./Pagination.less";
|
||||
---
|
||||
|
||||
<section class="vh-article-pagination">
|
||||
<section class="vh-art-page">
|
||||
<!-- 上一页 -->
|
||||
<a class={`vh-pagination-item${!data.prev ? " disabled" : ""}`} href={data.prev || "javascript:;"} title="上一页">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
|
||||
<path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"></path>
|
||||
</svg>
|
||||
<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 stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M15 6l-6 6l6 6"></path></svg>
|
||||
</a>
|
||||
<!-- 首页 -->
|
||||
{
|
||||
@@ -49,8 +47,6 @@ import "./Pagination.less";
|
||||
}
|
||||
<!-- 下一页 -->
|
||||
<a class={`vh-pagination-item${!data.next ? " disabled" : ""}`} href={data.next || "javascript:;"} title="下一页">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
|
||||
<path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"></path>
|
||||
</svg>
|
||||
<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 stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 6l6 6l-6 6"></path></svg>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
section.vh-article-pagination {
|
||||
section.vh-art-page {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
bottom: 0.88rem;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
@@ -10,6 +10,7 @@ section.vh-article-pagination {
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
overflow: hidden;
|
||||
|
||||
&>a.vh-pagination-item {
|
||||
display: flex;
|
||||
@@ -18,20 +19,21 @@ section.vh-article-pagination {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
font-size: var(--vh-size-span);
|
||||
background-color: var(--vh-white-color);
|
||||
box-shadow: var(--vh-box-shadow);
|
||||
font-size: 0.875rem;
|
||||
color: #99a9bf;
|
||||
user-select: none;
|
||||
transition: background-color 0.16s ease-in-out;
|
||||
transition: background-color 0.18s ease-in-out;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
color: var(--vh-white-color);
|
||||
background-color: rgba(129, 146, 174, 0.36);
|
||||
|
||||
&>svg {
|
||||
fill: #fff;
|
||||
color: var(--vh-white-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -39,22 +41,21 @@ section.vh-article-pagination {
|
||||
background-color: #8192AE;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
color: #fff;
|
||||
color: var(--vh-white-color);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
|
||||
&>svg {
|
||||
fill: #E8E8E8;
|
||||
color: #E8E8E8;
|
||||
}
|
||||
}
|
||||
|
||||
&>svg {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
fill: #99a9bf;
|
||||
transition: fill 0.16s ease-in-out;
|
||||
height: 1.18rem;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -7,8 +7,9 @@
|
||||
gap: 0.88rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
border-radius: var(--vh-main-radius);
|
||||
background-color: var(--vh-white-color);
|
||||
box-shadow: var(--vh-box-shadow);
|
||||
|
||||
&>p {
|
||||
padding: 0 !important;
|
||||
@@ -36,9 +37,9 @@
|
||||
width: max-content;
|
||||
height: 2rem;
|
||||
border-radius: 0.28rem;
|
||||
color: #fff;
|
||||
color: var(--vh-white-color);
|
||||
cursor: pointer;
|
||||
transition: opacity 0.16s, transform 0.16s;
|
||||
transition: opacity 0.18s, transform 0.18s;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
@@ -82,8 +83,8 @@
|
||||
background-size: cover;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
transition: opacity 0.16s, transform 0.16s;
|
||||
|
||||
transition: opacity 0.18s, transform 0.18s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
flex-direction: column;
|
||||
background-color: rgba(0, 0, 0, 0.26);
|
||||
overflow: hidden;
|
||||
transition: opacity 0.16s ease-in-out;
|
||||
transition: opacity 0.18s ease-in-out;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
@@ -37,10 +37,10 @@
|
||||
height: max-content;
|
||||
max-height: 88vh;
|
||||
border-radius: 1rem;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
background-color: var(--vh-white-color);
|
||||
|
||||
transform: translateY(-1rem);
|
||||
transition: transform 0.16s;
|
||||
transition: transform 0.18s;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
@@ -53,11 +53,10 @@
|
||||
gap: 0.28rem;
|
||||
width: 100%;
|
||||
height: 2.425rem;
|
||||
background-color: var(--vh-white-100);
|
||||
background-color: var(--vh-font-6);
|
||||
border-radius: 0.66rem;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
&>svg {
|
||||
flex-shrink: 0;
|
||||
width: 1.28rem;
|
||||
@@ -69,13 +68,13 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
color: var(--vh-black-88);
|
||||
font-size: var(--vh-size-span);
|
||||
color: var(--vh-font-88);
|
||||
font-size: 0.875rem;
|
||||
background-color: transparent;
|
||||
transition: width 0.16s ease-in-out;
|
||||
transition: width 0.18s ease-in-out;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--vh-black-88);
|
||||
color: var(--vh-font-88);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -86,7 +85,7 @@
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
background-color: #fff;
|
||||
background-color: var(--vh-white-color);
|
||||
user-select: none;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
@@ -117,9 +116,9 @@
|
||||
|
||||
&>span {
|
||||
width: 100%;
|
||||
font-size: var(--vh-size-h1);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--vh-black-100);
|
||||
color: var(--vh-font-color);
|
||||
line-height: 1.16;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -128,8 +127,8 @@
|
||||
|
||||
&>p {
|
||||
width: 100%;
|
||||
font-size: var(--vh-size-span);
|
||||
color: var(--vh-black-56);
|
||||
font-size: 0.875rem;
|
||||
color: var(--vh-font-56);
|
||||
font-weight: 400;
|
||||
line-height: 1.25rem;
|
||||
display: -webkit-box;
|
||||
|
||||
Reference in New Issue
Block a user