page { background-color: #F5F5F5; } .page { min-height: 100vh; background-color: #F5F5F5; } .content { padding-top: 0; /* 移除padding-top,因为tab页和scroll-view都使用绝对定位 */ margin-top: 0; position: relative; /* 微信小程序:确保内容容器铺满整个视口,底部导航栏是 fixed 定位,不占用文档流 */ height: 100vh !important; min-height: 100vh !important; max-height: 100vh !important; } /* 隐藏导航栏占位区域,避免产生空白 */ .uni-navbar__placeholder { display: none !important; } /* 标签页 - 使用绝对定位紧贴导航栏 */ .tabs { display: flex !important; /* 强制显示 */ visibility: visible !important; /* 强制可见 */ opacity: 1 !important; /* 强制不透明 */ background-color: #FFFFFF; border-bottom: 1px solid #E0E0E0; padding: 0 16rpx; margin-top: 0; position: fixed; /* 改为fixed定位,确保始终可见 */ /* 导航栏高度:statusBar + navbar,动态计算 */ /* 使用内联样式动态设置top值 */ left: 0; right: 0; z-index: 999; /* 提高z-index确保在最上层 */ height: 72rpx; /* 明确设置标签页高度 */ box-sizing: border-box; align-items: center; /* 确保tab栏始终可见 */ will-change: top; /* 优化渲染性能 */ } .tab-item { padding: 24rpx 32rpx; position: relative; } .tab-item text { font-size: 30rpx; color: #666; } .tab-item.active text { color: #333; font-weight: 500; } .tab-item.active::after { content: ''; position: absolute; bottom: 0; left: 32rpx; right: 32rpx; height: 4rpx; background-color: #007AFF; border-radius: 2rpx; } /* 服务记录列表容器 */ /* 标签管理列表区:使用绝对定位,与服务状态列表保持一致 */ .tag-list { /* 使用绝对定位,从tab页底部开始,到底部导航栏结束 */ position: absolute; /* top值通过内联样式动态设置 */ left: 0; right: 0; /* 微信小程序:底部导航栏是 fixed 定位,不占用文档流,容器可以延伸到视口底部 */ bottom: 0 !important; background-color: #F5F5F5; padding: 24rpx 16rpx 0 16rpx; padding-bottom: 0 !important; /* 确保底部没有padding */ box-sizing: border-box; } .service-list-container, .customer-list-container { /* 兼容旧样式,但使用新的 tag-list 样式 */ position: absolute; left: 0; right: 0; bottom: 0 !important; } /* 列表头部 */ .list-header { display: flex; justify-content: space-between; align-items: center; padding: 24rpx 32rpx; background-color: #FFFFFF; border-bottom: 1px solid #F0F0F0; } .total { font-size: 28rpx; color: #666; } .filter-btn { padding: 8rpx 16rpx; background-color: #F5F5F5; border-radius: 8rpx; } .filter-btn text { font-size: 24rpx; color: #666; } /* 服务记录列表 */ .service-list { height: calc(100vh - 420rpx); background-color: #FFFFFF; } .service-item { padding: 32rpx; border-bottom: 1px solid #F0F0F0; background-color: #FFFFFF; } .service-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16rpx; } .service-title { font-size: 32rpx; font-weight: 500; color: #333; } .service-actions { display: flex; align-items: center; } .archive-text { font-size: 26rpx; color: #999; margin-right: 8rpx; } .service-meta { display: flex; align-items: center; margin-bottom: 16rpx; } .service-date { font-size: 24rpx; color: #999; margin-right: 16rpx; } .service-duration { font-size: 24rpx; color: #999; } .service-content { margin-bottom: 24rpx; } .service-desc { font-size: 28rpx; color: #666; line-height: 1.6; } .service-customer { display: flex; align-items: center; margin-bottom: 16rpx; } .customer-avatar { width: 64rpx; height: 64rpx; background-color: #2196F3; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 16rpx; } .avatar-text { font-size: 32rpx; color: #FFFFFF; font-weight: 500; } .customer-name { font-size: 28rpx; color: #333; } .ai-tag { padding-top: 16rpx; border-top: 1px solid #F0F0F0; } .ai-tag text { font-size: 24rpx; color: #999; } /* 服务记录详情弹窗 */ .service-detail-modal { background-color: #FFFFFF; border-radius: 32rpx 32rpx 0 0; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 32rpx; border-bottom: 1px solid #F0F0F0; } .modal-close, .modal-share { width: 48rpx; height: 48rpx; display: flex; align-items: center; justify-content: center; } .modal-title { font-size: 36rpx; font-weight: 600; color: #333; flex: 1; text-align: center; } .modal-date { padding: 16rpx 32rpx; } .modal-date text { font-size: 24rpx; color: #999; } .modal-banner { background-color: #E3F2FD; padding: 24rpx 32rpx; display: flex; justify-content: space-between; align-items: center; margin: 0 32rpx 24rpx; border-radius: 16rpx; } .modal-banner .banner-left { display: flex; align-items: center; flex: 1; } .modal-banner .banner-icon { width: 40rpx; height: 40rpx; background-color: #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12rpx; } .modal-banner .banner-text { font-size: 26rpx; color: #1976D2; flex: 1; } .modal-banner .banner-right { font-size: 28rpx; color: #1976D2; font-weight: 500; margin-left: 16rpx; } /* 音频播放器 */ .audio-player { display: flex; align-items: center; padding: 24rpx 32rpx; margin: 0 32rpx 24rpx; background-color: #F5F5F5; border-radius: 16rpx; } .play-btn { width: 48rpx; height: 48rpx; display: flex; align-items: center; justify-content: center; margin-right: 16rpx; } .progress-bar { flex: 1; height: 4rpx; background-color: #E0E0E0; border-radius: 2rpx; margin: 0 16rpx; position: relative; } .progress-line { width: 30%; height: 100%; background-color: #007AFF; border-radius: 2rpx; position: relative; } .progress-dot { position: absolute; right: -8rpx; top: 50%; transform: translateY(-50%); width: 16rpx; height: 16rpx; background-color: #007AFF; border-radius: 50%; border: 2rpx solid #FFFFFF; } .audio-time { font-size: 24rpx; color: #666; margin-right: 16rpx; min-width: 200rpx; } .speed-btn { padding: 8rpx 16rpx; background-color: #FFFFFF; border-radius: 8rpx; border: 1px solid #E0E0E0; } .speed-btn text { font-size: 24rpx; color: #333; } /* 详情标签页 */ .detail-tabs { display: flex; background-color: #FFFFFF; border-bottom: 1px solid #E0E0E0; padding: 0 32rpx; overflow-x: auto; position: -webkit-sticky; position: sticky; top: 0; z-index: 10; flex-shrink: 0; } .detail-tab-item { padding: 24rpx 16rpx; position: relative; white-space: nowrap; margin-right: 32rpx; } .detail-tab-item text { font-size: 28rpx; color: #666; } .detail-tab-item.active text { color: #333; font-weight: 500; } .detail-tab-item.active::after { content: ''; position: absolute; bottom: 0; left: 16rpx; right: 16rpx; height: 4rpx; background-color: #007AFF; border-radius: 2rpx; } /* 详情内容 */ .detail-content { flex: 1; padding: 24rpx 32rpx; background-color: #FFFFFF; overflow-y: auto; min-height: 0; } .summary-item { padding: 24rpx 0; border-bottom: 1px solid #F0F0F0; display: flex; flex-direction: column; position: relative; padding-right: 40rpx; } .summary-item:last-child { border-bottom: none; } .summary-label { margin-bottom: 12rpx; } .summary-label text { font-size: 28rpx; color: #666; font-weight: 500; } .summary-value { flex: 1; } .summary-value text { font-size: 28rpx; color: #333; line-height: 1.6; } .summary-item uni-icons { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .empty-detail { padding: 80rpx 0; text-align: center; } .empty-detail text { font-size: 28rpx; color: #999; } /* 底部客户信息 */ .modal-footer { display: flex; align-items: center; padding: 24rpx 32rpx; border-top: 1px solid #F0F0F0; background-color: #FFFFFF; } .footer-label { font-size: 28rpx; color: #666; margin: 0 8rpx 0 12rpx; } .footer-customer { font-size: 28rpx; color: #1976D2; flex: 1; } /* 服务表现样式 */ .performance-score { text-align: center; padding: 40rpx 32rpx; background-color: #FFFFFF; border-bottom: 1px solid #F0F0F0; } .score-label { display: block; font-size: 28rpx; color: #666; margin-bottom: 16rpx; } .score-value { display: block; font-size: 72rpx; font-weight: 600; color: #007AFF; } .performance-category { background-color: #FFFFFF; border-bottom: 1px solid #F0F0F0; } .category-header { display: flex; justify-content: space-between; align-items: center; padding: 32rpx; } .category-left { display: flex; align-items: center; flex: 1; } .category-bullet { width: 16rpx; height: 16rpx; border-radius: 50%; margin-right: 16rpx; } .bullet-blue { background-color: #007AFF; } .bullet-gray { background-color: #999; } .category-name { font-size: 30rpx; color: #333; font-weight: 500; } .category-content { padding: 0 32rpx 32rpx; } .performance-banner { background-color: #E3F2FD; padding: 24rpx 32rpx; display: flex; justify-content: space-between; align-items: center; margin-bottom: 24rpx; border-radius: 16rpx; } .performance-banner .banner-left { display: flex; align-items: center; flex: 1; } .performance-banner .banner-icon { width: 40rpx; height: 40rpx; background-color: #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12rpx; } .performance-banner .banner-text { font-size: 26rpx; color: #1976D2; flex: 1; } .performance-banner .banner-right { font-size: 28rpx; color: #1976D2; font-weight: 500; margin-left: 16rpx; } .performance-audio { margin-bottom: 24rpx; } .performance-audio .audio-player { margin: 0; } .performance-item { margin-bottom: 16rpx; } .performance-item.item-completed { background-color: #E8F5E9; border-radius: 12rpx; padding: 16rpx; } .item-content { display: flex; justify-content: space-between; align-items: center; padding: 16rpx 0; } .item-left { display: flex; align-items: center; flex: 1; flex-wrap: wrap; gap: 12rpx; } .item-name { font-size: 28rpx; color: #333; margin-right: 16rpx; } .item-status { font-size: 24rpx; padding: 4rpx 12rpx; border-radius: 8rpx; } .status-completed { background-color: #4CAF50; color: #FFFFFF; } .status-missing { background-color: #F5F5F5; color: #999; } .item-points { font-size: 24rpx; color: #007AFF; font-weight: 500; margin-left: 8rpx; } /* 产品类别标签页 */ .product-category-tabs { background-color: #FFFFFF; border-bottom: 1px solid #E0E0E0; margin-bottom: 24rpx; padding: 0; } .category-tabs-scroll { white-space: nowrap; width: 100%; } .category-tabs-wrapper { display: inline-flex; padding: 0 32rpx; } .category-tab-item { padding: 24rpx 16rpx; position: relative; margin-right: 32rpx; white-space: nowrap; } .category-tab-item text { font-size: 28rpx; color: #666; } .category-tab-item.active text { color: #333; font-weight: 500; } .category-tab-item.active::after { content: ''; position: absolute; bottom: 0; left: 16rpx; right: 16rpx; height: 4rpx; background-color: #007AFF; border-radius: 2rpx; } /* 产品需求清单表格 */ .product-requirement-table { background-color: #FFFFFF; padding: 0; } .requirement-title { padding: 24rpx 32rpx; font-size: 32rpx; font-weight: 600; color: #333; border-bottom: 1px solid #F0F0F0; } .requirement-table { padding: 0 32rpx 24rpx; } .requirement-row { display: flex; padding: 24rpx 0; border-bottom: 1px solid #F0F0F0; } .requirement-row:last-child { border-bottom: none; } .requirement-label { min-width: 200rpx; width: 200rpx; padding-right: 24rpx; } .requirement-label text { font-size: 28rpx; color: #666; font-weight: 500; } .requirement-content { flex: 1; } .requirement-content text { font-size: 28rpx; color: #333; line-height: 1.6; } /* 待办事项列表 */ .todo-list { padding: 0; } .todo-item { padding: 32rpx; border-bottom: 1px solid #F0F0F0; background-color: #FFFFFF; } .todo-item:last-child { border-bottom: none; } .todo-item.todo-completed { background-color: #F5F5F5; opacity: 0.8; } .todo-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16rpx; } .todo-title-wrapper { display: flex; align-items: center; flex: 1; } .todo-status-dot { width: 16rpx; height: 16rpx; border-radius: 50%; margin-right: 12rpx; flex-shrink: 0; } .todo-status-dot.status-pending { background-color: #FF9800; } .todo-status-dot.status-processing { background-color: #2196F3; } .todo-status-dot.status-completed { background-color: #4CAF50; } .todo-title { font-size: 32rpx; font-weight: 500; color: #333; flex: 1; } .todo-status { font-size: 24rpx; padding: 6rpx 16rpx; border-radius: 12rpx; white-space: nowrap; } .todo-status.status-text-pending { background-color: #FFF3E0; color: #FF9800; } .todo-status.status-text-processing { background-color: #E3F2FD; color: #2196F3; } .todo-status.status-text-completed { background-color: #E8F5E9; color: #4CAF50; } .todo-status-wrapper { position: relative; z-index: 10; } .todo-status-clickable { display: flex; align-items: center; } .todo-item.todo-clickable .todo-status-clickable { position: relative; } .todo-menu-fixed { position: fixed; background-color: #FFFFFF; border-radius: 8rpx; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15); z-index: 10000; overflow: hidden; } .todo-menu-item { padding: 24rpx 32rpx; border-bottom: 1px solid #F0F0F0; transition: background-color 0.2s; } .todo-menu-fixed .todo-menu-item:last-child { border-bottom: none; } .todo-menu-item:active { background-color: #F5F5F5; } .todo-menu-item text { font-size: 28rpx; color: #333; } .todo-menu-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.01); z-index: 9999; } .todo-content { margin-bottom: 16rpx; padding: 16rpx; background-color: #F5F5F5; border-radius: 8rpx; } .todo-content text { font-size: 28rpx; color: #666; line-height: 1.6; } .todo-meta { display: flex; flex-wrap: wrap; gap: 16rpx; } .todo-meta-item { font-size: 24rpx; color: #999; } /* 章节概要样式 */ .chapter-summary-list { padding: 0; } .chapter-summary-item { background-color: #FFFFFF; border-radius: 16rpx; padding: 32rpx; margin-bottom: 24rpx; border: 1px solid #F0F0F0; } .chapter-summary-item:last-child { margin-bottom: 0; } .chapter-summary-title { margin-bottom: 24rpx; padding-bottom: 16rpx; border-bottom: 2px solid #007AFF; } .chapter-summary-title text { font-size: 32rpx; font-weight: 600; color: #333; } .chapter-summary-section { margin-bottom: 24rpx; } .chapter-summary-section:last-child { margin-bottom: 0; } .chapter-summary-label { margin-bottom: 12rpx; } .chapter-summary-label text { font-size: 28rpx; font-weight: 500; color: #666; } .chapter-summary-content { background-color: #F5F5F5; border-radius: 12rpx; padding: 20rpx; } .chapter-summary-content text { font-size: 28rpx; color: #333; line-height: 1.8; } /* 录音列表弹窗样式 */ .audio-list-modal { background-color: #FFFFFF; border-radius: 32rpx 32rpx 0 0; max-height: 90vh; height: 90vh; display: flex; flex-direction: column; overflow: hidden; } .audio-list-content { flex: 1; padding: 24rpx 32rpx; box-sizing: border-box; background-color: #F5F5F5; min-height: 0; /* 配合 flex: 1 使用,确保可以滚动 */ height: 100%; } .audio-list-item { background-color: #FFFFFF; border-radius: 16rpx; padding: 32rpx; margin-bottom: 24rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04); } .audio-item-header { margin-bottom: 16rpx; display: flex; align-items: center; } .audio-play-btn { min-width: 80rpx; height: 56rpx; padding: 0 20rpx; display: flex; align-items: center; justify-content: center; margin-right: 16rpx; cursor: pointer; border-radius: 8rpx; transition: background-color 0.2s; flex-shrink: 0; background-color: #F5F5F5; position: relative; z-index: 1; } .audio-play-btn:active { background-color: #E0E0E0; } .audio-play-text { font-size: 24rpx; color: #2A68FF; font-weight: 500; line-height: 1; } .audio-play-text--playing { color: #FF3B30; } .audio-item-name { font-size: 32rpx; font-weight: 500; color: #333; flex: 1; } .audio-item-info { margin-bottom: 16rpx; } .audio-item-text { font-size: 28rpx; color: #666; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .audio-item-text--empty { color: #999; font-style: italic; } .audio-item-transcribe { display: flex; align-items: center; } .transcribe-btn { padding: 12rpx 24rpx; background-color: #007AFF; border-radius: 8rpx; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s, opacity 0.2s; } .transcribe-btn:active { background-color: #0056CC; } .transcribe-btn--loading { opacity: 0.6; background-color: #999; cursor: not-allowed; } .transcribe-btn text { font-size: 26rpx; color: #FFFFFF; font-weight: 500; } .audio-item-meta { display: flex; flex-wrap: nowrap; gap: 16rpx; padding-top: 16rpx; border-top: 1px solid #F0F0F0; align-items: center; } .audio-meta-item { font-size: 24rpx; color: #999; white-space: nowrap; flex-shrink: 0; } .audio-list-empty { padding: 48rpx 0; text-align: center; color: #999; font-size: 28rpx; } /* 录音文本内容弹框样式 */ /* 提高文本内容弹框的层级,确保显示在录音列表弹框上方 */ /* 通过深度选择器覆盖uni-popup的z-index */ .text-modal-popup { z-index: 1000 !important; } .text-modal-popup .uni-popup { z-index: 1000 !important; } .text-modal { width: 100%; height: 80vh; max-height: 80vh; background-color: #FFFFFF; border-radius: 24rpx; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12); position: relative; } .text-modal-header { padding: 32rpx; border-bottom: 1px solid #F0F0F0; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .text-modal-title { font-size: 32rpx; font-weight: 600; color: #333; } .text-modal-close { width: 48rpx; height: 48rpx; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; transition: background-color 0.2s; } .text-modal-close:active { background-color: #F5F5F5; } .text-modal-content { flex: 1; height: 0; min-height: 0; box-sizing: border-box; } .text-modal-text { font-size: 28rpx; color: #333; line-height: 1.8; white-space: pre-wrap; word-wrap: break-word; word-break: break-all; display: block; padding: 32rpx; box-sizing: border-box; }