up

sanmu
1 parent 1a9f6bd6
Showing 30 changed files with 264 additions and 77 deletions
dist/index.html
public/customization_case/Snipaste_2023-06-20_22-55-23.png
public/customization_case/Snipaste_2023-06-20_22-55-32.png
public/customization_case/Snipaste_2023-06-20_22-55-42.png
public/home/1-Energy-materials.png
public/home/10 Material testing.svg
public/home/11 Calibration.svg
public/home/12-power-bank.png
public/home/13-Energy-storage.png
public/home/2-Universal-consumables.png
public/home/3-Low-dimensional-materials.png
public/home/4-Material-evaluation.png
public/home/5-R&D-foundry.png
public/home/6-Chemical-system.png
public/home/7-Semi-product-customization.png
public/home/8_Electrochemical_performance.svg
public/home/9 Reliability testing.svg
public/home/others.svg
public/testing_hardware/CycleRate-test → public/testing_hardware/1.png
public/testing_hardware/HL-temperature-oven → public/testing_hardware/2.png
@@ -5,8 +5,8 @@
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vite App</title>
-    <script type="module" crossorigin src="/assets/index-e2819255.js"></script>
-    <link rel="stylesheet" href="/assets/index-f0febdb8.css">
+    <script type="module" crossorigin src="/assets/index-2b52aa89.js"></script>
+    <link rel="stylesheet" href="/assets/index-b84503aa.css">
   </head>
   <body>
     <div id="app"></div>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTDSVG1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1687246905469" class="icon" viewBox="-100 -100 1350 1200" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5024" xmlns:xlink="http://www.w3.org/1999/xlink" width="231.0546875" height="230">
