/* 任务列表页样式 */ .page-task-list { min-height: 100vh; background-color: var(--color-gray-1); padding-bottom: 180rpx; /* 为 AI 悬浮按钮 + 安全区留空 */ } /* ====== Loading 骨架屏 ====== */ .state-loading { padding: 32rpx; } .loading-placeholder { background: #fff; border-radius: var(--radius-lg); padding: 32rpx; margin-bottom: 24rpx; } .ph-line { height: 24rpx; border-radius: 12rpx; background: linear-gradient(90deg, var(--color-gray-2) 25%, var(--color-gray-1) 50%, var(--color-gray-2) 75%); background-size: 400% 100%; animation: shimmer 1.5s infinite; margin-bottom: 20rpx; } .ph-line--title { width: 40%; height: 32rpx; } .ph-line--body { width: 80%; } .ph-line--short { width: 55%; margin-bottom: 0; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* ====== 空状态 ====== */ .state-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 200rpx; } .empty-icon { width: 200rpx; height: 200rpx; margin-bottom: 24rpx; opacity: 0.5; } .empty-text { font-size: var(--font-sm); color: var(--color-gray-6); } /* ====== 任务区域 ====== */ .task-section { padding: 32rpx; } /* 标题行 */ .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24rpx; } .section-title { font-size: var(--font-base); font-weight: 600; color: var(--color-gray-13); } .section-count { font-size: var(--font-sm); color: var(--color-gray-6); } /* ====== 任务卡片 ====== */ .task-card { display: flex; align-items: stretch; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); margin-bottom: 24rpx; overflow: hidden; } .task-card:active { opacity: 0.85; } /* 左侧彩色边条 */ .card-border { width: 8rpx; flex-shrink: 0; } /* 卡片主体 */ .card-body { flex: 1; padding: 28rpx 24rpx; min-width: 0; /* 防止溢出 */ } /* 第一行 */ .card-row-1 { display: flex; align-items: center; flex-wrap: wrap; gap: 12rpx; margin-bottom: 12rpx; } .task-type-tag { padding: 4rpx 16rpx; border-radius: var(--radius-sm); } .tag-text { font-size: var(--font-xs); color: #fff; font-weight: 500; } .customer-name { font-size: var(--font-base); font-weight: 600; color: var(--color-gray-13); } .note-indicator, .pin-indicator { font-size: var(--font-sm); } /* 第二行 */ .card-row-2 { margin-bottom: 12rpx; } .deadline-text { font-size: var(--font-sm); color: var(--color-gray-7); } /* 第三行:喜好标签 */ .card-row-3 { display: flex; flex-wrap: wrap; gap: 12rpx; } /* 右侧箭头 */ .card-arrow { display: flex; align-items: center; padding-right: 24rpx; flex-shrink: 0; } .arrow-icon { font-size: 40rpx; color: var(--color-gray-5); } /* ====== 加载更多 ====== */ .load-more { text-align: center; padding: 32rpx 0; } .load-more-text { font-size: var(--font-xs); color: var(--color-gray-6); }