canrd-main / canrud-nuxt-front · Files

<template>
  <v-rows class="tw-w-full">
    <v-carousel hide-delimiter-background show-arrows="hover" height="auto" v-if="!isMobile()">
      <v-carousel-item v-for="banner in banners" :src="banner" cover alt="canrud" :key="banner">
      </v-carousel-item>
    </v-carousel>
    <v-carousel hide-delimiter-background show-arrows="hover" height="auto" v-if="isMobile()">
      <v-carousel-item v-for="banner in mobileBanners" :src="banner" cover alt="canrud" :key="banner">
      </v-carousel-item>
    </v-carousel>
  </v-rows>
  <!-- 能源材料 -->
  <div class="tw-py-8 py-sm-16">
    <v-container>
      <MainTitleListOdd title="Material Reagents" :list="materials"
        desc="Leading global provider of energy storage research materials and providing other professional/universal experimental materials. " />
    </v-container>
  </div>

  <!-- 设备 -->
  <div class="bg-grey-lighten-5 tw-py-8 py-sm-16">
    <v-container>
      <MainTitleList title="Lab Device" listType="equipment"
        :list="lab.list.map((item) => ({ ...item, href: '/products' }))"
        desc="Self-built High-precision Machining Center with Powerful Design and Manufacturing Capabilities. "
        href="/equipment" />
    </v-container>
  </div>

  <!-- Customized Battery -->
  <div class="tw-py-8 py-sm-16">
    <v-container>
      <MainTitleList :title="('Customized Battery')" :list="batteries" href="/customize"
        desc="200mAh~10Ah, Winding/Stacking, Unfilled/Filled Electrolyte Cells, Three-Electrode, and More. " />
    </v-container>
  </div>
  <!-- Testing -->
  <div class="bg-grey-lighten-5 tw-py-8 py-sm-16">
    <v-container>
      <MainTitleList title="Testing" :list="tests" href="/test"
        desc="Self built testing center and signed strategic cooperation with ATL, Tsinghua and other units. " />
    </v-container>
  </div>
  <!-- Pack -->
  <div class="pt-8 pb-8 pt pt-sm-16 pb-sm-32">
    <v-container>
      <MainTitleList title="Pack" href="/pack" :list="packs"
        desc="Focusing on energy materials/new energy storage systems/modules and other fields, mastering advanced technologies to provide high-quality services. " />
    </v-container>
  </div>
</template>

<script setup lang="ts">
import MainTitleList from '../components/MainTitleList.vue'
import MainTitleListOdd from '../components/MainTitleListOdd.vue'
import { useCategoryStore } from '../stores/category'
import { computed } from 'vue'
import { isMobile } from '../utils'
onMounted(() => {
  console.log('%c [ onMounted ]-10', 'font-size:13px; background:pink; color:#bf2c9f;', 111)
})
useHead({
  title: 'canrud',
  meta: [
    {
      name: 'title',
      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. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at contact@canrd.com or call +86 19867737979 to explore our innovative offerings. Together, let's shape a greener, brighter world!"
    }, {
      name: 'keywords',
      content:
        '科路得,canrd,canrud,Energy Storage Research,Lithium Batteries Research,Material Reagents,Lab Device,Customized Battery,Testing,Pack',
    }, {
      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. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at contact@canrd.com or call +86 19867737979 to explore our innovative offerings. Together, let's shape a greener, brighter world!"
    }],
  link: [
    { rel: 'preload', href: '/banner/banner1.jpg', as: 'image' }
  ]
})

// useAsyncData(async ({ app }) => {
//   console.log('%c [ app ]-70', 'font-size:13px; background:pink; color:#bf2c9f;', app)
//   app.head.title = 'canrud'
//   app.head.meta = [
//     {
//       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. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at    
//     }]
// })
console.log(11)

const store = useCategoryStore()

const lab = computed(
  () =>
    store?.list?.[3] || {
      categoryDisplayName: '',
      list: []
    }
)

const banners = [
  '/banner/banner1.jpg',
  '/banner/banner2.jpg',
  '/banner/banner3.jpg',
  '/banner/banner5.jpg'
]

const mobileBanners = [
  '/mobile/banner-index1.png',
  '/mobile/banner-index2.png',
  '/mobile/banner-index3.png'
]

const materials = [
  { name: 'Energy materials', imageUrl: '/home/1.jpg', href: '/products' },
  {
    name: 'Laboratory consumables',
    imageUrl: '/home/2-Universal-consumables.png',
    href: '/products'
  },
  {
    name: 'Low-dimensional materials',
    imageUrl: '/home/3-Low-dimensional-materials.png',
    href: '/products'
  }
]

const tests = [
  {
    name: 'Electrochemical performance',
    imageUrl: '/home/8_Electrochemical_performance.svg',
    href: '/test'
  },
  { name: 'Reliability testing', imageUrl: '/home/9 Reliability testing.svg', href: '/test' },
  { name: 'Material testing', imageUrl: '/home/10 Material testing.svg', href: '/test' },
  { name: 'Calibration', imageUrl: '/home/11 Calibration.svg', href: '/test' }
]
const batteries = [
  { name: 'Material evaluation', imageUrl: '/home/4-Material-evaluation.png', href: '/customize' },
  { name: 'R&D foundry', imageUrl: '/home/5-R&D-foundry.png', href: '/customize' },
  { name: 'Chemical system', imageUrl: '/home/6-Chemical-system.png', href: '/customize' },
  {
    name: 'Semi product customization',
    imageUrl: '/home/7-Semi-product-customization.png',
    href: '/customize'
  }
]
const packs = [
  { name: 'Power bank', imageUrl: '/home/12-power-bank.png', href: '/pack' },
  { name: 'Energy storage', imageUrl: '/home/13-Energy-storage.png', href: '/pack' },
  { name: 'power tool', imageUrl: '/home/3-powertool.png', href: '/pack' },
  {
    name: 'portable energy storage',
    imageUrl: '/home/4-portableenergystorage.png',
    href: '/pack'
  }
]
</script>