Merge branch 'master' of http://39.108.227.113:8001/zhusen/canrud-nuxt-front

# Conflicts: # nuxt.config.ts

Merge branch 'master' of http://39.108.227.113:8001/zhusen/canrud-nuxt-front
# Conflicts: # nuxt.config.ts
曾国涛
2 parents 1881dbad cd5cc258
Showing 13 changed files with 3241 additions and 304 deletions
components/CategoryList.vue
components/Footer.vue
components/MobileCategoryList.vue
components/MobileHeader.vue
components/MobileProductDetail.vue
components/ProductDetail.vue
deploy/prod2.sh
nuxt.config.ts
package-lock.json
package.json
pages/index.vue
pages/products/detail/[id]/index.vue
pages/products/index.vue
@@ -79,7 +79,9 @@ import { useProductListStore } from &quot;@/stores/product_list&quot;;
 import type { CategoryRootType } from "@/type";
 import { computed } from "vue";
 import { useRouter, useRoute } from "vue-router";
+import { useRouteQuery } from "@/stores/route_query";
+const routeQuery = useRouteQuery();
 const route = useRoute();
 const router = useRouter();
@@ -91,13 +93,16 @@ watchEffect(async () =&gt; {
     productStore.updateKeyword("");
     const categories = route.query.categories.split(",");
     const mainCategory = categories[0].trim(); // 取第一个值
-    const subCategoryName = categories[1] ? categories[1].trim() : null; // 取第二个值（如果存在）
+    const subCategoryName = ref("Not specified");
+    subCategoryName.value = categories[1]
+      ? categories[1].trim()
+      : "Not specified"; // 取第二个值（如果存在）
     // 2. 更新选中的主分类
     categoryStore.updateCategory(mainCategory);
-
+    routeQuery.updateCategories(mainCategory + "," + subCategoryName.value);
     // 3. 如果有子分类名称，查找其对应的 ID
-    if (subCategoryName) {
+    if (subCategoryName.value) {
       const subCategoryList = computed(() => {
         if (categoryStore.selectedCategory) {
           const tmp = categoryStore.list.filter(
@@ -111,7 +116,7 @@ watchEffect(async () =&gt; {
       // 4. 查找对应的子分类 ID
       const foundFuncCategory = subCategoryList.value.find(
-        (func) => func.name === subCategoryName
+        (func) => func.name === subCategoryName.value
       );
       if (foundFuncCategory) {
@@ -123,6 +128,7 @@ watchEffect(async () =&gt; {
     // 5. 判断 query 中是否存在 function，并查找对应的 ID
     if (route.query.function) {
       const functionName = route.query.function.trim();
+      routeQuery.updateFunction(functionName);
       const funcCategoryList = computed(() => {
         if (categoryStore.selectedCategory) {
           const tmp = categoryStore.list.filter(
@@ -152,15 +158,30 @@ watchEffect(async () =&gt; {
       //   // 使用找到的 funcCategoryId
       //   categoryStore.updateFuncCategory(funcCategoryId);
       // }
+    } else if (route.query.categories.includes("Energy materials")) {
+      const defaultCategory = categoryStore.list[1];
+      const defaultFuncCategory = defaultCategory.productFunctions[1];
+      if (defaultFuncCategory) {
+        categoryStore.updateFuncCategory(defaultFuncCategory.id);
+      }
+      router.push({
+        query: {
+          categories: route.query.categories,
+          function: defaultFuncCategory.name,
+        },
+      });
     }
-  } else if (Object.keys(route.query).length === 0) {
+  } else if (
+    Object.keys(route.query).length === 0 &&
+    !route.path.includes("/products/detail")
+  ) {
     // 检查是否有默认的分类
     const defaultCategory = categoryStore.list[0]; // 假设第一个分类是默认的
     if (defaultCategory) {
       const defaultCategoryName = defaultCategory.categoryDisplayName;
-      const defaultSubCategory = defaultCategory.list[0]; // 假设第一个子分类为默认子分类
-      const defaultFuncCategory = defaultCategory.productFunctions[0]; // 假设第一个功能分类为默认功能分类
+      const defaultSubCategory = defaultCategory.list[1]; // 假设第一个子分类为默认子分类
+      const defaultFuncCategory = defaultCategory.productFunctions[1]; // 假设第一个功能分类为默认功能分类
       // 更新 store 和 URL
       categoryStore.updateCategory(defaultCategoryName);
@@ -5,7 +5,9 @@
         <v-col cols="12" lg="3" sm="12" md="6">
           <b>Solution</b>
           <p><router-link to="/equipment">Lab Device</router-link></p>
-          <p><router-link to="/customize">Customized BatterTesting</router-link></p>
+          <p>
+            <router-link to="/customize">Customized BatterTesting</router-link>
+          </p>
           <p><router-link to="/pack">Pack</router-link></p>
         </v-col>
         <v-col cols="12" lg="3" sm="12" md="6">
@@ -16,6 +18,39 @@
         <v-col cols="12" lg="3" sm="12" md="6">
           <b>About</b>
           <p><router-link to="/about">About us</router-link></p>
+          <p>
+            <a
+              href="https://www.linkedin.com/company/canrd?originalSubdomain=cn"
+              rel="noopener noreferrer"
+              >LinkedIn</a
+            >
+          </p>
+          <p>
+            <a
+              href="https://www.amazon.com/s?me=A3A2SQ086XUS66&marketplaceID=ATVPDKIKX0DER"
+              rel="noopener noreferrer"
+              >Amazon</a
+            >
+          </p>
+          <p>
+            <a
+                href="https://canrd.en.alibaba.com/company_profile.html?spm=a2700.galleryofferlist.normal_offer.d_companyName.262213a0fqshG2"
+                rel="noopener noreferrer"
+            >Alibaba</a
+            >
+          </p>
+          <p>
+            <a
+              href="https://www.youtube.com/@Canrd_Tech"
+              rel="noopener noreferrer"
+              >Youtube</a
+            >
+          </p>
+          <p>
+            <a href="https://x.com/canrdenerge?s=11" rel="noopener noreferrer"
+              >Twitter</a
+            >
+          </p>
         </v-col>
         <v-col cols="12" lg="3" sm="12" md="6">
           <div class="tw-w-[250px] tw-float-left tw-mr-[8px]">
@@ -24,14 +59,20 @@
             <p>Phone： +86 19867737979</p>
             <p>Wechat： contactcanrd</p>
           </div>
-          <img class="tw-float-left" src="/wechat.jpg" alt="canrud-wechat" width="80" />
+          <img
+            class="tw-float-left"
+            src="/wechat.jpg"
+            alt="canrud-wechat"
+            width="80"
+          />
         </v-col>
       </v-row>
     </v-container>
   </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+</script>
 <style>
 b {
@@ -3,7 +3,9 @@
     class="pr-4 tw-h-[48px] tw-leading-[48px] border-b tw-flex tw-justify-between tw-items-center"
   >
     <span class="ml-4 tw-font-bold">{{ categoryStore.selectedCategory }}</span>
-    <span class="ml-1 text-grey-darken-4 text-body-2" @click="drawerVis = !drawerVis"
+    <span
+      class="ml-1 text-grey-darken-4 text-body-2"
+      @click="drawerVis = !drawerVis"
       >Filter <v-icon> mdi-filter-outline </v-icon></span
     >
   </div>
@@ -16,7 +18,11 @@
       touchless
       class="!tw-h-[70%] bg-grey-lighten-4 tw-overflow-y-auto tw-overflow-x-hidden"
     >
-      <div class="mb-4 pa-2 tw-bg-[#fff]" v-for="(item, index) in categoryStore.list" :key="index">
+      <div
+        class="mb-4 pa-2 tw-bg-[#fff]"
+        v-for="(item, index) in categoryStore.list"
+        :key="index"
+      >
         <div class="mb-4 tw-flex tw-items-center">
           <div>
             <v-img
@@ -29,7 +35,9 @@
               "
             ></v-img>
           </div>
-          <strong class="tw-m-0 tw-inline">{{ item.categoryDisplayName }}</strong>
+          <strong class="tw-m-0 tw-inline">{{
+            item.categoryDisplayName
+          }}</strong>
         </div>
         <div class="tw-flex tw-flex-wrap tw-justify-between">
           <template v-if="index !== 0">
@@ -43,7 +51,7 @@
                   : ' bg-grey-lighten-4 ')
               "
               :key="i"
-              @click="handleCategoryClick(item, k.id)"
+              @click="handleCategoryClick(item, k.id, k)"
             >
               {{ k.name }}
             </div>
@@ -59,7 +67,7 @@
                 ' tw-w-[48%] mb-4 py-3 px-2 tw-rounded-lg tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis'
               "
               :key="i"
-              @click="handleCategoryClick(item, k.id)"
+              @click="handleCategoryClick(item, k.id, k)"
             >
               {{ k.name }}
             </div>
@@ -71,62 +79,259 @@
 </template>
 <script setup lang="ts">
-import { useCategoryStore } from '@/stores/category'
-import { useProductListStore } from '@/stores/product_list'
-import type { CategoryRootType } from '@/type'
-import { computed, ref, watchEffect } from 'vue'
-import { useRouter } from 'vue-router'
+import { useCategoryStore } from "@/stores/category";
+import { useProductListStore } from "@/stores/product_list";
+import type { CategoryRootType } from "@/type";
+import { computed, ref, watchEffect } from "vue";
+import { useRouter, useRoute } from "vue-router";
-const router = useRouter()
+const router = useRouter();
+const route = useRoute();
-const categoryStore = useCategoryStore()
-const productStore = useProductListStore()
+const categoryStore = useCategoryStore();
+const productStore = useProductListStore();
+const routeQuery = useRouteQuery();
-const drawerVis = ref(false)
+const drawerVis = ref(false);
 const CATEGORY_IMG = [
-  { normal: '/category/1.png', selected: '/category/1.1.png', name: 'Energy materials' },
-  { normal: '/category/2.png', selected: '/category/2.1.png', name: 'Laboratory consumables' },
-  { normal: '/category/3.png', selected: '/category/3.1.png', name: 'Low-dimensional materials' },
-  { normal: '/category/4.png', selected: '/category/4.1.png', name: 'Equipment' }
-]
+  {
+    normal: "/category/1.png",
+    selected: "/category/1.1.png",
+    name: "Energy materials",
+  },
+  {
+    normal: "/category/2.png",
+    selected: "/category/2.1.png",
+    name: "Laboratory consumables",
+  },
+  {
+    normal: "/category/3.png",
+    selected: "/category/3.1.png",
+    name: "Low-dimensional materials",
+  },
+  {
+    normal: "/category/4.png",
+    selected: "/category/4.1.png",
+    name: "Equipment",
+  },
+];
+
+watchEffect(async () => {
+  if (route.query.categories) {
+    // 1. 提取 query.category 的内容
+    productStore.updateKeyword("");
+    const categories = route.query.categories.split(",");
+    const mainCategory = categories[0].trim(); // 取第一个值
+    const subCategoryName = ref("");
+    subCategoryName.value = categories[1]
+      ? categories[1].trim()
+      : "Not specified"; // 取第二个值（如果存在）
+
+    // 2. 更新选中的主分类
+    categoryStore.updateCategory(mainCategory);
+    routeQuery.updateCategories(mainCategory + "," + subCategoryName.value);
+    if (!route.query.categories.includes("Energy materials")) {
+      // 3. 如果有子分类名称，查找其对应的 ID
+      if (subCategoryName.value) {
+        // if (subCategoryName.value && mainCategory !== "Energy materials") {
+        const subCategoryList = computed(() => {
+          if (categoryStore.selectedCategory) {
+            const tmp = categoryStore.list.filter(
+              (item) =>
+                item.categoryDisplayName === categoryStore.selectedCategory
+            );
+            return tmp?.[0]?.list || [];
+          }
+          return [];
+        });
+
+        // 4. 查找对应的子分类 ID
+        const foundFuncCategory = subCategoryList.value.find(
+          (func) => func.name === subCategoryName.value
+        );
+
+        if (foundFuncCategory) {
+          const funcCategoryId = foundFuncCategory.id;
+          // 你可以在这里使用找到的 funcCategoryId
+          categoryStore.updateSubCategory(funcCategoryId);
+        }
+      }
+    } else {
+      // 3. 如果有子分类名称，查找其对应的 ID
+      if (subCategoryName.value) {
+        // if (subCategoryName.value && mainCategory !== "Energy materials") {
+        const subCategoryList = computed(() => {
+          if (categoryStore.selectedCategory) {
+            const tmp = categoryStore.list.filter(
+              (item) =>
+                item.categoryDisplayName === categoryStore.selectedCategory
+            );
+            return tmp?.[0]?.list || [];
+          }
+          return [];
+        });
+
+        // 4. 查找对应的子分类 ID
+        const foundFuncCategory = subCategoryList.value.find(
+          (func) => func.name === subCategoryName.value
+        );
+
+        if (foundFuncCategory) {
+          const funcCategoryId = foundFuncCategory.id;
+          // 你可以在这里使用找到的 funcCategoryId
+          categoryStore.updateSubCategory(funcCategoryId);
+        }
+      }
+      // 5. 判断 query 中是否存在 function，并查找对应的 ID
+      if (route.query.function) {
+        const functionName = route.query.function.trim();
+        routeQuery.updateFunction(functionName);
+        const funcCategoryList = computed(() => {
+          if (categoryStore.selectedCategory) {
+            const tmp = categoryStore.list.filter(
+              (item) =>
+                item.categoryDisplayName === categoryStore.selectedCategory
+            );
+            return tmp?.[0]?.productFunctions || [];
+          }
+          return [];
+        });
+        const foundFuncCategory = funcCategoryList.value.find(
+          (func) => func.name === functionName
+        );
+        console.log(foundFuncCategory, "functionName");
+
+        if (foundFuncCategory) {
+          const funcCategoryId = foundFuncCategory.id;
+          if (typeof window !== "undefined") {
+            window.selectedFuncCategory = foundFuncCategory.id;
+          }
+          // 你可以在这里使用找到的 funcCategoryId
+          categoryStore.updateFuncCategory(funcCategoryId);
+        }
+        // // 6. 查找对应的功能分类 ID
+        // const foundFuncCategory = funcCategories.find(
+        //   (func) => func.name === functionName
+        // );
+
+        // if (foundFuncCategory) {
+        //   const funcCategoryId = foundFuncCategory.id;
+        //   // 使用找到的 funcCategoryId
+        //   categoryStore.updateFuncCategory(funcCategoryId);
+        // }
+      } else if (route.query.categories.includes("Energy materials")) {
+        //没有function默认为第一个
+        const defaultCategory = categoryStore.list[0];
+        const defaultFuncCategory = defaultCategory.productFunctions[1];
+        if (defaultFuncCategory) {
+          categoryStore.updateFuncCategory(defaultFuncCategory.id);
+        }
+      }
+    }
+  } else if (
+    Object.keys(route.query).length === 0 &&
+    !route.path.includes("/products/detail")
+  ) {
+    // 检查是否有默认的分类
+    const defaultCategory = categoryStore.list[0]; // 假设第一个分类是默认的
+
+    if (defaultCategory) {
+      const defaultCategoryName = defaultCategory.categoryDisplayName;
+      const defaultSubCategory = defaultCategory.list[1]; // 假设第一个子分类为默认子分类
+      const defaultFuncCategory = defaultCategory.productFunctions[1]; // 假设第一个功能分类为默认功能分类
+
+      // 更新 store 和 URL
+      categoryStore.updateCategory(defaultCategoryName);
+      productStore.updatePageNo(1);
+
+      if (defaultSubCategory) {
+        categoryStore.updateSubCategory(defaultSubCategory.id);
+
+        // 如果有之前的值则使用之前的值，拼接新的子分类名
+        const updatedCategory =
+          defaultCategoryName + "," + defaultSubCategory.name;
+
+        // 拼接设备类型到 URL
+        router.push({
+          query: {
+            categories: defaultCategoryName + "," + defaultSubCategory.name,
+          },
+        });
+      }
+
+      if (defaultFuncCategory) {
+        categoryStore.updateFuncCategory(defaultFuncCategory.id);
+        // 拼接功能类型到 URL
+        router.push({
+          query: {
+            categories: defaultCategoryName + "," + defaultSubCategory.name,
+            function: defaultFuncCategory.name,
+          },
+        });
+      }
+    }
+  }
+});
 const SEO = {
-  'Energy materials':
-    'Energy materials,Not specified,Battery accessories,Lithium-ion batteries,Capacitors,Sodium-ion batteries,Lithium-sulfur batteries,Potassium/magnesium/aluminum/zinc batteries,Air/fuel/solar,Analytical electrodes,Complete battery accessories',
-  'Laboratory consumables':
-    'Laboratory consumables,Not specified,Glass materials,Plastic materials,Metal materials,Ceramic materials,Paper film materials,Chemical materials,Tetrafluoro materials,Safety protection,Office supplies,Tools,Others',
-  'Low-dimensional materials':
-    ',Low-dimensional materialsNot specified,Zero-dimensional carbon materials,One-dimensional carbon materials,Two-dimensional carbon materials,Three-dimensional carbon materials,Inorganic nanomaterials,Organic nanomaterials,Metal nanomaterials,Others',
+  "Energy materials":
+    "Energy materials,Not specified,Battery accessories,Lithium-ion batteries,Capacitors,Sodium-ion batteries,Lithium-sulfur batteries,Potassium/magnesium/aluminum/zinc batteries,Air/fuel/solar,Analytical electrodes,Complete battery accessories",
+  "Laboratory consumables":
+    "Laboratory consumables,Not specified,Glass materials,Plastic materials,Metal materials,Ceramic materials,Paper film materials,Chemical materials,Tetrafluoro materials,Safety protection,Office supplies,Tools,Others",
+  "Low-dimensional materials":
+    ",Low-dimensional materialsNot specified,Zero-dimensional carbon materials,One-dimensional carbon materials,Two-dimensional carbon materials,Three-dimensional carbon materials,Inorganic nanomaterials,Organic nanomaterials,Metal nanomaterials,Others",
   Equipment:
-    'Equipment,Not specified,Equipment,Accessories & fixtures,Fuel cell manufacturing and testing equipment'
-}
+    "Equipment,Not specified,Equipment,Accessories & fixtures,Fuel cell manufacturing and testing equipment",
+};
 const handleDrawerHide = () => {
-  productStore.updatePageNo(1)
+  // productStore.updatePageNo(1);
-  router.push({ query: { category: categoryStore.selectedCategory } })
+  // router.push({
+  //   query: {
+  //     categories: categoryStore.selectedCategory,
+  //   },
+  // });
-  const doc = document as any
-  const head = doc.getElementsByTagName('head')
-  const meta = doc.createElement('meta')
-  document.title = SEO[categoryStore.selectedCategory as keyof typeof SEO]
+  const doc = document as any;
+  const head = doc.getElementsByTagName("head");
+  const meta = doc.createElement("meta");
+  document.title = SEO[categoryStore.selectedCategory as keyof typeof SEO];
   doc
     .querySelector('meta[name="keywords"]')
-    .setAttribute('content', SEO[categoryStore.selectedCategory as keyof typeof SEO])
-  head[0].appendChild(meta)
-}
+    .setAttribute(
+      "content",
+      SEO[categoryStore.selectedCategory as keyof typeof SEO]
+    );
+  head[0].appendChild(meta);
+};
-const handleCategoryClick = (item: CategoryRootType, id: string) => {
-  categoryStore.updateCategory(item.categoryDisplayName)
+const handleCategoryClick = (
+  item: CategoryRootType,
+  id: string,
+  subItem: any
+) => {
+  categoryStore.updateCategory(item.categoryDisplayName);
-  if (item.categoryDisplayName === 'Energy materials') {
-    categoryStore.updateFuncCategory(id)
-    categoryStore.updateSubCategory(item.list[0].id)
+  if (item.categoryDisplayName === "Energy materials") {
+    categoryStore.updateFuncCategory(id);
+    categoryStore.updateSubCategory(item.list[0].id);
+    router.push({
+      query: {
+        categories: categoryStore.selectedCategory + "," + item.list[0].name,
+        function: subItem.name,
+      },
+    });
   } else {
-    categoryStore.updateSubCategory(id)
+    categoryStore.updateSubCategory(id);
+    router.push({
+      query: {
+        categories: categoryStore.selectedCategory + "," + subItem.name,
+      },
+    });
   }
-}
+};
 </script>
 <style lang="less" scoped></style>
@@ -5,37 +5,87 @@
     <v-layout>
       <v-app-bar scroll-behavior="elevate" color="white" density="default">
         <v-app-bar-title v-if="!showSearch">
-          <a href="/"><v-img src="/mobile/index-logo.png" alt="canrud" width="100" height="40" /></a>
+          <a href="/"
+            ><v-img
+              src="/mobile/index-logo.png"
+              alt="canrud"
+              width="100"
+              height="40"
+          /></a>
         </v-app-bar-title>
         <template v-slot:append>
           <v-btn icon v-if="!showSearch">
             <v-icon @click="showSearch = !showSearch">mdi-magnify</v-icon>
           </v-btn>
-          <v-app-bar-nav-icon @click="drawer = !drawer" v-if="!drawer"></v-app-bar-nav-icon>
-          <v-app-bar-nav-icon @click="drawer = !drawer" v-if="drawer" icon="mdi-window-close"></v-app-bar-nav-icon>
+          <v-app-bar-nav-icon
+            @click="drawer = !drawer"
+            v-if="!drawer"
+          ></v-app-bar-nav-icon>
+          <v-app-bar-nav-icon
+            @click="drawer = !drawer"
+            v-if="drawer"
+            icon="mdi-window-close"
+          ></v-app-bar-nav-icon>
         </template>
         <div class="tw-h-[36px] tw-w-[300px] ml-8" v-if="showSearch">
-          <v-text-field dense density="compact" height="24" label="Search keyword" hide-details="auto" variant="solo"
-            append-inner-icon="mdi-close" @click:appendInner="handleClick" @keydown="handleKeyDown" v-model="input">
+          <v-text-field
+            dense
+            density="compact"
+            height="24"
+            label="Search keyword"
+            hide-details="auto"
+            variant="solo"
+            append-inner-icon="mdi-close"
+            @click:appendInner="handleClick"
+            @keydown="handleKeyDown"
+            v-model="input"
+          >
           </v-text-field>
         </div>
       </v-app-bar>
-      <v-navigation-drawer width="512" v-model="drawer" location="right" temporary floating>
+      <v-navigation-drawer
+        width="512"
+        v-model="drawer"
+        location="right"
+        temporary
+        floating
+      >
         <v-list density="compact" nav>
-          <v-list-item to="/" title="Home" value="home" @click="handleTabClick" color="blue-darken-1">
+          <v-list-item
+            to="/"
+            title="Home"
+            value="home"
+            @click="handleTabClick"
+            color="blue-darken-1"
+          >
           </v-list-item>
           <v-divider></v-divider>
-          <v-list-item to="/products" title="Products" value="Products" @click="handleTabClick"
-            color="blue-darken-1"></v-list-item>
+          <v-list-item
+            to="/products"
+            title="Products"
+            value="Products"
+            @click="handleTabClick"
+            color="blue-darken-1"
+          ></v-list-item>
           <v-divider></v-divider>
-          <v-list-item to="/about" title="About" value="about" @click="handleTabClick"
-            color="blue-darken-1"></v-list-item>
+          <v-list-item
+            to="/about"
+            title="About"
+            value="about"
+            @click="handleTabClick"
+            color="blue-darken-1"
+          ></v-list-item>
           <v-divider></v-divider>
-          <v-list-item to="/contact" title="Contact" value="contact" @click="handleTabClick"
-            color="blue-darken-1"></v-list-item>
+          <v-list-item
+            to="/contact"
+            title="Contact"
+            value="contact"
+            @click="handleTabClick"
+            color="blue-darken-1"
+          ></v-list-item>
           <v-divider></v-divider>
           <v-list-item title="Blog" value="blog" color="blue-darken-1">
             <a href="http://blog.canrud.com/" target="" title="Blog">Blog</a>
@@ -73,66 +123,66 @@
 </template>
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue'
-import { useProductListStore } from '@/stores/product_list'
-import { useRouter } from 'vue-router'
-import { useDialogStore } from '@/stores/dialog'
-import { useCategoryStore } from '@/stores/category'
-import { useDisplay } from 'vuetify'
+import { ref, watchEffect } from "vue";
+import { useProductListStore } from "@/stores/product_list";
+import { useRouter } from "vue-router";
+import { useDialogStore } from "@/stores/dialog";
+import { useCategoryStore } from "@/stores/category";
+import { useDisplay } from "vuetify";
-const drawer = ref(false)
-const showSearch = ref(false)
+const drawer = ref(false);
+const showSearch = ref(false);
-const productStore = useProductListStore()
-const categoryStore = useCategoryStore()
+const productStore = useProductListStore();
+const categoryStore = useCategoryStore();
-const input = ref()
+const input = ref();
-const router = useRouter()
+const router = useRouter();
 const handleKeyDown = (e: any) => {
   if (e.keyCode == 13) {
-    categoryStore.updateDisplay(!input.value)
-    productStore.updateKeyword(input.value)
-    productStore.updatePageNo(1)
-    router.push('/products')
+    categoryStore.updateDisplay(!input.value);
+    productStore.updateKeyword(input.value);
+    productStore.updatePageNo(1);
+    router.push("/products");
   }
-}
+};
 const handleClick = () => {
-  showSearch.value = false
-}
+  showSearch.value = false;
+};
 const handleTabClick = () => {
-  categoryStore.updateDisplay(true)
-  productStore.updateKeyword('')
-}
+  categoryStore.updateDisplay(true);
+  productStore.updateKeyword("");
+};
 watchEffect(() => {
-  input.value = productStore.keyword
-})
+  input.value = productStore.keyword;
+});
 onMounted(() => {
   // 获取url的参数
-  const url = window.location.href
-  const index = url.indexOf('?')
+  const url = window.location.href;
+  const index = url.indexOf("?");
   if (index !== -1) {
-    const params = url.slice(index + 1).split('&')
-    const obj: any = {}
+    const params = url.slice(index + 1).split("&");
+    const obj: any = {};
     params.forEach((item) => {
-      const arr = item.split('=')
-      obj[arr[0]] = arr[1]
-    })
+      const arr = item.split("=");
+      obj[arr[0]] = arr[1];
+    });
     // 获取dialog的状态
     if (obj.flag) {
-      dialog.updateDialog(true)
+      dialog.updateDialog(true);
     }
     if (obj.keyword) {
-      productStore.updateKeyword(obj.keyword)
+      productStore.updateKeyword(obj.keyword);
     }
   }
-})
+});
 </script>
 <style lang="scss" scoped>
 <template>
+  <div>
+    <!-- <v-breadcrumbs
+      divider="/"
+      dense
+      style="
+        padding-top: 8px;
+        font-size: 14px;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+      "
+    >
+      <template v-for="(item, index) in items" :key="index">
+        <v-breadcrumbs-item
+          :disabled="item.disabled"
+          :href="item.href"
+          :class="{
+            'breadcrumb-last': index === items.length - 1,
+          }"
+          :style="
+            index === items.length - 1
+              ? 'color: black; font-weight: bold;'
+              : 'color:black'
+          "
+        >
+          {{ item.title }}
+        </v-breadcrumbs-item>
+        <span
+          v-if="index < items.length - 1"
+          class="breadcrumb-divider"
+          style="margin: 0 4px; font-size: 14px; color: gray"
+          >/</span
+        >
+      </template>
+    </v-breadcrumbs> -->
+    <v-breadcrumbs
+      divider="/"
+      dense
+      style="
+        padding-top: 8px;
+        font-size: 14px;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+      "
+    >
+      <template v-for="(item, index) in items" :key="index">
+        <v-breadcrumbs-item
+          :disabled="item.disabled"
+          :href="item.href"
+          style="color: #1e88e5"
+        >
+          {{ item.title }}
+        </v-breadcrumbs-item>
+        <span
+          v-if="index < items.length - 1"
+          class="breadcrumb-divider"
+          style="margin: 0 4px; font-size: 14px; color: gray"
+          >/</span
+        >
+      </template>
+    </v-breadcrumbs>
+  </div>
+
   <v-container class="ma-0 pa-0 bg-grey-lighten-5">
-    <v-carousel class="tw-float-left" height="450" v-model="slide" hide-delimiter-background>
-      <v-carousel-item cover v-for="(slide, i) in info.productimageliststore" :src="slide.url" :key="i"
-        :alt="info.name">
+    <v-carousel
+      class="tw-float-left"
+      height="450"
+      v-model="slide"
+      hide-delimiter-background
+    >
+      <v-carousel-item
+        cover
+        v-for="(slide, i) in info.productimageliststore"
+        :src="slide.url"
+        :key="i"
+        :alt="info.name"
+      >
       </v-carousel-item>
     </v-carousel>
-    <div class="mb-3 bg-white mb-sm-10 text-h4 font-weight-medium pa-4">
+    <h1 class="mb-3 bg-white mb-sm-10 text-h4 font-weight-medium pa-4">
       {{ info.name }}
-    </div>
+    </h1>
     <v-row class="mx-4 mt-0 mb-4 bg-white rounded-lg">
       <v-col cols="6">
         <div class="text-body-1 text-grey-darken-3">Brand：</div>
@@ -30,10 +104,21 @@
         <div class="text-h6">{{ info.basecore3 }}</div>
       </v-col>
     </v-row>
-    <div v-if="info.ticketTypes?.length" class="py-4 mx-4 bg-white rounded-lg tw-flex tw-flex-wrap tw-justify-around">
-      <v-sheet v-for="item in info.ticketTypes || []" :key="item.rank" rounded="lg" border class="tw-w-[40%] mb-4">
+    <div
+      ref="ticketDiv"
+      v-if="info.ticketTypes?.length"
+      class="py-0 mx-4 rounded-lg tw-flex tw-flex-wrap tw-justify-around"
+    >
+      <!-- <v-sheet
+        v-for="item in info.ticketTypes || []"
+        :key="item.rank"
+        rounded="lg"
+        border
+        class="tw-w-[40%] mb-4"
+      >
         <div
-          class="tw-bg-[#dcecfa] tw-h-[64px] !tw-leading-[64px] rounded-lg rounded-b-0 pa-2 tw-text-center text-h6 tw-overflow-hidden tw-text-ellipsis">
+          class="tw-bg-[#dcecfa] tw-h-[64px] !tw-leading-[64px] rounded-lg rounded-b-0 pa-2 tw-text-center text-h6 tw-overflow-hidden tw-text-ellipsis"
+        >
           {{ item.typeName }}
         </div>
         <div class="tw-h-[82px] pa-2">
@@ -42,17 +127,91 @@
             {{ item.rank }}
           </div>
         </div>
-      </v-sheet>
-      <v-btn size="large" color="blue-darken-1" @click="router.push('/contact')">
+      </v-sheet> -->
+      <v-table
+        density="comfortable"
+        style="width: 100%"
+        class="table1 tw-mt-[0px] tw-overflow-x-auto"
+        v-if="info.ticketTypes?.length"
+      >
+        <thead>
+          <tr class="bg-grey-lighten-3">
+            <th class="text-left headerBorder text-grey-darken-1">Name/Code</th>
+            <th class="text-left headerBorder text-grey-darken-1">
+              Specification
+            </th>
+            <th
+              v-if="info.priceShow !== undefined && info.priceShow"
+              class="text-left headerBorder text-grey-darken-1"
+            >
+              Price
+            </th>
+            <!-- <th class="text-left headerBorder text-grey-darken-1">Actions</th> -->
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            class="tr"
+            v-for="item in info.ticketTypes || []"
+            :key="item.rank"
+          >
+            <td class="td text-grey-darken-4 font-weight-medium">
+              {{ item.rank }}
+            </td>
+            <td class="td text-grey-darken-4 font-weight-medium">
+              {{ item.typeName }}
+            </td>
+            <td v-if="item.priceShow" class="td">$ {{ item.price }}</td>
+            <!-- <td class="td">
+              <v-btn
+                size="small"
+                color="blue-darken-1"
+                @click="router.push('/contact')"
+              >
+                Quote
+              </v-btn>
+            </td> -->
+          </tr>
+        </tbody>
+      </v-table>
+      <!-- <div  v-for="item in info.ticketTypes || []"
+            :key="item.rank">
+      </div> -->
+      <!-- <v-btn
+        style="margin-top: 6px"
+        color="blue-darken-1"
+        @click="router.push('/contact')"
+      >
+        Quotation Inquiry
+      </v-btn> -->
+      <!-- <div
+        v-if="showBottomButton"
+        ref="bottomButton"
+        :class="['button-container', { fixed: isFixed }]"
+      > -->
+      <v-btn
+        style="margin-top: 12px"
+        color="blue-darken-1 tw-sticky"
+        @click="router.push('/contact')"
+      >
         Quotation Inquiry
       </v-btn>
+      <!-- </div> -->
     </div>
     <!-- <v-dialog v-model="dialog" activator="parent" width="auto">
           <v-card> Contact us Email: contact@canrd.com QQ: 3003597584 / 2902385824 </v-card>
         </v-dialog> -->
     <div class="tw-pb-[64px] ma-4 rounded-lg">
-      <v-tabs class="tabs" v-model="tab" bg-color="#fff" slider-color="#1d89e4" selected-class="active">
+      <v-tabs
+        class="tabs"
+        v-model="tab"
+        style="margin-top: 25px; margin-bottom: 20px"
+        color="white"
+        bg-color="#eeeeee"
+        slider-color="blue-lighten-1"
+        selected-class="active"
+      >
         <v-tab :value="1">Product Details</v-tab>
         <v-tab :value="2">Specification</v-tab>
         <!-- <v-tab :value="3">商品百科</v-tab> -->
@@ -69,7 +228,7 @@
             <v-divider class="tw-mb-[12px]"></v-divider>
             <div v-html="info.physicalproperty"></div>
           </div>
-          <div v-if="info.advantage" class="tw-mb-[24px]">
+          <div v-if="info.storage" class="tw-mb-[24px]">
             <div class="py-2 pl-2 text-h6">Storage</div>
             <v-divider class="tw-mb-[12px]"></v-divider>
             <div v-html="info.storage"></div>
@@ -79,7 +238,7 @@
             <v-divider class="tw-mb-[12px]"></v-divider>
             <div v-html="info.introduction"></div>
           </div>
-          <div v-if="info.advantage" class="tw-mb-[24px]">
+          <div v-if="info.description" class="tw-mb-[24px]">
             <div class="py-2 pl-2 text-h6">Description</div>
             <v-divider class="tw-mb-[12px]"></v-divider>
             <div v-html="info.description"></div>
@@ -88,8 +247,12 @@
         <v-window-item key="2" :value="2">
           <v-table density="compact" class="table2">
             <tbody>
-              <tr class="tr" v-for="item in info.productAttributeList || []" :key="item.name">
-                <td class="td tw-w-[400px]">{{ item.name }}</td>
+              <tr
+                class="tr"
+                v-for="item in info.productAttributeList || []"
+                :key="item.name"
+              >
+                <td class="td tw-w-[350px]">{{ item.name }}</td>
                 <td class="td">{{ item.value }}</td>
               </tr>
             </tbody>
@@ -98,33 +261,553 @@
         <!-- <v-window-item key="3" :value="3"> 2 </v-window-item> -->
       </v-window>
     </div>
+    <div class="tw-pb-[64px] ma-4 rounded-lg" style="padding-bottom: 30px">
+      <v-tabs
+        class="tabs"
+        v-model="tabProduct"
+        color="white"
+        bg-color="#eeeeee"
+        slider-color="blue-lighten-1"
+        selected-class="active"
+        style="margin-bottom: 20px"
+      >
+        <v-tab :value="1">Best Sellers</v-tab>
+        <v-tab :value="2">Related Products</v-tab>
+        <!-- <v-tab :value="3">商品百科</v-tab> -->
+      </v-tabs>
+      <v-window v-model="tabProduct">
+        <v-window-item key="1" :value="1">
+          <div class="tw-text-center" v-if="hotLoading && isMobile()">
+            <v-progress-circular
+              color="blue-lighten-2"
+              indeterminate
+              size="64"
+              class="tw-m-auto"
+            ></v-progress-circular>
+          </div>
+          <v-item-group multiple v-if="isMobile()">
+            <v-row v-if="!hotLoading">
+              <v-col
+                v-for="(item, i) in recommendImagesHot"
+                :key="i"
+                cols="6"
+                lg="3"
+                md="4"
+                sm="6"
+              >
+                <div v-if="item !== null">
+                  <v-card
+                    :elevation="4"
+                    class="mx-auto"
+                    :href="item[0].productUrl"
+                  >
+                    <!-- 设置 eager 属性，确保图片直接加载 -->
+                    <v-img
+                      :src="item[0].url"
+                      :alt="item[0].name"
+                      eager
+                      class="d-block"
+                    />
+                    <v-card-text class="tw-text-left font-weight-medium title">
+                      <h4>{{ item[0].name }}</h4>
+                    </v-card-text>
+                  </v-card>
+                </div>
+              </v-col>
+            </v-row>
+            <!-- <div
+          v-if="!hotTotal"
+          class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]"
+        >
+          no data
+        </div> -->
+          </v-item-group>
+          <v-row v-if="isMobile()">
+            <v-col>
+              <v-pagination
+                :size="isMobile() ? 'small' : 'default'"
+                v-if="hotTotal"
+                v-model="currentIndexHot"
+                @update:modelValue="toggleRowMobileHot"
+                :length="hotLength"
+                rounded="0"
+                class="tw-float-right tw-mt-[32px]"
+                total-visible="5"
+              ></v-pagination></v-col
+          ></v-row>
+        </v-window-item>
+        <!-- best sellers -->
+        <v-window-item key="2" :value="2">
+          <div class="tw-text-center" v-if="loading && isMobile()">
+            <v-progress-circular
+              color="blue-lighten-2"
+              indeterminate
+              size="64"
+              class="tw-m-auto"
+            ></v-progress-circular>
+          </div>
+          <v-item-group multiple v-if="isMobile()">
+            <v-row v-if="!loading">
+              <v-col
+                v-for="(item, i) in recommendImages"
+                :key="i"
+                cols="6"
+                lg="3"
+                md="4"
+                sm="6"
+              >
+                <div v-if="item !== null">
+                  <v-card
+                    :elevation="4"
+                    class="mx-auto"
+                    :href="item[0].productUrl"
+                  >
+                    <!-- 设置 eager 属性，确保图片直接加载 -->
+                    <v-img
+                      :src="item[0].url"
+                      :alt="item[0].name"
+                      eager
+                      class="d-block"
+                    />
+                    <v-card-text class="tw-text-left font-weight-medium title">
+                      <h4>{{ item[0].name }}</h4>
+                    </v-card-text>
+                  </v-card>
+                </div>
+              </v-col>
+            </v-row>
+            <!-- <div
+          v-if="!hotTotal"
+          class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]"
+        >
+          no data
+        </div> -->
+          </v-item-group>
+          <v-row v-if="isMobile()">
+            <v-col>
+              <v-pagination
+                :size="isMobile() ? 'small' : 'default'"
+                v-if="total"
+                v-model="currentIndex"
+                @update:modelValue="toggleRowMobile"
+                :length="length"
+                rounded="0"
+                class="tw-float-right tw-mt-[32px]"
+                total-visible="5"
+              ></v-pagination></v-col
+          ></v-row>
+        </v-window-item>
+        <!-- <v-window-item key="3" :value="3"> 2 </v-window-item> -->
+      </v-window>
+    </div>
+    <div class="tw-pb-[64px] ma-4 rounded-lg">
+      <v-tabs
+        class="tabs"
+        v-model="tabJournal"
+        color="white"
+        bg-color="#eeeeee"
+        slider-color="blue-lighten-1"
+        selected-class="active"
+      >
+        <v-tab :value="1">Product-related Journals</v-tab>
+      </v-tabs>
+      <v-window v-model="tabJournal">
+        <v-window-item key="1" :value="1">
+          <v-list>
+            <v-list-item
+              v-for="item in info.journals"
+              :key="item.id"
+              @click="navigateToUrl(item.link)"
+              @mouseenter="hoveredItem = item.id"
+              @mouseleave="hoveredItem = null"
+            >
+              <v-list-item-title>
+                <span
+                  :class="['title', { 'full-title': hoveredItem === item.id }]"
+                >
+                  {{ item.title }}
+                </span>
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-window-item>
+      </v-window>
+    </div>
+    <!-- Basic use -->
+    <div class="social-share-container">
+      <SocialShare
+        network="facebook"
+        :styled="true"
+        :label="true"
+        :title="info.name"
+        :url="currentUrl"
+        style="color: #1e88e5; width: 140px"
+      />
+
+      <SocialShare
+        network="twitter"
+        :styled="true"
+        :label="true"
+        :title="info.name"
+        :url="currentUrl"
+        style="color: #1e88e5; width: 140px"
+      />
+
+      <SocialShare
+        network="linkedin"
+        :styled="true"
+        :label="true"
+        :title="info.name"
+        :url="currentUrl"
+        style="color: #1e88e5; width: 140px"
+      />
+    </div>
   </v-container>
 </template>
 <script setup lang="ts">
-import type { Product } from '~/type'
-import { onMounted, ref } from 'vue'
-import { useDialogStore } from '~/stores/dialog'
-const dialogStore = useDialogStore()
+import type { Product } from "~/type";
+import { isMobile } from "~/utils";
+import { defineProps, ref } from "vue";
+import { useDialogStore } from "~/stores/dialog";
+const dialogStore = useDialogStore();
 const props = defineProps<{
-  info: Product
-}>()
-const info = props.info
+  info: Product;
+}>();
+const info = props.info;
 // onMounted(() => {
 //   dialogStore.updateDialog(true)
 // })
-const tab = ref(0)
-const slide = ref(0)
-const router = useRouter()
+const tab = ref();
+const tabProduct = ref();
+const tabJournal = ref();
+const slide = ref(0);
+const router = useRouter();
+const href1 = ref("/products");
+const href2 = ref("/products");
+const routeQuery = useRouteQuery();
+const productStore = useProductListStore();
+const currentUrl = ref("https://www.canrud.com/products");
+const hotLoading = ref(false);
+const loading = ref(false);
+const maxPage = ref(1);
+const maxPageRe = ref(1);
+const tabRecom = ref();
+const recommendList = ref();
+const recommendListHot = ref();
+const recommendImages = ref();
+const recommendImagesHot = ref();
+const currentIndex = ref(1);
+const currentIndexHot = ref(1);
+const total = ref(3);
+const hotTotal = ref(10);
+const isOrNotMobile = isMobile();
+const hoveredItem = ref(null);
+
+const navigateToUrl = (url) => {
+  window.open(url); // 在新标签页中打开链接
+};
+const loadProducts = async () => {
+  const pageSize = 4;
+  loading.value = true;
+
+  let { data: resData } = await useAsyncData(
+    "list",
+    () =>
+      $fetch("/shop/product/list", {
+        method: "GET",
+        params: {
+          pageNo: currentIndex.value,
+          pageSize: pageSize,
+          ids: info.relatedProductIds,
+        },
+      }),
+    {
+      server: true, // 仅在服务器端获取数据
+    }
+  );
+  total.value = resData.value.data.total;
+  if (total.value > 50) {
+    total.value = 50;
+  }
+  recommendList.value = resData.value.data.records;
+  maxPageRe.value = resData.value.data.pages;
+  // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
+  recommendImages.value = Array.from({ length: 4 }).map((_, index) => {
+    const item = recommendList.value[index];
+    if (!item) {
+      return null;
+    }
+    // 检查 productimageliststore 是否为字符串格式，如果是，则尝试解析
+    if (typeof item.productimageliststore === "string") {
+      try {
+        item.productimageliststore = JSON.parse(item.productimageliststore);
+      } catch (error) {
+        item.productimageliststore = []; // 解析失败时，设置为空数组
+      }
+    }
+    const ree = (item.productimageliststore = item?.productimageliststore.map(
+      (productItem: ProductImage) => ({
+        ...productItem,
+        // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
+        url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
+        name: item.name,
+        productUrl: `https://www.canrud.com/products/detail/${item.id}`,
+      })
+    ));
+    return ree;
+  });
+  loading.value = false;
+};
+const loadHotProducts = async () => {
+  const pageSizeHot = ref(5);
+  if (isOrNotMobile) {
+    pageSizeHot.value = 4;
+  }
+  hotLoading.value = true;
+
+  let { data: hotProducts } = await useAsyncData(
+    "hotProducts",
+    () =>
+      $fetch("/shop/product/hotProducts", {
+        method: "GET",
+        params: {
+          pageNo: currentIndexHot.value,
+          pageSize: pageSizeHot.value,
+        },
+      }),
+    {
+      server: true, // 仅在服务器端获取数据
+    }
+  );
+  hotTotal.value = hotProducts.value.data.total;
+  recommendListHot.value = hotProducts.value.data.records;
+  maxPage.value = hotProducts.value.data.pages;
+  // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
+  recommendImagesHot.value = Array.from({ length: pageSizeHot.value }).map(
+    (_, index) => {
+      const item = recommendListHot.value[index];
+      if (!item) {
+        return null;
+      }
+      // 检查 productimageliststore 是否为字符串格式，如果是，则尝试解析
+      if (typeof item.productimageliststore === "string") {
+        try {
+          item.productimageliststore = JSON.parse(item.productimageliststore);
+        } catch (error) {
+          item.productimageliststore = []; // 解析失败时，设置为空数组
+        }
+      }
+      const ree = (item.productimageliststore = item?.productimageliststore.map(
+        (productItem: ProductImage) => ({
+          ...productItem,
+          // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
+          url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
+          name: item.name,
+          productUrl: `https://www.canrud.com/products/detail/${item.id}`,
+        })
+      ));
+      return ree;
+    }
+  );
+  hotLoading.value = false;
+};
+
+const toggleRowMobile = (value: number) => {
+  currentIndex.value = value;
+};
+const toggleRowMobileHot = (value: number) => {
+  currentIndexHot.value = value;
+};
+
+watch(currentIndexHot, (newIndex) => {
+  loadHotProducts(); // Call loadHotProducts when currentIndex changes
+});
+watch(currentIndex, (newIndex) => {
+  loadProducts(); // Call loadHotProducts when currentIndex changes
+});
+// Initial load of hot products
+await loadHotProducts(); // Load hot products the first time
+await loadProducts(); // Load hot products the first time
+
+interface BreadcrumbItem {
+  title: string; // 标题
+  disabled: boolean; // 是否禁用
+  href: string; // 链接地址
+}
+
+// 示例数据
+const items = ref<BreadcrumbItem[]>([
+  {
+    title: "Products",
+    disabled: false,
+    href: "https://www.canrud.com/products",
+  },
+  {
+    title: "CATEGORY",
+    disabled: false,
+    href: href1.value,
+  },
+  {
+    title: "Not specified",
+    disabled: false,
+    href: href2.value,
+  },
+  {
+    title: "Not specified",
+    disabled: false,
+    href: "/products",
+  },
+]);
+watchEffect(() => {
+  currentUrl.value = "https://www.canrud.com/products/detail/" + info.id;
+  if (info?.productCrumbsVO?.category1 && productStore.keyword) {
+    items.value[1].title = info.productCrumbsVO.category1;
+    items.value[1].href =
+      "https://www.canrud.com/products?categories=" +
+      info.productCrumbsVO.category1;
+    href1.value =
+      "https://www.canrud.com/products?categories=" +
+      info.productCrumbsVO.category1;
+    if (info?.productCrumbsVO?.category2) {
+      items.value[2].title = info.productCrumbsVO.category2;
+      href2.value = href1.value + "," + info.productCrumbsVO.category2;
+      items.value[2].href = href1.value + "," + info.productCrumbsVO.category2;
+    }
+    if (info?.productCrumbsVO?.function) {
+      // items.value.push({
+      //   title: info.productCrumbsVO.function,
+      //   disabled: false,
+      //   href: href2.value + "&function=" + info.productCrumbsVO.function,
+      // });
+      items.value[3].title = info.productCrumbsVO.function;
+      items.value[3].href =
+        href2.value + "&function=" + info.productCrumbsVO.function;
+    }
+  } else if (routeQuery.categories) {
+    if (!routeQuery.categories.includes("Energy materials")) {
+      routeQuery.updateFunction("Not specified");
+    }
+    const categories = routeQuery.categories.split(",");
+    const mainCategory = categories[0].trim(); // 取第一个值
+    const subCategoryName = ref(
+      categories[1] ? categories[1].trim() : "Not specified"
+    ); // 取第二个值（如果存在）
+    if (subCategoryName.value == "Accessories & fixtures") {
+      subCategoryName.value = encodeURIComponent("Accessories & fixtures");
+      items.value[2].title = "Accessories & fixtures";
+    } else {
+      items.value[2].title = subCategoryName.value;
+    }
+    items.value[1].title = mainCategory;
+    items.value[1].href =
+      "https://www.canrud.com/products?categories=" + mainCategory;
+    href1.value = "https://www.canrud.com/products?categories=" + mainCategory;
+    // items.value[1].title = subCategoryName.value;
+    href2.value = href1.value + "," + subCategoryName.value;
+    items.value[2].href = href1.value + "," + subCategoryName.value;
+    if (routeQuery?.selectedFunction) {
+      // items.value.push({
+      //   title: routeQuery.selectedFunction,
+      //   disabled: false,
+      //   href: href2.value + "&function=" + routeQuery.selectedFunction,
+      // });
+      items.value[3].title = routeQuery.selectedFunction;
+      items.value[3].href =
+        href2.value + "&function=" + routeQuery.selectedFunction;
+      // routeQuery.updateFunction(null);
+    }
+  } else if (info?.productCrumbsVO?.category1) {
+    items.value[1].title = info.productCrumbsVO.category1;
+    items.value[1].href =
+      "https://www.canrud.com/products?categories=" +
+      info.productCrumbsVO.category1;
+    href1.value =
+      "https://www.canrud.com/products?categories=" +
+      info.productCrumbsVO.category1;
+    if (info?.productCrumbsVO?.category2) {
+      items.value[2].title = info.productCrumbsVO.category2;
+      href2.value = href1.value + "," + info.productCrumbsVO.category2;
+      items.value[2].href = href1.value + "," + info.productCrumbsVO.category2;
+    }
+    if (info?.productCrumbsVO?.function) {
+      // items.value.push({
+      //   title: info.productCrumbsVO.function,
+      //   disabled: false,
+      //   href: href2.value + "&function=" + info.productCrumbsVO.function,
+      // });
+      items.value[3].title = info.productCrumbsVO.function;
+      items.value[3].href =
+        href2.value + "&function=" + info.productCrumbsVO.function;
+    }
+  }
+});
+const length = computed(() => (total.value ? Math.ceil(total.value / 4) : 0));
+const hotLength = computed(() =>
+  hotTotal.value ? Math.ceil(hotTotal.value / 4) : 0
+);
 </script>
 <style lang="scss" scoped>
+// .tabs {
+//   border-bottom: 2px solid #cbd9e4;
+// }
+
+// .active {
+//   background-color: #fff;
+// }
+
 .tabs {
-  border-bottom: 2px solid #cbd9e4;
+  border-bottom: 2px solid #1f88e5;
 }
 .active {
-  background-color: #fff;
+  background-color: #1086e8;
+}
+
+.tw-sticky {
+  position: sticky;
+}
+
+// .button-container {
+//   margin-top: 6px;
+//   display: flex;
+//   justify-content: center;
+//   position: absolute;
+//   width: 100%;
+//   bottom: auto; /* 默认情况下不固定 */
+// }
+
+// .button-container.fixed {
+//   position: fixed;
+//   bottom: 16px; /* 固定在页面底部 */
+//   left: 0;
+//   z-index: 1000;
+//   background-color: rgba(255, 255, 255, 0.9);
+//   box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
+//   padding: 8px 0;
+// }
+.social-share-container {
+  display: flex;
+  flex-direction: row; /* 父容器横向排列 */
+  gap: 1rem; /* 设置每个分享项之间的间距 */
+  margin-left: 10px;
+  margin-bottom: 10px;
+}
+
+.social-share-item {
+  display: flex;
+  flex-direction: row; /* 每个分享项横向排列 */
+  align-items: center; /* 垂直居中对齐 */
+  gap: 0.5rem; /* 标题与按钮之间的间距 */
+}
+
+.social-share-title {
+  font-size: 1rem;
+  font-weight: bold;
+}
+.v-card {
+  transition: all 0.3s ease-in-out;
 }
 </style>
 <template>
   <v-container>
+    <div>
+      <!-- <v-breadcrumbs divider="/" style="padding-top: 0">
+        <template v-for="(item, index) in items" :key="index">
+          <v-breadcrumbs-item
+            :disabled="item.disabled"
+            :href="item.href"
+            :class="{
+              'breadcrumb-disabled': item.disabled,
+              'breadcrumb-active': !item.disabled,
+              'breadcrumb-last': index === items.length - 1,
+            }"
+            :style="
+              index === items.length - 1
+                ? 'color: black;font-size:15px'
+                : 'font-size:15px;'
+            "
+          >
+            {{ item.title }}
+          </v-breadcrumbs-item>
+          <span v-if="index < items.length - 1" class="breadcrumb-divider"
+            >/</span
+          >
+        </template>
+      </v-breadcrumbs> -->
+      <v-breadcrumbs divider="/" style="padding-top: 0">
+        <template v-for="(item, index) in items" :key="index">
+          <v-breadcrumbs-item
+            :disabled="item.disabled"
+            :href="item.href"
+            :class="{
+              'breadcrumb-disabled': item.disabled,
+              'breadcrumb-active': !item.disabled,
+            }"
+            style="font-size: 14px"
+          >
+            {{ item.title }}
+          </v-breadcrumbs-item>
+          <!-- 添加分隔符，排除最后一个 item -->
+          <span
+            v-if="index < items.length - 1"
+            class="breadcrumb-divider"
+            style="color: gray"
+            >/</span
+          >
+        </template>
+      </v-breadcrumbs>
+    </div>
     <v-row class="mb-16 ma-0">
-      <v-col cols="12" sm="5">
+      <v-col cols="12" sm="5" class="carousel-container">
         <v-carousel
-          class="tw-float-left"
+          class="tw-float-left tw-sticky tw-top-[16px]"
           height="450"
           v-model="slide"
           hide-delimiter-background
+          style="top: 16px"
         >
           <v-carousel-item
             cover
@@ -18,33 +66,34 @@
           </v-carousel-item>
         </v-carousel>
       </v-col>
-      <v-col cols="12" sm="7">
-        <v-row class="bg-white mb-sm-10 text-h4 font-weight-medium">
+      <v-col cols="12" sm="7" class="table-container">
+        <!-- <v-row class="bg-white mb-sm-10 text-h4 font-weight-medium">
           <v-col>{{ info.name }}</v-col>
-        </v-row>
+        </v-row> -->
+        <h1 class="tw-m-[12px] tw-mb-[36px]">{{ info.name }}</h1>
         <div class="tw-flex tw-flex-wrap">
-          <div class="tw-w-1/2">
-            <span class="tw-leading-[10px] tw-m-[16px]">
+          <div class="tw-w-1/2 tw-mb-[12px]">
+            <span class="tw-leading-[10px] tw-m-[12px]">
               Brand：{{ info.brandName }}
             </span>
           </div>
           <div class="tw-w-1/2 tw-mb-[12px]">
-            <span class="tw-leading-[10px] tw-m-[16px]"
+            <span class="tw-leading-[10px] tw-m-[12px]"
               >Product Model：{{ info.model }}</span
             >
           </div>
           <div class="tw-w-1/2 tw-mb-[12px]" v-if="info.basename1">
-            <span class="tw-leading-[10px] tw-m-[16px]"
+            <span class="tw-leading-[10px] tw-m-[12px]"
               >{{ info.basename1 }}：{{ info.basecore1 }}</span
             >
           </div>
           <div class="tw-w-1/2 tw-mb-[12px]" v-if="info.basename2">
-            <span class="tw-leading-[10px] tw-m-[16px]"
+            <span class="tw-leading-[10px] tw-m-[12px]"
               >{{ info.basename2 }}：{{ info.basecore2 }}</span
             >
           </div>
           <div class="tw-w-1/2 tw-mb-[12px]" v-if="info.basename3">
-            <span class="tw-leading-[10px] tw-m-[16px]"
+            <span class="tw-leading-[10px] tw-m-[12px]"
               >{{ info.basename3 }}：{{ info.basecore3 }}</span
             >
           </div>
@@ -60,15 +109,21 @@
             :key="index"
             class="tw-w-1/2 tw-mb-[12px]"
           >
-            <span class="tw-leading-[10px] tw-m-[16px]"
+            <span
+              class="tw-leading-normal tw-m-0 tw-block tw-max-w-full tw-break-words tw-ml-[12px]"
               >{{ attribute.name }}：{{ attribute.value }}</span
             >
           </div>
         </div>
-        <v-table
+        <!-- <v-table
           density="comfortable"
           class="table1 tw-mt-[32px]"
           v-if="info.ticketTypes?.length"
+        > -->
+        <v-table
+          density="comfortable"
+          class="table1 tw-mt-[32px] tw-overflow-x-auto"
+          v-if="info.ticketTypes?.length"
         >
           <thead>
             <tr class="bg-grey-lighten-3">
@@ -120,63 +175,326 @@
         </v-dialog> -->
       </v-col>
     </v-row>
-    <div class="tw-pb-[64px]">
-      <v-tabs
-        class="tabs"
-        v-model="tab"
-        color="white"
-        bg-color="#eeeeee"
-        slider-color="blue-lighten-1"
-        selected-class="active"
+    <v-tabs
+      class="tabs"
+      v-model="tabRecomHot"
+      style="margin-top: 25px"
+      color="white"
+      bg-color="#eeeeee"
+      slider-color="blue-lighten-1"
+      selected-class="active"
+      v-if="recommendImagesHot[0] !== null"
+    >
+      <v-tab :value="1">Best Sellers</v-tab>
+      <!-- <v-tab :value="3">商品百科</v-tab> -->
+    </v-tabs>
+    <div id="image-container" v-if="recommendImagesHot[0] !== null">
+      <div class="recommend-left-box">
+        <v-img
+          src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/76c987e13a334be481a346c19c2284f3qy4tjnxps7.png"
+          alt="往左移"
+          class="recommend-img-left"
+          @click="toggleRowLeft"
+        />
+      </div>
+      <div class="image-row" id="row1">
+        <!-- <img
+          v-for="(imageObj, index) in recommendImages.slice(0, 5)"
+          :key="'row1-' + index"
+          :src="imageObj[0]?.url"
+          :alt="'Image ' + (index + 1)"
+          style="margin: 0 5px; width: 200px; height: 200px"
+        /> -->
+        <div
+          v-for="(imageObj, index) in recommendImagesHot"
+          :key="'row1-' + index"
+          class="imageTotal"
+        >
+          <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
+            <img
+              :src="imageObj[0]?.url"
+              :alt="'Image ' + (index + 1)"
+              class="item-imgHot"
+            />
+            <span class="image-name">
+              {{ imageObj[0]?.name }}
+            </span>
+          </a>
+          <div v-else style="width: 200px; height: 200px"></div>
+        </div>
+      </div>
+      <div class="recommend-right-box">
+        <v-img
+          src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/b5daa0a8f2f140f5b406e984c730a453iznzlekysg.png"
+          alt="往右移"
+          class="recommend-img-right"
+          @click="toggleRowRight"
+        />
+      </div>
+    </div>
+
+    <div style="display: flex; width: 100%; box-sizing: border-box">
+      <div
+        class="tw-pb-[64px]"
+        style="
+          width: 70%;
+          margin-right: 10px;
+          display: flex;
+          flex-direction: column;
+          flex-wrap: wrap;
+          overflow: auto;
+        "
       >
-        <v-tab :value="1">Product Details</v-tab>
-        <v-tab :value="2">Specification</v-tab>
-        <!-- <v-tab :value="3">商品百科</v-tab> -->
-      </v-tabs>
-      <v-window v-model="tab" class="tw-p-[24px]">
-        <v-window-item key="1" :value="1">
-          <div v-if="info.advantage" class="tw-mb-[24px]">
-            <div class="text-h6">Advantage</div>
-            <v-divider class="tw-mb-[12px]"></v-divider>
-            <div v-html="info.advantage"></div>
-          </div>
-          <div v-if="info.physicalproperty" class="tw-mb-[24px]">
-            <div class="text-h6">Physical Property</div>
-            <v-divider class="tw-mb-[12px]"></v-divider>
-            <div v-html="info.physicalproperty"></div>
-          </div>
-          <div v-if="info.advantage" class="tw-mb-[24px]">
-            <div class="text-h6">Storage</div>
-            <v-divider class="tw-mb-[12px]"></v-divider>
-            <div v-html="info.storage"></div>
-          </div>
-          <div v-if="info.introduction" class="tw-mb-[24px]">
-            <div class="text-h6">Introduction</div>
-            <v-divider class="tw-mb-[12px]"></v-divider>
-            <div v-html="info.introduction"></div>
-          </div>
-          <div v-if="info.advantage" class="tw-mb-[24px]">
-            <div class="text-h6">Description</div>
-            <v-divider class="tw-mb-[12px]"></v-divider>
-            <div v-html="info.description"></div>
-          </div>
-        </v-window-item>
-        <v-window-item key="2" :value="2">
-          <v-table density="compact" class="table2">
-            <tbody>
-              <tr
-                class="tr"
-                v-for="item in info.productAttributeList || []"
-                :key="item.name"
+        <v-tabs
+          class="tabs"
+          v-model="tab"
+          color="white"
+          bg-color="#eeeeee"
+          slider-color="blue-lighten-1"
+          selected-class="active"
+          style="width: 100%"
+        >
+          <v-tab :value="1">Product Details</v-tab>
+          <v-tab :value="2">Specification</v-tab>
+          <!-- <v-tab :value="3">商品百科</v-tab> -->
+        </v-tabs>
+        <v-window
+          v-model="tab"
+          class="tw-p-[24px]"
+          style="
+            min-height: 500px;
+            height: auto;
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+            white-space: pre-wrap;
+          "
+        >
+          <v-window-item key="1" :value="1">
+            <!-- 修改位置 1: 使用 clearSpanStyle 方法清理 info.advantage -->
+            <div v-if="info.advantage" class="tw-mb-[24px]">
+              <div class="text-h6">Advantage</div>
+              <v-divider class="tw-mb-[12px]"></v-divider>
+              <div v-html="clearSpanStyle(info.advantage)"></div>
+            </div>
+            <!-- 修改位置 2: 使用 clearSpanStyle 方法清理 info.physicalproperty -->
+            <div v-if="info.physicalproperty" class="tw-mb-[24px]">
+              <div class="text-h6">Physical Property</div>
+              <v-divider class="tw-mb-[12px] html-content"></v-divider>
+              <div v-html="clearSpanStyle(info.physicalproperty)"></div>
+            </div>
+            <!-- 修改位置 3: 使用 clearSpanStyle 方法清理 info.storage -->
+            <div v-if="info.storage" class="tw-mb-[24px]">
+              <div class="text-h6">Storage</div>
+              <v-divider class="tw-mb-[12px]"></v-divider>
+              <div v-html="clearSpanStyle(info.storage)"></div>
+            </div>
+            <!-- 修改位置 4: 使用 clearSpanStyle 方法清理 info.introduction -->
+            <div v-if="info.introduction" class="tw-mb-[24px]">
+              <div class="text-h6">Introduction</div>
+              <v-divider class="tw-mb-[12px]"></v-divider>
+              <div v-html="clearSpanStyle(info.introduction)"></div>
+            </div>
+            <!-- 修改位置 5: 使用 clearSpanStyle 方法清理 info.description -->
+            <div v-if="info.description" class="tw-mb-[24px]">
+              <div class="text-h6">Description</div>
+              <v-divider class="tw-mb-[12px]"></v-divider>
+              <div v-html="clearSpanStyle(info.description)"></div>
+            </div>
+          </v-window-item>
+          <!-- <div v-if="info.advantage" class="tw-mb-[24px]">
+              <div class="text-h6">Advantage</div>
+              <v-divider class="tw-mb-[12px]"></v-divider>
+              <div v-html="info.advantage"></div>
+            </div>
+            <div v-if="info.physicalproperty" class="tw-mb-[24px]">
+              <div class="text-h6">Physical Property</div>
+              <v-divider class="tw-mb-[12px] html-content"></v-divider>
+              <div
+                v-html="info.physicalproperty"
+                style="
+                  overflow-wrap: break-word;
+                  word-wrap: break-word;
+                  white-space: pre-wrap;
+                  line-height: 1.5;
+                "
+              ></div>
+            </div>
+            <div v-if="info.storage" class="tw-mb-[24px]">
+              <div class="text-h6">Storage</div>
+              <v-divider class="tw-mb-[12px]"></v-divider>
+              <div v-html="info.storage"></div>
+            </div>
+            <div v-if="info.introduction" class="tw-mb-[24px]">
+              <div class="text-h6">Introduction</div>
+              <v-divider class="tw-mb-[12px]"></v-divider>
+              <div v-html="info.introduction"></div>
+            </div>
+            <div v-if="info.description" class="tw-mb-[24px]">
+              <div class="text-h6">Description</div>
+              <v-divider class="tw-mb-[12px]"></v-divider>
+              <div v-html="info.description"></div>
+            </div>
+          </v-window-item> -->
+          <v-window-item key="2" :value="2">
+            <v-table density="compact" class="table2">
+              <tbody>
+                <tr
+                  class="tr"
+                  v-for="item in info.productAttributeList || []"
+                  :key="item.name"
+                >
+                  <td class="td tw-w-[400px]">{{ item.name }}</td>
+                  <td class="td">{{ item.value }}</td>
+                </tr>
+              </tbody>
+            </v-table>
+          </v-window-item>
+          <!-- <v-window-item key="3" :value="3"> 2 </v-window-item> -->
+        </v-window>
+      </div>
+      <div style="width: 30%">
+        <v-tabs
+          v-model="tabPeriodical"
+          color="white"
+          bg-color="#eeeeee"
+          slider-color="blue-lighten-1"
+          selected-class="active"
+          grow
+        >
+          <v-tab value="one">Product-related Journals</v-tab>
+        </v-tabs>
+        <v-list>
+          <v-list-item
+            v-for="item in info.journals"
+            :key="item.id"
+            @click="navigateToUrl(item.link)"
+            @mouseenter="hoveredItem = item.id"
+            @mouseleave="hoveredItem = null"
+          >
+            <v-list-item-title>
+              <span
+                :class="['title', { 'full-title': hoveredItem === item.id }]"
               >
-                <td class="td tw-w-[400px]">{{ item.name }}</td>
-                <td class="td">{{ item.value }}</td>
-              </tr>
-            </tbody>
-          </v-table>
-        </v-window-item>
-        <!-- <v-window-item key="3" :value="3"> 2 </v-window-item> -->
-      </v-window>
+                {{ item.title }}
+              </span>
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </div>
+    </div>
+    <v-tabs
+      class="tabs"
+      v-model="tabRecom"
+      color="white"
+      bg-color="#eeeeee"
+      slider-color="blue-lighten-1"
+      selected-class="active"
+      v-if="recommendImages[0] !== null"
+    >
+      <v-tab :value="1">Related Products</v-tab>
+      <!-- <v-tab :value="3">商品百科</v-tab> -->
+    </v-tabs>
+    <div id="image-container" v-if="recommendImages[0] !== null">
+      <div class="recommend-left-box">
+        <v-img
+          src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/76c987e13a334be481a346c19c2284f3qy4tjnxps7.png"
+          alt="往左移"
+          class="recommend-img-left"
+          @click="toggleRow"
+        />
+      </div>
+      <div v-if="currentIndex === 0" class="image-row" id="row1">
+        <!-- <img
+          v-for="(imageObj, index) in recommendImages.slice(0, 5)"
+          :key="'row1-' + index"
+          :src="imageObj[0]?.url"
+          :alt="'Image ' + (index + 1)"
+          style="margin: 0 5px; width: 200px; height: 200px"
+        /> -->
+        <div
+          v-for="(imageObj, index) in recommendImages.slice(0, 5)"
+          :key="'row1-' + index"
+          class="imageTotal"
+        >
+          <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
+            <img
+              :src="imageObj[0]?.url"
+              :alt="'Image ' + (index + 1)"
+              class="item-imgHot"
+            />
+            <span class="image-name">
+              {{ imageObj[0]?.name }}
+            </span>
+          </a>
+          <div v-else style="width: 200px; height: 200px"></div>
+        </div>
+      </div>
+      <div v-else class="image-row" id="row2">
+        <!-- <img
+          v-for="(imageObj, index) in recommendImages.slice(5, 10)"
+          :key="'row2-' + index"
+          :src="imageObj[0]?.url"
+          :alt="'Image ' + (index + 6)"
+          style="margin: 0 5px; width: 200px; height: 200px"
+        /> -->
+        <div
+          v-for="(imageObj, index) in recommendImages.slice(5, 10)"
+          :key="'row2-' + index"
+          class="imageTotal"
+        >
+          <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
+            <img
+              :src="imageObj[0]?.url"
+              :alt="'Image ' + (index + 6)"
+              class="item-imgHot"
+            />
+            <span class="image-name">
+              {{ imageObj[0]?.name }}
+            </span>
+          </a>
+          <div
+            v-else
+            style="width: 200px; height: 200px; margin-right: 10px"
+          ></div>
+        </div>
+      </div>
+      <div class="recommend-right-box">
+        <v-img
+          src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/b5daa0a8f2f140f5b406e984c730a453iznzlekysg.png"
+          alt="往右移"
+          class="recommend-img-right"
+          @click="toggleRow"
+        />
+      </div>
+    </div>
+
+    <div class="social-share-container">
+      <SocialShare
+        network="facebook"
+        :styled="true"
+        :label="true"
+        :title="info.name"
+        :url="currentUrl"
+        style="color: #1e88e5; width: 140px"
+      />
+
+      <SocialShare
+        network="twitter"
+        :styled="true"
+        :label="true"
+        :title="info.name"
+        :url="currentUrl"
+        style="color: #1e88e5; width: 140px"
+      />
+
+      <SocialShare
+        network="linkedin"
+        :styled="true"
+        :label="true"
+        :title="info.name"
+        :url="currentUrl"
+        style="color: #1e88e5; width: 140px"
+      />
     </div>
   </v-container>
 </template>
@@ -185,20 +503,291 @@
 import type { Product, ProductImage } from "~/type";
 import { onMounted, ref } from "vue";
 import { useDialogStore } from "~/stores/dialog";
+import { useRouter, useRoute } from "vue-router";
+import { useRouteQuery } from "@/stores/route_query";
+
+const recommendList = ref();
+const recommendImages = ref();
+const selectedItem = ref();
+const tabRecom = ref(0);
+const tabRecommend = ref(0);
+const tabPeriodical = ref(0);
+const route = useRoute();
+const router = useRouter();
+const routeQuery = useRouteQuery();
 const dialogStore = useDialogStore();
+const href1 = ref("/products");
+const href2 = ref("/products");
+const idHref = ref("/products");
+const hoveredItem = ref(null);
+const productStore = useProductListStore();
+const maxPage = ref(1);
+const tabRecomHot = ref();
+const recommendListHot = ref();
+const recommendImagesHot = ref();
+const currentIndexHot = ref(1);
+const currentUrl = ref("https://www.canrud.com/products");
+// 定义单个 item 的接口
+interface BreadcrumbItem {
+  title: string; // 标题
+  disabled: boolean; // 是否禁用
+  href: string; // 链接地址
+}
+// 示例数据
+const items = ref<BreadcrumbItem[]>([
+  {
+    title: "Products",
+    disabled: false,
+    href: "https://www.canrud.com/products",
+  },
+  {
+    title: "CATEGORY",
+    disabled: false,
+    href: href1.value,
+  },
+  {
+    title: "Not specified",
+    disabled: false,
+    href: href2.value,
+  },
+  {
+    title: "Not specified",
+    disabled: false,
+    href: "/products",
+  },
+]);
 const props = defineProps<{
   info: Product;
 }>();
 const info = props.info;
+let { data: resData } = await useAsyncData(
+  "list",
+  () =>
+    $fetch("/shop/product/list", {
+      method: "GET",
+      params: {
+        pageNo: 1,
+        pageSize: 20,
+        ids: info.relatedProductIds,
+      },
+    }),
+  {
+    server: true, // 仅在服务器端获取数据
+  }
+);
+const loadHotProducts = async () => {
+  let { data: hotProducts } = await useAsyncData(
+    "hotProducts",
+    () =>
+      $fetch("/shop/product/hotProducts", {
+        method: "GET",
+        params: {
+          pageNo: currentIndexHot.value,
+          pageSize: 5,
+        },
+      }),
+    {
+      server: true, // 仅在服务器端获取数据
+    }
+  );
+  recommendListHot.value = hotProducts.value.data.records;
+  maxPage.value = hotProducts.value.data.pages;
+  // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
+  recommendImagesHot.value = Array.from({ length: 5 }).map((_, index) => {
+    const item = recommendListHot.value[index];
+    if (!item) {
+      return null;
+    }
+    // 检查 productimageliststore 是否为字符串格式，如果是，则尝试解析
+    if (typeof item.productimageliststore === "string") {
+      try {
+        item.productimageliststore = JSON.parse(item.productimageliststore);
+      } catch (error) {
+        item.productimageliststore = []; // 解析失败时，设置为空数组
+      }
+    }
+    const ree = (item.productimageliststore = item?.productimageliststore.map(
+      (productItem: ProductImage) => ({
+        ...productItem,
+        // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
+        url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
+        name: item.name,
+        productUrl: `https://www.canrud.com/products/detail/${item.id}`,
+      })
+    ));
+    return ree;
+  });
+};
+const clearSpanStyle = (htmlContent) => {
+  if (!htmlContent) return ""; // 检查是否为空
+  // 创建一个 DOM 解析器
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(htmlContent, "text/html");
+
+  // 清理 span 的 style 属性
+  const spans = doc.querySelectorAll("span");
+  spans.forEach((span) => {
+    span.removeAttribute("style"); // 清空 style 属性
+  });
+
+  // 修改 img 的 style 属性，追加 width: 100%
+  const imgs = doc.querySelectorAll("img");
+  imgs.forEach((img) => {
+    const style = img.getAttribute("style") || ""; // 获取现有 style
+    if (!style.includes("width: 100%")) {
+      img.setAttribute("style", `${style} width: 100%;`.trim()); // 添加 width: 100%
+    }
+  });
+
+  // 返回处理后的 HTML
+  return doc.body.innerHTML;
+};
+const toggleRowLeft = () => {
+  if (currentIndexHot.value !== 1) {
+    currentIndexHot.value--;
+  } else if (currentIndexHot.value == 1) {
+    currentIndexHot.value = maxPage.value;
+  }
+};
+const toggleRowRight = () => {
+  if (currentIndexHot.value < maxPage.value) {
+    currentIndexHot.value++;
+  } else if (currentIndexHot.value == maxPage.value) {
+    currentIndexHot.value = 1;
+  }
+};
+watch(currentIndexHot, (newIndex) => {
+  loadHotProducts(); // Call loadHotProducts when currentIndex changes
+});
+
+// Initial load of hot products
+await loadHotProducts(); // Load hot products the first time
+
+watchEffect(() => {
+  console.log(info, "5656info");
+  currentUrl.value = "https://www.canrud.com/products/detail/" + info.id;
+  if (info?.productCrumbsVO?.category1 && productStore.keyword) {
+    items.value[1].title = info.productCrumbsVO.category1;
+    items.value[1].href =
+      "https://www.canrud.com/products?categories=" +
+      info.productCrumbsVO.category1;
+    href1.value =
+      "https://www.canrud.com/products?categories=" +
+      info.productCrumbsVO.category1;
+    if (info?.productCrumbsVO?.category2) {
+      items.value[2].title = info.productCrumbsVO.category2;
+      href2.value = href1.value + "," + info.productCrumbsVO.category2;
+      items.value[2].href = href1.value + "," + info.productCrumbsVO.category2;
+    }
+    if (info?.productCrumbsVO?.function) {
+      // items.value.push({
+      //   title: info.productCrumbsVO.function,
+      //   disabled: false,
+      //   href: href2.value + "&function=" + info.productCrumbsVO.function,
+      // });
+      items.value[3].title = info.productCrumbsVO.function;
+      items.value[3].href =
+        href2.value + "&function=" + info.productCrumbsVO.function;
+    }
+  } else if (routeQuery.categories) {
+    if (!routeQuery.categories.includes("Energy materials")) {
+      routeQuery.updateFunction("Not specified");
+    }
+    const categories = routeQuery.categories.split(",");
+    const mainCategory = categories[0].trim(); // 取第一个值
+    const subCategoryName = ref(
+      categories[1] ? categories[1].trim() : "Not specified"
+    ); // 取第二个值（如果存在）
+    if (subCategoryName.value == "Accessories & fixtures") {
+      subCategoryName.value = encodeURIComponent("Accessories & fixtures");
+      items.value[2].title = "Accessories & fixtures";
+    } else {
+      items.value[2].title = subCategoryName.value;
+    }
+    items.value[1].title = mainCategory;
+    items.value[1].href =
+      "https://www.canrud.com/products?categories=" + mainCategory;
+    href1.value = "https://www.canrud.com/products?categories=" + mainCategory;
+    // items.value[1].title = subCategoryName.value;
+    href2.value = href1.value + "," + subCategoryName.value;
+    items.value[2].href = href1.value + "," + subCategoryName.value;
+    if (routeQuery?.selectedFunction) {
+      // items.value.push({
+      //   title: routeQuery.selectedFunction,
+      //   disabled: false,
+      //   href: href2.value + "&function=" + routeQuery.selectedFunction,
+      // });
+      items.value[3].title = routeQuery.selectedFunction;
+      items.value[3].href =
+        href2.value + "&function=" + routeQuery.selectedFunction;
+      // routeQuery.updateFunction(null);
+    }
+  } else if (info?.productCrumbsVO?.category1) {
+    items.value[1].title = info.productCrumbsVO.category1;
+    items.value[1].href =
+      "https://www.canrud.com/products?categories=" +
+      info.productCrumbsVO.category1;
+    href1.value =
+      "https://www.canrud.com/products?categories=" +
+      info.productCrumbsVO.category1;
+    if (info?.productCrumbsVO?.category2) {
+      items.value[2].title = info.productCrumbsVO.category2;
+      href2.value = href1.value + "," + info.productCrumbsVO.category2;
+      items.value[2].href = href1.value + "," + info.productCrumbsVO.category2;
+    }
+    if (info?.productCrumbsVO?.function) {
+      // items.value.push({
+      //   title: info.productCrumbsVO.function,
+      //   disabled: false,
+      //   href: href2.value + "&function=" + info.productCrumbsVO.function,
+      // });
+      items.value[3].title = info.productCrumbsVO.function;
+      items.value[3].href =
+        href2.value + "&function=" + info.productCrumbsVO.function;
+    }
+  }
+  recommendList.value = resData.value.data.records;
+  // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
+  recommendImages.value = Array.from({ length: 10 }).map((_, index) => {
+    const item = recommendList.value[index];
+    if (!item) {
+      return null;
+    }
+    // 检查 productimageliststore 是否为字符串格式，如果是，则尝试解析
+    if (typeof item.productimageliststore === "string") {
+      try {
+        item.productimageliststore = JSON.parse(item.productimageliststore);
+      } catch (error) {
+        item.productimageliststore = []; // 解析失败时，设置为空数组
+      }
+    }
+    const ree = (item.productimageliststore = item?.productimageliststore.map(
+      (productItem: ProductImage) => ({
+        ...productItem,
+        // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
+        url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
+        name: item.name,
+        productUrl: `https://www.canrud.com/products/detail/${item.id}`,
+      })
+    ));
+    return ree;
+  });
+});
 // onMounted(() => {
 //   dialogStore.updateDialog(true)
 // })
+const currentIndex = ref(0);
+const navigateToUrl = (url) => {
+  window.open(url); // 在新标签页中打开链接
+};
+const toggleRow = () => {
+  currentIndex.value = currentIndex.value === 0 ? 1 : 0;
+};
 const tab = ref(0);
 const slide = ref(0);
-const router = useRouter();
 </script>
 <style lang="scss" scoped>
@@ -206,10 +795,32 @@ const router = useRouter();
   border-top: 3px solid #1f88e5 !important;
 }
-.tabs {
-  border-bottom: 2px solid #1f88e5;
+@media screen and (min-width: 1537px) {
+  .tabs {
+    border-bottom: 2px solid #1f88e5;
+    margin: 10px auto 20px;
+    width: 100%;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .tabs {
+    border-bottom: 2px solid #1f88e5;
+    margin: 10px auto 40px;
+    width: 100%;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .tabs {
+    border-bottom: 2px solid #1f88e5;
+    margin: 10px auto 40px;
+    width: 100%;
+  }
 }
+// .tabs {
+//   border-bottom: 2px solid #1f88e5;
+// }
+
 .active {
   background-color: #1086e8;
 }
@@ -231,4 +842,234 @@ th {
     border-bottom: 1px solid #dcdcdc !important;
   }
 }
+
+.tw-sticky {
+  position: sticky;
+}
+
+.carousel-container {
+  position: relative;
+}
+
+.table-container {
+  overflow-x: auto; /* 防止表格超出页面宽度 */
+}
+
+.table1 {
+  width: 100%;
+  min-width: 600px; /* 设置表格最小宽度 */
+}
+
+.tr {
+  border-bottom: 1px solid #e0e0e0; /* 表格行样式 */
+}
+
+.headerBorder {
+  border-bottom: 2px solid #ccc; /* 表头边框 */
+}
+
+.text-grey-darken-4 {
+  color: #333; /* 表格文字颜色 */
+}
+.breadcrumb-disabled {
+  color: black;
+  pointer-events: none; /* 禁用点击 */
+  text-decoration: none; /* 移除链接样式 */
+}
+
+.breadcrumb-active {
+  color: #1e88e5;
+}
+
+@media screen and (min-width: 1537px) {
+  #image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 320px;
+    margin: 10px auto 80px;
+    width: 100%;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  #image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 320px;
+    margin: 10px auto 0px;
+    width: 80%;
+    padding: 0;
+  }
+}
+@media screen and (max-width: 1280px) {
+  #image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 320px;
+    margin: 10px auto 0px;
+    width: 80%;
+    padding: 0;
+  }
+}
+.image-row {
+  display: flex;
+  height: 245px;
+}
+@media screen and (min-width: 1537px) {
+  .imageTotal {
+    display: inline-block;
+    margin: 0 5px;
+    text-align: center;
+    width: 300px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .imageTotal {
+    display: inline-block;
+    margin: 0 5px;
+    text-align: center;
+    width: 200px;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .imageTotal {
+    display: inline-block;
+    margin: 0 5px;
+    text-align: center;
+    width: 200px;
+  }
+}
+@media screen and (min-width: 1537px) {
+  .image-row img {
+    width: 200px;
+    height: 200px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .image-row img {
+    width: 140px;
+    height: 140px;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .image-row img {
+    width: 160px;
+    height: 160px;
+  }
+}
+@media screen and (min-width: 1537px) {
+  .image-name {
+    display: -webkit-box; /* Enables multi-line text handling */
+    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
+    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
+    overflow: hidden; /* Hides the overflowed text */
+    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
+    margin-top: 5px;
+    font-size: 16px;
+    width: 180px;
+    color: #555;
+    text-align: center; /* Centers the text horizontally */
+    margin-left: 50px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .image-name {
+    display: -webkit-box; /* Enables multi-line text handling */
+    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
+    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
+    overflow: hidden; /* Hides the overflowed text */
+    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
+    margin-top: 5px;
+    font-size: 16px;
+    width: 180px;
+    color: #555;
+    text-align: center; /* Centers the text horizontally */
+    margin-left: 10px;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .image-name {
+    display: -webkit-box; /* Enables multi-line text handling */
+    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
+    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
+    overflow: hidden; /* Hides the overflowed text */
+    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
+    margin-top: 5px;
+    font-size: 16px;
+    width: 180px;
+    color: #555;
+    text-align: center; /* Centers the text horizontally */
+    margin-left: 20px;
+  }
+}
+
+button .recommendButton {
+  margin: 0 0px;
+  cursor: pointer;
+}
+
+.recommend-left-box {
+}
+
+.recommend-img-left {
+  width: 26px;
+  height: 27px;
+  margin-right: 30px;
+  margin-bottom: 50px;
+}
+
+.recommend-img-left:hover {
+  cursor: pointer;
+}
+.recommend-right-box {
+}
+
+.recommend-img-right {
+  width: 26px;
+  height: 27px;
+  margin-left: 30px;
+  margin-bottom: 50px;
+}
+
+.recommend-img-right:hover {
+  cursor: pointer;
+}
+
+.social-share-container {
+  display: flex;
+  flex-direction: row; /* 父容器横向排列 */
+  gap: 1rem; /* 设置每个分享项之间的间距 */
+  margin-top: 40px;
+}
+
+.social-share-item {
+  display: flex;
+  flex-direction: row; /* 每个分享项横向排列 */
+  align-items: center; /* 垂直居中对齐 */
+  gap: 0.5rem; /* 标题与按钮之间的间距 */
+}
+
+.social-share-title {
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+.title {
+  font-size: 15px; /* 设置字体大小为24px */
+  color: black; /* 设置字体颜色为黑色 */
+  display: -webkit-box; /* 使用盒模型显示多行文本 */
+  -webkit-line-clamp: 2; /* 限制为两行 */
+  -webkit-box-orient: vertical; /* 盒子方向为垂直 */
+  overflow: hidden; /* 超过部分隐藏 */
+  transition: max-height 0.3s ease; /* 过渡效果 */
+}
+
+.full-title {
+  display: block; /* 当悬浮时显示为块级元素 */
+  color: #1e88e5;
+  white-space: normal; /* 允许换行 */
+  overflow: visible; /* 显示全部内容 */
+}
 </style>
 #!/bin/bash
 # 变量定义
-LAST_TAG="1.0.15"
-TAG="1.0.16"
+LAST_TAG="1.0.40"
+TAG="1.0.41"
 TARGET_PATH="/root/web/canrud-outside-nuxt-front"
 DOCKERFILE_PATH="/root/web/canrud-outside-nuxt-front/canrud-nuxt-front"
 IMAGE_NAME="canrud-outside-front"
@@ -20,7 +20,16 @@ export default defineNuxtConfig({
   //      baseURL:  'http://47.89.254.121:8002/shop' || 'http://39.108.227.113:8002' // Exposed to the frontend as well.
   //   }
   // },
-  modules: ["vuetify-nuxt-module", "@pinia/nuxt", "@nuxtjs/i18n"],
+  modules: [
+    "vuetify-nuxt-module",
+    "@pinia/nuxt",
+    "@nuxtjs/i18n",
+    "@stefanobartoletti/nuxt-social-share",
+  ],
+  // optional configuration, should be added manually
+  socialShare: {
+    // module options
+  },
   vuetify: {
     moduleOptions: {
       /* module specific options */
@@ -8,6 +8,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@pinia/nuxt": "^0.5.1",
+        "@stefanobartoletti/nuxt-social-share": "^1.2.0",
         "lodash": "^4.17.21",
         "nuxt": "^3.11.2",
         "vue": "^3.4.27",
@@ -2440,6 +2441,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@stefanobartoletti/nuxt-social-share": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/@stefanobartoletti/nuxt-social-share/-/nuxt-social-share-1.2.0.tgz",
+      "integrity": "sha512-iehssGh971g49CFU3A9leUpAgrLMb9gPFIO7OORyh6ghclc6HNr7QaGnOXihAM0VTJRIqiL3f3AEMiAvwT79Kg==",
+      "dependencies": {
+        "@nuxt/kit": "^3.13.2",
+        "defu": "^6.1.4"
+      }
+    },
     "node_modules/@tailwindcss/aspect-ratio": {
       "version": "0.4.2",
       "resolved": "https://registry.npmmirror.com/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz",
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@pinia/nuxt": "^0.5.1",
+    "@stefanobartoletti/nuxt-social-share": "^1.2.0",
     "lodash": "^4.17.21",
     "nuxt": "^3.11.2",
     "vue": "^3.4.27",
@@ -25,4 +26,4 @@
     "sass": "^1.77.1",
     "tailwindcss": "^3.4.3"
   }
-}
 \ No newline at end of file
+}
 <template>
   <v-rows class="tw-w-full">
-    <v-carousel hide-delimiter-background show-arrows="hover" height="auto" v-if="!isMobile()">
-      <v-carousel-item v-for="banner in banners" :src="banner" cover alt="canrud" :key="banner">
+    <v-carousel
+      hide-delimiter-background
+      show-arrows="hover"
+      height="auto"
+      v-if="!isMobile()"
+    >
+      <v-carousel-item
+        v-for="banner in banners"
+        :src="banner"
+        cover
+        alt="canrud"
+        :key="banner"
+      >
       </v-carousel-item>
     </v-carousel>
-    <v-carousel hide-delimiter-background show-arrows="hover" height="auto" v-if="isMobile()">
-      <v-carousel-item v-for="banner in mobileBanners" :src="banner" cover alt="canrud" :key="banner">
+    <v-carousel
+      hide-delimiter-background
+      show-arrows="hover"
+      height="auto"
+      v-if="isMobile()"
+    >
+      <v-carousel-item
+        v-for="banner in mobileBanners"
+        :src="banner"
+        cover
+        alt="canrud"
+        :key="banner"
+      >
       </v-carousel-item>
     </v-carousel>
   </v-rows>
+  <v-tabs
+    class="tabs"
+    v-model="tabRecom"
+    color="white"
+    bg-color="#eeeeee"
+    style="margin-top: 40px"
+    slider-color="blue-lighten-1"
+    selected-class="active"
+    v-if="recommendImages[0] !== null && !isMobile()"
+  >
+    <v-tab :value="1">Best Sellers</v-tab>
+    <!-- <v-tab :value="3">商品百科</v-tab> -->
+  </v-tabs>
+  <div id="image-container" v-if="recommendImages[0] !== null && !isMobile()">
+    <div class="recommend-left-box">
+      <v-img
+        src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/76c987e13a334be481a346c19c2284f3qy4tjnxps7.png"
+        alt="往左移"
+        class="recommend-img-left"
+        @click="toggleRowLeft"
+      />
+    </div>
+    <div class="image-row" id="row1">
+      <!-- <img
+          v-for="(imageObj, index) in recommendImages.slice(0, 5)"
+          :key="'row1-' + index"
+          :src="imageObj[0]?.url"
+          :alt="'Image ' + (index + 1)"
+          style="margin: 0 5px; width: 200px; height: 200px"
+        /> -->
+      <div
+        v-for="(imageObj, index) in recommendImages"
+        :key="'row1-' + index"
+        class="imageTotal"
+      >
+        <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
+          <img
+            :src="imageObj[0]?.url"
+            :alt="'Image ' + (index + 1)"
+            class="item-imgHot"
+          />
+          <span class="image-name">
+            {{ imageObj[0]?.name }}
+          </span>
+        </a>
+        <div v-else style="width: 200px; height: 200px"></div>
+      </div>
+    </div>
+    <div class="recommend-right-box">
+      <v-img
+        src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/b5daa0a8f2f140f5b406e984c730a453iznzlekysg.png"
+        alt="往右移"
+        class="recommend-img-right"
+        @click="toggleRowRight"
+      />
+    </div>
+  </div>
+  <div style="padding-left: 16px; padding-right: 16px">
+    <v-tabs
+      class="tabs2"
+      ref="tabs2"
+      v-model="tabRecom"
+      style="margin-top: 25px; margin-bottom: 20px; width: 100%"
+      color="white"
+      bg-color="#eeeeee"
+      slider-color="blue-lighten-1"
+      selected-class="active"
+      v-if="isMobile()"
+    >
+      <v-tab :value="1">Best Sellers</v-tab>
+      <!-- <v-tab :value="3">商品百科</v-tab> -->
+    </v-tabs>
+    <div class="tw-text-center" v-if="hotLoading && isMobile()">
+      <v-progress-circular
+        color="blue-lighten-2"
+        indeterminate
+        size="64"
+        class="tw-m-auto"
+      ></v-progress-circular>
+    </div>
+    <v-item-group multiple v-if="isMobile()">
+      <v-row v-if="!hotLoading">
+        <v-col
+          v-for="(item, i) in recommendImages"
+          :key="i"
+          cols="6"
+          lg="3"
+          md="4"
+          sm="6"
+        >
+          <div v-if="item !== null">
+            <v-card :elevation="4" class="mx-auto" :href="item[0].productUrl">
+              <v-img
+                :src="item[0].url"
+                :alt="item[0].name"
+                eager
+                class="d-block"
+              />
+              <v-card-text class="tw-text-left font-weight-medium title">
+                <h4>{{ item[0].name }}</h4>
+              </v-card-text>
+            </v-card>
+          </div>
+        </v-col>
+      </v-row>
+    </v-item-group>
+    <v-row v-if="isMobile()">
+      <v-col>
+        <v-pagination
+          :size="isMobile() ? 'small' : 'default'"
+          v-if="hotTotal"
+          v-model="currentIndex"
+          @update:modelValue="toggleRowMobile"
+          :length="hotLength"
+          rounded="0"
+          class="tw-float-right tw-mt-[32px]"
+          total-visible="5"
+        ></v-pagination></v-col
+    ></v-row>
+  </div>
   <!-- 能源材料 -->
   <div class="tw-py-8 py-sm-16">
     <v-container>
-      <MainTitleListOdd title="Material Reagents" :list="materials"
-        desc="Leading global provider of energy storage research materials and providing other professional/universal experimental materials. " />
+      <MainTitleListOdd
+        title="Material Reagents"
+        :list="materials"
+        desc="Leading global provider of energy storage research materials and providing other professional/universal experimental materials. "
+      />
     </v-container>
   </div>
   <!-- 设备 -->
   <div class="bg-grey-lighten-5 tw-py-8 py-sm-16">
     <v-container>
-      <MainTitleList title="Lab Device" listType="equipment"
+      <MainTitleList
+        title="Lab Device"
+        listType="equipment"
         :list="lab.list.map((item) => ({ ...item, href: '/products' }))"
         desc="Self-built High-precision Machining Center with Powerful Design and Manufacturing Capabilities. "
-        href="/equipment" />
+        href="/equipment"
+      />
     </v-container>
   </div>
   <!-- Customized Battery -->
   <div class="tw-py-8 py-sm-16">
     <v-container>
-      <MainTitleList :title="('Customized Battery')" :list="batteries" href="/customize"
-        desc="200mAh~10Ah, Winding/Stacking, Unfilled/Filled Electrolyte Cells, Three-Electrode, and More. " />
+      <MainTitleList
+        :title="'Customized Battery'"
+        :list="batteries"
+        href="/customize"
+        desc="200mAh~10Ah, Winding/Stacking, Unfilled/Filled Electrolyte Cells, Three-Electrode, and More. "
+      />
     </v-container>
   </div>
   <!-- Testing -->
   <div class="bg-grey-lighten-5 tw-py-8 py-sm-16">
     <v-container>
-      <MainTitleList title="Testing" :list="tests" href="/test"
-        desc="Self built testing center and signed strategic cooperation with ATL, Tsinghua and other units. " />
+      <MainTitleList
+        title="Testing"
+        :list="tests"
+        href="/test"
+        desc="Self built testing center and signed strategic cooperation with ATL, Tsinghua and other units. "
+      />
     </v-container>
   </div>
   <!-- Pack -->
   <div class="pt-8 pb-8 pt pt-sm-16 pb-sm-32">
     <v-container>
-      <MainTitleList title="Pack" href="/pack" :list="packs"
-        desc="Focusing on energy materials/new energy storage systems/modules and other fields, mastering advanced technologies to provide high-quality services. " />
+      <MainTitleList
+        title="Pack"
+        href="/pack"
+        :list="packs"
+        desc="Focusing on energy materials/new energy storage systems/modules and other fields, mastering advanced technologies to provide high-quality services. "
+      />
     </v-container>
   </div>
+  <div style="padding-left: 16px; padding-right: 16px; padding-bottom: 30px">
+    <v-tabs
+      class="tabs2"
+      ref="tabs2"
+      v-model="tabRecom"
+      style="margin-top: 25px; margin-bottom: 20px; width: 100%"
+      color="white"
+      bg-color="#eeeeee"
+      slider-color="blue-lighten-1"
+      selected-class="active"
+      v-if="isMobile()"
+    >
+      <v-tab :value="1">Best Sellers</v-tab>
+      <!-- <v-tab :value="3">商品百科</v-tab> -->
+    </v-tabs>
+    <div class="tw-text-center" v-if="hotLoading && isMobile()">
+      <v-progress-circular
+        color="blue-lighten-2"
+        indeterminate
+        size="64"
+        class="tw-m-auto"
+      ></v-progress-circular>
+    </div>
+    <v-item-group multiple v-if="isMobile()">
+      <v-row v-if="!hotLoading">
+        <v-col
+          v-for="(item, i) in recommendImages"
+          :key="i"
+          cols="6"
+          lg="3"
+          md="4"
+          sm="6"
+        >
+          <div v-if="item !== null">
+            <v-card :elevation="4" class="mx-auto" :href="item[0].productUrl">
+              <v-img
+                :src="item[0].url"
+                :alt="item[0].name"
+                eager
+                class="d-block"
+              />
+              <v-card-text class="tw-text-left font-weight-medium title">
+                <h4>{{ item[0].name }}</h4>
+              </v-card-text>
+            </v-card>
+          </div>
+        </v-col>
+      </v-row>
+    </v-item-group>
+    <v-row v-if="isMobile()">
+      <v-col>
+        <v-pagination
+          :size="isMobile() ? 'small' : 'default'"
+          v-if="hotTotal"
+          v-model="currentIndex"
+          @update:modelValue="toggleRowMobile"
+          :length="hotLength"
+          rounded="0"
+          class="tw-float-right tw-mt-[32px]"
+          total-visible="5"
+        ></v-pagination></v-col
+    ></v-row>
+  </div>
 </template>
 <script setup lang="ts">
-import MainTitleList from '../components/MainTitleList.vue'
-import MainTitleListOdd from '../components/MainTitleListOdd.vue'
-import { useCategoryStore } from '../stores/category'
-import { computed } from 'vue'
-import { isMobile } from '../utils'
+import MainTitleList from "../components/MainTitleList.vue";
+import MainTitleListOdd from "../components/MainTitleListOdd.vue";
+import { useCategoryStore } from "../stores/category";
+import { computed, onMounted, reactive, ref } from "vue";
+import { isMobile } from "../utils";
+
+const maxPage = ref(1);
+const tabRecom = ref();
+const recommendList = ref();
+const recommendImages = ref();
+const currentIndex = ref(1);
+const hotLoading = ref(false);
+const hotTotal = ref(10);
+const isOrNotMobile = isMobile();
+const loadHotProducts = async () => {
+  const pageSize = ref(5);
+  if (isOrNotMobile) {
+    pageSize.value = 4;
+  }
+  hotLoading.value = true;
+  let { data: hotProducts } = await useAsyncData(
+    "hotProducts",
+    () =>
+      $fetch("/shop/product/hotProducts", {
+        method: "GET",
+        params: {
+          pageNo: currentIndex.value,
+          pageSize: pageSize.value,
+        },
+      }),
+    {
+      server: true, // 仅在服务器端获取数据
+    }
+  );
+  hotTotal.value = hotProducts.value.data.total;
+  recommendList.value = hotProducts.value.data.records;
+  maxPage.value = hotProducts.value.data.pages;
+  // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
+  recommendImages.value = Array.from({ length: pageSize.value }).map(
+    (_, index) => {
+      const item = recommendList.value[index];
+      if (!item) {
+        return null;
+      }
+      // 检查 productimageliststore 是否为字符串格式，如果是，则尝试解析
+      if (typeof item.productimageliststore === "string") {
+        try {
+          item.productimageliststore = JSON.parse(item.productimageliststore);
+        } catch (error) {
+          item.productimageliststore = []; // 解析失败时，设置为空数组
+        }
+      }
+      const ree = (item.productimageliststore = item?.productimageliststore.map(
+        (productItem: ProductImage) => ({
+          ...productItem,
+          // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
+          url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
+          name: item.name,
+          productUrl: `https://www.canrud.com/products/detail/${item.id}`,
+        })
+      ));
+      return ree;
+    }
+  );
+  hotLoading.value = false;
+};
+
+const toggleRowLeft = () => {
+  if (currentIndex.value !== 1) {
+    currentIndex.value--;
+  } else if (currentIndex.value == 1) {
+    currentIndex.value = maxPage.value;
+  }
+};
+const toggleRowRight = () => {
+  if (currentIndex.value < maxPage.value) {
+    currentIndex.value++;
+  } else if (currentIndex.value == maxPage.value) {
+    currentIndex.value = 1;
+  }
+};
+const toggleRowMobile = (value: number) => {
+  currentIndex.value = value;
+};
+
+watch(currentIndex, (newIndex) => {
+  loadHotProducts(); // Call loadHotProducts when currentIndex changes
+});
+// Initial load of hot products
+await loadHotProducts(); // Load hot products the first time
+
 onMounted(() => {
-  console.log('%c [ onMounted ]-10', 'font-size:13px; background:pink; color:#bf2c9f;', 111)
-})
+  console.log(
+    "%c [ onMounted ]-10",
+    "font-size:13px; background:pink; color:#bf2c9f;",
+    111
+  );
+});
 useHead({
-  title: 'canrud',
+  title: "canrud",
   meta: [
     {
-      name: 'title',
-      content: "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at contact@canrd.com or call +86 19867737979 to explore our innovative offerings. Together, let's shape a greener, brighter world!"
-    }, {
-      name: 'keywords',
+      name: "title",
+      content:
+        "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at contact@canrd.com or call +86 19867737979 to explore our innovative offerings. Together, let's shape a greener, brighter world!",
+    },
+    {
+      name: "keywords",
       content:
-        '科路得,canrd,canrud,Energy Storage Research,Lithium Batteries Research,Material Reagents,Lab Device,Customized Battery,Testing,Pack',
-    }, {
+        "科路得,canrd,canrud,Energy Storage Research,Lithium Batteries Research,Material Reagents,Lab Device,Customized Battery,Testing,Pack",
+    },
+    {
       name: "description",
       content:
-        "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at contact@canrd.com or call +86 19867737979 to explore our innovative offerings. Together, let's shape a greener, brighter world!"
-    }],
-  link: [
-    { rel: 'preload', href: '/banner/banner1.jpg', as: 'image' }
-  ]
-})
+        "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at contact@canrd.com or call +86 19867737979 to explore our innovative offerings. Together, let's shape a greener, brighter world!",
+    },
+  ],
+  link: [{ rel: "preload", href: "/banner/banner1.jpg", as: "image" }],
+});
 // useAsyncData(async ({ app }) => {
 //   console.log('%c [ app ]-70', 'font-size:13px; background:pink; color:#bf2c9f;', app)
@@ -85,76 +400,308 @@ useHead({
 //   app.head.meta = [
 //     {
 //       name: 'description',
-//       content: "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at    
+//       content: "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at
 //     }]
 // })
-console.log(11)
+console.log(11);
-const store = useCategoryStore()
+const store = useCategoryStore();
 const lab = computed(
   () =>
     store?.list?.[3] || {
-      categoryDisplayName: '',
-      list: []
+      categoryDisplayName: "",
+      list: [],
     }
-)
+);
 const banners = [
-  '/banner/banner1.jpg',
-  '/banner/banner2.jpg',
-  '/banner/banner3.jpg',
-  '/banner/banner5.jpg'
-]
+  "/banner/banner1.jpg",
+  "/banner/banner2.jpg",
+  "/banner/banner3.jpg",
+  "/banner/banner5.jpg",
+];
 const mobileBanners = [
-  '/mobile/banner-index1.png',
-  '/mobile/banner-index2.png',
-  '/mobile/banner-index3.png'
-]
+  "/mobile/banner-index1.png",
+  "/mobile/banner-index2.png",
+  "/mobile/banner-index3.png",
+];
 const materials = [
-  { name: 'Energy materials', imageUrl: '/home/1.jpg', href: '/products' },
+  { name: "Energy materials", imageUrl: "/home/1.jpg", href: "/products" },
   {
-    name: 'Laboratory consumables',
-    imageUrl: '/home/2-Universal-consumables.png',
-    href: '/products'
+    name: "Laboratory consumables",
+    imageUrl: "/home/2-Universal-consumables.png",
+    href: "/products",
   },
   {
-    name: 'Low-dimensional materials',
-    imageUrl: '/home/3-Low-dimensional-materials.png',
-    href: '/products'
-  }
-]
+    name: "Low-dimensional materials",
+    imageUrl: "/home/3-Low-dimensional-materials.png",
+    href: "/products",
+  },
+];
 const tests = [
   {
-    name: 'Electrochemical performance',
-    imageUrl: '/home/8_Electrochemical_performance.svg',
-    href: '/test'
+    name: "Electrochemical performance",
+    imageUrl: "/home/8_Electrochemical_performance.svg",
+    href: "/test",
+  },
+  {
+    name: "Reliability testing",
+    imageUrl: "/home/9 Reliability testing.svg",
+    href: "/test",
+  },
+  {
+    name: "Material testing",
+    imageUrl: "/home/10 Material testing.svg",
+    href: "/test",
   },
-  { name: 'Reliability testing', imageUrl: '/home/9 Reliability testing.svg', href: '/test' },
-  { name: 'Material testing', imageUrl: '/home/10 Material testing.svg', href: '/test' },
-  { name: 'Calibration', imageUrl: '/home/11 Calibration.svg', href: '/test' }
-]
+  { name: "Calibration", imageUrl: "/home/11 Calibration.svg", href: "/test" },
+];
 const batteries = [
-  { name: 'Material evaluation', imageUrl: '/home/4-Material-evaluation.png', href: '/customize' },
-  { name: 'R&D foundry', imageUrl: '/home/5-R&D-foundry.png', href: '/customize' },
-  { name: 'Chemical system', imageUrl: '/home/6-Chemical-system.png', href: '/customize' },
   {
-    name: 'Semi product customization',
-    imageUrl: '/home/7-Semi-product-customization.png',
-    href: '/customize'
-  }
-]
+    name: "Material evaluation",
+    imageUrl: "/home/4-Material-evaluation.png",
+    href: "/customize",
+  },
+  {
+    name: "R&D foundry",
+    imageUrl: "/home/5-R&D-foundry.png",
+    href: "/customize",
+  },
+  {
+    name: "Chemical system",
+    imageUrl: "/home/6-Chemical-system.png",
+    href: "/customize",
+  },
+  {
+    name: "Semi product customization",
+    imageUrl: "/home/7-Semi-product-customization.png",
+    href: "/customize",
+  },
+];
 const packs = [
-  { name: 'Power bank', imageUrl: '/home/12-power-bank.png', href: '/pack' },
-  { name: 'Energy storage', imageUrl: '/home/13-Energy-storage.png', href: '/pack' },
-  { name: 'power tool', imageUrl: '/home/3-powertool.png', href: '/pack' },
+  { name: "Power bank", imageUrl: "/home/12-power-bank.png", href: "/pack" },
   {
-    name: 'portable energy storage',
-    imageUrl: '/home/4-portableenergystorage.png',
-    href: '/pack'
-  }
-]
+    name: "Energy storage",
+    imageUrl: "/home/13-Energy-storage.png",
+    href: "/pack",
+  },
+  { name: "power tool", imageUrl: "/home/3-powertool.png", href: "/pack" },
+  {
+    name: "portable energy storage",
+    imageUrl: "/home/4-portableenergystorage.png",
+    href: "/pack",
+  },
+];
+const hotLength = computed(() =>
+  hotTotal.value ? Math.ceil(hotTotal.value / 4) : 0
+);
 </script>
