up

sanmu
1 parent 97d46e74
Showing 30 changed files with 603 additions and 371 deletions
dist/index.html
public/about/1.jpg
public/about/2.png
public/about/3.png
public/about/4.png
public/about/5.png
public/about/6.png
public/about/7.png
public/home/10 Material testing.svg
public/home/11 Calibration.svg
public/logo.jpg
public/testing_case/1.png → public/test/1.png
public/testing_case/2.png → public/test/2.png
public/testing_case/Mapping.png → public/test/3.png
public/testing_case/SEM.png → public/test/4.png
src/assets/main.css
src/components/CategoryList.vue
src/components/ContentDescription.vue
src/components/Header.vue
src/components/MainTitleList.vue
@@ -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-2c017680.js"></script>
-    <link rel="stylesheet" href="/assets/index-e124e07b.css">
+    <script type="module" crossorigin src="/assets/index-d9b7ab4f.js"></script>
+    <link rel="stylesheet" href="/assets/index-63d456ee.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">
+<svg t="1687246905469" class="icon" viewBox="-200 100 1550 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5024" xmlns:xlink="http://www.w3.org/1999/xlink" width="190" 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>
 <?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">
+<svg t="1687246980615" class="icon" viewBox="-200 -300 1300 1300" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6119" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="190">
   <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>
@@ -3,3 +3,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+* {
+  word-break: break-all;
+}
@@ -20,9 +20,9 @@
           </span>
         </v-col>
       </v-row>
-      <v-row class="pa-4 ma-0 bg-grey-lighten-4 deviceType">
+      <v-row class="pa-4 ma-0 bg-grey-lighten-4">
         <div
-          class="tw-pr-0 tw-font-bold tw-w-[130px] tw-h-[36px] tw-leading-[64px] text-grey-darken-3"
+          class="tw-pr-0 tw-font-bold tw-w-[130px] tw-h-[36px] tw-leading-[36px] text-grey-darken-3"
         >
           DEVICE TYPE:
         </div>
@@ -41,7 +41,7 @@
           </span>
         </v-col>
       </v-row>
-      <v-row v-if="funcCategoryList.length" class="pa-4 ma-0 bg-grey-lighten-4">
+      <v-row v-if="funcCategoryList.length" class="pa-4 ma-0 bg-grey-lighten-4 material">
         <div
           class="tw-pr-0 tw-font-bold tw-w-[210px] tw-h-[36px] tw-leading-[36px] text-grey-darken-3"
         >
