diff --git a/public/assets/images/enfj.webp b/public/assets/images/enfj.webp new file mode 100644 index 0000000..a98e7cf Binary files /dev/null and b/public/assets/images/enfj.webp differ 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