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.
- 初始化项目 Git 仓库
- 创建 .gitignore 配置文件
- 创建并切换到 develop 分支
- 新增 "入职相关" 页面 (`src/pages/onboarding`)，1:1 还原设计稿 UI
- 实现基于 Tailwind CSS 的页面布局与样式，精确适配设计稿参数
- 配置 "入职相关" 页面的自定义导航栏样式
- 注册新页面路由至 `src/app.config.js`
### Changed
- 暂时禁用授权模式功能 (`ENABLE_AUTH_MODE = false`)
......@@ -25,6 +29,8 @@ All notable changes to this project will be documented in this file.
- 重构首页样式 (`src/pages/index`)，全面采用 Tailwind CSS 替代 Less
- 替换静态图片资源为 Picsum 随机图源，提升演示灵活性
- 集成 NutUI 图标组件库，替换原有 SVG/图片图标
- 优化 "入职相关" 页面样式 (`src/pages/onboarding`)，使用 CSS 背景色替代设计稿切图背景
- 替换 "入职相关" 页面图标为 NutUI 标准图标库，提升加载性能与清晰度
### Removed
- 删除项目所有离线功能相关逻辑
......
.page {
background-color: rgba(255, 255, 255, 1);
position: relative;
width: 393px;
height: 1333px;
overflow: hidden;
}
.section_1 {
background-color: rgba(30, 58, 138, 1);
width: 393px;
padding: 12px 20px 12px 20px;
}
.text_1 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.image_1 {
width: 64px;
height: 16px;
margin: 2px 0 2px 0;
}
.section_2 {
width: 393px;
background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng5ae87c5e9a86a0d640e93f4a87e612d1c4e6c25e22d3f2600417bdc2e27b7b31)
100% no-repeat;
background-size: 100% 100%;
padding: 20px 153px 20px 20px;
}
.thumbnail_1 {
width: 20px;
height: 20px;
margin: 6px 0 7px 0;
}
.text_2 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 22px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 33px;
}
.section_3 {
background-color: rgba(249, 250, 251, 1);
padding: 24px 20px 96px 20px;
}
.list_1 {
height: 998px;
}
.list-items_1 {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
background-color: rgba(255, 255, 255, 1);
border-radius: 16px;
margin-bottom: 16px;
padding-bottom: 28px;
}
.text-wrapper_1 {
background-size: 100% 100%;
padding: 16px 285px 16px 20px;
}
.text_3 {
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 16px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 24px;
}
.box_1 {
width: 313px;
align-self: center;
margin-top: 28px;
}
.image-text_1 {
width: 160px;
}
.label_1 {
width: 48px;
height: 48px;
}
.text-group_1 {
margin: 4px 0 4px 0;
}
.text_4 {
width: 126px;
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin-right: 40px;
}
.text_5 {
width: 96px;
overflow-wrap: break-word;
color: rgba(107, 114, 128, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
margin-top: 4px;
}
.thumbnail_2 {
width: 20px;
height: 20px;
margin: 14px 0 14px 0;
}
.image_2 {
width: 313px;
height: 1px;
align-self: center;
margin-top: 16px;
}
.box_2 {
width: 313px;
align-self: center;
margin-top: 16px;
}
.image-text_2 {
width: 172px;
}
.label_2 {
width: 48px;
height: 48px;
}
.text-group_2 {
margin: 4px 0 4px 0;
}
.text_6 {
width: 140px;
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
margin-right: 10px;
}
.text_7 {
width: 108px;
overflow-wrap: break-word;
color: rgba(107, 114, 128, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
margin-top: 4px;
}
.thumbnail_3 {
width: 20px;
height: 20px;
margin: 14px 0 14px 0;
}
.image_3 {
width: 313px;
height: 1px;
align-self: center;
margin-top: 16px;
}
.box_3 {
width: 313px;
align-self: center;
margin-top: 16px;
}
.image-text_3 {
width: 162px;
}
.label_3 {
width: 48px;
height: 48px;
}
.text-group_3 {
margin: 4px 0 4px 0;
}
.text_8 {
width: 98px;
overflow-wrap: break-word;
color: rgba(31, 41, 55, 1);
font-size: 14px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 20px;
}
.text_9 {
width: 96px;
overflow-wrap: break-word;
color: rgba(107, 114, 128, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: left;
white-space: nowrap;
line-height: 16px;
margin: 4px 26px 0 0;
}
.thumbnail_4 {
width: 20px;
height: 20px;
margin: 14px 0 14px 0;
}
.section_4 {
background-color: rgba(255, 255, 255, 1);
padding-bottom: 9px;
}
.image_4 {
width: 393px;
height: 1px;
}
.box_4 {
width: 269px;
align-self: center;
margin-top: 10px;
}
.image-text_4 {
}
.label_4 {
width: 24px;
height: 24px;
}
.text-group_4 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
margin-top: 4px;
}
.image-text_5 {
}
.label_5 {
width: 24px;
height: 24px;
align-self: center;
}
.text-group_5 {
overflow-wrap: break-word;
color: rgba(156, 163, 175, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
margin-top: 4px;
}
.image-text_6 {
}
.label_6 {
width: 24px;
height: 24px;
}
.text-group_6 {
overflow-wrap: break-word;
color: rgba(0, 122, 255, 1);
font-size: 12px;
font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
font-weight: normal;
text-align: center;
white-space: nowrap;
line-height: 16px;
margin-top: 4px;
}
.image_5 {
width: 393px;
height: 34px;
}
<template>
<div class="page flex-col">
<div class="section_1 flex-row justify-between">
<span class="text_1">9:41</span>
<img
class="image_1"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng413f9d678a24a9b746fdc981fa579b56b2cbd98eddd024ab1279ef48ae59291e"
/>
</div>
<div class="section_2 flex-row justify-between">
<img
class="thumbnail_1"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng66b8991933f35bccdd7664c63b4a7cba9b2c3554be75da299d9c33e4b9efda22"
/>
<span class="text_2">入职相关</span>
</div>
<div class="section_3 flex-col">
<div class="list_1 flex-col">
<div
class="list-items_1 flex-col"
v-for="(item, index) in loopData0"
:key="index"
>
<div
class="text-wrapper_1 flex-col"
:style="{ background: item.lanhuBg1 }"
>
<span class="text_3" v-html="item.lanhutext0"></span>
</div>
<div class="box_1 flex-row justify-between">
<div class="image-text_1 flex-row justify-between">
<img
class="label_1"
referrerpolicy="no-referrer"
:src="item.lanhuimage0"
/>
<div class="text-group_1 flex-col">
<span class="text_4" v-html="item.lanhutext1"></span>
<span class="text_5" v-html="item.lanhutext2"></span>
</div>
</div>
<img
class="thumbnail_2"
referrerpolicy="no-referrer"
:src="item.lanhuimage1"
/>
</div>
<img
class="image_2"
referrerpolicy="no-referrer"
:src="item.lanhuimage2"
/>
<div class="box_2 flex-row justify-between">
<div class="image-text_2 flex-row justify-between">
<img
class="label_2"
referrerpolicy="no-referrer"
:src="item.lanhuimage3"
/>
<div class="text-group_2 flex-col">
<span class="text_6" v-html="item.lanhutext3"></span>
<span class="text_7" v-html="item.lanhutext4"></span>
</div>
</div>
<img
class="thumbnail_3"
referrerpolicy="no-referrer"
:src="item.lanhuimage4"
/>
</div>
<img
class="image_3"
referrerpolicy="no-referrer"
:src="item.lanhuimage5"
/>
<div class="box_3 flex-row justify-between">
<div class="image-text_3 flex-row justify-between">
<img
class="label_3"
referrerpolicy="no-referrer"
:src="item.lanhuimage6"
/>
<div class="text-group_3 flex-col">
<span class="text_8" v-html="item.lanhutext5"></span>
<span class="text_9" v-html="item.lanhutext6"></span>
</div>
</div>
<img
class="thumbnail_4"
referrerpolicy="no-referrer"
:src="item.lanhuimage7"
/>
</div>
</div>
</div>
</div>
<div class="section_4 flex-col">
<img
class="image_4"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbf3e746af52a38753bd540d5f486761a166161ff3c8f2985aa5e994a36349ea4"
/>
<div class="box_4 flex-row justify-between">
<div class="image-text_4 flex-col">
<img
class="label_4"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngbd9205e4b62cd8bbf2ca836033731f8941362539da1b5092b7238c1d20a8b893"
/>
<span class="text-group_4">首页</span>
</div>
<div class="image-text_5 flex-col">
<img
class="label_5"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPnge3c905d9bf073c4382e089264cf3a9bbaa6d9f6e2b13ca001c973e0a0e99e546"
/>
<span class="text-group_5">AI答疑</span>
</div>
<div class="image-text_6 flex-col">
<img
class="label_6"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd682274e12d83204c6fe38541ed229be1287f4906b1649a2f43087e9a1663141"
/>
<span class="text-group_6">我的</span>
</div>
</div>
</div>
<img
class="image_5"
referrerpolicy="no-referrer"
src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng830c4568c4d0141e1fa97f7fad1e075e2178ab08e5613734b08eaf46dcdd4207"
/>
</div>
</template>
<script>
export default {
data() {
return {
loopData0: [
{
lanhuBg1:
'url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf6b5569e98879ac239ffb4ec3f6c7a5f2b80c5212e437f02595f33aa9995c418) 100% no-repeat',
lanhutext0: '入职前',
lanhuimage0:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng06859b32f72027e5238ef7d9544a10963aa1d8a3905e1337201c8c90ec971a73',
lanhutext1: '考试报名',
lanhutext2: '资格考试报名入口',
lanhuimage1:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b',
lanhuimage2:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng3c66f4cdf0985e0a511499c673722e7de823ee66a0a99f8f639b4340544223c8',
lanhuimage3:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng7353de291d4a1ec9219fb1d3186a690eeefb24a32983898bee5d42f2d0bfa542',
lanhutext3: '考试资料及刷题',
lanhutext4: '历年真题及模拟题库',
lanhuimage4:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b',
lanhuimage5:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng3c66f4cdf0985e0a511499c673722e7de823ee66a0a99f8f639b4340544223c8',
lanhuimage6:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf0261465bdc197c6d7b326ef08d5363db4e6e6136190a24e79853b9ffd6c5710',
lanhutext5: '签合约锁人规则',
lanhutext6: '合约条款详解',
lanhuimage7:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b',
},
{
lanhuBg1:
'url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng06a4afd9fc9387b0a964e8c20ea1f8ed1785620b26c9eaaf1e33e7f0de26123b) 100% no-repeat',
lanhutext0: '入职中',
lanhuimage0:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngd0e298e93fb7d17c5ed1147f82cf12b5974ac7db693e30189bf6d90bc2227d0e',
lanhutext1: '各个进度时间线表格',
lanhutext2: '入职进度跟踪表',
lanhuimage1:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b',
lanhuimage2:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng3c66f4cdf0985e0a511499c673722e7de823ee66a0a99f8f639b4340544223c8',
lanhuimage3:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngecfa79355e9db87796e48db52fc2ac902cf54d0421d46e181f99c3d5b862580f',
lanhutext3: '各个财务计划盘及对数',
lanhutext4: '财务计划配置指南',
lanhuimage4:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b',
lanhuimage5:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng3c66f4cdf0985e0a511499c673722e7de823ee66a0a99f8f639b4340544223c8',
lanhuimage6:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPngef8f54e9c54d005797f483361f3e7e9d1f9a5911582d00ea5673d5eee5f347ef',
lanhutext5: '基本法对比',
lanhutext6: '公司制度对比分析',
lanhuimage7:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b',
},
{
lanhuBg1:
'url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPng00235c0f21dc26da2ae488cbf0c6b2086fb6901d86410c4173e58f5435b16c68) 100% no-repeat',
lanhutext0: '入职后',
lanhuimage0:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng398d2a4425ca6e60bb10959522ed6a3c311c251413965db8a5b54e66addb6185',
lanhutext1: '公司拿钱必修课',
lanhutext2: '薪酬体系培训',
lanhuimage1:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b',
lanhuimage2:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng3c66f4cdf0985e0a511499c673722e7de823ee66a0a99f8f639b4340544223c8',
lanhuimage3:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng76a23b2f91b0339ed9b03863fb3c20ed55bb6490c4c2e6d0f1ffee7f5fc221e5',
lanhutext3: '升职流程条件',
lanhutext4: '晋升通道说明',
lanhuimage4:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b',
lanhuimage5:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng3c66f4cdf0985e0a511499c673722e7de823ee66a0a99f8f639b4340544223c8',
lanhuimage6:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng996eae54025bcf43a1b831b6b7114e55a84f5d160436e261c8b0ca3b9b622169',
lanhutext5: '必修课程',
lanhutext6: '岗位技能课程',
lanhuimage7:
'https://lanhu-oss-2537-2.lanhuapp.com/SketchPng707b53faf6c0e12714b30ddc8728b543d6b41f89ccf653bc8e9af843b5d6034b',
},
],
constants: {},
};
},
methods: {},
};
</script>
<style src="./common.css" />
<style src="./index.css" />
......@@ -8,6 +8,7 @@
const pages = [
'pages/index/index',
'pages/auth/index',
'pages/onboarding/index',
]
if (process.env.NODE_ENV === 'development') {
......
export default definePageConfig({
navigationBarTitleText: '入职相关',
navigationStyle: 'custom'
})
<template>
<div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
<!-- Navigation Header -->
<div class="relative w-full h-[300rpx] bg-[#1e3a8a] flex items-center justify-center pt-[40rpx]">
<span class="text-white text-[44rpx] font-normal">入职相关</span>
</div>
<!-- Content List -->
<div class="px-[40rpx] -mt-[40rpx] relative z-10">
<div v-for="(section, index) in sections" :key="index" class="bg-white rounded-[32rpx] mb-[32rpx] pb-[56rpx] overflow-hidden shadow-sm">
<!-- Section Header -->
<div class="px-[40rpx] py-[32rpx] bg-blue-50">
<span class="text-[#1f2937] text-[32rpx] font-normal">{{ section.title }}</span>
</div>
<!-- Section Items -->
<div class="flex flex-col">
<div v-for="(item, itemIndex) in section.items" :key="itemIndex" class="flex flex-col">
<div class="flex items-center justify-between px-[40rpx] mt-[56rpx] cursor-pointer" @tap="handleItemClick(item)">
<div class="flex items-center">
<div class="w-[96rpx] h-[96rpx] mr-[32rpx] flex items-center justify-center bg-gray-50 rounded-full">
<component :is="item.icon" class="text-blue-600" size="32" />
</div>
<div class="flex flex-col">
<span class="text-[#1f2937] text-[28rpx] font-normal leading-[40rpx]">{{ item.title }}</span>
<span class="text-[#6b7280] text-[24rpx] mt-[8rpx] leading-[32rpx]">{{ item.subtitle }}</span>
</div>
</div>
<RectRight class="text-gray-400" size="16" />
</div>
<!-- Divider -->
<div v-if="itemIndex < section.items.length - 1" class="w-[626rpx] h-[2rpx] bg-[#e5e7eb] mx-auto mt-[32rpx]"></div>
</div>
</div>
</div>
</div>
<!-- Tab Bar -->
<div class="fixed bottom-0 left-0 w-full bg-white border-t border-gray-100 pb-[env(safe-area-inset-bottom)] z-50">
<div class="flex justify-around items-center h-[110rpx]">
<div class="flex flex-col items-center justify-center w-1/3" @tap="switchTab('home')">
<Home class="text-gray-400" size="24" />
<span class="text-[#9ca3af] text-[24rpx] mt-[8rpx]">首页</span>
</div>
<div class="flex flex-col items-center justify-center w-1/3" @tap="switchTab('ai')">
<Service class="text-gray-400" size="24" />
<span class="text-[#9ca3af] text-[24rpx] mt-[8rpx]">AI答疑</span>
</div>
<div class="flex flex-col items-center justify-center w-1/3">
<My class="text-[#007aff]" size="24" />
<span class="text-[#007aff] text-[24rpx] mt-[8rpx]">我的</span>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useGo } from '@/hooks/useGo'
import {
Edit,
Find,
Order,
Clock,
Checklist,
Check,
Star,
Top,
PlayCircleFill,
RectRight,
Home,
Service,
My
} from '@nutui/icons-vue-taro'
const go = useGo()
const sections = ref([
{
title: '入职前',
items: [
{
title: '考试报名',
subtitle: '资格考试报名入口',
icon: Edit
},
{
title: '考试资料及刷题',
subtitle: '历年真题及模拟题库',
icon: Find
},
{
title: '签合约锁人规则',
subtitle: '合约条款详解',
icon: Order
}
]
},
{
title: '入职中',
items: [
{
title: '各个进度时间线表格',
subtitle: '入职进度跟踪表',
icon: Clock
},
{
title: '各个财务计划盘及对数',
subtitle: '财务计划配置指南',
icon: Checklist
},
{
title: '基本法对比',
subtitle: '公司制度对比分析',
icon: Check
}
]
},
{
title: '入职后',
items: [
{
title: '公司拿钱必修课',
subtitle: '薪酬体系培训',
icon: Star
},
{
title: '升职流程条件',
subtitle: '晋升通道说明',
icon: Top
},
{
title: '必修课程',
subtitle: '岗位技能课程',
icon: PlayCircleFill
}
]
}
])
/**
* Handle item click
* @param {Object} item - Clicked item data
*/
const handleItemClick = (item) => {
console.log('Clicked:', item.title)
// TODO: Navigate to respective page
}
/**
* Switch tab
* @param {string} tab - Tab key
*/
const switchTab = (tab) => {
if (tab === 'home') {
go('/pages/index/index')
} else if (tab === 'ai') {
// go('/pages/ai/index') // Assuming there is an AI page
console.log('Switch to AI tab')
}
}
</script>
<script>
export default {
name: 'OnboardingIndex'
}
</script>