src/robotaxi/pages/begin-route/components/calling-car-modules/trip-status-header.tsx
@@ -179,9 +179,9 @@ <Image className='calling-car-site-check' src='https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/route-state-icon-black-20260702.png'></Image> </View> <View className='calling-car-site-box-content'> <View>{startSiteName}</View> <View className='calling-car-site-box-content-name'>{startSiteName}</View> <View className='calling-car-site-box-divider'></View> <View>{endSiteName}</View> <View className='calling-car-site-box-content-name'>{endSiteName}</View> </View> </View> </> src/robotaxi/pages/begin-route/components/calling-car.tsx
@@ -166,6 +166,7 @@ /** 是否为“到达终点/待支付”状态（图一、图二） */ const isTripFinished = tripStatus === TripStatus.TripFinished; const isCallingCar = tripStatus === TripStatus.CallingCar; /** 费用明细是否展开（拦截 FareDetailCard 的回调本地记录，用于切换背景与卡片布局） */ const [detailExpanded, setDetailExpanded] = useState(false); /** 大号里程文案：取全程里程，单位参考 formatTripDistance（米→M，公里→KM） */ @@ -184,19 +185,24 @@ } }; const getCardBgImg = () => { if(isCallingCar) { return <Image className='calling-car-bg carlling-bg' src='https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/top-card-bg-20260722.png' /> } if(isTripFinished) { return <Image className='calling-car-bg finished-bg' src='https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/trip-finished-20260703.png' /> } return <Image className='calling-car-bg' src='https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/card-bg-20260714.png' /> } // 根节点状态类：待支付态 + 明细展开态 const rootClassName = `calling-car${isTripFinished ? ' calling-car--finished' : ''}${isTripFinished && detailExpanded ? ' is-detail-expanded' : ''}`; // 待支付态使用专属背景图，其余状态沿用叫车成功背景图 const bgImageSrc = isTripFinished ? 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/trip-finished-20260703.png' : 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/card-bg-20260714.png'; const rootClassName = `calling-car${isTripFinished ? ' calling-car--finished' : ''}${isTripFinished && detailExpanded ? ' is-detail-expanded' : ''} ${isCallingCar ? 'calling-status-car' : ''}`; // 按状态组合渲染行程卡片模块 return ( <View className={rootClassName}> <Image className={`calling-car-bg ${isTripFinished ? 'finished-bg' : ''}`} src={bgImageSrc} /> {getCardBgImg()} { [TripStatus.VehicleApproaching, TripStatus.VehicleArrivedPickup, TripStatus.InService].includes(tripStatus) && vehicleInfo?.vehiclePictures && [TripStatus.VehicleApproaching, TripStatus.VehicleArrivedPickup, TripStatus.InService, TripStatus.PaymentSuccess].includes(tripStatus) && vehicleInfo?.plateNumber && <Image className='calling-car-vehicle-pic' src={safeParse(vehicleInfo?.vehiclePictures, {})?.url || 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/default-vehicle-img-20260724-v2.png'} src/robotaxi/pages/begin-route/components/css-folder/calling-car.less
@@ -16,6 +16,9 @@ background: @gary-theme; border-radius: 60px 60px 0 0; overflow: hidden; &.calling-status-car { padding-top: 84px; } .calling-car-content-box { position: relative; padding: 48px 48px 82px 48px; @@ -28,6 +31,9 @@ left: 0; width: 100%; height: 282px; &.carlling-bg { height: 276px; } &.finished-bg { height: 844px; } @@ -36,8 +42,8 @@ position: absolute; top: -4px; right: 116px; width: 338px; height: 236px; width: 342px; height: 294px; z-index: 1; } } @@ -826,7 +832,7 @@ } .calling-car-content-title--strong { font-size: 40px; font-weight: 600; font-weight: 500; line-height: 48px; color: @black-text-main; } @@ -839,6 +845,9 @@ margin: 0 12px; color: rgba(20, 30, 39, 0.2); } .calling-car-site-box-content-name { font-weight: 500; } } .calling-car-cancel-btn { flex-shrink: 0; src/robotaxi/pages/begin-route/components/css-folder/cancel-popup.less
@@ -123,29 +123,37 @@ margin-top: 48px; .cancel-btn-cancel { display: flex; align-items: center; justify-content: center; flex: 1; border: 4px solid #141E27; border-radius: 1000px; font-size: 32px; line-height: 104px; text-align: center; letter-spacing: normal; color: #141E27; height: 104px; box-sizing: border-box; height: 102px; font-weight: 500; width: 310px; } .cancel-btn-again { display: flex; align-items: center; justify-content: center; flex: 1; text-align: center; border-radius: 1000px; border: 4px solid #141E27; box-sizing: border-box; font-size: 32px; line-height: 104px; text-align: center; color: #141E27; height: 104px; height: 102px; width: 310px; font-weight: 500; } .wait-btn { margin-left: 22px; src/robotaxi/pages/begin-route/components/css-folder/modify-destination-review.less
@@ -65,7 +65,7 @@ z-index: 1; display: flex; gap: 16px; padding: 40px 32px 36px 24px; padding: 80px 32px 48px 24px; border-radius: 40px; background: rgba(204, 208, 215, 0.25); box-sizing: border-box; @@ -126,6 +126,7 @@ .modify-destination-review-select-site-start, .modify-destination-review-select-site-end { font-weight: 500; word-break: break-all; } @@ -242,6 +243,7 @@ font-size: 32px; line-height: 44px; color: #ffffff; font-weight: 500; } &-confirm-disabled { src/robotaxi/pages/begin-route/components/css-folder/route-selection-panel.less
@@ -9,7 +9,7 @@ .route-select-type { display: flex; align-items: flex-end; align-items: flex-end; .route-select-title { font-size: 24px; src/robotaxi/pages/begin-route/hooks/use-view-delegates.tsx
@@ -399,7 +399,7 @@ slot="callout" marker-id={item.id} key={calloutKey} className={`waiting-callout ${deps.tripStatus === TripStatus.Publishing ? 'waiting-callout-publishing' : ''}`} className='waiting-callout' > <CoverView className="waiting-callout-content"> {deps.tripStatus === TripStatus.CallingCar && ( src/robotaxi/pages/begin-route/index.less
@@ -488,10 +488,7 @@ overflow: visible; // 确保辐射动画不被裁剪 min-width: 700px; height: 600px; transform: translateY(-34px); &.waiting-callout-publishing { transform: translateY(16px); } transform: translateY(-40px); } .waiting-radar { @@ -546,6 +543,7 @@ padding: 0 20px; box-sizing: border-box; white-space: nowrap; font-family: @font-xpsans-bold; } .waiting-callout-txt { @@ -561,7 +559,7 @@ .waiting-timedown-bg { padding: 3px 0 0 20px; min-width: 112px; min-width: 128px; height: 80px; .waiting-callout-bg-text { padding: 0;
