zhusen / kelude-outside-web · Commits

Commit e11821c18b8a96438c126f1ecda4e6eb5d444d7f

Authored by sanmu
1 parent 97d46e74

up

Inline Side-by-side
Showing 30 changed files with 603 additions and 371 deletions
dist/index.html
  View file @e11821c
... ... @@ -5,8 +5,8 @@
5 5 <link rel="icon" href="/favicon.ico">
6 6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 7 <title>Vite App</title>
8   - <script type="module" crossorigin src="/assets/index-2c017680.js"></script>
9   - <link rel="stylesheet" href="/assets/index-e124e07b.css">
  8 + <script type="module" crossorigin src="/assets/index-d9b7ab4f.js"></script>
  9 + <link rel="stylesheet" href="/assets/index-63d456ee.css">
10 10 </head>
11 11 <body>
12 12 <div id="app"></div>
... ...
public/about/1.jpg 0 → 100644
View file @e11821c

61.7 KB
public/about/2.png 0 → 100644
View file @e11821c

13 KB
public/about/3.png 0 → 100644
View file @e11821c

13.6 KB
public/about/4.png 0 → 100644
View file @e11821c

10.9 KB
public/about/5.png 0 → 100644
View file @e11821c

391 KB
public/about/6.png 0 → 100644
View file @e11821c

444 KB
public/about/7.png 0 → 100644
View file @e11821c

506 KB
public/home/10 Material testing.svg
  View file @e11821c
1 1 <?xml version="1.0" standalone="no"?>
2 2 <!DOCTYPE svg PUBLIC "-//W3C//DTDSVG1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3   -<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">
  3 +<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">
4 4 <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>
5 5 <path d="M479.063304 575.310954h49.998779v199.995118h-49.998779z" p-id="5026" fill="#1296db"></path>
6 6 <path d="M109.37233 538.936842l167.845902-95.597666 24.749396 43.44894-167.845902 95.622665z" p-id="5027" fill="#1296db"></path>
... ...
public/home/11 Calibration.svg
  View file @e11821c
1 1 <?xml version="1.0" standalone="no"?>
2 2 <!DOCTYPE svg PUBLIC "-//W3C//DTDSVG1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3   -<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">
  3 +<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">
4 4 <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>
5 5 </svg>
... ...
public/logo.jpg 0 → 100644
View file @e11821c

38.2 KB
public/testing_case/1.png renamed to public/test/1.png
View file @e11821c

365 KB
public/testing_case/2.png renamed to public/test/2.png
View file @e11821c

144 KB
public/testing_case/Mapping.png renamed to public/test/3.png
View file @e11821c

374 KB
public/testing_case/SEM.png renamed to public/test/4.png
View file @e11821c

245 KB
src/assets/main.css
  View file @e11821c
... ... @@ -3,3 +3,7 @@
3 3 @tailwind base;
4 4 @tailwind components;
5 5 @tailwind utilities;
  6 +
  7 +* {
  8 + word-break: break-all;
  9 +}
... ...
src/components/CategoryList.vue
  View file @e11821c
... ... @@ -20,9 +20,9 @@
20 20 </span>
21 21 </v-col>
22 22 </v-row>
23   - <v-row class="pa-4 ma-0 bg-grey-lighten-4 deviceType">
  23 + <v-row class="pa-4 ma-0 bg-grey-lighten-4">
24 24 <div
25   - class="tw-pr-0 tw-font-bold tw-w-[130px] tw-h-[36px] tw-leading-[64px] text-grey-darken-3"
  25 + class="tw-pr-0 tw-font-bold tw-w-[130px] tw-h-[36px] tw-leading-[36px] text-grey-darken-3"
26 26 >
27 27 DEVICE TYPE:
28 28 </div>
... ... @@ -41,7 +41,7 @@
41 41 </span>
42 42 </v-col>
43 43 </v-row>
44   - <v-row v-if="funcCategoryList.length" class="pa-4 ma-0 bg-grey-lighten-4">
  44 + <v-row v-if="funcCategoryList.length" class="pa-4 ma-0 bg-grey-lighten-4 material">
