ucard-person-app-front/pages/apply-record/components/ApplyRecord.vue

<template>
  <view class="page">
    <view class="step">
      <view v-for="item in stepList" :key="item.id" :class="step >= item.id ? 'step-item step-active' : 'step-item'">
        <view v-t="t(item.name)" class="step-item-content"></view>
      </view>
    </view>

    <view class="form-box">
      <view v-if="step == 1" class="status-box">
        <view class="status">
          <template v-if="cardInfo.tradeType == '1'">
            <text v-if="cardInfo.tradeStatus == '2'" v-t="'card.Info.t8'"></text>
            <text v-else-if="cardInfo.tradeStatus == '3'" v-t="'card.Info.t9'"></text>
            <text v-else v-t="'card.Info.t5'"></text>
          </template>

          <template v-if="cardInfo.tradeType == '2'">
            <text v-if="cardInfo.tradeStatus == '2'" v-t="'card.Info.t12'"></text>
            <text v-else-if="cardInfo.tradeStatus == '3'" v-t="'card.Info.t13'"></text>
            <text v-else v-t="'card.Info.t11'"></text>
          </template>
        </view>
        <template v-if="cardInfo.tradeType == '1'">
          <template v-if="cardInfo.tradeStatus == '1'">
            <view v-t="'card.Info.s31'"></view>
            <image class="imgs" mode="widthFix" src="/static/images/card/img1.png" alt="" srcset="" />
          </template>
          <template v-if="cardInfo.tradeStatus == '3'">
            <view v-t="'card.Info.s32'"></view>
            <image class="imgs" mode="widthFix" src="/static/images/card/img4.png" alt="" srcset="" />
          </template>
        </template>
        <template v-if="cardInfo.tradeType == '2'">
          <template v-if="cardInfo.tradeStatus == '1'">
            <view v-t="'card.Info.s32'"></view>
            <image class="imgs" mode="widthFix" src="/static/images/card/img1.png" alt="" srcset="" />
          </template>
          <template v-if="cardInfo.tradeStatus == '2'">
            <view v-t="'card.Info.s33'"></view>
            <image class="imgs" mode="widthFix" src="/static/images/card/img3.png" alt="" srcset="" />
          </template>
        </template>
      </view>
      <view v-if="step == 2" class="status-box">
        <view class="status">
          <text v-if="cardInfo.approveStatus == '2'" v-t="'card.Info.t2'"></text>
          <text v-else-if="cardInfo.approveStatus == '3'" v-t="'card.Info.t3'"></text>
          <text v-else v-t="'card.Info.t1'"></text>
        </view>
        <template v-if="cardInfo.approveStatus == '1'">
          <view v-t="'card.Info.s34'"></view>
          <image class="imgs" mode="widthFix" src="/static/images/card/img1.png" alt="" srcset="" />
        </template>
        <template v-if="cardInfo.approveStatus == '3'">
          <view v-t="'card.Info.s35'"></view>
          <image class="imgs" mode="widthFix" src="/static/images/card/img4.png" alt="" srcset="" />
        </template>
      </view>
      <view v-if="step == 3" class="status-box">


        <template v-if="cardInfo.status == 'success'">
          <template v-if="cardInfo.logisticsStatus">
            <view class="success-step"
              v-for="key in Object.keys(logisticsStatusMap).filter(k => Number(k) <= cardInfo.logisticsStatus)"
              :key="key">
              <view class="status">
                <image class="status-img" src="/static/images/card/step-icon.png" alt="" />
                <text>{{ t(logisticsStatusMap[key]) }}</text>
              </view>
              <view class="title">
                <text>{{ t(logisticsTitleMap[key]) }} </text>
              </view>
            </view>
            <view>
              <view class="qr-container" @click="handleQrClick(cardGuide)">
                <QrCode width="200" height="200" :text="cardGuide"></QrCode>
              </view>
              <br />
              <text v-t="'card.New3.p10'"></text>
            </view>
          </template>
          <image class="imgs" mode="widthFix" src="/static/images/card/img5.png" alt="" srcset="" />
          <view class="step-box">
            <view class="step-item">
              <view class="ids">1</view>
              <view v-t="'card.Info.s22'" class="k"></view>
              <view v-t="'card.Info.s23'" class="v"></view>
            </view>
            <view class="step-item">
              <view class="ids">2</view>
              <view v-t="'card.Info.s24'" class="k"></view>
              <view v-t="'card.Info.s25'" class="v"></view>
            </view>
            <view class="step-item">
              <view class="ids">3</view>
              <view v-t="'card.Info.s26'" class="k"></view>
              <view v-t="'card.Info.s27'" class="v"></view>
            </view>
            <view class="step-item">
              <view class="ids">4</view>
              <view v-t="'card.Info.s28'" class="k"></view>
              <view v-t="'card.Info.s29'" class="v"></view>
              <view v-t="'card.Info.s30'" class="v"></view>
            </view>
          </view>
          <view v-t="'card.Info.s21'" class="f"></view>

        </template>
        <template v-else-if="cardInfo.status == 'fail'">
          <view class="status">
            <text v-t="'card.Info.t7'"></text>
          </view>
          <view v-t="'card.Info.s37'"></view>
          <image class="imgs" mode="widthFix" src="/static/images/card/img4.png" alt="" srcset="" />
        </template>
        <template v-else>
          <view class="status">
            <text v-if="cardInfo.status === 'processing'" v-t="'card.Info.t5'"></text>
            <text v-else v-t="'card.Info.t10'"></text>
          </view>
          <view v-t="'card.Info.s38'"></view>
          <image class="imgs" mode="widthFix" src="/static/images/card/img1.png" alt="" srcset="" />
        </template>
      </view>
    </view>
    <view v-if="cardInfo.cardName && !props.type" class="card-info1">
      <view class="card-title">{{ cardInfo.cardName }}</view>
      <view class="card-content">{{ cardInfo.cardDesc }}</view>
      <ul class="card-list">
        <li>
          <text class="label">{{ t(`card.New1.d13`) }}</text>
          <text>{{ cardInfo.mailingAreaCode }} {{ cardInfo.mailingMobile }}</text>
        </li>
        <li>
          <text class="label">{{ t("card.New1.d8") }}</text>
          <text>{{ cardInfo.mailingCountry || "--" }}</text>
        </li>
        <li>
          <text class="label">{{ t("card.New1.d9") }}</text>
          <text>{{ cardInfo.mailingTown }}</text>
        </li>
        <li>
          <text class="label">{{ t("card.New1.d10") }}</text>
          <text>{{ cardInfo.mailingAddressCn }}</text>
        </li>
        <li>
          <text class="label">{{ t("card.New1.d11") }}</text>
          <text>{{ cardInfo.mailingAddress }}</text>
        </li>
        <li>
          <text class="label">{{ t("card.New1.d12") }}</text>
          <text>{{ cardInfo.mailingPostCode }}</text>
        </li>
        <li class="one" :class="statusClass(cardInfo.status)">
          <text class="label">{{ t("card.Status.v5") }}</text>
          <text>{{
            statusMap[cardInfo.status] || t("card.Status.t3")
          }}</text>
        </li>
      </ul>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from "vue";