@@ -76,12 +76,6 @@ const categoryStore = useCategoryStore()
 const handleCategoryClick = (item: CategoryRootType) => {
   categoryStore.updateCategory(item.categoryDisplayName)
   categoryStore.updateSubCategory(item.list[0].id)
-
-  console.log(
-    '%c [  ]-76',
-    'font-size:13px; background:pink; color:#bf2c9f;',
-    categoryStore.selectedCategory
-  )
 }
 const handleSubCategoryClick = (value: string) => {
@@ -141,9 +135,7 @@ const funcCategoryList = computed(() =&gt; {
   &:hover,
   &.active {
     background: #1e88e5;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    height: 90%;
+    border-radius: 4px;
     line-height: 50px;
     color: #fff;
   }
@@ -156,7 +148,7 @@ const funcCategoryList = computed(() =&gt; {
   margin-bottom: 4px;
 }
-.deviceType {
-  border-bottom: 1px dashed rgb(178, 178, 178);
+.material {
+  border-top: 1px dashed rgb(178, 178, 178);
 }
 </style>
 <template>
-  <div :class="'text-subtitle-1  tw-text-justify ' + className">{{ content }}</div>
+  <div :class="'text-subtitle-1  tw-text-justify font-weight-medium ' + className">
+    {{ content }}
+  </div>
 </template>
 <script setup lang="ts">
 <template>
   <v-container>
     <div class="tw-m-auto">
-      <div class="tw-mr-[32px] tw-float-left tw-h-[64px] tw-mt-[-4px]">
-        <img src="@/assets/logo.png" />
+      <div class="tw-mr-[8px] tw-float-left tw-h-[64px] tw-mt-[-4px] tw-w-[100px]">
+        <router-link to="/"><v-img src="/logo.jpg" /></router-link>
       </div>
       <div class="tw-m-auto">
         <v-text-field
           density="comfortable"
-          label="请输入搜索内容"
+          label="Search keyword"
           hide-details="auto"
           variant="solo"
           append-inner-icon="mdi-magnify"
+          @click:appendInner="handleClick"
+          v-model="input"
         ></v-text-field>
       </div>
     </div>
@@ -21,7 +23,8 @@
         v-model="tab"
         bg-color="blue-darken-1"
         slider-color="grey-lighten-3"
-        tab-slider-size="4px"
+        tab-slider-size="6px"
+        selected-class="active"
       >
         <v-tab :value="1" to="/"><span class="text-grey-lighten-3 tw-font-bold">Home</span> </v-tab>
         <v-tab :value="2" to="/products"
@@ -39,7 +42,16 @@
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref } from 'vue'
+import { useProductListStore } from '@/stores/product_list'
+
+const productStore = useProductListStore()
+
+const input = ref()
+
+const handleClick = () => {
+  productStore.updateKeyword(input.value)
+}
 const tab = ref(1)
 </script>
@@ -48,4 +60,10 @@ const tab = ref(1)
 .tabs {
   background-color: #1f88e5;
 }
+
+.active :deep {
+  .v-tab__slider {
+    bottom: 3px;
+  }
+}
 </style>
@@ -17,7 +17,7 @@
       <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"
+            color="blue-darken-1"
             variant="outlined"
             :elevation="isHovering ? 16 : 2"
             :class="{ 'on-hover': isHovering }"
@@ -25,10 +25,11 @@
             height="295"
             width="260"
             v-bind="props"
+            :href="item.href ? item.href : undefined"
           >
             <v-img :src="item.imageUrl" />
             <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"
+              class="text-center bg-blue-darken-1 tw-absolute tw-bottom-0 tw-text-center tw-w-full tw-h-9 tw-leading-9"
             >
               {{ item.name }}
             </div>
@@ -42,17 +43,18 @@
       <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"
+            color="blue-darken-1"
             variant="outlined"
             :elevation="isHovering ? 16 : 2"
             :class="{ 'on-hover': isHovering }"
             class="pt-5 mx-auto"
             height="350"
             v-bind="props"
+            :href="item.href ? item.href : undefined"
           >
             <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"
+              class="text-center bg-blue-darken-1 tw-absolute tw-bottom-0 tw-text-center tw-w-full tw-h-9 tw-leading-9"
             >
               {{ item.name }}
             </div>
@@ -71,7 +73,7 @@ import { computed, ref } from &#39;vue&#39;
 const props = defineProps<{
   title: string
   desc?: string
-  list: Category[] | { name: string; imageUrl?: string }[]
+  list: Category[] | { name: string; imageUrl?: string; href: string }[]
   cardNum?: number
   href?: string
   disabled?: boolean
@@ -6,7 +6,7 @@ import type { Product, ProductImage, ProductListQuery } from &#39;@/type&#39;
 export const useProductListStore = defineStore('productList', () => {
   const list = ref<Product[]>([])
   const productCategoryId = ref('') // 选中的类别
-  const keywork = ref(null)
+  const keyword = ref()
   const pageNo = ref(1)
   const pageSize = ref(20)
   const total = ref(0)
@@ -44,15 +44,22 @@ export const useProductListStore = defineStore(&#39;productList&#39;, () =&gt; {
     params.value = value
   }
+  const updateKeyword = (value: string) => {
+    console.log('%c [ value ]-48', 'font-size:13px; background:pink; color:#bf2c9f;', value)
+    keyword.value = value
+  }
+
   return {
     pageNo,
     pageSize,
     total,
     list,
+    keyword,
     params,
     getList,
     updateCategory,
     updatePageNo,
-    updateParams
+    updateParams,
+    updateKeyword
   }
 })
@@ -2,6 +2,7 @@ export interface Category {
   name: string
   imageUrl: string
   id: string
+  href?: string
 }
 export interface CategoryRootType {
 <template>
-  <v-img src="/customization_hardware/banner.png" class="tw-mb-[64px]"></v-img>
+  <v-img src="/banner/banner1.png" class="tw-mb-[64px]"></v-img>
   <v-container>
     <MainTitle title="Company Profile" />
-    <v-row>
-      <v-col>
-        <v-img src=""></v-img>
+    <v-row class="pb-16">
+      <v-col cols="5">
+        <v-img src="/about/1.jpg"></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>
+      <v-col class="tw-leading-8">
+        <p><b>1. </b>2015.2.11 was established in Songshan Lake High-tech Zone;</p>
+        <p><b>2.</b> Registered capital of 1000W;</p>
+        <p><b>3.</b> Main business of new energy technology development</p>
         <p>
-          7. The plant area is 6,000 m 2, with 70 employees (the core team is from Ningde ATL/
-          Foxconn).
+          <b>4.</b>
+          (Customized/ equipment / testing / materials / new product development, etc.);
+        </p>
+        <p><b>5.</b> In 2017, it was approved as a national high-tech enterprise;</p>
+        <p><b>6.</b> 120+ invention patents; 100 + authorized;</p>
+        <p>
+          <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-row>
@@ -26,113 +29,147 @@
       <v-sheet border="width-1px color-blue-darken-1">
         <v-row>
           <v-col>
-            <v-card height="150">
-              <v-card-title>Vision</v-card-title>
+            <div
+              class="tw-my-[32px] tw-border-0 tw-border-solid tw-border-r-[1px] tw-border-e-blue-300"
+            >
+              <v-card-title class="mb-4 text-center text-h4">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>
+            </div>
           </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>
+            <div
+              class="tw-my-[32px] tw-border-0 tw-border-solid tw-border-r-[1px] tw-border-e-blue-300"
+            >
+              <v-card-title class="mb-4 text-center text-h4">Mission </v-card-title>
+              <v-card-text>Build a "industry-university-research" high-speed channel </v-card-text>
+            </div>
           </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>
+            <div class="tw-my-[32px]">
+              <v-card-title class="mb-4 text-center text-h4">Values</v-card-title>
+              <v-card-text>Burn yourself and contribute to the society Scientific</v-card-text>
+            </div>
           </v-col>
         </v-row>
       </v-sheet>
     </v-container>
   </v-sheet>
-  <v-container>
-    <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-sheet class="tw-py-[64px]">
+    <v-container>
+      <MainTitle title="Milestone" />
+      <v-timeline direction="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="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="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>
-      <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>
+          <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 tw-pt-[64px] tw-pb-[128px]">
+    <v-container>
+      <MainTitle title="R&D Ability" />
+      <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>
+          <v-card variant="outlined" color="blue-darken-1">
+            <v-img src="/about/5.png"></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-col>
+        <v-col>
+          <v-card variant="outlined" color="blue-darken-1">
+            <v-img src="/about/6.png"></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-col>
+        <v-col>
+          <v-card variant="outlined" color="blue-darken-1">
+            <v-img src="/about/7.png"></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-col>
+      </v-row>
+    </v-container>
+  </v-sheet>
 </template>
 <script setup lang="ts">
@@ -140,4 +177,16 @@ import MainTitle from &#39;@/components/MainTitle.vue&#39;
 import ContentDescription from '@/components/ContentDescription.vue'
 </script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped>
+b {
+  display: inline;
+  font-size: 20px;
+  color: #1e88e5;
+  font-style: italic;
+}
+
+p {
+  cursor: default;
+  font-weight: bold;
+}
+</style>
 <template>
-  <v-img src="/customization_hardware/banner.png"></v-img>
-  <v-container>
+  <v-img src="/banner/banner1.png"></v-img>
+  <div class="font-weight-medium 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&amp;D
+    capabilities with over 10 years of experience. Resolving 100+ customized projects, serving 50+
+    clients. Services include material evaluation, R&amp;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&amp;D and production needs.
+  </div>
+  <div class="tw-p-[64px]">
+    <MainTitle title="Customization Hardware" className="tw-mb-[24px]" />
+    <v-divider class="tw-mb-[64px]"></v-divider>
     <ContentDescription
-      content="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&amp;D capabilities with over 10 years of experience. Resolving 100+ customized projects, serving 50+ clients. Services include material evaluation, R&amp;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&amp;D and production needs."
-    />
-    <MainTitle title="Customization Hardware" />
-    <ContentDescription
-      class="tw-mb-[8px]"
+      className="tw-mb-[64px] tw-max-w-[600px] tw-m-auto font-weight-medium"
       content="Coin cell preparation line with different machine such as mixing, coating, calendaring,
       cutting, assembly and testing."
     />
     <v-row>
-      <v-col>
+      <v-col cols="5">
         <v-img src="/customization_hardware/1.png"></v-img>
       </v-col>
-      <v-col>
+      <v-col class="2"></v-col>
+      <v-col cols="5">
         <v-img src="/customization_hardware/2.png"></v-img>
       </v-col>
     </v-row>
-    <v-divider class="tw-mt-[24px] tw-mb-[24px]"></v-divider>
-    <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>
-    <v-slide-group class="pa-4" selected-class="bg-success" show-arrows>
+    <v-divider class="tw-my-[64px]"></v-divider>
+    <div class="tw-max-w-[600px] tw-m-auto font-weight-medium tw-mb-[32px]">
+      <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-divider class="tw-mt-[24px] tw-mb-[24px]"></v-divider>
+    </v-slide-group> -->
+    <v-row>
+      <v-col v-for="slide in slides" :key="slide"><v-img :src="slide"></v-img></v-col>
+    </v-row>
-    <div class="tw-mb-[24px]">
+    <v-divider class="tw-my-[64px]"></v-divider>
+    <div class="tw-max-w-[600px] tw-m-auto font-weight-medium tw-mb-[32px]">
       <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>
@@ -45,18 +59,89 @@
       <v-col><v-img src="/customization_hardware/10.png"></v-img></v-col>
       <v-col><v-img src="/customization_hardware/11.png"></v-img></v-col>
     </v-row>
-    <v-divider class="tw-mt-[24px] tw-mb-[24px]"></v-divider>
+  </div>
+
+  <div class="bg-grey-lighten-5 tw-p-[64px]">
+    <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"><v-img :src="slide"></v-img></v-col>
+    </v-row>
-    <div class="text-blue-darken-2 text-h3 tw-text-center tw-mb-8">Succeed Case</div>
-    <div class="tw-text-center">customized types</div>
-    <v-slide-group class="pa-4" selected-class="bg-success" show-arrows>
+    <!-- <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>
-  </v-container>
+    </v-slide-group> -->
+
+    <div class="tw-relative tw-mb-[64px]">
+      <div
+        class="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>
+    </div>
+    <ContentDescription
+      className="tw-mb-[64px] tw-max-w-[600px] tw-m-auto font-weight-medium"
+      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-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"
+      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-row>
+  </div>
 </template>
 <script setup lang="ts">
@@ -83,11 +168,13 @@ const slides = [
 const slideCases = [
   '/customization_case/1.png',
-  '/customization_case/2.png'
-  // '/customization_case/3.png',
-  // '/customization_case/4.png',
+  '/customization_case/2.png',
+  '/customization_case/3.png',
+  '/customization_case/4.png'
   // '/customization_case/5.png'
 ]
+
+const systems = ['/customization_case']
 </script>
 <style lang="less" scoped></style>
 <template>
-  <v-img src="/customization_hardware/banner.png"></v-img>
-  <v-container>
-    <ContentDescription
-      content="Equipment Business: With our self-built high-precision machining center, we possess robust
-      design and manufacturing capabilities. We offer comprehensive equipment supply, production
-      line planning, and construction services, including battery assembly lines, pouch cell testing
-      lines, and more. Our aim is to provide complete equipment solutions that cater to the diverse
-      needs of our clients. Expect top-quality equipment and professional services that will help
-      you stand out in a fiercely competitive market!"
-    />
-    <div class="tw-mb-[96px]">
-      <MainTitleList title="Equipment hardware" :list="equipments" />
-    </div>
-    <MainTitle title="Succeed Case" />
-    <v-divider></v-divider>
-    <div class="pb-6 tw-m-[18px] tw-mb-[32px]">
-      <div class="text-h4 tw-text-center text-light-blue-darken-2">Coin cell</div>
-      <v-row>
-        <v-col cols="6">
-          <v-img class="text-white align-end" src="/succeed_case/coin cell.png" cover />
-        </v-col>
-        <v-col cols="6">
-          <div class="text-body-1 tw-text-justify tw-h-full tw-items-center tw-flex">
-            Our coin cell production line comprises a well-established process that includes
-            material baking, vacuum mixing, slurry filtration, electrode coating, electrode drying,
-            electrode rolling, punching, environmental control, cell assembly, cell sealing, and
-            formation testing. Through precise operations and advanced technology, we ensure uniform
-            coating of positive and negative electrode materials, precise dimensions, and optimal
-            performance. Our production line strictly adheres to quality standards, guaranteeing
-            reliable manufacturing of pouch cells. From material preparation to final testing, our
-            professional production line ensures outstanding performance and reliable safety,
-            meeting the diverse needs of our customers.
-          </div>
-        </v-col>
-      </v-row>
-    </div>
-    <v-divider></v-divider>
+  <v-img src="/banner/banner1.png"></v-img>
+  <div class="font-weight-medium text-white tw-bg-[url('/banner/top2.png')] tw-p-[64px]">
+    Equipment Business: With our self-built high-precision machining center, we possess robust
+    design and manufacturing capabilities. We offer comprehensive equipment supply, production line
+    planning, and construction services, including battery assembly lines, pouch cell testing lines,
+    and more. Our aim is to provide complete equipment solutions that cater to the diverse needs of
+    our clients. Expect top-quality equipment and professional services that will help you stand out
+    in a fiercely competitive market!
+  </div>
+  <div class="tw-p-[64px]">
+    <MainTitle title="Succeed Case" className="tw-mb-[64px]" />
-    <div class="pb-6 tw-m-[18px] tw-mb-[32px]">
-      <div class="text-h4 tw-text-center text-light-blue-darken-2">Pouch cell pilot line</div>
+    <div class="tw-relative tw-mb-[64px]">
+      <div
+        class="tw-w-[140px] tw-text-center bg-blue-darken-1 tw-rounded-[4px] tw-m-auto tw-text-[20px] tw-font-medium tw-relative tw-z-10"
+      >
+        Coin cell
+      </div>
+      <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>
+    </div>
+    <v-row class="mb-16">
+      <v-col cols="6">
+        <v-img class="text-white align-end" src="/succeed_case/coin cell.png" cover />
+      </v-col>
+      <v-col cols="6">
+        <div
+          class="font-weight-medium text-body-1 tw-text-justify tw-h-full tw-items-center tw-flex"
+        >
+          Our coin cell production line comprises a well-established process that includes material
+          baking, vacuum mixing, slurry filtration, electrode coating, electrode drying, electrode
+          rolling, punching, environmental control, cell assembly, cell sealing, and formation
+          testing. Through precise operations and advanced technology, we ensure uniform coating of
+          positive and negative electrode materials, precise dimensions, and optimal performance.
+          Our production line strictly adheres to quality standards, guaranteeing reliable
+          manufacturing of pouch cells. From material preparation to final testing, our professional
+          production line ensures outstanding performance and reliable safety, meeting the diverse
+          needs of our customers.
+        </div>
+      </v-col>
+    </v-row>
-      <v-row>
-        <v-col cols="6">
-          <div class="text-body-1 tw-text-justify tw-h-full tw-items-center tw-flex">
-            Our pouch cell pilot line is a highly specialized production line that encompasses key
-            processes such as vacuum mixing, electrode coating, electrode rolling, electrode
-            cutting, electrode stacking, electrode welding, film forming, top-side sealing,
-            electrolyte filling, vacuum resting, vacuum sealing, hot pressing formation, vacuum
-            final sealing, and pouch cell assembly. Through meticulous operations and advanced
-            technology, we ensure the consistency and reliability of the positive and negative
-            electrodes. Each step is carefully controlled to guarantee the stability, reliability,
-            and high performance of the cells. Our pouch cell pilot line meets industry standards
-            and caters to the professional needs of our customers. Whether for research samples or
-            small-scale production, we provide high-quality and highly reliable pouch cell products.
-          </div>
-        </v-col>
-        <v-col cols="6">
-          <v-img class="text-white align-end" src="/succeed_case/coin cell.png" cover />
-        </v-col>
-      </v-row>
+    <div class="tw-relative tw-mb-[64px]">
+      <div
+        class="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"
+      >
+        Pouch cell pilot line
+      </div>
+      <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>
     </div>
-    <v-divider></v-divider>
+    <v-row class="mb-16">
+      <v-col cols="6">
+        <div
+          class="font-weight-medium text-body-1 tw-text-justify tw-h-full tw-items-center tw-flex"
+        >
+          Our pouch cell pilot line is a highly specialized production line that encompasses key
+          processes such as vacuum mixing, electrode coating, electrode rolling, electrode cutting,
+          electrode stacking, electrode welding, film forming, top-side sealing, electrolyte
+          filling, vacuum resting, vacuum sealing, hot pressing formation, vacuum final sealing, and
+          pouch cell assembly. Through meticulous operations and advanced technology, we ensure the
+          consistency and reliability of the positive and negative electrodes. Each step is
+          carefully controlled to guarantee the stability, reliability, and high performance of the
+          cells. Our pouch cell pilot line meets industry standards and caters to the professional
+          needs of our customers. Whether for research samples or small-scale production, we provide
+          high-quality and highly reliable pouch cell products.
+        </div>
+      </v-col>
+      <v-col cols="6">
+        <v-img class="text-white align-end" src="/succeed_case/coin cell.png" cover />
+      </v-col>
+    </v-row>
-    <div class="pb-6 tw-m-[18px] tw-mb-[32px]">
-      <div class="text-h4 tw-text-center text-light-blue-darken-2 tw-mb-[32px]">
+    <div class="tw-relative tw-mb-[64px]">
+      <div
+        class="tw-w-[300px] tw-text-center bg-blue-darken-1 tw-rounded-[4px] tw-m-auto tw-text-[20px] tw-font-medium tw-relative tw-z-10"
+      >
         Pouch cell pilot line (200m2)
       </div>
-      <v-row class="mb-3">
-        <v-col cols="6">
-          <v-img
-            class="text-white align-end"
-            src="/succeed_case/Pouch cell pilot line (200m2).png"
-            cover
-          />
-        </v-col>
-        <v-col cols="6">
-          <div class="text-body-1 tw-text-justify tw-h-full tw-items-center tw-flex">
-            Our pouch cell pilot line layout has been meticulously designed, as shown in the
-            accompanying diagram, to optimize space utilization, streamline workflow, and control
-            temperature and humidity. This layout ensures high production efficiency, convenient
-            operation, and precise experimental control. The equipment placement is strategically
-            arranged, allowing easy access for operators while prioritizing safety considerations.
-          </div>
-        </v-col>
-      </v-row>
-
-      <v-row>
-        <v-slide-group selected-class="bg-primary" show-arrows>
-          <v-slide-group-item v-for="img in successCases" :key="img">
-            <v-card color="grey-lighten-1" :class="['ma-4']" width="260">
-              <v-img :src="img"></v-img>
-            </v-card>
-          </v-slide-group-item>
-        </v-slide-group>
-      </v-row>
+      <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>
     </div>
+    <div class="text-h4 tw-text-center text-light-blue-darken-2 tw-mb-[32px]"></div>
+    <v-row class="mb-16">
+      <v-col cols="6">
+        <v-img
+          class="text-white align-end"
+          src="/succeed_case/Pouch cell pilot line (200m2).png"
+          cover
+        />
+      </v-col>
+      <v-col cols="6">
+        <div
+          class="font-weight-medium text-body-1 tw-text-justify tw-h-full tw-items-center tw-flex"
+        >
+          Our pouch cell pilot line layout has been meticulously designed, as shown in the
+          accompanying diagram, to optimize space utilization, streamline workflow, and control
+          temperature and humidity. This layout ensures high production efficiency, convenient
+          operation, and precise experimental control. The equipment placement is strategically
+          arranged, allowing easy access for operators while prioritizing safety considerations.
+        </div>
+      </v-col>
+    </v-row>
+
+    <v-row class="mb-16">
+      <v-slide-group selected-class="bg-primary" show-arrows>
+        <v-slide-group-item v-for="img in successCases" :key="img">
+          <v-card color="grey-lighten-1" :class="['ma-4']" width="260">
+            <v-img :src="img"></v-img>
+          </v-card>
+        </v-slide-group-item>
+      </v-slide-group>
+    </v-row>
     <!-- <MainTitleList title="Customized fixture" :list="fixtures" /> -->
-  </v-container>
+  </div>
 </template>
 <script setup lang="ts">
@@ -16,41 +16,37 @@
       />
     </div> -->
   <!-- 能源材料 -->
-  <div class="tw-p-[64px]">
+  <div class="tw-p-[64px] tw-px-[128px]">
     <MainTitleList
       :title="t('材料试剂')"
       :list="materials"
-      :disabled="true"
       :responsive="true"
       desc="Leading global provider of energy storage research materials and providing other professional/universal experimental materials. "
     />
   </div>
   <!-- 设备 -->
-  <div class="bg-grey-lighten-5 tw-p-[64px]">
+  <div class="bg-grey-lighten-5 tw-p-[64px] tw-px-[128px]">
     <MainTitleList
       title="Lab Device"
-      :list="lab.list"
-      disabled
+      :list="lab.list.map((item) => ({ ...item, href: '/products' }))"
       desc="Self-built High-precision Machining Center with Powerful Design and Manufacturing Capabilities. "
       href="/equipment"
     />
   </div>
   <!-- Customized Battery -->
-  <div class="tw-p-[64px]">
+  <div class="tw-p-[64px] tw-px-[128px]">
     <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]">
+  <div class="bg-grey-lighten-5 tw-p-[64px] tw-px-[128px]">
     <MainTitleList
-      disabled
       :title="t('Testing')"
       :list="tests"
       href="/test"
@@ -58,12 +54,11 @@
     />
   </div>
   <!-- Pack -->
-  <div class="tw-p-[64px]">
+  <div class="tw-p-[64px] tw-px-[128px] tw-pb-[128px]">
     <MainTitleList
       :responsive="true"
       :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. "
     />
@@ -90,25 +85,41 @@ const lab = computed(
 const strengths = [{ name: t('优势1') }, { name: t('优势2') }, { name: t('优势3') }]
 const materials = [
-  { name: 'Energy materials', imageUrl: '/home/1.jpg' },
-  { name: 'Universal consumables', imageUrl: '/home/2-Universal-consumables.png' },
-  { name: 'Low dimensional materials', imageUrl: '/home/3-Low-dimensional-materials.png' }
+  { name: 'Energy materials', imageUrl: '/home/1.jpg', href: '/products' },
+  {
+    name: 'Universal 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' },
-  { 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' }
+  {
+    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' },
-  { 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' }
+  { 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' },
-  { name: 'Energy storage', imageUrl: '/home/13-Energy-storage.png' }
+  { name: 'Power bank', imageUrl: '/home/12-power-bank.png', href: '/pack' },
+  { name: 'Energy storage', imageUrl: '/home/13-Energy-storage.png', href: '/pack' }
   // { name: 'low-dimensional materials', imageUrl: '/home/3-Low-dimensional-materials.png' }
 ]
 </script>
 <template>
-  <v-img src="/customization_hardware/banner.png"></v-img>
-  <v-container>
-    <ContentDescription
-      content="We are proud to introduce our PACK product to you. As a leader in the market application of
-      scientific research projects, we focus on transforming scientific achievements into practical
-      market applications. We provide a variety of cases to meet different project requirements,
-      such as fast-charging mobile power supplies, smart flashlights, low-speed vehicles, and
-      small-scale energy storage. We are committed to successfully applying the results of
-      scientific research projects to the market and providing innovative solutions for our
-      customers."
-    />
+  <v-img src="/banner/banner1.png"></v-img>
+  <div class="font-weight-medium text-white tw-bg-[url('/banner/top2.png')] tw-p-[64px]">
+    We are proud to introduce our PACK product to you. As a leader in the market application of
+    scientific research projects, we focus on transforming scientific achievements into practical
+    market applications. We provide a variety of cases to meet different project requirements, such
+    as fast-charging mobile power supplies, smart flashlights, low-speed vehicles, and small-scale
+    energy storage. We are committed to successfully applying the results of scientific research
+    projects to the market and providing innovative solutions for our customers."
+  </div>
+  <div class="tw-pt-[64px] tw-px-[128px] tw-pb-[128px]">
     <MainTitle title="Customization Hardware" className="tw-mb-[16px]" />
     <v-slide-group class="pa-4 tw-w-[110%] tw-ml-[-5%] tw-mb-[32px]" center-active show-arrows>
       <v-slide-group-item v-for="n in hardwares" :key="n">
@@ -25,16 +24,18 @@
         <v-img src="/pack_case/8.png"></v-img>
       </v-col>
       <v-col>
-        <div class="text-subtitle-1 tw-text-justify tw-items-center tw-flex tw-h-full">
+        <div
+          class="text-subtitle-1 tw-text-justify tw-items-center tw-flex tw-h-full font-weight-medium"
+        >
           Canrd helps our customer to accomplish the requirement from PET current collector to power
           bank;
         </div>
       </v-col>
     </v-row>
-    <v-divider class="mb-8"></v-divider>
+    <v-divider class="my-16"></v-divider>
     <v-row>
       <v-col>
-        <div class="text-body-1 tw-h-full tw-text-justify">
+        <div class="text-body-1 tw-h-full tw-text-justify font-weight-medium">
           <p class="mb-3">
             1. Canrd helps our customer to accomplish the requirement from sodium cathode to
             standard car;
@@ -49,7 +50,7 @@
         <v-img src="/pack_case/8.png"></v-img>
       </v-col>
     </v-row>
-  </v-container>
+  </div>
 </template>
 <script setup lang="ts">
 <template>
   <!-- <v-breadcrumbs class="pt-0" :items="['首页', '产品中心', '详情']"></v-breadcrumbs> -->
   <v-container>
-    <v-row class="ma-0">
+    <v-row class="mb-16 ma-0">
       <v-col cols="5"
         ><v-carousel class="tw-float-left" height="550" v-model="slide">
           <v-carousel-item
@@ -13,8 +13,8 @@
           </v-carousel-item>
         </v-carousel>
       </v-col>
-      <v-col>
-        <v-card-title class="mb-10 text-h4"> {{ info.name }} </v-card-title>
+      <v-col cols="7">
+        <div class="mb-10 text-h4 font-weight-medium">{{ info.name }}</div>
         <div class="tw-flex tw-flex-wrap">
           <div class="tw-w-1/2">
             <span class="tw-leading-[10px] tw-m-[16px]">Brand：{{ info.brandName }}</span>
@@ -42,28 +42,35 @@
             >
           </div>
         </div>
-        <v-col>
-          <v-table density="compact" class="table1 tw-mt-[32px]">
-            <thead>
-              <tr>
-                <th class="text-left">name</th>
-                <th class="text-left">weight</th>
-                <th class="text-left">price</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr class="tr" v-for="item in info.ticketTypes || []" :key="item.rank">
-                <td class="td">{{ item.rank }}</td>
-                <td class="td">{{ item.typeName }}</td>
-                <td class="td">{{ item.price }}</td>
-              </tr>
-            </tbody>
-          </v-table>
-        </v-col>
+        <v-table density="compact" class="table1 tw-mt-[32px]" v-if="info.ticketTypes?.length">
+          <thead>
+            <tr class="bg-grey-lighten-3">
+              <th class="text-left">Product Name / Code</th>
+              <th class="text-left">Specification and model</th>
+              <th class="text-left">Price</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr class="tr" v-for="item in info.ticketTypes || []" :key="item.rank">
+              <td class="td">{{ item.rank }}</td>
+              <td class="td">{{ item.typeName }}</td>
+              <!-- <td class="td">{{ item.price }}</td> -->
+              <td class="td">
+                <v-btn size="small" color="blue-darken-1"> Quotation Inquiry</v-btn>
+              </td>
+            </tr>
+          </tbody>
+        </v-table>
       </v-col>
     </v-row>
-    <div>
-      <v-tabs v-model="tab" color="blue-lighten-1" align-tabs="start">
+    <div class="tw-pb-[64px]">
+      <v-tabs
+        v-model="tab"
+        color="white"
+        bg-color="#eeeeee"
+        slider-color="blue-lighten-1"
+        selected-class="active"
+      >
         <v-tab :value="1">商品介绍</v-tab>
         <v-tab :value="2">规格参数</v-tab>
         <!-- <v-tab :value="3">商品百科</v-tab> -->
@@ -118,11 +125,15 @@ const slide = ref(0)
 </script>
 <style lang="scss" scoped>
+.active {
+  background-color: #1086e8;
+}
 .td,
 th {
   border: 1px solid #dcdcdc;
   border-right: 0px;
   border-bottom: 0px !important;
+  height: 50px !important;
   &:last-child {
     border: 1px solid #dcdcdc;
 <template>
-  <div class="tw-m-auto">
+  <div class="tw-m-auto tw-pb-[64px]">
     <CategoryList />
     <v-container class="">
       <div class="tw-text-center" v-if="loading">
@@ -23,7 +23,7 @@
                 v-bind="props"
                 :to="`/products/detail/${item.id}`"
               >
-                <v-img :src="item.imgList[0].url">
+                <v-img :src="item.imgList[0].url" height="280">
                   <!-- <v-expand-transition>
                     <div
                       v-if="isHovering"
@@ -34,7 +34,9 @@
                     </div>
                   </v-expand-transition> -->
                 </v-img>
-                <v-card-text class="tw-text-left">{{ item.name }}</v-card-text>
+                <v-card-text class="tw-text-left font-weight-medium title">{{
+                  item.name
+                }}</v-card-text>
               </v-card>
             </v-hover>
           </v-col>
@@ -66,7 +68,7 @@
 import { useProductListStore } from '@/stores/product_list'
 import { useCategoryStore } from '@/stores/category'
 import CategoryList from '@/components/CategoryList.vue'
-import { onMounted, watchEffect, computed, ref } from 'vue'
+import { watchEffect, computed, ref } from 'vue'
 import { isEqual } from 'lodash'
 const productStore = useProductListStore()
@@ -85,6 +87,10 @@ watchEffect(async () =&gt; {
     params.productFunctionId = categoryStore.selectedFuncCategory
   }
+  if (productStore.keyword) {
+    params.keyword = productStore.keyword
+  }
+
   if (categoryStore.selectedSubCategory && !isEqual(productStore.params, params)) {
     loading.value = true
     productStore.updateParams(params)
@@ -97,3 +103,14 @@ const length = computed(() =&gt;
   productStore.total ? Math.ceil(productStore.total / productStore.pageSize) : 0
 )
 </script>
+
+<style scoped>
+.title {
+  height: 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+</style>
 <template>
-  <v-img src="/customization_hardware/banner.png"></v-img>
-  <v-container>
-    <ContentDescription
-      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!"
-    />
+  <v-img src="/banner/banner1.png"></v-img>
+  <div
+    class="font-weight-medium text-white tw-bg-[url('/banner/top2.png')] tw-p-[64px] tw-mb-[64px]"
+  >
+    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="tw-px-[64px] tw-pb-[78px]">
     <MainTitle title="Customization Hardware" />
-    <ContentDescription
-      className="tw-mb-[16px]"
-      content="Coin cell preparation line with differentmachine such as mixing, coating, calendaring,
-      cutting, assembly and testing."
-    />
     <v-row>
-      <v-col>
-        <v-img src="/customization_hardware/1.png"></v-img>
-      </v-col>
-      <v-col>
-        <v-img src="/customization_hardware/2.png"></v-img>
-      </v-col>
+      <v-col v-for="slide in slides" :key="slide"><v-img :src="slide"></v-img></v-col>
     </v-row>
-    <v-divider class="tw-mt-[24px] tw-mb-[24px]"></v-divider>
-    <div class="text-subtitle-1 tw-text-justify">
-      1、Pouch cell pilot line with different humidity control requirement
-    </div>
-    <div class="text-subtitle-1 tw-text-justify">2、Dry room for other process</div>
-    <div class="text-subtitle-1 tw-text-justify">
-      3、Dry room for mixing and coating with -30℃ humidity
-    </div>
-    <div class="text-subtitle-1 tw-text-justify">
-      4、(before electrolyte injection)with -40℃ humidity
-    </div>
-    <v-slide-group class="pa-4" selected-class="bg-success" show-arrows>
+  </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-divider class="tw-mt-[24px] tw-mb-[24px]"></v-divider>
-
-    <div class="tw-mb-[24px]">
-      <div class="text-subtitle-1 tw-text-justify">
-        1、There are different capacity for mixing（5L,10L and 30L）
-      </div>
-      <div class="text-subtitle-1 tw-text-justify">
-        2、Dry room for high Ni cathode pouch cell preparation(-30℃ humidity)
-      </div>
-      <div class="text-subtitle-1 tw-text-justify">
-        3、Different solution to prepare lithium metal pouch cell(glove box with 0.1ppm condition or
-        -50℃ dry room)
+    </v-slide-group> -->
+  <div class="tw-p-[64px] bg-grey-lighten-5">
+    <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"
+      >
+        Reverse analysis
       </div>
+      <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>
     </div>
-    <v-row>
-      <v-col><v-img src="/customization_hardware/9.png"></v-img></v-col>
-      <v-col><v-img src="/customization_hardware/10.png"></v-img></v-col>
-      <v-col><v-img src="/customization_hardware/11.png"></v-img></v-col>
+    <ContentDescription
+      className="tw-mb-[64px] tw-max-w-[600px] tw-m-auto"
+      content="Reverse analysis: assist customers to analyze the polymer / organic components in mainstream power batteries"
+    />
+    <v-row class="mb-12">
+      <v-col v-for="slide in slides" :key="slide"><v-img :src="slide"></v-img></v-col>
     </v-row>
-    <MainTitle title="Succeed Case" className="tw-mb-[32px] tw-mt-[64px]" />
-    <ContentDescription className="tw-mb-[16px]" content="Customized types." />
-    <v-slide-group class="pa-0" selected-class="bg-success" show-arrows>
+    <div class="font-weight-medium tw-max-w-[600px] tw-m-auto">
+      <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="tw-relative tw-my-[64px]">
+      <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 tw-z-10"
+      >
+        Reverse analysis result
+      </div>
+      <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>
+    </div>
+
+    <v-img height="300" :src="results[0]" class="tw-mb-[64px]"></v-img>
+    <v-img height="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>
-  </v-container>
+    </v-slide-group> -->
 </template>
 <script setup lang="ts">
@@ -96,6 +110,8 @@ const slideCases = [
   // '/customization_case/4.png',
   // '/customization_case/5.png'
 ]
+
+const results = ['/test/1.png', '/test/2.png']
 </script>
 <style lang="less" scoped></style>