/* Global Box Sizing Fix */ view, text, image, scroll-view, button { box-sizing: border-box; } /* 页面背景 */ page { background-color: #F8F8F8; } .container { padding-bottom: 30rpx; } /* 顶部背景 */ .nav-bg { position: absolute; top: 0; left: 0; width: 100%; height: 310rpx; /* Reduced by another 20rpx */ background: linear-gradient(180deg, #FFE0B2 0%, #FFF3E0 100%); border-bottom-left-radius: 60rpx; border-bottom-right-radius: 60rpx; 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: 88rpx; display: flex; align-items: center; justify-content: center; } .nav-title { font-size: 34rpx; font-weight: bold; color: #333; } /* 头部区域 */ .header-section { position: relative; z-index: 2; padding: 88rpx 30rpx 0; } /* 用户信息 */ .user-info { display: flex; align-items: center; margin-bottom: 40rpx; } .avatar { width: 100rpx; height: 100rpx; border-radius: 50%; margin-right: 24rpx; border: 4rpx solid #fff; box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1); } .info-content { flex: 1; display: flex; flex-direction: column; } .top-row { display: flex; align-items: center; margin-bottom: 8rpx; } .name { font-size: 36rpx; font-weight: bold; color: #333; margin-right: 16rpx; } /* 状态胶囊 */ .status-pill { background-color: #4E4E4E; border-radius: 24rpx; display: flex; align-items: center; padding: 2rpx 20rpx 2rpx 6rpx; /* Increased right/left padding to elongate */ } .status-dot-bg { width: 24rpx; /* Smaller icon bg */ height: 24rpx; background-color: #00E676; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 6rpx; } .check-mark { color: #fff; font-size: 14rpx; /* Smaller check */ font-weight: bold; } .status-text { color: #fff; font-size: 22rpx; /* Smaller font (11pt) */ margin-right: 6rpx; font-weight: normal; } .status-pill .arrow-down { color: #fff; font-size: 10rpx; /* Half size */ } .bottom-row { display: flex; align-items: center; font-size: 24rpx; color: #333; } .city-label { margin-right: 4rpx; } .city-arrow { font-family: monospace; } /* 通知铃铛 */ .notification-box { position: relative; width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; } .bell-img { width: 44rpx; height: 44rpx; } .badge-count { position: absolute; top: -4rpx; right: -4rpx; background-color: #FF5252; color: #fff; font-size: 20rpx; width: 32rpx; height: 32rpx; line-height: 32rpx; text-align: center; border-radius: 50%; border: 2rpx solid #fff; } /* 统计卡片 - 悬浮样式 */ .stats-card { background-color: #fff; border-radius: 30rpx; padding: 30rpx 0; display: flex; justify-content: space-around; align-items: center; box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06); margin-bottom: 10rpx; /* 10rpx spacing to task header */ margin-top: -10rpx; position: relative; width: 100%; } .stat-item { display: flex; flex-direction: column; align-items: center; flex: 1; } .num { font-size: 40rpx; /* Increased font size */ font-weight: 800; color: #333; margin-bottom: 10rpx; font-family: Arial, sans-serif; } .label { font-size: 24rpx; color: #888; } .divider { width: 1px; height: 40rpx; background-color: #EEEEEE; } /* 任务大厅标题栏 - 吸顶容器 */ .task-header { position: sticky; top: calc(88rpx + var(--status-bar-height)); z-index: 90; margin-top: 0; margin-bottom: 10rpx; 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: 94rpx; padding: 0 30rpx; background-color: transparent; transition: background-color 0.2s; } .left-title { display: flex; align-items: center; } .orange-bar { width: 8rpx; height: 32rpx; background-color: #FF5722; border-radius: 4rpx; margin-right: 15rpx; } .left-title .title { font-size: 28rpx; font-weight: 900; color: #333; font-style: italic; } .left-title .count { font-size: 24rpx; color: #999; margin-left: 8rpx; font-weight: normal; } .filter-options { display: flex; align-items: center; font-size: 24rpx; color: #666; } .filter-item { margin-left: 30rpx; 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: 6rpx; justify-content: center; height: 20rpx; } .sort-icon .up { width: 0; height: 0; border-left: 6rpx solid transparent; border-right: 6rpx solid transparent; border-bottom: 6rpx solid #ccc; margin-bottom: 2rpx; } .sort-icon .down { width: 0; height: 0; border-left: 6rpx solid transparent; border-right: 6rpx solid transparent; border-top: 6rpx 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: 30rpx; background-color: transparent; padding: 6rpx 20rpx; border-radius: 30rpx; border: none; box-shadow: none; } .dropdown text { margin-left: 0; font-size: 24rpx; color: #333; } .dropdown .arrow-down { font-size: 18rpx; margin-left: 6rpx; color: #999; } /* 任务大厅列表 */ .task-list { padding: 0 30rpx; width: 100%; } /* 任务卡片优化 */ .task-card { background-color: #fff; border-radius: 24rpx; padding: 20rpx 20rpx; margin-bottom: 20rpx; box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.04); width: 100%; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15rpx; } .type-badge { display: flex; align-items: center; } .type-icon { width: 44rpx; height: 44rpx; margin-right: 15rpx; background-color: #FFF3E0; border-radius: 50%; padding: 6rpx; box-sizing: border-box; } .type-text { font-size: 28rpx; font-weight: bold; color: #333; } .price { font-size: 28rpx; font-weight: bold; color: #FF5252; } .time-row { font-size: 26rpx; color: #666; margin-bottom: 20rpx; } .time-row .value { color: #333; margin-left: 10rpx; } /* 宠物卡片 */ .pet-card { background-color: #FFF8F0; border-radius: 16rpx; padding: 15rpx 20rpx; display: flex; align-items: center; margin-bottom: 20rpx; } .pet-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; margin-right: 20rpx; } .pet-info { flex: 1; display: flex; flex-direction: column; } .pet-name { font-size: 28rpx; font-weight: bold; color: #333; margin-bottom: 5rpx; } .pet-breed { font-size: 24rpx; color: #999; } .pet-profile-btn { font-size: 24rpx; color: #FF9800; border: 1px solid #FF9800; padding: 6rpx 20rpx; border-radius: 50rpx; background-color: #fff; } /* 路线信息 */ .route-info { margin-bottom: 20rpx; } .route-item { display: flex; align-items: flex-start; padding-bottom: 12rpx; /* Radically reduced for compactness */ position: relative; width: 100%; } /* 路线项底部的间隔 */ .route-item:not(:last-child) { margin-bottom: 5rpx; /* Radically reduced for compactness */ } .route-item:last-child { padding-bottom: 0; margin-bottom: 0; } .route-line-vertical { position: absolute; left: 19rpx; top: 46rpx; bottom: -15rpx; /* Adjusted to connect the now-closer nodes */ border-left: 2rpx dashed #E0E0E0; width: 0; z-index: 0; } .icon-circle { width: 40rpx; height: 40rpx; border-radius: 50%; color: #fff; font-size: 22rpx; display: flex; align-items: center; justify-content: center; margin-right: 20rpx; flex-shrink: 0; font-weight: bold; margin-top: 6rpx; 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: 20rpx; width: 0; } .addr-title { font-size: 28rpx; font-weight: bold; color: #333; margin-bottom: 6rpx; } .addr-desc { font-size: 24rpx; color: #999; line-height: normal; } .distance-tag { display: flex; align-items: center; background-color: #FFF3E0; padding: 6rpx 6rpx 6rpx 12rpx; border-radius: 30rpx; flex-shrink: 0; } .distance-tag text { font-size: 24rpx; color: #FF5722; margin-right: 5rpx; font-weight: normal; } .nav-arrow { width: 32rpx; height: 32rpx; } .service-content { margin-top: -10rpx; /* Shifted up using negative margin for max compactness */ font-size: 24rpx; /* 12pt */ color: #666; padding-left: 60rpx; } .content-label { color: #999; margin-right: 10rpx; } /* 备注 */ .remark-box { background-color: #F8F8F8; padding: 15rpx 20rpx; border-radius: 8rpx; font-size: 24rpx; color: #666; margin-bottom: 20rpx; } /* 按钮组 */ .action-btns { display: flex; justify-content: space-between; } .btn { height: 64rpx; /* Increased height */ line-height: 64rpx; border-radius: 32rpx; /* Matches height/2 */ font-size: 28rpx; /* 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 5rpx 15rpx rgba(255, 87, 34, 0.3); } .bg-circle-right { position: absolute; top: -20rpx; right: -20rpx; width: 185rpx; /* +20rpx */ height: 185rpx; /* +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: 94rpx; /* Start right below header */ left: 0; width: 100%; background-color: #fff; z-index: 2; /* Layer 2: Below inner(3), Above mask(1) */ padding: 30rpx 30rpx 40rpx; border-bottom-left-radius: 30rpx; border-bottom-right-radius: 30rpx; box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1); transform: translateY(-20rpx); /* 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: 94rpx; /* 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: 40rpx; } .section-title { font-size: 28rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; display: block; } .options-grid { display: flex; flex-wrap: wrap; gap: 20rpx; } .option-btn { width: calc(33.33% - 14rpx); /* 3 cols with gap */ height: 64rpx; line-height: 64rpx; text-align: center; border-radius: 32rpx; font-size: 26rpx; color: #666; background-color: #fff; border: 2rpx solid #E0E0E0; margin-bottom: 10rpx; } .option-btn.active { color: #FF5722; background-color: #FFF3E0; border-color: #FF5722; font-weight: bold; } .filter-actions { display: flex; justify-content: space-between; margin-top: 50rpx; } .action-btn { width: 48%; height: 64rpx; /* Match .btn */ line-height: 64rpx; border-radius: 32rpx; /* Match .btn */ font-size: 28rpx; /* 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 5rpx 15rpx rgba(255, 87, 34, 0.3); } /* 状态胶囊 */ .status-pill { display: flex; align-items: center; background-color: #333333; /* Dark background */ border-radius: 20rpx; padding: 4rpx 16rpx 4rpx 8rpx; margin-left: 16rpx; transition: background-color 0.3s; } .status-pill.resting { background-color: #424242; /* Slightly lighter dark */ } .status-dot-bg { width: 24rpx; height: 24rpx; background-color: #4CAF50; border-radius: 50%; margin-right: 6rpx; display: flex; justify-content: center; align-items: center; } .check-mark { color: #fff; font-size: 14rpx; font-weight: bold; } .status-pill.resting .status-dot-bg { background-color: #FF5722; /* Warning color for resting */ } .status-icon { width: 24rpx; height: 24rpx; margin-right: 6rpx; } .status-text { font-size: 22rpx; color: #fff; margin-right: 6rpx; } .status-pill .arrow-down { color: #fff; font-size: 10rpx; /* Reduced size */ margin-left: 4rpx; /* Adjust spacing */ } /* 空状态 - 休息中 */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 150rpx; } .empty-icon { width: 200rpx; height: 200rpx; margin-bottom: 40rpx; opacity: 0.5; } .empty-text { font-size: 28rpx; color: #666; margin-bottom: 60rpx; } .start-work-btn { width: 300rpx; height: 80rpx; line-height: 80rpx; background: linear-gradient(90deg, #FF9800 0%, #FF5722 100%); border-radius: 40rpx; color: #fff; font-size: 30rpx; font-weight: bold; box-shadow: 0 5rpx 15rpx 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: 600rpx; background-color: #fff; border-radius: 24rpx; padding: 40rpx 50rpx; display: flex; flex-direction: column; align-items: center; } .modal-title { font-size: 36rpx; font-weight: bold; color: #333; margin-bottom: 30rpx; } .modal-content { font-size: 30rpx; color: #666; margin-bottom: 50rpx; text-align: center; } .modal-btns { width: 100%; display: flex; justify-content: space-between; } .modal-btn { width: 45%; height: 80rpx; line-height: 80rpx; border-radius: 40rpx; font-size: 30rpx; 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 5rpx 15rpx 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: 680rpx; height: 85vh; background-color: #fff; border-radius: 20rpx; display: flex; flex-direction: column; overflow: hidden; } .pet-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 30rpx; border-bottom: 1rpx solid #F0F0F0; } .pet-modal-title { font-size: 34rpx; font-weight: bold; color: #333; } .pet-modal-scroll { flex: 1; height: 0; padding: 30rpx; box-sizing: border-box; } .pet-base-info { display: flex; align-items: center; margin-bottom: 40rpx; } .pm-avatar { width: 120rpx; height: 120rpx; border-radius: 50%; margin-right: 30rpx; border: 2rpx solid #f5f5f5; } .pm-info-text { flex: 1; display: flex; flex-direction: column; } .pm-name-row { display: flex; align-items: center; margin-bottom: 15rpx; } .pm-name { font-size: 36rpx; font-weight: bold; color: #333; margin-right: 20rpx; } .pm-gender { display: flex; align-items: center; background-color: #E3F2FD; padding: 4rpx 12rpx; border-radius: 20rpx; } .pm-gender text { font-size: 22rpx; color: #1E88E5; } .pm-gender .gender-icon { font-weight: bold; margin-right: 4rpx; } .pm-gender.female { background-color: #FCE4EC; } .pm-gender.female text { color: #D81B60; } .pm-breed { font-size: 26rpx; color: #999; } .pm-detail-grid { display: flex; flex-wrap: wrap; justify-content: space-between; } .pm-grid-item { background-color: #F8F8F8; border-radius: 16rpx; padding: 24rpx; margin-bottom: 20rpx; 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: 24rpx; color: #999; margin-bottom: 10rpx; } .pm-val { font-size: 28rpx; color: #333; font-weight: 500; } .pm-tags { display: flex; flex-wrap: wrap; gap: 20rpx; margin-bottom: 40rpx; } .pm-tag { background-color: #FFF8EB; border: 2rpx solid #FFCC80; color: #FF9800; font-size: 22rpx; padding: 8rpx 24rpx; border-radius: 30rpx; } .pm-section-title { display: flex; align-items: center; margin-bottom: 30rpx; padding-top: 30rpx; border-top: 2rpx dashed #F0F0F0; } .pm-section-title .orange-bar { width: 8rpx; height: 32rpx; background-color: #FF9800; margin-right: 16rpx; border-radius: 4rpx; } .pm-section-title text { font-size: 30rpx; font-weight: bold; color: #333; } .pm-log-list { display: flex; flex-direction: column; } .pm-log-item { display: flex; flex-direction: column; padding: 24rpx 0; border-bottom: 1rpx solid #F0F0F0; } .pm-log-item:last-child { border-bottom: none; } .pm-log-date { font-size: 24rpx; color: #999; margin-bottom: 16rpx; } .pm-log-text { font-size: 28rpx; color: #333; line-height: 1.6; margin-bottom: 20rpx; } .pm-log-recorder { font-size: 24rpx; color: #FF9800; align-self: flex-end; } /* 拒绝接单弹窗输入框 */ .reject-textarea { width: 100%; height: 200rpx; background-color: #F8F8F8; border-radius: 12rpx; padding: 24rpx; font-size: 28rpx; line-height: 1.5; box-sizing: border-box; margin-bottom: 20rpx; } .mt-30 { margin-top: 30rpx; } /* 宠物档案底部关闭按钮 */ .pm-bottom-close { width: 100%; height: 80rpx; line-height: 80rpx; background-color: #F5F5F5; color: #666; border-radius: 40rpx; font-size: 30rpx; font-weight: bold; margin: 0; } .pm-bottom-close::after { border: none; } /* 宠物档案原生关闭图标 */ .close-icon-btn { font-size: 48rpx; color: #999; line-height: 1; padding: 0 10rpx; } /* 确认接单弹窗内容 */ .modal-content-box { display: flex; flex-direction: column; align-items: center; margin-bottom: 20rpx; } .modal-content-main { font-size: 30rpx; color: #333; margin-bottom: 16rpx; } .modal-content-sub { font-size: 24rpx; 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: 24rpx; border-top-right-radius: 24rpx; overflow: hidden; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } .nav-sheet-title { text-align: center; padding: 30rpx 0; font-size: 13px; color: #999; border-bottom: 1rpx solid #efefef; } .nav-sheet-item { text-align: center; padding: 30rpx 0; font-size: 13px; color: #333; background-color: #fff; border-bottom: 1rpx solid #efefef; } .nav-sheet-item.cancel { border-bottom: none; color: #666; } .nav-sheet-gap { height: 16rpx; background-color: #F8F8F8; }