优化细节

This commit is contained in:
Han 2025-03-21 12:45:30 +08:00
parent c943edf005
commit a4493ada2f
9 changed files with 41 additions and 20 deletions

View File

@ -116,7 +116,7 @@ section.article-list {
box-sizing: border-box; box-sizing: border-box;
width: max-content; width: max-content;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: bold; font-weight: 700;
/* 默认渐变色起始 */ /* 默认渐变色起始 */
--gradient-color-1: #a32cc4; --gradient-color-1: #a32cc4;
/* 默认渐变色中间 */ /* 默认渐变色中间 */

View File

@ -126,8 +126,9 @@ aside.vh-aside {
} }
&>img { &>img {
width: 1.18rem; width: auto;
height: 1.18rem; height: 1.18rem;
object-fit: contain;
} }
} }
} }

View File

@ -247,7 +247,7 @@
border-radius: 2px; border-radius: 2px;
font-size: 0.72rem; font-size: 0.72rem;
border-radius: 4px; border-radius: 4px;
font-weight: bold; font-weight: 700;
line-height: 1.6; line-height: 1.6;
} }
@ -276,7 +276,7 @@
} }
.tk-ruser { .tk-ruser {
font-weight: bold; font-weight: 700;
} }
} }

View File

@ -20,7 +20,7 @@ import "./Header.less";
Navs.map(i => ( Navs.map(i => (
<a class={i.link.replace("/", "")} href={i.link} target={i.target ? "_blank" : "_self"}> <a class={i.link.replace("/", "")} href={i.link} target={i.target ? "_blank" : "_self"}>
{i.text} {i.text}
<Image src={i.icon} alt={i.text} width="10" height="10" /> <Image src={i.icon} alt={`${i.text}图标`} width="10" height="10" />
</a> </a>
)) ))
} }

View File

@ -38,7 +38,7 @@ header.vh-header {
width: max-content; width: max-content;
height: 80%; height: 80%;
font-size: 1rem; font-size: 1rem;
font-weight: bold; font-weight: 700;
z-index: 1; z-index: 1;
transition: all 0.08s ease-in-out; transition: all 0.08s ease-in-out;
user-select: none; user-select: none;

View File

@ -8,7 +8,7 @@ import "./Pagination.less";
<section class="vh-article-pagination"> <section class="vh-article-pagination">
<!-- 上一页 --> <!-- 上一页 -->
<a class={`vh-pagination-item${!data.prev ? " disabled" : ""}`} href={data.prev}> <a class={`vh-pagination-item${!data.prev ? " disabled" : ""}`} href={data.prev || "javascript:;"}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"></path> <path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"></path>
</svg> </svg>
@ -30,7 +30,7 @@ import "./Pagination.less";
) )
} }
<!-- 当前页 --> <!-- 当前页 -->
<a class="vh-pagination-item active">{fmtPage(data.current) || "1"}</a> <a class="vh-pagination-item active" href="javascript:;">{fmtPage(data.current) || "1"}</a>
<!-- 第一页的后一页 --> <!-- 第一页的后一页 -->
{ {
(!data.prev || !data.first) && data.next && ( (!data.prev || !data.first) && data.next && (
@ -48,7 +48,7 @@ import "./Pagination.less";
) )
} }
<!-- 下一页 --> <!-- 下一页 -->
<a class={`vh-pagination-item${!data.next ? " disabled" : ""}`} href={data.next}> <a class={`vh-pagination-item${!data.next ? " disabled" : ""}`} href={data.next || "javascript:;"}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"></path> <path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"></path>
</svg> </svg>

View File

