From 89acd5b2bdc63b7dcaafb9fe4233423c3e5958b5 Mon Sep 17 00:00:00 2001 From: Han <1655466387@qq.com> Date: Thu, 20 Mar 2025 13:06:15 +0800 Subject: [PATCH] =?UTF-8?q?=20=E9=87=8D=E6=9E=84=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E7=BB=93=E6=9E=84=E5=8F=8A=E9=80=BB=E8=BE=91=E2=9C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/images/enfj.webp | Bin 0 -> 21980 bytes src/components/Comment.astro | 2 +- src/layouts/PageLayout.astro | 30 ++ src/layouts/ToolLayout.astro | 31 ++ src/pages/about/index.astro | 51 --- src/pages/about/index.md | 71 ++++ src/pages/article/[...article].astro | 2 + src/pages/friends/index.astro | 24 -- src/pages/friends/index.md | 11 + src/pages/links/index.astro | 27 -- src/pages/links/index.md | 20 + src/pages/message/index.astro | 24 -- src/pages/message/index.md | 11 + src/pages/talking/index.astro | 27 -- src/pages/talking/index.md | 11 + src/scripts/Comment.ts | 4 +- src/scripts/Friends.ts | 2 +- src/scripts/Links.ts | 2 +- src/scripts/Talking.ts | 4 +- src/styles/About.less | 1 + src/styles/Article.less | 603 -------------------------- src/styles/ArticleBase.less | 604 +++++++++++++++++++++++++++ src/styles/Base.less | 12 +- src/styles/Friends.less | 105 ----- src/styles/Layout.less | 1 + src/styles/Links.less | 102 ----- src/styles/Talking.less | 181 -------- src/styles/ToolLayout.less | 420 +++++++++++++++++++ 28 files changed, 1227 insertions(+), 1156 deletions(-) create mode 100644 public/assets/images/enfj.webp create mode 100644 src/layouts/PageLayout.astro create mode 100644 src/layouts/ToolLayout.astro delete mode 100644 src/pages/about/index.astro create mode 100644 src/pages/about/index.md delete mode 100644 src/pages/friends/index.astro create mode 100644 src/pages/friends/index.md delete mode 100644 src/pages/links/index.astro create mode 100644 src/pages/links/index.md delete mode 100644 src/pages/message/index.astro create mode 100644 src/pages/message/index.md delete mode 100644 src/pages/talking/index.astro create mode 100644 src/pages/talking/index.md create mode 100644 src/styles/ArticleBase.less delete mode 100644 src/styles/Friends.less delete mode 100644 src/styles/Links.less delete mode 100644 src/styles/Talking.less create mode 100644 src/styles/ToolLayout.less diff --git a/public/assets/images/enfj.webp b/public/assets/images/enfj.webp new file mode 100644 index 0000000000000000000000000000000000000000..a98e7cfa35b9d61b324528b545d1297ee37dced4 GIT binary patch literal 21980 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 AIRF3v literal 0 HcmV?d00001 diff --git a/src/components/Comment.astro b/src/components/Comment.astro index 148541b..fe3d1ec 100644 --- a/src/components/Comment.astro +++ b/src/components/Comment.astro @@ -2,4 +2,4 @@ import "../styles/components/Comment.less"; --- -
+
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro new file mode 100644 index 0000000..9578a2b --- /dev/null +++ b/src/layouts/PageLayout.astro @@ -0,0 +1,30 @@ +--- +const { frontmatter } = Astro.props; +// 页面 Info +import SITE_CONFIG from "../config"; +const { Description, Twikoo, Title } = SITE_CONFIG; +// Aside组件 +import Aside from "../components/Aside.astro"; +// 公共 Layout +import Layout from "../layouts/Layout.astro"; +// 评论组件 +import Comment from "../components/Comment.astro"; +// 动态说说样式 +import "../styles/About.less"; +// 文章内容基础样式 +import "../styles/ArticleBase.less"; +--- + + +
+
+
+

{frontmatter.h1}

+

{frontmatter.desc}

+
+
+ {Twikoo.envId && frontmatter.comment != false && } +
+
+ diff --git a/src/layouts/ToolLayout.astro b/src/layouts/ToolLayout.astro new file mode 100644 index 0000000..4d96131 --- /dev/null +++ b/src/layouts/ToolLayout.astro @@ -0,0 +1,31 @@ +--- +const { frontmatter } = Astro.props; +// 页面 Info +import SITE_CONFIG from "../config"; +const { Description, Twikoo, Title } = SITE_CONFIG; +// Aside组件 +import Aside from "../components/Aside.astro"; +// 公共 Layout +import Layout from "../layouts/Layout.astro"; +// 评论组件 +import Comment from "../components/Comment.astro"; +// ToolLayout 布局样式 +import "../styles/ToolLayout.less"; +// 文章内容基础样式 +import "../styles/ArticleBase.less"; +--- + + +
+
+
+

{frontmatter.h1}

+

{frontmatter.desc}

+
+
+
+ {Twikoo.envId && frontmatter.comment != false && } +
+
+ diff --git a/src/pages/about/index.astro b/src/pages/about/index.astro deleted file mode 100644 index 1e17cf0..0000000 --- a/src/pages/about/index.astro +++ /dev/null @@ -1,51 +0,0 @@ ---- -// 静态图片 -import { Image } from "astro:assets"; -// 页面 Info -import SITE_CONFIG from "../../config"; -const { Description, Twikoo } = SITE_CONFIG; -// Aside组件 -import Aside from "../../components/Aside.astro"; -// 公共 Layout -import Layout from "../../layouts/Layout.astro"; -// 评论组件 -import Comment from "../../components/Comment.astro"; -// 动态说说样式 -import "../../styles/About.less"; ---- - - -
-
-
-

关于我

-

Hi there, I’m Han 👋

-
-
-

我是一名热爱前端开发并拥有丰富经验的工程师，喜欢探索新技术并应用于实际项目中。 我始终保持对新技术的热情，并将我的知识与经验分享在我的博客中。我期待在这里与你分享我的见解、经验和最新的技术动态。

-

🌟 Languages and Tools