import { useI18n } from "vue-i18n";
import useCardStore from "@/stores/use-card-store";
import QrCode from "@/components/QrCode.vue";
import { ucardApi } from "@/api/ucard";

const props = defineProps({
  id: String,
  type: String,
});
const cardStore = useCardStore();
const applyList = computed(() => cardStore.applyCard);
const { t } = useI18n();
const cardInfo = ref({
  status: "success",
  tradeStatus: 2,
  approveStatus: 2,
  tradeType: 1,
});
const isShowBtn = ref(false);
const dateRange = ref<[string, string] | undefined>(undefined);
dateRange.value = ["", ""];
const stepList = [
  { id: 1, name: "card.Info.s39", status: "finish" },
  { id: 2, name: "card.Info.s40", status: "process" },
  { id: 3, name: "card.Info.s41", status: "wait" },
];
const logisticsStatusMap = ref({
  1: 'card.New3.p1',
  2: 'card.New3.p3',
  3: 'card.New3.p5',
  4: 'card.New3.p7'
})
const logisticsTitleMap = ref({
  1: 'card.New3.p2',
  2: 'card.New3.p4',
  3: 'card.New3.p6',
  4: 'card.New3.p8'
})
const step = ref(1);
async function getKycList() {
  const b = applyList.value.filter((i) => {
    return i.kycStatus == null;
  });

  if (props.id) {
    let a = {
      status: "success",
      tradeStatus: 2,
      approveStatus: 2,
      tradeType: 1,
    };
    a = applyList.value.filter((item) => item.id == props.id)[0];
    if (a?.tradeStatus == 1) step.value = 1;
    if (a?.tradeStatus == 2 && a.tradeType == 1) step.value = 2;
    if (a?.approveStatus == 2) step.value = 3;
    cardInfo.value = a;
    if (a.status == 'success') getCardInfo(a.cardNumber);
  }
}
const statusMap: Record<string, string> = {
  success: t("card.Status.t6"),
  fail: t("card.Status.t7"),
  processing: t("card.Status.t3"),
  wait_process: t("card.Status.t3"),
  cancel: t("card.Status.t3"),
};
function statusClass(status: string) {
  switch (status) {
    case "success":
      return "one";
    case "fail":
      return "error";
    case "cancel":
      return "error";
    default:
      return "default";
  }
}

