hookehuyr

feat: 新增签单相关页面并优化视觉样式

- 添加签单相关页面 (`src/pages/signing/index.vue`),复用入职相关页面布局结构
- 在应用配置中注册新页面路由
- 为入职相关页面引入渐变色背景系统,修复首个板块与导航栏重叠的布局问题
- 更新项目变更日志以记录本次新增功能与样式优化
...@@ -12,6 +12,8 @@ All notable changes to this project will be documented in this file. ...@@ -12,6 +12,8 @@ All notable changes to this project will be documented in this file.
12 - 实现基于 Tailwind CSS 的页面布局与样式,精确适配设计稿参数 12 - 实现基于 Tailwind CSS 的页面布局与样式,精确适配设计稿参数
13 - 配置 "入职相关" 页面的自定义导航栏样式 13 - 配置 "入职相关" 页面的自定义导航栏样式
14 - 注册新页面路由至 `src/app.config.js` 14 - 注册新页面路由至 `src/app.config.js`
15 +- 新增 "签单相关" 页面 (`src/pages/signing`),复用 "入职相关" 页面布局
16 +- 为 "签单相关" 页面配置自定义导航栏与渐变色背景样式
15 17
16 ### Changed 18 ### Changed
17 - 暂时禁用授权模式功能 (`ENABLE_AUTH_MODE = false`) 19 - 暂时禁用授权模式功能 (`ENABLE_AUTH_MODE = false`)
...@@ -31,6 +33,8 @@ All notable changes to this project will be documented in this file. ...@@ -31,6 +33,8 @@ All notable changes to this project will be documented in this file.
31 - 集成 NutUI 图标组件库,替换原有 SVG/图片图标 33 - 集成 NutUI 图标组件库,替换原有 SVG/图片图标
32 - 优化 "入职相关" 页面样式 (`src/pages/onboarding`),使用 CSS 背景色替代设计稿切图背景 34 - 优化 "入职相关" 页面样式 (`src/pages/onboarding`),使用 CSS 背景色替代设计稿切图背景
33 - 替换 "入职相关" 页面图标为 NutUI 标准图标库,提升加载性能与清晰度 35 - 替换 "入职相关" 页面图标为 NutUI 标准图标库,提升加载性能与清晰度
36 +- 优化 "入职相关" 与 "签单相关" 页面的视觉体验,引入渐变色背景系统(Header 及各板块标题)
37 +- 修复 "入职相关" 页面首个板块与导航栏重叠的布局问题
34 38
35 ### Removed 39 ### Removed
36 - 删除项目所有离线功能相关逻辑 40 - 删除项目所有离线功能相关逻辑
......
...@@ -9,6 +9,7 @@ const pages = [ ...@@ -9,6 +9,7 @@ const pages = [
9 'pages/index/index', 9 'pages/index/index',
10 'pages/auth/index', 10 'pages/auth/index',
11 'pages/onboarding/index', 11 'pages/onboarding/index',
12 + 'pages/signing/index',
12 ] 13 ]
13 14
14 if (process.env.NODE_ENV === 'development') { 15 if (process.env.NODE_ENV === 'development') {
......
1 <template> 1 <template>
2 <div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]"> 2 <div class="min-h-screen bg-[#f9fafb] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
3 <!-- Navigation Header --> 3 <!-- Navigation Header -->
4 - <div class="relative w-full h-[300rpx] bg-[#1e3a8a] flex items-center justify-center pt-[40rpx]"> 4 + <div class="relative w-full h-[300rpx] bg-gradient-to-b from-[#1E3A8A] to-[#2563EB] flex items-center justify-center pt-[40rpx]">
5 <span class="text-white text-[44rpx] font-normal">入职相关</span> 5 <span class="text-white text-[44rpx] font-normal">入职相关</span>
6 </div> 6 </div>
7 7
8 <!-- Content List --> 8 <!-- Content List -->
9 - <div class="px-[40rpx] -mt-[40rpx] relative z-10"> 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"> 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 --> 11 <!-- Section Header -->
12 - <div class="px-[40rpx] py-[32rpx] bg-blue-50"> 12 + <div class="px-[40rpx] py-[32rpx]" :style="{ background: section.bgGradient }">
13 <span class="text-[#1f2937] text-[32rpx] font-normal">{{ section.title }}</span> 13 <span class="text-[#1f2937] text-[32rpx] font-normal">{{ section.title }}</span>
14 </div> 14 </div>
15 15
...@@ -79,6 +79,7 @@ const go = useGo() ...@@ -79,6 +79,7 @@ const go = useGo()
79 const sections = ref([ 79 const sections = ref([
80 { 80 {
81 title: '入职前', 81 title: '入职前',
82 + bgGradient: 'linear-gradient(90deg, #F3E8FF 0%, #E9D5FF 100%)',
82 items: [ 83 items: [
83 { 84 {
84 title: '考试报名', 85 title: '考试报名',
...@@ -99,6 +100,7 @@ const sections = ref([ ...@@ -99,6 +100,7 @@ const sections = ref([
99 }, 100 },
100 { 101 {
101 title: '入职中', 102 title: '入职中',
103 + bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)',
102 items: [ 104 items: [
103 { 105 {
104 title: '各个进度时间线表格', 106 title: '各个进度时间线表格',
...@@ -119,6 +121,7 @@ const sections = ref([ ...@@ -119,6 +121,7 @@ const sections = ref([
119 }, 121 },
120 { 122 {
121 title: '入职后', 123 title: '入职后',
124 + bgGradient: 'linear-gradient(90deg, #FFF7ED 0%, #FFEDD5 100%)',
122 items: [ 125 items: [
123 { 126 {
124 title: '公司拿钱必修课', 127 title: '公司拿钱必修课',
......
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-gradient-to-b from-[#1E3A8A] to-[#2563EB] 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]" :style="{ background: section.bgGradient }">
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 + Shop,
63 + Category,
64 + Check,
65 + Edit,
66 + Checklist,
67 + Cart,
68 + People,
69 + Order,
70 + Clock,
71 + Refresh,
72 + Location,
73 + RectRight,
74 + Home,
75 + Service,
76 + My
77 +} from '@nutui/icons-vue-taro'
78 +
79 +const go = useGo()
80 +
81 +const sections = ref([
82 + {
83 + title: '培训板块',
84 + bgGradient: 'linear-gradient(90deg, #F3E8FF 0%, #E9D5FF 100%)',
85 + items: [
86 + {
87 + title: '公司介绍',
88 + subtitle: '企业背景及发展历程',
89 + icon: Shop
90 + },
91 + {
92 + title: '产品介绍及更新',
93 + subtitle: '最新产品资料库',
94 + icon: Category
95 + }
96 + ]
97 + },
98 + {
99 + title: '签单前',
100 + bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)',
101 + items: [
102 + {
103 + title: '预核保',
104 + subtitle: '核保流程指引',
105 + icon: Check
106 + },
107 + {
108 + title: '做计划书',
109 + subtitle: '方案设计工具',
110 + icon: Edit
111 + }
112 + ]
113 + },
114 + {
115 + title: '签单中',
116 + bgGradient: 'linear-gradient(90deg, #FFF7ED 0%, #FFEDD5 100%)',
117 + items: [
118 + {
119 + title: '信息收集及健康告知模板',
120 + subtitle: '标准表格及注意事项',
121 + icon: Checklist
122 + },
123 + {
124 + title: '缴费方式银行开户',
125 + subtitle: '支付渠道办理指南',
126 + icon: Cart
127 + },
128 + {
129 + title: '体检经验',
130 + subtitle: '体检流程及常见问题',
131 + icon: People
132 + }
133 + ]
134 + },
135 + {
136 + title: '签单后',
137 + bgGradient: 'linear-gradient(90deg, #EFF6FF 0%, #DBEAFE 100%)',
138 + items: [
139 + {
140 + title: '批单跟进',
141 + subtitle: '保单变更处理流程',
142 + icon: Order
143 + },
144 + {
145 + title: '核保/pending',
146 + subtitle: '核保进度查询',
147 + icon: Clock
148 + },
149 + {
150 + title: '续保',
151 + subtitle: '续期服务指引',
152 + icon: Refresh
153 + }
154 + ]
155 + },
156 + {
157 + title: '售后',
158 + bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)',
159 + items: [
160 + {
161 + title: '香港医生资源',
162 + subtitle: '专业医疗机构名录',
163 + icon: Location
164 + }
165 + ]
166 + }
167 +])
168 +
169 +/**
170 + * Handle item click
171 + * @param {Object} item - Clicked item data
172 + */
173 +const handleItemClick = (item) => {
174 + console.log('Clicked:', item.title)
175 + // TODO: Navigate to respective page
176 +}
177 +
178 +/**
179 + * Switch tab
180 + * @param {string} tab - Tab key
181 + */
182 +const switchTab = (tab) => {
183 + if (tab === 'home') {
184 + go('/pages/index/index')
185 + } else if (tab === 'ai') {
186 + // go('/pages/ai/index') // Assuming there is an AI page
187 + console.log('Switch to AI tab')
188 + }
189 +}
190 +</script>
191 +
192 +<script>
193 +export default {
194 + name: 'SigningIndex'
195 +}
196 +</script>