style:修改订单详情UI、协议弹窗、地图站点名样式
| | |
| | | } |
| | | .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> |
| | |
| | | <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'> |
| | |
| | | margin: 34px 32px 40px 0px; |
| | | border-top: 1px solid rgba(204, 208, 215, 0.25); |
| | | } |
| | | .cancel-site-box-content-name { |
| | | font-weight: 500; |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | height: 100%; |
| | | overflow-y: scroll; |
| | | margin-top: 0; |
| | | padding-right: 8px; |
| | | } |
| | | |
| | | .passenger-content-desc-inner { |
| | |
| | | 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', |
| | |
| | | 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: @gold-light; |
| | | 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: @black-text-main; |
| | | 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: '#59B688', |
| | | width: 10, |
| | | width: 7, |
| | | dottedLine: false, |
| | | arrowLine: false, |
| | | }, |
| | | { |
| | | points: routePath, |
| | | color: '#59B688', |
| | | width: 8, |
| | | 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> |
| | | } |
| | |
| | | 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', |