-
- HTML5 - Node.js - PHP - Python - Git - Linux - Nginx - Docker - Vue.js - Vite - Webpack - Electron - Express - Tailwind CSS - JavaScript - SQLite - VS Code -
-
- {Twikoo.envId && } -
-
- diff --git a/src/pages/about/index.md b/src/pages/about/index.md new file mode 100644 index 0000000..e1dbc3a --- /dev/null +++ b/src/pages/about/index.md @@ -0,0 +1,71 @@ +--- +title: "关于" +h1: "关于我" +desc: "Hi there, I’m Han 👋" +layout: "../../layouts/PageLayout.astro" +--- + +:::note{type="info"} +我是一名热爱前端开发并拥有丰富经验的工程师，喜欢探索新技术并应用于实际项目中。 +我始终保持对新技术的热情，并将我的知识与经验分享在我的博客中。我期待在这里与你分享我的见解、经验和最新的技术动态。 +::: + +## Hi there, I'm Han 👋 + +
+
+ 主人公 + ENFJ-A + 在 16personalities 了解更多关于 主人公 +
+
+ +## Languages and Tools + +
+ HTML5 + Node.js + PHP + Python + Git + Linux + Nginx + Docker + Vue.js + Vite + Webpack + Electron + Express + Tailwind CSS + JavaScript + SQLite + VS Code +
+ +## 小站点 + +| 主 页 | | +| :-----------------: | :-----------------: | +| **博 客** | **** | +| **Web API** | **** | +| **Han Analytics** | **** | +| **Cloudflare 优选** | **** | + +## 联系我 + +```js +const Han = class { + constructor() { + const Hello = [123, 34, 110, 97, 109, 101, 34, 58, 34, 72, 97, 110, 34, 44, 34, 101, 109, 97, 105, 108, 34, 58, 34, 49, 54]; + const EveryOne = [53, 53, 52, 54, 54, 51, 56, 55, 64, 113, 113, 46, 99, 111, 109, 34, 44, 34, 81, 81, 34, 58, 49, 54, 53, 53]; + const WelcomeTo = [52, 54, 54, 51, 56, 55, 44, 34, 119, 101, 99, 104, 97, 116, 34, 58, 49, 54, 53, 53, 52, 54, 54, 51, 56, 55]; + const MineBlog = [44, 34, 98, 105, 114, 116, 104, 34, 58, 49, 57, 57, 56, 44, 34, 115, 101, 120, 34, 58, 34, 30007, 34, 125]; + const AboutMe = JSON.parse(String.fromCharCode.apply(null, [...Hello, ...EveryOne, ...WelcomeTo, ...MineBlog])); + AboutMe.age = new Date().getFullYear() - AboutMe.birth; + console.log(AboutMe); + } +}; +new Han(); +``` + + diff --git a/src/pages/article/[...article].astro b/src/pages/article/[...article].astro index 668dbf0..518cf7c 100644 --- a/src/pages/article/[...article].astro +++ b/src/pages/article/[...article].astro @@ -32,6 +32,8 @@ import Comment from "../../components/Comment.astro"; import GoogleAd from "../../components/GoogleAd.astro"; // 文章页面样式 import "../../styles/Article.less"; +// 文章内容基础样式 +import "../../styles/ArticleBase.less"; --- diff --git a/src/pages/friends/index.astro b/src/pages/friends/index.astro deleted file mode 100644 index 2b438f7..0000000 --- a/src/pages/friends/index.astro +++ /dev/null @@ -1,24 +0,0 @@ ---- -// 页面 Info -import SITE_CONFIG from "../../config"; -const { Description } = SITE_CONFIG; -// Aside组件 -import Aside from "../../components/Aside.astro"; -// 公共 Layout -import Layout from "../../layouts/Layout.astro"; -// 动态说说样式 -import "../../styles/Friends.less"; ---- - - -
-
-
-

朋友的新动态 🎴

-

来看看我的朋友们都在干嘛.

-
-
-
-
- diff --git a/src/pages/friends/index.md b/src/pages/friends/index.md new file mode 100644 index 0000000..3916851 --- /dev/null +++ b/src/pages/friends/index.md @@ -0,0 +1,11 @@ +--- +title: "朋友的新动态" +h1: "朋友的新动态 🎴" +desc: "来看看我的朋友们都在干嘛." +layout: "../../layouts/ToolLayout.astro" +type: "friends" +--- + +:::note{type="error"} +如果你是我的邻居，但是没有在这里看到自己，可以立刻马上告诉我你的 RSS 订阅地址噢～ +::: \ No newline at end of file diff --git a/src/pages/links/index.astro b/src/pages/links/index.astro deleted file mode 100644 index e959781..0000000 --- a/src/pages/links/index.astro +++ /dev/null @@ -1,27 +0,0 @@ ---- -// 页面 Info -import SITE_CONFIG from "../../config"; -const { Description, Twikoo } = SITE_CONFIG; -// Aside组件 -import Aside from "../../components/Aside.astro"; -// 公共 Layout -import Layout from "../../layouts/Layout.astro"; -// 评论组件 -import Comment from "../../components/Comment.astro"; -// 动态说说样式 -import "../../styles/Links.less"; ---- - - -
-
-
-

朋友圈 👭

-

天下快意之事莫若友。

-
-
- {Twikoo.envId && } -
-
- diff --git a/src/pages/links/index.md b/src/pages/links/index.md new file mode 100644 index 0000000..15d0c3d --- /dev/null +++ b/src/pages/links/index.md @@ -0,0 +1,20 @@ +--- +title: "友情链接" +h1: "朋友圈 👭" +desc: "天下快意之事莫若友。" +layout: "../../layouts/ToolLayout.astro" +type: "links" +--- + +:::note{type="success"} +✉️ 在评论区按以上格式留下你的友链数据，和我互换友链吧！ + +👭 排名不分先后，每次刷新 友链 会随机排列噢~ +::: + +```yaml +name: 韩小韩博客 +link: https://www.vvhan.com/ +avatar: https://q1.qlogo.cn/g?b=qq&nk=1655466387&s=640 +desc: 运气是计划之外的东西. +``` diff --git a/src/pages/message/index.astro b/src/pages/message/index.astro deleted file mode 100644 index 87bedd3..0000000 --- a/src/pages/message/index.astro +++ /dev/null @@ -1,24 +0,0 @@ ---- -// 页面 Info -import SITE_CONFIG from "../../config"; -const { Description, Twikoo } = SITE_CONFIG; -// Aside组件 -import Aside from "../../components/Aside.astro"; -// 公共 Layout -import Layout from "../../layouts/Layout.astro"; -// 评论组件 -import Comment from "../../components/Comment.astro"; ---- - - -
-
-
-

留言板 🌸

-

快友之事莫若谈。

-
- {Twikoo.envId && } -
-
- diff --git a/src/pages/message/index.md b/src/pages/message/index.md new file mode 100644 index 0000000..2afec00 --- /dev/null +++ b/src/pages/message/index.md @@ -0,0 +1,11 @@ +--- +title: "留言" +h1: "留言板 🌸" +desc: "快友之事莫若谈。" +layout: "../../layouts/ToolLayout.astro" +type: "message" +--- + +:::note{type="info"} +期待你的畅所欲言～ +::: diff --git a/src/pages/talking/index.astro b/src/pages/talking/index.astro deleted file mode 100644 index ff59cd4..0000000 --- a/src/pages/talking/index.astro +++ /dev/null @@ -1,27 +0,0 @@ ---- -// 页面 Info -import SITE_CONFIG from "../../config"; -const { Description, Twikoo } = SITE_CONFIG; -// Aside组件 -import Aside from "../../components/Aside.astro"; -// 公共 Layout -import Layout from "../../layouts/Layout.astro"; -// 评论组件 -import Comment from "../../components/Comment.astro"; -// 动态说说样式 -import "../../styles/Talking.less"; ---- - - -
-
-
-

动态 🥫

-

记录美好生活.