+  <path d="M573.286004 173.620761l-1.474964 300.192671-242.744074-143.371499V100.322551h-49.998779v233.644296l-277.343229 157.496154L0 844.479383l303.94258 179.520617 305.892531-173.695759 1.474964-300.192671 242.744074 143.396499v231.794341h49.998779v-235.319255l277.343229-157.496155 1.724958-353.041381L879.178536-0.074998z m-13.299676 647.484192l-255.518761 144.996461-254.318791-150.221333 1.424965-295.31779 255.518762-144.99646 254.318791 150.246332z m571.561046-317.692243l-255.518761 144.99646-254.318791-150.246332 1.424965-295.367789 255.518761-144.99646L1132.97234 208.044921z" p-id="5025" fill="#1296db"></path>
+  <path d="M479.063304 575.310954h49.998779v199.995118h-49.998779z" p-id="5026" fill="#1296db"></path>
+  <path d="M109.37233 538.936842l167.845902-95.597666 24.749396 43.44894-167.845902 95.622665z" p-id="5027" fill="#1296db"></path>
+  <path d="M109.77232 783.98086l25.39938-43.073949 166.395938 98.147604-25.42438 43.073949z" p-id="5028" fill="#1296db"></path>
+  <path d="M859.75401 158.996118l25.39938-43.048949 166.320939 98.122605-25.39938 43.048949z" p-id="5029" fill="#1296db"></path>
+</svg>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTDSVG1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1687246980615" class="icon" viewBox="0 -100 900 1200" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6119" xmlns:xlink="http://www.w3.org/1999/xlink" width="90" height="90">
+  <path d="M801.274 157.172c0-21.7-17.937-39.291-40.065-39.291L661.052 117.881l0 39.291c0 21.702-17.937 39.294-40.065 39.294L280.446 196.466c-22.125 0-40.062-17.591-40.062-39.294l0-39.291L120.192 117.881c-22.125 0-40.065 17.591-40.065 39.291l0 746.571c0 21.702 17.939 39.296 40.065 39.296L440.7 943.039l80.129 78.585L80.128 1021.624C35.874 1021.623 0 986.441 0 943.039L0 117.881c0-43.402 35.874-78.59 80.128-78.59l160.256 0c0-21.7 17.937-39.291 40.062-39.291l340.541 0c22.128 0 40.065 17.591 40.065 39.291l140.223 0c44.253 0 80.127 35.188 80.127 78.59l0 360.582-80.127 81.611L801.275 157.172zM620.987 432.227 260.415 432.227c-11.065 0-20.031-8.798-20.031-19.649l0-19.644c0-10.854 8.966-19.647 20.031-19.647l360.572 0c11.063 0 20.034 8.793 20.034 19.647l0 19.644C641.021 423.429 632.05 432.227 620.987 432.227zM641.021 628.692c0 10.849-8.971 19.644-20.034 19.644L260.415 648.336c-11.065 0-20.031-8.796-20.031-19.644l0-19.649c0-10.849 8.966-19.644 20.031-19.644l360.572 0c11.063 0 20.034 8.796 20.034 19.644L641.021 628.692zM466.413 750.879 614.66 877.587l406.964-406.069-401.418 550.105L413.515 802.704 466.413 750.879z" fill="#1296db" p-id="6120"></path>
+</svg>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTDSVG1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1687246678802" class="icon" viewBox="0 -200 1024 1200" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1499" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="250">
+  <path d="M805.888 170.496c-74.752 0-132.608 60.928-132.608 132.608 0 48.64 26.624 93.184 69.12 116.224l-124.416 193.536L499.712 532.48l-88.576 132.608-148.992-102.4-176.64 245.76v63.488h27.648l162.816-229.376 143.36 102.4 93.696-132.608 121.344 79.872 168.448-259.584h2.56c74.752 0 132.608-60.928 132.608-132.608S880.64 170.496 805.888 170.496z" fill="#1296db" p-id="1500"></path>
+</svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1687246755185" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1918" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M180.5312 690.0224a15.36 15.36 0 0 1-15.36-15.36V349.3376a15.36 15.36 0 0 1 30.72 0v325.3248a15.36 15.36 0 0 1-15.36 15.36zM758.9376 690.0224a15.36 15.36 0 0 1-15.36-15.36V349.3376a15.36 15.36 0 1 1 30.72 0v325.3248a15.36 15.36 0 0 1-15.36 15.36zM843.4688 628.5824a15.36 15.36 0 0 1-15.36-15.36V410.7776a15.36 15.36 0 0 1 30.72 0v202.4448a15.36 15.36 0 0 1-15.36 15.36z" fill="#1296db" p-id="1919"></path><path d="M758.9376 690.0224h-578.56a15.36 15.36 0 1 1 0-30.72h578.56a15.36 15.36 0 0 1 0 30.72zM758.9376 364.6976h-578.56a15.36 15.36 0 0 1 0-30.72h578.56a15.36 15.36 0 0 1 0 30.72zM843.4688 628.5824h-84.9408a15.36 15.36 0 0 1 0-30.72h84.9408a15.36 15.36 0 0 1 0 30.72zM843.4688 426.1376h-84.5312a15.36 15.36 0 0 1 0-30.72h84.5312a15.36 15.36 0 0 1 0 30.72zM292.2496 604.8768a15.36 15.36 0 0 1-10.24-26.88l176.5888-155.3408a15.36 15.36 0 1 1 20.48 23.04l-176.64 155.392a15.36 15.36 0 0 1-10.1888 3.7888zM468.3776 604.8768a15.36 15.36 0 0 1-10.24-26.88L634.88 422.656a15.36 15.36 0 0 1 20.48 23.04L478.5152 601.088a15.36 15.36 0 0 1-10.1376 3.7888z" fill="#1296db" p-id="1920"></path><path d="M468.7872 605.184a15.36 15.36 0 0 1-15.36-15.36V434.176a15.36 15.36 0 0 1 30.72 0v155.648a15.36 15.36 0 0 1-15.36 15.36z" fill="#1296db" p-id="1921"></path></svg>
 \ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1687247341041" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8172" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M886.951936 438.203392c-63.514624 63.514624-166.499328 63.514624-230.013952 0l-63.895552-63.900672c-63.519744-63.514624-63.519744-166.494208 0-230.013952l63.895552-63.895552c63.515648-63.514624 166.499328-63.514624 230.013952 0l63.895552 63.895552c63.519744 63.519744 63.519744 166.499328 0 230.013952L886.951936 438.203392z" fill="#1296db" p-id="8173"></path><path d="M444.669952 304.477184c0 89.827328-72.81664 162.644992-162.644992 162.644992l-90.361856 0c-89.827328 0-162.644992-72.81664-162.644992-162.644992l0-90.361856c0-89.827328 72.81664-162.644992 162.644992-162.644992l90.361856 0c89.827328 0 162.644992 72.81664 162.644992 162.644992L444.669952 304.477184z" fill="#1296db" p-id="8174"></path><path d="M979.771392 828.194816c0 89.822208-72.81664 162.644992-162.644992 162.644992l-90.361856 0c-89.827328 0-162.644992-72.82176-162.644992-162.644992l0-90.366976c0-89.822208 72.81664-162.644992 162.644992-162.644992l90.361856 0c89.827328 0 162.644992 72.82176 162.644992 162.644992L979.771392 828.194816z" fill="#1296db" p-id="8175"></path><path d="M444.669952 828.194816c0 89.822208-72.81664 162.644992-162.644992 162.644992l-90.361856 0c-89.827328 0-162.644992-72.82176-162.644992-162.644992l0-90.366976c0-89.822208 72.81664-162.644992 162.644992-162.644992l90.361856 0c89.827328 0 162.644992 72.82176 162.644992 162.644992L444.669952 828.194816z" fill="#1296db" p-id="8176"></path></svg>
 \ No newline at end of file
