重构页面结构及逻辑✅
This commit is contained in:
Han
parent
cc202c3552
commit
89acd5b2bd
BIN
public/assets/images/enfj.webp
Normal file
BIN
public/assets/images/enfj.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@ -2,4 +2,4 @@
|
||||
import "../styles/components/Comment.less";
|
||||
---
|
||||
|
||||
<section class="vh-comment"><section></section></section>
|
||||
<section class="vh-comment"><section><section class="vh-space-loading"><span></span><span></span><span></span></section></section></section>
|
||||
|
||||
30
src/layouts/PageLayout.astro
Normal file
30
src/layouts/PageLayout.astro
Normal file
@ -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";
|
||||
---
|
||||
|
||||
<Layout title={frontmatter.title || Title} description={Description}>
|
||||
<section class="vh-container">
|
||||
<section class="vh-about vh-animation vh-animation-init">
|
||||
<header class="vh-page-header">
|
||||
<h1>{frontmatter.h1}</h1>
|
||||
<p>{frontmatter.desc}</p>
|
||||
</header>
|
||||
<main><slot /></main>
|
||||
{Twikoo.envId && frontmatter.comment != false && <Comment envId={Twikoo.envId} />}
|
||||
</section>
|
||||
<Aside />
|
||||
</section>
|
||||
</Layout>
|
||||
31
src/layouts/ToolLayout.astro
Normal file
31
src/layouts/ToolLayout.astro
Normal file
@ -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";
|
||||
---
|
||||
|
||||
<Layout title={frontmatter.title || Title} description={Description}>
|
||||
<section class="vh-container">
|
||||
<section class="vh-tools-main vh-animation vh-animation-init">
|
||||
<header class="vh-page-header">
|
||||
<h1>{frontmatter.h1}</h1>
|
||||
<p>{frontmatter.desc}</p>
|
||||
</header>
|
||||
<main><slot /></main>
|
||||
<main class={`${frontmatter.type}-main main`}><section class="vh-space-loading"><span></span><span></span><span></span></section></main>
|
||||
{Twikoo.envId && frontmatter.comment != false && <Comment envId={Twikoo.envId} />}
|
||||
</section>
|
||||
<Aside />
|
||||
</section>
|
||||
</Layout>
|
||||
@ -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";
|
||||
---
|
||||
|
||||
<Layout title="关于" description={Description}>
|
||||
<section class="vh-container">
|
||||
<section class="vh-about vh-animation vh-animation-init">
|
||||
<header class="vh-page-header">
|
||||
<h1>关于我</h1>
|
||||
<p>Hi there, I’m Han 👋</p>
|
||||
</header>
|
||||
<main>
|
||||
<p>我是一名热爱前端开发并拥有丰富经验的工程师，喜欢探索新技术并应用于实际项目中。 我始终保持对新技术的热情，并将我的知识与经验分享在我的博客中。我期待在这里与你分享我的见解、经验和最新的技术动态。</p>
|
||||
<h3>🌟 Languages and Tools</h3>
|
||||
<div class="language-tool">
|
||||
<a href="https://www.w3.org/html/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white" alt="HTML5" /></a>
|
||||
<a href="https://nodejs.org" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=node.js&logoColor=white" alt="Node.js" /></a>
|
||||
<a href="https://www.php.net/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/php-3776AB?style=for-the-badge&logo=php&logoColor=white" alt="PHP" /></a>
|
||||
<a href="https://www.python.org" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white" alt="Python" /></a>
|
||||
<a href="https://git-scm.com/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white" alt="Git" /> </a>
|
||||
<a href="https://www.linux.org/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Linux-FCC624?style=for-the-badge&logo=linux&logoColor=black" alt="Linux" /></a>
|
||||
<a href="https://www.nginx.com" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Nginx-009639?style=for-the-badge&logo=nginx&logoColor=white" alt="Nginx" /></a>
|
||||
<a href="https://www.docker.com/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Docker-2496ED?style=for-the-badge&logo=docker&logoColor=white" alt="Docker" /></a>
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Vue.js-4FC08D?style=for-the-badge&logo=vue.js&logoColor=white" alt="Vue.js" /></a>
|
||||
<a href="https://vitejs.dev/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white" alt="Vite" /></a>
|
||||
<a href="https://webpack.js.org" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Webpack-8DD6F9?style=for-the-badge&logo=webpack&logoColor=black" alt="Webpack" /></a>
|
||||
<a href="https://www.electronjs.org" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Electron-47848F?style=for-the-badge&logo=electron&logoColor=white" alt="Electron" /></a>
|
||||
<a href="https://expressjs.com" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Express-000000?style=for-the-badge&logo=express&logoColor=white" alt="Express" /></a>
|
||||
<a href="https://tailwindcss.com/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white" alt="Tailwind CSS" /></a>
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black" alt="JavaScript" /></a>
|
||||
<a href="https://www.sqlite.org/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/SQLite-003B57?style=for-the-badge&logo=sqlite&logoColor=white" alt="SQLite" /></a>
|
||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/VS_Code-007ACC?style=for-the-badge&logo=visual-studio-code&logoColor=white" alt="VS Code" /></a>
|
||||
</div>
|
||||
</main>
|
||||
{Twikoo.envId && <Comment envId={Twikoo.envId} />}
|
||||
</section>
|
||||
<Aside />
|
||||
</section>
|
||||
</Layout>
|
||||
71
src/pages/about/index.md
Normal file
71
src/pages/about/index.md
Normal file
@ -0,0 +1,71 @@
|
||||
---
|
||||
title: "关于"
|
||||
h1: "关于我"
|
||||
desc: "Hi there, I’m Han 👋"
|
||||
layout: "../../layouts/PageLayout.astro"
|
||||
---
|
||||
|
||||
:::note{type="info"}
|
||||
我是一名热爱前端开发并拥有丰富经验的工程师，喜欢探索新技术并应用于实际项目中。
|
||||
我始终保持对新技术的热情，并将我的知识与经验分享在我的博客中。我期待在这里与你分享我的见解、经验和最新的技术动态。
|
||||
:::
|
||||
|
||||
## Hi there, I'm Han 👋
|
||||
|
||||
<div class="enfj-dom">
|
||||
<div class="text">
|
||||
<em>主人公</em>
|
||||
<span>ENFJ-A</span>
|
||||
<a class="more-enfj" href="https://www.16personalities.com/ch/enfj-%E4%BA%BA%E6%A0%BC">在 16personalities 了解更多关于 主人公</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Languages and Tools
|
||||
|
||||
<div class="language-tool">
|
||||
<a href="https://www.w3.org/html/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white" alt="HTML5" /></a>
|
||||
<a href="https://nodejs.org" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=node.js&logoColor=white" alt="Node.js" /></a>
|
||||
<a href="https://www.php.net/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/php-3776AB?style=for-the-badge&logo=php&logoColor=white" alt="PHP" /></a>
|
||||
<a href="https://www.python.org" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white" alt="Python" /></a>
|
||||
<a href="https://git-scm.com/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white" alt="Git" /> </a>
|
||||
<a href="https://www.linux.org/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Linux-FCC624?style=for-the-badge&logo=linux&logoColor=black" alt="Linux" /></a>
|
||||
<a href="https://www.nginx.com" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Nginx-009639?style=for-the-badge&logo=nginx&logoColor=white" alt="Nginx" /></a>
|
||||
<a href="https://www.docker.com/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Docker-2496ED?style=for-the-badge&logo=docker&logoColor=white" alt="Docker" /></a>
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Vue.js-4FC08D?style=for-the-badge&logo=vue.js&logoColor=white" alt="Vue.js" /></a>
|
||||
<a href="https://vitejs.dev/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white" alt="Vite" /></a>
|
||||
<a href="https://webpack.js.org" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Webpack-8DD6F9?style=for-the-badge&logo=webpack&logoColor=black" alt="Webpack" /></a>
|
||||
<a href="https://www.electronjs.org" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Electron-47848F?style=for-the-badge&logo=electron&logoColor=white" alt="Electron" /></a>
|
||||
<a href="https://expressjs.com" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Express-000000?style=for-the-badge&logo=express&logoColor=white" alt="Express" /></a>
|
||||
<a href="https://tailwindcss.com/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white" alt="Tailwind CSS" /></a>
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black" alt="JavaScript" /></a>
|
||||
<a href="https://www.sqlite.org/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/SQLite-003B57?style=for-the-badge&logo=sqlite&logoColor=white" alt="SQLite" /></a>
|
||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener nofollow"><Image width="1" height="1" src="/assets/images/lazy-loading.webp" data-vh-lz-src="https://img.shields.io/badge/VS_Code-007ACC?style=for-the-badge&logo=visual-studio-code&logoColor=white" alt="VS Code" /></a>
|
||||
</div>
|
||||
|
||||
## 小站点
|
||||
|
||||
| 主 页 | <https://www.4ce.cn> |
|
||||
| :-----------------: | :-----------------: |
|
||||
| **博 客** | **<https://www.vvhan.com>** |
|
||||
| **Web API** | **<https://api.vvhan.com>** |
|
||||
| **Han Analytics** | **<https://analytics.vvhan.com>** |
|
||||
| **Cloudflare 优选** | **<https://cf.vvhan.com>** |
|
||||
|
||||
## 联系我
|
||||
|
||||
```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();
|
||||
```
|
||||
|
||||
<style>.enfj-dom{margin:1rem 0;position:relative;box-sizing:border-box;padding:1rem 2rem;display:flex;justify-content:space-between;width:100%;height:16rem;background:#fff;border:1px solid #e3e8f7;border-radius:12px;box-shadow:0 8px 16px -4px #2c2d300c;overflow:hidden;background:url("/assets/images/enfj.webp") no-repeat;background-size:8.8rem auto;background-position:right 2rem;transition:all .36s}.enfj-dom:hover{background-position:right 1.6rem}.enfj-dom>.text{display:flex;flex-direction:column;width:100%}.enfj-dom>.text>em,.enfj-dom>.text>span{padding:0;margin:0;font-size:2rem;cursor:default;line-height:2.6rem;font-style:normal}.enfj-dom>.text>span{font-weight:bold;color:#33a474}.enfj-dom>.text>a.more-enfj{margin-top:auto;color:#999 !important;font-size:.88rem !important;text-decoration:none !important}</style>
|
||||
@ -32,6 +32,8 @@ import Comment from "../../components/Comment.astro";
|
||||
import GoogleAd from "../../components/GoogleAd.astro";
|
||||
// 文章页面样式
|
||||
import "../../styles/Article.less";
|
||||
// 文章内容基础样式
|
||||
import "../../styles/ArticleBase.less";
|
||||
---
|
||||
|
||||
<Layout title={post.data.title} keywords={post.data.tags} description={description} pagecover={ARTICLE_COVER}>
|
||||
|
||||
@ -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";
|
||||
---
|
||||
|
||||
<Layout title="朋友的新动态" description={Description}>
|
||||
<section class="vh-container">
|
||||
<section class="vh-friends vh-animation vh-animation-init">
|
||||
<header class="vh-page-header">
|
||||
<h1>朋友的新动态 🎴</h1>
|
||||
<p>来看看我的朋友们都在干嘛.</p>
|
||||
</header>
|
||||
<main><section class="vh-space-loading white"><span></span><span></span><span></span></section></main>
|
||||
</section>
|
||||
<Aside />
|
||||
</section>
|
||||
</Layout>
|
||||
11
src/pages/friends/index.md
Normal file
11
src/pages/friends/index.md
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
title: "朋友的新动态"
|
||||
h1: "朋友的新动态 🎴"
|
||||
desc: "来看看我的朋友们都在干嘛."
|
||||
layout: "../../layouts/ToolLayout.astro"
|
||||
type: "friends"
|
||||
---
|
||||
|
||||
:::note{type="error"}
|
||||
如果你是我的邻居，但是没有在这里看到自己，可以立刻马上告诉我你的 RSS 订阅地址噢～
|
||||
:::
|
||||
@ -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";
|
||||
---
|
||||
|
||||
<Layout title="友情链接" description={Description}>
|
||||
<section class="vh-container">
|
||||
<section class="vh-links vh-animation vh-animation-init">
|
||||
<header class="vh-page-header">
|
||||
<h1>朋友圈 👭</h1>
|
||||
<p>天下快意之事莫若友。</p>
|
||||
</header>
|
||||
<main><section class="vh-space-loading"><span></span><span></span><span></span></section></main>
|
||||
{Twikoo.envId && <Comment envId={Twikoo.envId} />}
|
||||
</section>
|
||||
<Aside />
|
||||
</section>
|
||||
</Layout>
|
||||
20
src/pages/links/index.md
Normal file
20
src/pages/links/index.md
Normal file
@ -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: 运气是计划之外的东西.
|
||||
```
|
||||
@ -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";
|
||||
---
|
||||
|
||||
<Layout title="留言" description={Description}>
|
||||
<section class="vh-container">
|
||||
<section class="vh-message vh-animation vh-animation-init" style="gap:1.25rem;">
|
||||
<header class="vh-page-header">
|
||||
<h1>留言板 🌸</h1>
|
||||
<p>快友之事莫若谈。</p>
|
||||
</header>
|
||||
{Twikoo.envId && <Comment envId={Twikoo.envId} />}
|
||||
</section>
|
||||
<Aside />
|
||||
</section>
|
||||
</Layout>
|
||||
11
src/pages/message/index.md
Normal file
11
src/pages/message/index.md
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
title: "留言"
|
||||
h1: "留言板 🌸"
|
||||
desc: "快友之事莫若谈。"
|
||||
layout: "../../layouts/ToolLayout.astro"
|
||||
type: "message"
|
||||
---
|
||||
|
||||
:::note{type="info"}
|
||||
期待你的畅所欲言～
|
||||
:::
|
||||
@ -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";
|
||||
---
|
||||
|
||||
<Layout title="动态" description={Description}>
|
||||
<section class="vh-container">
|
||||
<section class="vh-talking vh-animation vh-animation-init">
|
||||
<header class="vh-page-header">
|
||||
<h1>动态 🥫</h1>
|
||||
<p>记录美好生活.</p>
|
||||
</header>
|
||||
<main><section class="vh-space-loading white"><span></span><span></span><span></span></section></main>
|
||||
{Twikoo.envId && <Comment envId={Twikoo.envId} />}
|
||||
</section>
|
||||
<Aside />
|
||||
</section>
|
||||
</Layout>
|
||||
11
src/pages/talking/index.md
Normal file
11
src/pages/talking/index.md
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
title: "动态"
|
||||
h1: "动态 🥫"
|
||||
desc: "记录美好生活."
|
||||
layout: "../../layouts/ToolLayout.astro"
|
||||
type: "talking"
|
||||
---
|
||||
|
||||
:::note{type="import"}
|
||||
这里记录着我想记录的生活～
|
||||
:::
|
||||
@ -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 = '<section></section>'
|
||||
document.querySelector(commentDOM)!.innerHTML = '<section class="vh-space-loading"><span></span><span></span><span></span></section>'
|
||||
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) })
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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('获取数据失败')
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
}
|
||||
|
||||
&>.language-tool {
|
||||
padding-top: 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.56rem;
|
||||
|
||||
@ -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 {
|
||||
|
||||
604
src/styles/ArticleBase.less
Normal file
604
src/styles/ArticleBase.less
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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) {}
|
||||
@ -33,6 +33,7 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: max-content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
420
src/styles/ToolLayout.less
Normal file
420
src/styles/ToolLayout.less
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user