async function getCardInfo(cardNumber?: string) {
  try {
    if (props.type == "card") {
      isShowBtn.value = false;
      const res = await ucardApi.getCardInfo({ id: props.id || "" });
      if (res.code == 200) {
        cardInfo.value = { ...cardInfo.value, ...res.data };
        isShowBtn.value = true;
      }
    } else {
      if (!cardNumber) return;
      const res = await ucardApi.cardList({ page: { current: 1, row: 10 }, cardNumber })
      if (res.code == 200) {
        cardInfo.value = { ...cardInfo.value, ...res.data[0] };
      }
    }

  } catch (error) {
    console.log(error);
  }
}

onMounted(async () => {
  if (props.type == "card") {
    step.value = 3
    await getCardInfo();
  } else {
    getKycList();
  }
});

// 二维码目标链接
const cardGuide = "https://secure.ucardwallet.com/card-guide";

function handleQrClick(url) {
  if (!url) return;
  uni.showModal({
    title: t('pages.apply-record.index'),
    content: t('pages.apply-record.confirmOpen'),
    confirmText: t('pages.apply-record.open'),
    cancelText: t('common.cancel'),
    success: (res) => {
      if (!res.confirm) return;
      try {
        // #ifdef APP-PLUS
        plus.runtime.openURL(url);
        return;
        // #endif
        // #ifdef H5
        window.open(url, "_blank");
        return;
        // #endif
      } catch (e) {
      }
      uni.setClipboardData({
        data: url,
        success() {
          uni.showToast({ title: t("pages.apply-record.copyPrompt"), icon: "none" });
        },
        fail() {
          uni.showToast({ title: t("pages.apply-record.openFailed"), icon: "none" });
        },
      });
    },
  });
}
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.page {
  padding-bottom: px2rpx(20);
  box-sizing: border-box;
  min-height: 100vh;
  background: var(--main-bg);
}

.page1 {
  padding: px2rpx(16);
}

.card-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.card-info {
  background: url("/static/images/visa.png") no-repeat center center;
  background-size: cover;
  border-radius: 0.426667rem;
  padding: 0.64rem 0.533333rem 0 0.533333rem;
  color: var(--main-yellow);
  box-shadow: 0 0.106667rem 0.533333rem rgba(214, 255, 0, 0.1);
  border: 1px solid rgba(214, 255, 0, 0.2);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  flex-wrap: wrap;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  flex-direction: column;

  &.flipping {
    transform: rotateY(180deg);
  }

  .card-b {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    text {
      display: block;
    }

    .valid {
      font-size: var(--font-size-14);
      font-weight: 500;
      color: var(--black);
      text-shadow: 0 0 px2rpx(8) rgba(214, 255, 0, 0.2);
      gap: px2rpx(8);
      padding-right: px2rpx(30);
      line-height: px2rpx(20);
    }

    .lable {
      font-size: var(--font-size-10);
      font-weight: 400;
    }
  }
}

