canrd-main / canrud-nuxt-front · Files

<template>

  <HotProducts />

  <!-- <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-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 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; margin-bottom: 30px">
    <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-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> -->

  <v-container class="pa-0 pa-sm-4">

    <div
      class="my-8 my-sm-16 text-blue-darken-1 text-h4 tw-text-center"
      v-if="!isMobile()"
    >

      <strong>Company Profile</strong>
    </div>

    <v-row class="pb-sm-8 ma-0">

      <v-col cols="12" sm="5" class="pa-0 tw-relative">
        <v-img src="/about_img/1.jpg" alt="canrud"></v-img>
        <div
          class="py-4 tw-bottom-0 tw-absolute tw-w-full text-h5 tw-text-center tw-bg-[rgba(30,136,229,0.8)] tw-text-white"

          v-if="isMobile()"
        >

          <strong>Company Profile</strong>
        </div>
      </v-col>
      <v-col class="tw-leading-8" v-if="!isMobile()">
        <p class="text-grey-darken-1">
          <b>1. </b>2015.2.11 was established in Songshan Lake High-tech Zone;
        </p>
        <p class="text-grey-darken-1"><b>2.</b> Registered capital of 1000W;</p>
        <p class="text-grey-darken-1">
          <b>3.</b> Main business of new energy technology development
        </p>
        <p class="text-grey-darken-1">
          <b>4.</b>

          (Customized/ equipment / testing / materials / new product
          development, etc.);

        </p>
        <p class="text-grey-darken-1">
          <b>5.</b> In 2017, it was approved as a national high-tech enterprise;
        </p>
        <p class="text-grey-darken-1">

          <b>6.</b> 120+ invention patents; 100 + authorized;
        </p>
        <p class="text-grey-darken-1">
          <b>7.</b> The plant area is 6,000 m 2, with 70 employees (the core
          team is from Ningde ATL/ Foxconn).

        </p>
      </v-col>

      <v-col
        cols="12"
        class="tw-leading-6 tw-text-white tw-bg-[#1e88e5] px-10 pb-2"
        v-if="isMobile()"
      >

        <ul>

          <li
            class="mb-1 tw-border-white tw-border-0 tw-border-b-2 tw-border-solid tw-list-disc"
          >

            2015.2.11 was established in Songshan Lake High-tech Zone;
          </li>

          <li
            class="mb-1 tw-border-white tw-border-0 tw-border-b-2 tw-border-solid tw-list-disc"
          >

            Registered capital of 1000W;
          </li>

          <li
            class="mb-1 tw-border-white tw-border-0 tw-border-b-2 tw-border-solid tw-list-disc"
          >

            Main business of new energy technology development
          </li>

          <li
            class="mb-1 tw-border-white tw-border-0 tw-border-b-2 tw-border-solid tw-list-disc"
          >
            (Customized/ equipment / testing / materials / new product
            development, etc.);

          </li>

          <li
            class="mb-1 tw-border-white tw-border-0 tw-border-b-2 tw-border-solid tw-list-disc"
          >

            In 2017, it was approved as a national high-tech enterprise;
          </li>

          <li
            class="mb-1 tw-border-white tw-border-0 tw-border-b-2 tw-border-solid tw-list-disc"
          >

            120+ invention patents; 100 + authorized;
          </li>

          <li
            class="mb-1 tw-border-white tw-border-0 tw-border-b-2 tw-border-solid tw-list-disc"
          >
            The plant area is 6,000 m 2, with 70 employees (the core team is
            from Ningde ATL/ Foxconn).

          </li>
        </ul>
      </v-col>
    </v-row>

    <iframe
      width="100%"
      :height="isMobile() ? 200 : 550"
      src="https://www.youtube.com/embed/Wj6bOrbuwWA?si=Za2aq-Ej28xpIFt6"
      title="YouTube video player"
      frameborder="0"

      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

      referrerpolicy="strict-origin-when-cross-origin"
      allowfullscreen
    ></iframe>

  </v-container>

  <v-sheet class="py-8 bg-grey-lighten-5 py-sm-16">
    <v-container>

      <div
        class="mb-8 text-blue-darken-1 tw-text-center text-h5 text-sm-h4 mb-sm-6"
      >

        <strong>Corporate Culture</strong>
      </div>
      <v-sheet border rounded v-if="!isMobile()">
        <v-row>
          <v-col>

            <div
              class="tw-my-[32px] tw-border-0 tw-border-solid tw-border-r-[1px] tw-border-e-blue-300"
            >
              <div
                class="mb-4 text-center tw-font-medium tw-text-[32px] tw-flex tw-items-center tw-justify-center"
              >
                <img
                  width="36"
                  src="/about_img/2.png"
                  class="mr-4"
                  alt="canrud"
                />

                Vision
              </div>

              <v-card-text>

                the world's top one-stop serviceprovider in the field of new
                energy research

              </v-card-text>
            </div>
          </v-col>
          <v-col>

            <div
              class="tw-my-[32px] tw-border-0 tw-border-solid tw-border-r-[1px] tw-border-e-blue-300"
            >
              <div
                class="mb-4 text-center tw-font-medium tw-text-[36px] tw-flex tw-items-center tw-justify-center"
              >
                <img
                  width="30"
                  src="/about_img/3.png"
                  class="mr-4"
                  alt="canrud"
                />Mission

              </div>

              <v-card-text
                >Build a "industry-university-research" high-speed channel
              </v-card-text>

            </div>
          </v-col>
          <v-col>
            <div class="tw-my-[32px]">

              <div
                class="mb-4 text-center tw-font-medium tw-text-[36px] tw-flex tw-items-center tw-justify-center"
              >
                <img
                  width="30"
                  src="/about_img/4.png"
                  class="mr-4"
                  alt="canrud"
                />Values

              </div>

              <v-card-text
                >Burn yourself and contribute to the society
                Scientific</v-card-text
              >

            </div>
          </v-col>
        </v-row>
      </v-sheet>
      <div v-if="isMobile()">

        <v-sheet
          border
          rounded="lg"
          class="my-4 tw-border-0 tw-border-solid tw-border-r-[1px] tw-border-e-blue-300"
        >

          <v-row

            class="py-2 ma-0 pr-2 tw-bg-[linear-gradient(rgba(215,237,254,0.88),rgba(215,237,254,0.36))] tw-rounded-[8px]"
          >
            <v-col
              cols="3"
              class="text-center tw-flex tw-items-center tw-justify-center tw-box-border"
            >
              <img
                width="48"
                src="/about_img/2.png"
                class="tw-m-auto"
                alt="canrud"
              />

            </v-col>
            <v-col cols="9">
              <div class="font-weight-bold tw-text-[32px] text-h5">Vision</div>
              <div class="font-weight-bold text-body-1">

                the world's top one-stop serviceprovider in the field of new
                energy research

              </div>
            </v-col>
          </v-row>
        </v-sheet>

        <v-sheet
          border
          rounded="lg"
          class="my-4 tw-border-0 tw-border-solid tw-border-r-[1px] tw-border-e-blue-300"
        >

          <v-row

            class="ma-0 py-2 pr-2 tw-bg-[linear-gradient(rgba(203,220,254,0.88),rgba(203,220,254,0.36))] tw-rounded-[8px]"
          >
            <v-col
              cols="3"
              class="text-center tw-flex tw-items-center tw-justify-center tw-box-border"
            >
              <img
                width="48"
                src="/about_img/3.png"
                class="tw-m-auto"
                alt="canrud"
              />

            </v-col>
            <v-col cols="9 tw-h-[120px]">
              <div class="font-weight-bold tw-text-[32px] text-h5">Mission</div>
              <div class="font-weight-bold text-body-1">
                Build a "industry-university-research" high-speed channel
              </div>
            </v-col>
          </v-row>
        </v-sheet>

        <v-sheet
          border
          rounded="lg"
          class="my-4 tw-border-0 tw-border-solid tw-border-r-[1px] tw-border-e-blue-300"
        >

          <v-row

            class="py-2 ma-0 tw-bg-[linear-gradient(rgba(212,246,255,0.88),rgba(212,246,255,0.36))] tw-rounded-[8px]"
          >
            <v-col
              cols="3"
              class="text-center tw-flex tw-items-center tw-justify-center tw-box-border"
            >
              <img
                width="48"
                src="/about_img/4.png"
                class="tw-m-auto"
                alt="canrud"
              />

            </v-col>
            <v-col cols="9 tw-h-[120px]">
              <div class="font-weight-bold tw-text-[32px] text-h5">Values</div>
              <div class="font-weight-bold text-body-1">
                Burn yourself and contribute to the society Scientific
              </div>
            </v-col>
          </v-row>
        </v-sheet>
      </div>
    </v-container>
  </v-sheet>

  <v-sheet
    class="py-8 py-sm-16"
    :style="
      isMobile()
        ? 'background: url(/mobile/about-bg.png) no-repeat; background-size: 100% 100%'
        : 'background: url(/about_img/bg.png) no-repeat; background-size: 100% 100%'
    "
  >

    <v-container>

      <div
        class="mb-8 text-blue-darken-1 tw-text-center text-h5 text-sm-h4 mb-sm-6"
      >

        <strong>Milestone</strong>
      </div>
      <v-timeline :direction="isMobile() ? 'vertical' : 'horizontal'">
        <v-timeline-item dot-color="indigo-lighten-1" size="16" fill-dot>
          <template v-slot:opposite>

            <strong class="text-blue-darken-1 tw-text-[22px]"
              >2015</strong
            ></template
          >

          <p class="tw-text-[14px]">

            <strong
              >Canrd <br />
              established</strong
            >

          </p>
        </v-timeline-item>
        <v-timeline-item dot-color="blue-darken-1" fill-dot size="32">
          <template v-slot:opposite>

            <strong class="text-blue-darken-1 tw-text-[22px]"
              >2017</strong
            ></template
          >

          <div>
            <p>

              <strong class="tw-text-[14px]"
                >National high-tech <br />
                enterprise</strong
              >

            </p>
          </div>
        </v-timeline-item>
        <v-timeline-item dot-color="indigo-lighten-1" size="16" fill-dot>
          <template v-slot:opposite>
            <strong class="text-blue-darken-1 tw-text-[22px]">2018</strong>
          </template>
          <div>
            <p class="tw-text-[14px]"><strong>Customers</strong></p>
            <p class="tw-text-[14px]"><strong>exceed 2000+</strong></p>
          </div>
        </v-timeline-item>
        <v-timeline-item dot-color="blue-darken-1" fill-dot size="32">
          <template v-slot:opposite>

            <strong class="text-blue-darken-1 tw-text-[22px]" fill-dot
              >2020</strong
            >

          </template>

          <div class="tw-text-[14px]">
            <p><strong>Customized division</strong></p>
            <p><strong>Testing division(Xia Men)</strong></p>
          </div>
        </v-timeline-item>
        <v-timeline-item dot-color="indigo-lighten-1" size="16" fill-dot>
          <template v-slot:opposite>
            <strong class="text-blue-darken-1 tw-text-[22px]">2021</strong>
          </template>
          <div class="tw-text-[14px]">
            <p><strong>Equipment division</strong></p>
          </div>
        </v-timeline-item>
        <v-timeline-item dot-color="blue-darken-1" fill-dot size="32">
          <template v-slot:opposite>

            <strong class="text-blue-darken-1 tw-text-[22px]"
              >2022</strong
            ></template
          >

          <div class="tw-text-[14px]">
            <p><strong>R&D center(Houjie)</strong></p>
            <p><strong>>Pack division</strong></p>
          </div>
        </v-timeline-item>
      </v-timeline>
    </v-container>
  </v-sheet>
  <v-sheet class="bg-grey-lighten-6 pt-8 pt-sm-16 tw-pb-[128px]">
    <v-container>

      <div
        class="mb-8 text-blue-darken-1 tw-text-center text-h5 text-sm-h4 mb-sm-6"
      >

        <strong>R&D Ability</strong>
      </div>

      <div
        class="text-body-1 font-weight-medium tw-mb-[24px] tw-max-w-[600px] tw-m-auto text-grey-darken-1"
      >
        The combination of hardware and software creates strong research and
        development capabilities.

      </div>

      <div
        class="text-body-1 font-weight-medium tw-mb-[64px] tw-max-w-[600px] tw-m-auto text-grey-darken-1"
      >
        The invention patents cover new materials such as silicon carbon,
        graphene, lithium sulfur, sodium electricity and lithium metal, as well
        as gel process, pre-lithium process and flexible battery design."

      </div>
      <v-row>
        <v-col cols="12" sm="4">
          <v-card variant="outlined" color="blue-darken-1" v-if="!isMobile()">
            <v-img src="/about_img/5.png" alt="canrud"></v-img>
            <v-card-title class="text-grey-darken-4">Team</v-card-title>

            <v-card-text class="text-grey-darken-4"
              >Core team members are all from ATL/Foxconn 12+working experience

            </v-card-text>
          </v-card>
          <v-sheet v-if="isMobile()" rounded="lg">
            <v-row class="ma-0">
              <v-col cols="5" sm="12" class="pa-0 tw-rounded-l-lg">

                <img
                  src="/about_img/5.png"
                  alt="canrud"
                  class="tw-w-full tw-h-full tw-rounded-l-lg"
                />

              </v-col>

              <v-col
                cols="7"
                class="pa-0 tw-bg-[#1e88e5] tw-rounded-r-lg text-white"
              >

                <v-card-title class="">Team</v-card-title>

                <v-card-text
                  >Core team members are all from ATL/Foxconn 12+working
                  experience

                </v-card-text>
              </v-col>
            </v-row>
          </v-sheet>
        </v-col>
        <v-col cols="12" sm="4">
          <v-card variant="outlined" color="blue-darken-1" v-if="!isMobile()">
            <v-img src="/about_img/6.png" alt="canrud"></v-img>
            <v-card-title class="text-grey-darken-4">Patents</v-card-title>
            <v-card-text class="text-grey-darken-4">

              More than 120 invention patents, covering materials, design,
              process, equipment and so on

            </v-card-text>
          </v-card>
          <v-sheet v-if="isMobile()" rounded="lg">
            <v-row class="ma-0">

              <v-col
                cols="7"
                class="pa-0 tw-bg-[#1e88e5] tw-rounded-l-lg text-white"
              >

                <v-card-title>Patents</v-card-title>
                <v-card-text>

                  More than 120 invention patents, covering materials, design,
                  process, equipment and so on

                </v-card-text>
              </v-col>
              <v-col cols="5" sm="12" class="pa-0 tw-rounded-r-lg">

                <img
                  src="/about_img/6.png"
                  alt="canrud"
                  class="tw-w-full tw-h-full tw-rounded-r-lg"
                />

              </v-col>
            </v-row>
          </v-sheet>
        </v-col>
        <v-col cols="12" sm="4">
          <v-card variant="outlined" color="blue-darken-1" v-if="!isMobile()">
            <v-img src="/about_img/7.png" alt="canrud"></v-img>
            <v-card-title class="text-grey-darken-4">Hardware</v-card-title>
            <v-card-text class="text-grey-darken-4">

              <row
                >Independent battery pilot line and equipment production
                line</row
              >

            </v-card-text>
          </v-card>
          <v-sheet v-if="isMobile()" rounded="lg">
            <v-row class="ma-0">

              <v-col
                cols="7"
                class="pa-0 tw-bg-[#1e88e5] tw-rounded-l-lg text-white"
              >

                <v-card-title>Hardware</v-card-title>
                <div class="px-4 text-body-1 text-bold">
                  Independent battery pilot line and equipment production line
                </div>
              </v-col>
              <v-col cols="5" sm="12" class="pa-0 tw-rounded-r-lg">

                <img
                  src="/about_img/7.png"
                  alt="canrud"
                  class="tw-w-full tw-h-full tw-rounded-r-lg"
                />

              </v-col>
            </v-row>
          </v-sheet>
        </v-col>
      </v-row>
    </v-container>
  </v-sheet>