+<style scoped>
+@media screen and (min-width: 1537px) {
+  .tabs {
+    border-bottom: 2px solid #1f88e5;
+    margin: 10px auto 100px;
+    width: 85%;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .tabs {
+    border-bottom: 2px solid #1f88e5;
+    margin: 10px auto 20px;
+    width: 80%;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .tabs {
+    border-bottom: 2px solid #1f88e5;
+    margin: 10px auto 0px;
+    width: 85%;
+  }
+}
+
+.active {
+  background-color: #1086e8;
+}
+
+/* #image-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 320px;
+  margin: 10px auto 50px;
+  width: 80%;
+} */
+
+@media screen and (min-width: 1537px) {
+  #image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 320px;
+    margin: 10px auto 50px;
+    width: 80%;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  #image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 240px;
+    margin: 10px auto 0px;
+    width: 80%;
+  }
+}
+@media screen and (max-width: 1280px) {
+  #image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 260px;
+    margin: 10px auto 0px;
+    width: 90%;
+  }
+}
+.image-row {
+  display: flex;
+  height: 305px;
+}
+@media screen and (min-width: 1537px) {
+  .image-row {
+    display: flex;
+    height: 305px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .image-row {
+    display: flex;
+    height: 245px;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .image-row {
+    display: flex;
+    height: 220px;
+  }
+}
+@media screen and (min-width: 1537px) {
+  .imageTotal {
+    display: inline-block;
+    margin: 0 5px;
+    text-align: center;
+    width: 290px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .imageTotal {
+    display: inline-block;
+    margin: 0 5px;
+    text-align: center;
+    width: 210px;
+  }
+}
+@media screen and (min-width: 1537px) {
+  .image-row img {
+    width: 240px;
+    height: 240px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .image-row img {
+    width: 140px;
+    height: 140px;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .image-row img {
+    width: 160px;
+    height: 160px;
+    margin-left: 10px;
+  }
+}
+@media screen and (min-width: 1537px) {
+  .image-name {
+    display: -webkit-box; /* Enables multi-line text handling */
+    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
+    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
+    overflow: hidden; /* Hides the overflowed text */
+    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
+    margin-top: 5px;
+    font-size: 16px;
+    width: 180px;
+    color: #555;
+    text-align: center; /* Centers the text horizontally */
+    margin-left: 50px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .image-name {
+    display: -webkit-box; /* Enables multi-line text handling */
+    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
+    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
+    overflow: hidden; /* Hides the overflowed text */
+    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
+    margin-top: 5px;
+    font-size: 16px;
+    width: 180px;
+    color: #555;
+    text-align: center; /* Centers the text horizontally */
+    margin-left: 10px;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .image-name {
+    display: -webkit-box; /* Enables multi-line text handling */
+    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
+    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
+    overflow: hidden; /* Hides the overflowed text */
+    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
+    margin-top: 5px;
+    font-size: 16px;
+    width: 180px;
+    color: #555;
+    text-align: center; /* Centers the text horizontally */
+    margin-left: 5px;
+  }
+}
+button .recommendButton {
+  margin: 0 0px;
+  cursor: pointer;
+}
+
+.recommend-left-box {
+}
+
+.recommend-img-left {
+  width: 26px;
+  height: 27px;
+  margin-right: 30px;
+}
+
+.recommend-img-left:hover {
+  cursor: pointer;
+}
+.recommend-right-box {
+}
+
+.recommend-img-right {
+  width: 26px;
+  height: 27px;
+  margin-left: 30px;
+}
+
+.recommend-img-right:hover {
+  cursor: pointer;
+}
+.image-grid {
+  padding: 16px;
+}
+
+.v-card {
+  transition: all 0.3s ease-in-out;
+}
+</style>
 <template>
-  <MobileProductDetail v-if="isMobile()" :info="info" />
+  <MobileProductDetail v-if="isMobile()" :info="info" :res="resData" />
   <ProductDetail v-else :info="info" />
 </template>
@@ -10,8 +10,9 @@ import MobileProductDetail from &quot;~/components/MobileProductDetail.vue&quot;;
 import type { Product, ProductImage } from "~/type";
 import { useRoute, useRouter } from "vue-router";
+const productStore = useProductListStore();
 const route = useRoute();
-
+const router = useRouter();
 const info = ref<Partial<Product>>({
   productimageliststore: [],
   productAttributeList: [],
@@ -44,32 +45,28 @@ watchEffect(() =&gt; {
       },
       {
         name: "keywords",
-        content:
-          info.value.name ||
-          "科路得,Equipment,High-precision,Machining center,Design,Manufacturing capabilities,Equipment supply,Production line planning,Construction services,Battery assembly lines,Pouch cell testing lines",
+        content: info.value.name || info.value.metakeywords,
       },
       {
         name: "description",
-        content:
-          info.value.name ||
-          "科路得,助您科研之路势在必得。Equipment Business: With our self-built high-precision machining center, we possess robust design and manufacturing capabilities. We offer comprehensive equipment supply, production line planning, and construction services, including battery assembly lines, pouch cell testing lines, and more. Our aim is to provide complete equipment solutions that cater to the diverse needs of our clients. Expect top-quality equipment and professional services that will help you stand out in a fiercely competitive market!",
+        content: info.value.metadescription || info.value.name,
       },
     ],
   });
 });
 const newData: Product = resData.value.data;
-
 newData.productimageliststore =
   typeof newData.productimageliststore === "string"
     ? JSON.parse(newData.productimageliststore) || []
     : (newData.productimageliststore as ProductImage[]);
-newData.productimageliststore = newData?.productimageliststore.map(
+newData.productimageliststore = newData?.productimageliststore?.map(
   (item: ProductImage) => ({
     ...item,
     // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`
     url: `/api/show/image?fileKey=${item.fileKey}&psize=p512`,
   })
 );
+
 info.value = { ...newData };
 </script>
 <template>
-  <div class="tw-m-auto tw-pb-[64px]">
+  <div class="tw-m-auto tw-pb-[64px]" style="padding-bottom: 0px">
     <CategoryList v-if="categoryStore.categoryVisible && !isMobile()" />
     <MobileCategoryList v-if="categoryStore.categoryVisible && isMobile()" />
+    <v-tabs
+      class="tabs"
+      v-model="tabRecom"
+      style="margin-top: 25px"
+      color="white"
+      bg-color="#eeeeee"
+      slider-color="blue-lighten-1"
+      selected-class="active"
+      v-if="recommendImages[0] !== null && !isMobile()"
+    >
+      <v-tab :value="1">Best Sellers</v-tab>
+      <!-- <v-tab :value="3">商品百科</v-tab> -->
+    </v-tabs>
+    <div id="image-container" v-if="recommendImages[0] !== null && !isMobile()">
+      <div class="recommend-left-box">
+        <v-img
+          src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/76c987e13a334be481a346c19c2284f3qy4tjnxps7.png"
+          alt="往左移"
+          class="recommend-img-left"
+          @click="toggleRowLeft"
+        />
+      </div>
+      <div class="image-row" id="row1">
+        <!-- <img
+          v-for="(imageObj, index) in recommendImages.slice(0, 5)"
+          :key="'row1-' + index"
+          :src="imageObj[0]?.url"
+          :alt="'Image ' + (index + 1)"
+          style="margin: 0 5px; width: 200px; height: 200px"
+        /> -->
+        <div
+          v-for="(imageObj, index) in recommendImages"
+          :key="'row1-' + index"
+          class="imageTotal"
+        >
+          <a v-if="imageObj" :href="imageObj[0]?.productUrl" target="_blank">
+            <img
+              :src="imageObj[0]?.url"
+              :alt="'Image ' + (index + 1)"
+              class="item-imgHot"
+            />
+            <span class="image-name">
+              {{ imageObj[0]?.name }}
+            </span>
+          </a>
+          <div v-else style="width: 200px; height: 200px"></div>
+        </div>
+      </div>
+      <div class="recommend-right-box">
+        <v-img
+          src="https://m-canrd.oss-cn-shenzhen.aliyuncs.com/crmebimage/public/maintain/2024/09/14/b5daa0a8f2f140f5b406e984c730a453iznzlekysg.png"
+          alt="往右移"
+          class="recommend-img-right"
+          @click="toggleRowRight"
+        />
+      </div>
+    </div>
     <v-container class="">
-      <div class="tw-text-center" v-if="loading">
+      <div class="tw-text-center tw-mt-[32px]" v-if="loading">
         <v-progress-circular
           color="blue-lighten-2"
           indeterminate
@@ -60,11 +117,79 @@
       <v-row>
         <v-col>
           <v-pagination
+              :size="isMobile() ? 'small' : 'default'"
+              v-if="productStore.total"
+              v-model="productStore.pageNo"
+              @update:modelValue="productStore.updatePageNo"
+              :length="length"
+              rounded="0"
+              class="tw-float-right tw-mt-[32px]"
+              total-visible="5"
+          ></v-pagination></v-col
+        ></v-row>
+      <v-tabs
+        class="tabs2"
+        ref="tabs2"
+        v-model="tabRecom"
+        style="margin-top: 25px; margin-bottom: 20px"
+        color="white"
+        bg-color="#eeeeee"
+        slider-color="blue-lighten-1"
+        selected-class="active"
+        v-if="isMobile()"
+      >
+        <v-tab :value="1">Best Sellers</v-tab>
+        <!-- <v-tab :value="3">商品百科</v-tab> -->
+      </v-tabs>
+      <div class="tw-text-center" v-if="hotLoading && isMobile()">
+        <v-progress-circular
+          color="blue-lighten-2"
+          indeterminate
+          size="64"
+          class="tw-m-auto"
+        ></v-progress-circular>
+      </div>
+      <v-item-group multiple v-if="isMobile()">
+        <v-row v-if="!hotLoading">
+          <v-col
+            v-for="(item, i) in recommendImages"
+            :key="i"
+            cols="6"
+            lg="3"
+            md="4"
+            sm="6"
+          >
+            <div v-if="item !== null">
+              <v-card :elevation="4" class="mx-auto" :href="item[0].productUrl">
+                <!-- 设置 eager 属性，确保图片直接加载 -->
+                <v-img
+                  :src="item[0].url"
+                  :alt="item[0].name"
+                  eager
+                  class="d-block"
+                />
+                <v-card-text class="tw-text-left font-weight-medium title">
+                  <h4>{{ item[0].name }}</h4>
+                </v-card-text>
+              </v-card>
+            </div>
+          </v-col>
+        </v-row>
+        <!-- <div
+          v-if="!hotTotal"
+          class="text-medium-emphasis text-body-1 tw-text-center tw-m-[64px]"
+        >
+          no data
+        </div> -->
+      </v-item-group>
+      <v-row v-if="isMobile()">
+        <v-col>
+          <v-pagination
             :size="isMobile() ? 'small' : 'default'"
-            v-if="productStore.total"
-            v-model="productStore.pageNo"
-            @update:modelValue="productStore.updatePageNo"
-            :length="length"
+            v-if="hotTotal"
+            v-model="currentIndex"
+            @update:modelValue="toggleRowMobile"
+            :length="hotLength"
             rounded="0"
             class="tw-float-right tw-mt-[32px]"
             total-visible="5"
@@ -75,6 +200,7 @@
 </template>
 <script setup lang="ts">
+import type { ProductImage } from "~/type";
 import { isMobile, isEqual } from "~/utils";
 import { useProductListStore } from "~/stores/product_list";
 import { useCategoryStore } from "~/stores/category";
@@ -85,10 +211,110 @@ import { watchEffect, computed, ref } from &quot;vue&quot;;
 const productStore = useProductListStore();
 const categoryStore = useCategoryStore();
 const loading = ref(false);
+const hotLoading = ref(false);
 const route = useRoute(); // 获取路由信息
+const router = useRouter(); // 获取路由信息
+const title = ref("");
+const keywordTitle = ref("");
+const maxPage = ref(1);
+const tabRecom = ref();
+const recommendList = ref();
+const recommendImages = ref();
+const currentIndex = ref(1);
+const hotTotal = ref(10);
+const isOrNotMobile = isMobile();
+
+const loadHotProducts = async () => {
+  const pageSize = ref(5);
+  if (isOrNotMobile) {
+    pageSize.value = 4;
+  }
+  hotLoading.value = true;
+  let { data: hotProducts } = await useAsyncData(
+    "hotProducts",
+    () =>
+      $fetch("/shop/product/hotProducts", {
+        method: "GET",
+        params: {
+          pageNo: currentIndex.value,
+          pageSize: pageSize.value,
+        },
+      }),
+    {
+      server: true, // 仅在服务器端获取数据
+    }
+  );
+  hotTotal.value = hotProducts.value.data.total;
+  recommendList.value = hotProducts.value.data.records;
+  maxPage.value = hotProducts.value.data.pages;
+  // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
+  recommendImages.value = Array.from({ length: pageSize.value }).map(
+    (_, index) => {
+      const item = recommendList.value[index];
+      if (!item) {
+        return null;
+      }
+      // 检查 productimageliststore 是否为字符串格式，如果是，则尝试解析
+      if (typeof item.productimageliststore === "string") {
+        try {
+          item.productimageliststore = JSON.parse(item.productimageliststore);
+        } catch (error) {
+          item.productimageliststore = []; // 解析失败时，设置为空数组
+        }
+      }
+      const ree = (item.productimageliststore = item?.productimageliststore.map(
+        (productItem: ProductImage) => ({
+          ...productItem,
+          // url: `http://112.74.45.244:8100/api/show/image?fileKey=${item.fileKey}`,
+          url: `https://www.canrud.com/api/show/image?fileKey=${productItem.fileKey}&psize=p256`,
+          name: item.name,
+          productUrl: `https://www.canrud.com/products/detail/${item.id}`,
+        })
+      ));
+      return ree;
+    }
+  );
+  hotLoading.value = false;
+};
+
+const toggleRowLeft = () => {
+  if (currentIndex.value !== 1) {
+    currentIndex.value--;
+  } else if (currentIndex.value == 1) {
+    currentIndex.value = maxPage.value;
+  }
+};
+const toggleRowRight = () => {
+  if (currentIndex.value < maxPage.value) {
+    currentIndex.value++;
+  } else if (currentIndex.value == maxPage.value) {
+    currentIndex.value = 1;
+  }
+};
+const toggleRowMobile = (value: number) => {
+  currentIndex.value = value;
+};
+
+watch(currentIndex, (newIndex) => {
+  loadHotProducts(); // Call loadHotProducts when currentIndex changes
+});
+// Initial load of hot products
+await loadHotProducts(); // Load hot products the first time
+
+watchEffect(() => {
+  // 遍历数组
+  if (router.currentRoute.value.query.categories) {
+    title.value = `${router.currentRoute.value.query.categories}`;
+  } else if (router.currentRoute.value.query.function) {
+    title.value += `,${router.currentRoute.value.query.function}`;
+  }
+  if (router.currentRoute.value.query.keyword) {
+    keywordTitle.value = `${router.currentRoute.value.query.keyword}`;
+  }
+});
 useHead({
-  title: "canrud",
+  title: title.value || keywordTitle.value,
   meta: [
     {
       name: "title",
@@ -107,9 +333,8 @@ useHead({
     },
   ],
 });
-
+const firstIndex = ref(0);
 const loadProducts = async () => {
-  console.log(productStore, "5656productStore");
   let params: any = {
     pageNo: productStore.pageNo,
     pageSize: 20,
@@ -123,35 +348,146 @@ const loadProducts = async () =&gt; {
     loading.value = false;
     return;
   }
+  const categories = ref();
+  const mainCategory = ref();
+  if (router.currentRoute.value.query.categories) {
+    categories.value = router.currentRoute.value.query.categories.split(",");
+    mainCategory.value = categories.value[0].trim(); // 取第一个值
+  }
   params.productCategoryId = categoryStore.selectedSubCategory;
   // productCategoryId: '78b86c6e917841cf9a292234f2805e24',
-
   if (categoryStore.selectedFuncCategory) {
     params.productFunctionId = categoryStore.selectedFuncCategory;
+    if (firstIndex.value == 1) {
+      params.productFunctionId = selectedFuncCategoryBak.value;
+      firstIndex.value += 1;
+      if (
+        params.productFunctionId == "" &&
+        selectedFuncCategoryBak.value == ""
+      ) {
+        categoryStore.selectedFuncCategory = selectedFuncCategoryBak.value;
+        params.productFunctionId = categoryStore.selectedFuncCategory;
+        // categoryStore.selectedFuncCategory = selectedFuncCategoryBak.value;
+      }
+      console.log(
+        params.productFunctionId,
+        selectedFuncCategoryBak.value,
+        categoryStore.selectedFuncCategory
+      );
+    }
+    // const savedSubCategory = localStorage.getItem("selectedFuncCategory2");
+    // console.log(savedSubCategory, "5656savedSubCategory");
+    // localStorage.setItem("selectedFuncCategory3", "2");
+  } else if (mainCategory.value == "Energy materials") {
+    params.productCategoryId = categoryStore.selectedSubCategory;
   }
+  console.log(
+    // params,
+    // productStore?.params,
+    // categoryStore.selectedSubCategory,
+    // categoryStore.selectedFuncCategory,
+    window.selectedSubCategory,
+    window.selectedFuncCategory
+  );
   if (
     categoryStore.selectedSubCategory &&
     !isEqual(productStore.params, params)
   ) {
+    // console.log(route, "5656route");
     productStore.updateParams(params);
+    const categories = ref("Laboratory consumables,Others");
+    const mainCategory = categories.value[0].trim(); // 取第一个值
+    // console.log(categoryStore.selectedSubCategory, "5656mobi");
     await productStore.getList(params);
   }
+  // if (
+  //   categoryStore.selectedFuncCategory &&
+  //   !isEqual(productStore.params, params)
+  // ) {
+  //   console.log(
+  //     categoryStore.selectedFuncCategory,
+  //     "5656categoryStore.selectedFuncCategoryss"
+  //   );
+  //   productStore.updateParams(params);
+  //   await productStore.getList(params);
+  // }
+  if (firstIndex.value === 0 && categoryStore.selectedFuncCategory) {
+    // console.log(route, "5656route");
+    productStore.updateParams(params);
+    // const categories = ref("Laboratory consumables,Others");
+    // const mainCategory = categories.value[0].trim(); // 取第一个值
+    // console.log(categoryStore.selectedFuncCategory, "5656mobi");
+    await productStore.getList(params);
+    firstIndex.value = 1;
+  }
   loading.value = false;
 };
-
+const isWindowAssigned = ref(false);
+const selectedSubCategoryBak = ref();
+const selectedFuncCategoryBak = ref();
 watchEffect(async () => {
   if (route.query.keyword !== undefined) {
     productStore.keyword = route.query.keyword;
   }
+  // console.log(categoryStore.selectedSubCategory, "5656index-categoryStore");
+  if (typeof window !== "undefined" && !isWindowAssigned.value) {
+    window.selectedSubCategory = categoryStore.selectedSubCategory;
+    window.selectedFuncCategory = categoryStore.selectedFuncCategory;
+    selectedSubCategoryBak.value = categoryStore.selectedSubCategory;
+    selectedFuncCategoryBak.value = categoryStore.selectedFuncCategory;
+    isWindowAssigned.value = true;
+  }
   loadProducts();
+  // console.log(categoryStore.selectedSubCategory, "5656index-categoryStore");
 });
+// onMounted(() => {
+//   // window.selectedSubCategory = categoryStore.selectedSubCategory;
+//   // window.selectedFuncCategory = categoryStore.selectedFuncCategory;
+//   if (route.query.function) {
+//     const functionName = route.query.function.trim();
+//     const funcCategoryList = computed(() => {
+//       if (categoryStore.selectedCategory) {
+//         const tmp = categoryStore.list.filter(
+//           (item) => item.categoryDisplayName === categoryStore.selectedCategory
+//         );
+//         return tmp?.[0]?.productFunctions || [];
+//       }
+//       return [];
+//     });
+//     const foundFuncCategory = funcCategoryList.value.find(
+//       (func) => func.name === functionName
+//     );
+
+//     if (foundFuncCategory) {
+//       const funcCategoryId = foundFuncCategory.id;
+//       if (typeof localStorage !== "undefined") {
+//         localStorage.setItem("selectedFuncCategory2", funcCategoryId);
+//         localStorage.setItem("selectedFuncCategory3", "1");
+//       }
+//       // 你可以在这里使用找到的 funcCategoryId
+//     }
+//     // // 6. 查找对应的功能分类 ID
+//     // const foundFuncCategory = funcCategories.find(
+//     //   (func) => func.name === functionName
+//     // );
+
+//     // if (foundFuncCategory) {
+//     //   const funcCategoryId = foundFuncCategory.id;
+//     //   // 使用找到的 funcCategoryId
+//     //   categoryStore.updateFuncCategory(funcCategoryId);
+//     // }
+//   }
+// });
 const length = computed(() =>
   productStore.total ? Math.ceil(productStore.total / productStore.pageSize) : 0
 );
+const hotLength = computed(() =>
+  hotTotal.value ? Math.ceil(hotTotal.value / 4) : 0
+);
 </script>
 <style scoped>
@@ -163,4 +499,200 @@ const length = computed(() =&gt;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
+
+@media screen and (min-width: 1537px) {
+  .tabs {
+    border-bottom: 2px solid #1f88e5;
+    margin: 10px auto 20px;
+    width: 93%;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .tabs {
+    border-bottom: 2px solid #1f88e5;
+    margin: 10px auto 40px;
+    width: 78%;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .tabs {
+    border-bottom: 2px solid #1f88e5;
+    margin: 10px auto 40px;
+    width: 92%;
+  }
+}
+/* .tabs {
+  border-bottom: 2px solid #1f88e5;
+} */
+
+.active {
+  background-color: #1086e8;
+}
+
+@media screen and (min-width: 1537px) {
+  #image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 320px;
+    margin: 10px auto 50px;
+    width: 80%;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  #image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 260px;
+    margin: 10px auto 0px;
+    width: 80%;
+    padding: 0;
+  }
+}
+@media screen and (max-width: 1280px) {
+  #image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 260px;
+    margin: 10px auto 0px;
+    width: 80%;
+    padding: 0;
+  }
+}
+.image-row {
+  display: flex;
+  height: 245px;
+}
+@media screen and (min-width: 1537px) {
+  .imageTotal {
+    display: inline-block;
+    margin: 0 5px;
+    text-align: center;
+    width: 300px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .imageTotal {
+    display: inline-block;
+    margin: 0 5px;
+    text-align: center;
+    width: 200px;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .imageTotal {
+    display: inline-block;
+    margin: 0 5px;
+    text-align: center;
+    width: 200px;
+  }
+}
+@media screen and (min-width: 1537px) {
+  .image-row img {
+    width: 240px;
+    height: 240px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .image-row img {
+    width: 140px;
+    height: 140px;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .image-row img {
+    width: 120px;
+    height: 120px;
+  }
+}
+@media screen and (min-width: 1537px) {
+  .image-name {
+    display: -webkit-box; /* Enables multi-line text handling */
+    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
+    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
+    overflow: hidden; /* Hides the overflowed text */
+    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
+    margin-top: 5px;
+    font-size: 16px;
+    width: 180px;
+    color: #555;
+    text-align: center; /* Centers the text horizontally */
+    margin-left: 50px;
+  }
+}
+@media screen and (max-width: 1536px) and (min-width: 1281px) {
+  .image-name {
+    display: -webkit-box; /* Enables multi-line text handling */
+    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
+    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
+    overflow: hidden; /* Hides the overflowed text */
+    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
+    margin-top: 5px;
+    font-size: 16px;
+    width: 180px;
+    color: #555;
+    text-align: center; /* Centers the text horizontally */
+    margin-left: 10px;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .image-name {
+    display: -webkit-box; /* Enables multi-line text handling */
+    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
+    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
+    overflow: hidden; /* Hides the overflowed text */
+    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
+    margin-top: 5px;
+    font-size: 16px;
+    width: 180px;
+    color: #555;
+    text-align: center; /* Centers the text horizontally */
+    margin-left: 10px;
+  }
+}
+
+button .recommendButton {
+  margin: 0 0px;
+  cursor: pointer;
+}
+
+.recommend-left-box {
+}
+
+@media screen and (max-width: 1280px) {
+  .recommend-img-left {
+    width: 26px;
+    height: 27px;
+    margin-bottom: 60px;
+  }
+}
+.recommend-img-left {
+  width: 26px;
+  height: 27px;
+  margin-right: 30px;
+  margin-bottom: 60px;
+}
+
+.recommend-img-left:hover {
+  cursor: pointer;
+}
+.recommend-right-box {
+}
+
+.recommend-img-right {
+  width: 26px;
+  height: 27px;
+  margin-left: 30px;
+  margin-bottom: 60px;
+}
+
+.recommend-img-right:hover {
+  cursor: pointer;
+}
+
+.v-card {
+  transition: all 0.3s ease-in-out;
+}
 </style>