-
-
- {Twikoo.envId && } -
-
- diff --git a/src/pages/talking/index.md b/src/pages/talking/index.md new file mode 100644 index 0000000..b01221d --- /dev/null +++ b/src/pages/talking/index.md @@ -0,0 +1,11 @@ +--- +title: "动态" +h1: "动态 🥫" +desc: "记录美好生活." +layout: "../../layouts/ToolLayout.astro" +type: "talking" +--- + +:::note{type="import"} +这里记录着我想记录的生活～ +::: diff --git a/src/scripts/Comment.ts b/src/scripts/Comment.ts index 3536167..e70338a 100644 --- a/src/scripts/Comment.ts +++ b/src/scripts/Comment.ts @@ -8,7 +8,7 @@ declare const twikoo: any; // 处理评论区数据 const formateComment = () => { // 图片灯箱 - ViewImage && ViewImage.init(".vh-container>article.vh-article-main img.vh-article-img, .vh-talking>main>article>.main img, .vh-comment>.twikoo>.tk-comments img:not(.tk-avatar-img,.tk-owo-emotion,.OwO-item img)"); + ViewImage && ViewImage.init(".vh-container>article.vh-article-main img.vh-article-img, main.talking-main>article>.main img, .vh-comment>.twikoo>.tk-comments img:not(.tk-avatar-img,.tk-owo-emotion,.OwO-item img)"); // 处理 URL document.querySelectorAll('.vh-comment a[href="#"]').forEach(link => link.removeAttribute('href')); } @@ -16,7 +16,7 @@ const formateComment = () => { export default async () => { const commentDOM = '.vh-comment>section' if (!document.querySelector(commentDOM) || !SITE_INFO.Twikoo.envId) return formateComment(); - document.querySelector(commentDOM)!.innerHTML = '
' + document.querySelector(commentDOM)!.innerHTML = '
' await LoadScript("https://registry.npmmirror.com/twikoo/1.6.41/files/dist/twikoo.all.min.js"); twikoo.init({ envId: SITE_INFO.Twikoo.envId, el: commentDOM, onCommentLoaded: () => setTimeout(formateComment) }) } \ No newline at end of file diff --git a/src/scripts/Friends.ts b/src/scripts/Friends.ts index 3b7f31f..0aa8f19 100644 --- a/src/scripts/Friends.ts +++ b/src/scripts/Friends.ts @@ -4,7 +4,7 @@ import { fmtDate } from '../utils/index' import { $GET } from '../utils/index' const FriendsInit = async (data: any) => { - const friendsDOM = document.querySelector('.vh-container>.vh-friends>main') + const friendsDOM = document.querySelector('.vh-container>.vh-tools-main>main.friends-main') if (!friendsDOM) return; try { let res = data; diff --git a/src/scripts/Links.ts b/src/scripts/Links.ts index 837efa0..3a4410c 100644 --- a/src/scripts/Links.ts +++ b/src/scripts/Links.ts @@ -4,7 +4,7 @@ import { $GET } from '../utils/index' import vhLzImgInit from "../scripts/vhLazyImg"; // 渲染 const LinksInit = async (data: any) => { - const linksDOM = document.querySelector('.vh-container>.vh-links>main') + const linksDOM = document.querySelector('.vh-container>.vh-tools-main>main.links-main') if (!linksDOM) return; try { let res = data; diff --git a/src/scripts/Talking.ts b/src/scripts/Talking.ts index 4c3d883..c77813a 100644 --- a/src/scripts/Talking.ts +++ b/src/scripts/Talking.ts @@ -10,7 +10,7 @@ declare const ViewImage: any; // 灯箱JS初始化====== const TalkingInit = async (data: any) => { - const talkingDOM = document.querySelector('.vh-container>.vh-talking>main') + const talkingDOM = document.querySelector('.vh-container>.vh-tools-main>main.talking-main') if (!talkingDOM) return; try { let res = data; @@ -21,7 +21,7 @@ const TalkingInit = async (data: any) => { // 图片懒加载 vhLzImgInit(); // 灯箱JS初始化====== - setTimeout(() => (ViewImage && ViewImage.init(".vh-talking>main>article>.main img, .vh-comment>.twikoo>.tk-comments img:not(.tk-avatar-img,.tk-owo-emotion,.OwO-item img)"))); + setTimeout(() => (ViewImage && ViewImage.init("main.talking-main>article>.main img, .vh-comment>.twikoo>.tk-comments img:not(.tk-avatar-img,.tk-owo-emotion,.OwO-item img)"))); // 灯箱JS初始化====== } catch { vh.Toast('获取数据失败') diff --git a/src/styles/About.less b/src/styles/About.less index 8a012ae..dea0d1f 100644 --- a/src/styles/About.less +++ b/src/styles/About.less @@ -20,6 +20,7 @@ } &>.language-tool { + padding-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.56rem; diff --git a/src/styles/Article.less b/src/styles/Article.less index 282c506..2080092 100644 --- a/src/styles/Article.less +++ b/src/styles/Article.less @@ -127,612 +127,9 @@ section.vh-container { width: 100%; height: max-content; } - - - // 文章内容样式开始========================= - h1, - h2, - h3, - h4, - h5, - h6 { - display: inline-block; - box-sizing: border-box; - margin: 1.688rem 0 0.36rem; - font-size: 1rem; - width: 100%; - max-width: 100%; - word-break: break-all; - - &:hover { - &::before { - color: #60a5fa7f; - } - } - - &::before { - padding-right: 0.56rem; - content: "#"; - color: #33333388; - transition: color 0.16s ease-in-out; - } - } - - h1 { - margin: 0; - padding-bottom: 1rem; - font-size: 1.58rem; - - &.error-title { - font-size: 1.88rem; - } - - &::before { - display: none; - } - } - - h2 { - font-size: 1.5rem; - } - - h3 { - font-size: 1.25rem; - } - - h4 { - font-size: 1.125rem; - } - - // p标签样式 - // ul标签样式 - p, - ul:not(.vh-vhMusic ul, .vh-comment ul), - ol:not(.vh-vhMusic ol, .vh-comment ol) { - margin: 0; - padding: 0.618rem 0; - font-size: 0.9375rem; - line-height: 1.6; - - li { - color: #9A9A9A; - font-size: 0.875rem; - line-height: 1.6; - } - - // 其下面的 a 标签样式 - 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; - } - } - - // 其下面的code标签样式 - code { - background-color: var(--vh-color-default); - padding: .125rem .375rem; - font-size: 0.8125rem; - } - } - - ul:not(.vh-vhMusic ul, .vh-comment ul), - ol:not(.vh-vhMusic ol, .vh-comment ol) { - box-sizing: border-box; - padding-left: 1.25rem; - display: flex; - flex-direction: column; - gap: 0.5rem; - } - - blockquote { - margin: 1rem 0 1.618rem; - padding: 0 0.88rem; - border-left: 0.288rem solid #49b1f5; - background-color: rgba(73, 177, 245, 0.1); - border-radius: 0.618rem; - - &>p { - font-size: 0.875rem; - font-weight: 500; - line-height: 1.58rem; - color: #6A737D; - } - } - - /* 全局表格样式 */ - table { - box-sizing: border-box; - margin: 1rem 0; - width: 100%; - // border-collapse: collapse; - border-spacing: 0; - font-size: 0.9rem; - background-color: #fff; - border: 1px solid #EEEEEE; - border-radius: 0.38rem; - overflow: hidden; - - a { - color: #49B1F5; - } - - th { - text-align: center; - background-color: #f8f9fa; - padding: 0.75rem; - border-bottom: solid 1px #EEEEEE; - border-right: solid 1px #EEEEEE; - - &:nth-last-of-type(1) { - border-right: none; - } - } - - td { - padding: 0.618rem 0.75rem; - vertical-align: top; - border-bottom: solid 1px #EEEEEE; - border-right: solid 1px #EEEEEE; - - &:nth-last-of-type(1) { - border-right: none; - } - } - - tr { - transition: background-color 0.16s ease-in-out; - - &:nth-last-of-type(1) { - td { - border-bottom: none; - } - } - - &:hover { - background-color: #f2f2f2; - } - } - } - - // 自定义组件样式 - .vh-node { - margin: 0.618rem 0; - box-sizing: border-box; - width: 100%; - height: max-content; - overflow: hidden; - - p { - margin: 0; - padding: 0; - } - - // :::note - &.vh-note { - padding: 0.888rem; - border-left: 5px solid #eee; - border-left-color: #777; - border-radius: 3px; - background-color: #f7f7f7; - - &.note-success { - border-color: #01C4B6; - border-left: 5px solid #01C4B6; - border-left-color: #01C4B6; - background-color: #01C4B618; - } - - &.note-info { - border-color: #3253b4; - border-left: 5px solid #3253b4; - border-left-color: #3253b4; - background-color: #3253b418; - } - - &.note-warning { - border-color: #DD8636; - border-left: 5px solid #DD8636; - border-left-color: #DD8636; - background-color: #DD863618; - } - - &.note-error { - border-color: #DE3C3D; - border-left: 5px solid #DE3C3D; - border-left-color: #DE3C3D; - background-color: #DE3C3D18; - } - - &.note-import { - border-left: 5px solid #B984DF; - border-left-color: #B984DF; - background-color: #B984DF18; - } - - p { - font-size: 0.875rem; - line-height: 2; - font-weight: 500; - } - } - - // ::btn - &.vh-btn { - position: relative; - box-sizing: border-box; - display: flex; - align-items: center; - gap: 0.618rem; - padding: 0 1.18rem; - width: max-content; - max-width: 100%; - height: 2.28rem; - border: solid 1px #333; - border-radius: 0.28rem; - background-color: #fff; - cursor: pointer; - transition: background-color 0.18s ease-in-out; - z-index: 1; - user-select: none; - overflow: hidden; - - &:hover { - &::after { - height: 100%; - } - } - - - &::before { - flex-shrink: 0; - content: ''; - background-color: #000; - mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M364.2%2083.8c-24.4-24.4-64-24.4-88.4%200l-184%20184c-42.1%2042.1-42.1%20110.3%200%20152.4s110.3%2042.1%20152.4%200l152-152c10.9-10.9%2028.7-10.9%2039.6%200s10.9%2028.7%200%2039.6l-152%20152c-64%2064-167.6%2064-231.6%200s-64-167.6%200-231.6l184-184c46.3-46.3%20121.3-46.3%20167.6%200s46.3%20121.3%200%20167.6l-176%20176c-28.6%2028.6-75%2028.6-103.6%200s-28.6-75%200-103.6l144-144c10.9-10.9%2028.7-10.9%2039.6%200s10.9%2028.7%200%2039.6l-144%20144c-6.7%206.7-6.7%2017.7%200%2024.4s17.7%206.7%2024.4%200l176-176c24.4-24.4%2024.4-64%200-88.4z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center; - background-size: contain; - width: 1rem; - height: 1rem; - overflow: hidden; - } - - &::after { - content: ''; - position: absolute; - left: 0; - bottom: 0; - width: 100%; - height: 0; - background-color: var(--vh-color-default-66); - transition: height 0.16s ease-in-out; - z-index: -1; - } - - - &>span { - box-sizing: border-box; - color: #000; - font-weight: 600; - font-size: 0.875rem; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - z-index: 1; - } - - &.btn-success { - border-color: #01C4B6; - - &>span { - color: #01C4B6; - } - - &::before { - background-color: #01C4B6; - } - } - - &.btn-info { - border-color: #3253b4; - - &>span { - color: #3253b4; - } - - &::before { - background-color: #3253b4; - } - } - - &.btn-warning { - border-color: #DD8636; - - &>span { - color: #DD8636; - } - - &::before { - background-color: #DD8636; - } - } - - &.btn-error { - border-color: #DE3C3D; - - &>span { - color: #DE3C3D; - } - - &::before { - background-color: #DE3C3D; - } - } - - &.btn-import { - border-color: #B984DF; - - &>span { - color: #B984DF; - } - - &::before { - background-color: #B984DF; - } - } - } - - // :::picture - &.vh-picture { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(30%, 1fr)); - gap: .36rem; - - // 其下面的图片 - &>img.vh-article-img { - width: 100%; - aspect-ratio: 3 / 2; - border: solid 1px #E8E8E8; - border-radius: 5px; - object-fit: cover; - overflow: hidden; - } - } - - // ::vhVideo - &.vh-vhVideo { - margin: 1.188rem 0; - box-sizing: border-box; - width: 100%; - aspect-ratio: 16 / 9; - border: solid 1px #E8E8E8; - border-radius: 5px; - overflow: hidden; - } - - // ::vhMusic - &.vh-vhMusic { - margin: 1.188rem 0; - width: 100%; - height: max-content; - min-height: 1rem; - - &:not(.aplayer) { - box-sizing: border-box; - display: flex; - align-items: flex-end; - justify-content: center; - - &::before { - content: ''; - width: 1.66rem; - height: 1.66rem; - background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M304%2048a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200zm0%20416a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200zM48%20304a48%2048%200%201%200%200-96%2048%2048%200%201%200%200%2096zm464-48a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200zM142.9%20437A48%2048%200%201%200%2075%20369.1%2048%2048%200%201%200%20142.9%20437zm0-294.2A48%2048%200%201%200%2075%2075a48%2048%200%201%200%2067.9%2067.9zM369.1%20437A48%2048%200%201%200%20437%20369.1%2048%2048%200%201%200%20369.1%20437z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center; - background-size: cover; - animation: vhRotate 1.66s linear infinite; - } - } - - - .aplayer-body { - .aplayer-info { - .aplayer-lrc { - .aplayer-lrc-contents { - p { - font-size: 0.75rem; - } - } - } - } - } - } - - // ::vhLivePhoto - &.vh-vhLivePhoto { - box-sizing: border-box; - display: flex; - justify-content: center; - width: 100%; - aspect-ratio: 16 / 9; - background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='8' height='8' fill='none' stroke='rgb(0 0 0 / 0.1)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e"); - - &.vhLivePhoto-y { - aspect-ratio: 9 / 16; - max-height: 66vh; - max-width: 100%; - } - - &>div { - width: 100%; - height: 100%; - overflow: hidden; - - :not(.lpk-live-photo-renderer) { - &>canvas { - z-index: 9 !important; - } - } - } - } - } - - // 页面图片样式 - img.vh-article-img { - box-sizing: border-box; - padding: .36rem; - width: max-content; - max-width: 100%; - max-height: 36rem; - border: solid 1px #E8E8E8; - border-radius: 5px; - cursor: zoom-in; - cursor: -moz-zoom-in; - cursor: -webkit-zoom-in; - - &:not(.loaded) { - width: 100%; - } - } - - // 文章内代码块 - section.vh-code-box { - margin: 1.188rem 0; - position: relative; - - &>span.vh-code-copy { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - right: 0.66rem; - top: 0.6rem; - width: 1.8rem; - height: 1.8rem; - border: solid 1px rgba(125, 125, 125, .2); - border-radius: 0.5rem; - z-index: 1; - overflow: hidden; - cursor: pointer; - opacity: 0.66; - transition: all .16s; - - &:hover { - opacity: 1; - } - - &::before, - &::after { - position: absolute; - content: ""; - width: 100%; - height: 100%; - background: rgba(125, 125, 125, .2) url('data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20fill%3D%22%23808080%22%20d%3D%22M368.37-237.37q-34.48%200-58.74-24.26-24.26-24.26-24.26-58.74v-474.26q0-34.48%2024.26-58.74%2024.26-24.26%2058.74-24.26h378.26q34.48%200%2058.74%2024.26%2024.26%2024.26%2024.26%2058.74v474.26q0%2034.48-24.26%2058.74-24.26%2024.26-58.74%2024.26H368.37Zm0-83h378.26v-474.26H368.37v474.26Zm-155%20238q-34.48%200-58.74-24.26-24.26-24.26-24.26-58.74v-515.76q0-17.45%2011.96-29.48%2011.97-12.02%2029.33-12.02t29.54%2012.02q12.17%2012.03%2012.17%2029.48v515.76h419.76q17.45%200%2029.48%2011.96%2012.02%2011.97%2012.02%2029.33t-12.02%2029.54q-12.03%2012.17-29.48%2012.17H213.37Zm155-238v-474.26%20474.26Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center; - background-size: 1.16rem 1.16rem; - opacity: 0; - transition: opacity 0.16s; - } - - &::after { - background: #01C4B6 url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m389-377.13%20294.7-294.7q12.58-12.67%2029.52-12.67%2016.93%200%2029.61%2012.67%2012.67%2012.68%2012.67%2029.53%200%2016.86-12.28%2029.14L419.07-288.41q-12.59%2012.67-29.52%2012.67-16.94%200-29.62-12.67L217.41-430.93q-12.67-12.68-12.79-29.45-.12-16.77%2012.55-29.45%2012.68-12.67%2029.62-12.67%2016.93%200%2029.28%2012.67L389-377.13Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center; - background-size: 1.16rem 1.16rem; - } - - &::before { - opacity: 1; - } - - &.success { - opacity: 1; - - &::before { - opacity: 0; - } - - &::after { - opacity: 1; - } - } - - - } - - &>pre.astro-code { - box-sizing: border-box; - padding: 0.888rem; - border-radius: 0.618rem; - height: max-content; - max-height: 888px; - background-color: var(--vh-color-default-99) !important; - - code { - box-sizing: border-box; - counter-reset: line; - - &>span { - box-sizing: border-box; - font-size: 0.875rem; - line-height: 1.66; - - &::before { - counter-increment: line; - content: counter(line); - display: inline-block; - width: 1rem; - padding-right: 0.618rem; - margin-right: 0.888rem; - border-right: 1px solid #e2e2e3; - color: #939296; - text-align: center; - user-select: none; - } - - } - } - } - } - - // 文章内容样式结束========================= } } -// 滚动条样式 -.os-theme-dark.os-scrollbar { - &>.os-scrollbar-track { - &>.os-scrollbar-handle { - background-color: #A3A8AF88; - - &:hover { - background-color: #A3A8AF66; - } - } - } - - // 右侧滚动条 - &.os-scrollbar-vertical { - &>.os-scrollbar-track { - &>.os-scrollbar-handle { - &:hover { - width: 0.56rem; - } - } - } - } - - // 底部滚动条 - &.os-scrollbar-horizontal { - &>.os-scrollbar-track { - &>.os-scrollbar-handle { - &:hover { - height: 0.56rem; - } - } - } - } -} - - - @media screen and (max-width: 999px) { section.vh-container { &>article.vh-article-main { diff --git a/src/styles/ArticleBase.less b/src/styles/ArticleBase.less new file mode 100644 index 0000000..701e4b9 --- /dev/null +++ b/src/styles/ArticleBase.less @@ -0,0 +1,604 @@ +.vh-container { + + &>section, + &>article { + + h1, + h2, + h3, + h4, + h5, + h6 { + display: inline-block; + box-sizing: border-box; + margin: 1.666rem 0 0.36rem; + font-size: 1rem; + width: 100%; + max-width: 100%; + word-break: break-all; + + &:hover { + &::before { + color: #60a5fa7f; + } + } + + &::before { + padding-right: 0.56rem; + content: "#"; + color: #33333388; + transition: color 0.16s ease-in-out; + } + } + + h1 { + margin: 0; + padding-bottom: 1rem; + font-size: 1.58rem; + + &.error-title { + font-size: 1.88rem; + } + + &::before { + display: none; + } + } + + h2 { + font-size: 1.5rem; + } + + h3 { + font-size: 1.25rem; + } + + h4 { + font-size: 1.125rem; + } + + // p标签样式 + // ul标签样式 + p, + ul:not(.vh-vhMusic ul, .vh-comment ul), + ol:not(.vh-vhMusic ol, .vh-comment ol) { + margin: 0; + padding: 0.618rem 0; + font-size: 0.9375rem; + line-height: 1.6; + + li { + color: #9A9A9A; + font-size: 0.875rem; + line-height: 1.6; + } + + // 其下面的 a 标签样式 + 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; + } + } + + // 其下面的code标签样式 + code { + background-color: var(--vh-color-default); + padding: .125rem .375rem; + font-size: 0.8125rem; + } + } + + ul:not(.vh-vhMusic ul, .vh-comment ul), + ol:not(.vh-vhMusic ol, .vh-comment ol) { + box-sizing: border-box; + padding-left: 1.25rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + } + + blockquote { + margin: 1rem 0 1.618rem; + padding: 0 0.88rem; + border-left: 0.288rem solid #49b1f5; + background-color: rgba(73, 177, 245, 0.1); + border-radius: 0.618rem; + + &>p { + font-size: 0.875rem; + font-weight: 500; + line-height: 1.58rem; + color: #6A737D; + } + } + + /* 全局表格样式 */ + table { + box-sizing: border-box; + margin: 1rem 0; + width: 100%; + // border-collapse: collapse; + border-spacing: 0; + font-size: 0.9rem; + background-color: #fff; + border: 1px solid #EEEEEE; + border-radius: 0.38rem; + overflow: hidden; + + a { + color: #49B1F5; + } + + th { + text-align: center; + background-color: #f8f9fa; + padding: 0.75rem; + border-bottom: solid 1px #EEEEEE; + border-right: solid 1px #EEEEEE; + + &:nth-last-of-type(1) { + border-right: none; + } + } + + td { + padding: 0.618rem 0.75rem; + vertical-align: top; + border-bottom: solid 1px #EEEEEE; + border-right: solid 1px #EEEEEE; + + &:nth-last-of-type(1) { + border-right: none; + } + } + + tr { + transition: background-color 0.16s ease-in-out; + + &:nth-last-of-type(1) { + td { + border-bottom: none; + } + } + + &:hover { + background-color: #f2f2f2; + } + } + } + + // 自定义组件样式 + .vh-node { + margin: 0.618rem 0; + box-sizing: border-box; + width: 100%; + height: max-content; + overflow: hidden; + + p { + margin: 0; + padding: 0; + } + + // :::note + &.vh-note { + padding: 0.888rem; + border-left: 5px solid #eee; + border-left-color: #777; + border-radius: 3px; + background-color: #f7f7f7; + + &.note-success { + border-color: #01C4B6; + border-left: 5px solid #01C4B6; + border-left-color: #01C4B6; + background-color: #01C4B618; + } + + &.note-info { + border-color: #3253b4; + border-left: 5px solid #3253b4; + border-left-color: #3253b4; + background-color: #3253b418; + } + + &.note-warning { + border-color: #DD8636; + border-left: 5px solid #DD8636; + border-left-color: #DD8636; + background-color: #DD863618; + } + + &.note-error { + border-color: #DE3C3D; + border-left: 5px solid #DE3C3D; + border-left-color: #DE3C3D; + background-color: #DE3C3D18; + } + + &.note-import { + border-left: 5px solid #B984DF; + border-left-color: #B984DF; + background-color: #B984DF18; + } + + p { + font-size: 0.875rem; + line-height: 2; + font-weight: 500; + } + } + + // ::btn + &.vh-btn { + position: relative; + box-sizing: border-box; + display: flex; + align-items: center; + gap: 0.618rem; + padding: 0 1.18rem; + width: max-content; + max-width: 100%; + height: 2.28rem; + border: solid 1px #333; + border-radius: 0.28rem; + background-color: #fff; + cursor: pointer; + transition: background-color 0.18s ease-in-out; + z-index: 1; + user-select: none; + overflow: hidden; + + &:hover { + &::after { + height: 100%; + } + } + + + &::before { + flex-shrink: 0; + content: ''; + background-color: #000; + mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M364.2%2083.8c-24.4-24.4-64-24.4-88.4%200l-184%20184c-42.1%2042.1-42.1%20110.3%200%20152.4s110.3%2042.1%20152.4%200l152-152c10.9-10.9%2028.7-10.9%2039.6%200s10.9%2028.7%200%2039.6l-152%20152c-64%2064-167.6%2064-231.6%200s-64-167.6%200-231.6l184-184c46.3-46.3%20121.3-46.3%20167.6%200s46.3%20121.3%200%20167.6l-176%20176c-28.6%2028.6-75%2028.6-103.6%200s-28.6-75%200-103.6l144-144c10.9-10.9%2028.7-10.9%2039.6%200s10.9%2028.7%200%2039.6l-144%20144c-6.7%206.7-6.7%2017.7%200%2024.4s17.7%206.7%2024.4%200l176-176c24.4-24.4%2024.4-64%200-88.4z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center; + background-size: contain; + width: 1rem; + height: 1rem; + overflow: hidden; + } + + &::after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 0; + background-color: var(--vh-color-default-66); + transition: height 0.16s ease-in-out; + z-index: -1; + } + + + &>span { + box-sizing: border-box; + color: #000; + font-weight: 600; + font-size: 0.875rem; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + z-index: 1; + } + + &.btn-success { + border-color: #01C4B6; + + &>span { + color: #01C4B6; + } + + &::before { + background-color: #01C4B6; + } + } + + &.btn-info { + border-color: #3253b4; + + &>span { + color: #3253b4; + } + + &::before { + background-color: #3253b4; + } + } + + &.btn-warning { + border-color: #DD8636; + + &>span { + color: #DD8636; + } + + &::before { + background-color: #DD8636; + } + } + + &.btn-error { + border-color: #DE3C3D; + + &>span { + color: #DE3C3D; + } + + &::before { + background-color: #DE3C3D; + } + } + + &.btn-import { + border-color: #B984DF; + + &>span { + color: #B984DF; + } + + &::before { + background-color: #B984DF; + } + } + } + + // :::picture + &.vh-picture { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(30%, 1fr)); + gap: .36rem; + + // 其下面的图片 + &>img.vh-article-img { + width: 100%; + aspect-ratio: 3 / 2; + border: solid 1px #E8E8E8; + border-radius: 5px; + object-fit: cover; + overflow: hidden; + } + } + + // ::vhVideo + &.vh-vhVideo { + margin: 1.188rem 0; + box-sizing: border-box; + width: 100%; + aspect-ratio: 16 / 9; + border: solid 1px #E8E8E8; + border-radius: 5px; + overflow: hidden; + } + + // ::vhMusic + &.vh-vhMusic { + margin: 1.188rem 0; + width: 100%; + height: max-content; + min-height: 1rem; + + &:not(.aplayer) { + box-sizing: border-box; + display: flex; + align-items: flex-end; + justify-content: center; + + &::before { + content: ''; + width: 1.66rem; + height: 1.66rem; + background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M304%2048a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200zm0%20416a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200zM48%20304a48%2048%200%201%200%200-96%2048%2048%200%201%200%200%2096zm464-48a48%2048%200%201%200%20-96%200%2048%2048%200%201%200%2096%200zM142.9%20437A48%2048%200%201%200%2075%20369.1%2048%2048%200%201%200%20142.9%20437zm0-294.2A48%2048%200%201%200%2075%2075a48%2048%200%201%200%2067.9%2067.9zM369.1%20437A48%2048%200%201%200%20437%20369.1%2048%2048%200%201%200%20369.1%20437z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center; + background-size: cover; + animation: vhRotate 1.66s linear infinite; + } + } + + + .aplayer-body { + .aplayer-info { + .aplayer-lrc { + .aplayer-lrc-contents { + p { + font-size: 0.75rem; + } + } + } + } + } + } + + // ::vhLivePhoto + &.vh-vhLivePhoto { + box-sizing: border-box; + display: flex; + justify-content: center; + width: 100%; + aspect-ratio: 16 / 9; + background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='8' height='8' fill='none' stroke='rgb(0 0 0 / 0.1)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e"); + + &.vhLivePhoto-y { + aspect-ratio: 9 / 16; + max-height: 66vh; + max-width: 100%; + } + + &>div { + width: 100%; + height: 100%; + overflow: hidden; + + :not(.lpk-live-photo-renderer) { + &>canvas { + z-index: 9 !important; + } + } + } + } + } + + // 页面图片样式 + img.vh-article-img { + box-sizing: border-box; + padding: .36rem; + width: max-content; + max-width: 100%; + max-height: 36rem; + border: solid 1px #E8E8E8; + border-radius: 5px; + cursor: zoom-in; + cursor: -moz-zoom-in; + cursor: -webkit-zoom-in; + + &:not(.loaded) { + width: 100%; + } + } + + // 文章内代码块 + section.vh-code-box { + margin: 1.188rem 0; + position: relative; + + &>span.vh-code-copy { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + right: 0.66rem; + top: 0.6rem; + width: 1.8rem; + height: 1.8rem; + border: solid 1px rgba(125, 125, 125, .2); + border-radius: 0.5rem; + z-index: 1; + overflow: hidden; + cursor: pointer; + opacity: 0.66; + transition: all .16s; + + &:hover { + opacity: 1; + } + + &::before, + &::after { + position: absolute; + content: ""; + width: 100%; + height: 100%; + background: rgba(125, 125, 125, .2) url('data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20fill%3D%22%23808080%22%20d%3D%22M368.37-237.37q-34.48%200-58.74-24.26-24.26-24.26-24.26-58.74v-474.26q0-34.48%2024.26-58.74%2024.26-24.26%2058.74-24.26h378.26q34.48%200%2058.74%2024.26%2024.26%2024.26%2024.26%2058.74v474.26q0%2034.48-24.26%2058.74-24.26%2024.26-58.74%2024.26H368.37Zm0-83h378.26v-474.26H368.37v474.26Zm-155%20238q-34.48%200-58.74-24.26-24.26-24.26-24.26-58.74v-515.76q0-17.45%2011.96-29.48%2011.97-12.02%2029.33-12.02t29.54%2012.02q12.17%2012.03%2012.17%2029.48v515.76h419.76q17.45%200%2029.48%2011.96%2012.02%2011.97%2012.02%2029.33t-12.02%2029.54q-12.03%2012.17-29.48%2012.17H213.37Zm155-238v-474.26%20474.26Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center; + background-size: 1.16rem 1.16rem; + opacity: 0; + transition: opacity 0.16s; + } + + &::after { + background: #01C4B6 url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20-960%20960%20960%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m389-377.13%20294.7-294.7q12.58-12.67%2029.52-12.67%2016.93%200%2029.61%2012.67%2012.67%2012.68%2012.67%2029.53%200%2016.86-12.28%2029.14L419.07-288.41q-12.59%2012.67-29.52%2012.67-16.94%200-29.62-12.67L217.41-430.93q-12.67-12.68-12.79-29.45-.12-16.77%2012.55-29.45%2012.68-12.67%2029.62-12.67%2016.93%200%2029.28%2012.67L389-377.13Z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center; + background-size: 1.16rem 1.16rem; + } + + &::before { + opacity: 1; + } + + &.success { + opacity: 1; + + &::before { + opacity: 0; + } + + &::after { + opacity: 1; + } + } + + + } + + &>pre.astro-code { + box-sizing: border-box; + padding: 0.888rem; + border-radius: 0.618rem; + height: max-content; + max-height: 888px; + background-color: var(--vh-color-default-99) !important; + + code { + box-sizing: border-box; + counter-reset: line; + + &>span { + box-sizing: border-box; + font-size: 0.875rem; + line-height: 1.66; + + &::before { + counter-increment: line; + content: counter(line); + display: inline-block; + width: 1rem; + padding-right: 0.618rem; + margin-right: 0.888rem; + border-right: 1px solid #e2e2e3; + color: #939296; + text-align: center; + user-select: none; + } + + } + } + } + } + + + // 滚动条样式 + .os-theme-dark.os-scrollbar { + &>.os-scrollbar-track { + &>.os-scrollbar-handle { + background-color: #A3A8AF88; + + &:hover { + background-color: #A3A8AF66; + } + } + } + + // 右侧滚动条 + &.os-scrollbar-vertical { + &>.os-scrollbar-track { + &>.os-scrollbar-handle { + &:hover { + width: 0.56rem; + } + } + } + } + + // 底部滚动条 + &.os-scrollbar-horizontal { + &>.os-scrollbar-track { + &>.os-scrollbar-handle { + &:hover { + height: 0.56rem; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/Base.less b/src/styles/Base.less index db568d4..3772750 100644 --- a/src/styles/Base.less +++ b/src/styles/Base.less @@ -106,8 +106,15 @@ html { overflow: hidden; &>h1 { + padding: 0; font-size: 1.5rem; } + + &>p { + padding: 0; + font-size: 1rem; + line-height: 2; + } } } @@ -170,11 +177,6 @@ html.is-animating { height: 8.88rem; overflow: hidden; - &.white { - background-color: #fff; - box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); - } - &>span { background-color: #000; position: relative; diff --git a/src/styles/Friends.less b/src/styles/Friends.less deleted file mode 100644 index 79b4cb8..0000000 --- a/src/styles/Friends.less +++ /dev/null @@ -1,105 +0,0 @@ - // 说说页评论 - .vh-friends { - min-height: 56vh; - - &>main { - margin: 1.25rem 0; - box-sizing: border-box; - display: flex; - flex-direction: column; - gap: 1.25rem; - - &>article { - box-sizing: border-box; - padding: 1rem; - width: 100%; - height: max-content; - border-radius: 0.5rem; - box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); - background: #fff linear-gradient(90deg, #EDEEF388, #fff) no-repeat 100% 100% / 0 1px; - background-position: 0 100%; - background-size: 0 100%; - transition: .7s cubic-bezier(.6, .1, 0, 1), background-position 0s; - overflow: hidden; - - &:hover { - background-size: 100% 100%; - } - - &>a { - display: flex; - flex-direction: column; - gap: 0.5rem; - width: 100%; - height: max-content; - - &>header { - &>h2 { - font-size: 1.08rem; - } - } - - &>p { - color: #26262680; - font-size: 0.875rem; - line-height: 1.8; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - text-overflow: ellipsis; - word-break: break-all; - overflow: hidden; - } - - &>footer { - box-sizing: border-box; - display: flex; - justify-content: space-between; - width: 100%; - height: max-content; - overflow: hidden; - - &>span, - &>time { - box-sizing: border-box; - display: flex; - align-items: center; - gap: 0.5rem; - height: 1.56rem; - font-size: 0.8rem; - overflow: hidden; - - &>em { - font-style: normal; - flex: 1; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - - &>img { - flex-shrink: 0; - width: 1.56rem; - height: 1.56rem; - border-radius: 50%; - } - } - - &>span { - flex: 1; - } - - &>time { - flex-shrink: 0; - width: max-content; - padding: 0.5rem; - background: #F7F7F7; - border-radius: 0.8rem; - } - } - } - } - } - } - - @media screen and (max-width: 888px) {} \ No newline at end of file diff --git a/src/styles/Layout.less b/src/styles/Layout.less index b68948c..0b0ca9e 100644 --- a/src/styles/Layout.less +++ b/src/styles/Layout.less @@ -33,6 +33,7 @@ body { display: flex; flex-direction: column; width: 100%; + min-width: 0; height: max-content; } } diff --git a/src/styles/Links.less b/src/styles/Links.less deleted file mode 100644 index 383b1ec..0000000 --- a/src/styles/Links.less +++ /dev/null @@ -1,102 +0,0 @@ - // 说说页评论 - .vh-links { - gap: 1.25rem; - - &>main { - box-sizing: border-box; - padding: 1rem; - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1rem; - border-radius: 0.5rem; - background-color: #fff; - box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); - overflow: hidden; - min-height: 5.5rem; - - &>a { - position: relative; - box-sizing: border-box; - padding: 0 1rem; - display: flex; - align-items: center; - gap: 0.6rem; - width: 100%; - height: 5.5rem; - border-radius: 0.88rem; - transition: background-color 0.16s ease-in-out; - overflow: hidden; - z-index: 1; - - &:hover { - background-color: var(--vh-color-default); - - &>.avatar { - transform: scale(1.2) rotate(8deg); - } - } - - &>.avatar { - flex-shrink: 0; - box-sizing: border-box; - padding: 0.18rem; - width: 3.36rem; - height: 3.36rem; - border-radius: 50%; - border: solid 1px #E8E8E8; - overflow: hidden; - opacity: 1; - transition: all .16s; - } - - &>.link-info { - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - gap: 0.388rem; - width: 100%; - height: 100%; - overflow: hidden; - z-index: 1; - - &>span { - font-size: 1rem; - font-weight: bold; - line-height: 1rem; - } - - &>p { - box-sizing: border-box; - width: 100%; - height: max-content; - font-size: 0.81rem; - color: #858585; - line-height: 1rem; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - text-overflow: ellipsis; - word-break: break-all; - overflow: hidden; - } - } - } - } - } - - @media screen and (max-width: 1088px) { - .vh-links { - &>main { - grid-template-columns: repeat(2, 1fr); - } - } - } - - @media screen and (max-width: 568px) { - .vh-links { - &>main { - grid-template-columns: repeat(1, 1fr); - } - } - } \ No newline at end of file diff --git a/src/styles/Talking.less b/src/styles/Talking.less deleted file mode 100644 index b5b3c70..0000000 --- a/src/styles/Talking.less +++ /dev/null @@ -1,181 +0,0 @@ - // 说说页评论 - .vh-talking { - min-height: 56vh; - - &>main { - margin: 1.25rem 0; - box-sizing: border-box; - display: flex; - flex-direction: column; - gap: 1.25rem; - - &>article { - box-sizing: border-box; - padding: 2.188rem 1.875rem; - display: flex; - flex-direction: column; - border-radius: 0.5rem; - background-color: #fff; - box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); - overflow: hidden; - - &>header { - display: flex; - align-items: center; - gap: 0.626rem; - width: 100%; - height: 2.5rem; - - &>img { - flex-shrink: 0; - width: 2.5rem; - height: 2.5rem; - border-radius: 50%; - } - - &>.info { - display: flex; - flex-direction: column; - justify-content: center; - width: 100%; - height: 100%; - line-height: 1.26rem; - overflow: hidden; - - &>span { - font-size: 0.875rem; - } - - &>time { - font-size: 0.7rem; - color: #858585; - } - } - } - - // 说说内容样式 - &>.main { - box-sizing: border-box; - padding: 1rem 0; - font-size: 0.875rem; - font-weight: 500; - - img { - width: 100%; - height: auto; - aspect-ratio: 3 / 2; - border-radius: 0.375rem; - object-fit: contain; - overflow: hidden; - cursor: zoom-in; - cursor: -moz-zoom-in; - cursor: -webkit-zoom-in; - } - - &>.vh-img-flex { - box-sizing: border-box; - padding: 0.8rem 0; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(30%, 1fr)); - gap: 0.66rem; - width: 100%; - height: max-content; - max-height: 50%; - overflow: hidden; - - &>img { - height: 100%; - object-fit: cover; - } - } - - // 说说定位样式 - &>.geographical-location { - display: flex; - align-items: center; - gap: 0.2rem; - font-style: normal; - font-size: 14px; - color: #49c7cc; - - &::before { - content: ''; - width: 14px; - height: 14px; - background: url('/public/assets/images/local.svg') no-repeat; - background-size: contain; - } - } - } - - - - &>footer { - box-sizing: border-box; - display: flex; - flex-wrap: wrap; - gap: 0.58rem; - width: 100%; - - &>span { - box-sizing: border-box; - padding: 0.28rem 0.68rem; - display: flex; - align-items: center; - height: 1.68rem; - width: max-content; - border: 1px solid #3253b4; - border-radius: 0.88rem; - background-color: #fff; - font-size: 0.72rem; - color: #3253b4; - transition: all .2s ease-in-out; - user-select: none; - cursor: pointer; - - &:hover { - animation: talking-tag-active 0.16s ease-in-out infinite; - } - } - } - } - } - } - - @media screen and (max-width: 888px) { - .vh-talking { - &>main { - &>article { - padding: 1.06rem 0.88rem; - - &>.main { - &>.vh-img-flex { - grid-template-columns: repeat(auto-fit, minmax(46%, 1fr)); - } - } - } - } - } - } - - @keyframes talking-tag-active { - 0% { - transform: translateX(0); - } - - 25% { - transform: translateX(-1.66px); - } - - 50% { - transform: translateX(1.66px); - } - - 75% { - transform: translateX(-1.66px); - } - - 100% { - transform: translateX(0); - } - } \ No newline at end of file diff --git a/src/styles/ToolLayout.less b/src/styles/ToolLayout.less new file mode 100644 index 0000000..42c5549 --- /dev/null +++ b/src/styles/ToolLayout.less @@ -0,0 +1,420 @@ + // 说说页评论 + .vh-tools-main { + gap: 1.25rem; + + &>main { + box-sizing: border-box; + border-radius: 0.5rem; + width: 100%; + height: max-content; + + &.main { + + // 友情链接 + &.links-main { + padding: 1rem; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; + background-color: #fff; + box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); + + + &>a { + position: relative; + box-sizing: border-box; + padding: 0 1rem; + display: flex; + align-items: center; + gap: 0.6rem; + width: 100%; + height: 5.5rem; + border-radius: 0.88rem; + transition: background-color 0.16s ease-in-out; + overflow: hidden; + z-index: 1; + + &:hover { + background-color: var(--vh-color-default); + + &>.avatar { + transform: scale(1.2) rotate(8deg); + } + } + + &>.avatar { + flex-shrink: 0; + box-sizing: border-box; + padding: 0.18rem; + width: 3.36rem; + height: 3.36rem; + border-radius: 50%; + border: solid 1px #E8E8E8; + overflow: hidden; + opacity: 1; + transition: all .16s; + } + + &>.link-info { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + gap: 0.388rem; + width: 100%; + height: 100%; + overflow: hidden; + z-index: 1; + + &>span { + font-size: 1rem; + font-weight: bold; + line-height: 1rem; + } + + &>p { + box-sizing: border-box; + width: 100%; + height: max-content; + font-size: 0.81rem; + color: #858585; + line-height: 1rem; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + text-overflow: ellipsis; + word-break: break-all; + overflow: hidden; + } + } + } + } + + // 圈子 + &.friends-main { + display: flex; + flex-direction: column; + gap: 1.25rem; + + &>.vh-space-loading { + background-color: #fff; + box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); + } + + &>article { + box-sizing: border-box; + padding: 1rem; + width: 100%; + height: max-content; + border-radius: 0.5rem; + box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); + background: #fff linear-gradient(90deg, #EDEEF388, #fff) no-repeat 100% 100% / 0 1px; + background-position: 0 100%; + background-size: 0 100%; + transition: .7s cubic-bezier(.6, .1, 0, 1), background-position 0s; + overflow: hidden; + + &:hover { + background-size: 100% 100%; + } + + &>a { + display: flex; + flex-direction: column; + gap: 0.5rem; + width: 100%; + height: max-content; + + &>header { + &>h2 { + margin: 0; + font-size: 1.08rem; + + &::before { + display: none; + } + } + } + + &>p { + padding: 0; + color: #26262680; + font-size: 0.875rem; + line-height: 1.8; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + text-overflow: ellipsis; + word-break: break-all; + overflow: hidden; + } + + &>footer { + box-sizing: border-box; + display: flex; + justify-content: space-between; + width: 100%; + height: max-content; + overflow: hidden; + + &>span, + &>time { + box-sizing: border-box; + display: flex; + align-items: center; + gap: 0.5rem; + height: 1.56rem; + font-size: 0.8rem; + overflow: hidden; + + &>em { + font-style: normal; + flex: 1; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + &>img { + flex-shrink: 0; + width: 1.56rem; + height: 1.56rem; + border-radius: 50%; + } + } + + &>span { + flex: 1; + } + + &>time { + flex-shrink: 0; + width: max-content; + padding: 0.5rem; + background: #F7F7F7; + border-radius: 0.8rem; + } + } + } + } + } + + // 动态 + &.talking-main { + display: flex; + flex-direction: column; + gap: 1.25rem; + + &>.vh-space-loading { + background-color: #fff; + box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); + } + + &>article { + box-sizing: border-box; + padding: 2.188rem 1.875rem; + display: flex; + flex-direction: column; + border-radius: 0.5rem; + background-color: #fff; + box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05); + overflow: hidden; + + &>header { + display: flex; + align-items: center; + gap: 0.626rem; + width: 100%; + height: 2.5rem; + + &>img { + flex-shrink: 0; + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + } + + &>.info { + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; + height: 100%; + line-height: 1.26rem; + overflow: hidden; + + &>span { + font-size: 0.875rem; + } + + &>time { + font-size: 0.7rem; + color: #858585; + } + } + } + + // 说说内容样式 + &>.main { + box-sizing: border-box; + padding: 1rem 0; + font-size: 0.875rem; + font-weight: 500; + + img { + width: 100%; + height: auto; + aspect-ratio: 3 / 2; + border-radius: 0.375rem; + object-fit: contain; + overflow: hidden; + cursor: zoom-in; + cursor: -moz-zoom-in; + cursor: -webkit-zoom-in; + } + + &>.vh-img-flex { + box-sizing: border-box; + padding: 0.8rem 0; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(30%, 1fr)); + gap: 0.66rem; + width: 100%; + height: max-content; + max-height: 50%; + overflow: hidden; + + &>img { + height: 100%; + object-fit: cover; + } + } + + // 说说定位样式 + &>.geographical-location { + display: flex; + align-items: center; + gap: 0.2rem; + font-style: normal; + font-size: 14px; + color: #49c7cc; + + &::before { + content: ''; + width: 14px; + height: 14px; + background: url('/public/assets/images/local.svg') no-repeat; + background-size: contain; + } + } + } + + + + &>footer { + box-sizing: border-box; + display: flex; + flex-wrap: wrap; + gap: 0.58rem; + width: 100%; + + &>span { + box-sizing: border-box; + padding: 0.28rem 0.68rem; + display: flex; + align-items: center; + height: 1.68rem; + width: max-content; + border: 1px solid #3253b4; + border-radius: 0.88rem; + background-color: #fff; + font-size: 0.72rem; + color: #3253b4; + transition: all .2s ease-in-out; + user-select: none; + cursor: pointer; + + &:hover { + animation: talking-tag-active 0.16s ease-in-out infinite; + } + } + } + } + } + + // 留言 + &.message-main { + display: none; + } + } + + } + } + + + @media screen and (max-width: 1088px) { + .vh-tools-main { + &>main { + &.main { + + // 友情链接 + &.links-main { + grid-template-columns: repeat(2, 1fr); + } + + // 动态 + &.talking-main { + &>article { + padding: 1.06rem 0.88rem; + + &>.main { + &>.vh-img-flex { + grid-template-columns: repeat(auto-fit, minmax(46%, 1fr)); + } + } + } + } + } + } + } + } + + @media screen and (max-width: 568px) { + .vh-tools-main { + &>main { + &.main { + &.links-main { + grid-template-columns: repeat(1, 1fr); + } + } + } + } + } + + + + + + + // 动画效果 + @keyframes talking-tag-active { + 0% { + transform: translateX(0); + } + + 25% { + transform: translateX(-1.66px); + } + + 50% { + transform: translateX(1.66px); + } + + 75% { + transform: translateX(-1.66px); + } + + 100% { + transform: translateX(0); + } + } \ No newline at end of file