feat: ui list exercise page

USNightOwl · Jun 19, 2024 · 79fc138 · 79fc138
1 parent e4f376e
commit 79fc138
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 16 deletions.
diff --git a/src/components/Box.vue b/src/components/Box.vue
@@ -0,0 +1,20 @@
+<template lang="">
+    <router-link to="/" >
+      <div class="md:flex mb-6 gap-6 p-2 hover:bg-slate-100 rounded-md">
+        <div class="md:w-4/12 h-fit">
+          <img src="https://api.baitaptracnghiem.com/storage/images/vfOcrwr1mmEuj1HEE6jPFgQ4Hu2SdoFk7Z4bc09y.jpg" alt="exercise-background" class="w-fit rounded-lg object-contain"/>
+        </div>
+        <div class="flex flex-col justify-between">
+          <h1 class="text-xl text-[#2b2d38] font-bold my-5 md:my-0">Bài tập trắc nghiệm về cực trị của hàm số</h1>
+          <p class="text-[#8189a9] text-md hidden md:block">
+            Bài tập trắc nghiệm cực trị của hàm số có đáp án chi tiết hay nhất được tổng hợp giúp các bạn ôn luyện lại các kiến thức đã học
+          </p>
+          <Category title="Web"/>
+        </div>
+      </div>
+    </router-link>
+</template>
+
+<script setup>
+  import Category from "@/components/Button/Category.vue";
+</script>
diff --git a/src/components/Button/Category.vue b/src/components/Button/Category.vue
@@ -0,0 +1,14 @@
+<template lang="">
+  <span class="border border-[#67c23a] text-[#67c23a] w-fit text-xs px-1 rounded">
+    {{ title }}
+  </span>
+</template>
+
+<script setup>
+  const props = defineProps({
+      title: {
+        type: String,
+        required: true,
+      }
+  });
+</script>
diff --git a/src/components/ListBox.vue b/src/components/ListBox.vue
@@ -0,0 +1,9 @@
+<template lang="">
+  <div>
+    <Box v-for="n in 10" :key="n"/>
+  </div>
+</template>
+
+<script setup>
+  import Box from "@/components/Box.vue";
+</script>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -1,17 +1,26 @@
 <template lang="">
   <div class="text-xs hidden md:flex uppercase font-semibold justify-between items-center flex-1">
     <div class="flex gap-5">
-      <div>Đề thi THPT</div>
-      <div>Lớp 12</div>
-      <div>Lớp 11</div>
-      <div>Lớp 10</div>
-      <div>Tiếng anh</div>
-      <div>Đại học</div>
-      <div>Trắc nghiệm tính cách MBTI</div>
+      <div class="hover:text-gray-400 cursor-pointer">Đề thi THPT</div>
+      <router-link :to="{ name: 'exercise', params: { classId: 'lop-12' } }" class="hover:text-gray-400">
+        Lớp 12
+      </router-link>
+      <router-link :to="{ name: 'exercise', params: { classId: 'lop-11' } }" class="hover:text-gray-400">
+        Lớp 11
+      </router-link>
+      <router-link :to="{ name: 'exercise', params: { classId: 'lop-10' } }" class="hover:text-gray-400">
+        Lớp 10
+      </router-link>
+      <router-link :to="{ name: 'exercise', params: { classId: 'bai-tap-tieng-anh' } }" class="hover:text-gray-400">
+        Tiếng anh
+      </router-link>
+      <router-link class="hover:text-gray-400">Đại học</router-link>
+      <router-link class="hover:text-gray-400">Trắc nghiệm tính cách MBTI</router-link>
     </div>
     <Searchbar/>
   </div>
-  <div class="flex md:hidden justify-end flex-1">
+
+  <div class="flex md:hidden justify-end flex-1 cursor-pointer">
     <Icon icon="pi-bars" className="text-xl"/>
   </div>
 </template>

diff --git a/src/layout/DefaultLayout.vue b/src/layout/DefaultLayout.vue
@@ -1,7 +1,7 @@
 <template lang="">
   <div>
     <Header/>
-    <div class="pt-12 min-h-screen">
+    <div class="pt-12 min-h-screen px-5 md:px-20 mt-2">
       <router-view/>
     </div>
     <Footer/>

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -12,7 +12,7 @@ const routes = [
       },
       {
         path: "/danh-sach-bai-tap/:classId",
-        name: "course",
+        name: "exercise",
         component: () => import("@/views/ExercisePage.vue"),
       },
     ]

diff --git a/src/views/ExercisePage.vue b/src/views/ExercisePage.vue
@@ -1,8 +1,9 @@
 <template lang="">
   <div>
-    Exercise
+    <ListBox/>
   </div>
 </template>
-<script setup lang="ts">
 
+<script setup lang="ts">
+  import ListBox from "@/components/ListBox.vue";
 </script>
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
@@ -1,8 +1,6 @@
 <template lang="">
-  <div class="px-5 md:px-20 mt-2">
-    <ListCard title="Đề thi THPT" url="/"/>
-    <ListCard title="Lớp 12" url="/"/>
-  </div>
+  <ListCard title="Đề thi THPT" url="/danh-sach-bai-tap/toan-de-thi-thpt"/>
+  <ListCard title="Lớp 12" url="/danh-sach-bai-tap/lop-12"/>
 </template>
 
 <script setup>