/* pages/home/index.wxss */ page { background: #ededed; color: #1a1a2e; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } .page { min-height: 100vh; box-sizing: border-box; padding: 24rpx 24rpx 64rpx; background-color: transparent; } /* === 头部信息卡(翡翠绿实底) === */ .header-card { position: relative; overflow: hidden; background: linear-gradient(135deg, #29b785 0%, #1a8a63 100%); border-radius: 28rpx; padding: 36rpx 32rpx; color: #ffffff; box-shadow: 0 12rpx 32rpx rgba(26, 138, 99, 0.25); } /* 装饰光斑,增加层次 */ .header-card::before, .header-card::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.07); pointer-events: none; } .header-card::before { width: 260rpx; height: 260rpx; top: -120rpx; right: -60rpx; } .header-card::after { width: 160rpx; height: 160rpx; bottom: -80rpx; left: -40rpx; background: rgba(255, 255, 255, 0.05); } .profile-row { position: relative; display: flex; justify-content: space-between; align-items: center; } .profile-left { display: flex; align-items: center; } .avatar { width: 96rpx; height: 96rpx; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); border: 2rpx solid rgba(255, 255, 255, 0.45); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .avatar-img { width: 100%; height: 100%; } .avatar-text { font-size: 40rpx; font-weight: 600; color: #ffffff; } .profile-info { margin-left: 20rpx; } .name-row { display: flex; align-items: center; } .name { font-size: 36rpx; font-weight: 700; } .level-tag { margin-left: 12rpx; background-color: rgba(255, 255, 255, 0.2); border-radius: 16rpx; padding: 4rpx 14rpx; } .level-text { font-size: 20rpx; color: #ffffff; } .greeting { display: block; margin-top: 8rpx; font-size: 22rpx; color: rgba(255, 255, 255, 0.65); } .online-switch { display: flex; align-items: center; background-color: rgba(255, 255, 255, 0.16); border: 1rpx solid rgba(255, 255, 255, 0.28); border-radius: 28rpx; padding: 6rpx 6rpx 6rpx 18rpx; } .switch-text { font-size: 24rpx; margin-right: 10rpx; color: #ffffff; } .switch-track { width: 56rpx; height: 32rpx; border-radius: 16rpx; background-color: rgba(255, 255, 255, 0.35); position: relative; transition: background-color 0.2s ease; } .switch-track.on { background-color: #ffffff; } .switch-thumb { width: 28rpx; height: 28rpx; border-radius: 50%; background-color: #ffffff; position: absolute; top: 2rpx; left: 2rpx; transition: left 0.2s ease, background-color 0.2s ease; } .switch-track.on .switch-thumb { left: 26rpx; background-color: #1a8a63; } .stats-row { display: flex; justify-content: space-between; margin-top: 36rpx; } .stat { display: flex; flex-direction: column; } .stat-right { align-items: flex-end; } .stat-divider { width: 2rpx; background: rgba(255, 255, 255, 0.25); } .stat-label { font-size: 24rpx; color: rgba(255, 255, 255, 0.75); } .stat-value { display: flex; align-items: baseline; margin-top: 8rpx; font-weight: 600; } .stat-unit { font-size: 26rpx; margin-right: 4rpx; } .stat-num { font-size: 44rpx; font-weight: 700; line-height: 1; color: #ffffff; } /* === 通用 Section === */ .section { margin-top: 44rpx; } .section-title { position: relative; font-size: 30rpx; font-weight: 600; color: #1a1a1a; margin-left: 20rpx; letter-spacing: 1rpx; } .section-title::before { content: ''; position: absolute; left: -20rpx; top: 50%; transform: translateY(-50%); width: 8rpx; height: 28rpx; border-radius: 4rpx; background: linear-gradient(180deg, #2dd36f, #17c3a5); } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16rpx; } .view-all { display: flex; align-items: center; font-size: 24rpx; color: #a0a3bd; } /* === 快捷功能入口 === */ .card { background-color: #ffffff; border-radius: 24rpx; border: 1rpx solid rgba(31, 61, 56, 0.06); box-shadow: 0 6rpx 20rpx rgba(31, 61, 56, 0.07); } .quick-grid { margin-top: 16rpx; padding: 32rpx 8rpx 8rpx; display: flex; flex-wrap: wrap; } .quick-row { display: flex; width: 100%; } .quick-item { width: 25%; display: flex; flex-direction: column; align-items: center; margin-bottom: 32rpx; transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1); } .quick-item:active { opacity: 0.85; transform: scale(0.92); } .quick-icon { width: 88rpx; height: 88rpx; border-radius: 26rpx; display: flex; align-items: center; justify-content: center; margin-bottom: 14rpx; box-shadow: inset 0 2rpx 4rpx rgba(255, 255, 255, 0.8), 0 4rpx 10rpx rgba(31, 61, 56, 0.06); } .quick-label { font-size: 26rpx; color: #3a3f4d; } /* === 订单列表 === */ .order-list { display: flex; flex-direction: column; gap: 20rpx; } .order-card { background: #ffffff; border-radius: 24rpx; border: 1rpx solid rgba(31, 61, 56, 0.06); padding: 28rpx 32rpx; box-shadow: 0 6rpx 20rpx rgba(31, 61, 56, 0.07); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.3s cubic-bezier(0.32, 0.72, 0, 1); } .order-card:active { transform: scale(0.98); box-shadow: 0 4rpx 12rpx rgba(31, 61, 56, 0.08); } .order-line1 { display: flex; align-items: center; } .order-patient { font-size: 30rpx; font-weight: 600; color: #1a1a1a; margin-right: 16rpx; } .order-service { font-size: 26rpx; font-weight: 500; color: #1abc9c; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .status-tag { font-size: 22rpx; padding: 6rpx 20rpx; border-radius: 30rpx; font-weight: 500; flex-shrink: 0; } .status-pending { background: #fdf3e0; color: #d99a2b; } .status-confirmed { background: #e9f1f8; color: #5c88a8; } .status-in_progress { background: #e6f4ee; color: #43a08a; } .status-completed { background: #efedf6; color: #8a7bb5; } .status-cancelled { background: #f5f5f5; color: #b0b0b0; } .order-line2 { display: flex; align-items: center; justify-content: space-between; margin-top: 12rpx; } .order-hospital { font-size: 26rpx; color: #888888; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 16rpx; } .order-time { font-size: 26rpx; color: #a0a3bd; flex-shrink: 0; } /* === 空状态 === */ .empty-state { background: #ffffff; border-radius: 24rpx; border: 1rpx solid rgba(31, 61, 56, 0.06); padding: 64rpx 0; display: flex; flex-direction: column; align-items: center; box-shadow: 0 6rpx 20rpx rgba(31, 61, 56, 0.07); } .empty-text { margin-top: 16rpx; font-size: 26rpx; color: #c0c3d4; }