src/views/Equipment.vue

<template>
  <v-img src="/banner/equipment.jpg"></v-img>
  <div
    class="font-weight-bold tw-leading-[30px] text-white tw-bg-[url('/banner/top2.png')] tw-p-4 md:tw-p-8"
  >
    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!
  </div>
  <div class="tw-pt-8 md:tw-pt-16 md:tw-px-[128px]">
    <div class="text-blue-darken-1 tw-text-center tw-mb-6 text-h4 md:tw-mb-[64px]">
      <b>Equipment hardware</b>
    </div>
    <v-slide-group
      class="pa-4 tw-w-[110%] tw-ml-[-5%] tw-mb-[32px]"
      center-active
      show-arrows
      v-model="equipSlide"
    >
      <v-slide-group-item v-for="n in equipments" :key="n.name">
        <v-card :class="['ma-4']" width="280">
          <v-img width="256" :src="n.imageUrl" class="ma-2"></v-img>
          <v-card-title class="tw-text-center text-subtitle-1">{{ n.name }}</v-card-title>
        </v-card>
      </v-slide-group-item>
    </v-slide-group>
  </div>
  <div class="tw-py-[64px] tw-px-[128px] bg-grey-lighten-5">
    <MainTitle title="Succeed Case" className="tw-mb-[64px]" />
    <div class="tw-relative tw-mb-[64px]">
      <div
        class="tw-w-[140px] tw-text-center bg-blue-darken-1 tw-rounded-[4px] tw-m-auto tw-text-[20px] tw-font-medium tw-relative tw-z-10"
      >
        Coin cell
      </div>
      <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>
    </div>
    <v-row class="mb-16">
      <v-col cols="6">
        <v-img class="text-white align-end" src="/succeed_case/device-Coin cell Line.png" cover />
      </v-col>
      <v-col cols="6">
        <div
          class="font-weight-medium text-body-1 tw-text-justify tw-h-full tw-items-center tw-flex text-grey-darken-1"
        >
          Our coin cell production line comprises a well-established process that includes material
          baking, vacuum mixing, slurry filtration, electrode coating, electrode drying, electrode
          rolling, punching, environmental control, cell assembly, cell sealing, and formation
          testing. Through precise operations and advanced technology, we ensure uniform coating of
          positive and negative electrode materials, precise dimensions, and optimal performance.
          Our production line strictly adheres to quality standards, guaranteeing reliable
          manufacturing of pouch cells. From material preparation to final testing, our professional
          production line ensures outstanding performance and reliable safety, meeting the diverse
          needs of our customers.
        </div>
      </v-col>
    </v-row>
    <div class="tw-relative tw-mb-[64px]">
      <div
        class="tw-w-[210px] tw-text-center bg-blue-darken-1 tw-rounded-[4px] tw-m-auto tw-text-[20px] tw-font-medium tw-relative tw-z-10"
      >
        Pouch cell pilot line
      </div>
      <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>
    </div>
    <v-row class="mb-16">
      <v-col cols="6">
        <div
          class="font-weight-medium text-body-1 tw-text-justify tw-h-full tw-items-center tw-flex text-grey-darken-1"
        >
          Our pouch cell pilot line is a highly specialized production line that encompasses key
          processes such as vacuum mixing, electrode coating, electrode rolling, electrode cutting,
          electrode stacking, electrode welding, film forming, top-side sealing, electrolyte
          filling, vacuum resting, vacuum sealing, hot pressing formation, vacuum final sealing, and
          pouch cell assembly. Through meticulous operations and advanced technology, we ensure the
          consistency and reliability of the positive and negative electrodes. Each step is
          carefully controlled to guarantee the stability, reliability, and high performance of the
          cells. Our pouch cell pilot line meets industry standards and caters to the professional
          needs of our customers. Whether for research samples or small-scale production, we provide
          high-quality and highly reliable pouch cell products.
        </div>
      </v-col>
      <v-col cols="6">
        <v-img
          class="text-white align-end"
          src="/succeed_case/device-Pouch cell pilot line .png"
          cover
        />
      </v-col>
    </v-row>
    <div class="tw-relative tw-mb-[64px]">
      <div
        class="tw-w-[300px] tw-text-center bg-blue-darken-1 tw-rounded-[4px] tw-m-auto tw-text-[20px] tw-font-medium tw-relative tw-z-10"
      >
        Pouch cell pilot line (200m2)
      </div>
      <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>
    </div>
    <div class="text-h4 tw-text-center text-light-blue-darken-2 tw-mb-[32px]"></div>
    <v-row class="mb-16">
      <v-col cols="6">
        <v-img
          class="text-white align-end"
          src="/succeed_case/Pouch cell pilot line (200m2).png"
          cover
        />
      </v-col>
      <v-col cols="6">
        <div
          class="font-weight-medium text-body-1 tw-text-justify tw-h-full tw-items-center tw-flex text-grey-darken-1"
        >
          Our pouch cell pilot line layout has been meticulously designed, as shown in the
          accompanying diagram, to optimize space utilization, streamline workflow, and control
          temperature and humidity. This layout ensures high production efficiency, convenient
          operation, and precise experimental control. The equipment placement is strategically
          arranged, allowing easy access for operators while prioritizing safety considerations.
        </div>
      </v-col>
    </v-row>
    <v-row class="mb-16">
      <v-slide-group selected-class="bg-primary" show-arrows v-model="pouchSlide">
        <v-slide-group-item v-for="img in successCases" :key="img">
          <v-card color="grey-lighten-1" :class="['ma-4']" width="260">
            <v-img :src="img"></v-img>
          </v-card>
        </v-slide-group-item>
      </v-slide-group>
    </v-row>
    <div class="tw-relative tw-mb-[64px]">
      <div
        class="tw-w-[210px] tw-text-center bg-blue-darken-1 tw-rounded-[4px] tw-m-auto tw-text-[20px] tw-font-medium tw-relative tw-z-10"
      >
        Pouch cell pilot line
      </div>
      <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>
      <v-container>
        <v-row class="mt-16">
          <v-col cols="1"></v-col>
          <v-col cols="5">
            <v-img :src="fixtures[0].imageUrl"></v-img>
            <!-- <div
              class="tw-mt-[16px] font-weight-medium text-body-1 tw-text-center text-grey-darken-1"
            >
              Real-time monitor and record the pressure during test; Limit pressure: 1960N;
              Accuracy: 0.05%; Operating temperature: -20℃ ~70℃
            </div> -->
            <div
              class="tw-mt-[16px] font-weight-medium text-body-1 tw-text-center text-grey-darken-1"
            >
              Customized fixture
            </div>
          </v-col>
          <v-col cols="1"></v-col>
          <v-col cols="5">
            <v-img :src="fixtures[1].imageUrl"></v-img>
            <div
              class="tw-mt-[16px] font-weight-medium text-body-1 tw-text-center text-grey-darken-1"
            >
              Fuel cell test fixture
            </div>
          </v-col>
          <v-col cols="1"></v-col>
          <v-col cols="5">
            <v-img :src="fixtures[2].imageUrl"></v-img>
            <div
              class="tw-mt-[16px] font-weight-medium text-body-1 tw-text-center text-grey-darken-1"
            >
              Coin cell
            </div>
          </v-col>
          <v-col cols="1"></v-col>
          <v-col cols="5">
            <v-img :src="fixtures[3].imageUrl"></v-img>
            <div
              class="tw-mt-[16px] font-weight-medium text-body-1 tw-text-center text-grey-darken-1"
            >
              Flow battery test fixture
            </div>
          </v-col>
          <v-col cols="1"></v-col>
        </v-row>
      </v-container>
    </div>
  </div>
