fix: 增加hover框

IdeaLeap · Feb 5, 2023 · f63d11c · f63d11c
1 parent 2d40b27
commit f63d11c
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 5 deletions.
diff --git a/frontend/components/ArticlesList/Item/Bar/Top.vue b/frontend/components/ArticlesList/Item/Bar/Top.vue
@@ -16,7 +16,7 @@ defineProps({
 
 <template>
   <div class="topbar">
-    <div class="author_id">
+    <div class="author-id">
       <span v-if="name" class="name">{{ name }}</span>
       <span v-else class="name">{{ authorId.name }}</span>
       <ArticlesListItemAuthorInfo
@@ -42,7 +42,7 @@ defineProps({
 .topbar {
   @apply flex items-center pr-4 text-[13px]
 }
-.author_id {
+.author-id {
   @apply transition text-jj-font-normal px-3 border-r-1 pl-0 hover:text-jj-brand-normal
 }
 .author-info {

diff --git a/frontend/components/Types/index.vue b/frontend/components/Types/index.vue
@@ -10,9 +10,22 @@ const isNavShown = inject('isNavShown')
       <NuxtLink class="type-list-item" to="/">
         综合
       </NuxtLink>
-      <NuxtLink v-for="item in typeList" :key="item.type" class="type-list-item" :to="`/${item.type}`">
-        {{ item.alias }}
-      </NuxtLink>
+      <div v-for="item in typeList" :key="item.type" class="list-item-wrapper">
+        <NuxtLink class="type-list-item" :to="`/${item.type}`">
+          {{ item.alias }}
+        </NuxtLink>
+        <div v-if="item.tags.data.length > 0" class="category-popover">
+          <nav class="tag-nav">
+            <ul class="tag-list">
+              <li v-for="item_ in item.tags.data" :key="item_.id" class="tag">
+                <NuxtLink :to="`/${item.type}/${item_.tag}`">
+                  {{ item_.alias }}
+                </NuxtLink>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
       <!-- <span class="type-manage type-list-item">标签管理</span> -->
     </div>
   </div>
@@ -66,4 +79,46 @@ const isNavShown = inject('isNavShown')
 .type-manage{
   @apply absolute right-0 top-0;
 }
+.list-item-wrapper{
+  @apply relative;
+}
+.type-list-item:hover+.category-popover{
+  @apply scale-100;
+}
+.category-popover:hover{
+  @apply scale-100;
+}
+.category-popover {
+  @apply scale-0 delay-150;
+  position: fixed;
+  top: 3.833rem;
+  padding: 1.17rem 1.17rem .17rem;
+  max-height: 16.67rem;
+  font-weight: 400;
+  line-height: 1.2;
+  background-color: #fff;
+  border: 1px solid #ebebeb;
+  box-shadow: 0 1px 5px 0 rgb(0 0 0 / 15%);
+  box-sizing: border-box;
+  border-radius: 2px;
+  cursor: default;
+  z-index: 250;
+}
+.tag-list {
+    display: flex;
+    flex-wrap: wrap;
+}
+.tag {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 2rem;
+    background-color: #f4f5f5;
+    border-radius: 1rem;
+    font-size: 1.1rem;
+    color: #71777d;
+    padding: 0 .83rem;
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+}
 </style>