fix: 作者信息展示无法显示

IdeaLeap · Feb 3, 2023 · 65d8e67 · 65d8e67
1 parent 857d2bf
commit 65d8e67
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 17 deletions.
diff --git a/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json b/backend/src/extensions/documentation/documentation/1.0.0/full_documentation.json
@@ -14,7 +14,7 @@
       "name": "Apache 2.0",
       "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
     },
-    "x-generation-date": "2023-02-03T13:01:19.465Z"
+    "x-generation-date": "2023-02-03T15:36:35.496Z"
   },
   "x-strapi-config": {
     "path": "/documentation",

diff --git a/frontend/components/ArticlesList/Item/AuthorInfo.vue b/frontend/components/ArticlesList/Item/AuthorInfo.vue
@@ -31,7 +31,8 @@ defineProps({
 <style scoped>
 .author_panel {
   box-shadow: 0 8px 24px rgb(81 87 103 / 16%);
-  @apply bg-white dark:shadow-jj_author_info dark:bg-jj-article dark:text-white absolute top-[-9.5rem] left-0 mlg:left-[-1.67rem] bg-white
+  @apply bg-white absolute top-[-9.5rem] left-0 mlg:left-[-1.67rem]
+  @apply dark:shadow-jj_author_info dark:bg-jj-article dark:text-white
 }
 .author {
   @apply flex m-[1rem] mb-0
@@ -47,6 +48,7 @@ defineProps({
   transform: translate(-50%, 100%);
   border: 10px solid transparent;
   border-top-color: white;
-  @apply dark:border-t-jj_bg_gray border-t-white absolute bottom-0 left-1/2 w-0 h-0
+  @apply border-t-white absolute bottom-0 left-1/2 w-0 h-0
+  @apply dark:border-t-jj_bg_gray
 }
 </style>
diff --git a/frontend/components/ArticlesList/Item/Topbar.vue b/frontend/components/ArticlesList/Item/Topbar.vue
@@ -13,7 +13,7 @@ defineProps({
 <template>
   <div class="topbar">
     <div class="author_id">
-      {{ name }}
+      <span class="name">{{ name }}</span>
       <ArticlesListItemAuthorInfo
         :name="name"
         :duration="duration"
@@ -38,10 +38,13 @@ defineProps({
   @apply transition text-jj-font px-3 border-r-1 pl-0 hover:text-[#1E80FF]
 }
 .author_info {
-  @apply display-none
+  @apply scale-0 delay-150 transition-all
 }
-.author_id:hover .author_info {
-  @apply display-block
+.author_info:hover {
+  @apply scale-100;
+}
+.name:hover+.author_info {
+  @apply scale-100
 }
 .duration {
   @apply text-jj-thirdly px-3 border-r-1

diff --git a/frontend/components/ArticlesList/Item/index.vue b/frontend/components/ArticlesList/Item/index.vue
@@ -55,9 +55,9 @@ const hideHandler = () => {
   @apply flex-1 truncate
 }
 .link_container {
-  @apply  transition dark:b-[#333] hover:bg-jj-hover f-c-c py-4 transition-all b-b b-grey all-cursor-pointer flex-1 pl-[1.67rem] truncate
+  @apply transition hover:bg-jj-hover f-c-c py-4 transition-all b-b b-grey all-cursor-pointer flex-1 pl-[1.67rem] truncate
+  @apply dark:b-[#333]
 }
-
 .icon {
   @apply i-carbon-close display-none cursor-pointer text-[16px] text-jj-fourthly hover:text-primary transition absolute top-[1rem] right-[1.67rem]
 }

diff --git a/frontend/components/ArticlesList/Navigation/Select.vue b/frontend/components/ArticlesList/Navigation/Select.vue
@@ -42,11 +42,13 @@ li {
   @apply box-border min-w-[7rem] text-[1rem] rounded-[2px] px-[10px] py-[2px] border border-solid border-[#ebebeb]
 }
 .dropdown-toggle:hover {
-  @apply bg-[#fafafb] dark:hover-bg-[#111] cursor-pointer
+  @apply bg-[#fafafb] cursor-pointer
+  @apply dark:hover-bg-[#111]
 }
 .dropdown-menu {
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
-  @apply dark:b-[#333] text-left bg-white border border-[#ebebeb] absolute box-border top-[105%] left-0 z-1000 min-w-[7rem] text-[1rem] rounded-[0.17rem]
+  @apply text-left bg-white border border-[#ebebeb] absolute box-border top-[105%] left-0 z-1000 min-w-[7rem] text-[1rem] rounded-[0.17rem]
+  @apply dark:b-[#333]
 }
 .dropdown-menu li {
   @apply overflow-hidden w-full
@@ -58,6 +60,7 @@ li {
   @apply rotate-180
 }
 .dropdown-menu li a:hover {
-  @apply bg-[#fafafb] dark:hover-bg-[#111]
+  @apply bg-[#fafafb]
+  @apply dark:hover-bg-[#111]
 }
 </style>
diff --git a/frontend/components/ArticlesList/Skeleton.vue b/frontend/components/ArticlesList/Skeleton.vue
@@ -17,23 +17,23 @@
 
 <style scoped>
 .skeleton_container {
-  @apply p-5 dark:bg-jj_bg_gray
+  @apply px-[1.67rem] py-[0.8rem]
+  @apply dark:bg-jj_bg_gray
 }
 .skeleton {
   @apply align-middle relative inline-block overflow-hidden rounded-[4px] mx-[5px] my-[7px] h-[1.35rem]
 }
 .skeleton div {
-  @apply dark:bg-[#555] w-full h-full bg-[#E5E7EC] rounded-[2px]
+  @apply w-full h-full bg-[#E5E7EC] rounded-[2px]
+  @apply dark:bg-[#555]
 }
 .skeleton::after {
-  content: "";
   animation: shan .75s ease 0s infinite;
   background: linear-gradient(to left,
       rgba(255, 255, 255, 0) 0,
       rgba(255, 255, 255, 0.3) 50%,
       rgba(255, 255, 255, 0) 100%);
-  transform: skewX(-45deg);
-  @apply absolute top-0 w-7/10 h-full
+  @apply content-none absolute top-0 w-7/10 h-full -skew-45
 }
 @keyframes shan {
   0% {