@ -40,6 +40,32 @@
transition: opacity 0.16s, transform 0.16s; transition: opacity 0.16s, transform 0.16s;
user-select: none; user-select: none;
&:hover {
transform: translateY(-0.12rem);
&::before {
pointer-events: auto;
}
&>i {
pointer-events: auto;
opacity: 1;
transform: translate(-50%, -1rem);
}
}
&::before {
pointer-events: none;
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 100%;
width: calc(100vw - 1rem);
max-width: 258px;
height: 100%;
}
&>i { &>i {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
@ -47,8 +73,8 @@
left: 50%; left: 50%;
bottom: 100%; bottom: 100%;
transform: translate(-50%, 0); transform: translate(-50%, 0);
width: 258px; width: calc(100vw - 1rem);
max-width: calc(100vw - 1rem); max-width: 258px;
border-radius: 0.588rem; border-radius: 0.588rem;
aspect-ratio: 6/8; aspect-ratio: 6/8;
background-size: cover; background-size: cover;
@ -58,14 +84,6 @@
transition: opacity 0.16s, transform 0.16s; transition: opacity 0.16s, transform 0.16s;
} }
&:hover {
transform: translateY(-0.12rem);
&>i {
opacity: 1;
transform: translate(-50%, -1rem);
}
}
&.alipay { &.alipay {
background: #00a0e8 url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M377.7%2032H70.3C31.4%2032%200%2063.4%200%20102.3v307.5C0%20448.6%2031.4%20480%2070.3%20480h307.5c38.5%200%2069.8-31.1%2070.3-69.6-46-25.6-110.6-60.3-171.6-88.4-32.1%2044-84.1%2081-148.6%2081-70.6%200-93.7-45.3-97-76.4-4-39%2014.9-81.5%2099.5-81.5%2035.4%200%2079.4%2010.3%20127.1%2025%2016.5-30.1%2026.5-60.3%2026.5-60.3h-178.2v-16.7h92.1v-31.2H88.3v-19h109.4V92.3h50.9v50.4h109.4v19H248.6v31.2h88.8s-15.2%2046.6-38.4%2090.9c48.9%2016.7%20100%2036%20148.6%2052.7V102.3C447.8%2063.6%20416.4%2032%20377.7%2032zM47.3%20323c1%2020.2%2010.3%2053.7%2069.9%2053.7%2052.1%200%2092.6-39.7%20117.9-72.9-44.6-18.7-84.5-31.4-109.4-31.4-67.5%200-79.4%2033.1-78.4%2050.6z%22%2F%3E%3C%2Fsvg%3E') no-repeat; background: #00a0e8 url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M377.7%2032H70.3C31.4%2032%200%2063.4%200%20102.3v307.5C0%20448.6%2031.4%20480%2070.3%20480h307.5c38.5%200%2069.8-31.1%2070.3-69.6-46-25.6-110.6-60.3-171.6-88.4-32.1%2044-84.1%2081-148.6%2081-70.6%200-93.7-45.3-97-76.4-4-39%2014.9-81.5%2099.5-81.5%2035.4%200%2079.4%2010.3%20127.1%2025%2016.5-30.1%2026.5-60.3%2026.5-60.3h-178.2v-16.7h92.1v-31.2H88.3v-19h109.4V92.3h50.9v50.4h109.4v19H248.6v31.2h88.8s-15.2%2046.6-38.4%2090.9c48.9%2016.7%20100%2036%20148.6%2052.7V102.3C447.8%2063.6%20416.4%2032%20377.7%2032zM47.3%20323c1%2020.2%2010.3%2053.7%2069.9%2053.7%2052.1%200%2092.6-39.7%20117.9-72.9-44.6-18.7-84.5-31.4-109.4-31.4-67.5%200-79.4%2033.1-78.4%2050.6z%22%2F%3E%3C%2Fsvg%3E') no-repeat;

View File

@ -22,6 +22,8 @@ import "./Layout.less";
<Head Title={title} Keywords={keywords} Description={description} PageCover={pagecover}> <Head Title={title} Keywords={keywords} Description={description} PageCover={pagecover}>
<!-- 谷歌广告JS加载项 --> <!-- 谷歌广告JS加载项 -->
{ad_Client && (asideAD_Slot || articleAD_Slot) && <script is:inline async src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${ad_Client}`} crossorigin="anonymous" />} {ad_Client && (asideAD_Slot || articleAD_Slot) && <script is:inline async src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${ad_Client}`} crossorigin="anonymous" />}
<!-- MiSans字体 -->
<link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,500,600,700:MiSans" />
</Head> </Head>
<body> <body>
<MobileSidebar /> <MobileSidebar />

View File

@ -68,7 +68,7 @@
&>span { &>span {
font-size: 1rem; font-size: 1rem;
font-weight: bold; font-weight: 700;
line-height: 1rem; line-height: 1rem;
} }