.card-front,
.card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: px2rpx(24) px2rpx(20) px2rpx(16) px2rpx(20);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-back {
  transform: rotateY(180deg);
}

.owner {
  font-size: var(--font-size-14);
  line-height: 2;
  margin-bottom: px2rpx(8);
  text-shadow: 0 0 px2rpx(10) rgba(214, 255, 0, 0.3);
  display: flex;
  align-items: center;
  gap: px2rpx(8);

  i {
    font-size: var(--font-size-18);
    color: var(--main-yellow);
  }
}

.number {
  color: var(--black);
  font-size: var(--font-size-18);
  font-weight: 500;
  line-height: 3;
  letter-spacing: px2rpx(2);
  margin: px2rpx(24) 0;
  text-shadow: 0 0 px2rpx(15) rgba(214, 255, 0, 0.4);
  display: flex;
  align-items: center;
  gap: px2rpx(8);
}

.actions {
  display: flex;
  justify-content: space-between;
  margin: px2rpx(20) 0 px2rpx(16) 0;
}

.action-btn {
  color: var(--white);
  border: none;
  border-radius: px2rpx(12);
  padding: px2rpx(10) px2rpx(2);
  font-size: var(--font-size-14);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: px2rpx(4);
  transition: all 0.3s ease;
  text-align: center;
  color: #1a1a1a;

  .btn-icon {
    width: px2rpx(46);
    height: px2rpx(46);
    border-radius: 50%;
    background: #ff4766;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  i {
    display: inline-block;
    line-height: px2rpx(46);
    width: px2rpx(22);
    height: px2rpx(22);
    color: var(--black);
    margin-bottom: px2rpx(4);
  }
}

.balance-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: px2rpx(30) 0;
  font-size: var(--font-size-14);
}

.balance-content {
  font-size: var(--font-size-20);
  color: var(--white);
  font-weight: bold;
  margin-bottom: px2rpx(24);
}

.balance-title {
  font-size: var(--font-size-12);
  color: var(--white);
}

.currency {
  display: flex;
  align-items: center;
  font-size: var(--font-size-14);
  margin-right: px2rpx(12);
  color: var(--white);
}

.flag {
  width: px2rpx(24);
  height: px2rpx(24);
  border-radius: 50%;
  margin-right: px2rpx(6);
}

.balance {
  font-size: var(--font-size-14);
  font-weight: bold;
  color: var(--white);
}

.transactions {
  border-radius: px2rpx(16);
  margin-bottom: px2rpx(16);
  padding: px2rpx(16) 0;
}

.trans-icon {
  width: px2rpx(40);
  height: px2rpx(40);
  display: flex;
  background: var(--main-bg);
  box-shadow: 0 px2rpx(4) px2rpx(12) rgba(214, 255, 0, 0.1);
  border-radius: px2rpx(8);
  margin-right: px2rpx(12);
  align-items: center;
  justify-content: center;

  .trans-icon-inner {
    width: px2rpx(36);
    height: px2rpx(36);
    background: rgba(212, 206, 206, 0.24);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  i {
    color: #000;
    width: px2rpx(18);
    height: px2rpx(18);
    font-size: var(--font-size-16);
    border-radius: 50%;
  }
}

.trans-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: px2rpx(10);
  color: var(--white);

  i {
    font-size: var(--font-size-20);
    cursor: pointer;
  }
}

::v-deep .van-calendar {
  background: var(--action-bg);
}

::v-deep .van-calendar__month-mark {
  display: none;
}

::v-deep .van-calendar__header-subtitle {
  color: var(--white);
}

::v-deep .van-calendar__header-title {
  color: var(--white);
}

::v-deep .van-calendar__month-title {
  color: var(--main-yellow);
}

.trans-title {
  font-size: var(--font-size-20);
  color: var(--white);
  font-weight: bold;
}

.date-field {
  width: px2rpx(200);

  :deep(.van-field__control) {
    color: var(--white);
  }

  :deep(.van-field__placeholder) {
    color: var(--gray);
  }
}

:deep(.van-popup) {
  background: var(--action-bg);
}

