Files
smartDriveEEUniApp/unpackage/dist/dev/mp-weixin/pages-subpackage/reception/reception.wxss
2026-02-01 09:49:48 +08:00

756 lines
15 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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-list {
/* 使用绝对定位从tab页底部开始 */
/* 使用内联样式动态设置top值 */
position: absolute;
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页底部开始 */
/* 导航栏(128rpx) + tab页(72rpx) = 200rpx */
position: absolute;
top: 200rpx; /* 导航栏(128rpx) + tab页(72rpx) = 200rpx */
left: 0;
right: 0;
bottom: 96rpx; /* 底部导航栏高度 */
}
.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页底部开始 */
/* 导航栏(128rpx) + tab页(72rpx) = 200rpx */
position: absolute;
top: 200rpx; /* 导航栏(128rpx) + tab页(72rpx) = 200rpx */
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页底部开始 */
/* 导航栏(128rpx) + tab页(72rpx) = 200rpx */
position: absolute;
top: 200rpx; /* 导航栏(128rpx) + tab页(72rpx) = 200rpx */
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;
}