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 !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; } /* 服务状态列表容器 */ .service-status-container { /* 使用绝对定位,从tab页底部开始,高度计算:100vh - 导航栏 - tab页 - 底部导航栏(96rpx) */ position: absolute; /* top值通过内联样式动态设置 */ left: 0; right: 0; bottom: 96rpx; /* 底部导航栏高度 */ } /* 标签管理列表区:使用绝对定位,与服务状态列表保持一致 */ .tag-list { /* 使用绝对定位,从tab页底部开始,高度计算:100vh - 导航栏 - tab页 - 底部导航栏(96rpx) */ position: absolute; /* top值通过内联样式动态设置 */ left: 0; right: 0; bottom: 96rpx; /* 底部导航栏高度 */ background-color: #F5F5F5; padding: 24rpx 16rpx 0 16rpx; box-sizing: border-box; } /* 标签管理工具栏样式 */ .service-status-toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 8rpx; padding: 12rpx 8rpx; margin-bottom: 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.tag-card-item { 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; position: relative; } .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; } .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; } /* 标签管理样式 - 添加表单 */ .tag-management { /* 使用绝对定位,从tab页底部开始,高度计算:100vh - 导航栏 - tab页 - 底部导航栏(96rpx) */ position: absolute; /* top值通过内联样式动态设置 */ 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: 32rpx; box-sizing: border-box; } /* 表单卡片样式 */ .form-card { background-color: #FFFFFF; border-radius: 24rpx; padding: 40rpx 24rpx 32rpx 24rpx; margin-bottom: 32rpx; box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06); } /* 第一个表单项特殊处理,确保顶部空间 */ .form-card .form-item:first-child { padding-top: 24rpx; margin-top: 16rpx; } /* 表单项样式 */ .form-item { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start; margin-bottom: 32rpx; min-height: 88rpx; padding-top: 8rpx; box-sizing: border-box; width: 100%; overflow: hidden; justify-content: center; } .form-item:last-child { margin-bottom: 0; } /* 表单项标签样式 */ .form-item__label { font-size: 28rpx; color: #333; font-weight: 500; width: 140rpx; flex-shrink: 0; flex-grow: 0; margin-right: 24rpx; margin-left: 0; padding: 12rpx 0 12rpx 16rpx; white-space: nowrap; box-sizing: border-box; min-height: 88rpx; line-height: 1.4; text-align: left; display: flex; align-items: flex-start; justify-content: flex-start; } /* 输入框样式 */ .form-item__input { flex: 1 !important; flex-shrink: 1 !important; flex-grow: 1 !important; min-width: 0 !important; max-width: none !important; width: auto !important; height: 88rpx; line-height: 88rpx; background-color: #F9FAFB; border: 2rpx solid #E5E7EB; border-radius: 16rpx; padding: 0 24rpx; font-size: 28rpx; color: #333333; box-sizing: border-box; transition: all 0.3s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .form-item__input:focus { border-color: #007AFF; background-color: #FFFFFF; box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1); } /* 文本域样式 */ .form-item__textarea { flex: 1 !important; flex-shrink: 1 !important; flex-grow: 1 !important; min-width: 0 !important; max-width: none !important; width: auto !important; min-height: 160rpx; background-color: #F9FAFB; border: 2rpx solid #E5E7EB; border-radius: 16rpx; padding: 20rpx 24rpx; font-size: 28rpx; color: #333333; box-sizing: border-box; line-height: 1.6; transition: all 0.3s ease; } .form-item__textarea:focus { border-color: #007AFF; background-color: #FFFFFF; box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1); } /* 标签选择器样式 */ .tag-select-wrapper { position: relative; flex: 1; flex-shrink: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; height: 88rpx; } .tag-select { width: 100%; height: 88rpx; background-color: #F9FAFB; border: 2rpx solid #E5E7EB; border-radius: 16rpx; padding: 0 24rpx; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; cursor: pointer; transition: all 0.3s ease; } .tag-select:active { border-color: #007AFF; background-color: #FFFFFF; box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1); } .form-item__picker-text { font-size: 28rpx; color: #333333; flex: 1; } .form-item__picker-placeholder { font-size: 28rpx; color: #9CA3AF; flex: 1; } /* 下拉菜单样式 */ .tag-select-dropdown { position: fixed; background-color: #FFFFFF; border: 2rpx solid #E5E7EB; border-radius: 16rpx; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.12); z-index: 9999; overflow: hidden; max-height: 400rpx; overflow-y: auto; min-width: 200rpx; } .tag-select-dropdown__item { padding: 24rpx; border-bottom: 1rpx solid #F3F4F6; transition: background-color 0.2s ease; } .tag-select-dropdown__item:last-child { border-bottom: none; } .tag-select-dropdown__item:active { background-color: #F9FAFB; } .tag-select-dropdown__item text { font-size: 28rpx; color: #333333; } .tag-select-dropdown__item text.active { color: #007AFF; font-weight: 500; } /* 下拉菜单遮罩 */ .tag-select-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: transparent; z-index: 9998; } /* textarea类型表单项 - 标签和textarea在同一行,但textarea可以换行 */ .form-item--textarea { align-items: flex-start; } /* 开关类型表单项 - 横向布局 */ .form-item--switch { flex-direction: row; align-items: center; justify-content: space-between; } .form-item--switch .form-item__label { margin-bottom: 0; } /* 开关样式 */ .form-item switch { margin-left: auto; transform: scale(0.9); } /* 表单操作按钮区域 */ .form-actions { display: flex; gap: 24rpx; padding-top: 16rpx; } .form-btn { flex: 1; height: 88rpx; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; font-size: 30rpx; font-weight: 500; transition: all 0.3s ease; } .form-btn--cancel { background-color: #F3F4F6; color: #6B7280; } .form-btn--cancel:active { background-color: #E5E7EB; opacity: 0.8; } .form-btn--save { background-color: #007AFF; color: #FFFFFF; } .form-btn--save:active { background-color: #0056CC; opacity: 0.9; } .form-btn__text { font-size: 30rpx; font-weight: 500; }