compute.vue
4.57 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<template>
<div class="slac-box" id="slacBox">
<div class="top-nav">
<div v-for="(item, index) in navList" :key="index" class="nav-item">
<div
:class="[selNavIndex === index ? 'item-context-sel' : 'item-context']"
@click="selNavIndex = index"
>
{{ item }}
</div>
</div>
</div>
<EnergyDensityCalculator v-if="selNavIndex == 0"></EnergyDensityCalculator>
</div>
<SideBar></SideBar>
</template>
<script setup>
import EnergyDensityCalculator from "~/components/EnergyDensityCalculator.vue";
const navList = ["Energy Density Calculator"];
const selNavIndex = ref(0);
useHead({
title: `${navList[selNavIndex.value]} - 科路得`,
meta: [
{
hid: "description",
name: "description",
content: `科路得,Guangdong Canrd New Energy Technology Co.,Ltd.，即“助您科研之路势在必得”的缩写，是全球最全的储能研究领域材料供应平台；具体提供扣式电池、锂离子电池、超级电容器、锂硫电池、燃料电池、锂空气电池及钠离子电池等领域研究用材料及相关领域设备、技术服务、电池材料中式性能评估等；为您及您的团队提供专业化、全方位的一站式储能领域研究服务。`,
},
{
hid: "keywords",
name: "keywords",
content: `科路得,科路得官网,科路得商城,科路得锂片,科路得电解液,科路得电池壳`,
},
{
hid: "og:title",
property: "og:title",
content: `${navList[selNavIndex.value]} - 科路得`,
},
{
hid: "og:description",
property: "og:description",
content: `科路得,Guangdong Canrd New Energy Technology Co.,Ltd.，即“助您科研之路势在必得”的缩写，是全球最全的储能研究领域材料供应平台；具体提供扣式电池、锂离子电池、超级电容器、锂硫电池、燃料电池、锂空气电池及钠离子电池等领域研究用材料及相关领域设备、技术服务、电池材料中式性能评估等；为您及您的团队提供专业化、全方位的一站式储能领域研究服务。`,
},
],
});
watch(
() => selNavIndex.value,
(newValue) => {
useHead({
title: `${navList[selNavIndex.value]} - 科路得`,
meta: [
{
hid: "description",
name: "description",
content: `科路得,Guangdong Canrd New Energy Technology Co.,Ltd.，即“助您科研之路势在必得”的缩写，是全球最全的储能研究领域材料供应平台；具体提供扣式电池、锂离子电池、超级电容器、锂硫电池、燃料电池、锂空气电池及钠离子电池等领域研究用材料及相关领域设备、技术服务、电池材料中式性能评估等；为您及您的团队提供专业化、全方位的一站式储能领域研究服务。`,
},
{
hid: "keywords",
name: "keywords",
content: `科路得,科路得官网,科路得商城,科路得锂片,科路得电解液,科路得电池壳`,
},
{
hid: "og:title",
property: "og:title",
content: `${navList[selNavIndex.value]} - 科路得`,
},
{
hid: "og:description",
property: "og:description",
content: `科路得,Guangdong Canrd New Energy Technology Co.,Ltd.，即“助您科研之路势在必得”的缩写，是全球最全的储能研究领域材料供应平台；具体提供扣式电池、锂离子电池、超级电容器、锂硫电池、燃料电池、锂空气电池及钠离子电池等领域研究用材料及相关领域设备、技术服务、电池材料中式性能评估等；为您及您的团队提供专业化、全方位的一站式储能领域研究服务。`,
},
],
});
}
);
</script>
<style scoped>
.top-nav {
height: 72px;
background-color: #ffffff;
margin-top: 10px;
border-radius: 5px;
display: flex;
align-items: flex-end;
}
.nav-item {
display: flex;
justify-content: center;
height: 35px;
padding: 0px 45px;
font-size: 17px;
color: #222222;
font-weight: 600;
/* border: 2px solid transparent #4f9fdd; */
}
.nav-item:last-child {
padding: 0px 0px;
}
.item-context {
border-bottom: 2px solid transparent;
color: #646464;
}
.item-context-sel {
border-bottom: 3px solid #4f9fdd;
}
.item-context:hover {
cursor: pointer;
}
.item-context-sel:hover {
cursor: pointer;
}
@media screen and (min-width: 0px) {
.slac-box {
margin-bottom: 10px;
/* min-width: 1258.67px; */
margin: 0 auto;
min-width: 1200px;
max-width: 1200px;
}
}
</style>