fix(theme): optimize post category styles

pengzhanbo · pengzhanbo · commit 338ca4ad7c34 · 2025-10-12T14:28:04.000+08:00
diff --git a/theme/src/client/components/Posts/VPPostsCategories.vue b/theme/src/client/components/Posts/VPPostsCategories.vue
@@ -7,7 +7,7 @@ const { categories } = usePostsCategory()
 </script>
 
 <template>
-  <div class="vp-categories">
+  <div class="vp-post-categories">
     <slot name="posts-categories-before" />
 
     <h2 class="categories-title">
@@ -26,7 +26,7 @@ const { categories } = usePostsCategory()
 </template>
 
 <style scoped>
-.vp-categories {
+.vp-post-categories {
   flex: 1 2;
   padding: 16px;
   margin: 0 -16px 32px;
@@ -35,15 +35,15 @@ const { categories } = usePostsCategory()
 }
 
 @media (min-width: 768px) {
-  .vp-categories {
+  .vp-post-categories {
     padding: 20px 24px;
     margin: 0 0 32px;
     background-color: var(--vp-c-bg);
     border-radius: 8px;
     box-shadow: var(--vp-shadow-1);
   }
 
-  .vp-categories:hover {
+  .vp-post-categories:hover {
     box-shadow: var(--vp-shadow-2);
   }
 }
@@ -74,12 +74,12 @@ const { categories } = usePostsCategory()
 }
 
 @media (min-width: 1200px) {
-  .vp-categories {
+  .vp-post-categories {
     margin-left: 0;
   }
 }
 
-.vp-categories .content {
+.vp-post-categories .content {
   padding: 20px 0 0;
 }
 </style>

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ const { categories } = usePostsCategory()`
`7`	`7`	`</script>`
`8`	`8`
`9`	`9`	`<template>`
`10`		`- <div class="vp-categories">`
	`10`	`+ <div class="vp-post-categories">`
`11`	`11`	`<slot name="posts-categories-before" />`
`12`	`12`
`13`	`13`	`<h2 class="categories-title">`
`@@ -26,7 +26,7 @@ const { categories } = usePostsCategory()`
`26`	`26`	`</template>`
`27`	`27`
`28`	`28`	`<style scoped>`
`29`		`-.vp-categories {`
	`29`	`+.vp-post-categories {`
`30`	`30`	`flex: 1 2;`
`31`	`31`	`padding: 16px;`
`32`	`32`	`margin: 0 -16px 32px;`
`@@ -35,15 +35,15 @@ const { categories } = usePostsCategory()`
`35`	`35`	`}`
`36`	`36`
`37`	`37`	`@media (min-width: 768px) {`
`38`		`- .vp-categories {`
	`38`	`+ .vp-post-categories {`
`39`	`39`	`padding: 20px 24px;`
`40`	`40`	`margin: 0 0 32px;`
`41`	`41`	`background-color: var(--vp-c-bg);`
`42`	`42`	`border-radius: 8px;`
`43`	`43`	`box-shadow: var(--vp-shadow-1);`
`44`	`44`	`}`
`45`	`45`
`46`		`- .vp-categories:hover {`
	`46`	`+ .vp-post-categories:hover {`
`47`	`47`	`box-shadow: var(--vp-shadow-2);`
`48`	`48`	`}`
`49`	`49`	`}`
`@@ -74,12 +74,12 @@ const { categories } = usePostsCategory()`
`74`	`74`	`}`
`75`	`75`
`76`	`76`	`@media (min-width: 1200px) {`
`77`		`- .vp-categories {`
	`77`	`+ .vp-post-categories {`
`78`	`78`	`margin-left: 0;`
`79`	`79`	`}`
`80`	`80`	`}`
`81`	`81`
`82`		`-.vp-categories .content {`
	`82`	`+.vp-post-categories .content {`
`83`	`83`	`padding: 20px 0 0;`
`84`	`84`	`}`
`85`	`85`	`</style>`