Blame view

pages/index.vue 12.5 KB
1
2
<template>
  <v-rows class="tw-w-full">
boyang authored
3
4
5
6
7
8
9
10
11
12
13
14
15
    <v-carousel
      hide-delimiter-background
      show-arrows="hover"
      height="auto"
      v-if="!isMobile()"
    >
      <v-carousel-item
        v-for="banner in banners"
        :src="banner"
        cover
        alt="canrud"
        :key="banner"
      >
16
17
      </v-carousel-item>
    </v-carousel>
boyang authored
18
19
20
21
22
23
24
25
26
27
28
29
30
    <v-carousel
      hide-delimiter-background
      show-arrows="hover"
      height="auto"
      v-if="isMobile()"
    >
      <v-carousel-item
        v-for="banner in mobileBanners"
        :src="banner"
        cover
        alt="canrud"
        :key="banner"
      >
31
32
33
      </v-carousel-item>
    </v-carousel>
  </v-rows>
boyang authored
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
  <!-- 能源材料 -->
  <div class="tw-py-8 py-sm-16">
    <v-container>
      <MainTitleListOdd
        title="Material Reagents"
        :list="materials"
        desc="Leading global provider of energy storage research materials and providing other professional/universal experimental materials. "
      />
    </v-container>
  </div>

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

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

<script setup lang="ts">
boyang authored
94
95
96
97
98
99
import MainTitleList from "../components/MainTitleList.vue";
import MainTitleListOdd from "../components/MainTitleListOdd.vue";
import { useCategoryStore } from "../stores/category";
import { computed, onMounted, reactive, ref } from "vue";
import { isMobile } from "../utils";
100
onMounted(() => {
boyang authored
101
102
103
104
105
106
  console.log(
    "%c [ onMounted ]-10",
    "font-size:13px; background:pink; color:#bf2c9f;",
    111
  );
});
107
useHead({
boyang authored
108
  title: "canrud",
109
110
  meta: [
    {
boyang authored
111
      name: "title",
112
      content:
boyang authored
113
114
115
116
117
118
119
120
        "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at contact@canrd.com or call +86 19867737979 to explore our innovative offerings. Together, let's shape a greener, brighter world!",
    },
    {
      name: "keywords",
      content:
        "科路得,canrd,canrud,Energy Storage Research,Lithium Batteries Research,Material Reagents,Lab Device,Customized Battery,Testing,Pack",
    },
    {
121
      name: "description",
122
      content:
boyang authored
123
124
125
126
127
        "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at contact@canrd.com or call +86 19867737979 to explore our innovative offerings. Together, let's shape a greener, brighter world!",
    },
  ],
  link: [{ rel: "preload", href: "/banner/banner1.jpg", as: "image" }],
});
128
129
130
131
132
133
134

// useAsyncData(async ({ app }) => {
//   console.log('%c [ app ]-70', 'font-size:13px; background:pink; color:#bf2c9f;', app)
//   app.head.title = 'canrud'
//   app.head.meta = [
//     {
//       name: 'description',
boyang authored
135
//       content: "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at
136
137
//     }]
// })
boyang authored
138
console.log(11);
139
boyang authored
140
const store = useCategoryStore();
141
142
143
144

const lab = computed(
  () =>
    store?.list?.[3] || {
boyang authored
145
146
      categoryDisplayName: "",
      list: [],
147
    }
boyang authored
148
);
149
150

const banners = [
boyang authored
151
152
153
154
155
  "/banner/banner1.jpg",
  "/banner/banner2.jpg",
  "/banner/banner3.jpg",
  "/banner/banner5.jpg",
];
156
157

const mobileBanners = [
boyang authored
158
159
160
161
  "/mobile/banner-index1.png",
  "/mobile/banner-index2.png",
  "/mobile/banner-index3.png",
];
162
163

const materials = [
boyang authored
164
  { name: "Energy materials", imageUrl: "/home/1.jpg", href: "/products" },
165
  {
boyang authored
166
167
168
    name: "Laboratory consumables",
    imageUrl: "/home/2-Universal-consumables.png",
    href: "/products",
169
170
  },
  {
boyang authored
171
172
173
174
175
    name: "Low-dimensional materials",
    imageUrl: "/home/3-Low-dimensional-materials.png",
    href: "/products",
  },
];
176
177
178

