Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
c6e88488 1 parent a76451dc

feat: 新增入职相关页面并注册路由 

添加 onboarding 页面，包含入职前、中、后三个阶段的指导功能
使用 Tailwind CSS 实现响应式布局，集成 NutUI 图标组件
配置自定义导航栏样式并更新项目文档
Inline Side-by-side
Showing 7 changed files with 749 additions and 0 deletions
...@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file. ...@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
8 - 初始化项目 Git 仓库 8 - 初始化项目 Git 仓库
9 - 创建 .gitignore 配置文件 9 - 创建 .gitignore 配置文件
10 - 创建并切换到 develop 分支 10 - 创建并切换到 develop 分支
11 +- 新增 "入职相关" 页面 (`src/pages/onboarding`)，1:1 还原设计稿 UI
12 +- 实现基于 Tailwind CSS 的页面布局与样式，精确适配设计稿参数
13 +- 配置 "入职相关" 页面的自定义导航栏样式
14 +- 注册新页面路由至 `src/app.config.js`
11 15
12 ### Changed 16 ### Changed
13 - 暂时禁用授权模式功能 (`ENABLE_AUTH_MODE = false`) 17 - 暂时禁用授权模式功能 (`ENABLE_AUTH_MODE = false`)
...@@ -25,6 +29,8 @@ All notable changes to this project will be documented in this file. ...@@ -25,6 +29,8 @@ All notable changes to this project will be documented in this file.
25 - 重构首页样式 (`src/pages/index`)，全面采用 Tailwind CSS 替代 Less 29 - 重构首页样式 (`src/pages/index`)，全面采用 Tailwind CSS 替代 Less
26 - 替换静态图片资源为 Picsum 随机图源，提升演示灵活性 30 - 替换静态图片资源为 Picsum 随机图源，提升演示灵活性
27 - 集成 NutUI 图标组件库，替换原有 SVG/图片图标 31 - 集成 NutUI 图标组件库，替换原有 SVG/图片图标
32 +- 优化 "入职相关" 页面样式 (`src/pages/onboarding`)，使用 CSS 背景色替代设计稿切图背景
33 +- 替换 "入职相关" 页面图标为 NutUI 标准图标库，提升加载性能与清晰度
28 34
29 ### Removed 35 ### Removed
30 - 删除项目所有离线功能相关逻辑 36 - 删除项目所有离线功能相关逻辑
......
1 +.page {
2 + background-color: rgba(255, 255, 255, 1);
3 + position: relative;
4 + width: 393px;
5 + height: 1333px;
6 + overflow: hidden;
7 +}
8 +
9 +.section_1 {
10 + background-color: rgba(30, 58, 138, 1);
11 + width: 393px;
12 + padding: 12px 20px 12px 20px;
13 +}
14 +
15 +.text_1 {
16 + overflow-wrap: break-word;
17 + color: rgba(255, 255, 255, 1);
18 + font-size: 14px;
19 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
20 + font-weight: normal;
21 + text-align: left;
22 + white-space: nowrap;
23 + line-height: 20px;
24 +}
25 +
26 +.image_1 {
27 + width: 64px;
28 + height: 16px;
29 + margin: 2px 0 2px 0;
30 +}
31 +
32 +.section_2 {
33 + width: 393px;
34 + background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng5ae87c5e9a86a0d640e93f4a87e612d1c4e6c25e22d3f2600417bdc2e27b7b31)
35 + 100% no-repeat;
36 + background-size: 100% 100%;
37 + padding: 20px 153px 20px 20px;
38 +}
39 +
40 +.thumbnail_1 {
41 + width: 20px;
42 + height: 20px;
43 + margin: 6px 0 7px 0;
44 +}
45 +
46 +.text_2 {
47 + overflow-wrap: break-word;
48 + color: rgba(255, 255, 255, 1);
49 + font-size: 22px;
50 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
51 + font-weight: normal;
52 + text-align: center;
53 + white-space: nowrap;
54 + line-height: 33px;
55 +}
56 +
57 +.section_3 {
58 + background-color: rgba(249, 250, 251, 1);
59 + padding: 24px 20px 96px 20px;
60 +}
61 +
62 +.list_1 {
63 + height: 998px;
64 +}
65 +
66 +.list-items_1 {
67 + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
68 + background-color: rgba(255, 255, 255, 1);
69 + border-radius: 16px;
70 + margin-bottom: 16px;
71 + padding-bottom: 28px;
72 +}
73 +
74 +.text-wrapper_1 {
75 + background-size: 100% 100%;
76 + padding: 16px 285px 16px 20px;
77 +}
78 +
79 +.text_3 {
80 + overflow-wrap: break-word;
81 + color: rgba(31, 41, 55, 1);
82 + font-size: 16px;
83 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
84 + font-weight: normal;
85 + text-align: left;
86 + white-space: nowrap;
87 + line-height: 24px;
88 +}
89 +
90 +.box_1 {
91 + width: 313px;
92 + align-self: center;
93 + margin-top: 28px;
94 +}
95 +
96 +.image-text_1 {
97 + width: 160px;
98 +}
99 +
100 +.label_1 {
101 + width: 48px;
102 + height: 48px;
103 +}
104 +
105 +.text-group_1 {
106 + margin: 4px 0 4px 0;
107 +}
108 +
109 +.text_4 {
110 + width: 126px;
111 + overflow-wrap: break-word;
112 + color: rgba(31, 41, 55, 1);
113 + font-size: 14px;
114 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
115 + font-weight: normal;
116 + text-align: left;
117 + white-space: nowrap;
118 + line-height: 20px;
119 + margin-right: 40px;
120 +}
121 +
122 +.text_5 {
123 + width: 96px;
124 + overflow-wrap: break-word;
125 + color: rgba(107, 114, 128, 1);
126 + font-size: 12px;
127 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
128 + font-weight: normal;
129 + text-align: left;
130 + white-space: nowrap;
131 + line-height: 16px;
132 + margin-top: 4px;
133 +}
134 +
135 +.thumbnail_2 {
136 + width: 20px;
137 + height: 20px;
138 + margin: 14px 0 14px 0;
139 +}
140 +
141 +.image_2 {
142 + width: 313px;
143 + height: 1px;
144 + align-self: center;
145 + margin-top: 16px;
146 +}
147 +
148 +.box_2 {
149 + width: 313px;
150 + align-self: center;
151 + margin-top: 16px;
152 +}
153 +
154 +.image-text_2 {
155 + width: 172px;
156 +}
157 +
158 +.label_2 {
159 + width: 48px;
160 + height: 48px;
161 +}
162 +
163 +.text-group_2 {
164 + margin: 4px 0 4px 0;
165 +}
166 +
167 +.text_6 {
168 + width: 140px;
169 + overflow-wrap: break-word;
170 + color: rgba(31, 41, 55, 1);
171 + font-size: 14px;
172 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
173 + font-weight: normal;
174 + text-align: left;
175 + white-space: nowrap;
176 + line-height: 20px;
177 + margin-right: 10px;
178 +}
179 +
180 +.text_7 {
181 + width: 108px;
182 + overflow-wrap: break-word;
183 + color: rgba(107, 114, 128, 1);
184 + font-size: 12px;
185 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
186 + font-weight: normal;
187 + text-align: left;
188 + white-space: nowrap;
189 + line-height: 16px;
190 + margin-top: 4px;
191 +}
192 +
193 +.thumbnail_3 {
194 + width: 20px;
195 + height: 20px;
196 + margin: 14px 0 14px 0;
197 +}
198 +
199 +.image_3 {
200 + width: 313px;
201 + height: 1px;
202 + align-self: center;
203 + margin-top: 16px;
204 +}
205 +
206 +.box_3 {
207 + width: 313px;
208 + align-self: center;
209 + margin-top: 16px;
210 +}
211 +
212 +.image-text_3 {
213 + width: 162px;
214 +}
215 +
216 +.label_3 {
217 + width: 48px;
218 + height: 48px;
219 +}
220 +
221 +.text-group_3 {
222 + margin: 4px 0 4px 0;
223 +}
224 +
225 +.text_8 {
226 + width: 98px;
227 + overflow-wrap: break-word;
228 + color: rgba(31, 41, 55, 1);
229 + font-size: 14px;
230 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
231 + font-weight: normal;
232 + text-align: left;
233 + white-space: nowrap;
234 + line-height: 20px;
235 +}
236 +
237 +.text_9 {
238 + width: 96px;
239 + overflow-wrap: break-word;
240 + color: rgba(107, 114, 128, 1);
241 + font-size: 12px;
242 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
243 + font-weight: normal;
244 + text-align: left;
245 + white-space: nowrap;
246 + line-height: 16px;
247 + margin: 4px 26px 0 0;
248 +}
249 +
250 +.thumbnail_4 {
251 + width: 20px;
252 + height: 20px;
253 + margin: 14px 0 14px 0;
254 +}
255 +
256 +.section_4 {
257 + background-color: rgba(255, 255, 255, 1);
258 + padding-bottom: 9px;
259 +}
260 +
261 +.image_4 {
262 + width: 393px;
263 + height: 1px;
264 +}
265 +
266 +.box_4 {
267 + width: 269px;
268 + align-self: center;
269 + margin-top: 10px;
270 +}
271 +
272 +.image-text_4 {
273 +}
274 +
275 +.label_4 {
276 + width: 24px;
277 + height: 24px;
278 +}
279 +
280 +.text-group_4 {
281 + overflow-wrap: break-word;
282 + color: rgba(156, 163, 175, 1);
283 + font-size: 12px;
284 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
285 + font-weight: normal;
286 + text-align: center;
287 + white-space: nowrap;
288 + line-height: 16px;
289 + margin-top: 4px;
290 +}
291 +
292 +.image-text_5 {
293 +}
294 +
295 +.label_5 {
296 + width: 24px;
297 + height: 24px;
298 + align-self: center;
299 +}
300 +
301 +.text-group_5 {
302 + overflow-wrap: break-word;
303 + color: rgba(156, 163, 175, 1);
304 + font-size: 12px;
305 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
306 + font-weight: normal;
307 + text-align: center;
308 + white-space: nowrap;
309 + line-height: 16px;
310 + margin-top: 4px;
311 +}
312 +
313 +.image-text_6 {
314 +}
315 +
316 +.label_6 {
317 + width: 24px;
318 + height: 24px;
319 +}
320 +
321 +.text-group_6 {
322 + overflow-wrap: break-word;
323 + color: rgba(0, 122, 255, 1);
324 + font-size: 12px;
325 + font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
326 + font-weight: normal;
327 + text-align: center;
328 + white-space: nowrap;
329 + line-height: 16px;
330 + margin-top: 4px;
331 +}
332 +
333 +.image_5 {
334 + width: 393px;
335 + height: 34px;
336 +}
1 +<template>
2 + <div class="page flex-col">
3 + <div class="section_1 flex-row justify-between">
4 + <span class="text_1">9:41</span>
5 + <img
6 + class="image_1"
7 + referrerpolicy="no-referrer"
8 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng413f9d678a24a9b746fdc981fa579b56b2cbd98eddd024ab1279ef48ae59291e"
9 + />
10 + </div>
11 + <div class="section_2 flex-row justify-between">
12 + <img
13 + class="thumbnail_1"
14 + referrerpolicy="no-referrer"
15 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng66b8991933f35bccdd7664c63b4a7cba9b2c3554be75da299d9c33e4b9efda22"
16 + />
17 + <span class="text_2">入职相关</span>
18 + </div>
19 + <div class="section_3 flex-col">
20 + <div class="list_1 flex-col">
21 + <div
22 + class="list-items_1 flex-col"
23 + v-for="(item, index) in loopData0"
24 + :key="index"
25 + >
26 + <div
27 + class="text-wrapper_1 flex-col"
28 + :style="{ background: item.lanhuBg1 }"
29 + >
30 + <span class="text_3" v-html="item.lanhutext0"></span>
31 + </div>
32 + <div class="box_1 flex-row justify-between">
33 + <div class="image-text_1 flex-row justify-between">
34 + <img
35 + class="label_1"
36 + referrerpolicy="no-referrer"
37 + :src="item.lanhuimage0"
38 + />
39 + <div class="text-group_1 flex-col">
40 + <span class="text_4" v-html="item.lanhutext1"></span>
41 + <span class="text_5" v-html="item.lanhutext2"></span>
42 + </div>
43 + </div>
44 + <img
45 + class="thumbnail_2"
46 + referrerpolicy="no-referrer"
47 + :src="item.lanhuimage1"
48 + />
49 + </div>
50 + <img
51 + class="image_2"
52 + referrerpolicy="no-referrer"
53 + :src="item.lanhuimage2"
54 + />
55 + <div class="box_2 flex-row justify-between">
56 + <div class="image-text_2 flex-row justify-between">
57 + <img
58 + class="label_2"
59 + referrerpolicy="no-referrer"
60 + :src="item.lanhuimage3"
61 + />
62 + <div class="text-group_2 flex-col">
63 + <span class="text_6" v-html="item.lanhutext3"></span>
64 + <span class="text_7" v-html="item.lanhutext4"></span>
65 + </div>
66 + </div>
67 + <img
68 + class="thumbnail_3"
69 + referrerpolicy="no-referrer"
70 + :src="item.lanhuimage4"
71 + />
72 + </div>
73 + <img
74 + class="image_3"
75 + referrerpolicy="no-referrer"
76 + :src="item.lanhuimage5"
77 + />
78 + <div class="box_3 flex-row justify-between">
79 + <div class="image-text_3 flex-row justify-between">
80 + <img
81 + class="label_3"
82 + referrerpolicy="no-referrer"
83 + :src="item.lanhuimage6"
84 + />
85 + <div class="text-group_3 flex-col">
86 + <span class="text_8" v-html="item.lanhutext5"></span>
87 + <span class="text_9" v-html="item.lanhutext6"></span>
88 + </div>
89 + </div>
90 + <img
91 + class="thumbnail_4"
92 + referrerpolicy="no-referrer"
93 + :src="item.lanhuimage7"
94 + />
95 + </div>
96 + </div>
97 + </div>
98 + </div>
99 + <div class="section_4 flex-col">
100 + <img
101 + class="image_4"
102 + referrerpolicy="no-referrer"
103 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbf3e746af52a38753bd540d5f486761a166161ff3c8f2985aa5e994a36349ea4"
104 + />
105 + <div class="box_4 flex-row justify-between">
106 + <div class="image-text_4 flex-col">
107 + <img
108 + class="label_4"
109 + referrerpolicy="no-referrer"
110 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbd9205e4b62cd8bbf2ca836033731f8941362539da1b5092b7238c1d20a8b893"
111 + />
112 + <span class="text-group_4">首页</span>
113 + </div>
114 + <div class="image-text_5 flex-col">
115 + <img
116 + class="label_5"
117 + referrerpolicy="no-referrer"
118 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnge3c905d9bf073c4382e089264cf3a9bbaa6d9f6e2b13ca001c973e0a0e99e546"
119 + />
120 + <span class="text-group_5">AI答疑</span>
121 + </div>
122 + <div class="image-text_6 flex-col">
123 + <img
124 + class="label_6"
125 + referrerpolicy="no-referrer"
126 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd682274e12d83204c6fe38541ed229be1287f4906b1649a2f43087e9a1663141"
127 + />
128 + <span class="text-group_6">我的</span>
129 + </div>
130 + </div>
131 + </div>
132 + <img
133 + class="image_5"
134 + referrerpolicy="no-referrer"
135 + src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng830c4568c4d0141e1fa97f7fad1e075e2178ab08e5613734b08eaf46dcdd4207"
136 + />
137 + </div>
138 +</template>
139 +<script>
140 +export default {
141 + data() {
142 + return {
143 + loopData0: [
144 + {
145 + lanhuBg1:
146 + 'url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf6b5569e98879ac239ffb4ec3f6c7a5f2b80c5212e437f02595f33aa9995c418) 100% no-repeat',
147 + lanhutext0: '入职前',
148 + lanhuimage0:
149 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng06859b32f72027e5238ef7d9544a10963aa1d8a3905e1337201c8c90ec971a73',
150 + lanhutext1: '考试报名',
151 + lanhutext2: '资格考试报名入口',
152 + lanhuimage1:
153 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b',
154 + lanhuimage2:
155 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng3c66f4cdf0985e0a511499c673722e7de823ee66a0a99f8f639b4340544223c8',
156 + lanhuimage3:
157 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng7353de291d4a1ec9219fb1d3186a690eeefb24a32983898bee5d42f2d0bfa542',
158 + lanhutext3: '考试资料及刷题',
159 + lanhutext4: '历年真题及模拟题库',
160 + lanhuimage4:
161 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b',
162 + lanhuimage5:
163 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng3c66f4cdf0985e0a511499c673722e7de823ee66a0a99f8f639b4340544223c8',
164 + lanhuimage6:
165 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf0261465bdc197c6d7b326ef08d5363db4e6e6136190a24e79853b9ffd6c5710',
166 + lanhutext5: '签合约锁人规则',
167 + lanhutext6: '合约条款详解',
168 + lanhuimage7:
169 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b',
170 + },
171 + {
172 + lanhuBg1:
173 + 'url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng06a4afd9fc9387b0a964e8c20ea1f8ed1785620b26c9eaaf1e33e7f0de26123b) 100% no-repeat',
174 + lanhutext0: '入职中',
175 + lanhuimage0:
176 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd0e298e93fb7d17c5ed1147f82cf12b5974ac7db693e30189bf6d90bc2227d0e',
177 + lanhutext1: '各个进度时间线表格',
178 + lanhutext2: '入职进度跟踪表',
179 + lanhuimage1:
180 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b',
181 + lanhuimage2:
182 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng3c66f4cdf0985e0a511499c673722e7de823ee66a0a99f8f639b4340544223c8',
183 + lanhuimage3:
184 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngecfa79355e9db87796e48db52fc2ac902cf54d0421d46e181f99c3d5b862580f',
185 + lanhutext3: '各个财务计划盘及对数',
186 + lanhutext4: '财务计划配置指南',
187 + lanhuimage4:
188 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b',
189 + lanhuimage5:
190 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng3c66f4cdf0985e0a511499c673722e7de823ee66a0a99f8f639b4340544223c8',
191 + lanhuimage6:
192 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngef8f54e9c54d005797f483361f3e7e9d1f9a5911582d00ea5673d5eee5f347ef',
193 + lanhutext5: '基本法对比',
194 + lanhutext6: '公司制度对比分析',
195 + lanhuimage7:
196 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b',
197 + },
198 + {
199 + lanhuBg1:
200 + 'url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng00235c0f21dc26da2ae488cbf0c6b2086fb6901d86410c4173e58f5435b16c68) 100% no-repeat',
201 + lanhutext0: '入职后',
202 + lanhuimage0:
203 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng398d2a4425ca6e60bb10959522ed6a3c311c251413965db8a5b54e66addb6185',
204 + lanhutext1: '公司拿钱必修课',
205 + lanhutext2: '薪酬体系培训',
206 + lanhuimage1:
207 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b',
208 + lanhuimage2:
209 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng3c66f4cdf0985e0a511499c673722e7de823ee66a0a99f8f639b4340544223c8',
210 + lanhuimage3:
211 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng76a23b2f91b0339ed9b03863fb3c20ed55bb6490c4c2e6d0f1ffee7f5fc221e5',
212 + lanhutext3: '升职流程条件',
213 + lanhutext4: '晋升通道说明',
214 + lanhuimage4:
215 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b',
216 + lanhuimage5:
217 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng3c66f4cdf0985e0a511499c673722e7de823ee66a0a99f8f639b4340544223c8',
218 + lanhuimage6:
219 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng996eae54025bcf43a1b831b6b7114e55a84f5d160436e261c8b0ca3b9b622169',
220 + lanhutext5: '必修课程',
221 + lanhutext6: '岗位技能课程',
222 + lanhuimage7:
223 + 'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b',
224 + },
225 + ],
226 + constants: {},
227 + };
228 + },
229 + methods: {},
230 +};
231 +</script>
232 +<style src="./common.css" />
233 +<style src="./index.css" />
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
8 const pages = [ 8 const pages = [
9 'pages/index/index', 9 'pages/index/index',
10 'pages/auth/index', 10 'pages/auth/index',
11 + 'pages/onboarding/index',
11 ] 12 ]
12 13
13 if (process.env.NODE_ENV === 'development') { 14 if (process.env.NODE_ENV === 'development') {
......
1 +export default definePageConfig({
2 + navigationBarTitleText: '入职相关',
3 + navigationStyle: 'custom'
4 +})
1 +<template>
2 + <div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
3 + <!-- Navigation Header -->
4 + <div class="relative w-full h-[300rpx] bg-[#1e3a8a] flex items-center justify-center pt-[40rpx]">
5 + <span class="text-white text-[44rpx] font-normal">入职相关</span>
6 + </div>
7 +
8 + <!-- Content List -->
9 + <div class="px-[40rpx] -mt-[40rpx] relative z-10">
10 + <div v-for="(section, index) in sections" :key="index" class="bg-white rounded-[32rpx] mb-[32rpx] pb-[56rpx] overflow-hidden shadow-sm">
11 + <!-- Section Header -->
12 + <div class="px-[40rpx] py-[32rpx] bg-blue-50">
13 + <span class="text-[#1f2937] text-[32rpx] font-normal">{{ section.title }}</span>
14 + </div>
15 +
16 + <!-- Section Items -->
17 + <div class="flex flex-col">
18 + <div v-for="(item, itemIndex) in section.items" :key="itemIndex" class="flex flex-col">
19 + <div class="flex items-center justify-between px-[40rpx] mt-[56rpx] cursor-pointer" @tap="handleItemClick(item)">
20 + <div class="flex items-center">
21 + <div class="w-[96rpx] h-[96rpx] mr-[32rpx] flex items-center justify-center bg-gray-50 rounded-full">
22 + <component :is="item.icon" class="text-blue-600" size="32" />
23 + </div>
24 + <div class="flex flex-col">
25 + <span class="text-[#1f2937] text-[28rpx] font-normal leading-[40rpx]">{{ item.title }}</span>
26 + <span class="text-[#6b7280] text-[24rpx] mt-[8rpx] leading-[32rpx]">{{ item.subtitle }}</span>
27 + </div>
28 + </div>
29 + <RectRight class="text-gray-400" size="16" />
30 + </div>
31 + <!-- Divider -->
32 + <div v-if="itemIndex < section.items.length - 1" class="w-[626rpx] h-[2rpx] bg-[#e5e7eb] mx-auto mt-[32rpx]"></div>
33 + </div>
34 + </div>
35 + </div>
36 + </div>
37 +
38 + <!-- Tab Bar -->
39 + <div class="fixed bottom-0 left-0 w-full bg-white border-t border-gray-100 pb-[env(safe-area-inset-bottom)] z-50">
40 + <div class="flex justify-around items-center h-[110rpx]">
41 + <div class="flex flex-col items-center justify-center w-1/3" @tap="switchTab('home')">
42 + <Home class="text-gray-400" size="24" />
43 + <span class="text-[#9ca3af] text-[24rpx] mt-[8rpx]">首页</span>
44 + </div>
45 + <div class="flex flex-col items-center justify-center w-1/3" @tap="switchTab('ai')">
46 + <Service class="text-gray-400" size="24" />
47 + <span class="text-[#9ca3af] text-[24rpx] mt-[8rpx]">AI答疑</span>
48 + </div>
49 + <div class="flex flex-col items-center justify-center w-1/3">
50 + <My class="text-[#007aff]" size="24" />
51 + <span class="text-[#007aff] text-[24rpx] mt-[8rpx]">我的</span>
52 + </div>
53 + </div>
54 + </div>
55 + </div>
56 +</template>
57 +
58 +<script setup>
59 +import { ref } from 'vue'
60 +import { useGo } from '@/hooks/useGo'
61 +import {
62 + Edit,
63 + Find,
64 + Order,
65 + Clock,
66 + Checklist,
67 + Check,
68 + Star,
69 + Top,
70 + PlayCircleFill,
71 + RectRight,
72 + Home,
73 + Service,
74 + My
75 +} from '@nutui/icons-vue-taro'
76 +
77 +const go = useGo()
78 +
79 +const sections = ref([
80 + {
81 + title: '入职前',
82 + items: [
83 + {
84 + title: '考试报名',
85 + subtitle: '资格考试报名入口',
86 + icon: Edit
87 + },
88 + {
89 + title: '考试资料及刷题',
90 + subtitle: '历年真题及模拟题库',
91 + icon: Find
92 + },
93 + {
94 + title: '签合约锁人规则',
95 + subtitle: '合约条款详解',
96 + icon: Order
97 + }
98 + ]
99 + },
100 + {
101 + title: '入职中',
102 + items: [
103 + {
104 + title: '各个进度时间线表格',
105 + subtitle: '入职进度跟踪表',
106 + icon: Clock
107 + },
108 + {
109 + title: '各个财务计划盘及对数',
110 + subtitle: '财务计划配置指南',
111 + icon: Checklist
112 + },
113 + {
114 + title: '基本法对比',
115 + subtitle: '公司制度对比分析',
116 + icon: Check
117 + }
118 + ]
119 + },
120 + {
121 + title: '入职后',
122 + items: [
123 + {
124 + title: '公司拿钱必修课',
125 + subtitle: '薪酬体系培训',
126 + icon: Star
127 + },
128 + {
129 + title: '升职流程条件',
130 + subtitle: '晋升通道说明',
131 + icon: Top
132 + },
133 + {
134 + title: '必修课程',
135 + subtitle: '岗位技能课程',
136 + icon: PlayCircleFill
137 + }
138 + ]
139 + }
140 +])
141 +
142 +/**
143 + * Handle item click
144 + * @param {Object} item - Clicked item data
145 + */
146 +const handleItemClick = (item) => {
147 + console.log('Clicked:', item.title)
148 + // TODO: Navigate to respective page
149 +}
150 +
151 +/**
152 + * Switch tab
153 + * @param {string} tab - Tab key
154 + */
155 +const switchTab = (tab) => {
156 + if (tab === 'home') {
157 + go('/pages/index/index')
158 + } else if (tab === 'ai') {
159 + // go('/pages/ai/index') // Assuming there is an AI page
160 + console.log('Switch to AI tab')
161 + }
162 +}
163 +</script>
164 +
165 +<script>
166 +export default {
167 + name: 'OnboardingIndex'
168 +}
169 +</script>