index.css 23 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150
  1. .custom-tabbar[data-v-52454e90] {
  2. position: fixed;
  3. bottom: 0;
  4. left: 0;
  5. width: 100%;
  6. height: 50px;
  7. background-color: #ffffff;
  8. display: flex;
  9. flex-direction: column;
  10. z-index: 999;
  11. padding-bottom: env(safe-area-inset-bottom);
  12. }
  13. .tabbar-border[data-v-52454e90] {
  14. height: 1px;
  15. background-color: rgba(0, 0, 0, 0.1);
  16. transform: scaleY(0.5);
  17. }
  18. .tabbar-list[data-v-52454e90] {
  19. display: flex;
  20. flex: 1;
  21. align-items: center;
  22. justify-content: space-around;
  23. }
  24. .tabbar-item[data-v-52454e90] {
  25. display: flex;
  26. flex-direction: column;
  27. align-items: center;
  28. justify-content: center;
  29. height: 100%;
  30. flex: 1;
  31. }
  32. .tabbar-icon[data-v-52454e90] {
  33. width: 24px;
  34. height: 24px;
  35. margin-bottom: 2px;
  36. }
  37. .tabbar-text[data-v-52454e90] {
  38. font-size: 10px;
  39. color: #999999;
  40. }
  41. .tabbar-text-active[data-v-52454e90] {
  42. color: #FF5722;
  43. }
  44. /* Global Box Sizing Fix */
  45. uni-view,
  46. uni-text,
  47. uni-image,
  48. uni-scroll-view,
  49. uni-button {
  50. box-sizing: border-box;
  51. }
  52. /* 页面背景 */
  53. body {
  54. background-color: #F8F8F8;
  55. }
  56. .container {
  57. padding-bottom: 0.9375rem;
  58. }
  59. /* 顶部背景 */
  60. .nav-bg {
  61. position: absolute;
  62. top: 0;
  63. left: 0;
  64. width: 100%;
  65. height: 11.25rem;
  66. /* Reduced by another 20rpx */
  67. background: linear-gradient(180deg, #FFE0B2 0%, #FFF3E0 100%);
  68. border-bottom-left-radius: 1.875rem;
  69. border-bottom-right-radius: 1.875rem;
  70. z-index: 1;
  71. overflow: hidden;
  72. }
  73. /* Custom Navigation Bar */
  74. .custom-nav-bar {
  75. position: fixed;
  76. top: 0;
  77. left: 0;
  78. width: 100%;
  79. z-index: 100;
  80. padding-top: var(--status-bar-height);
  81. height: 3.125rem;
  82. display: flex;
  83. align-items: center;
  84. justify-content: center;
  85. }
  86. .nav-title {
  87. font-size: 1.0625rem;
  88. font-weight: bold;
  89. color: #333;
  90. }
  91. /* 头部区域 */
  92. .header-section {
  93. position: relative;
  94. z-index: 2;
  95. padding: 4.375rem 0.9375rem 0;
  96. }
  97. /* 用户信息 */
  98. .user-info {
  99. display: flex;
  100. align-items: center;
  101. margin-bottom: 1.25rem;
  102. }
  103. .avatar {
  104. width: 3.125rem;
  105. height: 3.125rem;
  106. border-radius: 50%;
  107. margin-right: 0.75rem;
  108. border: 0.125rem solid #fff;
  109. box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.1);
  110. }
  111. .info-content {
  112. flex: 1;
  113. display: flex;
  114. flex-direction: column;
  115. }
  116. .top-row {
  117. display: flex;
  118. align-items: center;
  119. margin-bottom: 0.25rem;
  120. }
  121. .name {
  122. font-size: 1.125rem;
  123. font-weight: bold;
  124. color: #333;
  125. margin-right: 0.5rem;
  126. }
  127. /* 状态胶囊 */
  128. .status-pill {
  129. background-color: #4E4E4E;
  130. border-radius: 0.75rem;
  131. display: flex;
  132. align-items: center;
  133. padding: 0.0625rem 0.625rem 0.0625rem 0.1875rem;
  134. /* Increased right/left padding to elongate */
  135. }
  136. .status-dot-bg {
  137. width: 0.75rem;
  138. /* Smaller icon bg */
  139. height: 0.75rem;
  140. background-color: #00E676;
  141. border-radius: 50%;
  142. display: flex;
  143. align-items: center;
  144. justify-content: center;
  145. margin-right: 0.1875rem;
  146. }
  147. .check-mark {
  148. color: #fff;
  149. font-size: 0.4375rem;
  150. /* Smaller check */
  151. font-weight: bold;
  152. }
  153. .status-text {
  154. color: #fff;
  155. font-size: 0.6875rem;
  156. /* Smaller font (11pt) */
  157. margin-right: 0.1875rem;
  158. font-weight: normal;
  159. }
  160. .status-pill .arrow-down {
  161. color: #fff;
  162. font-size: 0.3125rem;
  163. /* Half size */
  164. }
  165. .bottom-row {
  166. display: flex;
  167. align-items: center;
  168. font-size: 0.75rem;
  169. color: #333;
  170. }
  171. .city-label {
  172. margin-right: 0.125rem;
  173. }
  174. .city-arrow {
  175. font-family: monospace;
  176. }
  177. /* 通知铃铛 */
  178. .notification-box {
  179. position: relative;
  180. width: 1.875rem;
  181. height: 1.875rem;
  182. display: flex;
  183. align-items: center;
  184. justify-content: center;
  185. }
  186. .bell-img {
  187. width: 1.375rem;
  188. height: 1.375rem;
  189. }
  190. .badge-count {
  191. position: absolute;
  192. top: -0.125rem;
  193. right: -0.125rem;
  194. background-color: #FF5252;
  195. color: #fff;
  196. font-size: 0.625rem;
  197. width: 1rem;
  198. height: 1rem;
  199. line-height: 1rem;
  200. text-align: center;
  201. border-radius: 50%;
  202. border: 0.0625rem solid #fff;
  203. }
  204. /* 统计卡片 - 悬浮样式 */
  205. .stats-card {
  206. background-color: #fff;
  207. border-radius: 0.9375rem;
  208. padding: 0.9375rem 0;
  209. display: flex;
  210. justify-content: space-around;
  211. align-items: center;
  212. box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
  213. margin-bottom: 0.3125rem;
  214. /* 10rpx spacing to task header */
  215. margin-top: -0.3125rem;
  216. position: relative;
  217. width: 100%;
  218. }
  219. .stat-item {
  220. display: flex;
  221. flex-direction: column;
  222. align-items: center;
  223. flex: 1;
  224. }
  225. .num {
  226. font-size: 1.25rem;
  227. /* Increased font size */
  228. font-weight: 800;
  229. color: #333;
  230. margin-bottom: 0.3125rem;
  231. font-family: Arial, sans-serif;
  232. }
  233. .label {
  234. font-size: 0.75rem;
  235. color: #888;
  236. }
  237. .divider {
  238. width: 1px;
  239. height: 1.25rem;
  240. background-color: #EEEEEE;
  241. }
  242. /* 任务大厅标题栏 - 吸顶容器 */
  243. .task-header {
  244. position: -webkit-sticky;
  245. position: sticky;
  246. top: calc(3.125rem + var(--status-bar-height));
  247. z-index: 90;
  248. margin-top: 0;
  249. margin-bottom: 0.3125rem;
  250. width: 100%;
  251. /* Flex removed, padding removed, handled by inner */
  252. }
  253. /* 标题栏内部内容 */
  254. .header-inner {
  255. position: relative;
  256. z-index: 3;
  257. /* Layer 3: Topmost */
  258. display: flex;
  259. justify-content: space-between;
  260. align-items: center;
  261. height: 2.9375rem;
  262. padding: 0 0.9375rem;
  263. background-color: transparent;
  264. transition: background-color 0.2s;
  265. }
  266. .left-title {
  267. display: flex;
  268. align-items: center;
  269. }
  270. .orange-bar {
  271. width: 0.25rem;
  272. height: 1rem;
  273. background-color: #FF5722;
  274. border-radius: 0.125rem;
  275. margin-right: 0.46875rem;
  276. }
  277. .left-title .title {
  278. font-size: 0.875rem;
  279. font-weight: bold;
  280. color: #333;
  281. }
  282. .left-title .count {
  283. font-size: 0.75rem;
  284. color: #999;
  285. margin-left: 0.25rem;
  286. font-weight: normal;
  287. }
  288. .filter-options {
  289. display: flex;
  290. align-items: center;
  291. font-size: 0.75rem;
  292. color: #666;
  293. }
  294. .filter-item {
  295. margin-left: 0.9375rem;
  296. transition: color 0.3s;
  297. display: flex;
  298. align-items: center;
  299. }
  300. .filter-item.active {
  301. color: #FF5722;
  302. font-weight: bold;
  303. }
  304. /* Sort Icon Design: Up and Down arrows */
  305. .sort-icon {
  306. display: flex;
  307. flex-direction: column;
  308. margin-left: 0.1875rem;
  309. justify-content: center;
  310. height: 0.625rem;
  311. }
  312. .sort-icon .up {
  313. width: 0;
  314. height: 0;
  315. border-left: 0.1875rem solid transparent;
  316. border-right: 0.1875rem solid transparent;
  317. border-bottom: 0.1875rem solid #ccc;
  318. margin-bottom: 0.0625rem;
  319. }
  320. .sort-icon .down {
  321. width: 0;
  322. height: 0;
  323. border-left: 0.1875rem solid transparent;
  324. border-right: 0.1875rem solid transparent;
  325. border-top: 0.1875rem solid #ccc;
  326. }
  327. .filter-item.active .sort-icon .up.active {
  328. border-bottom-color: #FF5722;
  329. }
  330. .filter-item.active .sort-icon .down.active {
  331. border-top-color: #FF5722;
  332. }
  333. .dropdown {
  334. display: flex;
  335. align-items: center;
  336. margin-left: 0.9375rem;
  337. background-color: transparent;
  338. padding: 0.1875rem 0.625rem;
  339. border-radius: 0.9375rem;
  340. border: none;
  341. box-shadow: none;
  342. }
  343. .dropdown uni-text {
  344. margin-left: 0;
  345. font-size: 0.75rem;
  346. color: #333;
  347. }
  348. .dropdown .arrow-down {
  349. font-size: 0.5625rem;
  350. margin-left: 0.1875rem;
  351. color: #999;
  352. }
  353. /* 任务大厅列表 */
  354. .task-list {
  355. padding: 0 0.9375rem;
  356. width: 100%;
  357. }
  358. /* 任务卡片优化 */
  359. .task-card {
  360. background-color: #fff;
  361. border-radius: 0.75rem;
  362. padding: 0.625rem 0.625rem;
  363. margin-bottom: 0.625rem;
  364. box-shadow: 0 0.15625rem 0.625rem rgba(0, 0, 0, 0.04);
  365. width: 100%;
  366. }
  367. .card-header {
  368. display: flex;
  369. justify-content: space-between;
  370. align-items: center;
  371. margin-bottom: 0.46875rem;
  372. }
  373. .type-badge {
  374. display: flex;
  375. align-items: center;
  376. }
  377. .type-icon {
  378. width: 1.375rem;
  379. height: 1.375rem;
  380. margin-right: 0.46875rem;
  381. background-color: #FFF3E0;
  382. border-radius: 50%;
  383. padding: 0.1875rem;
  384. box-sizing: border-box;
  385. }
  386. .type-text {
  387. font-size: 0.875rem;
  388. font-weight: bold;
  389. color: #333;
  390. }
  391. .price {
  392. font-size: 0.875rem;
  393. font-weight: bold;
  394. color: #FF5252;
  395. }
  396. .time-row {
  397. font-size: 0.8125rem;
  398. color: #666;
  399. margin-bottom: 0.625rem;
  400. }
  401. .time-row .value {
  402. color: #333;
  403. margin-left: 0.3125rem;
  404. }
  405. /* 宠物卡片 */
  406. .pet-card {
  407. background-color: #FFF8F0;
  408. border-radius: 0.5rem;
  409. padding: 0.46875rem 0.625rem;
  410. display: flex;
  411. align-items: center;
  412. margin-bottom: 0.9375rem;
  413. }
  414. .pet-avatar {
  415. width: 2.5rem;
  416. height: 2.5rem;
  417. border-radius: 50%;
  418. margin-right: 0.625rem;
  419. }
  420. .pet-info {
  421. flex: 1;
  422. display: flex;
  423. flex-direction: column;
  424. }
  425. .pet-name {
  426. font-size: 0.875rem;
  427. font-weight: bold;
  428. color: #333;
  429. margin-bottom: 0.15625rem;
  430. }
  431. .pet-breed {
  432. font-size: 0.75rem;
  433. color: #999;
  434. }
  435. .pet-profile-btn {
  436. font-size: 0.75rem;
  437. color: #FF9800;
  438. border: 1px solid #FF9800;
  439. padding: 0.1875rem 0.625rem;
  440. border-radius: 1.5625rem;
  441. background-color: #fff;
  442. }
  443. /* 路线信息 */
  444. .route-info {
  445. margin-bottom: 0.625rem;
  446. }
  447. .route-item {
  448. display: flex;
  449. align-items: flex-start;
  450. padding-bottom: 0.625rem;
  451. position: relative;
  452. width: 100%;
  453. }
  454. /* 路线项底部的间隔 */
  455. .route-item:not(:last-child) {
  456. margin-bottom: 0.5rem;
  457. }
  458. .route-item:last-child {
  459. padding-bottom: 0;
  460. margin-bottom: 0;
  461. }
  462. .route-line-vertical {
  463. position: absolute;
  464. left: 0.59375rem;
  465. top: 1.4375rem;
  466. bottom: -0.46875rem;
  467. /* Adjusted to connect the now-closer nodes */
  468. border-left: 0.0625rem dashed #E0E0E0;
  469. width: 0;
  470. z-index: 0;
  471. }
  472. .icon-circle {
  473. width: 1.25rem;
  474. height: 1.25rem;
  475. border-radius: 50%;
  476. color: #fff;
  477. font-size: 0.6875rem;
  478. display: flex;
  479. align-items: center;
  480. justify-content: center;
  481. margin-right: 0.625rem;
  482. flex-shrink: 0;
  483. font-weight: bold;
  484. margin-top: 0.1875rem;
  485. position: relative;
  486. z-index: 1;
  487. /* Above line */
  488. }
  489. .icon-circle.start {
  490. background-color: #FFB74D;
  491. }
  492. .icon-circle.end {
  493. background-color: #81C784;
  494. }
  495. .icon-circle.service {
  496. background-color: #81C784;
  497. }
  498. .address-box {
  499. flex: 1;
  500. display: flex;
  501. flex-direction: column;
  502. padding-right: 0.625rem;
  503. width: 0;
  504. }
  505. .addr-title-row {
  506. display: flex;
  507. align-items: center;
  508. justify-content: space-between;
  509. }
  510. .addr-title {
  511. font-size: 0.875rem;
  512. font-weight: bold;
  513. color: #333;
  514. margin-bottom: 0.1875rem;
  515. flex: 1;
  516. }
  517. .phone-call-btn {
  518. width: 1.5rem;
  519. height: 1.5rem;
  520. display: flex;
  521. align-items: center;
  522. justify-content: center;
  523. background-color: #E8F5E9;
  524. border-radius: 50%;
  525. margin-left: 0.3125rem;
  526. transition: transform 0.1s;
  527. }
  528. .phone-call-btn:active {
  529. transform: scale(0.9);
  530. background-color: #C8E6C9;
  531. }
  532. .phone-icon-item {
  533. width: 0.875rem;
  534. height: 0.875rem;
  535. }
  536. .addr-desc {
  537. font-size: 0.75rem;
  538. color: #999;
  539. line-height: normal;
  540. }
  541. .distance-tag {
  542. display: flex;
  543. align-items: center;
  544. background-color: #FFF3E0;
  545. padding: 0.1875rem 0.1875rem 0.1875rem 0.375rem;
  546. border-radius: 0.9375rem;
  547. flex-shrink: 0;
  548. }
  549. .distance-tag uni-text {
  550. font-size: 0.75rem;
  551. color: #FF5722;
  552. margin-right: 0.15625rem;
  553. font-weight: normal;
  554. }
  555. .nav-arrow {
  556. width: 1rem;
  557. height: 1rem;
  558. }
  559. .service-content {
  560. margin-top: -0.3125rem;
  561. /* Shifted up using negative margin for max compactness */
  562. font-size: 0.75rem;
  563. /* 12pt */
  564. color: #666;
  565. padding-left: 1.875rem;
  566. }
  567. .content-label {
  568. color: #999;
  569. margin-right: 0.3125rem;
  570. }
  571. /* 备注 */
  572. .remark-box {
  573. background-color: #F8F8F8;
  574. padding: 0.46875rem 0.625rem;
  575. border-radius: 0.25rem;
  576. font-size: 0.75rem;
  577. color: #666;
  578. margin-bottom: 0.625rem;
  579. }
  580. /* 按钮组 */
  581. .action-btns {
  582. display: flex;
  583. justify-content: space-between;
  584. }
  585. .btn {
  586. height: 2rem;
  587. /* Increased height */
  588. line-height: 2rem;
  589. border-radius: 1rem;
  590. /* Matches height/2 */
  591. font-size: 0.875rem;
  592. /* Slightly larger */
  593. font-weight: normal;
  594. width: 48%;
  595. }
  596. .btn::after {
  597. border: none;
  598. }
  599. .btn.reject {
  600. background-color: #F5F5F5;
  601. color: #999;
  602. box-shadow: none;
  603. }
  604. .btn.accept {
  605. background: linear-gradient(90deg, #FF9800 0%, #FF5722 100%);
  606. color: #fff;
  607. box-shadow: 0 0.15625rem 0.46875rem rgba(255, 87, 34, 0.3);
  608. }
  609. .bg-circle-right {
  610. position: absolute;
  611. top: -0.625rem;
  612. right: -0.625rem;
  613. width: 5.78125rem;
  614. /* +20rpx */
  615. height: 5.78125rem;
  616. /* +20rpx */
  617. border-radius: 50%;
  618. background-color: rgba(255, 218, 185, 0.8);
  619. /* 80% opacity */
  620. }
  621. /* 筛选面板 (Absolute Child) */
  622. .filter-panel {
  623. position: absolute;
  624. /* Relative to .task-header */
  625. top: 2.9375rem;
  626. /* Start right below header */
  627. left: 0;
  628. width: 100%;
  629. background-color: #fff;
  630. z-index: 2;
  631. /* Layer 2: Below inner(3), Above mask(1) */
  632. padding: 0.9375rem 0.9375rem 1.25rem;
  633. border-bottom-left-radius: 0.9375rem;
  634. border-bottom-right-radius: 0.9375rem;
  635. box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.1);
  636. transform: translateY(-0.625rem);
  637. /* Slightly tucked start */
  638. opacity: 0;
  639. transition: all 0.25s ease-out;
  640. visibility: hidden;
  641. }
  642. .filter-panel.show {
  643. transform: translateY(0);
  644. opacity: 1;
  645. visibility: visible;
  646. }
  647. /* 筛选遮罩 (Absolute Child) */
  648. .filter-mask {
  649. position: absolute;
  650. top: 2.9375rem;
  651. /* Start below header */
  652. left: 0;
  653. right: 0;
  654. height: 100vh;
  655. /* Cover visible area below */
  656. background-color: rgba(0, 0, 0, 0.5);
  657. z-index: 1;
  658. /* Layer 1: Lowest in header */
  659. }
  660. .filter-section {
  661. margin-bottom: 1.25rem;
  662. }
  663. .section-title {
  664. font-size: 0.875rem;
  665. font-weight: bold;
  666. color: #333;
  667. margin-bottom: 0.625rem;
  668. display: block;
  669. }
  670. .options-grid {
  671. display: flex;
  672. flex-wrap: wrap;
  673. gap: 0.625rem;
  674. }
  675. .option-btn {
  676. width: calc(33.33% - 0.4375rem);
  677. /* 3 cols with gap */
  678. height: 2rem;
  679. line-height: 2rem;
  680. text-align: center;
  681. border-radius: 1rem;
  682. font-size: 0.8125rem;
  683. color: #666;
  684. background-color: #fff;
  685. border: 0.0625rem solid #E0E0E0;
  686. margin-bottom: 0.3125rem;
  687. }
  688. .option-btn.active {
  689. color: #FF5722;
  690. background-color: #FFF3E0;
  691. border-color: #FF5722;
  692. font-weight: bold;
  693. }
  694. .filter-actions {
  695. display: flex;
  696. justify-content: space-between;
  697. margin-top: 1.5625rem;
  698. }
  699. .action-btn {
  700. width: 48%;
  701. height: 2rem;
  702. /* Match .btn */
  703. line-height: 2rem;
  704. border-radius: 1rem;
  705. /* Match .btn */
  706. font-size: 0.875rem;
  707. /* Match .btn */
  708. font-weight: normal;
  709. /* Match .btn */
  710. }
  711. .action-btn::after {
  712. border: none;
  713. }
  714. .action-btn.reset {
  715. background-color: #F5F5F5;
  716. color: #999;
  717. /* Match light gray */
  718. }
  719. .action-btn.confirm {
  720. background: linear-gradient(90deg, #FF9800 0%, #FF5722 100%);
  721. color: #fff;
  722. box-shadow: 0 0.15625rem 0.46875rem rgba(255, 87, 34, 0.3);
  723. }
  724. /* 状态胶囊 */
  725. .status-pill {
  726. display: flex;
  727. align-items: center;
  728. background-color: #333333;
  729. /* Dark background */
  730. border-radius: 0.625rem;
  731. padding: 0.125rem 0.5rem 0.125rem 0.25rem;
  732. margin-left: 0.5rem;
  733. transition: background-color 0.3s;
  734. }
  735. .status-pill.resting {
  736. background-color: #424242;
  737. /* Slightly lighter dark */
  738. }
  739. .status-dot-bg {
  740. width: 0.75rem;
  741. height: 0.75rem;
  742. background-color: #4CAF50;
  743. border-radius: 50%;
  744. margin-right: 0.1875rem;
  745. display: flex;
  746. justify-content: center;
  747. align-items: center;
  748. }
  749. .check-mark {
  750. color: #fff;
  751. font-size: 0.4375rem;
  752. font-weight: bold;
  753. }
  754. .status-pill.resting .status-dot-bg {
  755. background-color: #FF5722;
  756. /* Warning color for resting */
  757. }
  758. .status-icon {
  759. width: 0.75rem;
  760. height: 0.75rem;
  761. margin-right: 0.1875rem;
  762. }
  763. .status-text {
  764. font-size: 0.6875rem;
  765. color: #fff;
  766. margin-right: 0.1875rem;
  767. }
  768. .status-pill .arrow-down {
  769. color: #fff;
  770. font-size: 0.3125rem;
  771. /* Reduced size */
  772. margin-left: 0.125rem;
  773. /* Adjust spacing */
  774. }
  775. /* 空状态 - 休息中 */
  776. .empty-state {
  777. display: flex;
  778. flex-direction: column;
  779. align-items: center;
  780. justify-content: center;
  781. padding-top: 4.6875rem;
  782. }
  783. .empty-icon {
  784. width: 6.25rem;
  785. height: 6.25rem;
  786. margin-bottom: 1.25rem;
  787. opacity: 0.5;
  788. }
  789. .empty-text {
  790. font-size: 0.875rem;
  791. color: #666;
  792. margin-bottom: 1.875rem;
  793. }
  794. .start-work-btn {
  795. width: 9.375rem;
  796. height: 2.5rem;
  797. line-height: 2.5rem;
  798. background: linear-gradient(90deg, #FF9800 0%, #FF5722 100%);
  799. border-radius: 1.25rem;
  800. color: #fff;
  801. font-size: 0.9375rem;
  802. font-weight: bold;
  803. box-shadow: 0 0.15625rem 0.46875rem rgba(255, 87, 34, 0.3);
  804. }
  805. /* 自定义确认弹窗 */
  806. .modal-mask {
  807. position: fixed;
  808. top: 0;
  809. left: 0;
  810. right: 0;
  811. bottom: 0;
  812. background-color: rgba(0, 0, 0, 0.5);
  813. z-index: 999;
  814. display: flex;
  815. align-items: center;
  816. justify-content: center;
  817. }
  818. .custom-modal {
  819. width: 18.75rem;
  820. background-color: #fff;
  821. border-radius: 0.75rem;
  822. padding: 1.25rem 1.5625rem;
  823. display: flex;
  824. flex-direction: column;
  825. align-items: center;
  826. }
  827. .modal-title {
  828. font-size: 1.125rem;
  829. font-weight: bold;
  830. color: #333;
  831. margin-bottom: 0.9375rem;
  832. }
  833. .modal-content {
  834. font-size: 0.9375rem;
  835. color: #666;
  836. margin-bottom: 1.5625rem;
  837. text-align: center;
  838. }
  839. .modal-btns {
  840. width: 100%;
  841. display: flex;
  842. justify-content: space-between;
  843. }
  844. .modal-btn {
  845. width: 45%;
  846. height: 2.5rem;
  847. line-height: 2.5rem;
  848. border-radius: 1.25rem;
  849. font-size: 0.9375rem;
  850. font-weight: bold;
  851. margin: 0;
  852. }
  853. .modal-btn::after {
  854. border: none;
  855. }
  856. .modal-btn.cancel {
  857. background-color: #F5F5F5;
  858. color: #999;
  859. }
  860. .modal-btn.confirm {
  861. background: linear-gradient(90deg, #FF9800 0%, #FF5722 100%);
  862. color: #fff;
  863. box-shadow: 0 0.15625rem 0.46875rem rgba(255, 87, 34, 0.3);
  864. }
  865. /* 宠物档案弹窗 */
  866. .pet-modal-mask {
  867. position: fixed;
  868. top: 0;
  869. left: 0;
  870. right: 0;
  871. bottom: 0;
  872. background-color: rgba(0, 0, 0, 0.4);
  873. z-index: 1000;
  874. display: flex;
  875. align-items: center;
  876. justify-content: center;
  877. }
  878. .pet-modal-content {
  879. width: 21.25rem;
  880. height: 85vh;
  881. background-color: #fff;
  882. border-radius: 0.625rem;
  883. display: flex;
  884. flex-direction: column;
  885. overflow: hidden;
  886. }
  887. .pet-modal-header {
  888. display: flex;
  889. align-items: center;
  890. justify-content: space-between;
  891. padding: 0.9375rem;
  892. border-bottom: 0.03125rem solid #F0F0F0;
  893. }
  894. .pet-modal-title {
  895. font-size: 1.0625rem;
  896. font-weight: bold;
  897. color: #333;
  898. }
  899. .pet-modal-scroll {
  900. flex: 1;
  901. height: 0;
  902. padding: 0.9375rem;
  903. box-sizing: border-box;
  904. }
  905. .pet-base-info {
  906. display: flex;
  907. align-items: center;
  908. margin-bottom: 1.25rem;
  909. }
  910. .pm-avatar {
  911. width: 3.75rem;
  912. height: 3.75rem;
  913. border-radius: 50%;
  914. margin-right: 0.9375rem;
  915. border: 0.0625rem solid #f5f5f5;
  916. }
  917. .pm-info-text {
  918. flex: 1;
  919. display: flex;
  920. flex-direction: column;
  921. }
  922. .pm-name-row {
  923. display: flex;
  924. align-items: center;
  925. margin-bottom: 0.46875rem;
  926. }
  927. .pm-name {
  928. font-size: 1.125rem;
  929. font-weight: bold;
  930. color: #333;
  931. margin-right: 0.625rem;
  932. }
  933. .pm-gender {
  934. display: flex;
  935. align-items: center;
  936. background-color: #E3F2FD;
  937. padding: 0.125rem 0.375rem;
  938. border-radius: 0.625rem;
  939. }
  940. .pm-gender uni-text {
  941. font-size: 0.6875rem;
  942. color: #1E88E5;
  943. }
  944. .pm-gender .gender-icon {
  945. font-weight: bold;
  946. margin-right: 0.125rem;
  947. }
  948. .pm-gender.female {
  949. background-color: #FCE4EC;
  950. }
  951. .pm-gender.female uni-text {
  952. color: #D81B60;
  953. }
  954. .pm-breed {
  955. font-size: 0.8125rem;
  956. color: #999;
  957. }
  958. .pm-detail-grid {
  959. display: flex;
  960. flex-wrap: wrap;
  961. justify-content: space-between;
  962. }
  963. .pm-grid-item {
  964. background-color: #F8F8F8;
  965. border-radius: 0.5rem;
  966. padding: 0.75rem;
  967. margin-bottom: 0.625rem;
  968. display: flex;
  969. flex-direction: column;
  970. }
  971. .pm-grid-item.half {
  972. width: 48%;
  973. box-sizing: border-box;
  974. }
  975. .pm-grid-item.full {
  976. width: 100%;
  977. box-sizing: border-box;
  978. }
  979. .pm-label {
  980. font-size: 0.75rem;
  981. color: #999;
  982. margin-bottom: 0.3125rem;
  983. }
  984. .pm-val {
  985. font-size: 0.875rem;
  986. color: #333;
  987. font-weight: 500;
  988. }
  989. .pm-tags {
  990. display: flex;
  991. flex-wrap: wrap;
  992. gap: 0.625rem;
  993. margin-bottom: 1.25rem;
  994. }
  995. .pm-tag {
  996. background-color: #FFF8EB;
  997. border: 0.0625rem solid #FFCC80;
  998. color: #FF9800;
  999. font-size: 0.6875rem;
  1000. padding: 0.25rem 0.75rem;
  1001. border-radius: 0.9375rem;
  1002. }
  1003. .pm-section-title {
  1004. display: flex;
  1005. align-items: center;
  1006. margin-bottom: 0.9375rem;
  1007. padding-top: 0.9375rem;
  1008. border-top: 0.0625rem dashed #F0F0F0;
  1009. }
  1010. .pm-section-title .orange-bar {
  1011. width: 0.25rem;
  1012. height: 1rem;
  1013. background-color: #FF9800;
  1014. margin-right: 0.5rem;
  1015. border-radius: 0.125rem;
  1016. }
  1017. .pm-section-title uni-text {
  1018. font-size: 0.9375rem;
  1019. font-weight: bold;
  1020. color: #333;
  1021. }
  1022. .pm-log-list {
  1023. display: flex;
  1024. flex-direction: column;
  1025. }
  1026. .pm-log-item {
  1027. display: flex;
  1028. flex-direction: column;
  1029. padding: 0.75rem 0;
  1030. border-bottom: 0.03125rem solid #F0F0F0;
  1031. }
  1032. .pm-log-item:last-child {
  1033. border-bottom: none;
  1034. }
  1035. .pm-log-date {
  1036. font-size: 0.75rem;
  1037. color: #999;
  1038. margin-bottom: 0.5rem;
  1039. }
  1040. .pm-log-text {
  1041. font-size: 0.875rem;
  1042. color: #333;
  1043. line-height: 1.6;
  1044. margin-bottom: 0.625rem;
  1045. }
  1046. .pm-log-recorder {
  1047. font-size: 0.75rem;
  1048. color: #FF9800;
  1049. align-self: flex-end;
  1050. }
  1051. /* 拒绝接单弹窗输入框 */
  1052. .reject-textarea {
  1053. width: 100%;
  1054. height: 6.25rem;
  1055. background-color: #F8F8F8;
  1056. border-radius: 0.375rem;
  1057. padding: 0.75rem;
  1058. font-size: 0.875rem;
  1059. line-height: 1.5;
  1060. box-sizing: border-box;
  1061. margin-bottom: 0.625rem;
  1062. }
  1063. .mt-30 {
  1064. margin-top: 0.9375rem;
  1065. }
  1066. /* 宠物档案底部关闭按钮 */
  1067. .pm-bottom-close {
  1068. width: 100%;
  1069. height: 2.5rem;
  1070. line-height: 2.5rem;
  1071. background-color: #F5F5F5;
  1072. color: #666;
  1073. border-radius: 1.25rem;
  1074. font-size: 0.9375rem;
  1075. font-weight: bold;
  1076. margin: 0;
  1077. }
  1078. .pm-bottom-close::after {
  1079. border: none;
  1080. }
  1081. /* 宠物档案原生关闭图标 */
  1082. .close-icon-btn {
  1083. font-size: 1.5rem;
  1084. color: #999;
  1085. line-height: 1;
  1086. padding: 0 0.3125rem;
  1087. }
  1088. /* 确认接单弹窗内容 */
  1089. .modal-content-box {
  1090. display: flex;
  1091. flex-direction: column;
  1092. align-items: center;
  1093. margin-bottom: 0.625rem;
  1094. }
  1095. .modal-content-main {
  1096. font-size: 0.9375rem;
  1097. color: #333;
  1098. margin-bottom: 0.5rem;
  1099. }
  1100. .modal-content-sub {
  1101. font-size: 0.75rem;
  1102. color: #999;
  1103. }
  1104. /* 地图导航 Action Sheet */
  1105. .nav-modal-mask {
  1106. position: fixed;
  1107. top: 0;
  1108. left: 0;
  1109. right: 0;
  1110. bottom: 0;
  1111. background-color: rgba(0, 0, 0, 0.5);
  1112. z-index: 1000;
  1113. display: flex;
  1114. flex-direction: column;
  1115. justify-content: flex-end;
  1116. }
  1117. .nav-action-sheet {
  1118. background-color: #fff;
  1119. width: 100%;
  1120. border-top-left-radius: 0.75rem;
  1121. border-top-right-radius: 0.75rem;
  1122. overflow: hidden;
  1123. padding-bottom: constant(safe-area-inset-bottom);
  1124. padding-bottom: env(safe-area-inset-bottom);
  1125. }
  1126. .nav-sheet-title {
  1127. text-align: center;
  1128. padding: 0.9375rem 0;
  1129. font-size: 13px;
  1130. color: #999;
  1131. border-bottom: 0.03125rem solid #efefef;
  1132. }
  1133. .nav-sheet-item {
  1134. text-align: center;
  1135. padding: 0.9375rem 0;
  1136. font-size: 13px;
  1137. color: #333;
  1138. background-color: #fff;
  1139. border-bottom: 0.03125rem solid #efefef;
  1140. }
  1141. .nav-sheet-item.cancel {
  1142. border-bottom: none;
  1143. color: #666;
  1144. }
  1145. .nav-sheet-gap {
  1146. height: 0.5rem;
  1147. background-color: #F8F8F8;
  1148. }