cook

src/views/cookbook/index.vue

@@ -2,18 +2,29 @@
   <div class="w-2/3 mx-auto mt-[20px] shadow" ref="box">
     <div class="p-10">
       <n-cascader class="w-[540px]" v-model:value="category" placeholder="请选择分类" :options="clist" check-strategy="child"
-        :show-path="true" remote :on-load="handleLoad" />
+        :show-path="true" remote :on-load="handleLoad" @update:value="handdleSelect" />
     </div>
     <n-scrollbar>
-      <div class="flex flex-wrap">
+      <div class="grid grid-cols-2 items-center justify-items-center">
-        <div class="mt-4 px-10 w-[40%] flex mx-2 py-3 bg-[#f1f2f330] items-center hover:shadow-lg hover:bg-[#a81b2b20]" v-for="(i, idx) in cooks.list">
+        <div ref="card"
+          class="mt-4 px-10 w-[90%] flex mx-2 py-3 bg-[#f1f2f330] items-center hover:shadow-lg hover:bg-[#a81b2b20]"
+          v-for="(i, idx) in cooks.list">
           <div class="w-[80px] h-[80px] rounded-sm">
             <img class="w-[80px] h-[80px] rounded-sm" :src="i.cover" alt="">
           </div>
+          <n-popover width="trigger" :delay="2000" trigger="hover" placement="top">
+            <template #trigger>
               <div class="ml-3" style="width: calc(100% - 120px);">
+                <div class="text-2xl font-bold mt-2 truncate">{{ i.name }}</div>
+                <div class="text-sm mt-2 truncate">{{ i.desc }}</div>
+              </div>
+            </template>
+            <div>
               <div class="text-2xl font-bold mt-2">{{ i.name }}</div>
               <div class="text-sm mt-2">{{ i.desc }}</div>
             </div>
+          </n-popover>
+
         </div>
       </div>
     </n-scrollbar>
@@ -24,14 +35,17 @@
 
 
 
+
 //mark import
 
 //mark data
 const box = ref(null);
 const category = ref(null)
 const clist = ref([])
-const cooks = ref([]);
+const cooks = ref({ list: [] });
 const page = ref(1);
+const card = ref(null);
+const cardWidth = ref(0);
 //mark method
 async function getCate(id) {
   const res = await $http.cookbook.category({ id });
@@ -40,9 +54,17 @@ async function getCate(id) {
 }
 
 async function getCooks(id, page) {
+  setTimeout(async () => {
     const res = await $http.cookbook.list({ id, page });
-  console.log(111111, res.data);
+
     cooks.value = res.data;
+    console.log(2222, cooks.value);
+
+
+    // console.log(111111, card.value);
+    cardWidth.value = card.value[0].clientWidth;
+    // console.log(111111, cardWidth.value);
+  }, 1000);
 }
 
 function handleLoad(option) {
@@ -70,13 +92,14 @@ async function getChildren(option) {
 
 }
 
+function handdleSelect() {
+  console.log(category.value);
+  getCooks(category.value, page.value)
+}
+
 //mark 周期、内置函数等
 onMounted(async () => {
   box.value.style.height = document.documentElement.clientHeight - 100 + 'px';
-
-
-
-
   const res = await $http.cookbook.category({ id: -1 })
   clist.value = res.data;
   clist.value.forEach(item => {
@@ -88,7 +111,7 @@ onMounted(async () => {
   console.log(clist.value);
 
   setTimeout(() => {
-    getCooks(3, page.vue)
+    getCooks(3, page.value)
   }, 1000);
 
 });