About.vue 14.8 KB
<template>
  <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-16 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-8"
        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>
  </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))]"
          >
            <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))]"
          >
            <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))]"
          >
            <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="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">
          <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">
          <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">
          <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">
          <template v-slot:opposite>
            <strong class="text-blue-darken-1 tw-text-[22px]">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="indig16">
          <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">
          <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-5 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">
        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">
        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 { isMobile } from '@/utils'
</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;
}
</style>