test.vue 7.63 KB
<template>
  <v-img src="/banner/test.jpg" v-if="!isMobile()"></v-img>
  <v-img src="/mobile/banner-test.png" v-if="isMobile()"></v-img>
  <div class="font-weight-bold tw-leading-[30px] text-white tw-bg-[url('/banner/top2.png')] px-4 py-2 pa-sm-8">
    We have an independent battery testing center that provides comprehensive testing services for
    you! Whether it's ambient temperature, high-temperature cycling, rate testing, high and
    low-temperature testing, high-temperature storage testing, or EIS/CV testing, we can meet your
    needs. Our reverse analysis experimental plan covers various dimensions, including
    non-destructive testing, disassembly analysis, size, capacity, internal resistance, EIS, rate,
    high and low-temperature analysis. Through techniques such as capacity testing, SEM, EDS,
    Mapping, CP, TG, GC-MS, ICP, we conduct in-depth reverse analysis, including elemental analysis
    and morphology analysis. Finally, we prepare detailed reverse analysis reports, combining market
    conditions to provide you with research and development directions. Choose us for reliable
    testing and limitless innovation!
  </div>
  <div class="pa-8 pa-sm-16">
    <div class="mb-8 text-blue-darken-1 tw-text-center text-h5 text-sm-h4 mb-sm-6">
      <b>Test Hardware</b>
    </div>
    <v-slide-group selected-class="bg-primary" show-arrows v-model="equipSlide" v-if="!isMobile()">
      <v-slide-group-item v-for="(slide, index) in slides" :key="slide.title" :value="index">
        <v-card :class="['ma-4']" width="260">
          <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-slide-group-item>
    </v-slide-group>

    <v-carousel height="360" width="318" interval="3000" cycle :continuous="false" :show-arrows="false"
      hide-delimiter-background v-if="isMobile()">
      <v-carousel-item v-for="n in slides" :key="n.imageUrl">
        <v-sheet color="grey-lighten-1" height="360" width="318" class="mx-auto" border="none">
          <v-card-title class="tw-text-center text-subtitle-1">{{ n.title }}</v-card-title>
          <v-img :src="n.imageUrl" alt="canrud"></v-img>
        </v-sheet>
      </v-carousel-item>
    </v-carousel>
  </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> -->
  <div class="tw-p-[64px] bg-grey-lighten-5">
    <div class="mb-4 mb-sm-16 text-blue-darken-1 text-h5 text-sm-h4 tw-text-center">
      <b>Succeed Case</b>
    </div>
    <div class="mb-8 mb-sm-16 tw-relative">
      <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">
        Reverse analysis
      </div>
      <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>
    </div>
    <ContentDescription className="mb-0 mb-sm-16 tw-max-w-[600px] tw-m-auto  text-grey-darken-1"
      content="Reverse analysis: assist customers to analyze the polymer / organic components in mainstream power batteries" />
    <v-row class="mb-8 mb-sm-12">
      <v-col cols="0" sm="2"></v-col>
      <v-col v-for="slide in testCases" :key="slide" cols="6" sm="4">
        <v-img :src="slide"></v-img>
      </v-col>
    </v-row>
    <div class="font-weight-medium tw-max-w-[600px] tw-m-auto text-grey-darken-1">
      <p>
        1. Experiment scheme: first conduct nondestructive testing (size / capacity / internal
        resistance / EIS / ratio / high and low temperature, etc.), and finally conduct disassembly
        analysis
      </p>
      <p>
        2. Implement reverse analysis: gram capacity / SEM / ED S/Mapping / CP / TG / GC-MS / ICP
        and other means
      </p>
      <p>
        3. Write the reverse analysis report: give the customer research and development direction
        according to the market situation
      </p>
    </div>

    <div class="my-8 my-sm-16 tw-relative">
      <div
        class="tw-w-[240px] tw-text-center bg-blue-darken-1 tw-rounded-[4px] tw-m-auto tw-text-[20px] tw-font-medium tw-relative">
        Reverse analysis result
      </div>
      <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>
    </div>

    <v-img :height="isMobile() ? 100 : 300" :src="results[0]" class="mb-8 mb-sm-16"></v-img>
    <v-img :height="isMobile() ? 100 : 340" class="tw-mb-[32px]" :src="results[1]"></v-img>
  </div>
  <!-- <v-slide-group class="pa-0" 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> -->
</template>

<script setup lang="ts">
import ContentDescription from '@/components/ContentDescription.vue'
import { onMounted, onUnmounted, ref } from 'vue'
import { isMobile } from '~/utils'

useHead({
  title: 'Test',
  meta: [{
    name: 'title',
    content:
      '科路得,Battery testing center,Comprehensive testing services,Ambient temperature,High-temperature cycling,Rate testing,High and low-temperature testing,High-temperature storage testing,EIS/CV testing,Reverse analysis experimental plan,Elemental analysis',
  }, {
    name: 'keywords',
    content:
      '科路得,Battery testing center,Comprehensive testing services,Ambient temperature,High-temperature cycling,Rate testing,High and low-temperature testing,High-temperature storage testing,EIS/CV testing,Reverse analysis experimental plan,Elemental analysis',
  },
  {
    name: 'description',
    content:
      '科路得,助您科研之路势在必得。We have an independent battery testing center that provides comprehensive testing services for you! Whether it‘s ambient temperature, high-temperature cycling, rate testing, high and low-temperature testing, high-temperature storage testing, or EIS/CV testing, we can meet your needs. Our reverse analysis experimental plan covers various dimensions, including non-destructive testing, disassembly analysis, size, capacity, internal resistance, EIS, rate, high and low-temperature analysis. Through techniques such as capacity testing, SEM, EDS, Mapping, CP, TG, GC-MS, ICP, we conduct in-depth reverse analysis, including elemental analysis and morphology analysis. Finally, we prepare detailed reverse analysis reports, combining market conditions to provide you with research and development directions. Choose us for reliable testing and limitless innovation!'
  }
  ]
})

const slides = [
  { title: 'Cycle/Rate test', imageUrl: '/testing_hardware/1.png' },
  { title: 'H/L temperature oven', imageUrl: '/testing_hardware/2.png' },
  { title: 'High temperature oven', imageUrl: '/testing_hardware/3.png' },
  { title: 'Electrochemical workstation', imageUrl: '/testing_hardware/4.png' },
  { title: 'BET', imageUrl: '/testing_hardware/5.png' },
  { title: 'TG-DSC', imageUrl: '/testing_hardware/6.png' },
  { title: 'Raman', imageUrl: '/testing_hardware/7.png' },
  { title: 'XRD', imageUrl: '/testing_hardware/8.png' }
]

const testCases = ['/test_result/3.png', '/test_result/4.png']

const results = ['/test_result/1.png', '/test_result/2.png']

const equipSlide = ref(1)
let equipTimer: any = null
onMounted(() => {
  equipTimer = setInterval(() => {
    if (equipSlide.value >= slides.length) {
      equipSlide.value = 0
    } else {
      equipSlide.value = equipSlide.value + 1
    }
  }, 2000)
})

onUnmounted(() => {
  clearInterval(equipTimer)
  equipTimer = null
})
</script>

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