ui: optimize folder card style

mao888 · Jan 29, 2024 · 79337e0 · 79337e0
1 parent 9e4dd51
commit 79337e0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/src/views/imgs-management/components/folder-card/folder-card.styl b/src/views/imgs-management/components/folder-card/folder-card.styl
@@ -2,11 +2,26 @@
   display flex
   flex-direction column
   align-items center
-  justify-content center
+  justify-content flex-start
   width 100%
   height 100%
+  padding 12rem 6rem 6rem 6rem
   user-select none
 
+  +picx-tablet-2() {
+    padding 10rem 5rem 5rem 5rem
+  }
+
+
+  +picx-tablet() {
+    padding 8rem 4rem 4rem 4rem
+  }
+
+
+  +picx-mobile() {
+    padding 6rem 3rem 3rem 3rem
+  }
+
   &.active
   &:hover {
     background var(--background-color-2)
@@ -32,7 +47,7 @@
     width 90%
     margin-top 5rem
     overflow hidden
-    font-size 14rem
+    font-size 12rem
     text-align center
     text-overflow ellipsis
     word-wrap break-word

diff --git a/src/views/imgs-management/imgs-management.styl b/src/views/imgs-management/imgs-management.styl
@@ -75,7 +75,7 @@ $grid-gap = 20rem
         padding $grid-gap * 0.9
 
         .list-item {
-          grid-auto-rows 100rem
+          grid-auto-rows 110rem
           grid-gap $grid-gap * 0.9
           grid-template-columns repeat(8, 1fr)
         }