feat: add card number to user card

Wiazeph · Feb 10, 2023 · d820c5e · d820c5e · vercel · Feb 10, 2023
1 parent 1a3495c
commit d820c5e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/src/assets/style.css b/src/assets/style.css
@@ -57,6 +57,10 @@
     @apply relative flex flex-col-reverse sm:flex-row items-center justify-between gap-7 sm:gap-0 px-6 py-8 text-gray-900 bg-[#b2e5e6] min-w-[350px] w-full max-w-[415px] sm:max-w-[660px] sm:h-[350px] border-[24px] border-[#a0cdcf] rounded-3xl shadow;
   }
 
+  .card-number {
+    @apply absolute top-3 left-4 sm:top-auto sm:left-auto sm:bottom-3 sm:right-4 font-medium select-none;
+  }
+
   .user-card-delete {
     @apply absolute top-3 right-4 text-xl transition-all duration-300 ease-in-out hover:scale-125 text-red-900;
   }

diff --git a/src/components/ItemList.vue b/src/components/ItemList.vue
@@ -36,6 +36,10 @@ async function copyCB(email) {
 
     <div class="user-lists">
       <div class="user-card" v-for="(lt, index) in list" :key="lt.id">
+        <div class="card-number">
+          {{ ++index }}
+        </div>
+
         <button class="user-card-delete" @click="deleteUser(lt)">
           <i class="card-icons fa-solid fa-trash"></i>
         </button>
@@ -94,15 +98,10 @@ async function copyCB(email) {
 
         <img :src="lt.thumbnail" alt="" class="user-img" />
 
-        <!-- <div
-          class="card-info absolute bottom-6 right-6 flex items-center gap-5"
-        >
+        <!-- <div class="card-info absolute bottom-6 right-6">
           <div class="card-date text-sm">
             {{ new Date(lt.date).toLocaleDateString() }}
           </div>
-          <div class="card-number bg-gray-600 px-2 rounded-full">
-            {{ ++index }}
-          </div>
         </div> -->
       </div>
     </div>