@@ -17,10 +17,22 @@
   </v-container>
   <div class="tabs">
     <div class="tw-max-w-[1200px] tw-mx-auto">
-      <v-tabs v-model="tab" bg-color="blue-darken-1" slider-color="yellow-darken-4">
-        <v-tab :value="1" to="/">Home </v-tab>
-        <v-tab :value="2" to="/products">Products</v-tab>
-        <v-tab :value="3" to="/contact">Contact</v-tab>
+      <v-tabs
+        v-model="tab"
+        bg-color="blue-darken-1"
+        slider-color="grey-lighten-3"
+        tab-slider-size="4px"
+      >
+        <v-tab :value="1" to="/"><span class="text-grey-lighten-3 tw-font-bold">Home</span> </v-tab>
+        <v-tab :value="2" to="/products"
+          ><span class="text-grey-lighten-3 tw-font-bold">Products</span></v-tab
+        >
+        <v-tab :value="3" to="/about"
+          ><span class="text-grey-lighten-3 tw-font-bold">About</span></v-tab
+        >
+        <v-tab :value="4" to="/contact"
+          ><span class="text-grey-lighten-3 tw-font-bold">Contact</span></v-tab
+        >
       </v-tabs>
     </div>
   </div>
 <template>
-  <div class="text-blue-darken-2 text-h3 tw-text-center tw-mb-[32px]">
+  <div class="text-blue-darken-1 text-h3 tw-text-center tw-mb-[16px] font-weight-bold">
     <div :class="titleCls">{{ title }}</div>
   </div>
-  <v-divider class="border-opacity-30 tw-mb-[16px]" color="" v-if="titleDivider"></v-divider>
-  <div class="text-body-1 tw-text-left tw-mb-8">
-    <span>{{ desc }}</span>
+  <div class="text-body-1 tw-max-w-[600px] tw-m-auto tw-mb-8">
+    <span class="">{{ desc }}</span>
     <router-link :to="href" v-if="href">
       <span
-        class="font-weight-bold text-decoration-underline tw-inline-block tw-underline tw-text-sky-600 hover:tw-text-sky-800"
+        class="font-weight-bold text-decoration-underline tw-inline-block tw-underline tw-text-sky-500 hover:tw-text-sky-800"
         >detail
         <v-icon class="tw-mt-[-4px]" size="18" icon="mdi-arrow-right"></v-icon>
       </span>
