.zg-base {
  height: 660px;
  display: flex;
  gap: 16px;
  position: relative;

  &-spin {
    position: absolute;
    left: 40%;
    top: 30%;
  }

  &-map {
    height: 240px;
  }
  &-left {
    width: calc(100% - 416px);
  }
  &-right {
    width: 400px;
  }

  &-process {
    display: flex;
    align-items: center;

    --order-bg: #ecf0f5;
    --order-active-bg: #1890ff;
    --line-bg: #e8edf2;
    --order-color: #898989;
    --title-color: #898989;

    &.dark {
      --order-bg: #03629d;
      --order-active-bg: #0099ff;
      --line-bg: rgba(255, 255, 255, 0.2);
      --order-color: #fff;
      --title-color: rgba(255, 255, 255, 0.5);
    }

    &-item {
      display: flex;
      align-items: center;
      gap: 8px;
          white-space: nowrap;
      &-order {
        width: 32px;
        height: 32px;
        line-height: 30px;
        font-family: Roboto, Roboto;
        font-size: 16px;
        color: var(--order-color);
        text-align: center;
        background: var(--order-bg);
        border-radius: 32px;
        &.active {
          color: #fff;
          background: var(--order-active-bg);
        }
      }
      &-title {
        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
        font-weight: normal;
        font-size: 16px;
        color: var(--title-color);
        line-height: 24px;
        white-space: nowrap;
        &.active {
          color: var(--modal-title-color);
        }
      }
    }
    &-line {
      width: 44px;
      height: 1px;
      background: var(--line-bg);
      margin: 0 8px;

      &.active {
        background: var(--order-active-bg);
      }
    }
  }
}
.zg-p-list {
  margin-top: 16px;
  --content-bg: #f5f7fa;
  --line-bg: #d3d4d8;

  &.dark {
    --content-bg: rgba(51, 166, 255, 0.1);
    --line-bg: rgba(255, 255, 255, 0.2);
  }
  &-item {
    width: 100%;
    color: var(--modal-title-color);
    &-head {
      display: flex;
      justify-content: space-between;
      &-title {
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--blue-color);
      }
    }
    &-content {
      display: flex;
      justify-content: start;
      gap: 16px;
      padding: 8px 0 8px 8px;
      &-bg {
        width: 338px;
        padding: 8px 12px;
        background: var(--content-bg);
        margin-top: 4px;
        border-radius: 8px;
      }
    }
    &-line {
      width: 1px;
      height: auto;
      background: var(--line-bg);
    }
  }
}
