style(robotaxi): 优化机器人出租车页面的UI与文案细节

hejianhao

2026-06-26 f06d2dd08c12ae4c761bc228a42183df16ba97bd

style(robotaxi): 优化机器人出租车页面的UI与文案细节

- 调整多个页面的布局对齐与字体样式
- 更新蓝牙授权弹窗的文案表述
- 优化价格展示布局并替换行程图标
- 修改首页目的地占位文案
- 调整地图折线的宽度与边框样式

 src/pages/robotaxi/home/components/home-content-panel.tsx

@@ -126,7 +126,7 @@
            <View onClick={() => props.onSelectSite('end')} className="to-site">
              <View className="to-site-dot"></View>
              <View className="to-site-address">
                <View className="to-site-text">你想去哪？</View>
                <View className="to-site-text">你想去哪里？</View>
                {props.showQuickCapsule && (
                  <View
                    onClick={(event) => {

 src/robotaxi/pages/begin-route/components/auth-bluetooth-popup/index.tsx

@@ -45,9 +45,9 @@
        <Image className='bluetooth-bg' src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/bluetooth-bg.png" />
        <View className='content-main'>
          <Text className='popup-title'>授权蓝牙</Text>
          <Text className='popup-sub-title'>无感自动开启车辆</Text>
          <Text className='popup-sub-title'>无感自动解锁车门</Text>
          <Text className='popup-desc' style={{ marginTop: '12px' }}>授权并打开蓝牙连接</Text>
          <Text className='popup-desc'>手机靠近车辆即可解锁并自动开启车门</Text>
          <Text className='popup-desc'>手机靠近车辆即可自动解锁车门</Text>
          <View className='authorize-btn' onClick={onAuthorize}>
            去授权
          </View>

 src/robotaxi/pages/begin-route/components/auth-bluetooth-popup/success-auth/index.tsx

@@ -47,8 +47,8 @@
      <View className='popup-mask' onClick={onClose}></View>
      <View className='popup-content' animation={animationData}>
        <Image className='popup-icon' src={'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/bluetooth-success-auth.png'} />
        <Text className='popup-title'>已授权蓝牙，无感自动开启车辆</Text>
        <Text className='popup-desc'>授权并打开蓝牙连接，手机靠近车辆即可解锁并自动开启车门</Text>
        <Text className='popup-title'>已授权蓝牙，无感自动解锁车门</Text>
        <Text className='popup-desc'>授权并打开蓝牙连接，手机靠近车辆即可自动解锁车门</Text>
        <View className='popup-confirm-btn' onClick={handleConfirm}>
          知道了
        </View>

 src/robotaxi/pages/begin-route/components/calling-car-modules/fare-detail-card.tsx

@@ -85,7 +85,7 @@
                                    fareBreakdown?.redPacketMoney + fareBreakdown?.couponMoney > 0 &&
                                    <View className="car-card-end-particulars-money-through">{formatMoney(fareBreakdown?.orderMoney)}元</View>
                                }
                                <Image style={{ transform: showDetail ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.3s' }} src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/coupon-arrow.png" />
                                <Image style={{ transform: showDetail ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.3s' }} src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/itinerary-cost-icon.png" />
                            </View>
                    }
                </View>

 src/robotaxi/pages/begin-route/components/calling-car-modules/service-route-change.jsx

@@ -63,7 +63,7 @@
                  </View>
                )}
              </View>
              <View className='service-route-select-content-item-estimate'>预估{estimateText}</View>
              <View className='service-route-select-content-item-estimate'>预估{estimateText}元</View>
            </View>
          );
        })}

 src/robotaxi/pages/begin-route/components/css-folder/release-route.less

@@ -370,9 +370,18 @@
                    display: flex;
                    align-items: center;
                    font-size: 24px;
                    line-height: 40px;
                    letter-spacing: normal;
                    color: rgba(0, 0, 0, 0.9);

                    .price-box {
                        display: flex;
                        align-items: center;

                        .price-box-text {
                            font-size: 24px;
                            line-height: 24px;
                        }
                    }

                    .tip-icon {
                        width: 22px;
@@ -387,6 +396,8 @@
                        line-height: 40px;
                        letter-spacing: normal;
                        color: rgba(0, 0, 0, 0.9);
                        margin-bottom: 2px;
                        font-weight: 500;
                    }
                }
            }
@@ -406,6 +417,7 @@
                border-radius: 20px;
                background: linear-gradient(102deg, #8475FF 0%, #7DD6FF 102%);
                font-size: 28px;
                font-weight: 500;
                letter-spacing: normal;
                color: #FFFFFF;
            }

 src/robotaxi/pages/begin-route/components/css-folder/route-selection-panel.less

@@ -8,7 +8,7 @@

  .route-select-type {
    display: flex;
    align-items: center;
        align-items: flex-end;

    .route-select-title {
      font-size: 24px;
@@ -26,6 +26,7 @@
        font-weight: 500;
        line-height: 40px;
        color: #6D7FD9;
        font-weight: 500;
      }

      image {

 src/robotaxi/pages/begin-route/components/css-folder/service-route-change.less

@@ -5,7 +5,7 @@

    .service-route-select-container {
        display: flex;
        align-items: center;
        align-items: flex-end;

        .service-route-select-title {
            font-size: 28px;
@@ -23,6 +23,7 @@
                font-weight: 500;
                line-height: 40px;
                color: #6D7FD9;
                font-weight: 500;
            }

            image {

 src/robotaxi/pages/begin-route/components/release-route.tsx

@@ -266,9 +266,11 @@
                            ) : (
                                <View className="route-content-top-money" onClick={() => toPriceDescription()} >
                                    <Image className="tip-icon" src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/tip-default-icon.png" />
                                    预估
                                    <Text className="money-num">{fareEstimate.finalFareStr || '-'}</Text>
                                    元
                                    <View className="price-box">
                                        <View className="price-box-text">预估</View>
                                        <Text className="money-num">{fareEstimate.finalFareStr || '-'}</Text>
                                        <View className="price-box-text">元</View>
                                    </View>
                                </View>
                            )}
                        </View>

 src/robotaxi/pages/begin-route/hooks/use-polyline-render.ts

@@ -365,7 +365,9 @@
          id: ROUTE_POLYLINE_BASE_ID + selectedRouteIndex,
          points: displayRoutePoints,
          color: '#7B91FF',
          width: 10,
          width: 8,
          borderColor: '#6D7BC1',
          borderWidth: 1,
          clickable: true,
          dottedLine: false,
          arrowLine: true,
@@ -376,7 +378,9 @@
        id: ROUTE_POLYLINE_BASE_ID,
        points: displayRoutePoints,
        color: '#7B91FF',
        width: 10,
        width: 8,
        borderColor: '#6D7BC1',
        borderWidth: 1,
        clickable: true,
        dottedLine: false,
        arrowLine: true,
@@ -388,7 +392,7 @@
        id: WALKING_POLYLINE_ID_OFFSET + allRoutePoints.length,
        points: walkingPoints,
        color: '#7B91FF',
        width: 6,
        width: 8,
        dottedLine: true,
        arrowLine: false,
      });