@@ -18,17 +17,21 @@
       <v-col v-for="(item, index) in list" :key="index" cols="12" :lg="lgCol" md="4" sm="6">
         <v-hover v-slot="{ isHovering, props }" open-delay="200" :disabled="disabled">
           <v-card
+            color="light-blue-darken-2"
+            variant="outlined"
             :elevation="isHovering ? 16 : 2"
             :class="{ 'on-hover': isHovering }"
             class="mx-auto"
-            height="350"
+            height="295"
             width="260"
             v-bind="props"
           >
             <v-img :src="item.imageUrl" />
-            <v-card-text class="text-center font-weight-medium text-subtitle-1">
+            <div
+              class="text-center bg-light-blue-darken-2 tw-absolute tw-bottom-0 tw-text-center tw-w-full tw-h-9 tw-leading-9"
+            >
               {{ item.name }}
-            </v-card-text>
+            </div>
           </v-card>
         </v-hover>
       </v-col>
@@ -39,16 +42,20 @@
       <v-col v-for="(item, index) in list" :key="index">
         <v-hover v-slot="{ isHovering, props }" open-delay="200" :disabled="disabled">
           <v-card
+            color="light-blue-darken-2"
+            variant="outlined"
             :elevation="isHovering ? 16 : 2"
             :class="{ 'on-hover': isHovering }"
-            class="mx-auto pa-5"
+            class="pt-5 mx-auto"
             height="350"
             v-bind="props"
           >
-            <v-img :src="item.imageUrl" width="70%" class="text-center ma-auto" />
-            <v-card-text class="text-center font-weight-medium text-subtitle-1">
+            <v-img :src="item.imageUrl" width="250" class="text-center ma-auto" />
+            <div
+              class="text-center bg-light-blue-darken-2 tw-absolute tw-bottom-0 tw-text-center tw-w-full tw-h-9 tw-leading-9"
+            >
               {{ item.name }}
-            </v-card-text>
+            </div>
           </v-card>
         </v-hover>
       </v-col>
@@ -7,6 +7,7 @@ import Equipment from &#39;../views/Equipment.vue&#39;
 import Customize from '../views/Customize.vue'
 import Test from '../views/Test.vue'
 import Pack from '../views/Pack.vue'
