.custom-tabbar[data-v-52454e90] { position: fixed; bottom: 0; left: 0; width: 100%; height: 50px; background-color: #ffffff; display: flex; flex-direction: column; z-index: 999; padding-bottom: env(safe-area-inset-bottom); } .tabbar-border[data-v-52454e90] { height: 1px; background-color: rgba(0, 0, 0, 0.1); transform: scaleY(0.5); } .tabbar-list[data-v-52454e90] { display: flex; flex: 1; align-items: center; justify-content: space-around; } .tabbar-item[data-v-52454e90] { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; flex: 1; } .tabbar-icon[data-v-52454e90] { width: 24px; height: 24px; margin-bottom: 2px; } .tabbar-text[data-v-52454e90] { font-size: 10px; color: #999999; } .tabbar-text-active[data-v-52454e90] { color: #FF5722; } /* Global Box Sizing Fix */ uni-view, uni-text, uni-image, uni-scroll-view, uni-button { box-sizing: border-box; } /* 页面背景 */ body { background-color: #F8F8F8; } .container { padding-bottom: 0.9375rem; } /* 顶部背景 */ .nav-bg { position: absolute; top: 0; left: 0; width: 100%; height: 11.25rem; /* Reduced by another 20rpx */ background: linear-gradient(180deg, #FFE0B2 0%, #FFF3E0 100%); border-bottom-left-radius: 1.875rem; border-bottom-right-radius: 1.875rem; z-index: 1; overflow: hidden; } /* Custom Navigation Bar */ .custom-nav-bar { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; padding-top: var(--status-bar-height); height: 3.125rem; display: flex; align-items: center; justify-content: center; } .nav-title { font-size: 1.0625rem; font-weight: bold; color: #333; } /* 头部区域 */ .header-section { position: relative; z-index: 2; padding: 4.375rem 0.9375rem 0; } /* 用户信息 */ .user-info { display: flex; align-items: center; margin-bottom: 1.25rem; } .avatar { width: 3.125rem; height: 3.125rem; border-radius: 50%; margin-right: 0.75rem; border: 0.125rem solid #fff; box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.1); } .info-content { flex: 1; display: flex; flex-direction: column; } .top-row { display: flex; align-items: center; margin-bottom: 0.25rem; } .name { font-size: 1.125rem; font-weight: bold; color: #333; margin-right: 0.5rem; } /* 状态胶囊 */ .status-pill { background-color: #4E4E4E; border-radius: 0.75rem; display: flex; align-items: center; padding: 0.0625rem 0.625rem 0.0625rem 0.1875rem; /* Increased right/left padding to elongate */ } .status-dot-bg { width: 0.75rem; /* Smaller icon bg */ height: 0.75rem; background-color: #00E676; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 0.1875rem; } .check-mark { color: #fff; font-size: 0.4375rem; /* Smaller check */ font-weight: bold; } .status-text { color: #fff; font-size: 0.6875rem; /* Smaller font (11pt) */ margin-right: 0.1875rem; font-weight: normal; } .status-pill .arrow-down { color: #fff; font-size: 0.3125rem; /* Half size */ } .bottom-row { display: flex; align-items: center; font-size: 0.75rem; color: #333; } .city-label { margin-right: 0.125rem; } .city-arrow { font-family: monospace; } /* 通知铃铛 */ .notification-box { position: relative; width: 1.875rem; height: 1.875rem; display: flex; align-items: center; justify-content: center; } .bell-img { width: 1.375rem; height: 1.375rem; } .badge-count { position: absolute; top: -0.125rem; right: -0.125rem; background-color: #FF5252; color: #fff; font-size: 0.625rem; width: 1rem; height: 1rem; line-height: 1rem; text-align: center; border-radius: 50%; border: 0.0625rem solid #fff; } /* 统计卡片 - 悬浮样式 */ .stats-card { background-color: #fff; border-radius: 0.9375rem; padding: 0.9375rem 0; display: flex; justify-content: space-around; align-items: center; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06); margin-bottom: 0.3125rem; /* 10rpx spacing to task header */ margin-top: -0.3125rem; position: relative; width: 100%; } .stat-item { display: flex; flex-direction: column; align-items: center; flex: 1; } .num { font-size: 1.25rem; /* Increased font size */ font-weight: 800; color: #333; margin-bottom: 0.3125rem; font-family: Arial, sans-serif; } .label { font-size: 0.75rem; color: #888; } .divider { width: 1px; height: 1.25rem; background-color: #EEEEEE; } /* 任务大厅标题栏 - 吸顶容器 */ .task-header { position: -webkit-sticky; position: sticky; top: calc(3.125rem + var(--status-bar-height)); z-index: 90; margin-top: 0; margin-bottom: 0.3125rem; width: 100%; /* Flex removed, padding removed, handled by inner */ } /* 标题栏内部内容 */ .header-inner { position: relative; z-index: 3; /* Layer 3: Topmost */ display: flex; justify-content: space-between; align-items: center; height: 2.9375rem; padding: 0 0.9375rem; background-color: transparent; transition: background-color 0.2s; } .left-title { display: flex; align-items: center; } .orange-bar { width: 0.25rem; height: 1rem; background-color: #FF5722; border-radius: 0.125rem; margin-right: 0.46875rem; } .left-title .title { font-size: 0.875rem; font-weight: bold; color: #333; } .left-title .count { font-size: 0.75rem; color: #999; margin-left: 0.25rem; font-weight: normal; } .filter-options { display: flex; align-items: center; font-size: 0.75rem; color: #666; } .filter-item { margin-left: 0.9375rem; transition: color 0.3s; display: flex; align-items: center; } .filter-item.active { color: #FF5722; font-weight: bold; } /* Sort Icon Design: Up and Down arrows */ .sort-icon { display: flex; flex-direction: column; margin-left: 0.1875rem; justify-content: center; height: 0.625rem; } .sort-icon .up { width: 0; height: 0; border-left: 0.1875rem solid transparent; border-right: 0.1875rem solid transparent; border-bottom: 0.1875rem solid #ccc; margin-bottom: 0.0625rem; } .sort-icon .down { width: 0; height: 0; border-left: 0.1875rem solid transparent; border-right: 0.1875rem solid transparent; border-top: 0.1875rem solid #ccc; } .filter-item.active .sort-icon .up.active { border-bottom-color: #FF5722; } .filter-item.active .sort-icon .down.active { border-top-color: #FF5722; } .dropdown { display: flex; align-items: center; margin-left: 0.9375rem; background-color: transparent; padding: 0.1875rem 0.625rem; border-radius: 0.9375rem; border: none; box-shadow: none; } .dropdown uni-text { margin-left: 0; font-size: 0.75rem; color: #333; } .dropdown .arrow-down { font-size: 0.5625rem; margin-left: 0.1875rem; color: #999; } /* 任务大厅列表 */ .task-list { padding: 0 0.9375rem; width: 100%; } /* 任务卡片优化 */ .task-card { background-color: #fff; border-radius: 0.75rem; padding: 0.625rem 0.625rem; margin-bottom: 0.625rem; box-shadow: 0 0.15625rem 0.625rem rgba(0, 0, 0, 0.04); width: 100%; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.46875rem; } .type-badge { display: flex; align-items: center; } .type-icon { width: 1.375rem; height: 1.375rem; margin-right: 0.46875rem; background-color: #FFF3E0; border-radius: 50%; padding: 0.1875rem; box-sizing: border-box; } .type-text { font-size: 0.875rem; font-weight: bold; color: #333; } .price { font-size: 0.875rem; font-weight: bold; color: #FF5252; } .time-row { font-size: 0.8125rem; color: #666; margin-bottom: 0.625rem; } .time-row .value { color: #333; margin-left: 0.3125rem; } /* 宠物卡片 */ .pet-card { background-color: #FFF8F0; border-radius: 0.5rem; padding: 0.46875rem 0.625rem; display: flex; align-items: center; margin-bottom: 0.9375rem; } .pet-avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; margin-right: 0.625rem; } .pet-info { flex: 1; display: flex; flex-direction: column; } .pet-name { font-size: 0.875rem; font-weight: bold; color: #333; margin-bottom: 0.15625rem; } .pet-breed { font-size: 0.75rem; color: #999; } .pet-profile-btn { font-size: 0.75rem; color: #FF9800; border: 1px solid #FF9800; padding: 0.1875rem 0.625rem; border-radius: 1.5625rem; background-color: #fff; } /* 路线信息 */ .route-info { margin-bottom: 0.625rem; } .route-item { display: flex; align-items: flex-start; padding-bottom: 0.625rem; position: relative; width: 100%; } /* 路线项底部的间隔 */ .route-item:not(:last-child) { margin-bottom: 0.5rem; } .route-item:last-child { padding-bottom: 0; margin-bottom: 0; } .route-line-vertical { position: absolute; left: 0.59375rem; top: 1.4375rem; bottom: -0.46875rem; /* Adjusted to connect the now-closer nodes */ border-left: 0.0625rem dashed #E0E0E0; width: 0; z-index: 0; } .icon-circle { width: 1.25rem; height: 1.25rem; border-radius: 50%; color: #fff; font-size: 0.6875rem; display: flex; align-items: center; justify-content: center; margin-right: 0.625rem; flex-shrink: 0; font-weight: bold; margin-top: 0.1875rem; position: relative; z-index: 1; /* Above line */ } .icon-circle.start { background-color: #FFB74D; } .icon-circle.end { background-color: #81C784; } .icon-circle.service { background-color: #81C784; } .address-box { flex: 1; display: flex; flex-direction: column; padding-right: 0.625rem; width: 0; } .addr-title-row { display: flex; align-items: center; justify-content: space-between; } .addr-title { font-size: 0.875rem; font-weight: bold; color: #333; margin-bottom: 0.1875rem; flex: 1; } .phone-call-btn { width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; background-color: #E8F5E9; border-radius: 50%; margin-left: 0.3125rem; transition: transform 0.1s; } .phone-call-btn:active { transform: scale(0.9); background-color: #C8E6C9; } .phone-icon-item { width: 0.875rem; height: 0.875rem; } .addr-desc { font-size: 0.75rem; color: #999; line-height: normal; } .distance-tag { display: flex; align-items: center; background-color: #FFF3E0; padding: 0.1875rem 0.1875rem 0.1875rem 0.375rem; border-radius: 0.9375rem; flex-shrink: 0; } .distance-tag uni-text { font-size: 0.75rem; color: #FF5722; margin-right: 0.15625rem; font-weight: normal; } .nav-arrow { width: 1rem; height: 1rem; } .service-content { margin-top: -0.3125rem; /* Shifted up using negative margin for max compactness */ font-size: 0.75rem; /* 12pt */ color: #666; padding-left: 1.875rem; } .content-label { color: #999; margin-right: 0.3125rem; } /* 备注 */ .remark-box { background-color: #F8F8F8; padding: 0.46875rem 0.625rem; border-radius: 0.25rem; font-size: 0.75rem; color: #666; margin-bottom: 0.625rem; } /* 按钮组 */ .action-btns { display: flex; justify-content: space-between; } .btn { height: 2rem; /* Increased height */ line-height: 2rem; border-radius: 1rem; /* Matches height/2 */ font-size: 0.875rem; /* Slightly larger */ font-weight: normal; width: 48%; } .btn::after { border: none; } .btn.reject { background-color: #F5F5F5; color: #999; box-shadow: none; } .btn.accept { background: linear-gradient(90deg, #FF9800 0%, #FF5722 100%); color: #fff; box-shadow: 0 0.15625rem 0.46875rem rgba(255, 87, 34, 0.3); } .bg-circle-right { position: absolute; top: -0.625rem; right: -0.625rem; width: 5.78125rem; /* +20rpx */ height: 5.78125rem; /* +20rpx */ border-radius: 50%; background-color: rgba(255, 218, 185, 0.8); /* 80% opacity */ } /* 筛选面板 (Absolute Child) */ .filter-panel { position: absolute; /* Relative to .task-header */ top: 2.9375rem; /* Start right below header */ left: 0; width: 100%; background-color: #fff; z-index: 2; /* Layer 2: Below inner(3), Above mask(1) */ padding: 0.9375rem 0.9375rem 1.25rem; border-bottom-left-radius: 0.9375rem; border-bottom-right-radius: 0.9375rem; box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.1); transform: translateY(-0.625rem); /* Slightly tucked start */ opacity: 0; transition: all 0.25s ease-out; visibility: hidden; } .filter-panel.show { transform: translateY(0); opacity: 1; visibility: visible; } /* 筛选遮罩 (Absolute Child) */ .filter-mask { position: absolute; top: 2.9375rem; /* Start below header */ left: 0; right: 0; height: 100vh; /* Cover visible area below */ background-color: rgba(0, 0, 0, 0.5); z-index: 1; /* Layer 1: Lowest in header */ } .filter-section { margin-bottom: 1.25rem; } .section-title { font-size: 0.875rem; font-weight: bold; color: #333; margin-bottom: 0.625rem; display: block; } .options-grid { display: flex; flex-wrap: wrap; gap: 0.625rem; } .option-btn { width: calc(33.33% - 0.4375rem); /* 3 cols with gap */ height: 2rem; line-height: 2rem; text-align: center; border-radius: 1rem; font-size: 0.8125rem; color: #666; background-color: #fff; border: 0.0625rem solid #E0E0E0; margin-bottom: 0.3125rem; } .option-btn.active { color: #FF5722; background-color: #FFF3E0; border-color: #FF5722; font-weight: bold; } .filter-actions { display: flex; justify-content: space-between; margin-top: 1.5625rem; } .action-btn { width: 48%; height: 2rem; /* Match .btn */ line-height: 2rem; border-radius: 1rem; /* Match .btn */ font-size: 0.875rem; /* Match .btn */ font-weight: normal; /* Match .btn */ } .action-btn::after { border: none; } .action-btn.reset { background-color: #F5F5F5; color: #999; /* Match light gray */ } .action-btn.confirm { background: linear-gradient(90deg, #FF9800 0%, #FF5722 100%); color: #fff; box-shadow: 0 0.15625rem 0.46875rem rgba(255, 87, 34, 0.3); } /* 状态胶囊 */ .status-pill { display: flex; align-items: center; background-color: #333333; /* Dark background */ border-radius: 0.625rem; padding: 0.125rem 0.5rem 0.125rem 0.25rem; margin-left: 0.5rem; transition: background-color 0.3s; } .status-pill.resting { background-color: #424242; /* Slightly lighter dark */ } .status-dot-bg { width: 0.75rem; height: 0.75rem; background-color: #4CAF50; border-radius: 50%; margin-right: 0.1875rem; display: flex; justify-content: center; align-items: center; } .check-mark { color: #fff; font-size: 0.4375rem; font-weight: bold; } .status-pill.resting .status-dot-bg { background-color: #FF5722; /* Warning color for resting */ } .status-icon { width: 0.75rem; height: 0.75rem; margin-right: 0.1875rem; } .status-text { font-size: 0.6875rem; color: #fff; margin-right: 0.1875rem; } .status-pill .arrow-down { color: #fff; font-size: 0.3125rem; /* Reduced size */ margin-left: 0.125rem; /* Adjust spacing */ } /* 空状态 - 休息中 */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 4.6875rem; } .empty-icon { width: 6.25rem; height: 6.25rem; margin-bottom: 1.25rem; opacity: 0.5; } .empty-text { font-size: 0.875rem; color: #666; margin-bottom: 1.875rem; } .start-work-btn { width: 9.375rem; height: 2.5rem; line-height: 2.5rem; background: linear-gradient(90deg, #FF9800 0%, #FF5722 100%); border-radius: 1.25rem; color: #fff; font-size: 0.9375rem; font-weight: bold; box-shadow: 0 0.15625rem 0.46875rem rgba(255, 87, 34, 0.3); } /* 自定义确认弹窗 */ .modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 999; display: flex; align-items: center; justify-content: center; } .custom-modal { width: 18.75rem; background-color: #fff; border-radius: 0.75rem; padding: 1.25rem 1.5625rem; display: flex; flex-direction: column; align-items: center; } .modal-title { font-size: 1.125rem; font-weight: bold; color: #333; margin-bottom: 0.9375rem; } .modal-content { font-size: 0.9375rem; color: #666; margin-bottom: 1.5625rem; text-align: center; } .modal-btns { width: 100%; display: flex; justify-content: space-between; } .modal-btn { width: 45%; height: 2.5rem; line-height: 2.5rem; border-radius: 1.25rem; font-size: 0.9375rem; font-weight: bold; margin: 0; } .modal-btn::after { border: none; } .modal-btn.cancel { background-color: #F5F5F5; color: #999; } .modal-btn.confirm { background: linear-gradient(90deg, #FF9800 0%, #FF5722 100%); color: #fff; box-shadow: 0 0.15625rem 0.46875rem rgba(255, 87, 34, 0.3); } /* 宠物档案弹窗 */ .pet-modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 1000; display: flex; align-items: center; justify-content: center; } .pet-modal-content { width: 21.25rem; height: 85vh; background-color: #fff; border-radius: 0.625rem; display: flex; flex-direction: column; overflow: hidden; } .pet-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 0.9375rem; border-bottom: 0.03125rem solid #F0F0F0; } .pet-modal-title { font-size: 1.0625rem; font-weight: bold; color: #333; } .pet-modal-scroll { flex: 1; height: 0; padding: 0.9375rem; box-sizing: border-box; } .pet-base-info { display: flex; align-items: center; margin-bottom: 1.25rem; } .pm-avatar { width: 3.75rem; height: 3.75rem; border-radius: 50%; margin-right: 0.9375rem; border: 0.0625rem solid #f5f5f5; } .pm-info-text { flex: 1; display: flex; flex-direction: column; } .pm-name-row { display: flex; align-items: center; margin-bottom: 0.46875rem; } .pm-name { font-size: 1.125rem; font-weight: bold; color: #333; margin-right: 0.625rem; } .pm-gender { display: flex; align-items: center; background-color: #E3F2FD; padding: 0.125rem 0.375rem; border-radius: 0.625rem; } .pm-gender uni-text { font-size: 0.6875rem; color: #1E88E5; } .pm-gender .gender-icon { font-weight: bold; margin-right: 0.125rem; } .pm-gender.female { background-color: #FCE4EC; } .pm-gender.female uni-text { color: #D81B60; } .pm-breed { font-size: 0.8125rem; color: #999; } .pm-detail-grid { display: flex; flex-wrap: wrap; justify-content: space-between; } .pm-grid-item { background-color: #F8F8F8; border-radius: 0.5rem; padding: 0.75rem; margin-bottom: 0.625rem; display: flex; flex-direction: column; } .pm-grid-item.half { width: 48%; box-sizing: border-box; } .pm-grid-item.full { width: 100%; box-sizing: border-box; } .pm-label { font-size: 0.75rem; color: #999; margin-bottom: 0.3125rem; } .pm-val { font-size: 0.875rem; color: #333; font-weight: 500; } .pm-tags { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-bottom: 1.25rem; } .pm-tag { background-color: #FFF8EB; border: 0.0625rem solid #FFCC80; color: #FF9800; font-size: 0.6875rem; padding: 0.25rem 0.75rem; border-radius: 0.9375rem; } .pm-section-title { display: flex; align-items: center; margin-bottom: 0.9375rem; padding-top: 0.9375rem; border-top: 0.0625rem dashed #F0F0F0; } .pm-section-title .orange-bar { width: 0.25rem; height: 1rem; background-color: #FF9800; margin-right: 0.5rem; border-radius: 0.125rem; } .pm-section-title uni-text { font-size: 0.9375rem; font-weight: bold; color: #333; } .pm-log-list { display: flex; flex-direction: column; } .pm-log-item { display: flex; flex-direction: column; padding: 0.75rem 0; border-bottom: 0.03125rem solid #F0F0F0; } .pm-log-item:last-child { border-bottom: none; } .pm-log-date { font-size: 0.75rem; color: #999; margin-bottom: 0.5rem; } .pm-log-text { font-size: 0.875rem; color: #333; line-height: 1.6; margin-bottom: 0.625rem; } .pm-log-recorder { font-size: 0.75rem; color: #FF9800; align-self: flex-end; } /* 拒绝接单弹窗输入框 */ .reject-textarea { width: 100%; height: 6.25rem; background-color: #F8F8F8; border-radius: 0.375rem; padding: 0.75rem; font-size: 0.875rem; line-height: 1.5; box-sizing: border-box; margin-bottom: 0.625rem; } .mt-30 { margin-top: 0.9375rem; } /* 宠物档案底部关闭按钮 */ .pm-bottom-close { width: 100%; height: 2.5rem; line-height: 2.5rem; background-color: #F5F5F5; color: #666; border-radius: 1.25rem; font-size: 0.9375rem; font-weight: bold; margin: 0; } .pm-bottom-close::after { border: none; } /* 宠物档案原生关闭图标 */ .close-icon-btn { font-size: 1.5rem; color: #999; line-height: 1; padding: 0 0.3125rem; } /* 确认接单弹窗内容 */ .modal-content-box { display: flex; flex-direction: column; align-items: center; margin-bottom: 0.625rem; } .modal-content-main { font-size: 0.9375rem; color: #333; margin-bottom: 0.5rem; } .modal-content-sub { font-size: 0.75rem; color: #999; } /* 地图导航 Action Sheet */ .nav-modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; display: flex; flex-direction: column; justify-content: flex-end; } .nav-action-sheet { background-color: #fff; width: 100%; border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; overflow: hidden; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } .nav-sheet-title { text-align: center; padding: 0.9375rem 0; font-size: 13px; color: #999; border-bottom: 0.03125rem solid #efefef; } .nav-sheet-item { text-align: center; padding: 0.9375rem 0; font-size: 13px; color: #333; background-color: #fff; border-bottom: 0.03125rem solid #efefef; } .nav-sheet-item.cancel { border-bottom: none; color: #666; } .nav-sheet-gap { height: 0.5rem; background-color: #F8F8F8; }