zhusen / kelude-outside-web · Files

<template>

  <v-img src="/banner/customize.jpg"></v-img>
  <div
    class="font-weight-bold tw-leading-[30px] text-white tw-bg-[url('/banner/top2.png')] tw-p-[64px]"
  >

    Leading hardware support for customized battery solutions. Independent prototyping line covers
    the entire process. Equipped with a soft-pack development line and a -50°C drying room to meet
    various needs. Two lithium metal pouch cell preparation options provided. Strong R&D
    capabilities with over 10 years of experience. Resolving 100+ customized projects, serving 50+
    clients. Services include material evaluation, R&D contract manufacturing, new system
    development, and finished/semi-finished products. Breakthroughs in high-temperature,
    low-temperature, and fast-charging fields. Production and sales of high-quality lithium-ion
    batteries. Choose us to meet your R&D and production needs.
  </div>

  <div class="tw-p-[64px] tw-px-[128px]">

    <MainTitle title="Customization Hardware" className="tw-mb-[24px]" />
    <v-divider class="tw-mb-[64px]"></v-divider>

    <ContentDescription

      className="tw-mb-[64px] tw-max-w-[600px] tw-m-auto font-weight-medium  text-grey-darken-1"

      content="Coin cell preparation line with different machine such as mixing, coating, calendaring,
      cutting, assembly and testing."

    />

    <v-container>
      <v-row>
        <v-col cols="6">
          <v-img src="/customization_hardware/1.png"></v-img>
        </v-col>
        <v-col cols="6">
          <v-img src="/customization_hardware/2.png"></v-img>
        </v-col>
      </v-row>
    </v-container>

    <v-divider class="tw-my-[64px]"></v-divider>

    <div class="tw-max-w-[600px] tw-m-auto font-weight-medium tw-mb-[32px] text-grey-darken-1">

      <div>1、Pouch cell pilot line with different humidity control requirement</div>
      <div>2、Dry room for other process</div>
      <div>3、Dry room for mixing and coating with -30℃ humidity</div>
      <div>4、(before electrolyte injection)with -40℃ humidity</div>
    </div>
    <!-- <v-slide-group class="pa-4" selected-class="bg-success" show-arrows>

      <v-slide-group-item v-for="slide in slides" :key="slide">
        <v-card :class="['ma-2']" width="360">
          <v-img :src="slide"></v-img>
        </v-card>
      </v-slide-group-item>

    </v-slide-group> -->
    <v-row>
      <v-col v-for="slide in slides" :key="slide"><v-img :src="slide"></v-img></v-col>
    </v-row>

    <v-divider class="tw-my-[64px]"></v-divider>

    <div class="tw-max-w-[600px] tw-m-auto font-weight-medium tw-mb-[32px] text-grey-darken-1">

      <div>1、There are different capacity for mixing（5L,10L and 30L）</div>
      <div>2、Dry room for high Ni cathode pouch cell preparation(-30℃ humidity)</div>
      <div>
        3、Different solution to prepare lithium metal pouch cell(glove box with 0.1ppm condition or
        -50℃ dry room)
      </div>
    </div>
    <v-row>

      <v-col>
        <v-card>
          <v-img src="/customization_hardware/9.png"></v-img>
          <v-card-title class="tw-text-center text-subtitle-1">5L mixing</v-card-title>
        </v-card>
      </v-col>
      <v-col>
        <v-card>
          <v-img src="/customization_hardware/10.png"></v-img>
          <v-card-title class="tw-text-center text-subtitle-1">5L mixing</v-card-title>
        </v-card>
      </v-col>

      <v-col
        ><v-card>
          <v-img src="/customization_hardware/11.png"></v-img>
          <v-card-title class="tw-text-center text-subtitle-1">5L mixing</v-card-title>
        </v-card>
      </v-col>

    </v-row>

  </div>

  <div class="bg-grey-lighten-5 tw-py-[64px] tw-px-[128px]">

    <MainTitle title="Succeed Case" className="tw-mb-[64px]" />
    <div class="tw-relative tw-mb-[64px]">
      <div
        class="tw-w-[200px] tw-text-center bg-blue-darken-1 tw-rounded-[4px] tw-m-auto tw-text-[20px] tw-font-medium tw-relative tw-z-10"
      >
        customized types
      </div>
      <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>
    </div>

    <v-row class="mb-16">

      <v-col v-for="slide in slideCases" :key="slide.title">
        <!-- <v-card> -->
        <v-img :src="slide.imageUrl"></v-img>
        <v-card-title class="tw-text-center text-subtitle-1"> {{ slide.title }}</v-card-title>
        <!-- </v-card> -->
      </v-col>

    </v-row>

    <!-- <v-slide-group class="pa-4" selected-class="bg-success" show-arrows>

      <v-slide-group-item v-for="slide in slideCases" :key="slide">
        <v-card :class="['ma-2']" width="360">
          <v-img :src="slide"></v-img>
        </v-card>
      </v-slide-group-item>

    </v-slide-group> -->

    <div class="tw-relative tw-pb-[64px]">

      <div

        class="tw-mb-[64px] 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"

      >
        Material evaluation
      </div>
      <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>

      <ContentDescription
        className="tw-mb-[64px] tw-max-w-[600px] tw-m-auto font-weight-medium  text-grey-darken-1"
        content="Comprehensive lithium battery material evaluation, covering key materials such as cathode, anode, electrolyte, separator, and conductive additives. Accurate testing to ensure high-performance batteries. Choose us to embark on the path of material innovation!."
      />

      <v-img src="/customization_case/table.png"></v-img>

    </div>

    <!-- <v-table density="compact" class="tw-mb-[64px]">

      <thead>
        <tr class="bg-blue-lighten-1">
          <th class="text-left text-white">Cathode</th>
          <th class="text-left text-white">Anode</th>
          <th class="text-left text-white">Electrolyte</th>
          <th class="text-left text-white">Separator</th>
          <th class="text-left text-white">Conductive carbon</th>
        </tr>
      </thead>
      <tbody>
        <tr class="bg-light-blue-lighten-5">
          <td>1</td>
          <td>2</td>
          <td>1</td>
          <td>2</td>
          <td>1</td>
        </tr>
        <tr class="bg-light-blue-lighten-5">
          <td>1</td>
          <td>2</td>
          <td>2</td>
          <td>2</td>
          <td>2</td>
        </tr>
      </tbody>

    </v-table> -->

    <div class="tw-relative tw-mb-[64px]">
      <div
        class="tw-w-[220px] tw-text-center bg-blue-darken-1 tw-rounded-[4px] tw-m-auto tw-text-[20px] tw-font-medium tw-relative tw-z-10"
      >
        System development
      </div>
      <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>
    </div>

    <ContentDescription

      className="tw-mb-[64px] tw-max-w-[600px] tw-m-auto font-weight-medium  text-grey-darken-1"

      content="High temperature: mine safety helmet Low temperature: outdoor extreme cold applicationFast charging system development: fast charging power bank Water system battery development: new system development."
    />

    <v-row class="mb-16">

      <!-- <v-col v-for="slide in slideCases" :key="slide"><v-img :src="slide"></v-img></v-col> -->
      <v-img src="/customization_case/b.png"></v-img>

    </v-row>
  </div>

</template>

<script setup lang="ts">
import MainTitleList from '@/components/MainTitleList.vue'

import MainTitle from '@/components/MainTitle.vue'

import ContentDescription from '@/components/ContentDescription.vue'

const slides = [
  '/customization_hardware/3.png',
  '/customization_hardware/4.png',
  '/customization_hardware/5.png',
  '/customization_hardware/6.png'
]

const slideCases = [

  { imageUrl: '/customization_case/1.png', title: '1.Semi-finished product' },
  { imageUrl: '/customization_case/2.png', title: 'Material evaluation' },
  { imageUrl: '/customization_case/3.png', title: 'System development' },
  { imageUrl: '/customization_case/4.png', title: 'New product customization' }

  // '/customization_case/5.png'
]

const systems = ['/customization_case']

</script>

<style lang="less" scoped></style>