+import About from '../views/About.vue'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -37,6 +38,11 @@ const router = createRouter({
       component: Contact
     },
     {
+      path: '/about',
+      name: 'about',
+      component: About
+    },
+    {
       path: '/equipment',
       name: 'equipment',
       component: Equipment
+@use 'vuetify/settings' with (
+  $tab-slider-size: 3px,
+  $card-border-color: '#0288D1'
+);
+<template>
+  <v-img src="/customization_hardware/banner.png" class="tw-mb-[64px]"></v-img>
+  <v-container>
+    <MainTitle title="Company Profile" />
+    <v-row>
+      <v-col>
+        <v-img src=""></v-img>
+      </v-col>
+      <v-col>
+        <p>1. 2015.2.11 was established in Songshan Lake High-tech Zone;</p>
+        <p>2. Registered capital of 1000W;</p>
+        <p>3. Main business of new energy technology development</p>
+        <p>4. (Customized/ equipment / testing / materials / new product development, etc.);</p>
+        <p>5. In 2017, it was approved as a national high-tech enterprise;</p>
+        <p>6. 120+ invention patents; 100 + authorized;</p>
+        <p>
+          7. The plant area is 6,000 m 2, with 70 employees (the core team is from Ningde ATL/
+          Foxconn).
+        </p>
+      </v-col>
+    </v-row>
+
+    <MainTitle title="Corporate Culture" class="tw-mt-[64px]" />
+    <v-row>
+      <v-col>
+        <v-card height="150">
+          <v-card-title>Vision</v-card-title>
+          <v-card-text>
+            the world's top one-stop serviceprovider in the field of new energy research
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col>
+        <v-card height="150">
+          <v-card-title>Vision</v-card-title>
+          <v-card-text>
+            the world's top one-stop serviceprovider in the field of new energy research
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col>
+        <v-card height="150">
+          <v-card-title>Values</v-card-title>
+          <v-card-text>Build a "industry-university-research" high-speed channel</v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+    <MainTitle title="Milestone" class="tw-mt-[64px]" />
+    <v-timeline direction="horizontal">
+      <v-timeline-item dot-color="blue-lighten-1">
+        <template v-slot:opposite> <strong>2015</strong> </template>
+        <div>
+          <p>Canrd established</p>
+        </div>
+      </v-timeline-item>
+
+      <v-timeline-item dot-color="deep-purple-accent-1">
+        <template v-slot:opposite> <strong>2017</strong> </template>
+        <div>
+          <p>National high-tech enterprise</p>
+        </div>
+      </v-timeline-item>
+
+      <v-timeline-item dot-color="blue-lighten-1">
+        <template v-slot:opposite> <strong>2018</strong> </template>
+        <div>
+          <p>Customers exceed 2000+</p>
+        </div>
+      </v-timeline-item>
+      <v-timeline-item dot-color="deep-purple-accent-1">
+        <template v-slot:opposite> <strong>2020</strong> </template>
+        <div>
+          <p>Customized division</p>
+          <p>Testing division(Xia Men)</p>
+        </div>
+      </v-timeline-item>
+      <v-timeline-item dot-color="blue-lighten-1">
+        <template v-slot:opposite><strong>2021</strong> </template>
+        <div>
+          <p>Equipment division</p>
+        </div>
+      </v-timeline-item>
+      <v-timeline-item dot-color="deep-purple-accent-1">
+        <template v-slot:opposite> <strong>2022</strong> </template>
+        <div>
+          <p>R&D center(Houjie)</p>
+          <p>Pack division</p>
+        </div>
+      </v-timeline-item>
+    </v-timeline>
+    <div class="tw-mt-[48px]"></div>
+    <v-row>
+      <v-col>
+        <v-card height="100">
+          <v-card-title>Team</v-card-title>
+          <v-card-text
+            >Core team members are all from ATL/Foxconn 12+working experience
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col>
+        <v-card height="100">
+          <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-card>
+      </v-col>
+      <v-col>
+        <v-card height="100">
+          <v-card-title>Hardware</v-card-title>
+          <v-card-text>Independent battery pilot line and equipment production line</v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+    <v-row></v-row>
+    <ContentDescription
+      className="tw-mb-[16px] tw-mt-[48px]"
+      content="The combination of hardware and software creates strong research and development capabilities."
+    />
+    <ContentDescription
+      className="tw-mb-[16px]"
+      content="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."
+    />
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import MainTitle from '@/components/MainTitle.vue'
+import ContentDescription from '@/components/ContentDescription.vue'
+</script>
+
+<style lang="less" scoped></style>
@@ -25,54 +25,49 @@
       desc="Leading global provider of energy storage research materials and providing other professional/universal experimental materials. "
     />
   </div>
-  <v-container class="pt-0">
-    <!-- 设备 -->
-    <div class="tw-mb-[64px]">
-      <MainTitleList
-        titleCls="text-h4"
-        title="Lab Device"
-        titleDivider
-        :list="lab.list"
-        desc="Self-built High-precision Machining Center with Powerful Design and Manufacturing Capabilities. "
-        href="/equipment"
-      />
-    </div>
-    <!-- Customized Battery -->
-    <div class="tw-mb-[64px]">
-      <MainTitleList
-        titleCls="text-h4"
-        :title="t('Customized Battery')"
-        titleDivider
-        :list="batteries"
-        href="/customize"
-        desc="200mAh~10Ah, Winding/Stacking, Unfilled/Filled Electrolyte Cells, Three-Electrode, and More. "
-      />
-    </div>
-    <!-- Testing -->
-    <div class="tw-mb-[64px]">
-      <MainTitleList
-        titleCls="text-h4"
-        titleDivider
-        :title="t('Testing')"
-        :list="tests"
-        href="/test"
-        desc="Self built testing center and signed strategic cooperation with ATL, Tsinghua and other units. "
-      />
-    </div>
-    <!-- Pack -->
-    <div class="tw-mb-[64px]">
-      <MainTitleList
-        titleDivider
-        titleCls="text-h4"
-        :cardNum="3"
-        :title="t('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. "
-      />
-    </div>
-  </v-container>
+  <!-- 设备 -->
+  <div class="bg-grey-lighten-5 tw-p-[64px]">
+    <MainTitleList
+      title="Lab Device"
+      :list="lab.list"
+      disabled
+      desc="Self-built High-precision Machining Center with Powerful Design and Manufacturing Capabilities. "
+      href="/equipment"
+    />
+  </div>
+
+  <!-- Customized Battery -->
+  <div class="tw-p-[64px]">
+    <MainTitleList
+      :title="t('Customized Battery')"
+      :list="batteries"
+      disabled
+      href="/customize"
+      desc="200mAh~10Ah, Winding/Stacking, Unfilled/Filled Electrolyte Cells, Three-Electrode, and More. "
+    />
+  </div>
+  <!-- Testing -->
+  <div class="bg-grey-lighten-5 tw-p-[64px]">
+    <MainTitleList
+      disabled
+      :title="t('Testing')"
+      :list="tests"
+      href="/test"
+      desc="Self built testing center and signed strategic cooperation with ATL, Tsinghua and other units. "
+    />
+  </div>
+  <!-- Pack -->
+  <div class="tw-p-[64px]">
+    <MainTitleList
+      :cardNum="3"
+      :title="t('Pack')"
+      href="/pack"
+      disabled
+      :list="packs"
+      desc="Focusing on energy materials/new energy storage systems/modules and other fields, mastering advanced technologies to provide high-quality services. "
+    />
+  </div>
 </template>
 <script setup lang="ts">
@@ -100,20 +95,20 @@ const materials = [
   { name: 'Low dimensional materials', imageUrl: '/home/3.svg' }
 ]
 const tests = [
-  { name: 'Electrochemical performance' },
-  { name: 'Reliability testing' },
-  { name: 'Material testing' },
-  { name: 'Calibration' }
+  { name: 'Electrochemical performance', imageUrl: '/home/8_Electrochemical_performance.svg' },
+  { name: 'Reliability testing', imageUrl: '/home/9 Reliability testing.svg' },
+  { name: 'Material testing', imageUrl: '/home/10 Material testing.svg' },
+  { name: 'Calibration', imageUrl: '/home/11 Calibration.svg' }
 ]
 const batteries = [
-  { name: 'Material evaluation' },
-  { name: 'R&D foundry' },
-  { name: 'Chemical system' },
-  { name: 'Semi product customization' }
+  { name: 'Material evaluation', imageUrl: '/home/4-Material-evaluation.png' },
+  { name: 'R&D foundry', imageUrl: '/home/5-R&D-foundry.png' },
+  { name: 'Chemical system', imageUrl: '/home/6-Chemical-system.png' },
+  { name: 'Semi product customization', imageUrl: '/home/7-Semi-product-customization.png' }
 ]
 const packs = [
-  { name: 'Power bank' },
-  { name: 'Energy storage' },
-  { name: 'low-dimensional materials' }
+  { name: 'Power bank', imageUrl: '/home/12-power-bank.png' },
+  { name: 'Energy storage', imageUrl: '/home/13-Energy-storage.png' },
+  { name: 'low-dimensional materials', imageUrl: '/home/3-Low-dimensional-materials.png' }
 ]
 </script>
@@ -8,7 +8,13 @@ import vuetify from &#39;vite-plugin-vuetify&#39;
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), vueJsx(), vuetify()],
+  plugins: [
+    vue(),
+    vueJsx(),
+    vuetify({
+      styles: { configFile: 'src/settings.scss' }
+    })
+  ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))