</template>

<script setup lang="ts">

import MainTitle from "../components/MainTitle.vue";
import HotProducts from "../components/HotProducts.vue";
import { isMobile } from "../utils";

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;
// };

// let intervalId: any;
// const toggleRowLeft = () => {
//   if (currentIndex.value !== 1) {
//     currentIndex.value--;
//   } else if (currentIndex.value == 1) {
//     currentIndex.value = maxPage.value;
//   }
//   startTimer();
// };
// 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) => {
//   currentIndex.value = value;
// };

// const hotLength = computed(() =>
//   hotTotal.value ? Math.ceil(hotTotal.value / 4) : 0
// );

// watch(currentIndex, (newIndex) => {
//   loadHotProducts(); // Call loadHotProducts when currentIndex changes
// });
// // Initial load of hot products
// await loadHotProducts(); // Load hot products the first time

useHead({

  title: "About Us",

  meta: [
    {

      name: "title",

      content:

        "科路得,canrd,canrud,New energy technology development,National high-tech enterprise,Battery pilot line,Lab Device",
    },
    {
      name: "keywords",

      content:

        "科路得,canrd,canrud,New energy technology development,National high-tech enterprise,Battery pilot line,Lab Device",
    },
    {
      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.",

    },
  ],

});

</script>

<style lang="scss" scoped>
// @use 'vuetify/settings' with (
//   $sheet-border-color: '#1e88e5'
// );

b {
  display: inline;
  font-size: 20px;
  color: #1e88e5;
  font-style: italic;
}

p {
  cursor: default;
  font-weight: bold;
}

@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>