:deep(.van-picker__toolbar) {
  background: var(--action-bg);
  border-bottom: 1px solid var(--border);
}

:deep(.van-picker__title) {
  color: var(--white);
}

:deep(.van-picker__confirm) {
  color: var(--main-yellow);
}

:deep(.van-picker__cancel) {
  color: var(--gray);
}

:deep(.van-picker-column) {
  color: var(--white);
}

:deep(.van-picker-column__item) {
  color: var(--white);
}

:deep(.van-picker-column__item--selected) {
  color: var(--main-yellow);
}

.transaction {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: px2rpx(10) 0;
  /* border-bottom: 1px solid var(--border); */
  font-size: var(--font-size-16);
}

.transaction:last-child {
  border-bottom: none;
}

.trans-left {
  width: px2rpx(200);
}

.trans-right {
  width: px2rpx(100);

  view {
    text-align: right;
  }
}

.trans-type {
  color: var(--white);
  font-size: var(--font-size-14);
  line-height: 2;
}

.trans-desc {
  font-size: var(--font-size-12);
  color: var(--gray);
}

.trans-amount {
  font-size: var(--font-size-14);
  color: var(--white);
  line-height: 2;
}

.trans-date {
  color: var(--gray);
  font-size: var(--font-size-12);
}

.card-swiper {
  position: relative;
  overflow: hidden;
  margin-bottom: px2rpx(20);
  padding-bottom: px2rpx(5);
}

.swiper-container {
  position: relative;
  width: 100%;
  height: px2rpx(209);
  touch-action: pan-y pinch-zoom;
  user-select: none;
}

.card-info {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
  will-change: transform;
}

.swiper-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: px2rpx(16);
  gap: px2rpx(16);
}

.swiper-btn {
  background: var(--action-bg);
  border: none;
  border-radius: 50%;
  width: px2rpx(32);
  height: px2rpx(32);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--main-yellow);

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  i {
    font-size: var(--font-size-20);
  }
}

.swiper-dots {
  display: flex;
  gap: px2rpx(8);
}

.dot {
  width: px2rpx(8);
  height: px2rpx(8);
  border-radius: 50%;
  background: var(--action-bg);
  cursor: pointer;
  transition: all 0.3s ease;

  &.active {
    background: var(--main-yellow);
    transform: scale(1.2);
  }
}

.swiper-indicators {
  display: flex;
  justify-content: center;
  margin-top: px2rpx(16);
  gap: px2rpx(8);
}

.indicator-dot {
  width: px2rpx(8);
  height: px2rpx(8);
  border-radius: 50%;
  background: var(--gray);
  cursor: pointer;
  transition: all 0.3s ease;

  &.active {
    background: var(--main-yellow);
    transform: scale(1.2);
  }
}

.flags {
  width: px2rpx(20);
  height: px2rpx(20);
  cursor: pointer;
  position: absolute;
  top: px2rpx(10);
  right: px2rpx(10);
}

.cwg-btn {
  margin: px2rpx(36) 0 px2rpx(80) 0;
}

.card-info1 {
  width: 100%;
}

.card-chip {
  position: absolute;
  right: px2rpx(12);
  top: px2rpx(16);
  width: px2rpx(18);
  height: px2rpx(12);
  background: linear-gradient(145deg, #f5f5f5, #eaeaea);
  border-radius: px2rpx(3);
  border: 1px solid #bbb;
  box-shadow: 0 px2rpx(1) px2rpx(3) rgba(0, 0, 0, 0.1);
}

.card-title {
  margin: px2rpx(24) 0 px2rpx(12) 0;
  font-weight: 600;
  font-size: px2rpx(22);
  line-height: px2rpx(28);
  text-align: left;
  color: #1a1a1a;
}

.card-list {
  list-style: none;
  padding: px2rpx(12) 0;
  margin: 0;
  width: 100%;
  flex: 1;
  overflow-y: auto;
  box-shadow: 0 px2rpx(4) px2rpx(20) rgba(140, 145, 143, 0.194);
  border-radius: px2rpx(10);
}

.card-list li {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-12);
  color: #1a1a1a;
  padding: px2rpx(12) px2rpx(24);
  transition: all 0.3s ease;
  position: relative;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 600;
  font-size: px2rpx(14);
  line-height: px2rpx(20);
}

