feat:修改目的地样式和呼单页价格

fuqj

2026-07-24 a892a1f97eb6535e7a70d9d79a98ae2e20a97569

feat:修改目的地样式和呼单页价格

 src/robotaxi/pages/begin-route/components/css-folder/modify-destination-review.less

@@ -1,3 +1,6 @@
@import '../../../../style/ui-variables.less';


.modify-destination-review-container {
  position: relative;
  width: 100vw;
@@ -6,7 +9,7 @@
.modify-destination-review {
  position: relative;
  width: 100%;
  border-radius: 40px 40px 0 0;
  border-radius: 60px 60px 0 0;
  background: transparent;
  z-index: 10;
  overflow: hidden;
@@ -25,26 +28,24 @@

  &-content-wrapper {
    position: relative;
    padding-bottom: 180px;
    background: #f2f3f7 url('https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/site-top-bg-20260507.png') no-repeat top center;
    background-size: 100% auto;
    border-top: 2px solid #ffffff;
    border-radius: 40px 40px 0 0;
    padding-bottom: 204px;
    background: @gary-theme;
    border-radius: 60px 60px 0 0;
  }

  &-content {
    position: relative;
    padding: 40px 32px 40px;
    padding: 48px;
    z-index: 10;
  }

  &-title {
    position: relative;
    z-index: 1;
    font-size: 28px;
    font-size: 36px;
    font-weight: 500;
    line-height: 40px;
    color: rgba(0, 0, 0, 0.9);
    line-height: 48px;
    color: @black-text-main;
  }

  .modify-destination-review-tip {
@@ -54,21 +55,21 @@
    font-size: 24px;
    line-height: 36px;
    letter-spacing: normal;
    color: rgba(0, 0, 0, 0.4);
    color: @black-text-04;
    margin-bottom: 32px;
  }

  &-sites,
  &-sites-card {
  // 站点样式参考 cancel-popup 的 cancel-site-box：灰底盒子 + 左侧起终点圆点虚线列
  .modify-destination-review-select-site {
    position: relative;
    z-index: 1;
    padding: 24px;
    border-radius: 24px;
    background: #ffffff;
    display: flex;
    gap: 16px;
    padding: 40px 32px 36px 24px;
    border-radius: 40px;
    background: rgba(204, 208, 215, 0.25);
    box-sizing: border-box;
    border: 2px solid #ffffff;
    backdrop-filter: blur(20px);
    box-shadow: 0 40px 60px 0 rgba(87, 99, 147, 0.1);
    height: fit-content;
  }

  &-trip-card {
@@ -81,48 +82,56 @@
    box-shadow: 0 20px 40px 0 rgba(87, 99, 147, 0.08);
  }

  &-site-item {
    display: flex;
    align-items: center;
    min-height: 92px;
    padding: 0 24px;
    border-radius: 20px;

    &+& {
      margin-top: 12px;
    }
  .modify-destination-review-select-site-start {
    color: @black-text-04;
  }

  &-site-item-active {
    background: #F5F6FA;
  }

  &-site-dot {
    width: 12px;
    height: 12px;
    margin-right: 20px;
    border-radius: 50%;
  .modify-destination-review-select-site-icon {
    padding: 16px 0;
    flex-shrink: 0;

    &-old {
      background: #768aff;
    }

    &-new {
      background: #9cc14e;
    }
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .start-txt {
    color: rgba(0, 0, 0, 0.4);
  .modify-destination-review-select-site-icon-start {
    width: 16px;
    height: 16px;
    background: #DFB369;
    border-radius: 50%;
  }

  &-site-text {
  .modify-destination-review-select-site-icon-end {
    width: 16px;
    height: 16px;
    background: @black-text-main;
    border-radius: 50%;
  }

  .modify-destination-review-select-site-icon image {
    flex: 1;
    font-size: 30px;
    line-height: 42px;
    color: rgba(0, 0, 0, 0.9);
    width: 2px;
    margin: 7px 0;
    height: fit-content;
  }

  .modify-destination-review-select-site-content {
    flex: 1;
    min-width: 0;
    font-size: 32px;
    line-height: 48px;
    letter-spacing: normal;
    color: @black-text-main;
  }

  .modify-destination-review-select-site-start,
  .modify-destination-review-select-site-end {
    word-break: break-all;
  }

  .modify-destination-review-select-site-divider {
    margin: 34px 32px 40px 0px;
    border-top: 1px solid rgba(204, 208, 215, 0.25);
  }

  &-footer {
@@ -131,10 +140,10 @@
    right: 0;
    bottom: 0;
    z-index: 11;
    height: 180px;
    height: 204px;
    box-sizing: border-box;
    padding: 24px 38px 0 32px;
    background: #fefeff;
    padding: 28px 48px 72px 48px;
    background: @gary-theme;
    display: flex;
    align-items: center;
    justify-content: space-between;
@@ -145,12 +154,21 @@
    min-width: 0;
  }

  &-fare-main {
  // 预估价样式参考 release-route 的 money-box（route-content-top-money）
 .modify-destination-review-fare-main {
    display: flex;
    align-items: first baseline;
    font-size: 20px;
    line-height: normal;
    letter-spacing: normal;
    color: rgba(20, 30, 39, 0.4);
  }

  &-fare-forecast {
    margin-top: 28px;
    display: flex;
    align-items: center;
    font-size: 24px;
    line-height: 36px;
    color: rgba(0, 0, 0, 0.9);
    gap: 4px;
  }

  &-fare-original {
@@ -166,10 +184,9 @@
    }
  }

  &-tip-icon {
    width: 22px;
    height: 22px;
    margin-right: 4px;
  .modify-destination-review-tip-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

@@ -179,11 +196,20 @@
    color: #f58900;
  }

  &-fare-num {
    margin: 0 6px;
    font-size: 56px;
    line-height: 56px;
    color: rgba(0, 0, 0, 0.9);
  .modify-destination-review-fare-num {
    margin: 0 4px;
    font-size: 60px;
    line-height: normal;
    letter-spacing: normal;
    font-family: "XPSANS-Bold";
    color: #141E27;
  }

  &-fare-unit {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
  }

  &-fare-discount {
@@ -206,14 +232,14 @@
  &-confirm {
    flex-shrink: 0;
    width: 296px;
    height: 94px;
    border-radius: 20px;
    background: linear-gradient(102deg, #8475ff 0%, #7dd6ff 102%);
    height: 104px;
    border-radius: 2000px;
    background: @black-text-main;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 40px;
    font-size: 32px;
    line-height: 44px;
    color: #ffffff;
  }

@@ -226,7 +252,8 @@
    position: relative;
    flex-shrink: 0;
    width: 296px;
    height: 94px;
    height: 104px;
    border-radius: 2000px;
  }

  &-confirm-mask {
@@ -235,7 +262,7 @@
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    border-radius: 2000px;
    background: rgba(255, 255, 255, 0.45);
    z-index: 2;
  }

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

@@ -383,24 +383,28 @@

                .route-content-top-money {
                    display: flex;
                    align-items: center;
                    align-items: first baseline;
                    font-size: 20px;
                    line-height: normal;
                    letter-spacing: normal;
                    color: @black-text-04;
                    .tip-icon-box {
                      display: flex;
                      justify-content: center;
                      flex-direction: column;
                      gap: 8px;
                      justify-content: first baseline;
                    }
                    .forecast-text {
                      margin-top: 28px;
                      display: flex;
                      align-items: center;
                      gap: 4px;
                    }
                    .tip-icon {
                        width: 20px;
                        height: 20px;
                        flex-shrink: 0;
                      width: 20px;
                      height: 20px;
                      flex-shrink: 0;
                    }
                    .unit-text {
                      display: flex;
                      align-items: center;
                    }

                    .money-num {

 src/robotaxi/pages/begin-route/components/modify-destination-review.tsx

@@ -361,21 +361,21 @@
              </View>
            ) : null}
            <View className="modify-destination-review-select-site">
              <View className="modify-destination-review-sites-card">
                <View className="modify-destination-review-site-item">
                  <View className="modify-destination-review-site-dot modify-destination-review-site-dot-old" />
                  <View className="modify-destination-review-site-text start-txt">
                    {startSite?.name || "-"}
                  </View>
              <View className="modify-destination-review-select-site-icon">
                <View className="modify-destination-review-select-site-icon-start"></View>
                <Image src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/dotted-line.png" />
                <View className="modify-destination-review-select-site-icon-end"></View>
              </View>
              <View className="modify-destination-review-select-site-content">
                <View className="modify-destination-review-select-site-start">
                  {startSite?.name || "-"}
                </View>
                <View className="modify-destination-review-select-site-divider"></View>
                <View
                  className="modify-destination-review-site-item modify-destination-review-site-item-active"
                  className="modify-destination-review-select-site-end"
                  onClick={() => onEditDestination?.()}
                >
                  <View className="modify-destination-review-site-dot modify-destination-review-site-dot-new" />
                  <View className="modify-destination-review-site-text">
                    {nextEndSite?.name || "-"}
                  </View>
                  {nextEndSite?.name || "-"}
                </View>
              </View>
            </View>
@@ -391,15 +391,17 @@
                      className="modify-destination-review-fare-main"
                      onClick={toPriceDescription}
                    >
                      <Image
                        className="modify-destination-review-tip-icon"
                        src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/tip-default-icon.png"
                      />
                      预估
                      <View className="modify-destination-review-fare-forecast">
                        <Image
                          className="modify-destination-review-tip-icon"
                          src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/tip-default-icon.png"
                        />
                        <Text>预估</Text>
                      </View>
                      <Text className="modify-destination-review-fare-num">
                        {fareEstimate?.finalFareStr || "-"}
                      </Text>
                      元
                      <View className="modify-destination-review-fare-unit">元</View>
                    </View>
                    <View
                      className={`modify-destination-review-fare-original${

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

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