const tests = [
  {
boyang authored
179
180
181
182
183
184
185
186
    name: "Electrochemical performance",
    imageUrl: "/home/8_Electrochemical_performance.svg",
    href: "/test",
  },
  {
    name: "Reliability testing",
    imageUrl: "/home/9 Reliability testing.svg",
    href: "/test",
187
  },
boyang authored
188
189
190
191
192
193
194
  {
    name: "Material testing",
    imageUrl: "/home/10 Material testing.svg",
    href: "/test",
  },
  { name: "Calibration", imageUrl: "/home/11 Calibration.svg", href: "/test" },
];
195
196
const batteries = [
  {
boyang authored
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
    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",
  },
];
217
const packs = [
boyang authored
218
  { name: "Power bank", imageUrl: "/home/12-power-bank.png", href: "/pack" },
219
  {
boyang authored
220
221
222
223
224
225
226
227
228
229
230
    name: "Energy storage",
    imageUrl: "/home/13-Energy-storage.png",
    href: "/pack",
  },
  { name: "power tool", imageUrl: "/home/3-powertool.png", href: "/pack" },
  {
    name: "portable energy storage",
    imageUrl: "/home/4-portableenergystorage.png",
    href: "/pack",
  },
];
231
</script>
boyang authored
232
233
234
235
236
237
238
239
240
241
242
243
<style scoped>
@media screen and (min-width: 1537px) {
  .tabs {
    border-bottom: 2px solid #1f88e5;
    margin: 10px auto 100px;
    width: 85%;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .tabs {
    border-bottom: 2px solid #1f88e5;
    margin: 10px auto 20px;
244
    width: 85%;
boyang authored
245
246
  }
}
247
248
249
250
@media screen and (max-width: 1280px) {
  .tabs {
    border-bottom: 2px solid #1f88e5;
    margin: 10px auto 0px;
251
    width: 88%;
252
253
  }
}
boyang authored
254
255
256
257
258
259
260
261
262
263
264

.active {
  background-color: #1086e8;
}

@media screen and (min-width: 1537px) {
  #image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 320px;
265
    margin: 10px auto 50px;
boyang authored
266
267
268
269
270
271
272
273
    width: 80%;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  #image-container {
    display: flex;
    align-items: center;
    justify-content: center;
274
    height: 240px;
boyang authored
275
276
277
278
    margin: 10px auto 0px;
    width: 80%;
  }
}
279
280
281
282
283
284
@media screen and (max-width: 1280px) {
  #image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
285
    margin: 10px auto 0px;
286
287
288
    width: 90%;
  }
}
boyang authored
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
.image-row {
  display: flex;
  height: 305px;
}
@media screen and (min-width: 1537px) {
  .image-row {
    display: flex;
    height: 305px;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .image-row {
    display: flex;
    height: 245px;
  }
}
305
306
307
308
309
310
@media screen and (max-width: 1280px) {
  .image-row {
    display: flex;
    height: 220px;
  }
}
boyang authored
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
@media screen and (min-width: 1537px) {
  .imageTotal {
    display: inline-block;
    margin: 0 5px;
    text-align: center;
    width: 290px;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .imageTotal {
    display: inline-block;
    margin: 0 5px;
    text-align: center;
    width: 210px;
  }
}
@media screen and (min-width: 1537px) {
  .image-row img {
    width: 240px;
    height: 240px;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .image-row img {
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
    width: 180px;
    height: 180px;
  }
}

@media screen and (min-width: 1537px) {
  .image-row .image-substitute {
    width: 200px;
    height: 200px;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .image-row .image-substitute {
    width: 200px;
    height: 200px;
  }
}

@media screen and (max-width: 1280px) {
  .image-row .image-substitute {
    width: 185px;
    height: 185px;
boyang authored
357
358
  }
}
359
360
361
362
363
364
365
@media screen and (max-width: 1280px) {
  .image-row img {
    width: 160px;
    height: 160px;
    margin-left: 10px;
  }
}
boyang authored
366
367
@media screen and (min-width: 1537px) {
  .image-name {
368
369
370
371
372
    display: -webkit-box; /* Enables multi-line text handling */
    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
    overflow: hidden; /* Hides the overflowed text */
    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
boyang authored
373
374
375
376
    margin-top: 5px;
    font-size: 16px;
    width: 180px;
    color: #555;
377
    text-align: center; /* Centers the text horizontally */
boyang authored
378
379
380
381
382
    margin-left: 50px;
  }
}
@media screen and (max-width: 1536px) and (min-width: 1281px) {
  .image-name {
383
384
385
386
387
    display: -webkit-box; /* Enables multi-line text handling */
    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
    overflow: hidden; /* Hides the overflowed text */
    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
boyang authored
388
389
390
391
    margin-top: 5px;
    font-size: 16px;
    width: 180px;
    color: #555;
392
    text-align: center; /* Centers the text horizontally */
boyang authored
393
394
395
    margin-left: 10px;
  }
}
396
397
@media screen and (max-width: 1280px) {
  .image-name {
398
399
400
401
402
    display: -webkit-box; /* Enables multi-line text handling */
    -webkit-box-orient: vertical; /* Defines the vertical orientation of the box */
    -webkit-line-clamp: 3; /* Limits the text to 3 lines */
    overflow: hidden; /* Hides the overflowed text */
    text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
403
404
405
406
    margin-top: 5px;
    font-size: 16px;
    width: 180px;
    color: #555;
407
    text-align: center; /* Centers the text horizontally */
408
409
410
    margin-left: 5px;
  }
}
boyang authored
411
412
413
414
415
416
417
button .recommendButton {
  margin: 0 0px;
  cursor: pointer;
}

.recommend-left-box {
}
418
419
420
421
422
423
424
425
426
427
428
429
430
431
@media screen and (min-width: 1537px) {
  .recommend-img-left {
    width: 26px;
    height: 27px;
    margin-right: 20px;
  }
}
@media screen and (min-width: 1537px) {
  .recommend-img-right {
    width: 26px;
    height: 27px;
    margin-left: 20px;
  }
}
boyang authored
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
.recommend-img-left {
  width: 26px;
  height: 27px;
  margin-right: 30px;
}

.recommend-img-left:hover {
  cursor: pointer;
}
.recommend-right-box {
}

.recommend-img-right {
  width: 26px;
  height: 27px;
  margin-left: 30px;
}

.recommend-img-right:hover {
  cursor: pointer;
}
453
454
455
456
457
458
459
.image-grid {
  padding: 16px;
}

.v-card {
  transition: all 0.3s ease-in-out;
}
460
461
462
463
464
465
466
467
468
469
.clamp-text {
  display: -webkit-box; /* 使用弹性盒子 */
  -webkit-box-orient: vertical; /* 设置为垂直方向 */
  -webkit-line-clamp: 3; /* 限制最多显示3行 */
  overflow: hidden; /* 隐藏多余内容 */
  text-overflow: ellipsis; /* 添加省略号 */
  white-space: normal; /* 允许换行 */
  line-height: 1.5em; /* 设置每行的高度 */
  min-height: calc(3 * 1.5em); /* 确保最小高度为3行 */
}
boyang authored
470
</style>