45 45 <div
46 46 class="tw-pr-0 tw-font-bold tw-w-[210px] tw-h-[36px] tw-leading-[36px] text-grey-darken-3"
47 47 >
... ... @@ -76,12 +76,6 @@ const categoryStore = useCategoryStore()
76 76 const handleCategoryClick = (item: CategoryRootType) => {
77 77 categoryStore.updateCategory(item.categoryDisplayName)
78 78 categoryStore.updateSubCategory(item.list[0].id)
79   -
80   - console.log(
81   - '%c [ ]-76',
82   - 'font-size:13px; background:pink; color:#bf2c9f;',
83   - categoryStore.selectedCategory
84   - )
85 79 }
86 80  
87 81 const handleSubCategoryClick = (value: string) => {
... ... @@ -141,9 +135,7 @@ const funcCategoryList = computed(() =&gt; {
141 135 &:hover,
142 136 &.active {
143 137 background: #1e88e5;
144   - border-top-left-radius: 4px;
145   - border-top-right-radius: 4px;
146   - height: 90%;
  138 + border-radius: 4px;
147 139 line-height: 50px;
148 140 color: #fff;
149 141 }
... ... @@ -156,7 +148,7 @@ const funcCategoryList = computed(() =&gt; {
156 148 margin-bottom: 4px;
157 149 }
158 150  
159   -.deviceType {
160   - border-bottom: 1px dashed rgb(178, 178, 178);
  151 +.material {
  152 + border-top: 1px dashed rgb(178, 178, 178);
161 153 }
162 154 </style>
... ...
src/components/ContentDescription.vue
  View file @e11821c
1 1 <template>
2   - <div :class="'text-subtitle-1 tw-text-justify ' + className">{{ content }}</div>
  2 + <div :class="'text-subtitle-1 tw-text-justify font-weight-medium ' + className">
  3 + {{ content }}
  4 + </div>
3 5 </template>
4 6  
5 7 <script setup lang="ts">
... ...
src/components/Header.vue
  View file @e11821c
1 1 <template>
2 2 <v-container>
3 3 <div class="tw-m-auto">
4   - <div class="tw-mr-[32px] tw-float-left tw-h-[64px] tw-mt-[-4px]">
5   - <img src="@/assets/logo.png" />
  4 + <div class="tw-mr-[8px] tw-float-left tw-h-[64px] tw-mt-[-4px] tw-w-[100px]">
  5 + <router-link to="/"><v-img src="/logo.jpg" /></router-link>
6 6 </div>
7 7 <div class="tw-m-auto">
8 8 <v-text-field
9 9 density="comfortable"
10   - label="请输入搜索内容"
  10 + label="Search keyword"
11 11 hide-details="auto"
12 12 variant="solo"
13 13 append-inner-icon="mdi-magnify"
  14 + @click:appendInner="handleClick"
  15 + v-model="input"
14 16 ></v-text-field>
15 17 </div>
16 18 </div>
... ... @@ -21,7 +23,8 @@
21 23 v-model="tab"
22 24 bg-color="blue-darken-1"
23 25 slider-color="grey-lighten-3"
24   - tab-slider-size="4px"
  26 + tab-slider-size="6px"
  27 + selected-class="active"
25 28 >
26 29 <v-tab :value="1" to="/"><span class="text-grey-lighten-3 tw-font-bold">Home</span> </v-tab>
27 30 <v-tab :value="2" to="/products"
... ... @@ -39,7 +42,16 @@
39 42 </template>
40 43  
41 44 <script setup lang="ts">
42   -import { ref, onMounted } from 'vue'
  45 +import { ref } from 'vue'
  46 +import { useProductListStore } from '@/stores/product_list'
  47 +
  48 +const productStore = useProductListStore()
  49 +
  50 +const input = ref()
  51 +
  52 +const handleClick = () => {
  53 + productStore.updateKeyword(input.value)
  54 +}
43 55  
44 56 const tab = ref(1)
45 57 </script>
... ... @@ -48,4 +60,10 @@ const tab = ref(1)
48 60 .tabs {
49 61 background-color: #1f88e5;
50 62 }
  63 +
  64 +.active :deep {
  65 + .v-tab__slider {
  66 + bottom: 3px;
  67 + }
  68 +}
51 69 </style>
... ...
src/components/MainTitleList.vue
  View file @e11821c
... ... @@ -17,7 +17,7 @@
17 17 <v-col v-for="(item, index) in list" :key="index" cols="12" :lg="lgCol" md="4" sm="6">
18 18 <v-hover v-slot="{ isHovering, props }" open-delay="200" :disabled="disabled">
19 19 <v-card
20   - color="light-blue-darken-2"
  20 + color="blue-darken-1"
21 21 variant="outlined"
22 22 :elevation="isHovering ? 16 : 2"
23 23 :class="{ 'on-hover': isHovering }"
... ... @@ -25,10 +25,11 @@
25 25 height="295"
26 26 width="260"
27 27 v-bind="props"
  28 + :href="item.href ? item.href : undefined"
28 29 >
29 30 <v-img :src="item.imageUrl" />
30 31 <div
31   - 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"
  32 + class="text-center bg-blue-darken-1 tw-absolute tw-bottom-0 tw-text-center tw-w-full tw-h-9 tw-leading-9"
32 33 >
33 34 {{ item.name }}
34 35 </div>
... ... @@ -42,17 +43,18 @@
42 43 <v-col v-for="(item, index) in list" :key="index">
43 44 <v-hover v-slot="{ isHovering, props }" open-delay="200" :disabled="disabled">
44 45 <v-card
45   - color="light-blue-darken-2"
  46 + color="blue-darken-1"
46 47 variant="outlined"
47 48 :elevation="isHovering ? 16 : 2"
48 49 :class="{ 'on-hover': isHovering }"
49 50 class="pt-5 mx-auto"
50 51 height="350"
51 52 v-bind="props"
  53 + :href="item.href ? item.href : undefined"
52 54 >
53 55 <v-img :src="item.imageUrl" width="250" class="text-center ma-auto" />
54 56 <div
55   - 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"
  57 + class="text-center bg-blue-darken-1 tw-absolute tw-bottom-0 tw-text-center tw-w-full tw-h-9 tw-leading-9"
56 58 >
57 59 {{ item.name }}
58 60 </div>
... ... @@ -71,7 +73,7 @@ import { computed, ref } from &#39;vue&#39;
71 73 const props = defineProps<{
72 74 title: string
73 75 desc?: string
74   - list: Category[] | { name: string; imageUrl?: string }[]
  76 + list: Category[] | { name: string; imageUrl?: string; href: string }[]
75 77 cardNum?: number
76 78 href?: string
77 79 disabled?: boolean
... ...
src/stores/product_list.ts
  View file @e11821c
... ... @@ -6,7 +6,7 @@ import type { Product, ProductImage, ProductListQuery } from &#39;@/type&#39;
6 6 export const useProductListStore = defineStore('productList', () => {
7 7 const list = ref<Product[]>([])
8 8 const productCategoryId = ref('') // 选中的类别
9   - const keywork = ref(null)
  9 + const keyword = ref()
10 10 const pageNo = ref(1)
11 11 const pageSize = ref(20)
12 12 const total = ref(0)
... ... @@ -44,15 +44,22 @@ export const useProductListStore = defineStore(&#39;productList&#39;, () =&gt; {
44 44 params.value = value
45 45 }
46 46  
  47 + const updateKeyword = (value: string) => {
  48 + console.log('%c [ value ]-48', 'font-size:13px; background:pink; color:#bf2c9f;', value)
  49 + keyword.value = value
  50 + }
  51 +
47 52 return {
48 53 pageNo,
49 54 pageSize,
50 55 total,
51 56 list,
  57 + keyword,
52 58 params,
53 59 getList,
54 60 updateCategory,
55 61 updatePageNo,
56   - updateParams
  62 + updateParams,
  63 + updateKeyword
57 64 }
58 65 })
... ...
src/type.d.ts
  View file @e11821c
... ... @@ -2,6 +2,7 @@ export interface Category {
2 2 name: string
3 3 imageUrl: string
4 4 id: string
  5 + href?: string
5 6 }
6 7  
7 8 export interface CategoryRootType {
... ...
src/views/About.vue
  View file @e11821c
1 1 <template>
2   - <v-img src="/customization_hardware/banner.png" class="tw-mb-[64px]"></v-img>
  2 + <v-img src="/banner/banner1.png" class="tw-mb-[64px]"></v-img>
3 3 <v-container>
4 4 <MainTitle title="Company Profile" />
5   - <v-row>
6   - <v-col>
7   - <v-img src=""></v-img>
  5 + <v-row class="pb-16">
  6 + <v-col cols="5">
  7 + <v-img src="/about/1.jpg"></v-img>
8 8 </v-col>
9   - <v-col>
10   - <p>1. 2015.2.11 was established in Songshan Lake High-tech Zone;</p>
11   - <p>2. Registered capital of 1000W;</p>
12   - <p>3. Main business of new energy technology development</p>
13   - <p>4. (Customized/ equipment / testing / materials / new product development, etc.);</p>
14   - <p>5. In 2017, it was approved as a national high-tech enterprise;</p>
15   - <p>6. 120+ invention patents; 100 + authorized;</p>
  9 + <v-col class="tw-leading-8">
  10 + <p><b>1. </b>2015.2.11 was established in Songshan Lake High-tech Zone;</p>
  11 + <p><b>2.</b> Registered capital of 1000W;</p>
  12 + <p><b>3.</b> Main business of new energy technology development</p>
16 13 <p>
17   - 7. The plant area is 6,000 m 2, with 70 employees (the core team is from Ningde ATL/
18   - Foxconn).
  14 + <b>4.</b>
  15 + (Customized/ equipment / testing / materials / new product development, etc.);
  16 + </p>
  17 + <p><b>5.</b> In 2017, it was approved as a national high-tech enterprise;</p>
  18 + <p><b>6.</b> 120+ invention patents; 100 + authorized;</p>
  19 + <p>
  20 + <b>7.</b> The plant area is 6,000 m 2, with 70 employees (the core team is from Ningde
  21 + ATL/ Foxconn).
19 22 </p>
20 23 </v-col>
21 24 </v-row>
... ... @@ -26,113 +29,147 @@
26 29 <v-sheet border="width-1px color-blue-darken-1">
27 30 <v-row>
28 31 <v-col>
29   - <v-card height="150">
30   - <v-card-title>Vision</v-card-title>
  32 + <div
  33 + class="tw-my-[32px] tw-border-0 tw-border-solid tw-border-r-[1px] tw-border-e-blue-300"
  34 + >
  35 + <v-card-title class="mb-4 text-center text-h4">Vision</v-card-title>
31 36 <v-card-text>
32 37 the world's top one-stop serviceprovider in the field of new energy research
33 38 </v-card-text>
34   - </v-card>
  39 + </div>
35 40 </v-col>
36 41 <v-col>
37   - <v-card height="150">
38   - <v-card-title>Vision</v-card-title>
39   - <v-card-text>
40   - the world's top one-stop serviceprovider in the field of new energy research
41   - </v-card-text>
42   - </v-card>
  42 + <div
  43 + class="tw-my-[32px] tw-border-0 tw-border-solid tw-border-r-[1px] tw-border-e-blue-300"
  44 + >
  45 + <v-card-title class="mb-4 text-center text-h4">Mission </v-card-title>
  46 + <v-card-text>Build a "industry-university-research" high-speed channel </v-card-text>
  47 + </div>
43 48 </v-col>
44 49 <v-col>
45   - <v-card height="150">
46   - <v-card-title>Values</v-card-title>
47   - <v-card-text>Build a "industry-university-research" high-speed channel</v-card-text>
48   - </v-card>
  50 + <div class="tw-my-[32px]">
  51 + <v-card-title class="mb-4 text-center text-h4">Values</v-card-title>
  52 + <v-card-text>Burn yourself and contribute to the society Scientific</v-card-text>
  53 + </div>
49 54 </v-col>
50 55 </v-row>
51 56 </v-sheet>
52 57 </v-container>
53 58 </v-sheet>
54   - <v-container>
55   - <MainTitle title="Milestone" class="tw-mt-[64px]" />
56   - <v-timeline direction="horizontal">
57   - <v-timeline-item dot-color="blue-lighten-1">
58   - <template v-slot:opposite> <strong>2015</strong> </template>
59   - <div>
60   - <p>Canrd established</p>
61   - </div>
62   - </v-timeline-item>
  59 + <v-sheet class="tw-py-[64px]">
  60 + <v-container>
  61 + <MainTitle title="Milestone" />
  62 + <v-timeline direction="horizontal">
  63 + <v-timeline-item dot-color="indigo-lighten-1" size="16">
  64 + <template v-slot:opposite>
  65 + <strong class="text-blue-darken-1 tw-text-[22px]">2015</strong></template
  66 + >
  67 + <p class="tw-text-[14px]">
  68 + <strong
  69 + >Canrd <br />
  70 + established</strong
  71 + >
  72 + </p>
  73 + </v-timeline-item>
  74 + <v-timeline-item dot-color="blue-darken-1">
  75 + <template v-slot:opposite>
  76 + <strong class="text-blue-darken-1 tw-text-[22px]">2017</strong></template
  77 + >
  78 + <div>
  79 + <p>
  80 + <strong class="tw-text-[14px]"
  81 + >National high-tech <br />
  82 + enterprise</strong
  83 + >
  84 + </p>
  85 + </div>
  86 + </v-timeline-item>
63 87  
64   - <v-timeline-item dot-color="deep-purple-accent-1">
65   - <template v-slot:opposite> <strong>2017</strong> </template>
66   - <div>
67   - <p>National high-tech enterprise</p>
68   - </div>
69   - </v-timeline-item>
  88 + <v-timeline-item dot-color="indigo-lighten-1" size="16">
  89 + <template v-slot:opposite>
  90 + <strong class="text-blue-darken-1 tw-text-[22px]">2018</strong>
  91 + </template>
  92 + <div>
  93 + <p class="tw-text-[14px]"><strong>Customers</strong></p>
  94 + <p class="tw-text-[14px]"><strong>exceed 2000+</strong></p>
  95 + </div>
  96 + </v-timeline-item>
  97 + <v-timeline-item dot-color="blue-darken-1">
  98 + <template v-slot:opposite>
  99 + <strong class="text-blue-darken-1 tw-text-[22px]">2020</strong>
  100 + </template>
70 101  
71   - <v-timeline-item dot-color="blue-lighten-1">
72   - <template v-slot:opposite> <strong>2018</strong> </template>
73   - <div>
74   - <p>Customers exceed 2000+</p>
75   - </div>
76   - </v-timeline-item>
77   - <v-timeline-item dot-color="deep-purple-accent-1">
78   - <template v-slot:opposite> <strong>2020</strong> </template>
79   - <div>
80   - <p>Customized division</p>
81   - <p>Testing division(Xia Men)</p>
82   - </div>
83   - </v-timeline-item>
84   - <v-timeline-item dot-color="blue-lighten-1">
85   - <template v-slot:opposite><strong>2021</strong> </template>
86   - <div>
87   - <p>Equipment division</p>
88   - </div>
89   - </v-timeline-item>
90   - <v-timeline-item dot-color="deep-purple-accent-1">
91   - <template v-slot:opposite> <strong>2022</strong> </template>
92   - <div>
93   - <p>R&D center(Houjie)</p>
94   - <p>Pack division</p>
95   - </div>
96   - </v-timeline-item>
97   - </v-timeline>
98   - <div class="tw-mt-[48px]"></div>
99   - <v-row>
100   - <v-col>
101   - <v-card height="100">
102   - <v-card-title>Team</v-card-title>
103   - <v-card-text
104   - >Core team members are all from ATL/Foxconn 12+working experience
105   - </v-card-text>
106   - </v-card>
107   - </v-col>
108   - <v-col>
109   - <v-card height="100">
110   - <v-card-title>Patents</v-card-title>
111   - <v-card-text>
112   - More than 120 invention patents, covering materials, design, process, equipment and so
113   - on
114   - </v-card-text>
115   - </v-card>
116   - </v-col>
117   - <v-col>
118   - <v-card height="100">
119   - <v-card-title>Hardware</v-card-title>
120   - <v-card-text>Independent battery pilot line and equipment production line</v-card-text>
121   - </v-card>
122   - </v-col>
123   - </v-row>
124   - <v-row></v-row>
125   - <ContentDescription
126   - className="tw-mb-[16px] tw-mt-[48px]"
127   - content="The combination of hardware and software creates strong research and development capabilities."
128   - />
129   - <ContentDescription
130   - className="tw-mb-[16px]"
131   - content="The invention patents cover new materials such as silicon carbon, graphene, lithium sulfur,
132   - sodium electricity and lithium metal, as well as gel process, pre-lithium process and flexible
133   - battery design."
134   - />
135   - </v-container>
  102 + <div class="tw-text-[14px]">
  103 + <p><strong>Customized division</strong></p>
  104 + <p><strong>Testing division(Xia Men)</strong></p>
  105 + </div>
  106 + </v-timeline-item>
  107 + <v-timeline-item dot-color="indigo-lighten-1" size="indig16">
  108 + <template v-slot:opposite>
  109 + <strong class="text-blue-darken-1 tw-text-[22px]">2021</strong>
  110 + </template>
  111 + <div class="tw-text-[14px]">
  112 + <p><strong>Equipment division</strong></p>
  113 + </div>
  114 + </v-timeline-item>
  115 + <v-timeline-item dot-color="blue-darken-1">
  116 + <template v-slot:opposite>
  117 + <strong class="text-blue-darken-1 tw-text-[22px]">2022</strong></template
  118 + >
  119 +
  120 + <div class="tw-text-[14px]">
  121 + <p><strong>R&D center(Houjie)</strong></p>
  122 + <p><strong>>Pack division</strong></p>
  123 + </div>
  124 + </v-timeline-item>
  125 + </v-timeline>
  126 + </v-container>
  127 + </v-sheet>
  128 + <v-sheet class="bg-grey-lighten-5 tw-pt-[64px] tw-pb-[128px]">
  129 + <v-container>
  130 + <MainTitle title="R&D Ability" />
  131 + <div class="text-body-1 font-weight-medium tw-mb-[24px] tw-max-w-[600px] tw-m-auto">
  132 + The combination of hardware and software creates strong research and development
  133 + capabilities.
  134 + </div>
  135 + <div class="text-body-1 font-weight-medium tw-mb-[64px] tw-max-w-[600px] tw-m-auto">
  136 + The invention patents cover new materials such as silicon carbon, graphene, lithium sulfur,
  137 + sodium electricity and lithium metal, as well as gel process, pre-lithium process and
  138 + flexible battery design."
  139 + </div>
  140 +
  141 + <v-row>
  142 + <v-col>
  143 + <v-card variant="outlined" color="blue-darken-1">
  144 + <v-img src="/about/5.png"></v-img>
  145 + <v-card-title class="text-grey-darken-4">Team</v-card-title>
  146 + <v-card-text class="text-grey-darken-4"
  147 + >Core team members are all from ATL/Foxconn 12+working experience
  148 + </v-card-text>
  149 + </v-card>
  150 + </v-col>
  151 + <v-col>
  152 + <v-card variant="outlined" color="blue-darken-1">
  153 + <v-img src="/about/6.png"></v-img>
  154 + <v-card-title class="text-grey-darken-4">Patents</v-card-title>
  155 + <v-card-text class="text-grey-darken-4">
  156 + More than 120 invention patents, covering materials, design, process, equipment and so
  157 + on
  158 + </v-card-text>
  159 + </v-card>
  160 + </v-col>
  161 + <v-col>
  162 + <v-card variant="outlined" color="blue-darken-1">
  163 + <v-img src="/about/7.png"></v-img>
  164 + <v-card-title class="text-grey-darken-4">Hardware</v-card-title>
  165 + <v-card-text class="text-grey-darken-4"
  166 + ><row>Independent battery pilot line and equipment production line</row></v-card-text
  167 + >
  168 + </v-card>
  169 + </v-col>
  170 + </v-row>
  171 + </v-container>
  172 + </v-sheet>
136 173 </template>
137 174  
138 175 <script setup lang="ts">
... ... @@ -140,4 +177,16 @@ import MainTitle from &#39;@/components/MainTitle.vue&#39;
140 177 import ContentDescription from '@/components/ContentDescription.vue'
141 178 </script>
142 179  
143   -<style lang="less" scoped></style>
  180 +<style lang="scss" scoped>
  181 +b {
  182 + display: inline;
  183 + font-size: 20px;
  184 + color: #1e88e5;
  185 + font-style: italic;
  186 +}
  187 +
  188 +p {
  189 + cursor: default;
  190 + font-weight: bold;
  191 +}
  192 +</style>
... ...
src/views/Customize.vue
  View file @e11821c
1 1 <template>
2   - <v-img src="/customization_hardware/banner.png"></v-img>
3   - <v-container>
  2 + <v-img src="/banner/banner1.png"></v-img>
  3 + <div class="font-weight-medium text-white tw-bg-[url('/banner/top2.png')] tw-p-[64px]">
  4 + Leading hardware support for customized battery solutions. Independent prototyping line covers
  5 + the entire process. Equipped with a soft-pack development line and a -50°C drying room to meet
  6 + various needs. Two lithium metal pouch cell preparation options provided. Strong R&amp;D
  7 + capabilities with over 10 years of experience. Resolving 100+ customized projects, serving 50+
  8 + clients. Services include material evaluation, R&amp;D contract manufacturing, new system
  9 + development, and finished/semi-finished products. Breakthroughs in high-temperature,
  10 + low-temperature, and fast-charging fields. Production and sales of high-quality lithium-ion
  11 + batteries. Choose us to meet your R&amp;D and production needs.
  12 + </div>
  13 + <div class="tw-p-[64px]">
  14 + <MainTitle title="Customization Hardware" className="tw-mb-[24px]" />
  15 + <v-divider class="tw-mb-[64px]"></v-divider>
4 16 <ContentDescription
5   - 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."
6   - />
7   - <MainTitle title="Customization Hardware" />
8   - <ContentDescription
9   - class="tw-mb-[8px]"
  17 + className="tw-mb-[64px] tw-max-w-[600px] tw-m-auto font-weight-medium"
10 18 content="Coin cell preparation line with different machine such as mixing, coating, calendaring,
11 19 cutting, assembly and testing."
12 20 />
13 21 <v-row>
14   - <v-col>
  22 + <v-col cols="5">
15 23 <v-img src="/customization_hardware/1.png"></v-img>
16 24 </v-col>
17   - <v-col>
  25 + <v-col class="2"></v-col>
  26 + <v-col cols="5">
18 27 <v-img src="/customization_hardware/2.png"></v-img>
19 28 </v-col>
20 29 </v-row>
21   - <v-divider class="tw-mt-[24px] tw-mb-[24px]"></v-divider>
22   - <div>1、Pouch cell pilot line with different humidity control requirement</div>
23   - <div>2、Dry room for other process</div>
24   - <div>3、Dry room for mixing and coating with -30℃ humidity</div>
25   - <div>4、(before electrolyte injection)with -40℃ humidity</div>
26   - <v-slide-group class="pa-4" selected-class="bg-success" show-arrows>
  30 + <v-divider class="tw-my-[64px]"></v-divider>
  31 + <div class="tw-max-w-[600px] tw-m-auto font-weight-medium tw-mb-[32px]">
  32 + <div>1、Pouch cell pilot line with different humidity control requirement</div>
  33 + <div>2、Dry room for other process</div>
  34 + <div>3、Dry room for mixing and coating with -30℃ humidity</div>
  35 + <div>4、(before electrolyte injection)with -40℃ humidity</div>
  36 + </div>
  37 + <!-- <v-slide-group class="pa-4" selected-class="bg-success" show-arrows>
27 38 <v-slide-group-item v-for="slide in slides" :key="slide">
28 39 <v-card :class="['ma-2']" width="360">
29 40 <v-img :src="slide"></v-img>
30 41 </v-card>
31 42 </v-slide-group-item>
32   - </v-slide-group>
33   - <v-divider class="tw-mt-[24px] tw-mb-[24px]"></v-divider>
  43 + </v-slide-group> -->
  44 + <v-row>
  45 + <v-col v-for="slide in slides" :key="slide"><v-img :src="slide"></v-img></v-col>
  46 + </v-row>
34 47  
35   - <div class="tw-mb-[24px]">
  48 + <v-divider class="tw-my-[64px]"></v-divider>
  49 + <div class="tw-max-w-[600px] tw-m-auto font-weight-medium tw-mb-[32px]">
36 50 <div>1、There are different capacity for mixing（5L,10L and 30L）</div>
37 51 <div>2、Dry room for high Ni cathode pouch cell preparation(-30℃ humidity)</div>
38 52 <div>
... ... @@ -45,18 +59,89 @@
45 59 <v-col><v-img src="/customization_hardware/10.png"></v-img></v-col>
46 60 <v-col><v-img src="/customization_hardware/11.png"></v-img></v-col>
47 61 </v-row>
48   - <v-divider class="tw-mt-[24px] tw-mb-[24px]"></v-divider>
  62 + </div>
  63 +
  64 + <div class="bg-grey-lighten-5 tw-p-[64px]">
  65 + <MainTitle title="Succeed Case" className="tw-mb-[64px]" />
  66 + <div class="tw-relative tw-mb-[64px]">
  67 + <div
  68 + 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"
  69 + >
  70 + customized types
  71 + </div>
  72 + <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>
  73 + </div>
  74 +
  75 + <v-row class="mb-16">
  76 + <v-col v-for="slide in slideCases" :key="slide"><v-img :src="slide"></v-img></v-col>
  77 + </v-row>
49 78  
50   - <div class="text-blue-darken-2 text-h3 tw-text-center tw-mb-8">Succeed Case</div>
51   - <div class="tw-text-center">customized types</div>
52   - <v-slide-group class="pa-4" selected-class="bg-success" show-arrows>
  79 + <!-- <v-slide-group class="pa-4" selected-class="bg-success" show-arrows>
53 80 <v-slide-group-item v-for="slide in slideCases" :key="slide">
54 81 <v-card :class="['ma-2']" width="360">
55 82 <v-img :src="slide"></v-img>
56 83 </v-card>
57 84 </v-slide-group-item>
58   - </v-slide-group>
59   - </v-container>
  85 + </v-slide-group> -->
  86 +
  87 + <div class="tw-relative tw-mb-[64px]">
  88 + <div
  89 + 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"
  90 + >
  91 + Material evaluation
  92 + </div>
  93 + <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>
  94 + </div>
  95 + <ContentDescription
  96 + className="tw-mb-[64px] tw-max-w-[600px] tw-m-auto font-weight-medium"
  97 + 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!."
  98 + />
  99 + <v-table density="compact" class="tw-mb-[64px]">
  100 + <thead>
  101 + <tr class="bg-blue-lighten-1">
  102 + <th class="text-left text-white">Cathode</th>
  103 + <th class="text-left text-white">Anode</th>
  104 + <th class="text-left text-white">Electrolyte</th>
  105 + <th class="text-left text-white">Separator</th>
  106 + <th class="text-left text-white">Conductive carbon</th>
  107 + </tr>
  108 + </thead>
  109 + <tbody>
  110 + <tr class="bg-light-blue-lighten-5">
  111 + <td>1</td>
  112 + <td>2</td>
  113 + <td>1</td>
  114 + <td>2</td>
  115 + <td>1</td>
  116 + </tr>
  117 + <tr class="bg-light-blue-lighten-5">
  118 + <td>1</td>
  119 + <td>2</td>
  120 + <td>2</td>
  121 + <td>2</td>
  122 + <td>2</td>
  123 + </tr>
  124 + </tbody>
  125 + </v-table>
  126 +
  127 + <div class="tw-relative tw-mb-[64px]">
  128 + <div
  129 + 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"
  130 + >
  131 + System development
  132 + </div>
  133 + <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>
  134 + </div>
  135 +
  136 + <ContentDescription
  137 + className="tw-mb-[64px] tw-max-w-[600px] tw-m-auto font-weight-medium"
  138 + 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."
  139 + />
  140 +
  141 + <v-row class="mb-16">
  142 + <v-col v-for="slide in slideCases" :key="slide"><v-img :src="slide"></v-img></v-col>
  143 + </v-row>
  144 + </div>
60 145 </template>
61 146  
62 147 <script setup lang="ts">
... ... @@ -83,11 +168,13 @@ const slides = [
83 168  
84 169 const slideCases = [
85 170 '/customization_case/1.png',
86   - '/customization_case/2.png'
87   - // '/customization_case/3.png',
88   - // '/customization_case/4.png',
  171 + '/customization_case/2.png',
  172 + '/customization_case/3.png',
  173 + '/customization_case/4.png'
89 174 // '/customization_case/5.png'
90 175 ]
  176 +
  177 +const systems = ['/customization_case']
91 178 </script>
92 179  
93 180 <style lang="less" scoped></style>
... ...
src/views/Equipment.vue
  View file @e11821c
1 1 <template>
2   - <v-img src="/customization_hardware/banner.png"></v-img>
3   - <v-container>
4   - <ContentDescription
5   - content="Equipment Business: With our self-built high-precision machining center, we possess robust
6   - design and manufacturing capabilities. We offer comprehensive equipment supply, production
7   - line planning, and construction services, including battery assembly lines, pouch cell testing
8   - lines, and more. Our aim is to provide complete equipment solutions that cater to the diverse
9   - needs of our clients. Expect top-quality equipment and professional services that will help
10   - you stand out in a fiercely competitive market!"
11   - />
12   - <div class="tw-mb-[96px]">
13   - <MainTitleList title="Equipment hardware" :list="equipments" />
14   - </div>
15   - <MainTitle title="Succeed Case" />
16   - <v-divider></v-divider>
17   - <div class="pb-6 tw-m-[18px] tw-mb-[32px]">
18   - <div class="text-h4 tw-text-center text-light-blue-darken-2">Coin cell</div>
19   - <v-row>
20   - <v-col cols="6">
21   - <v-img class="text-white align-end" src="/succeed_case/coin cell.png" cover />
22   - </v-col>
23   - <v-col cols="6">
24   - <div class="text-body-1 tw-text-justify tw-h-full tw-items-center tw-flex">
25   - Our coin cell production line comprises a well-established process that includes
26   - material baking, vacuum mixing, slurry filtration, electrode coating, electrode drying,
27   - electrode rolling, punching, environmental control, cell assembly, cell sealing, and
28   - formation testing. Through precise operations and advanced technology, we ensure uniform
29   - coating of positive and negative electrode materials, precise dimensions, and optimal
30   - performance. Our production line strictly adheres to quality standards, guaranteeing
31   - reliable manufacturing of pouch cells. From material preparation to final testing, our
32   - professional production line ensures outstanding performance and reliable safety,
33   - meeting the diverse needs of our customers.
34   - </div>
35   - </v-col>
36   - </v-row>
37   - </div>
38   - <v-divider></v-divider>
  2 + <v-img src="/banner/banner1.png"></v-img>
  3 + <div class="font-weight-medium text-white tw-bg-[url('/banner/top2.png')] tw-p-[64px]">
  4 + Equipment Business: With our self-built high-precision machining center, we possess robust
  5 + design and manufacturing capabilities. We offer comprehensive equipment supply, production line
  6 + planning, and construction services, including battery assembly lines, pouch cell testing lines,
  7 + and more. Our aim is to provide complete equipment solutions that cater to the diverse needs of
  8 + our clients. Expect top-quality equipment and professional services that will help you stand out
  9 + in a fiercely competitive market!
  10 + </div>
  11 + <div class="tw-p-[64px]">
  12 + <MainTitle title="Succeed Case" className="tw-mb-[64px]" />
39 13  
40   - <div class="pb-6 tw-m-[18px] tw-mb-[32px]">
41   - <div class="text-h4 tw-text-center text-light-blue-darken-2">Pouch cell pilot line</div>
  14 + <div class="tw-relative tw-mb-[64px]">
  15 + <div
  16 + 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"
  17 + >
  18 + Coin cell
  19 + </div>
  20 + <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>
  21 + </div>
  22 + <v-row class="mb-16">
  23 + <v-col cols="6">
  24 + <v-img class="text-white align-end" src="/succeed_case/coin cell.png" cover />
  25 + </v-col>
  26 + <v-col cols="6">
  27 + <div
  28 + class="font-weight-medium text-body-1 tw-text-justify tw-h-full tw-items-center tw-flex"
  29 + >
  30 + Our coin cell production line comprises a well-established process that includes material
  31 + baking, vacuum mixing, slurry filtration, electrode coating, electrode drying, electrode
  32 + rolling, punching, environmental control, cell assembly, cell sealing, and formation
  33 + testing. Through precise operations and advanced technology, we ensure uniform coating of
  34 + positive and negative electrode materials, precise dimensions, and optimal performance.
  35 + Our production line strictly adheres to quality standards, guaranteeing reliable
  36 + manufacturing of pouch cells. From material preparation to final testing, our professional
  37 + production line ensures outstanding performance and reliable safety, meeting the diverse
  38 + needs of our customers.
  39 + </div>
  40 + </v-col>
  41 + </v-row>
42 42  
43   - <v-row>
44   - <v-col cols="6">
45   - <div class="text-body-1 tw-text-justify tw-h-full tw-items-center tw-flex">
46   - Our pouch cell pilot line is a highly specialized production line that encompasses key
47   - processes such as vacuum mixing, electrode coating, electrode rolling, electrode
48   - cutting, electrode stacking, electrode welding, film forming, top-side sealing,
49   - electrolyte filling, vacuum resting, vacuum sealing, hot pressing formation, vacuum
50   - final sealing, and pouch cell assembly. Through meticulous operations and advanced
51   - technology, we ensure the consistency and reliability of the positive and negative
52   - electrodes. Each step is carefully controlled to guarantee the stability, reliability,
53   - and high performance of the cells. Our pouch cell pilot line meets industry standards
54   - and caters to the professional needs of our customers. Whether for research samples or
55   - small-scale production, we provide high-quality and highly reliable pouch cell products.
56   - </div>
57   - </v-col>
58   - <v-col cols="6">
59   - <v-img class="text-white align-end" src="/succeed_case/coin cell.png" cover />
60   - </v-col>
61   - </v-row>
  43 + <div class="tw-relative tw-mb-[64px]">
  44 + <div
  45 + 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"
  46 + >
  47 + Pouch cell pilot line
  48 + </div>
  49 + <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>
62 50 </div>
63   - <v-divider></v-divider>
  51 + <v-row class="mb-16">
  52 + <v-col cols="6">
  53 + <div
  54 + class="font-weight-medium text-body-1 tw-text-justify tw-h-full tw-items-center tw-flex"
  55 + >
  56 + Our pouch cell pilot line is a highly specialized production line that encompasses key
  57 + processes such as vacuum mixing, electrode coating, electrode rolling, electrode cutting,
  58 + electrode stacking, electrode welding, film forming, top-side sealing, electrolyte
  59 + filling, vacuum resting, vacuum sealing, hot pressing formation, vacuum final sealing, and
  60 + pouch cell assembly. Through meticulous operations and advanced technology, we ensure the
  61 + consistency and reliability of the positive and negative electrodes. Each step is
  62 + carefully controlled to guarantee the stability, reliability, and high performance of the
  63 + cells. Our pouch cell pilot line meets industry standards and caters to the professional
  64 + needs of our customers. Whether for research samples or small-scale production, we provide
  65 + high-quality and highly reliable pouch cell products.
  66 + </div>
  67 + </v-col>
  68 + <v-col cols="6">
  69 + <v-img class="text-white align-end" src="/succeed_case/coin cell.png" cover />
  70 + </v-col>
  71 + </v-row>
64 72  
65   - <div class="pb-6 tw-m-[18px] tw-mb-[32px]">
66   - <div class="text-h4 tw-text-center text-light-blue-darken-2 tw-mb-[32px]">
  73 + <div class="tw-relative tw-mb-[64px]">
  74 + <div
  75 + 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"
  76 + >
67 77 Pouch cell pilot line (200m2)
68 78 </div>
69   - <v-row class="mb-3">
70   - <v-col cols="6">
71   - <v-img
72   - class="text-white align-end"
73   - src="/succeed_case/Pouch cell pilot line (200m2).png"
74   - cover
75   - />
76   - </v-col>
77   - <v-col cols="6">
78   - <div class="text-body-1 tw-text-justify tw-h-full tw-items-center tw-flex">
79   - Our pouch cell pilot line layout has been meticulously designed, as shown in the
80   - accompanying diagram, to optimize space utilization, streamline workflow, and control
81   - temperature and humidity. This layout ensures high production efficiency, convenient
82   - operation, and precise experimental control. The equipment placement is strategically
83   - arranged, allowing easy access for operators while prioritizing safety considerations.
84   - </div>
85   - </v-col>
86   - </v-row>
87   -
88   - <v-row>
89   - <v-slide-group selected-class="bg-primary" show-arrows>
90   - <v-slide-group-item v-for="img in successCases" :key="img">
91   - <v-card color="grey-lighten-1" :class="['ma-4']" width="260">
92   - <v-img :src="img"></v-img>
93   - </v-card>
94   - </v-slide-group-item>
95   - </v-slide-group>
96   - </v-row>
  79 + <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>
97 80 </div>
  81 + <div class="text-h4 tw-text-center text-light-blue-darken-2 tw-mb-[32px]"></div>
  82 + <v-row class="mb-16">
  83 + <v-col cols="6">
  84 + <v-img
  85 + class="text-white align-end"
  86 + src="/succeed_case/Pouch cell pilot line (200m2).png"
  87 + cover
  88 + />
  89 + </v-col>
  90 + <v-col cols="6">
  91 + <div
  92 + class="font-weight-medium text-body-1 tw-text-justify tw-h-full tw-items-center tw-flex"
  93 + >
  94 + Our pouch cell pilot line layout has been meticulously designed, as shown in the
  95 + accompanying diagram, to optimize space utilization, streamline workflow, and control
  96 + temperature and humidity. This layout ensures high production efficiency, convenient
  97 + operation, and precise experimental control. The equipment placement is strategically
  98 + arranged, allowing easy access for operators while prioritizing safety considerations.
  99 + </div>
  100 + </v-col>
  101 + </v-row>
  102 +
  103 + <v-row class="mb-16">
  104 + <v-slide-group selected-class="bg-primary" show-arrows>
  105 + <v-slide-group-item v-for="img in successCases" :key="img">
  106 + <v-card color="grey-lighten-1" :class="['ma-4']" width="260">
  107 + <v-img :src="img"></v-img>
  108 + </v-card>
  109 + </v-slide-group-item>
  110 + </v-slide-group>
  111 + </v-row>
98 112 <!-- <MainTitleList title="Customized fixture" :list="fixtures" /> -->
99   - </v-container>
  113 + </div>
100 114 </template>
101 115  
102 116 <script setup lang="ts">
... ...
src/views/Home.vue
  View file @e11821c
... ... @@ -16,41 +16,37 @@
16 16 />
17 17 </div> -->
18 18 <!-- 能源材料 -->
19   - <div class="tw-p-[64px]">
  19 + <div class="tw-p-[64px] tw-px-[128px]">
20 20 <MainTitleList
21 21 :title="t('材料试剂')"
22 22 :list="materials"
23   - :disabled="true"
24 23 :responsive="true"
25 24 desc="Leading global provider of energy storage research materials and providing other professional/universal experimental materials. "
26 25 />
27 26 </div>
28 27  
29 28 <!-- 设备 -->
30   - <div class="bg-grey-lighten-5 tw-p-[64px]">
  29 + <div class="bg-grey-lighten-5 tw-p-[64px] tw-px-[128px]">
31 30 <MainTitleList
32 31 title="Lab Device"
33   - :list="lab.list"
34   - disabled
  32 + :list="lab.list.map((item) => ({ ...item, href: '/products' }))"
35 33 desc="Self-built High-precision Machining Center with Powerful Design and Manufacturing Capabilities. "
36 34 href="/equipment"
37 35 />
38 36 </div>
39 37  
40 38 <!-- Customized Battery -->
41   - <div class="tw-p-[64px]">
  39 + <div class="tw-p-[64px] tw-px-[128px]">
42 40 <MainTitleList
43 41 :title="t('Customized Battery')"
44 42 :list="batteries"
45   - disabled
46 43 href="/customize"
47 44 desc="200mAh~10Ah, Winding/Stacking, Unfilled/Filled Electrolyte Cells, Three-Electrode, and More. "
48 45 />
49 46 </div>
50 47 <!-- Testing -->
51   - <div class="bg-grey-lighten-5 tw-p-[64px]">
  48 + <div class="bg-grey-lighten-5 tw-p-[64px] tw-px-[128px]">
52 49 <MainTitleList
53   - disabled
54 50 :title="t('Testing')"
55 51 :list="tests"
56 52 href="/test"
... ... @@ -58,12 +54,11 @@
58 54 />
59 55 </div>
60 56 <!-- Pack -->
61   - <div class="tw-p-[64px]">
  57 + <div class="tw-p-[64px] tw-px-[128px] tw-pb-[128px]">
62 58 <MainTitleList
63 59 :responsive="true"
64 60 :title="t('Pack')"
65 61 href="/pack"
66   - disabled
67 62 :list="packs"
68 63 desc="Focusing on energy materials/new energy storage systems/modules and other fields, mastering advanced technologies to provide high-quality services. "
69 64 />
... ... @@ -90,25 +85,41 @@ const lab = computed(
90 85  
91 86 const strengths = [{ name: t('优势1') }, { name: t('优势2') }, { name: t('优势3') }]
92 87 const materials = [
93   - { name: 'Energy materials', imageUrl: '/home/1.jpg' },
94   - { name: 'Universal consumables', imageUrl: '/home/2-Universal-consumables.png' },
95   - { name: 'Low dimensional materials', imageUrl: '/home/3-Low-dimensional-materials.png' }
  88 + { name: 'Energy materials', imageUrl: '/home/1.jpg', href: '/products' },
  89 + {
  90 + name: 'Universal consumables',
  91 + imageUrl: '/home/2-Universal-consumables.png',
  92 + href: '/products'
  93 + },
  94 + {
  95 + name: 'Low dimensional materials',
  96 + imageUrl: '/home/3-Low-dimensional-materials.png',
  97 + href: '/products'
  98 + }
96 99 ]
97 100 const tests = [
98   - { name: 'Electrochemical performance', imageUrl: '/home/8_Electrochemical_performance.svg' },
99   - { name: 'Reliability testing', imageUrl: '/home/9 Reliability testing.svg' },
100   - { name: 'Material testing', imageUrl: '/home/10 Material testing.svg' },
101   - { name: 'Calibration', imageUrl: '/home/11 Calibration.svg' }
  101 + {
  102 + name: 'Electrochemical performance',
  103 + imageUrl: '/home/8_Electrochemical_performance.svg',
  104 + href: '/test'
  105 + },
  106 + { name: 'Reliability testing', imageUrl: '/home/9 Reliability testing.svg', href: '/test' },
  107 + { name: 'Material testing', imageUrl: '/home/10 Material testing.svg', href: '/test' },
  108 + { name: 'Calibration', imageUrl: '/home/11 Calibration.svg', href: '/test' }
102 109 ]
103 110 const batteries = [
104   - { name: 'Material evaluation', imageUrl: '/home/4-Material-evaluation.png' },
105   - { name: 'R&D foundry', imageUrl: '/home/5-R&D-foundry.png' },
106   - { name: 'Chemical system', imageUrl: '/home/6-Chemical-system.png' },
107   - { name: 'Semi product customization', imageUrl: '/home/7-Semi-product-customization.png' }
  111 + { name: 'Material evaluation', imageUrl: '/home/4-Material-evaluation.png', href: '/customize' },
  112 + { name: 'R&D foundry', imageUrl: '/home/5-R&D-foundry.png', href: '/customize' },
  113 + { name: 'Chemical system', imageUrl: '/home/6-Chemical-system.png', href: '/customize' },
  114 + {
  115 + name: 'Semi product customization',
  116 + imageUrl: '/home/7-Semi-product-customization.png',
  117 + href: '/customize'
  118 + }
108 119 ]
109 120 const packs = [
110   - { name: 'Power bank', imageUrl: '/home/12-power-bank.png' },
111   - { name: 'Energy storage', imageUrl: '/home/13-Energy-storage.png' }
  121 + { name: 'Power bank', imageUrl: '/home/12-power-bank.png', href: '/pack' },
  122 + { name: 'Energy storage', imageUrl: '/home/13-Energy-storage.png', href: '/pack' }
112 123 // { name: 'low-dimensional materials', imageUrl: '/home/3-Low-dimensional-materials.png' }
113 124 ]
114 125 </script>
... ...
src/views/Pack.vue
  View file @e11821c
1 1 <template>
2   - <v-img src="/customization_hardware/banner.png"></v-img>
3   - <v-container>
4   - <ContentDescription
5   - content="We are proud to introduce our PACK product to you. As a leader in the market application of
6   - scientific research projects, we focus on transforming scientific achievements into practical
7   - market applications. We provide a variety of cases to meet different project requirements,
8   - such as fast-charging mobile power supplies, smart flashlights, low-speed vehicles, and
9   - small-scale energy storage. We are committed to successfully applying the results of
10   - scientific research projects to the market and providing innovative solutions for our
11   - customers."
12   - />
  2 + <v-img src="/banner/banner1.png"></v-img>
  3 + <div class="font-weight-medium text-white tw-bg-[url('/banner/top2.png')] tw-p-[64px]">
  4 + We are proud to introduce our PACK product to you. As a leader in the market application of
  5 + scientific research projects, we focus on transforming scientific achievements into practical
  6 + market applications. We provide a variety of cases to meet different project requirements, such
  7 + as fast-charging mobile power supplies, smart flashlights, low-speed vehicles, and small-scale
  8 + energy storage. We are committed to successfully applying the results of scientific research
  9 + projects to the market and providing innovative solutions for our customers."
  10 + </div>
  11 + <div class="tw-pt-[64px] tw-px-[128px] tw-pb-[128px]">
13 12 <MainTitle title="Customization Hardware" className="tw-mb-[16px]" />
14 13 <v-slide-group class="pa-4 tw-w-[110%] tw-ml-[-5%] tw-mb-[32px]" center-active show-arrows>
15 14 <v-slide-group-item v-for="n in hardwares" :key="n">
... ... @@ -25,16 +24,18 @@
25 24 <v-img src="/pack_case/8.png"></v-img>
26 25 </v-col>
27 26 <v-col>
28   - <div class="text-subtitle-1 tw-text-justify tw-items-center tw-flex tw-h-full">
  27 + <div
  28 + class="text-subtitle-1 tw-text-justify tw-items-center tw-flex tw-h-full font-weight-medium"
  29 + >
29 30 Canrd helps our customer to accomplish the requirement from PET current collector to power
30 31 bank;
31 32 </div>
32 33 </v-col>
33 34 </v-row>
34   - <v-divider class="mb-8"></v-divider>
  35 + <v-divider class="my-16"></v-divider>
35 36 <v-row>
36 37 <v-col>
37   - <div class="text-body-1 tw-h-full tw-text-justify">
  38 + <div class="text-body-1 tw-h-full tw-text-justify font-weight-medium">
38 39 <p class="mb-3">
39 40 1. Canrd helps our customer to accomplish the requirement from sodium cathode to
40 41 standard car;
... ... @@ -49,7 +50,7 @@
49 50 <v-img src="/pack_case/8.png"></v-img>
50 51 </v-col>
51 52 </v-row>
52   - </v-container>
  53 + </div>
53 54 </template>
54 55  
55 56 <script setup lang="ts">
... ...
src/views/ProductDetail.vue
  View file @e11821c
1 1 <template>
2 2 <!-- <v-breadcrumbs class="pt-0" :items="['首页', '产品中心', '详情']"></v-breadcrumbs> -->
3 3 <v-container>
4   - <v-row class="ma-0">
  4 + <v-row class="mb-16 ma-0">
5 5 <v-col cols="5"
6 6 ><v-carousel class="tw-float-left" height="550" v-model="slide">
7 7 <v-carousel-item
... ... @@ -13,8 +13,8 @@
13 13 </v-carousel-item>
14 14 </v-carousel>
15 15 </v-col>
16   - <v-col>
17   - <v-card-title class="mb-10 text-h4"> {{ info.name }} </v-card-title>
  16 + <v-col cols="7">
  17 + <div class="mb-10 text-h4 font-weight-medium">{{ info.name }}</div>
18 18 <div class="tw-flex tw-flex-wrap">
19 19 <div class="tw-w-1/2">
20 20 <span class="tw-leading-[10px] tw-m-[16px]">Brand：{{ info.brandName }}</span>
... ... @@ -42,28 +42,35 @@
42 42 >
43 43 </div>
44 44 </div>
45   - <v-col>
46   - <v-table density="compact" class="table1 tw-mt-[32px]">
47   - <thead>
48   - <tr>
49   - <th class="text-left">name</th>
50   - <th class="text-left">weight</th>
51   - <th class="text-left">price</th>
52   - </tr>
53   - </thead>
54   - <tbody>
55   - <tr class="tr" v-for="item in info.ticketTypes || []" :key="item.rank">
56   - <td class="td">{{ item.rank }}</td>
57   - <td class="td">{{ item.typeName }}</td>
58   - <td class="td">{{ item.price }}</td>
59   - </tr>
60   - </tbody>
61   - </v-table>
62   - </v-col>
  45 + <v-table density="compact" class="table1 tw-mt-[32px]" v-if="info.ticketTypes?.length">
  46 + <thead>
  47 + <tr class="bg-grey-lighten-3">
  48 + <th class="text-left">Product Name / Code</th>
  49 + <th class="text-left">Specification and model</th>
  50 + <th class="text-left">Price</th>
  51 + </tr>
  52 + </thead>
  53 + <tbody>
  54 + <tr class="tr" v-for="item in info.ticketTypes || []" :key="item.rank">
  55 + <td class="td">{{ item.rank }}</td>
  56 + <td class="td">{{ item.typeName }}</td>
  57 + <!-- <td class="td">{{ item.price }}</td> -->
  58 + <td class="td">
  59 + <v-btn size="small" color="blue-darken-1"> Quotation Inquiry</v-btn>
  60 + </td>
  61 + </tr>
  62 + </tbody>
  63 + </v-table>
63 64 </v-col>
64 65 </v-row>
65   - <div>
66   - <v-tabs v-model="tab" color="blue-lighten-1" align-tabs="start">
  66 + <div class="tw-pb-[64px]">
  67 + <v-tabs
  68 + v-model="tab"
  69 + color="white"
  70 + bg-color="#eeeeee"
  71 + slider-color="blue-lighten-1"
  72 + selected-class="active"
  73 + >
67 74 <v-tab :value="1">商品介绍</v-tab>
68 75 <v-tab :value="2">规格参数</v-tab>
69 76 <!-- <v-tab :value="3">商品百科</v-tab> -->
... ... @@ -118,11 +125,15 @@ const slide = ref(0)
118 125 </script>
119 126  
120 127 <style lang="scss" scoped>
  128 +.active {
  129 + background-color: #1086e8;
  130 +}
121 131 .td,
122 132 th {
123 133 border: 1px solid #dcdcdc;
124 134 border-right: 0px;
125 135 border-bottom: 0px !important;
  136 + height: 50px !important;
126 137  
127 138 &:last-child {
128 139 border: 1px solid #dcdcdc;
... ...
src/views/ProductList.vue
  View file @e11821c
1 1 <template>
2   - <div class="tw-m-auto">
  2 + <div class="tw-m-auto tw-pb-[64px]">
3 3 <CategoryList />
4 4 <v-container class="">
5 5 <div class="tw-text-center" v-if="loading">
... ... @@ -23,7 +23,7 @@
23 23 v-bind="props"
24 24 :to="`/products/detail/${item.id}`"
25 25 >
26   - <v-img :src="item.imgList[0].url">
  26 + <v-img :src="item.imgList[0].url" height="280">
27 27 <!-- <v-expand-transition>
28 28 <div
29 29 v-if="isHovering"
... ... @@ -34,7 +34,9 @@
34 34 </div>
35 35 </v-expand-transition> -->
36 36 </v-img>
37   - <v-card-text class="tw-text-left">{{ item.name }}</v-card-text>
  37 + <v-card-text class="tw-text-left font-weight-medium title">{{
  38 + item.name
  39 + }}</v-card-text>
38 40 </v-card>
39 41 </v-hover>
40 42 </v-col>
... ... @@ -66,7 +68,7 @@
66 68 import { useProductListStore } from '@/stores/product_list'
67 69 import { useCategoryStore } from '@/stores/category'
68 70 import CategoryList from '@/components/CategoryList.vue'
69   -import { onMounted, watchEffect, computed, ref } from 'vue'
  71 +import { watchEffect, computed, ref } from 'vue'
70 72 import { isEqual } from 'lodash'
71 73  
72 74 const productStore = useProductListStore()
... ... @@ -85,6 +87,10 @@ watchEffect(async () =&gt; {
85 87 params.productFunctionId = categoryStore.selectedFuncCategory
86 88 }
87 89  
  90 + if (productStore.keyword) {
  91 + params.keyword = productStore.keyword
  92 + }
  93 +
88 94 if (categoryStore.selectedSubCategory && !isEqual(productStore.params, params)) {
89 95 loading.value = true
90 96 productStore.updateParams(params)
... ... @@ -97,3 +103,14 @@ const length = computed(() =&gt;
97 103 productStore.total ? Math.ceil(productStore.total / productStore.pageSize) : 0
98 104 )
99 105 </script>
  106 +
  107 +<style scoped>
  108 +.title {
  109 + height: 60px;
  110 + overflow: hidden;
  111 + text-overflow: ellipsis;
  112 + display: -webkit-box;
  113 + -webkit-line-clamp: 2;
  114 + -webkit-box-orient: vertical;
  115 +}
  116 +</style>
... ...
src/views/Test.vue
  View file @e11821c
1 1 <template>
2   - <v-img src="/customization_hardware/banner.png"></v-img>
3   - <v-container>
4   - <ContentDescription
5   - 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!"
6   - />
  2 + <v-img src="/banner/banner1.png"></v-img>
  3 + <div
  4 + class="font-weight-medium text-white tw-bg-[url('/banner/top2.png')] tw-p-[64px] tw-mb-[64px]"
  5 + >
  6 + We have an independent battery testing center that provides comprehensive testing services for
  7 + you! Whether it's ambient temperature, high-temperature cycling, rate testing, high and
  8 + low-temperature testing, high-temperature storage testing, or EIS/CV testing, we can meet your
  9 + needs. Our reverse analysis experimental plan covers various dimensions, including
  10 + non-destructive testing, disassembly analysis, size, capacity, internal resistance, EIS, rate,
  11 + high and low-temperature analysis. Through techniques such as capacity testing, SEM, EDS,
  12 + Mapping, CP, TG, GC-MS, ICP, we conduct in-depth reverse analysis, including elemental analysis
  13 + and morphology analysis. Finally, we prepare detailed reverse analysis reports, combining market
  14 + conditions to provide you with research and development directions. Choose us for reliable
  15 + testing and limitless innovation!
  16 + </div>
  17 + <div class="tw-px-[64px] tw-pb-[78px]">
7 18 <MainTitle title="Customization Hardware" />
8   - <ContentDescription
9   - className="tw-mb-[16px]"
10   - content="Coin cell preparation line with differentmachine such as mixing, coating, calendaring,
11   - cutting, assembly and testing."
12   - />
13 19 <v-row>
14   - <v-col>
15   - <v-img src="/customization_hardware/1.png"></v-img>
16   - </v-col>
17   - <v-col>
18   - <v-img src="/customization_hardware/2.png"></v-img>
19   - </v-col>
  20 + <v-col v-for="slide in slides" :key="slide"><v-img :src="slide"></v-img></v-col>
20 21 </v-row>
21   - <v-divider class="tw-mt-[24px] tw-mb-[24px]"></v-divider>
22   - <div class="text-subtitle-1 tw-text-justify">
23   - 1、Pouch cell pilot line with different humidity control requirement
24   - </div>
25   - <div class="text-subtitle-1 tw-text-justify">2、Dry room for other process</div>
26   - <div class="text-subtitle-1 tw-text-justify">
27   - 3、Dry room for mixing and coating with -30℃ humidity
28   - </div>
29   - <div class="text-subtitle-1 tw-text-justify">
30   - 4、(before electrolyte injection)with -40℃ humidity
31   - </div>
32   - <v-slide-group class="pa-4" selected-class="bg-success" show-arrows>
  22 + </div>
  23 + <!-- <v-slide-group class="pa-4" selected-class="bg-success" show-arrows>
33 24 <v-slide-group-item v-for="slide in slides" :key="slide">
34 25 <v-card :class="['ma-2']" width="360">
35 26 <v-img :src="slide"></v-img>
36 27 </v-card>
37 28 </v-slide-group-item>
38   - </v-slide-group>
39   - <v-divider class="tw-mt-[24px] tw-mb-[24px]"></v-divider>
40   -
41   - <div class="tw-mb-[24px]">
42   - <div class="text-subtitle-1 tw-text-justify">
43   - 1、There are different capacity for mixing（5L,10L and 30L）
44   - </div>
45   - <div class="text-subtitle-1 tw-text-justify">
46   - 2、Dry room for high Ni cathode pouch cell preparation(-30℃ humidity)
47   - </div>
48   - <div class="text-subtitle-1 tw-text-justify">
49   - 3、Different solution to prepare lithium metal pouch cell(glove box with 0.1ppm condition or
50   - -50℃ dry room)
  29 + </v-slide-group> -->
  30 + <div class="tw-p-[64px] bg-grey-lighten-5">
  31 + <MainTitle title="Succeed Case" className="tw-mb-[64px]" />
  32 + <div class="tw-relative tw-mb-[64px]">
  33 + <div
  34 + 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"
  35 + >
  36 + Reverse analysis
51 37 </div>
  38 + <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>
52 39 </div>
53   - <v-row>
54   - <v-col><v-img src="/customization_hardware/9.png"></v-img></v-col>
55   - <v-col><v-img src="/customization_hardware/10.png"></v-img></v-col>
56   - <v-col><v-img src="/customization_hardware/11.png"></v-img></v-col>
  40 + <ContentDescription
  41 + className="tw-mb-[64px] tw-max-w-[600px] tw-m-auto"
  42 + content="Reverse analysis: assist customers to analyze the polymer / organic components in mainstream power batteries"
  43 + />
  44 + <v-row class="mb-12">
  45 + <v-col v-for="slide in slides" :key="slide"><v-img :src="slide"></v-img></v-col>
57 46 </v-row>
58   - <MainTitle title="Succeed Case" className="tw-mb-[32px] tw-mt-[64px]" />
59   - <ContentDescription className="tw-mb-[16px]" content="Customized types." />
60   - <v-slide-group class="pa-0" selected-class="bg-success" show-arrows>
  47 + <div class="font-weight-medium tw-max-w-[600px] tw-m-auto">
  48 + <p>
  49 + 1. Experiment scheme: first conduct nondestructive testing (size / capacity / internal
  50 + resistance / EIS / ratio / high and low temperature, etc.), and finally conduct disassembly
  51 + analysis
  52 + </p>
  53 + <p>
  54 + 2. Implement reverse analysis: gram capacity / SEM / ED S/Mapping / CP / TG / GC-MS / ICP
  55 + and other means
  56 + </p>
  57 + <p>
  58 + 3. Write the reverse analysis report: give the customer research and development direction
  59 + according to the market situation
  60 + </p>
  61 + </div>
  62 +
  63 + <div class="tw-relative tw-my-[64px]">
  64 + <div
  65 + 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"
  66 + >
  67 + Reverse analysis result
  68 + </div>
  69 + <v-divider class="tw-absolute tw-top-[16px] tw-w-full"></v-divider>
  70 + </div>
  71 +
  72 + <v-img height="300" :src="results[0]" class="tw-mb-[64px]"></v-img>
  73 + <v-img height="340" class="tw-mb-[32px]" :src="results[1]"></v-img>
  74 + </div>
  75 + <!-- <v-slide-group class="pa-0" selected-class="bg-success" show-arrows>
61 76 <v-slide-group-item v-for="slide in slideCases" :key="slide">
62 77 <v-card :class="['ma-2']" width="360">
63 78 <v-img :src="slide"></v-img>
64 79 </v-card>
65 80 </v-slide-group-item>
66   - </v-slide-group>
67   - </v-container>
  81 + </v-slide-group> -->
68 82 </template>
69 83  
70 84 <script setup lang="ts">
... ... @@ -96,6 +110,8 @@ const slideCases = [
96 110 // '/customization_case/4.png',
97 111 // '/customization_case/5.png'
98 112 ]
  113 +
  114 +const results = ['/test/1.png', '/test/2.png']
99 115 </script>
100 116  
101 117 <style lang="less" scoped></style>
... ...