.label {
  display: inline-block;
  font-weight: 600;
  font-size: px2rpx(14);
  line-height: px2rpx(20);
  color: #8e8a8a;
  width: px2rpx(100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: px2rpx(10);
}

.card-list li:hover {
  background: rgba(73, 247, 166, 0.1);
  border-radius: px2rpx(6);
}

.card-list li:last-child {
  margin-bottom: 0;
}

.card-list li text:first-child {
  color: #bbb;
}

.card-content {
  font-size: var(--font-size-16);
  color: #474747;
  margin: 0 0 px2rpx(26) 0;
  text-align: left;
  line-height: px2rpx(24);
}

.a1 {
  flex: 1;
}

.card-list {
  .one {
    margin: px2rpx(12) px2rpx(24);
    padding: px2rpx(12) 0;
    border-top: 1px dashed #beb6b6;
    color: #329644;
    font-family: Roboto;
    font-size: px2rpx(28);
    font-style: normal;
    font-weight: 700;
    line-height: px2rpx(36);
    align-items: flex-end;

    .label {
      color: #343434;
      font-family: Roboto;
      font-size: px2rpx(16);
      font-style: normal;
      font-weight: 600;
      line-height: px2rpx(24);
    }
  }

  .error {
    color: #d32f2f;
  }

  .default {
    color: #009deb;
  }
}

.step {
  display: flex;
  align-items: flex-start;
  padding: px2rpx(20) 0;
  color: #000;

  .step-item {
    width: px2rpx(315);
    position: relative;
    text-align: center;
    margin-right: px2rpx(20);
    text-align: left;
    font-size: px2rpx(16);
    padding-top: px2rpx(20);

    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      z-index: 1;
      height: px2rpx(5);
      position: absolute;
      background: #f1f1f1;
    }
  }

  .step-active {
    font-weight: bold;

    &::after {
      background: #eb3f57;
    }
  }
}

.status-box {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: px2rpx(20) 0;

  .status {
    font-weight: 600;
    font-size: px2rpx(22);
    line-height: px2rpx(28);
    text-align: left;
    color: #1a1a1a;
    display: flex;
    align-items: center;
  }

  .status-img {
    width: px2rpx(20);
    height: px2rpx(20);
    padding-right: px2rpx(10);
    flex-shrink: 0;
  }

  .qr-container {
    justify-content: flex-start;
  }

  view {
    width: 100%;
    text-align: start;
    color: #6f6f6f;
    font-size: px2rpx(16);
    font-weight: 400;
    word-wrap: break-word;
    line-height: px2rpx(32);

    text {
      display: block;
      padding: px2rpx(8) 0;
    }
  }

  .a-title {
    color: #333333;
    font-size: px2rpx(18);
    font-weight: 500;
    word-wrap: break-word;
    margin-top: px2rpx(44);
  }

  .step-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: px2rpx(20);

    .step-item {
      width: 100%;
      padding: 0 0 px2rpx(20) px2rpx(40);
      text-align: center;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: px2rpx(15);
        width: 0;
        height: 100%;
        border-left: 1px dashed #ccc;
        z-index: 1;
      }

      &:last-child {
        &::after {
          display: none;
        }
      }

      .ids {
        position: absolute;
        left: 0;
        top: 0;
        width: px2rpx(30);
        height: px2rpx(30);
        position: absolute;
        color: #000;
        line-height: px2rpx(30);
        background-color: #fff;
        text-align: center;
        border-radius: px2rpx(9999);
        border: 1px #ccc dashed;
        z-index: 12;
        padding: 0;
      }

      .k {
        font-size: px2rpx(14);
        color: #333333;
        font-weight: bold;
        padding: 0;
      }

      .v {
        font-size: px2rpx(14);
        color: #6f6f6f;
        padding: 0;
      }
    }
  }

  .f {
    margin: px2rpx(20) 0 0 0;
    color: #333333;
    font-size: px2rpx(15);
    font-family: PingFang SC;
    font-weight: 500;
    word-wrap: break-word;
  }
}
</style>