cook

src/views/cookbook/index.vue

@@ -1,34 +1,60 @@
 <template>
-  <!-- <div class="1st"> --><n-space vertical>
+  <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 ellipsis-tag-popover-props :on-load="hl" />
-  </n-space>
-
-  <!-- </div> -->
+        :show-path="true" remote :on-load="handleLoad" />
+    </div>
+    <n-scrollbar>
+      <div class="flex flex-wrap">
+        <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 class="w-[80px] h-[80px] rounded-sm">
+            <img class="w-[80px] h-[80px] rounded-sm" :src="i.cover" alt="">
+          </div>
+          <div class="ml-3" style="width: calc(100% - 120px);">
+            <div class="text-2xl font-bold mt-2">{{i.name}}</div>
+            <div class="text-sm mt-2">{{i.desc}}</div>
+          </div>
+        </div>
+      </div>
+    </n-scrollbar>
+  </div>
 </template>
 
 <script setup>
-import { onBeforeMount } from 'vue';
 
 
 
 //mark import
 
 //mark data
+const box = ref(null);
 const category = ref(null)
 const clist = ref([])
+const cooks = ref([]);
+const page = ref(1);
 //mark method
 async function getCate(id) {
   const res = await $http.cookbook.category({ id });
   // console.log(res);
   return res.data;
 }
-function hl(option) {
-  return getChildren(option)
-  // return children;
+
+async function getCooks(id, page) {
+  const res = await $http.cookbook.list({ id, page });
+  console.log(111111, res.data);
+  cooks.value = res.data;
+}
+
+function handleLoad(option) {
+  return new Promise((resolve) => {
+    window.setTimeout(async () => {
+      option.children = await getChildren(option);
+      resolve();
+    }, 1e3);
+  });
 }
 async function getChildren(option) {
-  console.log(option);
+  // console.log(option);
 
   const children = [];
   const res = await getCate(option.value);
@@ -40,11 +66,17 @@ async function getChildren(option) {
       isLeaf: option.depth === 2
     });
   });
-  option.children = children;
+  return children
+
 }
 
 //mark 周期、内置函数等
-onBeforeMount(async () => {
+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 => {
@@ -55,6 +87,10 @@ onBeforeMount(async () => {
   });
   console.log(clist.value);
 
+  setTimeout(() => {
+    getCooks(3, page.vue)
+  }, 1000);
+
 });
 
 </script>

tailwind.config.js

@@ -27,7 +27,7 @@ module.exports = {
         700: "#65101a",
         800: "#430b11",
         900: "#220509"
-},
+      },
       purple: {
         100: "#BE8AEF",
         200: "#B172EC",