ike-weblca-html 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.ts +1 -0
- package/package.json +5 -2
- package/src/IkeWebFooter.ts +333 -0
- package/src/IkeWebHeader.ts +170 -0
- package/MyComponent.ts +0 -20
package/index.ts
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "./src/IkeWebHeader"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ike-weblca-html",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"description": "weblca-html-header&footer",
|
|
5
5
|
"main": "index.ts",
|
|
6
6
|
"scripts": {
|
|
@@ -9,8 +9,11 @@
|
|
|
9
9
|
"author": "yzp",
|
|
10
10
|
"license": "ISC",
|
|
11
11
|
"dependencies": {
|
|
12
|
+
"install": "^0.13.0",
|
|
12
13
|
"lit": "^2.7.6",
|
|
13
14
|
"lit-element": "^3.3.2",
|
|
14
|
-
"lit-html": "^2.7.5"
|
|
15
|
+
"lit-html": "^2.7.5",
|
|
16
|
+
"lodash-es": "^4.17.21",
|
|
17
|
+
"npm": "^9.8.0"
|
|
15
18
|
}
|
|
16
19
|
}
|
|
@@ -0,0 +1,333 @@
|
|
|
1
|
+
import {css, html, LitElement} from 'lit-element';
|
|
2
|
+
import {property} from "lodash-es";
|
|
3
|
+
|
|
4
|
+
export class IkeWebFooter extends LitElement {
|
|
5
|
+
static styles = css`
|
|
6
|
+
.plate-footer {
|
|
7
|
+
padding: 0;
|
|
8
|
+
height: 327px;
|
|
9
|
+
width: 100%;
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
}
|
|
14
|
+
.plate-footer-ent{
|
|
15
|
+
padding: 0;
|
|
16
|
+
height: 327px;
|
|
17
|
+
width: 100%;
|
|
18
|
+
display: flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
flex-direction: column;
|
|
21
|
+
background: #F3F3F3;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.footer-min {
|
|
25
|
+
width: 100%;
|
|
26
|
+
height: 38px;
|
|
27
|
+
text-align: center;
|
|
28
|
+
background: #03261A;
|
|
29
|
+
line-height: 38px;
|
|
30
|
+
}
|
|
31
|
+
.footer-min{
|
|
32
|
+
width: 100%;
|
|
33
|
+
height: 38px;
|
|
34
|
+
text-align: center;
|
|
35
|
+
background: #F3F3F3;
|
|
36
|
+
line-height: 38px;
|
|
37
|
+
}
|
|
38
|
+
.footer-min span {
|
|
39
|
+
height: 14px;
|
|
40
|
+
font-size: 12px;
|
|
41
|
+
font-family: Microsoft YaHei;
|
|
42
|
+
font-weight: 400;
|
|
43
|
+
color: #737373;
|
|
44
|
+
line-height: 20px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.box-a img {
|
|
48
|
+
width: auto;
|
|
49
|
+
height: 40px;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.footer1-box {
|
|
53
|
+
width: 100%;
|
|
54
|
+
height: 289px;
|
|
55
|
+
justify-content: space-around;
|
|
56
|
+
align-items: center;
|
|
57
|
+
//background: #000;
|
|
58
|
+
display: flex;
|
|
59
|
+
background: url("http://ike-web.oss-cn-hangzhou.aliyuncs.com/bg.png");
|
|
60
|
+
|
|
61
|
+
}
|
|
62
|
+
.footer1-box-ent{
|
|
63
|
+
width: 100%;
|
|
64
|
+
height: 289px;
|
|
65
|
+
justify-content: space-around;
|
|
66
|
+
align-items: center;
|
|
67
|
+
background: #F3F3F3;
|
|
68
|
+
display: flex;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.box-b-a,.box-b-a-ent {
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.box-b-a img,.box-b-a-ent img {
|
|
77
|
+
width: 20px;
|
|
78
|
+
height: 20px;
|
|
79
|
+
margin-right: 10px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.box-b-a span {
|
|
83
|
+
margin: 12px 0;
|
|
84
|
+
height: 18px;
|
|
85
|
+
font-size: 22px;
|
|
86
|
+
font-family: Microsoft YaHei;
|
|
87
|
+
font-weight: bold;
|
|
88
|
+
color: #c1c1c1;
|
|
89
|
+
line-height: 20px;
|
|
90
|
+
}
|
|
91
|
+
.box-b-a-ent span {
|
|
92
|
+
margin: 12px 0;
|
|
93
|
+
height: 18px;
|
|
94
|
+
font-size: 22px;
|
|
95
|
+
font-family: Microsoft YaHei;
|
|
96
|
+
font-weight: bold;
|
|
97
|
+
color: #272727;
|
|
98
|
+
line-height: 20px;
|
|
99
|
+
}
|
|
100
|
+
.box-b-b,.box-b-b-ent {
|
|
101
|
+
display: flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
padding: 6px 0;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.box-b-b img,.box-b-b-ent img {
|
|
107
|
+
width: 20px;
|
|
108
|
+
height: 20px;
|
|
109
|
+
margin-right: 10px;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.box-b-b span {
|
|
113
|
+
display: block;
|
|
114
|
+
font-size: 14px;
|
|
115
|
+
font-family: Microsoft YaHei;
|
|
116
|
+
font-weight: 400;
|
|
117
|
+
color: #c0c0c0;
|
|
118
|
+
line-height: 20px;
|
|
119
|
+
}
|
|
120
|
+
box-b-b-ent span{
|
|
121
|
+
display: block;
|
|
122
|
+
font-size: 14px;
|
|
123
|
+
font-family: Microsoft YaHei;
|
|
124
|
+
font-weight: 400;
|
|
125
|
+
line-height: 20px;
|
|
126
|
+
color: #272727 !important;
|
|
127
|
+
}
|
|
128
|
+
.box-c-b {
|
|
129
|
+
height: 17px;
|
|
130
|
+
font-size: 18px;
|
|
131
|
+
font-family: Microsoft YaHei;
|
|
132
|
+
font-weight: 400;
|
|
133
|
+
color: #c0c0c0;
|
|
134
|
+
line-height: 20px;
|
|
135
|
+
margin-bottom: 18px;
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.box-c-b span {
|
|
141
|
+
border-bottom: 3px solid #06aa3e;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.box-b {
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.box-c-a {
|
|
150
|
+
border: 1px solid rgba(192, 192, 192, 0.3);
|
|
151
|
+
box-sizing: border-box;
|
|
152
|
+
text-align: center;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.box-c-a img {
|
|
156
|
+
margin: 10px 10px 5px 10px;
|
|
157
|
+
width: 103px;
|
|
158
|
+
box-sizing: border-box;
|
|
159
|
+
display: block;
|
|
160
|
+
height: 103px;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.box-c-a span {
|
|
164
|
+
font-size: 12px;
|
|
165
|
+
line-height: 20px;
|
|
166
|
+
text-align: center;
|
|
167
|
+
color: #c0c0c0;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.box-c-b {
|
|
171
|
+
height: 17px;
|
|
172
|
+
font-size: 18px;
|
|
173
|
+
font-family: Microsoft YaHei;
|
|
174
|
+
font-weight: 400;
|
|
175
|
+
color: #c0c0c0;
|
|
176
|
+
line-height: 20px;
|
|
177
|
+
margin-bottom: 30px;
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.box-c-b span {
|
|
183
|
+
border-bottom: 3px solid #06aa3e;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.flex-clon {
|
|
187
|
+
flex-direction: column;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
a {
|
|
191
|
+
text-decoration: none;
|
|
192
|
+
}
|
|
193
|
+
`;
|
|
194
|
+
// @ts-ignore
|
|
195
|
+
@property({type: String}) identification = window.location.hostname.split('.')[0]
|
|
196
|
+
|
|
197
|
+
@property() data = []; // 创建用于存储 Ajax 数据的属性
|
|
198
|
+
@property() personalizedConfigJson = {}; // 创建用于存储 Ajax 数据的属性
|
|
199
|
+
private logo: any;
|
|
200
|
+
static get properties(){
|
|
201
|
+
return {
|
|
202
|
+
logo: String,
|
|
203
|
+
orgContacts: String,
|
|
204
|
+
};
|
|
205
|
+
}
|
|
206
|
+
// 在 connectedCallback 中发起 Ajax 请求
|
|
207
|
+
connectedCallback() {
|
|
208
|
+
|
|
209
|
+
super.connectedCallback();
|
|
210
|
+
this.fetchData();
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
async fetchData() {
|
|
214
|
+
try {
|
|
215
|
+
const response = await fetch('https://backsite.efootprint.net/Gpm/webLcaOrganization/GetOrganizationByDomain'); // 替换为实际的 API 地址
|
|
216
|
+
const jsonData = await response.json();
|
|
217
|
+
let data = jsonData.data; // 将获取到的数据保存到 data 属性中
|
|
218
|
+
if(data?.personalizedConfigJson){
|
|
219
|
+
this.personalizedConfigJson = JSON.parse(data.personalizedConfigJson);
|
|
220
|
+
}
|
|
221
|
+
console.log('this.data.data.personalizedConfigJson',this.personalizedConfigJson)
|
|
222
|
+
this.logo = this.personalizedConfigJson?.logo;
|
|
223
|
+
this.orgContacts = this.personalizedConfigJson?.orgContacts;
|
|
224
|
+
this.name = this.personalizedConfigJson?.institution?.name;
|
|
225
|
+
this.email = this.personalizedConfigJson?.orgEmail;
|
|
226
|
+
this.phone = this.personalizedConfigJson?.orgPhone
|
|
227
|
+
this.address = this.personalizedConfigJson?.orgAddress;
|
|
228
|
+
this.followUrl = this.personalizedConfigJson?.followUrl;
|
|
229
|
+
|
|
230
|
+
setTimeout(()=>this.requestUpdate(),1000)
|
|
231
|
+
|
|
232
|
+
// this.requestUpdate(); // 更新组件以触发重新渲染
|
|
233
|
+
} catch (error) {
|
|
234
|
+
console.error('Error fetching data:', error);
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
@property() plat = html`
|
|
240
|
+
<div class="plate-footer" id="box-id">
|
|
241
|
+
<div class="footer1-box flex">
|
|
242
|
+
<div class="box-a">
|
|
243
|
+
<img src="http://ike-web.oss-cn-hangzhou.aliyuncs.com/WebLCA_logo.png" alt="">
|
|
244
|
+
</div>
|
|
245
|
+
<div class="flex flex-clon box-b">
|
|
246
|
+
<div class="box-c-b"><span>联系我们</span></div>
|
|
247
|
+
<div>
|
|
248
|
+
<div class="box-b-a ">
|
|
249
|
+
<img src="https://ike-web.oss-cn-hangzhou.aliyuncs.com/index_icon_tel_normal.png" alt="">
|
|
250
|
+
<span>189 8093 7517</span>
|
|
251
|
+
</div>
|
|
252
|
+
<div class="box-b-b">
|
|
253
|
+
<img src="https://ike-web.oss-cn-hangzhou.aliyuncs.com/index_icon_qq_normal.png" alt="">
|
|
254
|
+
<span>609453080（群）</span>
|
|
255
|
+
</div>
|
|
256
|
+
<div class="box-b-b">
|
|
257
|
+
<img src="https://ike-web.oss-cn-hangzhou.aliyuncs.com/index_icon_e-mail_normal.png" alt="">
|
|
258
|
+
<span>support@weblca.net</span>
|
|
259
|
+
</div>
|
|
260
|
+
<div class="box-b-b">
|
|
261
|
+
<img src="https://ike-web.oss-cn-hangzhou.aliyuncs.com/index_icon_postcode_normal.png"
|
|
262
|
+
alt="">
|
|
263
|
+
<span>610065（邮编）</span>
|
|
264
|
+
</div>
|
|
265
|
+
</div>
|
|
266
|
+
</div>
|
|
267
|
+
<div class="box-c">
|
|
268
|
+
<div class="box-c-b"><span>关注我们</span></div>
|
|
269
|
+
<div class="box-c-a flex flex-clon">
|
|
270
|
+
<img src="https://ike-web.oss-cn-hangzhou.aliyuncs.com/QR.png" alt="">
|
|
271
|
+
<span>WebLCA公众号</span>
|
|
272
|
+
</div>
|
|
273
|
+
</div>
|
|
274
|
+
</div>
|
|
275
|
+
<div class="footer-min">
|
|
276
|
+
<span>
|
|
277
|
+
© WebLCA开放平台 | 蜀ICP备08100730号-1 | 技术支持：亿科环境
|
|
278
|
+
</span>
|
|
279
|
+
</div>
|
|
280
|
+
</div>`
|
|
281
|
+
// @property() ent =
|
|
282
|
+
|
|
283
|
+
protected render() {
|
|
284
|
+
return html`${this.identification === 'www' ?
|
|
285
|
+
this.plat
|
|
286
|
+
:
|
|
287
|
+
html` <div class="plate-footer-ent" id="box-id">
|
|
288
|
+
<div class="footer1-box-ent flex">
|
|
289
|
+
<div class="box-a" style="display: flex;align-items: center">
|
|
290
|
+
<img src="${this.logo}" alt=""> <span style="margin-left: 12px;color: #373737;font-weight: 600">${this.name}</span>
|
|
291
|
+
</div>
|
|
292
|
+
<div class="flex flex-clon box-b">
|
|
293
|
+
<div class="box-c-b"><span style="color: #272727;border-bottom: 3px solid #272727">联系我们</span></div>
|
|
294
|
+
<div>
|
|
295
|
+
<div class="box-b-a-ent">
|
|
296
|
+
<img src="https://ike-web.oss-cn-hangzhou.aliyuncs.com/index_icon_people_normal.png" alt="">
|
|
297
|
+
<span>${this.orgContacts}</span>
|
|
298
|
+
</div>
|
|
299
|
+
<div class=" box-b-b-ent">
|
|
300
|
+
<img src="http://ike-web.oss-cn-hangzhou.aliyuncs.com/tel.png" alt="">
|
|
301
|
+
<span>${this.phone}</span>
|
|
302
|
+
</div>
|
|
303
|
+
<div class=" box-b-b-ent">
|
|
304
|
+
<img src="http://ike-web.oss-cn-hangzhou.aliyuncs.com/e-mail.png" alt="">
|
|
305
|
+
<span>${this.email}</span>
|
|
306
|
+
</div>
|
|
307
|
+
<div class=" box-b-b-ent">
|
|
308
|
+
<img src="https://ike-web.oss-cn-hangzhou.aliyuncs.com/index_icon_address_normal.png"
|
|
309
|
+
alt="">
|
|
310
|
+
<span>${this.address}</span>
|
|
311
|
+
</div>
|
|
312
|
+
</div>
|
|
313
|
+
</div>
|
|
314
|
+
<div class="box-c">
|
|
315
|
+
<div class="box-c-b"><span style="color: #272727;border-bottom: 3px solid #272727">关注我们</span></div>
|
|
316
|
+
<div class="box-c-a flex flex-clon">
|
|
317
|
+
${this.followUrl ? html`<img src="${this.followUrl}" alt="">` : html`<img src="https://ike-web.oss-cn-hangzhou.aliyuncs.com/QR.png" alt="">` }
|
|
318
|
+
|
|
319
|
+
<span>WebLCA公众号</span>
|
|
320
|
+
</div>
|
|
321
|
+
</div>
|
|
322
|
+
</div>
|
|
323
|
+
<div class="footer-min-ent">
|
|
324
|
+
<span>
|
|
325
|
+
© WebLCA开放平台 | 蜀ICP备08100730号-1 | 技术支持：亿科环境
|
|
326
|
+
</span>
|
|
327
|
+
</div>
|
|
328
|
+
</div>`
|
|
329
|
+
}`;
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
customElements.define('ike-web-footer', IkeWebFooter);
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
import {css, html, LitElement} from 'lit-element';
|
|
2
|
+
import {property} from "lodash-es";
|
|
3
|
+
|
|
4
|
+
export class IkeWebHeader extends LitElement {
|
|
5
|
+
static styles = css`
|
|
6
|
+
.ike-web-header {
|
|
7
|
+
width: 100%;
|
|
8
|
+
box-sizing: border-box;
|
|
9
|
+
height: 72px;
|
|
10
|
+
display: flex;
|
|
11
|
+
padding: 0 72px;
|
|
12
|
+
background: var(--ike-web-header-bg, #063223);
|
|
13
|
+
align-items: center;
|
|
14
|
+
justify-content: space-between;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.iwh-url {
|
|
18
|
+
width: 255px;
|
|
19
|
+
height: 40px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.header-list {
|
|
23
|
+
color: #fff !important;
|
|
24
|
+
height: 72px;
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.menu-item:hover {
|
|
30
|
+
background: rgba(0, 162, 44, 0.1);
|
|
31
|
+
color: var(--ike-web-header-text-color, '#fff')
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.el-menu-demo {
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
cursor: pointer;
|
|
38
|
+
color: #fff;
|
|
39
|
+
background: transparent;
|
|
40
|
+
border: none;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.posi {
|
|
44
|
+
position: absolute;
|
|
45
|
+
top: 20%;
|
|
46
|
+
left: 70%;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.menu-item {
|
|
50
|
+
padding: 0 10px;
|
|
51
|
+
font-size: 14px;
|
|
52
|
+
|
|
53
|
+
height: 72px;
|
|
54
|
+
text-align: center;
|
|
55
|
+
margin-right: 50px;
|
|
56
|
+
display: flex;
|
|
57
|
+
align-items: center;
|
|
58
|
+
}
|
|
59
|
+
`;
|
|
60
|
+
// @ts-ignore
|
|
61
|
+
@property({type: String}) status = window.location.hostname.split('.')[0]
|
|
62
|
+
|
|
63
|
+
// 在 connectedCallback 中发起 Ajax 请求
|
|
64
|
+
private data: any;
|
|
65
|
+
connectedCallback() {
|
|
66
|
+
|
|
67
|
+
super.connectedCallback();
|
|
68
|
+
this.fetchData();
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// @ts-ignore
|
|
72
|
+
async fetchData() {
|
|
73
|
+
try {
|
|
74
|
+
const response = await fetch('https://backsite.efootprint.net/Gpm/webLcaOrganization/GetOrganizationByDomain'); // 替换为实际的 API 地址
|
|
75
|
+
const jsonData = await response.json();
|
|
76
|
+
let data = jsonData.data; // 将获取到的数据保存到 data 属性中
|
|
77
|
+
|
|
78
|
+
this.data = data.alreadyServices
|
|
79
|
+
console.log('data==',this.data)
|
|
80
|
+
setTimeout(()=>this.requestUpdate(),1000)
|
|
81
|
+
|
|
82
|
+
// this.requestUpdate(); // 更新组件以触发重新渲染
|
|
83
|
+
} catch (error) {
|
|
84
|
+
console.error('Error fetching data:', error);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
protected render() {
|
|
89
|
+
return html`
|
|
90
|
+
<div class="ike-web-header"
|
|
91
|
+
style="background: ${this.status === 'www' ? 'var(--ike-web-header-bg,#063223)' : 'var(--ike-web-header-bg,#FFFFFF)'}">
|
|
92
|
+
<img src="https://ike-web.oss-cn-hangzhou.aliyuncs.com/WebLCA_logo.png" class="iwh-url" alt="">
|
|
93
|
+
|
|
94
|
+
<div class="iwh-right">
|
|
95
|
+
<div class="header-list flex align-center">
|
|
96
|
+
<div class="el-menu-demo">
|
|
97
|
+
<div class="menu-item"
|
|
98
|
+
style="color: ${this.status === 'www' ? 'var(--ike-web-header-text-color,#fff)' : 'var(--ike-web-header-text-color,#373737)'}"
|
|
99
|
+
@click="${this._routerPush}" data-url="https://www.weblca.net/home">首页
|
|
100
|
+
</div>
|
|
101
|
+
<div class="menu-item "
|
|
102
|
+
style=" position: relative;color: ${this.status === 'www' ? 'var(--ike-web-header-text-color,#fff)' : 'var(--ike-web-header-text-color,#373737)'}"
|
|
103
|
+
@click="${this._routerPush}" data-url="https://www.weblca.net/database">
|
|
104
|
+
${this.status === 'www' ? html`<img class="posi"
|
|
105
|
+
src="https://ike-web.oss-cn-hangzhou.aliyuncs.com/HOT.png"
|
|
106
|
+
alt="">` : ''}
|
|
107
|
+
数据库
|
|
108
|
+
</div>
|
|
109
|
+
${this.data.includes('ef') ? html`<div class="menu-item"
|
|
110
|
+
style="color: ${this.status === 'www' ? 'var(--ike-web-header-text-color,#fff)' : 'var(--ike-web-header-text-color,#373737)'}"
|
|
111
|
+
@click="${this._routerPush}" data-url="https://www.efootprint.net">eFootprint
|
|
112
|
+
</div>` : '' }
|
|
113
|
+
${this.data.includes('scope') ? html`<div class="menu-item"
|
|
114
|
+
style="color: ${this.status === 'www' ? 'var(--ike-web-header-text-color,#fff)' : 'var(--ike-web-header-text-color,#373737)'}"
|
|
115
|
+
@click="${this._routerPush}" data-url="https://www.webcarbon.net">CarbonZero
|
|
116
|
+
</div>` : ''}
|
|
117
|
+
${this.data.includes('GPM') ? html`<div class="menu-item"
|
|
118
|
+
style="color: ${this.status === 'www' ? 'var(--ike-web-header-text-color,#fff)' : 'var(--ike-web-header-text-color,#373737)'}"
|
|
119
|
+
v-if="status!=='tibd'" @click="${this._routerPush}" data-url="https://www.webgpm.net">
|
|
120
|
+
GPM
|
|
121
|
+
</div>` : ''}
|
|
122
|
+
${ ( this.status!=='tibd' && this.status!=='tqc') ? html`<div class="menu-item"
|
|
123
|
+
style="color: ${this.status === 'www' ? 'var(--ike-web-header-text-color,#fff)' : 'var(--ike-web-header-text-color,#373737)'}"
|
|
124
|
+
v-if="status!=='tibd' && status!=='tqc'" @click="${this._routerPush}"
|
|
125
|
+
data-url="https://online.efootprint.net/contest">
|
|
126
|
+
LCA大赛
|
|
127
|
+
</div>` : ''}
|
|
128
|
+
${ ( this.status!=='tibd' && this.status!=='tqc') ? html`<div class="menu-item"
|
|
129
|
+
style="color: ${this.status === 'www' ? 'var(--ike-web-header-text-color,#fff)' : 'var(--ike-web-header-text-color,#373737)'}"
|
|
130
|
+
v-if="status!=='tibd' && status!=='tqc'" @click="${this._routerPush}"
|
|
131
|
+
data-url="https://online.efootprint.net/training">
|
|
132
|
+
专业培训
|
|
133
|
+
</div>` : ''}
|
|
134
|
+
|
|
135
|
+
<div class="menu-item"
|
|
136
|
+
style="color: ${this.status === 'www' ? 'var(--ike-web-header-text-color,#fff)' : 'var(--ike-web-header-text-color,#373737)'}"
|
|
137
|
+
@click="${this._scroll}" data-url="#">联系我们
|
|
138
|
+
</div>
|
|
139
|
+
<div class="menu-item">
|
|
140
|
+
<el-icon style="cursor: pointer" size="28" color="#fff">
|
|
141
|
+
<UserFilled/>
|
|
142
|
+
</el-icon>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
</div>`;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
private _routerPush(e: Event) {
|
|
151
|
+
// @ts-ignore
|
|
152
|
+
let to: string = e.currentTarget?.getAttribute('data-url');
|
|
153
|
+
//192,www ,以及 to之中包含online的都不需要替换
|
|
154
|
+
// @ts-ignore
|
|
155
|
+
if (this.status !== '192' && this.status !== 'www' && !to.includes('online')) {
|
|
156
|
+
to = to.replace('www', this.status)
|
|
157
|
+
}
|
|
158
|
+
window.location.href = to
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
private _scroll() {
|
|
162
|
+
let box = document.body
|
|
163
|
+
console.log(box.clientHeight)
|
|
164
|
+
window.scrollTo({
|
|
165
|
+
top: box.clientHeight, behavior: "smooth",
|
|
166
|
+
})
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
customElements.define('ike-web-header', IkeWebHeader);
|
package/MyComponent.ts
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { LitElement, html, css } from 'lit-element';
|
|
2
|
-
|
|
3
|
-
export class MyComponent extends LitElement {
|
|
4
|
-
static styles = css`
|
|
5
|
-
:host {
|
|
6
|
-
display: block;
|
|
7
|
-
padding: 16px;
|
|
8
|
-
background-color: #f1f1f1;
|
|
9
|
-
border-radius: 4px;
|
|
10
|
-
}
|
|
11
|
-
`;
|
|
12
|
-
|
|
13
|
-
render() {
|
|
14
|
-
return html`
|
|
15
|
-
<h1>Hello, Lit Element!</h1>
|
|
16
|
-
`;
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
customElements.define('my-component', MyComponent);
|