cook

src/router/index.js

@@ -56,6 +56,10 @@ const router = createRouter({
           path: "/mini/:id",
           component: () => import("@/views/article/mini/index.vue"),
         },
+        {
+          path: "/cook/:id",
+          component: () => import("@/views/cookbook/detail.vue"),
+        },
         {
           path: "/console",
           component: () => import("@/views/console/index.vue"),

src/views/cookbook/detail.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="box">
+    <n-scrollbar style="width: 100vw !important;height: 100vh !important;background: unset;">
+      <div class="w-2/3 mx-auto p-[20px] shadow">
+        <div class="text-3xl font-bold text-center">{{ detail.name }}</div>
+        <div class="text-md text-center mt-6">
+          {{ detail.difficulty }}
+          {{ detail.duration }}
+        </div>
+        <!-- 原料 -->
+        <div class="mx-auto py-4">
+          <n-divider class="text-2xl text-center">原材料</n-divider>
+          <div class="flex flex-wrap w-full justify-center">
+            <div class="[&:not(:last-child)]:mr-6  mt-2 text-xl" v-for="i in detail.ingredient">{{ i.name }}{{ i.amount }}</div>
+          </div>
+        </div>
+        <!-- 步骤 -->
+        <div class=" mx-auto py-4">
+          <div class="w-full text-center" v-for="i in detail.instruction">
+            <n-divider class="text-2xl my-4">{{ i.step }}</n-divider>
+            <div class="flex">
+              <n-image class="mx-auto w-80 rounded-md" :src="i.url" alt="" />
+              <div class="text-xl mt-4 flex items-center" style="width: calc(100% - 400px);">{{ i.text }}</div>
+            </div>
+          </div>
+        </div>
+        <!-- 小妙招 -->
+        <div>
+          <n-divider class="text-2xl my-4">小妙招</n-divider>
+          <div class="text-center">{{ detail.tips }}</div>
+        </div>
+      </div>
+    </n-scrollbar>
+  </div>
+
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+
+//mark import
+
+//mark data
+const route = useRoute()
+const detail = ref({})
+//mark method
+
+//mark 周期、内置函数等
+onMounted(async () => {
+  console.log(route.params.id)
+  const res = await $http.cookbook.detail({ id: route.params.id })
+  // console.log(res)
+  detail.value = res.data
+  console.log(detail.value)
+})
+
+</script>
+
+<style scoped lang="less">
+:deep(.n-scrollbar) {
+  background: transparent url('../../assets/bg/07.jpeg') no-repeat center center !important;
+}
+
+:deep(.n-divider__line) {
+  background-color: @purple !important;
+}
+</style>

src/views/cookbook/index.vue

@@ -8,7 +8,7 @@
       <div class="grid grid-cols-2 items-center justify-items-center">
         <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">
+          v-for="(i, idx) in cooks.list" @click="handdleGotoDetail(i.id)">
           <div class="w-[80px] h-[80px] rounded-sm">
             <img class="w-[80px] h-[80px] rounded-sm" :src="i.cover" alt="">
           </div>
@@ -46,6 +46,7 @@ const cooks = ref({ list: [] });
 const page = ref(1);
 const card = ref(null);
 const cardWidth = ref(0);
+const router = useRouter();
 //mark method
 async function getCate(id) {
   const res = await $http.cookbook.category({ id });
@@ -97,6 +98,10 @@ function handdleSelect() {
   getCooks(category.value, page.value)
 }
 
+function handdleGotoDetail(id) {
+  router.push(`/cook/${id}`)
+}
+
 //mark 周期、内置函数等
 onMounted(async () => {
   box.value.style.height = document.documentElement.clientHeight - 100 + 'px';