</template>
<script setup lang="ts">
import MainTitle from '@/components/MainTitle.vue'
import { ref, onMounted, onUnmounted } from 'vue'
import { useDisplay } from 'vuetify'
const { width } = useDisplay()
const equipSlide = ref(1)
const pouchSlide = ref(1)
let equipTimer: any = null
let pouchTimer: any = null
onMounted(() => {
  equipTimer = setInterval(() => {
    if (equipSlide.value > equipments.length) {
      equipSlide.value = 0
    } else {
      equipSlide.value = equipSlide.value + 1
    }
  }, 2000)
  pouchTimer = setInterval(() => {
    if (pouchSlide.value > successCases.length) {
      pouchSlide.value = 0
    } else {
      pouchSlide.value = pouchSlide.value + 1
    }
  }, 2000)
})
onUnmounted(() => {
  clearInterval(equipTimer)
  clearInterval(pouchTimer)
  equipTimer = null
  pouchTimer = null
})
const equipments = [
  { name: 'Precision grinder', imageUrl: '/lab/precision-grinder.png' },
  { name: 'Numerical control machine', imageUrl: '/lab/numerical-control-machine.png' },
  { name: 'Arm brace', imageUrl: '/lab/arm-brace.png' },
  {
    name: 'CNC high-speed precision carving machine',
    imageUrl: '/lab/cnc-high-speed-precision-carving-machine.png'
  },
  {
    name: 'Equipment assembly workshop',
    imageUrl: '/lab/equipment-assembly-workshop1.png'
  },
  {
    name: 'Equipment to be shipped',
    imageUrl: '/lab/equipment-to-be-shipped1.png'
  },
  {
    name: 'Equipment to be shipped',
    imageUrl: '/lab/equipment-assembly-workshop2.png'
  }
]
const successCases = [
  '/succeed_case/device1.png',
  '/succeed_case/device2.png',
  '/succeed_case/device3.png',
  '/succeed_case/device4.png',
  '/succeed_case/device5.png'
]
const fixtures = [
  { imageUrl: '/succeed_case/customized_fixture/customized-fixture.png' },
  { imageUrl: '/succeed_case/customized_fixture/fuel-cell-test-fixture.png' },
  { imageUrl: '/succeed_case/customized_fixture/coin-cell.png' },
  { imageUrl: '/succeed_case/customized_fixture/flow-battery-test-fixture.png' }
]
</script>
<style lang="scss">
.mb32 {
  margin-bottom: 32px;
}
</style>