feat: 分类栏重构

IdeaLeap · Feb 3, 2023 · ae0ba58 · ae0ba58
1 parent 46cfb06
commit ae0ba58
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 22 deletions.
diff --git a/backend/.tmp/data.db b/backend/.tmp/data.db
diff --git a/frontend/components/Logo.vue b/frontend/components/Logo.vue
@@ -18,7 +18,7 @@
     <svg
       viewBox="42 0 95 28"
       xmlns="http://www.w3.org/2000/svg"
-      class="ml-2 fill-[#000] dark:fill-[#e0e0e0] hidden md:(block)"
+      class="ml-2 fill-[#000] dark:fill-[#e0e0e0] hidden sm:(block)"
     >
       <path
         d="M133.287 18.4172H131.162L129.923 23.0758H126.825V16.7559H135.364V14.7315H126.825V11.1469H133.074V9.12256H118.454V11.1469H124.703V14.7315H116.164V16.7559H124.703V23.0758H121.601L120.363 18.4172H118.237L119.487 23.0758H115.543V25.1001H135.985V23.0758H132.041L133.287 18.4172Z"

diff --git a/frontend/components/Navs/index.vue b/frontend/components/Navs/index.vue
@@ -34,18 +34,16 @@ const isNavShown = inject('isNavShown')
 <style scoped>
 .main-header.nav-shown{
     transform: translateZ(0);
+    /* @apply -translate-y-5rem; */
 }
 
 .main-header {
-    transition: all .2s;
     transform: translate3d(0,-100%,0);
+    transition: all .2s;
     @apply flex items-center fixed top-0 left-0 right-0;
     @apply space-between md:justify-around;
+    @apply bg-jj_navigation border-b-1 h-[5rem] lt-sm:(h-[4.333rem]) z-99 border-gray-100 dark:border-[#494949];
 }
-.main-header {
-    @apply bg-jj_navigation border-b-1 h-[5rem] z-99 border-gray-100 dark:border-[#494949];
-}
-
 .logo{
   @apply flex items-center mr-4 ml-6 w-auto inline-block;
 

diff --git a/frontend/components/Types/index.vue b/frontend/components/Types/index.vue
@@ -6,33 +6,58 @@ const isNavShown = inject('isNavShown')
 
 <template>
   <div class="view-types" :class="{ 'nav-shown': !isNavShown }">
-    <div class="flex list-none ma pr-114">
-      <li v-for="item in typeList" :key="item.type" class="type-list">
+    <div class="type-list">
+      <NuxtLink class="type-list-item" to="/">
+        综合
+      </NuxtLink>
+      <NuxtLink v-for="item in typeList" :key="item.type" class="type-list-item">
         {{ item.alias }}
-      </li>
+      </NuxtLink>
     </div>
   </div>
 </template>
 
 <style scoped>
 .nav-shown{
-  @apply -translate-y-5rem;
+  transform: translate3d(0,-5rem,0) !important;
+}
+@media (max-width: 640px) {
+  .nav-shown{
+  transform: translate3d(0,-4.333rem,0) !important;
+  }
+}
+@media (max-width: 960px){
+  .type-list-item:first-child {
+      @apply pl-[1.5rem];
+  }
+  .type-list-item:last-child {
+      @apply pr-[1.5rem];
+  }
 }
 .view-types {
-  background: #fff;
-  position: fixed;
-  top: 5rem;
-  width: 100%;
-  height: 3.833rem;
-  z-index: 1;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
   transition: all .2s;
-  display: flex;
+  transform: translateZ(0);
+  @apply bg-jj_navigation w-full fixed top-[5rem] lt-sm:(top-[4.333rem]) shadow-sm shadow-black/5 dark:shadow-white/5 h-[3.833rem] z-1;
 }
-.type-list{
-  @apply mr-8 text-lg text-gray-700 h-5 w-auto float-left cursor-pointer whitespace-nowrap;
+.type-list-item{
+  @apply h-full w-auto float-left cursor-pointer whitespace-nowrap flex items-center p-x-[1rem] color-[#71777c] text-[1.16rem];
+  @apply cursor-pointer;
 }
-.type-list:hover{
+.type-list-item:hover{
   color: #1e80ff;
 }
+
+.type-list{
+  line-height: 1;
+  @apply list-none ma max-w-[60rem] h-full;
+  @apply overflow-x-auto flex items-center;
+}
+
+.type-list::-webkit-scrollbar {
+        height: 0;
+}
+
+.type-list-item.router-link-exact-active {
+    @apply opacity-100 text-primary;
+}
 </style>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <main class="">
-    <Navs class="relative h-5rem" />
+    <Navs class="relative h-[5rem] lt-sm:(h-[4.333rem])" />
     <slot class="relative mx-0 my-a w-100% max-w-960" />
   </main>
 </template>