gitea-yuany3721/vuepress-theme-plume
1
0
Fork 1
mirror of https://github.com/pengzhanbo/vuepress-theme-plume.git synced 2026-04-26 11:38:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 博客相关页面 外观切换过渡效果，hover 效果

Browse Source
This commit is contained in:
pengzhanbo 2024-02-04 10:17:35 +08:00
parent 13f7421022
commit a44a6ad2ee
7 changed files with 56 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
theme/src/client/components/Archives.vue
View File

@ -80,6 +80,12 @@ const { archives } = useArchives()
background-color: var(--vp-c-bg);
border-bottom: none;
border-radius: 8px;
box-shadow: var(--vp-shadow-1);
transition: var(--t-color);
transition-property: border-bottom, box-shadow, background-color;
}
.archive:hover {
box-shadow: var(--vp-shadow-2);
}
@ -87,6 +93,7 @@ const { archives } = useArchives()
padding-bottom: 10px;
margin-top: 0;
border-bottom: solid 1px var(--vp-c-divider);
transition: border-bottom var(--t-color);
}
}

6
theme/src/client/components/BackToTop.vue
View File

@ -86,8 +86,8 @@ function handleClick() {
border-radius: 100%;
box-shadow: var(--vp-shadow-2);
transition:
background-color 0.25s ease,
box-shadow 0.25s ease;
background-color var(--t-color),
box-shadow var(--t-color);
}
.back-to-top-button .percent,
@ -96,7 +96,7 @@ function handleClick() {
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s ease;
transition: opacity 0.5s ease, color var(--t-color);
}
.back-to-top-button .percent.show,

2
theme/src/client/components/Backdrop.vue
View File

@ -23,7 +23,7 @@ defineProps<{
left: 0;
z-index: var(--vp-z-index-backdrop);
background: var(--vp-backdrop-bg-color);
transition: opacity 0.5s;
transition: opacity var(--t-color);
}
.backdrop.fade-enter-from,

7
theme/src/client/components/Blog.vue
View File

@ -24,6 +24,7 @@ const page = usePageData<PlumeThemePageData>()
<style scoped>
.blog-wrapper {
position: relative;
min-height: calc(100vh - var(--vp-footer-height, 0px));
}
@ -45,6 +46,12 @@ const page = usePageData<PlumeThemePageData>()
padding-top: var(--vp-nav-height);
margin-top: calc(var(--vp-nav-height) * -1);
background-color: var(--vp-c-bg-alt);
transition: background-color var(--t-color);
}
.blog-container {
position: relative;
z-index: 2;
}
}

25
theme/src/client/components/BlogAside.vue
View File

@ -78,7 +78,21 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
margin-bottom: 24px;
background-color: var(--vp-c-bg);
border-radius: 8px;
box-shadow: var(--vp-shadow-1);
transition: var(--t-color);
transition-property: background-color, color, box-shadow, transform;
transform: scale(1);
}
.avatar-profile:hover {
box-shadow: var(--vp-shadow-2);
transform: scale(1.002);
}
.avatar-profile h3,
.avatar-profile p {
color: var(--vp-c-text-1);
transition: color var(--t-color);
}
.avatar-profile .circle img {
@ -102,8 +116,15 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
color: var(--vp-c-text-1);
background-color: var(--vp-c-bg);
border-radius: 8px;
box-shadow: var(--vp-shadow-1);
transition: var(--t-color);
transition-property: background-color, color, box-shadow, transform;
transform: scale(1);
}
.nav-link:hover {
box-shadow: var(--vp-shadow-2);
transition: color var(--t-color);
transform: scale(1.002);
}
.nav-link:hover,
@ -120,6 +141,7 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
.nav-link .total {
padding-right: 8px;
color: var(--vp-c-text-3);
transition: color var(--t-color);
}
.nav-link .icon {
@ -127,6 +149,7 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
height: 1em;
font-size: 1.2em;
color: var(--vp-c-text-3);
transition: color var(--t-color);
}
.nav-link .icon-logo {

3
theme/src/client/components/BlogExtract.vue
View File

@ -98,11 +98,14 @@ const showBlogExtract = computed(() => {
border-top-left-radius: 99px;
border-bottom-left-radius: 99px;
box-shadow: var(--vp-shadow-2);
transition: var(--t-color);
transition-property: background-color, border, box-shadow;
}
.blog-extract .icon {
font-size: 16px;
color: var(--vp-c-text-2);
transition: color var(--t-color);
}
@media (min-width: 768px) {

13
theme/src/client/components/Tags.vue
View File

@ -58,6 +58,7 @@ const { tags: tagsLink } = useBlogExtract()
font-size: 20px;
font-weight: 700;
color: var(--vp-c-text-1);
transition: color var(--t-color);
}
.tags-title .icon {
@ -95,6 +96,7 @@ const { tags: tagsLink } = useBlogExtract()
font-size: 20px;
font-weight: 600;
border-bottom: 1px solid var(--vp-c-divider);
transition: border-bottom var(--t-color);
}
.tag-count {
@ -103,7 +105,7 @@ const { tags: tagsLink } = useBlogExtract()
margin-left: 4px;
color: var(--vp-c-bg);
border-left: 1px solid var(--vp-c-bg);
transition: all var(--t-color);
transition: color var(--t-color), border-left var(--t-color);
}
.tags .tag:hover,
@ -129,7 +131,9 @@ const { tags: tagsLink } = useBlogExtract()
padding: 20px;
background-color: var(--vp-c-bg);
border-radius: 8px;
box-shadow: var(--vp-shadow-2);
box-shadow: var(--vp-shadow-1);
transition: var(--t-color);
transition-property: background-color, box-shadow;
}
.tags-container {
@ -137,6 +141,11 @@ const { tags: tagsLink } = useBlogExtract()
margin-bottom: 24px;
}
.tags-nav:hover,
.tags-container:hover {
box-shadow: var(--vp-shadow-2);
}
.tags-container .tag-title {
margin-top: 0;
}