hookehuyr

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

- 添加签单相关页面 (`src/pages/signing/index.vue`),复用入职相关页面布局结构
- 在应用配置中注册新页面路由
- 为入职相关页面引入渐变色背景系统,修复首个板块与导航栏重叠的布局问题
- 更新项目变更日志以记录本次新增功能与样式优化
......@@ -12,6 +12,8 @@ All notable changes to this project will be documented in this file.
- 实现基于 Tailwind CSS 的页面布局与样式,精确适配设计稿参数
- 配置 "入职相关" 页面的自定义导航栏样式
- 注册新页面路由至 `src/app.config.js`
- 新增 "签单相关" 页面 (`src/pages/signing`),复用 "入职相关" 页面布局
- 为 "签单相关" 页面配置自定义导航栏与渐变色背景样式
### Changed
- 暂时禁用授权模式功能 (`ENABLE_AUTH_MODE = false`)
......@@ -31,6 +33,8 @@ All notable changes to this project will be documented in this file.
- 集成 NutUI 图标组件库,替换原有 SVG/图片图标
- 优化 "入职相关" 页面样式 (`src/pages/onboarding`),使用 CSS 背景色替代设计稿切图背景
- 替换 "入职相关" 页面图标为 NutUI 标准图标库,提升加载性能与清晰度
- 优化 "入职相关" 与 "签单相关" 页面的视觉体验,引入渐变色背景系统(Header 及各板块标题)
- 修复 "入职相关" 页面首个板块与导航栏重叠的布局问题
### Removed
- 删除项目所有离线功能相关逻辑
......
......@@ -9,6 +9,7 @@ const pages = [
'pages/index/index',
'pages/auth/index',
'pages/onboarding/index',
'pages/signing/index',
]
if (process.env.NODE_ENV === 'development') {
......
<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]">
<div class="relative w-full h-[300rpx] bg-gradient-to-b from-[#1E3A8A] to-[#2563EB] 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 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">
<div class="px-[40rpx] py-[32rpx]" :style="{ background: section.bgGradient }">
<span class="text-[#1f2937] text-[32rpx] font-normal">{{ section.title }}</span>
</div>
......@@ -79,6 +79,7 @@ const go = useGo()
const sections = ref([
{
title: '入职前',
bgGradient: 'linear-gradient(90deg, #F3E8FF 0%, #E9D5FF 100%)',
items: [
{
title: '考试报名',
......@@ -99,6 +100,7 @@ const sections = ref([
},
{
title: '入职中',
bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)',
items: [
{
title: '各个进度时间线表格',
......@@ -119,6 +121,7 @@ const sections = ref([
},
{
title: '入职后',
bgGradient: 'linear-gradient(90deg, #FFF7ED 0%, #FFEDD5 100%)',
items: [
{
title: '公司拿钱必修课',
......
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-gradient-to-b from-[#1E3A8A] to-[#2563EB] 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]" :style="{ background: section.bgGradient }">
<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 {
Shop,
Category,
Check,
Edit,
Checklist,
Cart,
People,
Order,
Clock,
Refresh,
Location,
RectRight,
Home,
Service,
My
} from '@nutui/icons-vue-taro'
const go = useGo()
const sections = ref([
{
title: '培训板块',
bgGradient: 'linear-gradient(90deg, #F3E8FF 0%, #E9D5FF 100%)',
items: [
{
title: '公司介绍',
subtitle: '企业背景及发展历程',
icon: Shop
},
{
title: '产品介绍及更新',
subtitle: '最新产品资料库',
icon: Category
}
]
},
{
title: '签单前',
bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)',
items: [
{
title: '预核保',
subtitle: '核保流程指引',
icon: Check
},
{
title: '做计划书',
subtitle: '方案设计工具',
icon: Edit
}
]
},
{
title: '签单中',
bgGradient: 'linear-gradient(90deg, #FFF7ED 0%, #FFEDD5 100%)',
items: [
{
title: '信息收集及健康告知模板',
subtitle: '标准表格及注意事项',
icon: Checklist
},
{
title: '缴费方式银行开户',
subtitle: '支付渠道办理指南',
icon: Cart
},
{
title: '体检经验',
subtitle: '体检流程及常见问题',
icon: People
}
]
},
{
title: '签单后',
bgGradient: 'linear-gradient(90deg, #EFF6FF 0%, #DBEAFE 100%)',
items: [
{
title: '批单跟进',
subtitle: '保单变更处理流程',
icon: Order
},
{
title: '核保/pending',
subtitle: '核保进度查询',
icon: Clock
},
{
title: '续保',
subtitle: '续期服务指引',
icon: Refresh
}
]
},
{
title: '售后',
bgGradient: 'linear-gradient(90deg, #F0FDF4 0%, #DCFCE7 100%)',
items: [
{
title: '香港医生资源',
subtitle: '专业医疗机构名录',
icon: Location
}
]
}
])
/**
* 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: 'SigningIndex'
}
</script>