fix: prod2-42/43

boyang
1 parent 3b581a76
Showing 5 changed files with 43 additions and 317 deletions
components/MobileProductDetail.vue
deploy/prod2.sh
pages/contact.vue
pages/index.vue
pages/products/index.vue
@@ -309,7 +309,7 @@
                       class="d-block"
                     />
                     <v-card-text class="tw-text-left font-weight-medium title">
-                      <h4>{{ item[0].name }}</h4>
+                      <h4 class="clamp-text">{{ item[0].name }}</h4>
                     </v-card-text>
                   </v-card>
                 </div>
@@ -370,7 +370,7 @@
                       class="d-block"
                     />
                     <v-card-text class="tw-text-left font-weight-medium title">
-                      <h4>{{ item[0].name }}</h4>
+                      <h4 class="clamp-text">{{ item[0].name }}</h4>
                     </v-card-text>
                   </v-card>
                 </div>
@@ -810,4 +810,14 @@ const hotLength = computed(() =&gt;
 .v-card {
   transition: all 0.3s ease-in-out;
 }
+.clamp-text {
+  display: -webkit-box; /* 使用弹性盒子 */
+  -webkit-box-orient: vertical; /* 设置为垂直方向 */
+  -webkit-line-clamp: 3; /* 限制最多显示3行 */
+  overflow: hidden; /* 隐藏多余内容 */
+  text-overflow: ellipsis; /* 添加省略号 */
+  white-space: normal; /* 允许换行 */
+  line-height: 1.5em; /* 设置每行的高度 */
+  min-height: calc(3 * 1.5em); /* 确保最小高度为3行 */
+}
 </style>
 #!/bin/bash
 # 变量定义
-LAST_TAG="1.0.41"
-TAG="1.0.42"
+LAST_TAG="1.0.42"
+TAG="1.0.43"
 TARGET_PATH="/root/web/canrud-outside-nuxt-front"
 DOCKERFILE_PATH="/root/web/canrud-outside-nuxt-front/canrud-nuxt-front"
 IMAGE_NAME="canrud-outside-front"
@@ -34,6 +34,35 @@
     <div class="tw-w-[300px]">
       <v-img src="/wechat.jpg" alt="canrud-wechat"></v-img>
     </div>
+    <h3 class="text-h5 tw-mb-5 tw-mt-5">Other Platforms</h3>
+    <div class="tw-mb-5">
+      <label class="text-subtitle-1 tw-mr-4 tw-w-20 tw-inline-block"
+        >LinkedIn:</label
+      >
+      <span>https://www.linkedin.com/company/canrd?originalSubdomain=cn</span>
+    </div>
+    <div class="tw-mb-5">
+      <label class="text-subtitle-1 tw-mr-4 tw-w-20 tw-inline-block"
+        >Amazon:</label
+      >
+      <span
+        >https://www.amazon.com/s?me=A3A2SQ086XUS66&marketplaceID=ATVPDKIKX0DER</span
+      >
+    </div>
+    <div class="tw-mb-5">
+      <label class="text-subtitle-1 tw-mr-4 tw-w-20 tw-inline-block"
+        >Alibaba:</label
+      >
+      <span
+        >https://canrd.en.alibaba.com/company_profile.html?spm=a2700.galleryofferlist.normal_offer.d_companyName.262213a0fqshG2</span
+      >
+    </div>
+    <div class="tw-mb-5">
+      <label class="text-subtitle-1 tw-mr-4 tw-w-20 tw-inline-block"
+        >Youtube:</label
+      >
+      <span>https://www.youtube.com/@Canrd_Tech</span>
+    </div>
     <div style="margin-bottom: 10px">
       <v-tabs
         class="tabs2"
@@ -32,118 +32,7 @@
     </v-carousel>
   </v-rows>
   <HotProducts />
-  <!-- <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-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">
-      <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 class="image-substitute"></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-tabs>
-    <div class="tw-text-center" v-if="hotLoadingMobile && 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="!hotLoadingMobile">
-        <v-col
-          v-for="(item, i) in recommendImagesMobile"
-          :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 class="clamp-text">{{ 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="hotTotalMobile"
-          v-model="currentIndexMobile"
-          @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>
@@ -211,159 +100,6 @@ import { useCategoryStore } from &quot;../stores/category&quot;;
 import { computed, onMounted, reactive, ref } from "vue";
 import { isMobile } from "../utils";
-const maxPage = ref(1);
-const maxPageMobile = 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 recommendListMobile = ref({});
-const recommendImagesMobile = ref({});
-const currentIndexMobile = ref(1);
-const hotLoadingMobile = ref(false);
-const hotTotalMobile = ref(10);
-// const loadHotProducts = async () => {
-//   hotLoading.value = true;
-//   const pageSize = 5;
-//   let { data: hotProducts } = await useAsyncData(
-//     "hotProducts",
-//     () =>
-//       $fetch("/shop/product/hotProducts", {
-//         method: "GET",
-//         params: {
-//           pageNo: currentIndex.value,
-//           pageSize: pageSize,
-//         },
-//       }),
-//     {
-//       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: 5 }).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;
-//   }
-//   startTimer();
-// };
-// let intervalId: any;
-// const toggleRowRight = () => {
-//   if (currentIndex.value < maxPage.value) {
-//     currentIndex.value++;
-//   } else if (currentIndex.value == maxPage.value) {
-//     currentIndex.value = 1;
-//   }
-//   startTimer();
-// };
-// const startTimer = () => {
-//   // 清除已有计时器，防止重复
-//   clearInterval(intervalId);
-//   intervalId = setInterval(() => {
-//     toggleRowRight();
-//   }, 5000); // 每6秒调用一次
-// };
-
-// onMounted(() => {
-//   startTimer();
-// });
-
-// const toggleRowMobile = (value: number) => {
-//   currentIndexMobile.value = value;
-// };
-
-// watch(currentIndex, (newIndex) => {
-//   loadHotProducts(); // Call loadHotProducts when currentIndex changes
-// });
-// // Initial load of hot products
-// await loadHotProducts(); // Load hot products the first time
-
-// const loadHotProductsMobile = async () => {
-//   hotLoadingMobile.value = true;
-//   let { data: hotProductsMobile } = await useAsyncData(
-//     "hotProducts",
-//     () =>
-//       $fetch("/shop/product/hotProducts", {
-//         method: "GET",
-//         params: {
-//           pageNo: currentIndexMobile.value,
-//           pageSize: 4,
-//         },
-//       }),
-//     {
-//       server: true, // 仅在服务器端获取数据
-//     }
-//   );
-//   hotTotalMobile.value = hotProductsMobile.value.data.total;
-//   recommendListMobile.value = hotProductsMobile.value.data.records;
-//   maxPageMobile.value = hotProductsMobile.value.data.pages;
-//   // recommendImages.value = recommendList.value.slice(0, 10).map((item) => {
-//   recommendImagesMobile.value = Array.from({ length: 4 }).map((_, index) => {
-//     const item = recommendListMobile.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;
-//   });
-//   hotLoadingMobile.value = false;
-// };
-// watch(currentIndexMobile, (newIndex) => {
-//   loadHotProductsMobile(); // Call loadHotProducts when currentIndex changes
-// });
-// // Initial load of hot products
-// await loadHotProductsMobile(); // Load hot products the first time
-
 onMounted(() => {
   console.log(
     "%c [ onMounted ]-10",
@@ -526,15 +262,6 @@ const packs = [
   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;
@@ -210,7 +210,6 @@ import { useProductListStore } from &quot;~/stores/product_list&quot;;
 import { useCategoryStore } from "~/stores/category";
 import CategoryList from "~/components/CategoryList.vue";
 import MobileCategoryList from "~/components/MobileCategoryList.vue";
-import HotProducts from "../components/HotProducts.vue";
 import { watchEffect, computed, ref } from "vue";
 const productStore = useProductListStore();
@@ -546,46 +545,7 @@ watchEffect(async () =&gt; {
     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