ike-weblca-html 1.2.0 → 2.0.0
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/.idea/git_toolbox_blame.xml +6 -0
- package/dist/index.js +1 -1
- package/dist/index.js.LICENSE.txt +0 -20
- package/package.json +1 -1
- package/src/IkeWebFooter.js +259 -109
- package/src/IkeWebHeader.js +348 -130
- package/webpack.config.js +18 -3
- package/dist/my-package.js +0 -2
- package/dist/my-package.js.LICENSE.txt +0 -21
package/src/IkeWebHeader.js
CHANGED
|
@@ -1,140 +1,305 @@
|
|
|
1
1
|
import {css, html, LitElement} from 'lit-element';
|
|
2
2
|
import {property} from "lodash-es";
|
|
3
|
+
import cookies from 'js-cookie';
|
|
3
4
|
|
|
5
|
+
/**
|
|
6
|
+
* IkeWebHeader - Web LCA 网站头部组件
|
|
7
|
+
*
|
|
8
|
+
* 这是一个基于 LitElement 的 Web Components 组件,用于渲染网站的头部导航栏。
|
|
9
|
+
* 支持多语言切换、动态菜单显示、响应式设计等功能。
|
|
10
|
+
*
|
|
11
|
+
* 主要功能:
|
|
12
|
+
* - 多语言支持(简体中文、繁体中文、英文)
|
|
13
|
+
* - 根据域名动态显示不同的菜单项
|
|
14
|
+
* - 支持个性化配置(logo、机构名称等)
|
|
15
|
+
* - 响应式导航菜单
|
|
16
|
+
* - 平滑滚动到页面底部
|
|
17
|
+
* - 登录状态检测和相应的URL跳转逻辑
|
|
18
|
+
*/
|
|
4
19
|
export class IkeWebHeader extends LitElement {
|
|
20
|
+
/**
|
|
21
|
+
* 组件样式定义
|
|
22
|
+
* 包含头部容器、菜单项、子菜单、悬停效果等样式
|
|
23
|
+
*/
|
|
5
24
|
static styles = css`
|
|
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
|
-
|
|
25
|
+
.ike-web-header {
|
|
26
|
+
width: 100%;
|
|
27
|
+
box-sizing: border-box;
|
|
28
|
+
height: 72px;
|
|
29
|
+
display: flex;
|
|
30
|
+
padding: 0 72px;
|
|
31
|
+
background: var(--ike-web-header-bg, #063223);
|
|
32
|
+
align-items: center;
|
|
33
|
+
justify-content: space-between;
|
|
34
|
+
border-bottom: 1px solid rgba(211, 211, 211, 0.3);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.iwh-url {
|
|
38
|
+
max-width: 220px;
|
|
39
|
+
max-height: 40px;
|
|
40
|
+
display: inline-block;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.header-list {
|
|
44
|
+
color: #fff !important;
|
|
45
|
+
height: 72px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.menu-item:hover {
|
|
49
|
+
background: rgba(0, 162, 44, 0.1);
|
|
50
|
+
color: var(--ike-web-header-text-color, '#fff')
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.el-menu-demo {
|
|
54
|
+
display: flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
cursor: pointer;
|
|
57
|
+
color: #fff;
|
|
58
|
+
background: transparent;
|
|
59
|
+
border: none;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.posi {
|
|
63
|
+
position: absolute;
|
|
64
|
+
top: 20%;
|
|
65
|
+
left: 70%;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.box-a {
|
|
69
|
+
display: inline-block;
|
|
70
|
+
margin-left: 30px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.box-a img {
|
|
74
|
+
width: auto;
|
|
75
|
+
height: 40px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.left-menu-items {
|
|
79
|
+
display: flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
margin-left: 20px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.left-menu-item {
|
|
85
|
+
padding: 0 15px;
|
|
86
|
+
font-size: 14px;
|
|
87
|
+
height: 72px;
|
|
88
|
+
display: flex;
|
|
89
|
+
align-items: center;
|
|
90
|
+
cursor: pointer;
|
|
91
|
+
border-radius: 4px;
|
|
92
|
+
transition: background-color 0.3s ease;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.left-menu-item:hover {
|
|
96
|
+
background: rgba(0, 162, 44, 0.1);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.menu-item {
|
|
100
|
+
padding: 0 20px;
|
|
101
|
+
font-size: 14px;
|
|
102
|
+
height: 72px;
|
|
103
|
+
text-align: center;
|
|
104
|
+
box-sizing: border-box;
|
|
105
|
+
display: flex;
|
|
106
|
+
align-items: center;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.menu-item-database{
|
|
110
|
+
position: relative;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.menu-sub-group{
|
|
114
|
+
background: #E6F2E8;
|
|
115
|
+
position: absolute;
|
|
116
|
+
z-index: 999;
|
|
117
|
+
width: 150%;
|
|
118
|
+
//bottom: -72px;
|
|
119
|
+
top: 100%;
|
|
120
|
+
left: -50%;
|
|
121
|
+
padding: 20px 20px 0 20px;
|
|
122
|
+
//transform: translateX(50%);
|
|
123
|
+
color: #06AA3E;
|
|
124
|
+
box-shadow: 0px 0px 4px 0px rgba(6,50,35,0.53);
|
|
125
|
+
border-radius: 0px 0px 8px 8px;
|
|
126
|
+
display: none;
|
|
127
|
+
transition: opacity 0.3s ease;
|
|
128
|
+
opacity: 0;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.menu-sub-item{
|
|
132
|
+
padding-bottom: 20px;
|
|
133
|
+
color: #373737;
|
|
134
|
+
}
|
|
135
|
+
.menu-sub-item:hover{
|
|
136
|
+
color: #06AA3E;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.menu-item-database:hover .menu-sub-group {
|
|
140
|
+
display: block;
|
|
141
|
+
opacity: 1;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* 消息图标样式 */
|
|
145
|
+
.message-icon-container {
|
|
146
|
+
position: relative;
|
|
147
|
+
display: flex;
|
|
148
|
+
align-items: center;
|
|
149
|
+
margin: 0 15px;
|
|
150
|
+
cursor: pointer;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.message-icon {
|
|
154
|
+
width: 24px;
|
|
155
|
+
height: 24px;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.message-badge {
|
|
159
|
+
position: absolute;
|
|
160
|
+
top: -8px;
|
|
161
|
+
right: -8px;
|
|
162
|
+
background: linear-gradient(90deg, #FFBB24 0%, #FF9900 100%);
|
|
163
|
+
color: white;
|
|
164
|
+
border-radius: 50%;
|
|
165
|
+
width: 18px;
|
|
166
|
+
height: 18px;
|
|
167
|
+
display: flex;
|
|
168
|
+
align-items: center;
|
|
169
|
+
justify-content: center;
|
|
170
|
+
font-size: 12px;
|
|
171
|
+
font-weight: bold;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/* 登录按钮样式 */
|
|
175
|
+
.login-button {
|
|
176
|
+
padding: 8px 16px;
|
|
177
|
+
border: 1px solid;
|
|
178
|
+
border-radius: 4px;
|
|
179
|
+
cursor: pointer;
|
|
180
|
+
font-size: 14px;
|
|
181
|
+
transition: all 0.3s ease;
|
|
182
|
+
margin-left: 15px;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.login-button:hover {
|
|
186
|
+
opacity: 0.8;
|
|
187
|
+
}
|
|
103
188
|
`;
|
|
189
|
+
|
|
190
|
+
// ==================== 环境和状态相关属性 ====================
|
|
191
|
+
|
|
192
|
+
/** 当前网站状态,基于域名的第一部分 */
|
|
104
193
|
status = window.location.hostname.split('.')[0]
|
|
194
|
+
|
|
195
|
+
/** 当前页面完整URL */
|
|
105
196
|
hostName = window.location.href
|
|
197
|
+
|
|
198
|
+
/** 是否为平台版本(www、192、online环境) */
|
|
106
199
|
isPlat = this.status === 'www' || this.status === '192' || this.status === 'online'
|
|
200
|
+
|
|
201
|
+
/** 是否显示语言切换功能 */
|
|
107
202
|
isShowLang = this.status === 'www' || this.status === 'nanozeo' || this.status === '192' || this.status === 'online'
|
|
108
|
-
|
|
203
|
+
|
|
204
|
+
// ==================== 数据相关属性 ====================
|
|
205
|
+
|
|
206
|
+
/** 从API获取的数据 */
|
|
109
207
|
data = []
|
|
208
|
+
|
|
209
|
+
/** 个性化配置JSON数据 */
|
|
210
|
+
personalizedConfigJson
|
|
211
|
+
|
|
212
|
+
/** 机构logo URL */
|
|
213
|
+
logo
|
|
214
|
+
|
|
215
|
+
/** 机构联系方式 */
|
|
216
|
+
orgContacts
|
|
217
|
+
|
|
218
|
+
/** 机构名称 */
|
|
219
|
+
name
|
|
220
|
+
|
|
221
|
+
/** 机构邮箱 */
|
|
222
|
+
email
|
|
223
|
+
|
|
224
|
+
/** 机构电话 */
|
|
225
|
+
phone
|
|
226
|
+
|
|
227
|
+
/** 机构地址 */
|
|
228
|
+
address
|
|
229
|
+
|
|
230
|
+
/** 关注链接 */
|
|
231
|
+
followUrl
|
|
232
|
+
|
|
233
|
+
/** 已开通的服务列表 */
|
|
234
|
+
alreadyServices
|
|
235
|
+
|
|
236
|
+
// ==================== 多语言相关属性 ====================
|
|
237
|
+
|
|
238
|
+
/** 当前语言 */
|
|
110
239
|
currentLanguage = 'zh_CN';
|
|
240
|
+
|
|
241
|
+
/** 简体中文语言包 */
|
|
111
242
|
zhCN = {
|
|
112
243
|
'首页':'首页',
|
|
113
244
|
'数据库':'数据库',
|
|
245
|
+
'资料库':'资料库',
|
|
114
246
|
'皮革LCA数据库':'皮革LCA数据库',
|
|
115
247
|
'LCA大赛':'LCA大赛',
|
|
116
248
|
'专业培训':'专业培训',
|
|
117
249
|
'联系我们':'联系我们',
|
|
250
|
+
'标准库':'标准库',
|
|
251
|
+
'核算模版':'核算模版',
|
|
252
|
+
'2025全生命周期创新大赛':'2025全生命周期创新大赛',
|
|
253
|
+
'化工专题比赛':'化工专题比赛',
|
|
254
|
+
'登录':'登录',
|
|
118
255
|
}
|
|
256
|
+
|
|
257
|
+
/** 繁体中文语言包 */
|
|
119
258
|
zhTW = {
|
|
120
259
|
'首页':'首頁',
|
|
121
260
|
'数据库':'數據庫',
|
|
261
|
+
'资料库':'資料庫',
|
|
122
262
|
'皮革LCA数据库':'皮革LCA數據庫',
|
|
123
263
|
'LCA大赛':'LCA大賽',
|
|
124
264
|
'专业培训':'專業培訓',
|
|
125
265
|
'联系我们':'聯繫我們',
|
|
266
|
+
'标准库':'標準庫',
|
|
267
|
+
'核算模版':'核算模版',
|
|
268
|
+
'2025全生命周期创新大赛':'2025全生命週期創新大賽',
|
|
269
|
+
'化工专题比赛':'化工專題比賽',
|
|
270
|
+
'登录':'登录',
|
|
126
271
|
}
|
|
272
|
+
|
|
273
|
+
/** 英文语言包 */
|
|
127
274
|
enUS = {
|
|
128
275
|
'首页':'Home',
|
|
129
276
|
'数据库':'Database',
|
|
277
|
+
'资料库':'Database',
|
|
130
278
|
'皮革LCA数据库':'Leather LCA Database',
|
|
131
279
|
'LCA大赛':'LCA Competition',
|
|
132
280
|
'专业培训':'Professional Training',
|
|
133
281
|
'联系我们':'Contact Us',
|
|
282
|
+
'标准库':'Standard Library',
|
|
283
|
+
'核算模版':'Calculation Template',
|
|
284
|
+
'2025全生命周期创新大赛':'2025 Life Cycle Innovation Competition',
|
|
285
|
+
'化工专题比赛':'Chemical Industry Competition',
|
|
286
|
+
'登录':'Login',
|
|
134
287
|
}
|
|
288
|
+
|
|
289
|
+
/** 当前使用的国际化对象 */
|
|
135
290
|
i18n = {}
|
|
291
|
+
|
|
292
|
+
/** 浏览器默认语言 */
|
|
136
293
|
createLang = navigator.language.replace('-', '_')
|
|
137
|
-
|
|
294
|
+
|
|
295
|
+
/** 用户选择的语言(优先从localStorage获取,否则使用浏览器语言) */
|
|
296
|
+
lang = window.localStorage.getItem('lang') || this.createLang
|
|
297
|
+
|
|
298
|
+
/** 登录状态检测 - 检查cookie中是否存在token */
|
|
299
|
+
isLoggedIn = !!cookies.get('token')
|
|
300
|
+
|
|
301
|
+
/** 消息数量(当前写死为1) */
|
|
302
|
+
messageCount = 1
|
|
138
303
|
|
|
139
304
|
|
|
140
305
|
|
|
@@ -203,7 +368,27 @@ export class IkeWebHeader extends LitElement {
|
|
|
203
368
|
<img src="${this.logo}" alt=""> <span
|
|
204
369
|
style="margin-left: 12px;color: #373737;font-weight: 600;color: ${this.isPlat ? '#fff' : '#063223'}">${this.name}</span>
|
|
205
370
|
</div>` : ''}
|
|
206
|
-
|
|
371
|
+
|
|
372
|
+
<!-- 左侧菜单项:eFootprint、CarbonZero、GPM -->
|
|
373
|
+
${this.isPlat ? html`
|
|
374
|
+
<div class="left-menu-items">
|
|
375
|
+
${(this.isPlat || this.alreadyServices.includes('eF')) ? html`
|
|
376
|
+
<div class="left-menu-item"
|
|
377
|
+
style="color: ${this.hostName.includes('efootprint.net/login') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
|
|
378
|
+
@click="${this._routerPush}" data-url="https://www.efootprint.net"
|
|
379
|
+
data-login-url="https://www.efootprint.net/angular/weblca/ef/model/modelList">eFootprint
|
|
380
|
+
</div>` : ''}
|
|
381
|
+
${(this.isPlat || this.alreadyServices.includes('scope')) ? html`
|
|
382
|
+
<div class="left-menu-item"
|
|
383
|
+
style="color: ${this.hostName.includes('webcarbon.net') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
|
|
384
|
+
@click="${this._routerPush}" data-login-url="https://www.webcarbon.net/#/calculate/calculatCarbon" data-url="https://www.webcarbon.net">CarbonZero
|
|
385
|
+
</div>` : ''}
|
|
386
|
+
${(this.isPlat || this.alreadyServices.includes('GPM')) ? html`
|
|
387
|
+
<div class="left-menu-item"
|
|
388
|
+
style="color: ${this.hostName.includes('webgpm.net') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
|
|
389
|
+
@click="${this._routerPush}" data-login-url="https://www.webgpm.net/#/dashboard/targetCenter" data-url="https://www.webgpm.net">GPM
|
|
390
|
+
</div>` : ''}
|
|
391
|
+
</div>` : ''}
|
|
207
392
|
</div>
|
|
208
393
|
|
|
209
394
|
<div class="iwh-right">
|
|
@@ -211,56 +396,58 @@ export class IkeWebHeader extends LitElement {
|
|
|
211
396
|
<div class="el-menu-demo">
|
|
212
397
|
<div class="menu-item"
|
|
213
398
|
style="color: ${ this.hostName.includes('weblca.net/home') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
|
|
214
|
-
@click="${this._routerPush}" data-url="https://www.weblca.net/home"> ${this.i18n['首页'] }
|
|
399
|
+
@click="${this._routerPush}" data-login-url="https://www.weblca.net/home" data-url="https://www.weblca.net/home"> ${this.i18n['首页'] }
|
|
215
400
|
</div>
|
|
401
|
+
|
|
402
|
+
<!-- 平台专属菜单项:标准库和核算模版 -->
|
|
403
|
+
${this.isPlat ? html`
|
|
404
|
+
<div class="menu-item"
|
|
405
|
+
style="color: ${this.isPlat ? '#fff' : '#373737'}"
|
|
406
|
+
@click="${this._routerPush}" data-login-url="https://www.weblca.net/standard" data-url="https://www.weblca.net/standard">${this.i18n['标准库'] }
|
|
407
|
+
</div>
|
|
408
|
+
<div class="menu-item"
|
|
409
|
+
style="color: ${this.isPlat ? '#fff' : '#373737'}"
|
|
410
|
+
@click="${this._routerPush}" data-login-url="https://www.weblca.net/template" data-url="https://www.weblca.net/template">${this.i18n['核算模版'] }
|
|
411
|
+
</div>` : ''}
|
|
412
|
+
|
|
216
413
|
${(this.isPlat || this.alreadyServices.includes('database')) ? html`
|
|
217
414
|
<div class="menu-item menu-item-database"
|
|
218
415
|
style=" position: relative;color: ${this.hostName.includes('weblca.net/database') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
|
|
219
|
-
@click="${this._routerPush}" data-url="https://www.weblca.net/database">
|
|
416
|
+
@click="${this._routerPush}" data-login-urlurl="https://www.weblca.net/database" data-url="https://www.weblca.net/database">
|
|
220
417
|
${(this.isPlat) ? html`<img class="posi"
|
|
221
418
|
src="https://ike-web.oss-cn-hangzhou.aliyuncs.com/HOT.png"
|
|
222
419
|
alt="">` : ''}
|
|
223
420
|
${this.i18n['数据库'] }
|
|
224
421
|
<div class="menu-sub-group">
|
|
225
|
-
<div @click="${this._routerPush}" data-url="https://www.weblca.net/database" class="menu-sub-item">${this.i18n['数据库'] }</div>
|
|
226
|
-
<div @click="${this._routerPush}" data-url="https://www.weblca.net/database/leather" class="menu-sub-item">${this.i18n['皮革LCA数据库'] }</div>
|
|
422
|
+
<div @click="${this._routerPush}" data-login-url="https://www.weblca.net/database" data-url="https://www.weblca.net/database" class="menu-sub-item">${this.i18n['数据库'] }</div>
|
|
423
|
+
<div @click="${this._routerPush}" data-login-url="https://www.weblca.net/database/leather" data-url="https://www.weblca.net/database/leather" class="menu-sub-item">${this.i18n['皮革LCA数据库'] }</div>
|
|
227
424
|
</div>
|
|
228
425
|
</div>` : ''}
|
|
229
|
-
|
|
230
|
-
${(this.isPlat || this.alreadyServices.includes('eF')) ? html`
|
|
231
|
-
<div class="menu-item"
|
|
232
|
-
style="color: ${this.hostName.includes('efootprint.net/login') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
|
|
233
|
-
@click="${this._routerPush}" data-url="https://www.efootprint.net">eFootprint
|
|
234
|
-
</div>` : ''}
|
|
235
|
-
${(this.isPlat || this.alreadyServices.includes('scope')) ? html`
|
|
236
|
-
<div class="menu-item"
|
|
237
|
-
style="color: ${this.hostName.includes('webcarbon.net') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
|
|
238
|
-
@click="${this._routerPush}" data-url="https://www.webcarbon.net">CarbonZero
|
|
239
|
-
</div>` : ''}
|
|
240
|
-
${(this.isPlat || this.alreadyServices.includes('GPM')) ? html`
|
|
426
|
+
${(this.isPlat || this.alreadyServices.includes('databankpage')) ? html`
|
|
241
427
|
<div class="menu-item"
|
|
242
|
-
style="color: ${this.hostName.includes('
|
|
243
|
-
@click="${this._routerPush}" data-url="https://www.
|
|
244
|
-
GPM
|
|
428
|
+
style="color: ${this.hostName.includes('/databankpage') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
|
|
429
|
+
@click="${this._routerPush}" data-login-url="https://www.efootprint.net/databankpage" data-url="https://www.efootprint.net/databankpage">${this.i18n['资料库'] }
|
|
245
430
|
</div>` : ''}
|
|
246
431
|
${this.isPlat ? html`
|
|
247
|
-
<div class="menu-item"
|
|
248
|
-
style="color: ${this.hostName.includes('efootprint.net/contest') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
|
|
249
|
-
|
|
250
|
-
data-url="https://online.efootprint.net/contest">
|
|
432
|
+
<div class="menu-item menu-item-database"
|
|
433
|
+
style=" position: relative;color: ${this.hostName.includes('efootprint.net/contest') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
|
|
434
|
+
>
|
|
251
435
|
${this.i18n['LCA大赛'] }
|
|
436
|
+
<div class="menu-sub-group">
|
|
437
|
+
<div @click="${this._routerPush}" data-login-url="https://www.weblca.net/contest" data-url="https://www.weblca.net/contest" class="menu-sub-item">${this.i18n['2025全生命周期创新大赛'] }</div>
|
|
438
|
+
<div @click="${this._routerPush}" data-login-url="https://www.weblca.net/contest/cccd" data-url="https://www.weblca.net/contest/cccd" class="menu-sub-item">${this.i18n['化工专题比赛'] }</div>
|
|
439
|
+
</div>
|
|
252
440
|
</div>` : ''}
|
|
253
441
|
${this.isPlat ? html`
|
|
254
442
|
<div class="menu-item"
|
|
255
443
|
style="color: ${this.hostName.includes('efootprint.net/training') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
|
|
256
|
-
@click="${this._routerPush}"
|
|
257
|
-
data-url="https://
|
|
444
|
+
@click="${this._routerPush}" data-login-url="https://www.weblca.net/training"
|
|
445
|
+
data-url="https://www.weblca.net/training">
|
|
258
446
|
${this.i18n['专业培训'] }
|
|
259
447
|
</div>` : ''}
|
|
260
|
-
|
|
261
448
|
<div class="menu-item"
|
|
262
449
|
style="color: ${this.isPlat ? '#fff' : '#373737'}"
|
|
263
|
-
@click="${this._scroll}" data-url="#"> ${this.i18n['联系我们'] }
|
|
450
|
+
@click="${this._scroll}" data-login-url="#" data-url="#"> ${this.i18n['联系我们'] }
|
|
264
451
|
</div>
|
|
265
452
|
|
|
266
453
|
${ this.isShowLang ? html`
|
|
@@ -270,15 +457,30 @@ export class IkeWebHeader extends LitElement {
|
|
|
270
457
|
display: flex;
|
|
271
458
|
align-items: center;
|
|
272
459
|
color: ${this.hostName.includes('weblca.net/database') ? '#06AA3E' : this.isPlat ? '#fff' : '#373737'}"
|
|
273
|
-
|
|
274
|
-
${ this.isPlat ? html`<img src="http://ike-web.oss-cn-hangzhou.aliyuncs.com/language.png" alt="">` : html`<img src="http://ike-web.oss-cn-hangzhou.aliyuncs.com/language_block.png" alt="">` }
|
|
460
|
+
>
|
|
461
|
+
${ this.isPlat ? html`<img src="http://ike-web.oss-cn-hangzhou.aliyuncs.com/language.png" alt="">` : html`<img src="http://ike-web.oss-cn-hangzhou.aliyuncs.com/language_block.png" alt="">` }
|
|
275
462
|
<div class="menu-sub-group">
|
|
276
463
|
<div @click="${this._clickLang}" data-lang="zh_CN" class="menu-sub-item">中文简体</div>
|
|
277
464
|
<div @click="${this._clickLang}" data-lang="zh_TW" class="menu-sub-item">中文繁體</div>
|
|
278
465
|
<div @click="${this._clickLang}" data-lang="en_US" class="menu-sub-item">English</div>
|
|
279
466
|
</div>
|
|
280
467
|
</div>` : ''}
|
|
281
|
-
|
|
468
|
+
|
|
469
|
+
<!-- 消息图标 -->
|
|
470
|
+
<div class="message-icon-container">
|
|
471
|
+
<img src="https://ike-web.oss-cn-hangzhou.aliyuncs.com/message.png" alt="消息" class="message-icon">
|
|
472
|
+
<div class="message-badge">${this.messageCount}</div>
|
|
473
|
+
</div>
|
|
474
|
+
|
|
475
|
+
<!-- 登录/首页按钮 -->
|
|
476
|
+
<div class="login-button"
|
|
477
|
+
style="border-color: ${this.isPlat ? '#fff' : '#373737'}; color: ${this.isPlat ? '#fff' : '#373737'}"
|
|
478
|
+
@click="${this._routerPush}"
|
|
479
|
+
data-login-url="https://www.weblca.net/home"
|
|
480
|
+
data-url="https://www.weblca.net/login">
|
|
481
|
+
${this.isLoggedIn ? this.i18n['首页'] : this.i18n['登录']}
|
|
482
|
+
</div>
|
|
483
|
+
|
|
282
484
|
<!-- <div class="menu-item">-->
|
|
283
485
|
<!-- <el-icon style="cursor: pointer" size="28" color="#fff">-->
|
|
284
486
|
<!-- <UserFilled/>-->
|
|
@@ -294,6 +496,12 @@ export class IkeWebHeader extends LitElement {
|
|
|
294
496
|
e.stopPropagation()
|
|
295
497
|
// @ts-ignore
|
|
296
498
|
let to = e.currentTarget?.getAttribute('data-url');
|
|
499
|
+
let loginUrl = e.currentTarget?.getAttribute('data-login-url');
|
|
500
|
+
|
|
501
|
+
// 根据登录状态选择跳转URL
|
|
502
|
+
if (loginUrl && this.isLoggedIn) {
|
|
503
|
+
to = loginUrl;
|
|
504
|
+
}
|
|
297
505
|
//192,www ,以及 to之中包含online的都不需要替换
|
|
298
506
|
// @ts-ignore
|
|
299
507
|
if (this.status !== '192' && this.status !== 'www' && this.status !== 'online' && !to.includes('online')) {
|
|
@@ -321,6 +529,16 @@ export class IkeWebHeader extends LitElement {
|
|
|
321
529
|
top:document.documentElement.scrollHeight, behavior: "smooth",
|
|
322
530
|
})
|
|
323
531
|
}
|
|
532
|
+
|
|
533
|
+
_handleLoginClick() {
|
|
534
|
+
if (this.isLoggedIn) {
|
|
535
|
+
// 如果已登录,跳转到首页
|
|
536
|
+
window.location.href = 'https://www.weblca.net/home';
|
|
537
|
+
} else {
|
|
538
|
+
// 如果未登录,跳转到登录页面
|
|
539
|
+
window.location.href = 'https://www.weblca.net/login';
|
|
540
|
+
}
|
|
541
|
+
}
|
|
324
542
|
}
|
|
325
543
|
|
|
326
544
|
customElements.define('ike-web-header', IkeWebHeader);
|
package/webpack.config.js
CHANGED
|
@@ -1,12 +1,23 @@
|
|
|
1
1
|
const path = require('path');
|
|
2
2
|
|
|
3
3
|
module.exports = {
|
|
4
|
+
mode: 'production',
|
|
4
5
|
entry: './src/index.js',
|
|
5
6
|
output: {
|
|
6
7
|
path: path.resolve(__dirname, 'dist'),
|
|
7
8
|
filename: 'index.js',
|
|
8
|
-
library:
|
|
9
|
-
|
|
9
|
+
library: {
|
|
10
|
+
name: 'IkeWebLcaHtml',
|
|
11
|
+
type: 'umd',
|
|
12
|
+
},
|
|
13
|
+
globalObject: 'this',
|
|
14
|
+
clean: true,
|
|
15
|
+
},
|
|
16
|
+
externals: {
|
|
17
|
+
'lit-element': 'lit-element',
|
|
18
|
+
'lit': 'lit',
|
|
19
|
+
'js-cookie': 'js-cookie',
|
|
20
|
+
'lodash-es': 'lodash-es'
|
|
10
21
|
},
|
|
11
22
|
module: {
|
|
12
23
|
rules: [
|
|
@@ -16,7 +27,11 @@ module.exports = {
|
|
|
16
27
|
use: {
|
|
17
28
|
loader: 'babel-loader',
|
|
18
29
|
options: {
|
|
19
|
-
presets: [
|
|
30
|
+
presets: [
|
|
31
|
+
['@babel/preset-env', {
|
|
32
|
+
modules: false // 保持ES6模块格式
|
|
33
|
+
}]
|
|
34
|
+
],
|
|
20
35
|
},
|
|
21
36
|
},
|
|
22
37
|
},
|