| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150 |
- .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;
- }
|