Merge branch 'feature_v2.5.0_fuqj' into 'feature_v2.5.0'
修复一些UI问题
See merge request robotaxi1/xp-robotaxi-miniprogram!245
| | |
| | | } |
| | | .check-all-box { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | align-items: flex-start; |
| | | justify-content: flex-start; |
| | | margin-top: 14px; |
| | | .all-name{ |
| | | font-size: 28px; |
| | |
| | | .rt-item-radio { |
| | | flex-shrink: 0; |
| | | margin-right: 8px; |
| | | margin-top: 6px; |
| | | } |
| | | } |
| | | |
| | |
| | | } |
| | | </Text> |
| | | <View className='rt-link-item mt-22 pt-10 check-all-box' onClick={checkAll}> |
| | | <Image className='rt-item-radio' src={isAllAgree ? 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/check-20260630.png' : 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/uncheck.png'} mode='aspectFill' /> |
| | | <Image className='rt-item-radio' src={isAllAgree ? 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/check-20260630.png' : 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/uncheck-20260804.png'} mode='aspectFill' /> |
| | | <View className='rt-item-name all-name'>我已满18周岁,已阅读并同意:</View> |
| | | </View> |
| | | </View> |
| | |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | background: rgba(0, 0, 0, 0.4); |
| | | background: rgba(0, 0, 0, 0.8); |
| | | z-index: 1; |
| | | } |
| | | |
| | |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | background: rgba(0, 0, 0, 0.5); |
| | | background: rgba(0, 0, 0, 0.8); |
| | | } |
| | | |
| | | .coupon-detail-content { |
| | |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | background: rgba(0, 0, 0, 0.5); |
| | | background: rgba(0, 0, 0, 0.8); |
| | | } |
| | | |
| | | .customer-service-content { |
| | |
| | | background: #ffffff; |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | background: rgba(0, 0, 0, 0.5); |
| | | background: rgba(0, 0, 0, 0.8); |
| | | } |
| | | |
| | | .tip-content { |
| | |
| | | {shouldRenderRight && ( |
| | | <View className="bluetooth-operate-card-right"> |
| | | {/* {!!actionText && <View>{actionText}</View>} */} |
| | | <Image src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/blue-right-icon-20260706.png" /> |
| | | <Image src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/bluetooth-arrow-20260706.png" /> |
| | | </View> |
| | | )} |
| | | </View> |
| | |
| | | </View> |
| | | <View className={`car-card-arrive-item ${lockStatus && 'close-btn-item'} ${loadingControlType ? 'trip-action-bar-item-disabled' : ''}`.trim()} onClick={() => handleUnlock('door', onDoorUnlockSuccess)}> |
| | | <View className="car-card-arrive-item-text">车锁</View> |
| | | <View className="car-card-arrive-item-status">{lockStatus ? '点击关闭' : '点击打开'}</View> |
| | | <View className="car-card-arrive-item-status">{lockStatus ? '车门已解锁' : '点击打开'}</View> |
| | | {renderControlIcon('door', lockStatus ? LOCK_OPEN_ICON_URL : LOCK_CLOSE_ICON_URL, 'car-card-arrive-item-img')} |
| | | </View> |
| | | </View> |
| | |
| | | <View className='cancel-site-box-icon-end'></View> |
| | | </View> |
| | | <View className='cancel-site-box-content'> |
| | | <View>{startSiteName}</View> |
| | | <View className='cancel-site-box-content-name'>{startSiteName}</View> |
| | | <View className='cancel-site-box-divider'></View> |
| | | <View>{endSiteName}</View> |
| | | <View className='cancel-site-box-content-name'>{endSiteName}</View> |
| | | </View> |
| | | </View> |
| | | <View className='cancel-btn-box'> |
| | |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | background: rgba(0, 0, 0, 0); |
| | | background: rgba(0, 0, 0, 0.8); |
| | | } |
| | | |
| | | .announcements-content { |
| | |
| | | height: 313px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | font-weight: normal; |
| | | line-height: 40px; |
| | | letter-spacing: normal; |
| | | color: #6d7fd9; |
| | | color: @black-text-main; |
| | | image { |
| | | flex-shrink: 0; |
| | | width: 24px; |
| | |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | background: rgba(0, 0, 0, 0.5); |
| | | background: rgba(0, 0, 0, 0.8); |
| | | } |
| | | |
| | | .cancel-content { |
| | |
| | | line-height: 48px; |
| | | letter-spacing: normal; |
| | | color: #141E27; |
| | | font-weight: 500; |
| | | .cancel-site-box-divider { |
| | | margin: 34px 32px 40px 0px; |
| | | border-top: 1px solid rgba(204, 208, 215, 0.25); |
| | | } |
| | | .cancel-site-box-content-name { |
| | | font-weight: 500; |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | .credit-pay-mask { |
| | | position: absolute; |
| | | inset: 0; |
| | | background: rgba(0, 0, 0, 0.45); |
| | | background: rgba(0, 0, 0, 0.8); |
| | | } |
| | | |
| | | .credit-pay-content { |
| | |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | background: rgba(0, 0, 0, 0.5); |
| | | background: rgba(0, 0, 0, 0.8); |
| | | } |
| | | |
| | | .evaluate-content { |
| | |
| | | } |
| | | |
| | | .evaluate-rating-switcher { |
| | | |
| | | |
| | | padding: 0 49px; |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | background: rgba(0, 0, 0, 0.4); |
| | | background: rgba(0, 0, 0, 0.8); |
| | | color: #FFF; |
| | | gap: 8px; |
| | | |
| | |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | background: rgba(0, 0, 0, 0.4); |
| | | background: rgba(0, 0, 0, 0.8); |
| | | z-index: 102; |
| | | } |
| | | |
| | |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | background: rgba(0, 0, 0, 0.6); |
| | | background: rgba(0, 0, 0, 0.8); |
| | | } |
| | | |
| | | .no-route-content { |
| | |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | background: rgba(0, 0, 0, 0.5); |
| | | background: rgba(0, 0, 0, 0.8); |
| | | } |
| | | |
| | | .over-content { |
| | |
| | | height: 100%; |
| | | overflow-y: scroll; |
| | | margin-top: 0; |
| | | padding-right: 8px; |
| | | } |
| | | |
| | | .passenger-content-desc-inner { |
| | |
| | | @import '../../../../style/ui-variables.less'; |
| | | |
| | | .pickup-exception-popup { |
| | | position: fixed; |
| | | inset: 0; |
| | |
| | | .pickup-exception-mask { |
| | | position: absolute; |
| | | inset: 0; |
| | | background: rgba(0, 0, 0, 0.6); |
| | | background: rgba(0, 0, 0, 0.8); |
| | | } |
| | | |
| | | .pickup-exception-content { |
| | |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | background: #ffffff; |
| | | border-radius: 32px 32px 0 0; |
| | | padding: 48px 40px 80px; |
| | | background: @gary-theme; |
| | | border-radius: 60px 60px 0 0; |
| | | padding: 48px 48px 80px 48px; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | |
| | | font-weight: 500; |
| | | line-height: 44px; |
| | | letter-spacing: normal; |
| | | color: rgba(0, 0, 0, 0.9); |
| | | color: @black-text-main; |
| | | } |
| | | |
| | | .pickup-exception-desc { |
| | |
| | | font-weight: normal; |
| | | letter-spacing: normal; |
| | | /* 文字色/黑色/辅助文字 40% */ |
| | | color: rgba(0, 0, 0, 0.4); |
| | | color: @black-text-04; |
| | | margin-top: 8px; |
| | | } |
| | | |
| | |
| | | position: relative; |
| | | width: 100%; |
| | | height: 358px; |
| | | border-radius: 16px; |
| | | border-radius: 32px; |
| | | overflow: hidden; |
| | | background: #D8D8D8; |
| | | background: @gary-theme; |
| | | margin-top: 48px; |
| | | } |
| | | |
| | |
| | | |
| | | .pickup-exception-message { |
| | | margin-top: 32px; |
| | | color: rgba(0, 0, 0, 0.9); |
| | | color: @black-text-main; |
| | | font-size: 28px; |
| | | line-height: 44px; |
| | | text-align: center; |
| | |
| | | line-height: 88px; |
| | | text-align: center; |
| | | color: #ffffff; |
| | | border-radius: 16px; |
| | | background: linear-gradient(96deg, #8475FF 1%, #7DD6FF 103%); |
| | | border-radius: 2000px; |
| | | background: @black-text-main; |
| | | font-size: 28px; |
| | | font-weight: 500; |
| | | border-radius: 16px; |
| | | } |
| | |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | background: rgba(0, 0, 0, 0.4); |
| | | background: rgba(0, 0, 0, 0.8); |
| | | z-index: 102; |
| | | } |
| | | |
| | |
| | | if (Array.isArray(linePoints) && linePoints.length > 1) { |
| | | nextPolylines.push({ |
| | | points: linePoints, |
| | | color: '#7B91FF', |
| | | color: '#DFB369', |
| | | width: 6, |
| | | dottedLine: true, |
| | | arrowLine: false |
| | |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | background: rgba(0, 0, 0, 0.4); |
| | | background: rgba(0, 0, 0, 0.8); |
| | | z-index: 102; |
| | | } |
| | | |
| | |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | color: "#141E27", |
| | | fontSize: 12, |
| | | anchorX: 0, |
| | | anchorY: 9, // 图标下方 9px |
| | | anchorY: 7, // 图标下方 5px |
| | | textAlign: "center" as const, |
| | | bgColor: "#00000000", |
| | | fontWeight: 'bold', |
| | |
| | | borderRadius: 0, |
| | | padding: 0 |
| | | }; |
| | | // 到达上车点/待支付/完成态:站点名称在图标下方 8px,11px #141E27 居中 |
| | | // 到达上车点/待支付/完成态:站点名称在图标下方 7px,11px #141E27 居中 |
| | | const SITE_NAME_LABEL_BELOW_LG = { |
| | | color: "#141E27", |
| | | fontSize: 12, |
| | | anchorX: 0, |
| | | anchorY: 8, |
| | | anchorY: 7, |
| | | textAlign: "center" as const, |
| | | bgColor: "#00000000", |
| | | fontWeight: 'bold', |
| | |
| | | width: 24px; |
| | | height: 24px; |
| | | display: block; |
| | | margin-right: 8px; |
| | | margin-right: 4px; |
| | | } |
| | | |
| | | .site-countdown-time { |
| | | font-family: @font-xpsans-bold; |
| | | font-size: 24px; |
| | | font-weight: normal; |
| | | line-height: 32px; |
| | | text-align: center; |
| | | letter-spacing: 0.04em; |
| | | color: #FFD181; |
| | |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | background: rgba(0, 0, 0, 0.5); |
| | | background: rgba(0, 0, 0, 0.8); |
| | | } |
| | | |
| | | .privacy-content { |
| | |
| | | align-items: center; |
| | | justify-content: center; |
| | | gap: 8px; |
| | | background: rgba(0, 0, 0, 0.4); |
| | | background: rgba(0, 0, 0, 0.8); |
| | | color: #FFFFFF; |
| | | |
| | | &-text { |
| | |
| | | @import '../../../style/ui-variables.less'; |
| | | |
| | | .order-detail-page { |
| | | background: #F2F3F7; |
| | | min-height: 100vh; |
| | |
| | | flex-direction: column; |
| | | |
| | | .car-info { |
| | | padding: 18px 32px 32px 32px; |
| | | border-radius: 24px; |
| | | padding: 48px 48px 40px 48px; |
| | | border-radius: 60px; |
| | | background: #FFFFFF; |
| | | |
| | | .info-top { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | position: relative; |
| | | |
| | | .car-name { |
| | | font-family: PingFang SC; |
| | | font-size: 28px; |
| | | font-weight: normal; |
| | | font-weight: 500; |
| | | line-height: 48px; |
| | | letter-spacing: normal; |
| | | color: rgba(0, 0, 0, 0.9); |
| | | color: @black-text-main; |
| | | margin-top: 14px; |
| | | } |
| | | |
| | |
| | | font-size: 24px; |
| | | font-variation-settings: "opsz" auto; |
| | | } |
| | | |
| | | } |
| | | .car-box { |
| | | position: absolute; |
| | | top: 50px; |
| | | right: 52px; |
| | | .car-img { |
| | | width: 236px; |
| | | height: 110px; |
| | | margin-right: 4px; |
| | | width: 272px; |
| | | height: 234px; |
| | | } |
| | | } |
| | | |
| | | .evaluate-card { |
| | | margin-top: 36px; |
| | | margin-top: 32px; |
| | | width: 638px; |
| | | height: 248px; |
| | | border-radius: 16px; |
| | | border-radius: 40px; |
| | | background: #F5F6FA; |
| | | padding: 32px 28px 24px 30px; |
| | | |
| | |
| | | line-height: 40px; |
| | | letter-spacing: normal; |
| | | /* 文字色/黑色/重要字 90% */ |
| | | color: rgba(0, 0, 0, 0.9); |
| | | color: @black-text-main; |
| | | margin: 0px 0px 24px 2px; |
| | | } |
| | | |
| | |
| | | text-align: center; |
| | | letter-spacing: normal; |
| | | /* 文字色/黑色/辅助文字 40% */ |
| | | color: rgba(0, 0, 0, 0.4); |
| | | color: @black-text-04; |
| | | } |
| | | |
| | | .active-text { |
| | | /* 文字色/黑色/重要字 90% */ |
| | | color: rgba(0, 0, 0, 0.9); |
| | | color: @black-text-main; |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | .trip-info { |
| | | margin-top: 24px; |
| | | border-radius: 20.29px; |
| | | border-radius: 60px; |
| | | background: #FFFFFF; |
| | | padding: 32px 24px; |
| | | padding: 48px 48px 40px 48px; |
| | | |
| | | .trip-top { |
| | | display: flex; |
| | |
| | | font-size: 48px; |
| | | line-height: 40px; |
| | | letter-spacing: normal; |
| | | color: rgba(0, 0, 0, 0.9); |
| | | color: @black-text-main; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .unit { |
| | |
| | | font-weight: normal; |
| | | line-height: 26px; |
| | | letter-spacing: normal; |
| | | color: rgba(0, 0, 0, 0.9); |
| | | color: @black-text-main; |
| | | margin: 0 4px; |
| | | } |
| | | |
| | |
| | | line-height: 26px; |
| | | letter-spacing: normal; |
| | | text-decoration: line-through; |
| | | color: rgba(0, 0, 0, 0.4); |
| | | color: @black-text-04; |
| | | } |
| | | } |
| | | |
| | |
| | | line-height: 40px; |
| | | letter-spacing: normal; |
| | | /* 文字色/黑色/次要文字 60% */ |
| | | color: rgba(0, 0, 0, 0.6); |
| | | color: @black-text-04; |
| | | margin-right: 12px; |
| | | } |
| | | |
| | |
| | | line-height: 44px; |
| | | letter-spacing: normal; |
| | | /* 文字色/黑色/重要字 90% */ |
| | | color: rgba(0, 0, 0, 0.9); |
| | | color: @black-text-main; |
| | | margin-bottom: 8px; |
| | | } |
| | | |
| | |
| | | |
| | | .line-icon { |
| | | /* 自动布局子元素 */ |
| | | width: 8px; |
| | | height: 8px; |
| | | width: 10px; |
| | | height: 10px; |
| | | z-index: 0; |
| | | background: #8CB654; |
| | | background: @black-text-main; |
| | | border-radius: 50%; |
| | | margin-right: 16px; |
| | | flex-shrink: 0; |
| | |
| | | font-weight: normal; |
| | | line-height: 40px; |
| | | letter-spacing: normal; |
| | | color: rgba(0, 0, 0, 0.4); |
| | | color: @black-text-04; |
| | | } |
| | | |
| | | .first-icon { |
| | | background: #6D7FD9; |
| | | background: @gold-light; |
| | | } |
| | | |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | } |
| | |
| | | id: 1, |
| | | longitude: displayStartPoint.longitude, |
| | | latitude: displayStartPoint.latitude, |
| | | width: 20, |
| | | height: 36, |
| | | anchor: { x: 0.5, y: 1 }, |
| | | iconPath: 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/start-text.png', |
| | | width: 34, |
| | | height: 46, |
| | | anchor: { x: 0.7, y: 0.8 }, |
| | | iconPath: 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/start-site-order-20260804-v2.png', |
| | | viewportLongitude: startPoint?.longitude, |
| | | viewportLatitude: startPoint?.latitude, |
| | | } : null, |
| | |
| | | id: 2, |
| | | longitude: endPoint.longitude, |
| | | latitude: endPoint.latitude, |
| | | width: 20, |
| | | height: 36, |
| | | anchor: { x: 0.5, y: 1 }, |
| | | iconPath: 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/end-text.png', |
| | | width: 34, |
| | | height: 46, |
| | | anchor: { x: 0.7, y: 0.8 }, |
| | | iconPath: 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/end-site-order-20260804-v2.png', |
| | | } : null |
| | | ].filter(Boolean) as any[]; |
| | | setMarkers(markerList); |
| | |
| | | } |
| | | const polylineData = [{ |
| | | points: routePath, |
| | | color: '#6D7BC1', |
| | | width: 10, |
| | | color: '#59B688', |
| | | width: 7, |
| | | dottedLine: false, |
| | | arrowLine: false, |
| | | }, |
| | | { |
| | | points: routePath, |
| | | color: '#7B91FF', |
| | | width: 8, |
| | | color: '#59B688', |
| | | width: 7, |
| | | dottedLine: false, |
| | | arrowLine: true, |
| | | }]; |
| | |
| | | orderData.vehicleId && |
| | | <View className='info-top'> |
| | | <View> |
| | | <View className='car-name'>{orderData.plateNumber}</View> |
| | | <View className='car-name'>{orderData.plateNumber} · {orderData.vehicleColor}</View> |
| | | <View className='info'> |
| | | <Text className='car-color'>小鹏GX</Text> |
| | | <Text className='info-line'></Text> |
| | | <Text className='car-color'>{orderData.vehicleColor}</Text> |
| | | {/* <Text className='car-code'>车身编码: </Text> |
| | | <Text className='code'>{orderData.vehicleCode}</Text> */} |
| | | </View> |
| | | </View> |
| | | <Image src={safeParse(orderData.vehiclePictures, {})?.url || 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/default-vehicle-img-20260724-v2.png'} className='car-img' /> |
| | | |
| | | </View> |
| | | } |
| | | { |
| | | orderData.vehicleId && ( |
| | | <View className='car-box'> |
| | | <Image src={safeParse(orderData.vehiclePictures, {})?.url || 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/default-vehicle-img-20260724-v2.png'} className='car-img' /> |
| | | </View> |
| | | )} |
| | | { |
| | | orderData.status >= 9 && |
| | | <View className='evaluate-card'> |
| | |
| | | </View> |
| | | <View onClick={todescription} className='price-remark'> |
| | | <Text className='remark-text'>费用说明</Text> |
| | | <Image src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/right.png" className='remark-img' /> |
| | | <Image src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/text04-arrow-20260804.png" className='remark-img' /> |
| | | </View> |
| | | </View> |
| | | } |
| | |
| | | } |
| | | deps.setPolyline([{ |
| | | points: displayPoints, |
| | | color: '#6D7FD9', |
| | | color: '#DFB369', |
| | | width: deps.isAndroid ? 4 : 6, |
| | | dottedLine: true, |
| | | arrowLine: false, |
| | |
| | | |
| | | // 接驾态(前往上车点)/到达终点态 上车点三角图标(与 begin-route 对齐) |
| | | const PICKUP_APPROACHING_ICON_URL = |
| | | 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/up-triangle-2026022.png'; |
| | | 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/up-triangle-20260722.png'; |
| | | // 送驾态(前往目的地)/到达终点态 下车点三角图标(与 begin-route 对齐) |
| | | const DROPOFF_INSERVICE_ICON_URL = |
| | | 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/down-triangle-20260722.png'; |
| | |
| | | color: '#141E27', |
| | | fontSize: 12, |
| | | anchorX: 0, |
| | | anchorY: 9, // 图标下方 9px |
| | | anchorY: 7, // 图标下方 7px |
| | | textAlign: 'center' as const, |
| | | bgColor: '#00000000', |
| | | fontWeight: 'bold', |
| | |
| | | color: '#141E27', |
| | | fontSize: 12, |
| | | anchorX: 0, |
| | | anchorY: 8, |
| | | anchorY: 7, |
| | | textAlign: 'center' as const, |
| | | bgColor: '#00000000', |
| | | fontWeight: 'bold', |
| | |
| | | const isPickupArrivedDest = [TripStatus.ArrivedDestination, TripStatus.TripFinished, TripStatus.CancelOnlyPickup].includes(deps.tripStatus); |
| | | const isPickupTriangle = isPickupApproaching || isPickupArrivedDest; |
| | | const pickupNameLabelConfig = isPickupApproaching ? SITE_NAME_LABEL_BASE : SITE_NAME_LABEL_BELOW_LG; |
| | | const isVehicleArrivedPickup = deps.tripStatus === TripStatus.VehicleArrivedPickup; |
| | | const getCustomCalloutAnchorY = () => { |
| | | if (isPickupApproaching) { |
| | | return 12; |
| | | } |
| | | if (isVehicleArrivedPickup && deps.isAndroid) { |
| | | return 8; |
| | | } |
| | | return 6; |
| | | } |
| | | return { |
| | | id: 1, |
| | | latitude: pickupSite.latitude, |
| | |
| | | } |
| | | : { |
| | | customCallout: { |
| | | anchorY: [TripStatus.Publishing, TripStatus.CallingCar].includes(deps.tripStatus) ? 150 : -5, |
| | | anchorY: getCustomCalloutAnchorY(), |
| | | anchorX: 0, |
| | | display: 'ALWAYS' |
| | | } |
| | |
| | | } |
| | | : { |
| | | customCallout: { |
| | | anchorY: -5, |
| | | anchorY: 6, |
| | | anchorX: 0, |
| | | display: 'ALWAYS' |
| | | } |
| | |
| | | deps.isAndroid && [ |
| | | TripStatus.PublishRoute, |
| | | TripStatus.VehicleApproaching, |
| | | TripStatus.VehicleArrivedPickup, |
| | | TripStatus.TripFinished, |
| | | TripStatus.PaymentSuccess, |
| | | TripStatus.CancelOnlyPickup |
| | |
| | | : durationDisplay |
| | | ), [durationDisplay]); |
| | | const shouldHideAndroidMarkerCallout = deps.isAndroid |
| | | && [TripStatus.PublishRoute, TripStatus.VehicleArrivedPickup, TripStatus.TripFinished, TripStatus.PaymentSuccess, TripStatus.CancelOnlyPickup].includes(deps.tripStatus); |
| | | && [TripStatus.PublishRoute, TripStatus.TripFinished, TripStatus.PaymentSuccess, TripStatus.CancelOnlyPickup].includes(deps.tripStatus); |
| | | const androidCarCalloutContent = useMemo(() => ( |
| | | <AndroidCarCalloutContent |
| | | routeDistance={deps.routeDistance} |
| | |
| | | // 车型图:参考 calling-car 的 calling-car-vehicle-pic,浮于背景图顶部右侧 |
| | | .calling-car-vehicle-pic { |
| | | position: absolute; |
| | | top: 24px; |
| | | right: 24px; |
| | | top: -4px; |
| | | right: 116px; |
| | | width: 342px; |
| | | height: 294px; |
| | | z-index: 10; |
| | |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | background: rgba(0, 0, 0, 0.4); |
| | | background: rgba(0, 0, 0, 0.8); |
| | | z-index: 1; |
| | | } |
| | | |
| | |
| | | z-index: 11; |
| | | } |
| | | } |
| | | } |
| | | } |