diff --git a/src/assets/index.scss b/src/assets/index.scss
index 9d135006..64c8291d 100644
--- a/src/assets/index.scss
+++ b/src/assets/index.scss
@@ -53,6 +53,7 @@
  * @description 根 html 样式
  * @since Beta v0.3.0
  */
+
 html {
   overflow: auto;
   background: var(--app-page-bg);
@@ -64,6 +65,7 @@ html {
  * @description 侧边滚动条样式
  * @since Beta v0.7.2
  */
+
 ::-webkit-scrollbar {
   width: 4px;
   height: 4px;
diff --git a/src/assets/styles/github.styles.scss b/src/assets/styles/github.styles.scss
index 1beffcc2..af3d1dd1 100644
--- a/src/assets/styles/github.styles.scss
+++ b/src/assets/styles/github.styles.scss
@@ -1,7 +1,7 @@
 /**
  * @file styles/github.styles.scss
  * @description GitHub styles
- * @since Beta v0.7.2
+ * @since Beta v0.7.7
  */
 
 /* Card，传入theme参数 */
@@ -9,11 +9,11 @@
   @include github-card-shadow($theme);
 
   @if $theme == "default" {
-    border: 1px solid #d1d9e0;
-    background: #ffffff;
+    border: 1px solid #d1d9e0ff;
+    background: #ffffffff;
   } @else {
-    border: 1px solid #3d444d;
-    background: #0d1117;
+    border: 1px solid #3d444dff;
+    background: #0d1117ff;
   }
 }
 
@@ -21,23 +21,23 @@
 @mixin github-card-shadow($theme: "default") {
   @if $theme == "default" {
     box-shadow:
-      rgba(31, 35, 40, 0.06) 0 1px 1px 0,
-      rgba(31, 35, 40, 0.06) 0 1px 3px 0;
+      #1f23280f 0 1px 1px 0,
+      #1f23280f 0 1px 3px 0;
   } @else {
     box-shadow:
-      rgba(1, 4, 9, 0.6) 0 1px 1px 0,
-      rgba(1, 4, 9, 0.6) 0 1px 3px 0;
+      #01040999 0 1px 1px 0,
+      #01040999 0 1px 3px 0;
   }
 }
 
 /* Btn，传入theme参数 */
 @mixin github-btn($theme: "default") {
   @if $theme == "default" {
-    border: 1px solid #d1d9e0;
-    background: #f6f8fa;
+    border: 1px solid #d1d9e0ff;
+    background: #f6f8faff;
   } @else {
-    border: 1px solid #3d444d;
-    background: #212830;
+    border: 1px solid #3d444dff;
+    background: #212830ff;
   }
 }
 
diff --git a/src/components/app/t-backTop.vue b/src/components/app/t-backTop.vue
index 6343f242..0375a614 100644
--- a/src/components/app/t-backTop.vue
+++ b/src/components/app/t-backTop.vue
@@ -65,6 +65,7 @@ onUnmounted(() => window.removeEventListener("scroll", handleScroll));
 }
 
 /* 动画 */
+
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.5s;
diff --git a/src/components/app/t-gameNav.vue b/src/components/app/t-gameNav.vue
index c7fd6191..a76c7171 100644
--- a/src/components/app/t-gameNav.vue
+++ b/src/components/app/t-gameNav.vue
@@ -139,7 +139,6 @@ async function toBBS(link: URL): Promise<void> {
 }
 
 .tgn-nav {
-  @include github-styles.github-card();
   display: flex;
   align-items: center;
   justify-content: center;
@@ -147,6 +146,8 @@ async function toBBS(link: URL): Promise<void> {
   border-radius: 4px;
   color: var(--tgc-white-1);
   cursor: pointer;
+
+  @include github-styles.github-card;
 }
 
 .dark .tgn-nav {
diff --git a/src/components/app/t-mi-img.vue b/src/components/app/t-mi-img.vue
index 5e90cf81..1b910ad0 100644
--- a/src/components/app/t-mi-img.vue
+++ b/src/components/app/t-mi-img.vue
@@ -58,11 +58,11 @@ onUnmounted(() => {
 </script>
 <style lang="scss" scoped>
 .progress {
+  position: relative;
+  display: flex;
   width: 25px;
   height: 25px;
-  display: flex;
-  position: relative;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
 }
 </style>
diff --git a/src/components/app/t-overlay.vue b/src/components/app/t-overlay.vue
index 23636685..aea61209 100644
--- a/src/components/app/t-overlay.vue
+++ b/src/components/app/t-overlay.vue
@@ -88,8 +88,8 @@ function toClick(): void {
   align-items: center;
   justify-content: center;
   border-radius: 8px;
-  -webkit-backdrop-filter: blur(v-bind(blurVal));
-  backdrop-filter: blur(v-bind(blurVal));
-  background: rgb(0 0 0 / 50%);
+  -webkit-backdrop-filter: blur(v-bind(blurVal)); /* stylelint-disable-line value-keyword-case */
+  backdrop-filter: blur(v-bind(blurVal)); /* stylelint-disable-line value-keyword-case */
+  background: #00000080;
 }
 </style>
diff --git a/src/components/app/t-postcard.vue b/src/components/app/t-postcard.vue
index 2a7b7f9a..e1821512 100644
--- a/src/components/app/t-postcard.vue
+++ b/src/components/app/t-postcard.vue
@@ -285,7 +285,6 @@ function onUserClick(): void {
 @use "@styles/github.styles.scss" as github-styles;
 
 .tpc-card {
-  @include github-styles.github-card();
   position: relative;
   display: flex;
   overflow: hidden;
@@ -300,6 +299,8 @@ function onUserClick(): void {
   &.select-mode {
     cursor: pointer;
   }
+
+  @include github-styles.github-card;
 }
 
 .dark .tpc-card {
@@ -375,7 +376,6 @@ function onUserClick(): void {
 }
 
 .tpc-tag {
-  @include github-styles.github-tag-dark-gen(#e06c63);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -387,17 +387,19 @@ function onUserClick(): void {
   &:hover {
     @include github-styles.github-tag-dark-gen(#00aeec);
   }
+
+  @include github-styles.github-tag-dark-gen(#e06c63);
 }
 
 .tpc-reason {
-  @include github-styles.github-tag-dark-gen(#d19a66);
-
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 4px;
   border-radius: 4px;
   gap: 4px;
+
+  @include github-styles.github-tag-dark-gen(#d19a66);
 }
 
 .tpc-forum {
@@ -464,8 +466,8 @@ function onUserClick(): void {
   color: var(--box-text-7);
   font-size: 12px;
   gap: 2px;
-  white-space: nowrap;
   opacity: 0.6;
+  white-space: nowrap;
 }
 
 .tpc-act {
@@ -478,25 +480,25 @@ function onUserClick(): void {
   justify-content: space-between;
   -webkit-backdrop-filter: blur(20px);
   backdrop-filter: blur(20px);
-  background: rgb(0 0 0/50%);
+  background: #00000080;
   font-size: 12px;
 }
 
 .tpc-image-cnt {
   position: absolute;
-  bottom: 0;
   right: 0;
+  bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 8px;
+  background: var(--tgc-od-blue);
   border-top-left-radius: 12px;
+  box-shadow: -2px -2px 8px var(--tgc-dark-1);
+  color: var(--tgc-white-1);
   column-gap: 2px;
   font-size: 12px;
-  color: var(--tgc-white-1);
-  background: var(--tgc-od-blue);
   opacity: 0.8;
-  box-shadow: -2px -2px 8px var(--tgc-dark-1);
 }
 
 .tpc-status {
@@ -505,7 +507,7 @@ function onUserClick(): void {
   align-items: center;
   justify-content: flex-start;
   padding: 4px 30px 4px 4px;
-  background-color: v-bind(cardBg);
+  background-color: v-bind(cardBg); /* stylelint-disable-line value-keyword-case */
   clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
   color: var(--tgc-white-1);
 
@@ -515,7 +517,7 @@ function onUserClick(): void {
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgb(255 255 255/40%);
+    background: #ffffff66;
     clip-path: polygon(
       calc(100% - 25px) 0,
       100% 0,
diff --git a/src/components/app/to-nameCard.vue b/src/components/app/to-nameCard.vue
index ab01e61c..5c49f4ea 100644
--- a/src/components/app/to-nameCard.vue
+++ b/src/components/app/to-nameCard.vue
@@ -158,23 +158,23 @@ async function shareNameCard(): Promise<void> {
   padding: 8px;
   border-radius: 4px;
   backdrop-filter: blur(5px);
-  background: rgb(0 0 0 / 25%);
+  background: #00000040;
   color: var(--tgc-white-1);
 }
 
 .dark .ton-content {
-  background: rgb(0 0 0/ 50%);
+  background: #00000080;
 }
 
 .ton-content :first-child {
   font-family: var(--font-title);
   font-size: 20px;
-  text-shadow: 0 0 5px rgb(0 0 0/80%);
+  text-shadow: 0 0 5px #000000cc;
 }
 
 .ton-content :nth-child(2) {
   border-bottom: 1px dotted var(--tgc-white-1);
-  text-shadow: 0 0 2px rgb(0 0 0/80%);
+  text-shadow: 0 0 2px #000000cc;
   white-space: pre-wrap;
 }
 
diff --git a/src/components/app/top-nameCard.vue b/src/components/app/top-nameCard.vue
index c375b5e0..bf4352ed 100644
--- a/src/components/app/top-nameCard.vue
+++ b/src/components/app/top-nameCard.vue
@@ -39,15 +39,13 @@ const bgImage = computed<string>(() => {
 @use "@styles/github.styles.scss" as github-styles;
 
 .top-nc-box {
-  @include github-styles.github-card-shadow();
-
   width: 100%;
   height: 80px;
   border: 1px solid var(--common-shadow-1);
   border-radius: 4px 50px 50px 4px;
   margin-bottom: 8px;
   background-color: var(--box-bg-1);
-  background-image: v-bind(bgImage);
+  background-image: v-bind(bgImage); /* stylelint-disable-line value-keyword-case */
   background-position: right;
   background-repeat: no-repeat;
   cursor: pointer;
@@ -61,6 +59,8 @@ const bgImage = computed<string>(() => {
   &.grey:hover {
     filter: grayscale(0);
   }
+
+  @include github-styles.github-card-shadow;
 }
 
 .dark .top-nc-box {
diff --git a/src/components/func/dialog.vue b/src/components/func/dialog.vue
index 4884ccc2..a457a372 100644
--- a/src/components/func/dialog.vue
+++ b/src/components/func/dialog.vue
@@ -197,6 +197,10 @@ defineExpose({ displayInputBox, displayCheckBox });
 }
 
 .dialog-overlay {
+  /* 颜色变量 */
+  --dialog-title: var(--tgc-dark-7);
+  --dialog-bg: var(--tgc-white-1);
+
   position: fixed;
   z-index: 100;
   top: 0;
@@ -208,13 +212,10 @@ defineExpose({ displayInputBox, displayCheckBox });
   justify-content: center;
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
-
-  /* 颜色变量 */
-  --dialog-title: var(--tgc-dark-7);
-  --dialog-bg: var(--tgc-white-1);
 }
 
 /* 深色模式 */
+
 .dark .dialog-overlay {
   --dialog-title: var(--tgc-white-1);
   --dialog-bg: var(--tgc-dark-7);
diff --git a/src/components/func/loading.vue b/src/components/func/loading.vue
index ac3947aa..b7f5638f 100644
--- a/src/components/func/loading.vue
+++ b/src/components/func/loading.vue
@@ -186,6 +186,7 @@ defineExpose({ displayBox });
 }
 
 /* loading */
+
 .loading-circle,
 .loading-circle > div {
   position: relative;
diff --git a/src/components/func/snackbar.vue b/src/components/func/snackbar.vue
index 5fd48773..a0f3321f 100644
--- a/src/components/func/snackbar.vue
+++ b/src/components/func/snackbar.vue
@@ -110,13 +110,13 @@ defineExpose({ displayBox });
   justify-content: center;
   padding: 10px 20px;
   border-radius: 5px;
-  background-color: v-bind(bgColor);
-  box-shadow: 0 0 10px rgb(0 0 0 / 20%);
+  background-color: v-bind(bgColor); /* stylelint-disable-line value-keyword-case */
+  box-shadow: 0 0 10px #00000033;
   word-break: break-all;
 }
 
 .func-snackbar-text {
-  color: #ffffff;
+  color: #ffffffff;
   font-size: 16px;
   font-weight: 500;
 }
diff --git a/src/components/pageAnno/ta-card.vue b/src/components/pageAnno/ta-card.vue
index d6c3ecf4..2c1ef23d 100644
--- a/src/components/pageAnno/ta-card.vue
+++ b/src/components/pageAnno/ta-card.vue
@@ -63,12 +63,13 @@ async function shareAnno(): Promise<void> {
 @use "@styles/github.styles.scss" as github-styles;
 
 .anno-card {
-  @include github-styles.github-card();
   position: relative;
   overflow: hidden;
   width: 100%;
-  border-radius: 6px;
   box-sizing: border-box;
+  border-radius: 6px;
+
+  @include github-styles.github-card;
 }
 
 .dark .anno-card {
@@ -96,15 +97,15 @@ async function shareAnno(): Promise<void> {
 .anno-title {
   position: relative;
   overflow: hidden;
-  max-width: 100%;
   width: fit-content;
+  max-width: 100%;
+  box-sizing: border-box;
   padding: 4px;
+  margin-left: auto;
   cursor: pointer;
   font-size: 18px;
-  margin-left: auto;
   text-overflow: ellipsis;
   white-space: nowrap;
-  box-sizing: border-box;
 }
 
 .anno-info {
@@ -117,7 +118,7 @@ async function shareAnno(): Promise<void> {
   justify-content: space-between;
   -webkit-backdrop-filter: blur(20px);
   backdrop-filter: blur(20px);
-  background: rgb(0 0 0/50%);
+  background: #00000080;
   font-size: 12px;
 }
 
diff --git a/src/components/pageHome/ph-comp-card.vue b/src/components/pageHome/ph-comp-card.vue
index dc2abf2a..62ea9360 100644
--- a/src/components/pageHome/ph-comp-card.vue
+++ b/src/components/pageHome/ph-comp-card.vue
@@ -18,14 +18,14 @@ defineProps<{ append?: boolean }>();
 @use "@styles/github.styles.scss" as github-styles;
 
 .thc-container {
-  @include github-styles.github-card();
-
   position: relative;
   min-height: 100px;
-  padding: 24px 8px 8px;
   box-sizing: border-box;
+  padding: 24px 8px 8px;
   border-radius: 4px;
   margin-top: 24px;
+
+  @include github-styles.github-card;
 }
 
 .dark .thc-container {
@@ -36,16 +36,16 @@ defineProps<{ append?: boolean }>();
 .thc-append {
   position: absolute;
   top: -16px;
-  height: 32px;
   display: flex;
+  height: 32px;
+  box-sizing: border-box;
   align-items: center;
   justify-content: center;
   padding: 0 10px;
+  border: 1px solid var(--tgc-od-white);
   border-radius: 4px;
   background: var(--tgc-od-blue);
   font-family: var(--font-title);
-  border: 1px solid var(--tgc-od-white);
-  box-sizing: border-box;
 }
 
 .thc-title {
diff --git a/src/components/pageHome/ph-pool-card.vue b/src/components/pageHome/ph-pool-card.vue
index ae62bca8..679bcc74 100644
--- a/src/components/pageHome/ph-pool-card.vue
+++ b/src/components/pageHome/ph-pool-card.vue
@@ -228,10 +228,10 @@ async function toPool(): Promise<void> {
   width: auto;
   max-width: 280px;
   height: 60px;
-  margin: 8px;
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-start;
+  margin: 8px;
   gap: 8px;
 
   &::-webkit-scrollbar-thumb {
diff --git a/src/components/pageHome/ph-position-card.vue b/src/components/pageHome/ph-position-card.vue
index 2241335c..d4151905 100644
--- a/src/components/pageHome/ph-position-card.vue
+++ b/src/components/pageHome/ph-position-card.vue
@@ -99,10 +99,10 @@ onUnmounted(() => {
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
+  border: 1px solid var(--common-shadow-1);
   border-radius: 4px;
   background: var(--box-bg-1);
   color: var(--box-text-1);
-  border: 1px solid var(--common-shadow-1);
 }
 
 .top {
diff --git a/src/components/pageWiki/twc-weapon.vue b/src/components/pageWiki/twc-weapon.vue
index 832279c9..2ac851ef 100644
--- a/src/components/pageWiki/twc-weapon.vue
+++ b/src/components/pageWiki/twc-weapon.vue
@@ -136,8 +136,8 @@ async function toWiki(): Promise<void> {
 }
 
 .tww-brief-title {
-  width: fit-content;
   display: flex;
+  width: fit-content;
   align-items: center;
   justify-content: center;
   color: var(--common-text-title);
@@ -148,8 +148,8 @@ async function toWiki(): Promise<void> {
   img {
     width: 20px;
     height: 20px;
-    object-fit: contain;
     cursor: pointer;
+    object-fit: contain;
   }
 }
 
diff --git a/src/components/pageWiki/two-source.vue b/src/components/pageWiki/two-source.vue
index ae39fa16..fe84ad64 100644
--- a/src/components/pageWiki/two-source.vue
+++ b/src/components/pageWiki/two-source.vue
@@ -24,7 +24,7 @@ const textColor = computed<string>(() => {
   display: flex;
   width: fit-content;
   align-items: center;
-  color: v-bind(textColor);
+  color: v-bind(textColor); /* stylelint-disable-line value-keyword-case */
   column-gap: 5px;
 }
 </style>
diff --git a/src/components/userAchi/tua-achi.vue b/src/components/userAchi/tua-achi.vue
index b9566d06..c50ff2ed 100644
--- a/src/components/userAchi/tua-achi.vue
+++ b/src/components/userAchi/tua-achi.vue
@@ -96,8 +96,6 @@ async function setAchiStat(stat: boolean): Promise<void> {
 @use "@styles/github.styles.scss" as github-styles;
 
 .achi-container {
-  @include github-styles.github-card();
-
   position: relative;
   display: flex;
   height: 60px;
@@ -107,6 +105,8 @@ async function setAchiStat(stat: boolean): Promise<void> {
   padding: 8px;
   border-radius: 4px;
   cursor: pointer;
+
+  @include github-styles.github-card;
 }
 
 .dark .achi-container {
@@ -114,19 +114,19 @@ async function setAchiStat(stat: boolean): Promise<void> {
 }
 
 .achi-version {
-  @include github-styles.github-tag-dark-gen(#fb7299);
-
   position: absolute;
   top: 0;
   left: 0;
   width: 48px;
-  border-left: unset;
   border-top: unset;
+  border-left: unset;
   border-bottom-right-radius: 20px;
   border-top-left-radius: 4px;
   font-family: var(--font-title);
   font-size: 10px;
   text-align: center;
+
+  @include github-styles.github-tag-dark-gen(#fb7299);
 }
 
 .achi-pre {
@@ -172,14 +172,15 @@ async function setAchiStat(stat: boolean): Promise<void> {
   }
 
   &__progress {
-    @include github-styles.github-tag-dark-gen(#00aeec);
-    padding: 0 4px;
-    border-radius: 4px;
-    height: 21px;
     display: flex;
+    height: 21px;
     align-items: center;
     justify-content: center;
+    padding: 0 4px;
+    border-radius: 4px;
     font-size: 12px;
+
+    @include github-styles.github-tag-dark-gen(#00aeec);
   }
 }
 
diff --git a/src/components/userAchi/tua-series.vue b/src/components/userAchi/tua-series.vue
index fd096b9f..64c6e075 100644
--- a/src/components/userAchi/tua-series.vue
+++ b/src/components/userAchi/tua-series.vue
@@ -99,27 +99,25 @@ function selectSeries(): void {
 @use "@styles/github.styles.scss" as github-styles;
 
 .tuas-card {
-  @include github-styles.github-card();
-
   position: relative;
   display: flex;
+  overflow: hidden;
+  height: 60px;
   align-items: center;
   justify-content: flex-start;
   padding: 8px;
-  height: 60px;
   border-radius: 4px;
   color: var(--box-text-1);
   column-gap: 8px;
   cursor: pointer;
-  overflow: hidden;
 
   &.tuas-selected {
     background: var(--box-bg-1);
   }
 
   &.tuas-radius {
-    border-top-right-radius: 30px;
     border-bottom-right-radius: 30px;
+    border-top-right-radius: 30px;
   }
 
   &:hover {
@@ -129,20 +127,21 @@ function selectSeries(): void {
       }
     }
   }
+
+  @include github-styles.github-card;
 }
 
 .dark .tuas-card {
-  @include github-styles.github-card("dark");
-
   &.tuas-selected {
     background: var(--box-bg-1);
   }
+
+  @include github-styles.github-card("dark");
 }
 
 .tuas-version {
-  @include github-styles.github-tag-dark-gen(#ffa726);
-
   position: absolute;
+  z-index: 3;
   right: 0;
   bottom: 0;
   width: 64px;
@@ -152,21 +151,22 @@ function selectSeries(): void {
   font-family: var(--font-title);
   font-size: 10px;
   text-align: center;
-  z-index: 3;
+
+  @include github-styles.github-tag-dark-gen(#ffa726);
 }
 
 .tuas-reward {
   position: absolute;
+  z-index: 0;
   top: -1px;
   right: -2px;
   height: 62px;
-  z-index: 0;
 
   img {
     height: 100%;
+    filter: grayscale(1);
     object-fit: contain;
     opacity: 0.3;
-    filter: grayscale(1);
     transition: filter 0.5s ease-in-out;
 
     &.finish {
@@ -177,14 +177,14 @@ function selectSeries(): void {
 
 .tuas-icon {
   position: relative;
-  flex-shrink: 0;
+  z-index: 1;
   width: 40px;
   height: 40px;
+  box-sizing: border-box;
+  flex-shrink: 0;
   padding: 5px;
   border-radius: 50%;
-  box-sizing: border-box;
   background: var(--tgc-dark-7);
-  z-index: 1;
 
   img {
     width: 100%;
diff --git a/src/components/userAvatar/tua-avatar-box.vue b/src/components/userAvatar/tua-avatar-box.vue
index 8563c1c3..239d8072 100644
--- a/src/components/userAvatar/tua-avatar-box.vue
+++ b/src/components/userAvatar/tua-avatar-box.vue
@@ -138,8 +138,6 @@ function getWeaponTitle(): string {
 @use "@styles/github.styles.scss" as github-styles;
 
 .tua-ab-box {
-  @include github-styles.github-card();
-
   position: relative;
   display: flex;
   flex-direction: column;
@@ -151,6 +149,8 @@ function getWeaponTitle(): string {
   &:hover .tua-abl-bg {
     filter: grayscale(0);
   }
+
+  @include github-styles.github-card;
 }
 
 .dark .tua-ab-box {
@@ -206,8 +206,8 @@ function getWeaponTitle(): string {
   background: rgb(0 0 0 / 40%);
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
-  font-family: var(--font-title);
   color: var(--tgc-white-1);
+  font-family: var(--font-title);
 }
 
 .tua-abl-fetter {
@@ -231,9 +231,9 @@ function getWeaponTitle(): string {
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
-  row-gap: 4px;
   border-radius: 4px;
   aspect-ratio: 21/10;
+  row-gap: 4px;
 }
 
 .tua-abl-bg {
@@ -285,10 +285,10 @@ function getWeaponTitle(): string {
     display: flex;
     width: 40px;
     height: 40px;
+    box-sizing: border-box;
     align-items: center;
     justify-content: center;
     padding: 5px;
-    box-sizing: border-box;
     border: 1px solid var(--box-bg-4);
     border-radius: 50%;
     background: var(--tgc-dark-7);
@@ -297,9 +297,9 @@ function getWeaponTitle(): string {
 
   :last-child {
     display: flex;
+    width: 48px;
     align-items: center;
     justify-content: center;
-    width: 48px;
     border-radius: 5px;
     background: var(--box-bg-4);
     color: var(--box-text-4);
diff --git a/src/components/userAvatar/tua-dc-prop.vue b/src/components/userAvatar/tua-dc-prop.vue
index 226dc820..150ccce5 100644
--- a/src/components/userAvatar/tua-dc-prop.vue
+++ b/src/components/userAvatar/tua-dc-prop.vue
@@ -30,7 +30,7 @@ function getRightTitle(): string {
 .tua-dcp-box {
   position: relative;
   display: flex;
-  width: v-bind(getWidth);
+  width: v-bind(getWidth); /* stylelint-disable-line value-keyword-case */
   height: 20px;
   align-items: center;
   justify-content: space-between;
diff --git a/src/components/userAvatar/tua-detail-overlay.vue b/src/components/userAvatar/tua-detail-overlay.vue
index d9165527..8b8adfcd 100644
--- a/src/components/userAvatar/tua-detail-overlay.vue
+++ b/src/components/userAvatar/tua-detail-overlay.vue
@@ -106,10 +106,11 @@ function handleClick(pos: "left" | "right"): void {
 
 .tdo-avatars-container {
   position: relative;
-  width: v-bind(avatarsWidth);
+  width: v-bind(avatarsWidth); /* stylelint-disable-line value-keyword-case */
 }
 
 /* stylelint-disable selector-class-pattern */
+
 .tdo-avatars-container :deep(.v-slide-group__next),
 .tdo-avatars-container :deep(.v-slide-group__prev) {
   color: var(--tgc-od-white);
diff --git a/src/components/userAvatarCard/duc-detail-olb.vue b/src/components/userAvatarCard/duc-detail-olb.vue
index 2bf66abc..1f21a3ae 100644
--- a/src/components/userAvatarCard/duc-detail-olb.vue
+++ b/src/components/userAvatarCard/duc-detail-olb.vue
@@ -40,7 +40,7 @@ const props = defineProps<DucDetailOlbProps>();
   border-radius: 50%;
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
-  background: rgb(0 0 0/40%);
+  background: #00000066;
 }
 
 .duc-dolb-lock {
@@ -55,7 +55,7 @@ const props = defineProps<DucDetailOlbProps>();
   border-radius: 50%;
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
-  background-color: rgb(0 0 0 / 40%);
+  background-color: #00000066;
 }
 
 .duc-dolb-icon {
diff --git a/src/components/userAvatarCard/duc-detail-relic.vue b/src/components/userAvatarCard/duc-detail-relic.vue
index 0ebdd4dd..94295145 100644
--- a/src/components/userAvatarCard/duc-detail-relic.vue
+++ b/src/components/userAvatarCard/duc-detail-relic.vue
@@ -37,7 +37,7 @@ const relicBg = computed<string>(() => {
   width: 60px;
   height: 60px;
   border-radius: 50%;
-  background: rgb(50 56 68/50%);
+  background: #32384480;
 }
 
 .duc-dr-bg {
@@ -86,7 +86,7 @@ const relicBg = computed<string>(() => {
   justify-content: center;
   border: 2px solid var(--tgc-od-red);
   border-radius: 50%;
-  background: v-bind(relicBg);
+  background: v-bind(relicBg); /* stylelint-disable-line value-keyword-case */
   color: var(--tgc-white-1);
   font-family: var(--font-title);
   font-size: 12px;
diff --git a/src/components/userAvatarOld/tuc-detail-constellation.vue b/src/components/userAvatarOld/tuc-detail-constellation.vue
index 6cfb1d6f..b99c12d5 100644
--- a/src/components/userAvatarOld/tuc-detail-constellation.vue
+++ b/src/components/userAvatarOld/tuc-detail-constellation.vue
@@ -32,7 +32,7 @@ defineProps<{ modelValue: TGApp.Game.Avatar.Constellation }>();
   justify-content: center;
   padding: 3px;
   border-radius: 50%;
-  background-color: rgb(0 0 0 / 50%);
+  background-color: #00000080;
 }
 
 .tuc-dc-icon {
@@ -42,9 +42,9 @@ defineProps<{ modelValue: TGApp.Game.Avatar.Constellation }>();
   align-items: center;
   justify-content: center;
   padding: 3px;
-  border: 1px solid rgb(0 0 0/20%);
+  border: 1px solid #00000033;
   border-radius: 50%;
-  background: rgb(50 56 68/50%);
+  background: #32384480;
 }
 
 .tuc-dc-icon img {
diff --git a/src/components/userAvatarOld/tuc-detail-old.vue b/src/components/userAvatarOld/tuc-detail-old.vue
index d40925a2..2cc49291 100644
--- a/src/components/userAvatarOld/tuc-detail-old.vue
+++ b/src/components/userAvatarOld/tuc-detail-old.vue
@@ -170,8 +170,8 @@ function switchBg(): void {
   justify-content: center;
   border-radius: 5px;
   margin: 0 auto;
-  object-fit: v-bind(bgFit);
-  transform: translateY(v-bind(bgTransY));
+  object-fit: v-bind(bgFit); /* stylelint-disable-line value-keyword-case */
+  transform: translateY(v-bind(bgTransY)); /* stylelint-disable-line value-keyword-case */
 
   img {
     width: 100%;
@@ -270,6 +270,7 @@ function switchBg(): void {
 }
 
 /* 左侧显示区域 */
+
 .tuc-dol-item {
   position: relative;
   border-radius: 5px;
@@ -300,6 +301,7 @@ function switchBg(): void {
 }
 
 /* 右侧显示区域 */
+
 .tuc-dor-box {
   position: relative;
   width: 100%;
@@ -317,6 +319,7 @@ function switchBg(): void {
 }
 
 /* 环状排列6个命座 */
+
 .tuc-dor-item:nth-child(1) {
   top: 10px;
   left: 10px;
diff --git a/src/components/userAvatarOld/tuc-detail-relic.vue b/src/components/userAvatarOld/tuc-detail-relic.vue
index 571c5ff7..f89dfeae 100644
--- a/src/components/userAvatarOld/tuc-detail-relic.vue
+++ b/src/components/userAvatarOld/tuc-detail-relic.vue
@@ -22,7 +22,7 @@ defineProps<{ modelValue: TGApp.Game.Avatar.Relic | false; pos: number }>();
   width: 60px;
   height: 60px;
   border-radius: 5px;
-  background: rgb(50 56 68/50%);
+  background: #32384480;
 }
 
 .tuc-dr-bg {
diff --git a/src/components/userCombat/tuc-buffs.vue b/src/components/userCombat/tuc-buffs.vue
index 8a5e3c1e..b256e755 100644
--- a/src/components/userCombat/tuc-buffs.vue
+++ b/src/components/userCombat/tuc-buffs.vue
@@ -32,7 +32,9 @@ const columnCnt = computed<number>(() => {
   display: grid;
   width: 100%;
   grid-gap: 4px;
+  /* stylelint-disable value-keyword-case */
   grid-template-columns: repeat(v-bind(columnCnt), 1fr);
+  /* stylelint-enable value-keyword-case */
 }
 
 .tuc-buff-item {
diff --git a/src/components/userGacha/gro-data-line.vue b/src/components/userGacha/gro-data-line.vue
index 05d492ce..d7f06e9b 100644
--- a/src/components/userGacha/gro-data-line.vue
+++ b/src/components/userGacha/gro-data-line.vue
@@ -75,14 +75,14 @@ const progressWidth = computed<string>(() => {
   position: relative;
   display: flex;
   width: 100%;
+  height: 48px;
   box-sizing: border-box;
   align-items: center;
   justify-content: flex-start;
   padding: 8px;
-  height: 48px;
+  border: 1px solid var(--common-shadow-1);
   border-radius: 4px;
   background: var(--box-bg-2);
-  border: 1px solid var(--common-shadow-1);
   column-gap: 4px;
 }
 
@@ -90,11 +90,11 @@ const progressWidth = computed<string>(() => {
   position: absolute;
   bottom: 0;
   left: 0;
-  width: v-bind(progressWidth);
+  width: v-bind(progressWidth); /* stylelint-disable-line value-keyword-case */
   max-width: 100%;
   height: 4px;
   border-radius: 4px;
-  background: v-bind(progressColor);
+  background: v-bind(progressColor); /* stylelint-disable-line value-keyword-case */
 }
 
 .gro-dl-icon {
@@ -119,16 +119,16 @@ const progressWidth = computed<string>(() => {
 }
 
 .gro-dl-name {
-  line-height: 18px;
   color: var(--common-text-title);
   font-family: var(--font-title);
   font-size: 14px;
+  line-height: 18px;
 }
 
 .gro-dl-time {
-  line-height: 14px;
   color: var(--box-text-7);
   font-size: 12px;
+  line-height: 14px;
 }
 
 .gro-dl-info {
@@ -153,7 +153,7 @@ const progressWidth = computed<string>(() => {
   padding: 4px;
   border-radius: 50%;
   background: var(--box-bg-3);
-  color: v-bind(progressColor);
+  color: v-bind(progressColor); /* stylelint-disable-line value-keyword-case */
   font-family: var(--font-title);
   transform: rotate(25deg);
 }
diff --git a/src/components/userGacha/gro-data-view.vue b/src/components/userGacha/gro-data-view.vue
index bd4c834f..5c067f4e 100644
--- a/src/components/userGacha/gro-data-view.vue
+++ b/src/components/userGacha/gro-data-view.vue
@@ -238,8 +238,10 @@ watch(
   padding-right: 4px;
 }
 
-/* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable selector-class-pattern */
+
 :deep(.v-virtual-scroll__item + .v-virtual-scroll__item) {
   margin-top: 8px;
 }
+/* stylelint-enable selector-class-pattern */
 </style>
diff --git a/src/components/userGacha/gro-history.vue b/src/components/userGacha/gro-history.vue
index 13f5d99c..27716c47 100644
--- a/src/components/userGacha/gro-history.vue
+++ b/src/components/userGacha/gro-history.vue
@@ -57,10 +57,12 @@ onMounted(() => {
   height: 100%;
 }
 
-/* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable selector-class-pattern */
+
 .gro-container :deep(.v-tabs.v-slide-group--vertical) {
   max-height: 100%;
 }
+/* stylelint-enable selector-class-pattern */
 
 .gro-window {
   position: relative;
@@ -74,10 +76,12 @@ onMounted(() => {
   overflow-y: scroll;
 }
 
-/* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable selector-class-pattern */
+
 .gro-window :deep(.v-window__container) {
   width: 100%;
 }
+/* stylelint-enable selector-class-pattern */
 
 .gro-pools {
   position: relative;
diff --git a/src/components/userGacha/gro-overview.vue b/src/components/userGacha/gro-overview.vue
index a391f696..151f0251 100644
--- a/src/components/userGacha/gro-overview.vue
+++ b/src/components/userGacha/gro-overview.vue
@@ -57,6 +57,6 @@ watch(
   display: grid;
   height: 100%;
   grid-column-gap: 8px;
-  grid-template-columns: v-bind(cnCols);
+  grid-template-columns: v-bind(cnCols); /* stylelint-disable-line value-keyword-case */
 }
 </style>
diff --git a/src/components/userGacha/ug-his-card.vue b/src/components/userGacha/ug-his-card.vue
index 58bd29e3..d0bfe501 100644
--- a/src/components/userGacha/ug-his-card.vue
+++ b/src/components/userGacha/ug-his-card.vue
@@ -141,8 +141,6 @@ function getBox(id: number): TItemBoxData {
 }
 
 .ug-his-banner {
-  @include github-styles.github-card-shadow();
-
   width: 50vw;
   border-radius: 4px;
   cursor: pointer;
@@ -152,6 +150,8 @@ function getBox(id: number): TItemBoxData {
     scale: 0.95;
     transition: 0.5s ease-in-out;
   }
+
+  @include github-styles.github-card-shadow;
 }
 
 .ug-his-info {
@@ -164,9 +164,9 @@ function getBox(id: number): TItemBoxData {
 
 .ug-his-title {
   display: flex;
-  column-gap: 8px;
   align-items: center;
   justify-content: flex-start;
+  column-gap: 8px;
 
   :first-child {
     color: var(--common-text-title);
@@ -176,15 +176,15 @@ function getBox(id: number): TItemBoxData {
 }
 
 .ug-his-tag {
-  @include github-styles.github-tag-dark-gen(#e06c63);
-
   display: flex;
+  height: fit-content;
   align-items: center;
   justify-content: center;
   padding: 0 8px;
-  height: fit-content;
   border-radius: 4px;
   font-size: 16px;
+
+  @include github-styles.github-tag-dark-gen(#e06c63);
 }
 
 .ug-his-sub {
diff --git a/src/components/userRecord/tur-role-info.vue b/src/components/userRecord/tur-role-info.vue
index 3199b3eb..0e8b78fb 100644
--- a/src/components/userRecord/tur-role-info.vue
+++ b/src/components/userRecord/tur-role-info.vue
@@ -20,17 +20,17 @@ defineProps<TurRoleInfoProps>();
 @use "@styles/github.styles.scss" as github-styles;
 
 .tur-ri-box {
-  @include github-styles.github-card();
-
   position: relative;
   display: flex;
   height: 48px;
+  box-sizing: border-box;
   align-items: center;
   justify-content: center;
-  column-gap: 4px;
-  border-radius: 24px;
   padding: 4px 12px 4px 4px;
-  box-sizing: border-box;
+  border-radius: 24px;
+  column-gap: 4px;
+
+  @include github-styles.github-card;
 }
 
 .dark .tur-ri-box {
@@ -64,20 +64,20 @@ defineProps<TurRoleInfoProps>();
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  color: var(--common-text-title);
   column-gap: 4px;
   font-family: var(--font-title);
-  color: var(--common-text-title);
   font-size: 16px;
   line-height: 20px;
 }
 
 .tur-ri-subtitle {
   display: flex;
-  font-size: 14px;
-  line-height: 16px;
   align-items: center;
   justify-content: flex-start;
-  column-gap: 10px;
   color: var(--box-text-1);
+  column-gap: 10px;
+  font-size: 14px;
+  line-height: 16px;
 }
 </style>
diff --git a/src/components/userRecord/tur-world-sub.vue b/src/components/userRecord/tur-world-sub.vue
index 533926bb..017c73a8 100644
--- a/src/components/userRecord/tur-world-sub.vue
+++ b/src/components/userRecord/tur-world-sub.vue
@@ -69,10 +69,10 @@ const icon = computed<string>(() => {
   align-items: flex-start;
   justify-content: center;
   padding: 8px;
-  border-radius: 4px;
-  column-gap: 4px;
-  background: var(--box-bg-1);
   border: 1px solid var(--common-shadow-1);
+  border-radius: 4px;
+  background: var(--box-bg-1);
+  column-gap: 4px;
 }
 
 .tur-ws-bg {
@@ -92,7 +92,7 @@ const icon = computed<string>(() => {
 .tur-ws-icon img {
   width: 100%;
   height: 100%;
-  filter: v-bind(imgFilter);
+  filter: v-bind(imgFilter); /* stylelint-disable-line value-keyword-case */
 }
 
 .tur-ws-content {
diff --git a/src/components/userScripts/tus-mission.vue b/src/components/userScripts/tus-mission.vue
index 98bd971a..e34201df 100644
--- a/src/components/userScripts/tus-mission.vue
+++ b/src/components/userScripts/tus-mission.vue
@@ -300,24 +300,24 @@ async function autoSign(ck: TGApp.App.Account.Cookie, ch?: string): Promise<void
 <style lang="scss" scoped>
 .tusm-box {
   position: relative;
+  display: flex;
   width: 100%;
   box-sizing: border-box;
-  padding: 12px;
-  background: var(--box-bg-1);
-  border-radius: 4px;
-  border: 1px solid var(--common-shadow-2);
-  display: flex;
   flex-direction: column;
-  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--common-shadow-2);
+  border-radius: 4px;
+  background: var(--box-bg-1);
   color: var(--box-text-1);
+  gap: 8px;
 }
 
 .tusm-top {
   position: relative;
-  width: 100%;
   display: flex;
-  justify-content: space-between;
+  width: 100%;
   align-items: center;
+  justify-content: space-between;
 }
 
 .tusm-title {
@@ -343,14 +343,14 @@ async function autoSign(ck: TGApp.App.Account.Cookie, ch?: string): Promise<void
 
 .mission-item {
   position: relative;
+  display: flex;
   width: 100%;
   box-sizing: border-box;
-  display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px;
-  background: var(--box-bg-2);
   border-radius: 4px;
+  background: var(--box-bg-2);
   color: var(--box-text-2);
 
   .left {
diff --git a/src/components/userScripts/tus-output.vue b/src/components/userScripts/tus-output.vue
index 144e7b34..491b08b9 100644
--- a/src/components/userScripts/tus-output.vue
+++ b/src/components/userScripts/tus-output.vue
@@ -42,26 +42,26 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .tuso-box {
   position: relative;
-  height: 100%;
-  box-sizing: border-box;
   display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-left: auto;
   width: 800px;
   min-width: 800px;
+  height: 100%;
+  box-sizing: border-box;
+  flex-direction: column;
   padding: 12px;
-  background: var(--box-bg-1);
-  border-radius: 4px;
   border: 1px solid var(--common-shadow-2);
+  border-radius: 4px;
+  margin-left: auto;
+  background: var(--box-bg-1);
+  gap: 4px;
 }
 
 .tuso-top {
   position: relative;
-  width: 100%;
   display: flex;
-  justify-content: space-between;
+  width: 100%;
   align-items: flex-end;
+  justify-content: space-between;
 }
 
 .tuso-title {
@@ -83,12 +83,12 @@ onUnmounted(() => {
 .tuso-mid {
   position: relative;
   display: flex;
-  flex-direction: column;
   height: 100%;
-  background: var(--box-bg-2);
-  border-radius: 4px;
-  padding: 8px;
   box-sizing: border-box;
+  flex-direction: column;
+  padding: 8px;
+  border-radius: 4px;
+  background: var(--box-bg-2);
   overflow-y: auto;
 }
 
diff --git a/src/components/userScripts/tus-sign.vue b/src/components/userScripts/tus-sign.vue
index aa49957a..f3b52bdc 100644
--- a/src/components/userScripts/tus-sign.vue
+++ b/src/components/userScripts/tus-sign.vue
@@ -312,24 +312,24 @@ async function trySign(ac: SignAccount[], ck: TGApp.App.Account.Cookie): Promise
 <style lang="scss" scoped>
 .tuss-box {
   position: relative;
+  display: flex;
   width: 100%;
   box-sizing: border-box;
-  padding: 12px;
-  background: var(--box-bg-1);
-  border-radius: 4px;
-  border: 1px solid var(--common-shadow-2);
-  display: flex;
   flex-direction: column;
-  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--common-shadow-2);
+  border-radius: 4px;
+  background: var(--box-bg-1);
   color: var(--box-text-1);
+  gap: 8px;
 }
 
 .tuss-top {
   position: relative;
-  width: 100%;
   display: flex;
-  justify-content: space-between;
+  width: 100%;
   align-items: center;
+  justify-content: space-between;
 }
 
 .tuss-title {
@@ -355,23 +355,23 @@ async function trySign(ac: SignAccount[], ck: TGApp.App.Account.Cookie): Promise
 
 .tuss-item {
   position: relative;
-  width: 100%;
-  box-sizing: border-box;
   display: flex;
+  width: 100%;
+  height: 80px;
+  box-sizing: border-box;
   align-items: center;
   justify-content: flex-start;
-  column-gap: 8px;
   padding: 10px;
-  background: var(--box-bg-2);
   border-radius: 4px;
+  background: var(--box-bg-2);
   color: var(--box-text-2);
-  height: 80px;
+  column-gap: 8px;
   cursor: pointer;
   user-select: none;
 
   &:hover {
-    background: var(--box-bg-3);
     border: 1px solid var(--common-shadow-1);
+    background: var(--box-bg-3);
   }
 }
 
@@ -385,24 +385,24 @@ async function trySign(ac: SignAccount[], ck: TGApp.App.Account.Cookie): Promise
 
 .tuss-icon {
   position: relative;
+  overflow: hidden;
   width: 48px;
   height: 48px;
   border-radius: 4px;
-  overflow: hidden;
 
   img {
-    border-radius: 4px;
     width: 100%;
     height: 100%;
+    border-radius: 4px;
   }
 
   .delete {
     position: absolute;
     bottom: 0;
     left: 0;
+    display: flex;
     width: 16px;
     height: 16px;
-    display: flex;
     align-items: center;
     justify-content: center;
     backdrop-filter: blur(5px);
@@ -413,30 +413,30 @@ async function trySign(ac: SignAccount[], ck: TGApp.App.Account.Cookie): Promise
 
 .tuss-stat {
   position: relative;
-  margin-left: auto;
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-left: auto;
   column-gap: 4px;
 }
 
 .tuss-reward {
   position: relative;
   display: flex;
-  align-items: center;
-  justify-content: center;
   width: 48px;
   height: 48px;
+  align-items: center;
+  justify-content: center;
   border-radius: 50%;
   background: var(--box-bg-4);
 
   img {
     width: 100%;
     height: 100%;
-    border-radius: 50%;
-    padding: 10px;
     box-sizing: border-box;
+    padding: 10px;
     border: 1px solid var(--common-shadow-1);
+    border-radius: 50%;
   }
 
   span {
@@ -445,11 +445,11 @@ async function trySign(ac: SignAccount[], ck: TGApp.App.Account.Cookie): Promise
     width: fit-content;
     min-width: 48px;
     padding: 0 4px;
+    border: 1px solid var(--common-shadow-1);
     border-radius: 12px;
+    background: var(--app-page-bg);
     font-size: 8px;
     text-align: center;
-    background: var(--app-page-bg);
-    border: 1px solid var(--common-shadow-1);
   }
 }
 </style>
diff --git a/src/components/viewPost/tp-avatar.vue b/src/components/viewPost/tp-avatar.vue
index 9a79adf6..3dfc5181 100644
--- a/src/components/viewPost/tp-avatar.vue
+++ b/src/components/viewPost/tp-avatar.vue
@@ -139,7 +139,7 @@ const levelColor = computed<string>(() => {
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background: v-bind(levelColor);
+  background: v-bind(levelColor); /* stylelint-disable-line value-keyword-case */
   color: var(--tgc-white-1);
   font-size: 10px;
   line-height: 18px;
diff --git a/src/components/viewPost/tp-backupText.vue b/src/components/viewPost/tp-backupText.vue
index fdac7662..5eb2a397 100644
--- a/src/components/viewPost/tp-backupText.vue
+++ b/src/components/viewPost/tp-backupText.vue
@@ -48,7 +48,7 @@ console.log("tpBackupText", props.data.insert.backup_text, toRaw(props.data));
 <style lang="css" scoped>
 .tp-backup-lottery {
   margin-right: 4px;
-  color: #00c3ff;
+  color: #00c3ffff;
   cursor: pointer;
 
   :first-child {
diff --git a/src/components/viewPost/tp-emoticon.vue b/src/components/viewPost/tp-emoticon.vue
index 6bc13a46..ee4645f5 100644
--- a/src/components/viewPost/tp-emoticon.vue
+++ b/src/components/viewPost/tp-emoticon.vue
@@ -83,7 +83,7 @@ onUnmounted(() => {
   max-width: 100%;
   height: auto;
   border-radius: 4px;
-  background: v-bind(bgColor);
+  background: v-bind(bgColor); /* stylelint-disable-line value-keyword-case */
 }
 
 .tp-emo-info {
@@ -99,9 +99,9 @@ onUnmounted(() => {
   border-bottom-left-radius: 4px;
   border-top-right-radius: 4px;
   box-shadow: -1px 1px 4px var(--common-shadow-2);
+  cursor: default;
   font-family: var(--font-title);
   font-size: 12px;
-  cursor: default;
   white-space: nowrap;
 }
 </style>
diff --git a/src/components/viewPost/tp-gameCard.vue b/src/components/viewPost/tp-gameCard.vue
index d8478b80..1ff22b02 100644
--- a/src/components/viewPost/tp-gameCard.vue
+++ b/src/components/viewPost/tp-gameCard.vue
@@ -61,25 +61,25 @@ async function toGame(): Promise<void> {
 <style lang="scss" scoped>
 .tp-game-card-box {
   position: relative;
-  margin: 12px 0;
+  display: flex;
   width: 100%;
   box-sizing: border-box;
-  display: flex;
   align-items: center;
   justify-content: flex-start;
-  column-gap: 12px;
   padding: 8px 16px;
-  border-radius: 4px;
-  background: var(--box-bg-1);
   border: 1px solid var(--common-shadow-1);
+  border-radius: 4px;
+  margin: 12px 0;
+  background: var(--box-bg-1);
+  column-gap: 12px;
 }
 
 .icon {
   position: relative;
-  flex-shrink: 0;
+  overflow: hidden;
   width: 80px;
   height: 80px;
-  overflow: hidden;
+  flex-shrink: 0;
 
   img {
     width: 100%;
@@ -97,8 +97,8 @@ async function toGame(): Promise<void> {
 
   span {
     &:first-child {
-      font-family: var(--font-title);
       color: var(--common-text-title);
+      font-family: var(--font-title);
       font-size: 20px;
     }
 
@@ -110,10 +110,10 @@ async function toGame(): Promise<void> {
 
 .act {
   height: 40px;
+  margin-left: auto;
   background: var(--tgc-btn-1);
   color: var(--btn-text);
   font-family: var(--font-title);
-  margin-left: auto;
 }
 
 .dark .act {
diff --git a/src/components/viewPost/tp-image.vue b/src/components/viewPost/tp-image.vue
index 662abbcb..2e53a909 100644
--- a/src/components/viewPost/tp-image.vue
+++ b/src/components/viewPost/tp-image.vue
@@ -113,12 +113,12 @@ function getImageTitle(): string {
 }
 
 .tp-image-box img {
-  width: v-bind(imgWidth);
+  width: v-bind(imgWidth); /* stylelint-disable-line value-keyword-case */
   max-width: 100%;
   height: auto;
   border-radius: 4px;
+  background: v-bind(bgColor); /* stylelint-disable-line value-keyword-case */
   cursor: pointer;
-  background: v-bind(bgColor);
 }
 
 .tp-image-load {
@@ -141,7 +141,7 @@ function getImageTitle(): string {
   justify-content: center;
   border-radius: 50%;
   background: var(--tgc-od-white);
-  box-shadow: 0 0 4px rgb(0 0 0 / 50%);
+  box-shadow: 0 0 4px #00000080;
   cursor: pointer;
 }
 </style>
diff --git a/src/components/viewPost/tp-linkCard.vue b/src/components/viewPost/tp-linkCard.vue
index 886036ea..8fd48de5 100644
--- a/src/components/viewPost/tp-linkCard.vue
+++ b/src/components/viewPost/tp-linkCard.vue
@@ -108,14 +108,14 @@ async function toLink(): Promise<void> {
 
 .tp-link-card-price {
   display: inline-block;
-  color: #ff6d6d;
+  color: #ff6d6dff;
   font-size: 20px;
 }
 
 .tp-link-card-btn {
   display: inline-block;
   margin-left: auto;
-  color: #00c3ff;
+  color: #00c3ffff;
   cursor: pointer;
   text-align: right;
 }
diff --git a/src/components/viewPost/tp-mention.vue b/src/components/viewPost/tp-mention.vue
index 0daab211..3fbf09fc 100644
--- a/src/components/viewPost/tp-mention.vue
+++ b/src/components/viewPost/tp-mention.vue
@@ -29,7 +29,7 @@ async function toLink(): Promise<void> {
   border: 1px solid var(--common-shadow-1);
   border-radius: 4px;
   margin: 2px;
-  color: #00c3ff;
+  color: #00c3ffff;
   cursor: pointer;
 }
 </style>
diff --git a/src/components/viewPost/tp-parser.vue b/src/components/viewPost/tp-parser.vue
index fb708ac3..c2671c86 100644
--- a/src/components/viewPost/tp-parser.vue
+++ b/src/components/viewPost/tp-parser.vue
@@ -94,12 +94,13 @@ function getParsedText(data: TpTextType): Array<TpTextType> {
 function getTpName(tp: TGApp.BBS.SctPost.Base): Component {
   if (tp.children) return TpTexts;
   if (typeof tp.insert === "string") return TpText;
-  // custom_emoticon属于backup_text的一种，必须放在backup_text判断的前面
-  if ("custom_emoticon" in tp.insert) return TpEmoticon;
   // game_user_info属于backup_text的一种，必须放在backup_text判断的前面
   if ("game_user_info" in tp.insert) return TpUid;
   if ("backup_text" in tp.insert) {
-    if (tp.insert.backup_text === "[游戏卡片]") return TpGameCard;
+    if (tp.insert.backup_text === "[游戏卡片]" && "reception_card" in tp.insert) return TpGameCard;
+    if (tp.insert.backup_text === "[自定义表情]" && "custom_emoticon" in tp.insert) {
+      return TpEmoticon;
+    }
     return TpBackupText;
   }
   if ("divider" in tp.insert) return TpDivider;
diff --git a/src/components/viewPost/tp-text.vue b/src/components/viewPost/tp-text.vue
index c350bc77..3a87c179 100644
--- a/src/components/viewPost/tp-text.vue
+++ b/src/components/viewPost/tp-text.vue
@@ -138,9 +138,9 @@ function getEmojiName(): string {
 </script>
 <style lang="css" scoped>
 .tp-text-link {
-  color: #00c3ff;
+  color: #00c3ffff;
   cursor: pointer;
-  text-decoration: underline solid #00c3ff;
+  text-decoration: underline solid #00c3ffff;
   text-underline-position: under;
 }
 
diff --git a/src/components/viewPost/tp-texts.vue b/src/components/viewPost/tp-texts.vue
index 616d84af..13188a3d 100644
--- a/src/components/viewPost/tp-texts.vue
+++ b/src/components/viewPost/tp-texts.vue
@@ -50,9 +50,9 @@ function getTitle(): string {
 <style lang="scss" scoped>
 .tp-texts {
   line-break: anywhere;
+  text-align: v-bind("props.data.attributes?.align");
   white-space: pre-wrap;
   word-break: break-all;
-  text-align: v-bind("props.data.attributes?.align");
 
   &.tp-inline {
     display: inline;
diff --git a/src/components/viewPost/tp-uid.vue b/src/components/viewPost/tp-uid.vue
index 0b5a81a2..d434a62e 100644
--- a/src/components/viewPost/tp-uid.vue
+++ b/src/components/viewPost/tp-uid.vue
@@ -68,12 +68,12 @@ function getGameName(): string {
   padding: 5px;
   border: 1px solid var(--common-shadow-2);
   border-radius: 3px;
-  background-color: #f4efe9;
+  background-color: #f4efe9ff;
   background-image: url("/source/post/tp_uid_bg.webp");
   background-position: right bottom;
   background-repeat: no-repeat;
   background-size: contain;
-  color: #a17a58;
+  color: #a17a58ff;
 }
 
 .tpu-top {
@@ -111,7 +111,7 @@ function getGameName(): string {
   align-items: center;
   justify-content: center;
   padding: 0 5px;
-  border: 1px solid rgb(161 122 88 / 30%);
+  border: 1px solid #a17a584d;
   border-radius: 3px;
   font-size: 12px;
   opacity: 0.7;
diff --git a/src/components/viewPost/tp-video.vue b/src/components/viewPost/tp-video.vue
index d884184a..1e819937 100644
--- a/src/components/viewPost/tp-video.vue
+++ b/src/components/viewPost/tp-video.vue
@@ -68,7 +68,7 @@ onUnmounted(() => {
   position: relative;
   max-width: 100%;
   margin: 10px auto;
-  aspect-ratio: v-bind(videoAspectRatio);
+  aspect-ratio: v-bind(videoAspectRatio); /* stylelint-disable-line value-keyword-case */
 }
 
 .tp-video-container {
@@ -79,7 +79,7 @@ onUnmounted(() => {
   max-width: 100%;
   border: none;
   border-radius: 10px;
-  aspect-ratio: v-bind(videoAspectRatio);
+  aspect-ratio: v-bind(videoAspectRatio); /* stylelint-disable-line value-keyword-case */
 }
 
 .tp-video-share {
@@ -93,7 +93,7 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   border-radius: 10px;
-  aspect-ratio: v-bind(videoAspectRatio);
+  aspect-ratio: v-bind(videoAspectRatio); /* stylelint-disable-line value-keyword-case */
 }
 
 .tp-video-cover {
@@ -119,7 +119,7 @@ onUnmounted(() => {
   align-items: center;
   padding: 2px 5px;
   border-radius: 5px;
-  background: rgb(0 0 0/50%);
+  background: #00000080;
   color: var(--tgc-white-4);
   font-family: var(--font-title);
   font-size: 12px;
@@ -136,7 +136,7 @@ onUnmounted(() => {
   justify-content: center;
   padding: 5px;
   border-radius: 5px;
-  background: rgb(0 0 0 / 50%);
+  background: #00000080;
   color: var(--tgc-white-1);
   font-family: var(--font-title);
   font-size: 12px;
@@ -150,7 +150,7 @@ onUnmounted(() => {
   align-items: center;
   padding: 2px 5px;
   border-radius: 5px;
-  background: rgb(0 0 0/50%);
+  background: #00000080;
   color: var(--tgc-white-4);
   font-family: var(--font-title);
   font-size: 12px;
diff --git a/src/components/viewPost/tp-vod.vue b/src/components/viewPost/tp-vod.vue
index 1d58796b..4e8ec46c 100644
--- a/src/components/viewPost/tp-vod.vue
+++ b/src/components/viewPost/tp-vod.vue
@@ -139,14 +139,14 @@ onUnmounted(() => {
   position: relative;
   max-width: 100%;
   margin: 10px auto;
-  aspect-ratio: v-bind(vodAspectRatio);
+  aspect-ratio: v-bind(vodAspectRatio); /* stylelint-disable-line value-keyword-case */
 }
 
 .tp-vod-container {
   overflow: hidden;
   max-width: 100%;
   border-radius: 10px;
-  aspect-ratio: v-bind(vodAspectRatio);
+  aspect-ratio: v-bind(vodAspectRatio); /* stylelint-disable-line value-keyword-case */
 }
 
 .tp-vod-share {
@@ -160,7 +160,7 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   border-radius: 10px;
-  aspect-ratio: v-bind(vodAspectRatio);
+  aspect-ratio: v-bind(vodAspectRatio); /* stylelint-disable-line value-keyword-case */
 }
 
 .tp-vod-cover {
@@ -187,7 +187,7 @@ onUnmounted(() => {
   align-items: center;
   padding: 2px 5px;
   border-radius: 5px;
-  background: rgb(0 0 0/50%);
+  background: #00000080;
   color: var(--tgc-white-4);
   font-family: var(--font-title);
   font-size: 12px;
@@ -202,7 +202,7 @@ onUnmounted(() => {
   align-items: center;
   padding: 2px 5px;
   border-radius: 5px;
-  background: rgb(0 0 0/50%);
+  background: #00000080;
   color: var(--tgc-white-4);
   font-family: var(--font-title);
   font-size: 12px;
diff --git a/src/components/viewPost/vp-btn-reply.vue b/src/components/viewPost/vp-btn-reply.vue
index 1e400d3b..49f56d31 100644
--- a/src/components/viewPost/vp-btn-reply.vue
+++ b/src/components/viewPost/vp-btn-reply.vue
@@ -207,8 +207,8 @@ async function handleDebug(): Promise<void> {
 .tpr-main-filter {
   position: relative;
   display: flex;
-  flex-direction: column;
   width: 100%;
+  flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   color: var(--app-page-content);
@@ -217,9 +217,9 @@ async function handleDebug(): Promise<void> {
 
 .tpr-title {
   position: relative;
+  display: flex;
   width: 100%;
   box-sizing: border-box;
-  display: flex;
   align-items: center;
   justify-content: space-between;
 
@@ -242,8 +242,8 @@ async function handleDebug(): Promise<void> {
 }
 
 .tpr-subtitle {
-  width: 100%;
   display: flex;
+  width: 100%;
   align-items: center;
   justify-content: space-between;
 }
@@ -259,8 +259,8 @@ async function handleDebug(): Promise<void> {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  font-size: 18px;
   font-family: var(--font-title);
+  font-size: 18px;
 }
 
 .tpr-reply-list {
diff --git a/src/components/viewPost/vp-overlay-follow.vue b/src/components/viewPost/vp-overlay-follow.vue
index bf49d027..103af751 100644
--- a/src/components/viewPost/vp-overlay-follow.vue
+++ b/src/components/viewPost/vp-overlay-follow.vue
@@ -102,10 +102,10 @@ async function loadMore(refresh: boolean = false): Promise<void> {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
   color: var(--common-text-title);
   font-family: var(--font-title);
   font-size: 20px;
+  gap: 4px;
 
   img {
     width: 32px;
diff --git a/src/components/viewPost/vp-overlay-image.vue b/src/components/viewPost/vp-overlay-image.vue
index 6bf677f7..255de68f 100644
--- a/src/components/viewPost/vp-overlay-image.vue
+++ b/src/components/viewPost/vp-overlay-image.vue
@@ -136,7 +136,7 @@ async function onDownload(): Promise<void> {
     max-width: 100%;
     max-height: 100%;
     border-radius: 4px;
-    background: v-bind(bgColor);
+    background: v-bind(bgColor); /* stylelint-disable-line value-keyword-case */
     object-fit: contain;
   }
 }
@@ -149,7 +149,7 @@ async function onDownload(): Promise<void> {
   cursor: zoom-out;
 
   img {
-    background: v-bind(bgColor);
+    background: v-bind(bgColor); /* stylelint-disable-line value-keyword-case */
   }
 }
 
@@ -166,7 +166,7 @@ async function onDownload(): Promise<void> {
   border: 1px solid var(--tgc-od-white);
   border-radius: 4px;
   background-color: var(--common-shadow-2);
-  color: #ffffff;
+  color: #ffffffff;
 }
 
 .tpoi-info-item {
diff --git a/src/components/viewPost/vp-overlay-user.vue b/src/components/viewPost/vp-overlay-user.vue
index 04c42d6f..acbb8507 100644
--- a/src/components/viewPost/vp-overlay-user.vue
+++ b/src/components/viewPost/vp-overlay-user.vue
@@ -138,29 +138,29 @@ async function loadPosts(): Promise<void> {
 .vp-ou-user {
   position: relative;
   display: flex;
+  max-width: 100%;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   row-gap: 4px;
-  max-width: 100%;
 }
 
 .vp-ouu-info {
   position: relative;
   display: flex;
+  max-width: 100%;
   align-items: center;
   justify-content: center;
-  max-width: 100%;
 
   .left {
     position: relative;
+    display: flex;
     width: 50px;
     height: 50px;
     box-sizing: border-box;
-    padding: 5px;
-    display: flex;
     align-items: center;
     justify-content: center;
+    padding: 5px;
 
     .avatar {
       position: relative;
@@ -230,7 +230,7 @@ async function loadPosts(): Promise<void> {
         justify-content: center;
         padding: 0 2px;
         border-radius: 2px;
-        background: v-bind(levelColor);
+        background: v-bind(levelColor); /* stylelint-disable-line value-keyword-case */
         color: var(--tgc-white-1);
         font-size: 12px;
       }
@@ -271,9 +271,9 @@ async function loadPosts(): Promise<void> {
   display: flex;
   align-items: center;
   justify-content: center;
+  color: var(--box-text-4);
   column-gap: 8px;
   font-size: 12px;
-  color: var(--box-text-4);
   opacity: 0.6;
 }
 
diff --git a/src/components/viewPost/vp-reply-item.vue b/src/components/viewPost/vp-reply-item.vue
index a851e027..bb5c1ab0 100644
--- a/src/components/viewPost/vp-reply-item.vue
+++ b/src/components/viewPost/vp-reply-item.vue
@@ -216,7 +216,7 @@ async function handleUser(): Promise<void> {
   await emit("userMention", uid);
 }
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
 .tpr-reply-box {
   position: relative;
   display: flex;
@@ -308,7 +308,7 @@ async function handleUser(): Promise<void> {
   justify-content: center;
   padding: 0 2px;
   border-radius: 2px;
-  background: v-bind(levelColor);
+  background: v-bind(levelColor); /* stylelint-disable-line value-keyword-case */
   color: var(--tgc-white-1);
   font-size: 12px;
 }
@@ -416,8 +416,8 @@ async function handleUser(): Promise<void> {
   opacity: 0.3;
 
   :last-child {
-    color: #00c3ff;
-    text-decoration: underline solid #00c3ff;
+    color: #00c3ffff;
+    text-decoration: underline solid #00c3ffff;
     text-underline-position: under;
   }
 }
diff --git a/src/pages/User/Characters.vue b/src/pages/User/Characters.vue
index 6378d302..fc589cb1 100644
--- a/src/pages/User/Characters.vue
+++ b/src/pages/User/Characters.vue
@@ -487,24 +487,25 @@ function handleSwitch(next: boolean): void {
 }
 
 .uc-box-uid {
-  @include github-styles.github-tag-dark-gen(#ffcd0c);
   padding: 2px 4px;
   border-radius: 4px;
+
+  @include github-styles.github-tag-dark-gen(#ffcd0c);
 }
 
 .uc-ov-item {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
   border-radius: 4px;
   font-family: var(--font-title);
   font-size: 18px;
+  gap: 4px;
 
   img {
-    flex-shrink: 0;
     width: 28px;
     height: 28px;
+    flex-shrink: 0;
   }
 }
 
diff --git a/src/pages/User/Record.vue b/src/pages/User/Record.vue
index 95f1c779..dde60a4b 100644
--- a/src/pages/User/Record.vue
+++ b/src/pages/User/Record.vue
@@ -205,11 +205,11 @@ async function deleteRecord(): Promise<void> {
 
 .ur-top-title {
   position: relative;
-  margin-left: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 8px;
+  margin-left: 8px;
   gap: 8px;
 
   img {
@@ -243,17 +243,17 @@ async function deleteRecord(): Promise<void> {
 }
 
 .ur-box {
-  @include github-styles.github-card-shadow();
-
   position: relative;
   display: flex;
+  box-sizing: border-box;
   flex-direction: column;
   padding: 8px;
-  box-sizing: border-box;
   border: 1px solid var(--common-shadow-2);
   border-radius: 4px;
-  row-gap: 4px;
   background: var(--app-page-bg);
+  row-gap: 4px;
+
+  @include github-styles.github-card-shadow;
 }
 
 .dark .ur-box {
diff --git a/src/pages/User/Scripts.vue b/src/pages/User/Scripts.vue
index 4d3ed75d..5a024f3b 100644
--- a/src/pages/User/Scripts.vue
+++ b/src/pages/User/Scripts.vue
@@ -200,10 +200,10 @@ async function tryExecAll(): Promise<void> {
 .select-main {
   position: relative;
   display: flex;
+  height: 24px;
   align-items: center;
   justify-content: center;
   column-gap: 4px;
-  height: 24px;
 
   img {
     width: 24px;
@@ -228,13 +228,13 @@ async function tryExecAll(): Promise<void> {
 
 .select-item {
   position: relative;
-  width: 100%;
   display: flex;
+  width: 100%;
+  box-sizing: border-box;
   align-items: center;
   justify-content: flex-start;
-  column-gap: 4px;
   padding: 8px;
-  box-sizing: border-box;
+  column-gap: 4px;
 
   img {
     width: 24px;
@@ -267,10 +267,10 @@ async function tryExecAll(): Promise<void> {
 .top-hint {
   position: relative;
   padding: 8px;
-  font-size: 20px;
   color: var(--tgc-pink-1);
-  font-family: var(--font-title);
   cursor: pointer;
+  font-family: var(--font-title);
+  font-size: 20px;
 }
 
 .us-page-container {
@@ -283,27 +283,27 @@ async function tryExecAll(): Promise<void> {
 
 .us-scripts {
   position: relative;
-  width: 100%;
   display: flex;
+  width: 100%;
+  max-height: 100%;
+  box-sizing: border-box;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
+  padding-right: 8px;
   overflow-y: auto;
   row-gap: 8px;
-  max-height: 100%;
-  padding-right: 8px;
-  box-sizing: border-box;
 }
 
 .us-title {
   position: sticky;
-  width: 100%;
-  background: var(--app-page-bg);
-  top: 0;
   z-index: 2;
+  top: 0;
   display: flex;
+  width: 100%;
   align-items: center;
   justify-content: space-between;
+  background: var(--app-page-bg);
 
   span {
     color: var(--common-text-title);
diff --git a/src/pages/common/PageAchi.vue b/src/pages/common/PageAchi.vue
index e784bf0a..3101b086 100644
--- a/src/pages/common/PageAchi.vue
+++ b/src/pages/common/PageAchi.vue
@@ -322,11 +322,11 @@ onUnmounted(async () => {
 
 .top-extension {
   position: relative;
-  padding: 8px;
-  margin-left: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 8px;
+  margin-left: 8px;
   column-gap: 8px;
 }
 
@@ -344,15 +344,15 @@ onUnmounted(async () => {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  font-size: 18px;
   font-family: var(--font-title);
+  font-size: 18px;
 }
 
 .top-link {
-  margin-left: auto;
   margin-right: 16px;
-  cursor: pointer;
+  margin-left: auto;
   color: var(--tgc-od-white);
+  cursor: pointer;
 
   &:hover {
     color: var(--tgc-od-orange);
@@ -367,11 +367,11 @@ onUnmounted(async () => {
 
 .left-wrap {
   position: relative;
-  box-sizing: border-box;
   width: 332px;
   height: 100%;
-  padding-right: 8px;
+  box-sizing: border-box;
   flex-shrink: 0;
+  padding-right: 8px;
   overflow-y: auto;
 }
 
diff --git a/src/pages/common/PostNews.vue b/src/pages/common/PostNews.vue
index 6c0e40b1..91edcaba 100644
--- a/src/pages/common/PostNews.vue
+++ b/src/pages/common/PostNews.vue
@@ -232,6 +232,7 @@ async function searchPost(): Promise<void> {
 }
 
 /* load more */
+
 .load-news {
   display: flex;
   align-items: center;
diff --git a/src/views/t-anno-json.vue b/src/views/t-anno-json.vue
index 68ac8af0..8d5c7415 100644
--- a/src/views/t-anno-json.vue
+++ b/src/views/t-anno-json.vue
@@ -129,11 +129,11 @@ onMounted(async () => {
 }
 
 .taj-box {
-  border-radius: 4px;
   position: relative;
   width: 100%;
-  padding: 12px;
-  box-sizing: border-box;
   max-width: 100%;
+  box-sizing: border-box;
+  padding: 12px;
+  border-radius: 4px;
 }
 </style>
diff --git a/src/views/t-post-json.vue b/src/views/t-post-json.vue
index 6c07df95..1efd80e5 100644
--- a/src/views/t-post-json.vue
+++ b/src/views/t-post-json.vue
@@ -117,12 +117,12 @@ onMounted(async () => {
 }
 
 .tpj-box {
-  border-radius: 4px;
   position: relative;
   width: 100%;
-  padding: 12px;
-  box-sizing: border-box;
   max-width: 100%;
+  box-sizing: border-box;
+  padding: 12px;
+  border-radius: 4px;
   background: var(--box-bg-1);
 }
 </style>
diff --git a/src/views/t-post.vue b/src/views/t-post.vue
index 1cf884a5..a0ead4c6 100644
--- a/src/views/t-post.vue
+++ b/src/views/t-post.vue
@@ -356,8 +356,6 @@ function handleUser(user: TGApp.BBS.Post.User): void {
 }
 </script>
 <style lang="scss" scoped>
-@use "@styles/github.styles.scss" as github-styles;
-
 .tp-post-body {
   width: 800px;
   margin: 0 auto;
@@ -365,6 +363,7 @@ function handleUser(user: TGApp.BBS.Post.User): void {
 }
 
 /* title */
+
 .tp-post-title {
   display: flex;
   width: fit-content;
@@ -390,6 +389,7 @@ function handleUser(user: TGApp.BBS.Post.User): void {
 }
 
 /* subtitle */
+
 .tp-post-subtitle {
   position: relative;
   display: flex;
@@ -411,6 +411,7 @@ function handleUser(user: TGApp.BBS.Post.User): void {
 }
 
 /* info */
+
 .tp-post-info {
   position: relative;
   display: flex;
@@ -440,6 +441,7 @@ function handleUser(user: TGApp.BBS.Post.User): void {
 }
 
 /* meta */
+
 .tp-post-meta {
   display: flex;
   align-items: center;
@@ -485,6 +487,7 @@ function handleUser(user: TGApp.BBS.Post.User): void {
 }
 
 /* extra */
+
 .tp-post-extra {
   position: relative;
   display: flex;
@@ -493,16 +496,15 @@ function handleUser(user: TGApp.BBS.Post.User): void {
   flex-wrap: wrap;
   align-items: center;
   justify-content: start;
-  column-gap: 4px;
-  row-gap: 8px;
+  gap: 8px 4px;
 }
 
 .tp-post-collection,
 .tp-post-topic,
 .tp-post-reason {
+  display: flex;
   height: 20px;
   box-sizing: border-box;
-  display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 4px;
@@ -513,28 +515,34 @@ function handleUser(user: TGApp.BBS.Post.User): void {
 }
 
 /* collection */
+
 .tp-post-collection {
-  @include github-styles.github-tag-dark-gen(#3572a5);
   cursor: pointer;
 
   &:hover {
     @include github-styles.github-tag-dark-gen(#98c379);
   }
+
+  @include github-styles.github-tag-dark-gen(#3572a5);
 }
 
 /* topic */
-.tp-post-topic {
-  @include github-styles.github-tag-dark-gen(#e06c63);
 
+.tp-post-topic {
   cursor: pointer;
 
   &:hover {
     @include github-styles.github-tag-dark-gen(#00aeec);
   }
+
+  @include github-styles.github-tag-dark-gen(#e06c63);
 }
 
 /* reason */
+
 .tp-post-reason {
   @include github-styles.github-tag-dark-gen(#d19a66);
 }
+
+@use "@styles/github.styles.scss" as github-styles;
 </style>