优化性能、逻辑、冗余代码【2.0 版本】✅
This commit is contained in:
Han
@@ -1,8 +1,8 @@
|
||||
---
|
||||
import { fmtTime } from "../utils/index";
|
||||
import { fmtTime } from "@/utils/index";
|
||||
const { articleList } = Astro.props;
|
||||
// 文章页面样式
|
||||
import "../styles/Archive.less";
|
||||
import "./Archive.less";
|
||||
---
|
||||
|
||||
<section class="vh-archive-main vh-animation vh-animation-init">
|
||||
@@ -0,0 +1,201 @@
|
||||
section.vh-container {
|
||||
&>section.vh-archive-main {
|
||||
flex: 1;
|
||||
padding: 2rem 1rem;
|
||||
border-radius: 1rem;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
|
||||
&>.archive-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
|
||||
&>.archive-list-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&>p,
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 1rem;
|
||||
transition: background .16s;
|
||||
|
||||
|
||||
&:not(.title) {
|
||||
|
||||
&:hover {
|
||||
background-color: var(--vh-color-default-88);
|
||||
|
||||
&>i {
|
||||
&::before {
|
||||
height: 50.66%;
|
||||
}
|
||||
}
|
||||
|
||||
&>span {
|
||||
padding-left: 0.28rem;
|
||||
}
|
||||
}
|
||||
|
||||
&>em {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #00000080;
|
||||
}
|
||||
|
||||
&>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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&>span {
|
||||
font-size: 1rem;
|
||||
color: #000000;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&>em {
|
||||
flex-shrink: 0;
|
||||
width: 5.05rem;
|
||||
height: 3.75rem;
|
||||
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: #fff;
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
|
||||
&>span {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
color: #0000004D;
|
||||
font-weight: 500;
|
||||
text-overflow: ellipsis;
|
||||
transition: all .16s;
|
||||
}
|
||||
|
||||
&>cite {
|
||||
margin-left: auto;
|
||||
width: 7.8rem;
|
||||
font-size: 0.875rem;
|
||||
color: #0000004D;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1198px) {
|
||||
section.vh-container {
|
||||
&>section.vh-archive-main {
|
||||
&>.archive-list {
|
||||
&>.archive-list-item {
|
||||
|
||||
&>p,
|
||||
a {
|
||||
&>cite {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 888px) {
|
||||
section.vh-container {
|
||||
&>section.vh-archive-main {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
|
||||
&>.archive-list {
|
||||
&>.archive-list-item {
|
||||
|
||||
&>p,
|
||||
a {
|
||||
|
||||
&:not(.title) {
|
||||
&>em {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
&>span {
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
}
|
||||
|
||||
&>em {
|
||||
width: 3rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
&>i {
|
||||
width: 1.8rem;
|
||||
}
|
||||
|
||||
&>span {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,14 +1,14 @@
|
||||
---
|
||||
import { Image } from "astro:assets";
|
||||
import { getDescription, fmtTime } from "../utils/index";
|
||||
const { post, index } = Astro.props;
|
||||
import { getDescription, fmtTime } from "@/utils/index";
|
||||
const { post } = Astro.props;
|
||||
// 获取文章的摘要
|
||||
const description = getDescription(post);
|
||||
// 获取封面图
|
||||
import getCover from "../utils/getCover";
|
||||
import getCover from "@/utils/getCover";
|
||||
const ARTICLE_COVER: string = await getCover(post.data.cover);
|
||||
// 文章Item组件样式
|
||||
import "../styles/components/ArticleCard.less";
|
||||
import "./ArticleCard.less";
|
||||
---
|
||||
|
||||
<article class="vh-article-item vh-animation vh-animation-init">
|
||||
@@ -0,0 +1,224 @@
|
||||
section.article-list {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
padding-bottom: 6rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.6rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
overflow: hidden;
|
||||
|
||||
&>.vh-article-item {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: initial;
|
||||
min-height: max-content;
|
||||
border: solid 1px #eee;
|
||||
border-radius: 1rem;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
|
||||
&>a.vh-article-link {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
min-height: 100%;
|
||||
border-radius: 0.618rem;
|
||||
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: 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 {
|
||||
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.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: max-content;
|
||||
overflow: hidden;
|
||||
|
||||
&>header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.36rem;
|
||||
|
||||
&>.vh-article-categories {
|
||||
box-sizing: border-box;
|
||||
width: max-content;
|
||||
font-size: 0.875rem;
|
||||
font-weight: bold;
|
||||
/* 默认渐变色起始 */
|
||||
--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: 1.18rem;
|
||||
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 0.625rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.28rem;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&>footer {
|
||||
margin-top: auto;
|
||||
font-size: 0.875rem;
|
||||
color: #6E6E6E;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>.vh-article-pagination {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1150px) {
|
||||
section.article-list {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 556px) {
|
||||
section.article-list {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
}
|
||||
@@ -2,12 +2,12 @@
|
||||
// 静态图片
|
||||
import { Image } from "astro:assets";
|
||||
// 时间处理
|
||||
import { fmtTime } from "../utils/index";
|
||||
import { fmtTime } from "@/utils/index";
|
||||
// 获取用户配置数据
|
||||
import SITE_CONFIG from "../config";
|
||||
import SITE_CONFIG from "@/config";
|
||||
const { Avatar, Author, Motto, WebSites, GoogleAds } = SITE_CONFIG;
|
||||
// 获取文章数据
|
||||
import { getCategories, getTags, getRecommendArticles } from "../utils/getPostInfo";
|
||||
import { getCategories, getTags, getRecommendArticles } from "@/utils/getPostInfo";
|
||||
// 分类列表
|
||||
const categories = getCategories();
|
||||
// 热门标签
|
||||
@@ -15,9 +15,9 @@ const tags = getTags();
|
||||
// 最新文章
|
||||
const recommendArticles = getRecommendArticles();
|
||||
// Google 广告组件
|
||||
import GoogleAd from "../components/GoogleAd.astro";
|
||||
import GoogleAd from "@/components/GoogleAd/GoogleAd.astro";
|
||||
// 侧边栏样式
|
||||
import "../styles/components/Aside.less";
|
||||
import "./Aside.less";
|
||||
---
|
||||
|
||||
<aside class="vh-aside">
|
||||
@@ -0,0 +1,316 @@
|
||||
aside.vh-aside {
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: 288px;
|
||||
height: initial;
|
||||
|
||||
&>.sticky-aside {
|
||||
position: sticky;
|
||||
top: var(--vh-padding-top);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.vh-aside-item {
|
||||
box-sizing: border-box;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
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);
|
||||
overflow: hidden;
|
||||
|
||||
&>h3 {
|
||||
padding-bottom: 0.618rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.68rem;
|
||||
width: 100%;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 0.25rem;
|
||||
height: 1.16rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--vh-color-default);
|
||||
}
|
||||
}
|
||||
|
||||
// 用户信息
|
||||
&.user {
|
||||
padding: 1.88rem 0;
|
||||
|
||||
&>.vh-aside-avatar {
|
||||
position: relative;
|
||||
width: 6.36rem;
|
||||
height: 6.36rem;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&>.vh-aside-auther {
|
||||
position: relative;
|
||||
font-size: 1.25rem;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
bottom: -0.16rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 36%;
|
||||
height: 0.26rem;
|
||||
border-radius: 3px;
|
||||
background-color: var(--vh-color-default);
|
||||
}
|
||||
}
|
||||
|
||||
&>.vh-aside-motto {
|
||||
font-size: 0.86rem;
|
||||
color: #A3A3A3;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&>.vh-aside-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
&>.vh-aside-links-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.88rem;
|
||||
height: 1.88rem;
|
||||
border: solid 1px #333;
|
||||
background-color: #fff;
|
||||
border-radius: 0.38rem;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
background-color: var(--vh-color-default);
|
||||
transition: height 0.16s ease-in-out;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&>img {
|
||||
width: 1.18rem;
|
||||
height: 1.18rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 分类
|
||||
&.categories {
|
||||
&>.vh-aside-categories {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
max-height: 15.56rem;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
&>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;
|
||||
border-radius: 0.38rem;
|
||||
background-color: #fff;
|
||||
transition: all 0.16s ease-in-out;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
padding-left: 0.66rem;
|
||||
background-color: var(--vh-color-default-88);
|
||||
|
||||
&>i {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&>i {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 1.75rem;
|
||||
font-size: 0.875rem;
|
||||
font-style: normal;
|
||||
border-radius: 0.38rem;
|
||||
background-color: var(--vh-color-default-88);
|
||||
transition: background 0.16s ease-in-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 标签
|
||||
&.tags {
|
||||
&>.vh-aside-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
overflow: hidden;
|
||||
|
||||
&>a {
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
|
||||
&:hover {
|
||||
&>span {
|
||||
background-color: var(--vh-color-default);
|
||||
}
|
||||
}
|
||||
|
||||
&>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-color-default-88);
|
||||
font-size: 0.875rem;
|
||||
font-style: normal;
|
||||
line-height: 1.75rem;
|
||||
transition: background 0.16s ease-in-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 推荐文章
|
||||
&.articles {
|
||||
&>.vh-aside-articles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
overflow: hidden;
|
||||
|
||||
&>a {
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.625rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
width: 100%;
|
||||
height: 4.6rem;
|
||||
border-bottom: 1px dashed #f3f2f2;
|
||||
overflow: hidden;
|
||||
|
||||
&:nth-last-of-type(1) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
&>p {
|
||||
&>img {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>p {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
&.cover {
|
||||
flex-shrink: 0;
|
||||
width: 3.88rem;
|
||||
height: 3.88rem;
|
||||
border-radius: 0.288rem;
|
||||
overflow: hidden;
|
||||
|
||||
&>img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.16s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
&>span {
|
||||
width: 100%;
|
||||
font-size: 0.8rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 888px) {
|
||||
aside.vh-aside {
|
||||
position: static;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
import "../styles/components/BackTop.less";
|
||||
import "./BackTop.less";
|
||||
---
|
||||
|
||||
<section class="vh-back-top">
|
||||
@@ -0,0 +1,37 @@
|
||||
section.vh-back-top {
|
||||
position: fixed;
|
||||
right: var(--vh-back-top);
|
||||
bottom: 2rem;
|
||||
width: 2.6rem;
|
||||
height: 2.6rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #e5e7eb;
|
||||
background-color: #fff;
|
||||
transform: translateX(1rem);
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
transition: transform .188s, opacity .18s;
|
||||
z-index: 9;
|
||||
|
||||
&.active {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
&>svg {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: calc(100% + 1px);
|
||||
height: calc(100% + 1px);
|
||||
|
||||
&.icon {
|
||||
width: 66%;
|
||||
height: 66%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
import "../styles/components/Comment.less";
|
||||
import "./Comment.less";
|
||||
---
|
||||
|
||||
<section class="vh-comment"><section><section class="vh-space-loading"><span></span><span></span><span></span></section></section></section>
|
||||
@@ -0,0 +1,319 @@
|
||||
.vh-comment {
|
||||
box-sizing: border-box;
|
||||
padding: 2rem 1rem 1rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
overflow: hidden;
|
||||
|
||||
// 评论样式
|
||||
.twikoo {
|
||||
font-size: 0.88rem;
|
||||
|
||||
img:not(.tk-avatar-img) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:not(.tk-admin-container) {
|
||||
|
||||
// p标签样式
|
||||
// ul标签样式
|
||||
ul:not(.OwO-items):not(.OwO-packages),
|
||||
ol {
|
||||
li {
|
||||
color: #33333388;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
// 其下面的code标签样式
|
||||
code {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
:not(pre) {
|
||||
&>code {
|
||||
background-color: var(--vh-color-default);
|
||||
padding: .125rem .375rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ul:not(.OwO-items):not(.OwO-packages),
|
||||
ol {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #4c4948;
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
line-height: 28px;
|
||||
|
||||
|
||||
a {
|
||||
color: #280F25;
|
||||
box-shadow: inset 0 -.12rem #60a5fa;
|
||||
transition: box-shadow .2s ease-in-out, color .2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 -1.5rem #60a5fa66;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tk-admin {
|
||||
|
||||
.tk-login {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tk-admin-warn p {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
// 评论输入框Focus边框颜色
|
||||
.el-input__inner:focus,
|
||||
.el-textarea__inner:focus {
|
||||
border-color: #9999ff !important;
|
||||
}
|
||||
|
||||
// 及背景颜色
|
||||
.el-input-group__append,
|
||||
.el-input-group__prepend {
|
||||
background-color: var(--vh-color-default-88) !important;
|
||||
}
|
||||
|
||||
// 评论内容样式
|
||||
.tk-comments {
|
||||
|
||||
// 评论输入框样式
|
||||
.tk-submit {
|
||||
&>.tk-row {
|
||||
&>.tk-col {
|
||||
&>.tk-input.el-textarea {
|
||||
box-sizing: border-box;
|
||||
padding: 6px 0 26px;
|
||||
border: 1px solid #f0f0f0;
|
||||
|
||||
&>textarea {
|
||||
border: none;
|
||||
min-height: 188px !important;
|
||||
|
||||
&::placeholder {
|
||||
line-height: 1.88;
|
||||
}
|
||||
}
|
||||
|
||||
&>span {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tk-comments-container {
|
||||
.tk-comment {
|
||||
|
||||
// 作者的UI
|
||||
&.tk-master {
|
||||
&>.tk-main {
|
||||
&>.tk-row {
|
||||
&>.tk-meta {
|
||||
&>.tk-nick {
|
||||
position: relative;
|
||||
color: #9999ff;
|
||||
line-height: 1.18rem;
|
||||
|
||||
&.tk-nick-link {
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
right: 0;
|
||||
left: auto;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background-color: #9999ff;
|
||||
transition: all 0.28s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
left: 0;
|
||||
right: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tk-avatar {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
|
||||
user-select: none;
|
||||
|
||||
&>img.tk-avatar-img {
|
||||
border-radius: 20%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: -0.4rem;
|
||||
bottom: -0.4rem;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
border-radius: 50%;
|
||||
background: #fff url("/public/assets/images/admin.svg") no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-last-of-type(1) {
|
||||
.tk-main {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tk-main {
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px dashed #ddd;
|
||||
|
||||
// 头部
|
||||
.tk-row {
|
||||
.tk-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.36rem;
|
||||
|
||||
&>.tk-nick {
|
||||
position: relative;
|
||||
color: #4c4948;
|
||||
line-height: 1.18rem;
|
||||
|
||||
&.tk-nick-link {
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
right: 0;
|
||||
left: auto;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background-color: #4c4948;
|
||||
transition: all 0.28s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
left: 0;
|
||||
right: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tk-tag {
|
||||
color: #000;
|
||||
border-color: #000;
|
||||
background-color: transparent;
|
||||
border-radius: 2px;
|
||||
font-size: 0.72rem;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tk-time {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 内容
|
||||
.tk-content {
|
||||
margin: 0;
|
||||
|
||||
p {
|
||||
padding: 0.18rem 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
max-height: 66px;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
&.tk-owo-emotion {
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.tk-ruser {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
// UA信息
|
||||
.tk-extras {
|
||||
padding-bottom: 0.28rem;
|
||||
font-size: 0.68rem;
|
||||
|
||||
.tk-extra {
|
||||
box-sizing: border-box;
|
||||
padding: 4px;
|
||||
border-radius: 0.2rem;
|
||||
background-color: var(--vh-color-default-88);
|
||||
}
|
||||
}
|
||||
|
||||
// 主体
|
||||
&>.tk-replies {
|
||||
padding-left: 1rem;
|
||||
border-left: 0.25rem solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 评论表情框样式
|
||||
.OwO .OwO-body {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
|
||||
.OwO-bar {
|
||||
.OwO-packages {
|
||||
flex-direction: row;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
const { time, sitename, title, site, id, auther } = Astro.props;
|
||||
const articleURL = `${site}/article/${id}`;
|
||||
import "../styles/components/Copyright.less";
|
||||
import "./Copyright.less";
|
||||
---
|
||||
|
||||
<section class="vh-copyright">
|
||||
@@ -0,0 +1,74 @@
|
||||
.vh-copyright {
|
||||
position: relative;
|
||||
margin: 1.868rem 0;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
border-radius: 0.618rem;
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
box-sizing: border-box;
|
||||
padding: 1.88px;
|
||||
position: relative;
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
color: #33333388;
|
||||
box-shadow: none !important;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: #60a5fa;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&>p {
|
||||
box-sizing: border-box;
|
||||
padding: 0.38rem 0 !important;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
font-size: 0.875rem !important;
|
||||
|
||||
&>span {
|
||||
color: #9CC5FB;
|
||||
}
|
||||
}
|
||||
|
||||
&>svg {
|
||||
position: absolute;
|
||||
right: 3.66rem;
|
||||
top: 0;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
opacity: 0.06;
|
||||
transform: scale(1.8);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 666px) {
|
||||
.vh-copyright {
|
||||
&>svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
// 静态图片
|
||||
import { Image } from "astro:assets";
|
||||
// 基础 样式
|
||||
import "../styles/Footer.less";
|
||||
import "./Footer.less";
|
||||
---
|
||||
|
||||
<footer class="vh-footer">
|
||||
@@ -0,0 +1,122 @@
|
||||
.vh-footer {
|
||||
margin-top: 1.68rem;
|
||||
box-sizing: border-box;
|
||||
padding: 2.6rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: saturate(100%) blur(2px);
|
||||
user-select: none;
|
||||
|
||||
&>main {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.618rem;
|
||||
width: 100%;
|
||||
max-width: var(--vh-main-max-width);
|
||||
height: max-content;
|
||||
|
||||
&>p {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.618rem;
|
||||
line-height: 1;
|
||||
|
||||
&>a {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&>span {
|
||||
box-sizing: border-box;
|
||||
padding-left: 0.28rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: max-content;
|
||||
height: 1.25rem;
|
||||
background-color: #25C2A0;
|
||||
font-size: 0.68rem;
|
||||
border-radius: 0.18rem;
|
||||
overflow: hidden;
|
||||
|
||||
&>cite,
|
||||
&>em {
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.618rem;
|
||||
width: max-content;
|
||||
height: 100%;
|
||||
line-height: 1.25rem;
|
||||
color: #fff;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
&>cite {
|
||||
padding-left: 0.28rem;
|
||||
}
|
||||
|
||||
&>em {
|
||||
background-color: #5D5D5D;
|
||||
}
|
||||
|
||||
&>svg {
|
||||
width: 0.88rem;
|
||||
height: 0.88rem;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>section {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.88rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
|
||||
p {
|
||||
line-height: 1;
|
||||
|
||||
a {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.text {
|
||||
&>p {
|
||||
|
||||
font-size: 0.88rem;
|
||||
|
||||
&>a {
|
||||
color: #94A3B8;
|
||||
transition: opacity 0.16s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.88;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.icon {
|
||||
&>p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
import SITE_CONFIG from "../config";
|
||||
import SITE_CONFIG from "@/config";
|
||||
// 当前页面的 URL 元地址
|
||||
const canonicalData = new URL(Astro.url.pathname, Astro.site);
|
||||
const canonicalURL = canonicalData.href.replace(/\/+$/, "");
|
||||
@@ -13,7 +13,7 @@ const WebCover = PageCover || SiteCover;
|
||||
const WebSiteData = { "@context": "https://schema.org", "@type": "WebSite", name: WebTitle, url: canonicalURL, image: { "@type": "ImageObject", url: SiteCover } };
|
||||
const ArticleData = { "@context": "https://schema.org", "@type": "BlogPosting", mainEntityOfPage: { "@type": "WebPage", "@id": canonicalURL }, headline: WebTitle, image: [WebCover], author: { "@type": "Person", name: Author, url: Site }, publisher: { "@type": "Organization", name: SiteName, logo: { "@type": "ImageObject", url: SiteCover } } };
|
||||
// 基础 样式
|
||||
import "../styles/Base.less";
|
||||
import "@/styles/Base.less";
|
||||
---
|
||||
|
||||
<head>
|
||||
@@ -1,12 +1,12 @@
|
||||
---
|
||||
import SITE_CONFIG from "../config";
|
||||
import SITE_CONFIG from "@/config";
|
||||
const { Navs } = SITE_CONFIG;
|
||||
// 原生图片
|
||||
import { Image } from "astro:assets";
|
||||
// 搜索框组件
|
||||
import Search from "./Search.astro";
|
||||
import Search from "@/components/Search/Search.astro";
|
||||
// 顶部 Header 样式
|
||||
import "../styles/components/Header.less";
|
||||
import "./Header.less";
|
||||
---
|
||||
|
||||
<header class="vh-header">
|
||||
@@ -0,0 +1,184 @@
|
||||
header.vh-header {
|
||||
position: fixed;
|
||||
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: #ffffff66;
|
||||
backdrop-filter: blur(2rem);
|
||||
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
z-index: 9;
|
||||
|
||||
&>section.main {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
padding: 0 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
max-width: var(--vh-main-max-width);
|
||||
|
||||
a,
|
||||
span.nav-btn-item {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
width: max-content;
|
||||
height: 80%;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
z-index: 1;
|
||||
transition: all 0.08s ease-in-out;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
transform: scale(1.2);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--vh-color-default);
|
||||
opacity: 0;
|
||||
transition: transform 0.16s ease-in-out, opacity 0.16s ease-in-out;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&.search-btn {
|
||||
&>svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&>svg {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
&.index {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&>.link-list,
|
||||
&>.nav-btn {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
padding-right: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 0.88rem;
|
||||
height: 100%;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
|
||||
&:nth-last-of-type(1) {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&>a,
|
||||
&>span {
|
||||
&.active {
|
||||
pointer-events: none;
|
||||
|
||||
&::before {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&>img {
|
||||
width: 1.08rem;
|
||||
height: 1.08rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>.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-color-default);
|
||||
border-radius: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 888px) {
|
||||
header.vh-header {
|
||||
padding: 0;
|
||||
|
||||
&>section.main {
|
||||
a {
|
||||
font-size: 0.875rem;
|
||||
|
||||
&: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 {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
---
|
||||
import SITE_CONFIG from "../config";
|
||||
import SITE_CONFIG from "@/config";
|
||||
const { Navs, Title } = SITE_CONFIG;
|
||||
// 侧边栏 MobileSidebar 样式
|
||||
import "../styles/components/MobileSidebar.less";
|
||||
import "./MobileSidebar.less";
|
||||
---
|
||||
|
||||
<nav class="vh-mobilesidebar">
|
||||
@@ -0,0 +1,106 @@
|
||||
.vh-mobilesidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
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;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
|
||||
&>.main {
|
||||
transform: translateX(0);
|
||||
|
||||
&>.vh-mobilesidebar-list {
|
||||
&>a {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&>.main {
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
max-width: 17.6rem;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
transform: translateX(-1rem);
|
||||
transition: transform 0.16s ease-in;
|
||||
overflow: hidden;
|
||||
|
||||
&>.vh-mobilesidebar-list {
|
||||
box-sizing: border-box;
|
||||
padding: 1rem 0.618rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.26rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
border-radius: 0.75rem;
|
||||
background-color: #F8F9FA;
|
||||
overflow: hidden;
|
||||
|
||||
&.user-panel {
|
||||
&>h3 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&>a {
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.618rem;
|
||||
width: 100%;
|
||||
height: 2.25rem;
|
||||
font-size: 1rem;
|
||||
color: #66758c;
|
||||
font-weight: 600;
|
||||
border-radius: 0.375rem;
|
||||
transform: translateX(-1rem);
|
||||
overflow: hidden;
|
||||
transition: all 0.36s ease-in-out;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
transition: all 0.26s ease-in-out;
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: #fff;
|
||||
background-color: #3366FF;
|
||||
|
||||
&>object {
|
||||
filter: brightness(0) invert(100%);
|
||||
}
|
||||
}
|
||||
|
||||
&>object {
|
||||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
transition: filter 0.16s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,9 @@
|
||||
---
|
||||
const { data } = Astro.props;
|
||||
// 处理页码
|
||||
import { fmtPage } from "../utils/index";
|
||||
import { fmtPage } from "@/utils/index";
|
||||
// 翻页组件样式
|
||||
import "../styles/components/Pagination.less";
|
||||
import "./Pagination.less";
|
||||
---
|
||||
|
||||
<section class="vh-article-pagination">
|
||||
@@ -0,0 +1,60 @@
|
||||
section.vh-article-pagination {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
|
||||
&>a.vh-pagination-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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: 0.875rem;
|
||||
color: #99a9bf;
|
||||
user-select: none;
|
||||
transition: background-color 0.16s ease-in-out;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: rgba(129, 146, 174, 0.36);
|
||||
|
||||
&>svg {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #8192AE;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
|
||||
&>svg {
|
||||
fill: #E8E8E8;
|
||||
}
|
||||
}
|
||||
|
||||
&>svg {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
fill: #99a9bf;
|
||||
transition: fill 0.16s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
import SITE_INFO from "@/config";
|
||||
import "./Reward.less";
|
||||
---
|
||||
|
||||
<section class="vh-reward">
|
||||
<p>喜欢这篇文章嘛，觉得文章不错的话，奖励奖励我！</p>
|
||||
<div class="reward-list"><span class="alipay"><i style={`background-image: url(${SITE_INFO.Reward.AliPay})`}></i>支付宝</span><span class="wechat"><i style={`background-image: url(${SITE_INFO.Reward.WeChat})`}></i>微信</span></div>
|
||||
</section>
|
||||
@@ -0,0 +1,83 @@
|
||||
.vh-reward {
|
||||
margin-top: 1rem;
|
||||
box-sizing: border-box;
|
||||
padding: 1.88rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.88rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
|
||||
&>p {
|
||||
padding: 0 !important;
|
||||
width: 100%;
|
||||
font-size: 0.75rem !important;
|
||||
color: #7a7a7a;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&>.reward-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1.18rem;
|
||||
width: 100%;
|
||||
|
||||
&>span {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.5rem;
|
||||
padding-left: 1.88rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: max-content;
|
||||
height: 2rem;
|
||||
border-radius: 0.28rem;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.16s, transform 0.16s;
|
||||
user-select: none;
|
||||
|
||||
&>i {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 100%;
|
||||
transform: translate(-50%, 0);
|
||||
width: 258px;
|
||||
max-width: calc(100vw - 1rem);
|
||||
border-radius: 0.588rem;
|
||||
aspect-ratio: 6/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;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-0.12rem);
|
||||
|
||||
&>i {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -1rem);
|
||||
}
|
||||
}
|
||||
|
||||
&.alipay {
|
||||
background: #00a0e8 url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M377.7%2032H70.3C31.4%2032%200%2063.4%200%20102.3v307.5C0%20448.6%2031.4%20480%2070.3%20480h307.5c38.5%200%2069.8-31.1%2070.3-69.6-46-25.6-110.6-60.3-171.6-88.4-32.1%2044-84.1%2081-148.6%2081-70.6%200-93.7-45.3-97-76.4-4-39%2014.9-81.5%2099.5-81.5%2035.4%200%2079.4%2010.3%20127.1%2025%2016.5-30.1%2026.5-60.3%2026.5-60.3h-178.2v-16.7h92.1v-31.2H88.3v-19h109.4V92.3h50.9v50.4h109.4v19H248.6v31.2h88.8s-15.2%2046.6-38.4%2090.9c48.9%2016.7%20100%2036%20148.6%2052.7V102.3C447.8%2063.6%20416.4%2032%20377.7%2032zM47.3%20323c1%2020.2%2010.3%2053.7%2069.9%2053.7%2052.1%200%2092.6-39.7%20117.9-72.9-44.6-18.7-84.5-31.4-109.4-31.4-67.5%200-79.4%2033.1-78.4%2050.6z%22%2F%3E%3C%2Fsvg%3E') no-repeat;
|
||||
background-size: 0.88rem auto;
|
||||
background-position: 0.56rem center;
|
||||
}
|
||||
|
||||
&.wechat {
|
||||
background: #1aad19 url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M385.2%20167.6c6.4%200%2012.6%20.3%2018.8%201.1C387.4%2090.3%20303.3%2032%20207.7%2032%20100.5%2032%2013%20104.8%2013%20197.4c0%2053.4%2029.3%2097.5%2077.9%20131.6l-19.3%2058.6%2068-34.1c24.4%204.8%2043.8%209.7%2068.2%209.7%206.2%200%2012.1-.3%2018.3-.8-4-12.9-6.2-26.6-6.2-40.8-.1-84.9%2072.9-154%20165.3-154zm-104.5-52.9c14.5%200%2024.2%209.7%2024.2%2024.4%200%2014.5-9.7%2024.2-24.2%2024.2-14.8%200-29.3-9.7-29.3-24.2%20.1-14.7%2014.6-24.4%2029.3-24.4zm-136.4%2048.6c-14.5%200-29.3-9.7-29.3-24.2%200-14.8%2014.8-24.4%2029.3-24.4%2014.8%200%2024.4%209.7%2024.4%2024.4%200%2014.6-9.6%2024.2-24.4%2024.2zM563%20319.4c0-77.9-77.9-141.3-165.4-141.3-92.7%200-165.4%2063.4-165.4%20141.3S305%20460.7%20397.6%20460.7c19.3%200%2038.9-5.1%2058.6-9.9l53.4%2029.3-14.8-48.6C534%20402.1%20563%20363.2%20563%20319.4zm-219.1-24.5c-9.7%200-19.3-9.7-19.3-19.6%200-9.7%209.7-19.3%2019.3-19.3%2014.8%200%2024.4%209.7%2024.4%2019.3%200%2010-9.7%2019.6-24.4%2019.6zm107.1%200c-9.7%200-19.3-9.7-19.3-19.6%200-9.7%209.7-19.3%2019.3-19.3%2014.5%200%2024.4%209.7%2024.4%2019.3%20.1%2010-9.9%2019.6-24.4%2019.6z%22%2F%3E%3C%2Fsvg%3E') no-repeat;
|
||||
background-size: 1.08rem auto;
|
||||
background-position: 0.56rem center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
// 搜索样式
|
||||
import "../styles/components/Search.less";
|
||||
import "./Search.less";
|
||||
---
|
||||
|
||||
<section class="vh-search">
|
||||
@@ -0,0 +1,149 @@
|
||||
.vh-search {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding: 3.75rem 1rem 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background-color: rgba(0, 0, 0, 0.26);
|
||||
overflow: hidden;
|
||||
transition: opacity 0.16s ease-in-out;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
|
||||
&>main {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&>main {
|
||||
box-sizing: border-box;
|
||||
padding: 1rem 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 888px;
|
||||
height: max-content;
|
||||
max-height: 88vh;
|
||||
border-radius: 1rem;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
|
||||
transform: translateY(-1rem);
|
||||
transition: transform 0.16s;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
&>.search-input {
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.28rem;
|
||||
width: 100%;
|
||||
height: 2.425rem;
|
||||
background-color: var(--vh-color-default-88);
|
||||
border-radius: 0.66rem;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
&>svg {
|
||||
flex-shrink: 0;
|
||||
width: 1.28rem;
|
||||
height: 1.28rem;
|
||||
}
|
||||
|
||||
&>input {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
color: #9CA3AF;
|
||||
font-size: 0.875rem;
|
||||
background-color: transparent;
|
||||
transition: width 0.16s ease-in-out;
|
||||
|
||||
&::placeholder {
|
||||
color: #9CA3AF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&>.vh-search-list {
|
||||
margin-top: 1rem;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
background-color: #fff;
|
||||
user-select: none;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
&>em {
|
||||
margin: 1.88rem auto;
|
||||
display: block;
|
||||
width: 5.88rem;
|
||||
height: 5.88rem;
|
||||
background: url('data:image/svg+xml;charset=utf-8,%20%3Csvg%20t%3D%221740986741673%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%225345%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cpath%20d%3D%22M942.93%20932.09H700.4c-4.78%200-8.66%203.88-8.66%208.66s3.88%208.66%208.66%208.66h242.53c4.78%200%208.66-3.88%208.66-8.66s-3.88-8.66-8.66-8.66z%20m-30.32-51.97c4.78%200%208.66-3.88%208.66-8.66s-3.88-8.66-8.66-8.66h-60.63c-4.78%200-8.66%203.88-8.66%208.66s3.88%208.66%208.66%208.66h60.63zM626.99%20202.6c5.71%203.2%2012.94%201.23%2016.21-4.43l46.66-80.67c3.32-5.75%201.3-13.1-4.49-16.35-5.71-3.2-12.94-1.23-16.21%204.43l-46.66%2080.67c-3.33%205.75-1.31%2013.1%204.49%2016.35z%20m-149.65-11.1h3.44c6.6%200%2011.95-5.34%2011.95-11.92V86.5c0-6.58-5.35-11.92-11.95-11.92h-3.44c-6.6%200-11.95%205.34-11.95%2011.92v93.08c0%206.58%205.35%2011.92%2011.95%2011.92zM302.3%20223.52c3.79%205.3%2011.13%206.59%2016.51%202.91l1.14-0.78c5.5-3.77%206.84-11.32%202.96-16.74l-53.85-75.41c-3.78-5.3-11.13-6.59-16.51-2.91l-1.13%200.78c-5.5%203.77-6.84%2011.32-2.96%2016.74l53.84%2075.41z%20m540.75%20131.67l-1.3-1.3c-1.3-2.6-3.91-5.19-7.81-6.5L466.7%20272.04h-6.51L163.26%20388.96c-0.01%200-0.02%200.01-0.04%200.01-1.27%200.38-2.4%201.12-3.34%202.06l-0.59%200.59a26.428%2026.428%200%200%200-4.33%205.65L65.59%20552.65c-1.3%202.6-2.61%206.5-1.3%2010.39%201.3%202.6%203.91%205.2%207.82%206.5l84.65%2022.09v228.64c0%205.2%203.91%209.1%207.81%2010.39l414.12%20118.22c2.61%201.3%206.51%200%209.12-1.3l260.45-145.5c3.91-2.6%205.21-5.2%205.21-10.39l-2.61-224.74%205.21-2.6%2098.98-58.46c2.6-1.3%205.21-5.19%205.21-7.79v-6.5L843.05%20355.19zM91.64%20551.35l82.04-139.01%206.51%201.3%20111.99%2027.28%20265.66%2064.96-97.67%20142.9-368.53-97.43z%20m85.95%20259.83V598.12h1.3l11.72%202.6%20270.87%2071.45c5.21%201.3%209.12%200%2011.72-5.2l91.16-133.81%203.91%20389.73-390.68-111.71zM585.2%20487.7l-286.5-68.85-93.76-22.08%20260.45-101.33%20334.68%2068.85-22.14%2012.99-32.56%2019.49L589.11%20489l-3.91-1.3z%20m6.51%20432.6l-3.91-400.13%2018.23%2031.18%2065.11%20109.12c2.61%205.2%2010.42%206.5%2015.63%203.9l141.95-83.14%202.6%20205.26L591.71%20920.3z%20m93.76-280.61l-79.44-133.81%207.81-5.19%20141.95-84.45%2071.62-42.87L930.3%20492.89l-244.83%20146.8z%22%20p-id%3D%225346%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
&>.vh-search-item {
|
||||
box-sizing: border-box;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.38rem;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&>span {
|
||||
width: 100%;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #000000E6;
|
||||
line-height: 1.16;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&>p {
|
||||
width: 100%;
|
||||
font-size: 0.875rem;
|
||||
color: #00000080;
|
||||
font-weight: 400;
|
||||
line-height: 1.25rem;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
|
||||
&>span {
|
||||
color: #60a5fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user