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; min-height: 100vh; /* 确保content有足够高度 */ } /* 隐藏导航栏占位区域(红色区域) */ .uni-navbar__placeholder { display: none !important; height: 0 !important; } .uni-navbar__placeholder-view { display: none !important; height: 0 !important; } /* 隐藏导航栏底部边框 */ .uni-navbar--border { border-bottom: none !important; } /* 标签页 - 使用绝对定位紧贴导航栏,消除红色空白区域 */ .tabs { display: flex; background-color: #FFFFFF; border-bottom: 1px solid #E0E0E0; padding: 0 16rpx; margin-top: 0; position: absolute; top: 88rpx; left: 0; right: 0; z-index: 1; } .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; } /* 服务状态列表 */ .service-status-list { /* 使用绝对定位,从tab页底部开始,高度计算:100vh - 导航栏(88rpx) - tab页(72rpx) - 底部导航栏(96rpx) */ position: absolute; top: 160rpx; /* 导航栏(88rpx) + tab页(72rpx) = 160rpx */ left: 0; right: 0; bottom: 96rpx; /* 底部导航栏高度 */ background-color: #F5F5F5; padding: 24rpx 16rpx 0 16rpx; /* 顶部24rpx间距(与列表项间距一致),底部0 */ box-sizing: border-box; } /* 标签管理列表区:使用绝对定位,与service-status-list保持一致 */ .tag-list { /* 使用绝对定位,从tab页底部开始,高度计算:100vh - 导航栏(88rpx) - tab页(72rpx) - 底部导航栏(96rpx) */ position: absolute; top: 160rpx; /* 导航栏(88rpx) + tab页(72rpx) = 160rpx */ left: 0; right: 0; bottom: 96rpx; /* 底部导航栏高度 */ /* 如果需要缩小高度,可以调整bottom值,比如 bottom: calc(96rpx + (100vh - 88rpx - 72rpx - 96rpx) * 0.3); */ } .service-status-toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 8rpx; /* 增加间距,避免元素被挤压 */ padding: 12rpx 8rpx; /* 增加内边距,给搜索框更多空间 */ margin-bottom: 24rpx; /* 与列表项间距保持一致(24rpx) */ background-color: #F8F8FA; border-radius: 8rpx; border: 1px solid #EFEFF2; overflow-x: auto; min-height: 64rpx; /* 设置最小高度,确保搜索区域不被挤压 */ box-sizing: border-box; } .toolbar-total { font-size: 24rpx; color: #666; white-space: nowrap; flex-shrink: 0; margin-right: 8rpx; /* 增加右边距,与搜索框保持距离 */ line-height: 1.2; padding: 0 4rpx; /* 增加左右内边距 */ } .toolbar-input { flex: 1; min-width: 120rpx; /* 增加最小宽度,避免被挤压变形 */ max-width: 200rpx; /* 设置最大宽度,保持合理比例 */ height: 56rpx; /* 稍微增加高度,提升可用性 */ line-height: 56rpx; background-color: #F5F6FA; border-radius: 8rpx; padding: 0 12rpx; /* 增加左右内边距 */ font-size: 24rpx; border: 1px solid transparent; box-sizing: border-box; flex-shrink: 1; /* 允许适当收缩,但保持最小宽度 */ } .toolbar-actions { display: flex; align-items: center; margin-left: auto; flex-shrink: 0; gap: 8rpx; /* 增加按钮之间的间距 */ } .toolbar-btn { padding: 0 12rpx; /* 增加左右内边距 */ height: 56rpx; /* 与输入框高度保持一致 */ min-width: 56rpx; color: #2A68FF; display: flex; align-items: center; justify-content: center; gap: 4rpx; /* 增加图标和文字之间的间距 */ font-size: 24rpx; font-weight: 400; line-height: 1; box-sizing: border-box; } .service-card { width: 100%; box-sizing: border-box; background-color: #FFFFFF; border-radius: 16rpx; padding: 32rpx; margin-bottom: 24rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04); overflow: visible; /* 确保左右padding完全对称,所有内容都在padding范围内 */ } /* 标签卡片特殊处理 */ .service-card.tag-card-item { padding-left: 32rpx; padding-right: 32rpx; padding-top: 32rpx; padding-bottom: 32rpx; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; width: 100%; box-sizing: border-box; padding: 0; margin: 0; /* 确保头部内容在卡片padding范围内 */ } .staff-info { display: flex; align-items: center; flex: 1; min-width: 0; margin: 0; padding: 0; } .staff-avatar { width: 64rpx; height: 64rpx; background-color: #2196F3; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 16rpx; margin-left: 0; margin-top: 0; margin-bottom: 0; flex-shrink: 0; } .avatar-text { font-size: 32rpx; color: #FFFFFF; font-weight: 500; } .staff-name { font-size: 32rpx; font-weight: 500; color: #333; } .service-status { display: flex; align-items: center; gap: 8rpx; } .service-status text { font-size: 26rpx; color: #007AFF; } .customer-tags { display: flex; flex-wrap: wrap; margin-bottom: 20rpx; gap: 12rpx; box-sizing: border-box; margin-left: 0; margin-right: 0; padding: 0; /* 确保标签容器不会超出卡片padding范围 */ width: 100%; max-width: 100%; } .customer-info { margin-bottom: 16rpx; display: flex; flex-direction: column; gap: 8rpx; box-sizing: border-box; margin-left: 0; margin-right: 0; padding: 0; /* 确保信息容器不会超出卡片padding范围 */ width: 100%; max-width: 100%; } .customer-name, .customer-phone { font-size: 28rpx; color: #555; } .tag-item { padding: 8rpx 16rpx; border-radius: 8rpx; box-sizing: border-box; word-wrap: break-word; word-break: break-all; /* 确保标签项不会超出卡片padding范围,允许换行 */ display: inline-block; max-width: 100%; } .tag-blue { background-color: #E3F2FD; } .tag-blue text { font-size: 24rpx; color: #1976D2; } .tag-orange { background-color: #FFF3E0; } .tag-orange text { font-size: 24rpx; color: #F57C00; } /* AI提醒 */ .ai-alert { border-radius: 8rpx; padding: 20rpx; margin-bottom: 20rpx; } .alert-risk-box { background-color: #FFF5F5; } .alert-reminder-box { background-color: #F5F5F5; } .alert-header { display: flex; align-items: center; margin-bottom: 12rpx; } .alert-icon { margin-right: 8rpx; } .icon-circle { width: 24rpx; height: 24rpx; border: 2rpx solid #333; border-radius: 50%; position: relative; } .icon-circle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8rpx; height: 8rpx; background-color: #333; border-radius: 50%; } .alert-title { font-size: 28rpx; font-weight: 500; color: #333; } .alert-content { font-size: 26rpx; line-height: 1.6; } .alert-risk-text { color: #FF5722; } .alert-reminder-text { color: #666; } .alert-list { display: flex; flex-direction: column; gap: 8rpx; } .alert-item { display: flex; align-items: flex-start; } .alert-item::before { content: '•'; margin-right: 8rpx; color: #666; } .alert-item text { font-size: 26rpx; color: #666; line-height: 1.6; } .service-duration { padding-top: 16rpx; border-top: 1px solid #F0F0F0; } .service-duration text { font-size: 26rpx; color: #999; } .service-action-btn { padding: 6rpx 16rpx; border-radius: 4rpx; font-size: 26rpx; font-weight: 400; display: flex; align-items: center; justify-content: center; margin-right: 12rpx; cursor: pointer; } .service-action-btn--finish { color: #007AFF; background-color: transparent; } .service-action-btn--finish:active { opacity: 0.7; } .service-status-empty { padding: 48rpx 0; text-align: center; color: #999; font-size: 28rpx; } /* 开始接待表单样式 */ .reception-form { /* 使用绝对定位,从tab页底部开始,高度计算:100vh - 导航栏(88rpx) - tab页(72rpx) - 底部导航栏(96rpx) */ position: absolute; top: 160rpx; /* 导航栏(88rpx) + tab页(72rpx) = 160rpx */ left: 0; right: 0; bottom: 96rpx; /* 底部导航栏高度 */ background-color: #F5F5F5; padding: 24rpx 16rpx 0 16rpx; /* 顶部24rpx间距(与列表项间距一致),底部0 */ box-sizing: border-box; } .form-card { width: 100%; box-sizing: border-box; background-color: #ffffff; border-radius: 16rpx; padding: 32rpx 24rpx; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04); margin-bottom: 32rpx; } .form-item { display: flex; align-items: center; margin-bottom: 32rpx; } /* 对于包含 textarea 的表单项,label 顶部对齐 */ .form-item--textarea { align-items: flex-start; } .gender-radio-group { flex: 1; display: flex; gap: 32rpx; flex-wrap: wrap; } .gender-radio { display: flex; align-items: center; gap: 12rpx; } .gender-radio__text { color: #374151; font-size: 28rpx; } .form-item:last-child { margin-bottom: 0; } .form-item__label { font-size: 28rpx; color: #333; font-weight: 500; /* 原 160rpx,缩小 20% 以减小与输入框的间距 */ width: 128rpx; flex-shrink: 0; } .form-item--half { width: 50%; } .form-item__input { flex: 1; height: 88rpx; background-color: #f9fafb; border-radius: 12rpx; padding: 0 24rpx; font-size: 28rpx; color: #333; box-sizing: border-box; } .form-item__text { flex: 1; height: 88rpx; background-color: #f9fafb; border-radius: 12rpx; padding: 0 24rpx; display: flex; align-items: center; box-sizing: border-box; } .form-item__text text { font-size: 28rpx; color: #333; } .form-item__picker { flex: 1; height: 88rpx; background-color: #f9fafb; border-radius: 12rpx; padding: 0 24rpx; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; } .form-item__picker-text { font-size: 28rpx; color: #333; } .form-item__picker-placeholder { font-size: 28rpx; color: #9ca3af; } .form-item__picker-icon { font-size: 24rpx; color: #9ca3af; } .tag-select-wrapper { position: relative; flex: 1; } .tag-select { width: 100%; height: 88rpx; background-color: #f9fafb; border-radius: 12rpx; padding: 0 24rpx; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; border: 1px solid transparent; } .tag-select-dropdown { position: absolute; top: 100%; left: 160rpx; right: 0; background-color: #fff; border-radius: 16rpx; box-shadow: 0 12rpx 30rpx rgba(15, 23, 42, 0.1); margin-top: 8rpx; z-index: 11; padding: 12rpx 0; } .tag-select-dropdown__item { padding: 20rpx 32rpx; } .tag-select-dropdown__item text { font-size: 28rpx; color: #374151; } .tag-select-dropdown__item text.active { color: #2A68FF; font-weight: 500; } .tag-select-dropdown__item:active { background-color: #f5f7fb; } .tag-select-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: transparent; z-index: 10; } .form-actions { display: flex; gap: 24rpx; padding-bottom: 40rpx; } .form-actions--triple { gap: 16rpx; } .form-btn { flex: 1; height: 88rpx; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; } .form-btn--cancel { background-color: #f3f4f6; } .form-btn--save { /* 调浅主按钮色,使页面更柔和 */ background-color: #4C8DFF; } .form-btn--start { background-color: #10B981; } .form-btn__text { font-size: 32rpx; font-weight: 500; } .form-btn--cancel .form-btn__text { color: #6b7280; } .form-btn--save .form-btn__text { color: #ffffff; } /* 标签管理样式 - 添加表单 */ .tag-management { /* 使用绝对定位,从tab页底部开始,高度计算:100vh - 导航栏(88rpx) - tab页(72rpx) - 底部导航栏(96rpx) */ position: absolute; top: 160rpx; /* 导航栏(88rpx) + tab页(72rpx) = 160rpx */ left: 0; right: 0; bottom: 96rpx; /* 底部导航栏高度 */ background-color: #F5F5F5; box-sizing: border-box; } /* 标签卡片操作菜单 */ .tag-card-item { position: relative; } .tag-card-action-btn { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-left: auto; margin-right: 0; margin-top: 0; margin-bottom: 0; flex-shrink: 0; flex-grow: 0; position: relative; padding: 0; /* 确保按钮在卡片padding范围内,距离右边框32rpx */ } .tag-card-action-btn uni-icons { display: block; margin: 0; padding: 0; line-height: 1; } .tag-card-action-btn:active { opacity: 0.7; } .tag-action-menu { position: absolute; top: 60rpx; right: 32rpx; width: 160rpx; background-color: #FFFFFF; border-radius: 12rpx; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15); z-index: 100; overflow: hidden; margin-right: 0; } .tag-action-menu-item { padding: 24rpx 32rpx; font-size: 28rpx; color: #333; text-align: center; background-color: #FFFFFF; } .tag-action-menu-item:active { background-color: #F5F5F5; } .tag-action-menu-item--danger { color: #FF5722; } .tag-action-menu-divider { height: 1rpx; background-color: #E0E0E0; margin: 0 16rpx; } .tag-action-menu-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: transparent; z-index: 99; } .tag-form { height: 100%; padding: 24rpx 32rpx; box-sizing: border-box; } /* 标签弹窗整体高度控制在 70% 视窗,内部通过尺寸缩减而非拉伸变形 */ .tag-management { max-height: 70vh; } .tag-management .tag-form { max-height: 70vh; } /* 弹窗内部元素高度约 80%(缩减 padding/字号/高度),保持比例一致 */ .tag-management .form-card { padding: 24rpx 20rpx; margin-bottom: 24rpx; } .tag-management .form-item { margin-bottom: 24rpx; } .tag-management .form-item__label { font-size: 26rpx; } .tag-management .form-item__input, .tag-management .form-item__text, .tag-management .form-item__picker, .tag-management .tag-select { height: 70rpx; /* 约为原 88rpx 的 80% */ padding: 0 20rpx; font-size: 26rpx; } .tag-management .form-item__picker-icon { font-size: 22rpx; } .tag-management .tag-select-dropdown__item { padding: 16rpx 28rpx; } .tag-management .tag-select-dropdown__item text { font-size: 26rpx; } .tag-management .form-item__textarea { padding: 16rpx; font-size: 26rpx; line-height: 1.5; } /* 详情与备注区域缩到约 50% 高度 */ .tag-management .form-item__textarea--detail { min-height: 60rpx; } .tag-management .form-item__textarea--remark { min-height: 50rpx; } .tag-management .form-actions { padding-bottom: 24rpx; gap: 16rpx; } .tag-management .form-btn { height: 72rpx; /* 约为原 88rpx 的 80% */ font-size: 28rpx; } .form-item__textarea { flex: 1; min-height: 100rpx; background-color: #f9fafb; border-radius: 12rpx; padding: 24rpx; font-size: 28rpx; color: #333; box-sizing: border-box; line-height: 1.6; } .form-item__textarea--detail { min-height: 100rpx; } .form-item__textarea--remark { min-height: 88rpx; } /* 确保包含 textarea 的表单项 label 在顶部对齐 */ .form-item--textarea .form-item__label { padding-top: 24rpx; } /* 开关样式 */ .form-item switch { margin-left: auto; }