feat(home, pages, component): 整合在线与预约验证流程,新增步骤进度组件

- 修改首页的goAppointment和goOnline方法,统一跳转至appointment-scan页面并携带mode和step参数
- 移除pages.json中不再使用的四个旧业务页面路由配置
- 新增StepProgress步骤进度条组件,支持预约和在线两种验证模式的步骤展示
1个文件已添加
4个文件已修改
2256 ■■■■■ 已修改文件
demo.html 675 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/StepProgress.vue 218 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages.json 32 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/appointment-scan/index.vue 1319 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/home/index.vue 12 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
demo.html
@@ -22,118 +22,663 @@
  </head>
  <body>
    <div
      data-pencil-name="设备初始化页面"
      style="background-color: #F4F7FC; box-sizing: border-box; height: 1920px; overflow: hidden; position: relative; width: 1080px"
      data-pencil-name="线上登记-手动录入身份证"
      style="align-items: flex-start; background-image: linear-gradient(180deg, #3B78FF 0%, #2860E8 50%, #163EBC 100%); background-repeat: no-repeat; background-size: 100% 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; height: 1920px; justify-content: flex-start; overflow: hidden; padding: 30px 36px 40px 36px; position: relative; width: 1080px"
    >
      <div
        data-pencil-name="背景遮罩"
        style="background-color: #111111F2; box-sizing: border-box; height: 1920px; left: 0px; position: absolute; top: 0px; width: 1080px; z-index: 0"
        data-pencil-name="左侧柔光氛围"
        style="background-color: #7FB1FF1A; border-radius: 50%; box-sizing: border-box; height: 300px; left: -128px; position: absolute; top: 412px; width: 300px; z-index: 0"
      ></div>
      <div
        data-pencil-name="设备初始化弹窗"
        style="align-items: flex-start; background-color: #FFFFFF; border-radius: 28px; box-sizing: border-box; display: flex; flex-direction: column; gap: 56px; height: fit-content; justify-content: flex-start; left: 170px; padding: 52px 80px; position: absolute; top: 620px; width: 740px; z-index: 1"
        data-pencil-name="扫码页头部"
        style="align-items: center; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: 88px; justify-content: space-between; position: relative; width: 100%; z-index: 1"
      >
        <div
          data-pencil-name="标题"
          style="box-sizing: border-box; color: #111111; font-family: Inter, system-ui, sans-serif; font-size: 34px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 41px; text-align: center; width: 100%"
          data-pencil-name="左侧返回区"
          style="align-items: center; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 16px; height: 100%; justify-content: flex-start; width: 220px"
        >
          设备激活
          <div
            data-pencil-name="返回按钮"
            style="align-items: center; background-color: #FFFFFF24; border-radius: 22px; border: 1px solid #FFFFFF42; box-shadow: 0px 10px 22px 0px #0F2E852E; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: 44px; justify-content: center; width: 44px"
          >
            <svg
              data-pencil-name="返回"
              data-icon-name="chevron-left"
              data-icon-set="lucide"
              viewBox="0 0 13.99993896484375 14"
              preserveAspectRatio="xMidYMid meet"
              xmlns="http://www.w3.org/2000/svg"
              style="box-sizing: border-box; flex-shrink: 0; height: 20px; width: 20px"
            >
              <path
                d="M8.59619 2.93945q-0.08545 0.02734-0.19482 0.1128-0.14014 0.12646-0.53321 0.51611l-1.28857 1.2749q-1.81836 1.82178-1.86279 1.90723-0.04102 0.08203-0.04102 0.24951 0 0.16748 0.04785 0.25977 0.05127 0.08887 1.8628 1.9038 1.81494 1.81152 1.9038 1.8628 0.09229 0.04785 0.2461 0.04785 0.15381 0 0.23584-0.03418 0.08545-0.0376 0.18115-0.1333 0.09912-0.09912 0.1333-0.18115 0.0376-0.08545 0.0376-0.23926 0-0.15381-0.04443-0.23584-0.04102-0.08545-1.62012-1.66797l-1.58252-1.58252 1.58252-1.58252q1.5791-1.58252 1.62012-1.66455 0.04443-0.08545 0.04443-0.23926 0-0.15381-0.0376-0.23584-0.03418-0.08545-0.11621-0.18457-0.16748-0.15381-0.39307-0.16748-0.14014 0-0.18115 0.01367z"
                fill="#FFFFFF"
              ></path>
            </svg>
          </div>
          <div
            data-pencil-name="页面标题"
            style="box-sizing: border-box; color: #FFFFFF; font-family: Inter, system-ui, sans-serif; font-size: 30px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 36px; text-align: left; white-space: nowrap"
          >
            预约签到
          </div>
        </div>
      </div>
      <div
        data-pencil-name="步骤卡片"
        style="align-items: flex-start; background-color: #FFFFFF00; box-sizing: border-box; display: flex; flex-direction: column; flex-shrink: 0; gap: 20px; height: fit-content; justify-content: flex-start; position: relative; width: 100%; z-index: 2"
      >
        <div
          data-pencil-name="步骤行"
          style="align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 16px; height: 138px; justify-content: flex-start; width: 100%"
        >
          <div
            data-pencil-name="预约码验证步骤"
            style="align-items: center; box-sizing: border-box; display: flex; flex-direction: column; flex: 1 1 0; gap: 12px; height: 100%; justify-content: flex-start"
          >
            <div
              data-pencil-name="预约码验证圆点"
              style="align-items: center; background-color: #78A8FF; border-radius: 41px; border: 1px solid #DDE9FF; box-shadow: 0px 10px 18px 0px #0E318A38; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: 82px; justify-content: center; width: 82px"
            >
              <svg
                data-pencil-name="步骤图标"
                data-icon-name="qr-code"
                data-icon-set="lucide"
                viewBox="0 0 13.99993896484375 14"
                preserveAspectRatio="xMidYMid meet"
                xmlns="http://www.w3.org/2000/svg"
                style="box-sizing: border-box; flex-shrink: 0; height: 38px; width: 38px"
              >
                <path
                  d="M2.03027 1.20313q-0.22559 0.07178-0.42724 0.23242-0.20166 0.16064-0.30078 0.36914l-0.01368 0.01367q-0.07178 0.14014-0.08544 0.21191-0.02734 0.11279-0.02735 0.34864l0 0.78613 0.01367 1.03564q0 0.16748 0.02735 0.23584 0.08545 0.2666 0.28711 0.47168 0.20508 0.20166 0.47168 0.28711l0.13671 0.04102 1.0254 0.01367q1.03564 0 1.14501-0.01367 0.35205-0.07178 0.61524-0.33496 0.2666-0.2666 0.33838-0.61866 0.01367-0.10938 0.01367-1.14501l-0.01367-1.02198-0.04102-0.14013q-0.08545-0.2666-0.29052-0.46827-0.20166-0.20508-0.46827-0.29052-0.06836-0.02734-0.23584-0.02735l-0.95361-0.01367-0.9502 0q-0.16748 0.01367-0.2666 0.02735z m4.81592-0.01368q-0.25293 0.08545-0.37939 0.30762-0.04102 0.08545-0.04102 0.23926 0 0.15381 0.03418 0.23926 0.0376 0.08203 0.1333 0.18115 0.15381 0.15381 0.3999 0.16748 0.24609 0.01367 0.42041-0.16065 0.17432-0.17432 0.17432-0.41357 0-0.23926-0.16748-0.3999-0.16748-0.16064-0.39307-0.17432-0.14014 0-0.18115 0.01367z m2.79932 0.01367q-0.28027 0.05811-0.5127 0.27002-0.229 0.2085-0.32812 0.50245l-0.04102 0.14013 0 1.9585q0 0.22217 0.02051 0.30762 0.02051 0.08545 0.07861 0.20849l0.01367 0.03076q0.05469 0.0957 0.17432 0.22901 0.11963 0.1333 0.21875 0.20508 0.2085 0.14014 0.44776 0.18115 0.10938 0.01367 1.14501 0.01367l1.02198-0.01367 0.14013-0.04102q0.2666-0.08545 0.46827-0.28711 0.20508-0.20508 0.29052-0.45459 0.02734-0.08545 0.02735-0.25293l0.01367-0.95361 0-0.86816q0-0.23584-0.02734-0.34864-0.01367-0.07178-0.08545-0.21191l-0.01368-0.01367q-0.09912-0.22217-0.30078-0.37598-0.20166-0.15381-0.44092-0.22558-0.09912-0.02734-0.2666-0.02735l-0.8955 0q-1.03564 0-1.14844 0.02735z m-5.57129 2.00293l0 0.86817-1.75 0 0-1.75 1.75 0 0 0.88183z m7.60156 0l0 0.86817-1.75 0 0-1.75 1.75 0 0 0.88183z m-4.81592 0.30762q-0.11279 0.02734-0.22558 0.11963-0.10938 0.09229-0.16748 0.20166-0.02734 0.07178-0.02735 0.21191l-0.02734 1.91749-0.04102 0.09912q-0.14014 0.27686-0.43408 0.33496-0.09912 0.02734-1.03564 0.02734l-0.81348 0q-0.14014 0-0.22559 0.0376-0.08203 0.03418-0.17431 0.11963-0.08887 0.08203-0.1333 0.16406-0.02734 0.07178-0.03418 0.11279-0.00684 0.04102-0.00684 0.14014 0 0.15381 0.04102 0.25293 0.11279 0.2085 0.3247 0.29394 0.06836 0.02734 0.22217 0.02735l0.96729 0 0.95019-0.01367q0.16748 0 0.25293-0.02735 0.96729-0.29395 1.26123-1.26123 0.02734-0.08545 0.02735-0.25293l0.01367-0.95019 0-0.96729q0-0.15381-0.02734-0.22217-0.08545-0.19824-0.27344-0.30078-0.18799-0.10596-0.41358-0.06494z m-5.26367 2.92578q-0.25293 0.08545-0.37939 0.30762-0.04102 0.08545-0.04102 0.23926 0 0.15381 0.03418 0.23926 0.0376 0.08203 0.1333 0.18115 0.15381 0.15381 0.3999 0.16748 0.24609 0.01367 0.42041-0.16065 0.17432-0.17432 0.17432-0.41357 0-0.23926-0.16748-0.3999-0.16748-0.16064-0.39307-0.17432-0.14014 0-0.18115 0.01367z m7.5332 0.01367q-0.09912 0.04443-0.1914 0.12989-0.08887 0.08203-0.12647 0.16064-0.03418 0.0752-0.04101 0.11621-0.00684 0.04102-0.00684 0.14014 0 0.15381 0.04102 0.25293 0.11279 0.2085 0.3247 0.29394 0.06836 0.01367 0.14356 0.02051 0.07861 0.00684 0.35205 0.00684 0.27344 0 0.34863-0.00684 0.07861-0.00684 0.14698-0.02051 0.21192-0.08545 0.3247-0.29394 0.04102-0.09912 0.04102-0.25293 0-0.09912-0.00684-0.14014-0.00684-0.04102-0.03418-0.11279-0.04443-0.08203-0.13672-0.16406-0.08887-0.08545-0.18798-0.12989-0.06836-0.01367-0.14698-0.0205-0.0752-0.00684-0.34863-0.00684-0.27344 0-0.35889 0.00684-0.08203 0.00684-0.13672 0.0205z m2.9668-0.01367q-0.25293 0.08545-0.37939 0.30762-0.04102 0.09912-0.04785 0.23242-0.00684 0.1333 0.03418 0.23242 0.04443 0.0957 0.12646 0.18799 0.08545 0.08887 0.18799 0.14014 0.10596 0.04785 0.23242 0.04785 0.23926 0 0.41357-0.17432 0.17432-0.17432 0.16065-0.44091-0.01367-0.22559-0.16748-0.3794-0.15381-0.15381-0.3794-0.16748-0.14014 0-0.18115 0.01367z m-9.9668 2.32422q-0.31104 0.05469-0.56396 0.27344-0.24951 0.21533-0.34863 0.52637-0.02734 0.06836-0.02735 0.23584l-0.01367 0.95361 0 0.86816q0 0.23584 0.02734 0.34864 0.01367 0.07178 0.08545 0.21191l0.01368 0.01367q0.06836 0.15381 0.20849 0.29395 0.14014 0.14014 0.29395 0.20849l0.01367 0.01368q0.14014 0.07178 0.21191 0.08544 0.11279 0.02734 0.34864 0.02735l0.78613 0 1.03564-0.01367q0.16748 0 0.23584-0.02735 0.2666-0.08545 0.46827-0.28711 0.20508-0.20508 0.29052-0.47168l0.04102-0.13671 0.01367-1.0254q0-0.82373-0.01367-1.02539-0.01367-0.20508-0.07178-0.35888-0.0957-0.22559-0.30078-0.41358-0.20166-0.18799-0.45459-0.27343-0.06836-0.02734-0.24951-0.02735l-0.89893-0.01367q-1.04932 0-1.13135 0.01367z m4.7168 0.01367q-0.19482 0.04102-0.30762 0.20508-0.11279 0.16064-0.11279 0.3418 0 0.18115 0.08203 0.32129 0.08545 0.14014 0.23926 0.22558 0.09912 0.04102 0.25293 0.04102 0.15381 0 0.25293-0.04102 0.2085-0.11279 0.28369-0.32129 0.07861-0.21191 0-0.42041-0.0752-0.21191-0.28369-0.31103-0.08545-0.05469-0.20508-0.06152-0.11621-0.00684-0.20166 0.0205z m3.37354 0q-0.36231 0.05811-0.69385 0.2837-0.32813 0.22217-0.52295 0.52978-0.15381 0.2666-0.22559 0.57422-0.01367 0.12646-0.02734 0.30762l0.01367 1.93115 0.04102 0.09912q0.12646 0.2666 0.42041 0.31445 0.29395 0.04785 0.50586-0.14697 0.08203-0.08545 0.14013-0.18115l0.04102-0.1128 0.01367-2.04394 0.05469-0.08545q0.08545-0.18115 0.2666-0.2666l0.08545-0.05469 2.04394-0.01367 0.1128-0.04102q0.2085-0.11279 0.29052-0.32129 0.08545-0.21191 0.00684-0.42041-0.0752-0.21191-0.28369-0.3247l-0.09912-0.04102-1.02197-0.01367q-1.0083 0-1.16211 0.02734z m-6.14551 2.01661l0 0.88183-1.75 0 0-1.75 1.75 0 0 0.86817z m2.82666 0.30761q-0.15381 0.01367-0.27344 0.11963-0.11621 0.10596-0.17432 0.23242-0.02734 0.06836-0.02734 0.15381 0 0.08203 0 0.38281 0 0.30078 0.00684 0.3794 0.00684 0.0752 0.04101 0.14014 0.0376 0.06152 0.11963 0.14697 0.08545 0.08203 0.16065 0.12646 0.07861 0.04102 0.24609 0.04102 0.16748 0 0.24268-0.04102 0.07861-0.04443 0.16064-0.12646 0.08545-0.08545 0.11963-0.14697 0.0376-0.06494 0.04443-0.14014 0.00684-0.07861 0.00684-0.38623 0-0.34863-0.01367-0.45459-0.01367-0.10596-0.10596-0.22217-0.09229-0.11963-0.23926-0.17432-0.14697-0.05811-0.31445-0.03076z m5.19531 0.58789q-0.25293 0.08545-0.37939 0.30762-0.04102 0.09912-0.04786 0.23242-0.00684 0.1333 0.03418 0.23242 0.04443 0.0957 0.12647 0.18799 0.08545 0.08887 0.18799 0.14014 0.10596 0.04785 0.23242 0.04785 0.23926 0 0.41357-0.17432 0.17432-0.17432 0.16065-0.44091-0.01367-0.22559-0.16748-0.3794-0.15381-0.15381-0.3794-0.16748-0.14014 0-0.18115 0.01367z"
                  fill="#FFFFFF"
                ></path>
              </svg>
            </div>
            <div
              data-pencil-name="预约码验证文案"
              style="box-sizing: border-box; color: #FFFFFFF0; font-family: Inter, system-ui, sans-serif; font-size: 23px; font-style: normal; font-weight: 800; letter-spacing: 0px; line-height: 26px; text-align: center; white-space: nowrap"
            >
              预约码验证
            </div>
          </div>
          <div
            data-pencil-name="当前步骤引导箭头"
            style="align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: 82px; justify-content: flex-start; position: relative; width: 92px"
          >
            <svg
              data-pencil-name="渐进箭头1"
              viewBox="0 0 14 16"
              preserveAspectRatio="none"
              xmlns="http://www.w3.org/2000/svg"
              style="box-sizing: border-box; height: 16px; left: 0px; overflow: visible; position: absolute; top: 33px; width: 14px; z-index: 0"
            >
              <path d="M0 0l6 0 8 8-8 8-6 0 8-8z" fill="#69A2FF5C"></path>
            </svg>
            <svg
              data-pencil-name="渐进箭头2"
              viewBox="0 0 14 16"
              preserveAspectRatio="none"
              xmlns="http://www.w3.org/2000/svg"
              style="box-sizing: border-box; height: 16px; left: 14px; overflow: visible; position: absolute; top: 33px; width: 14px; z-index: 1"
            >
              <path d="M0 0l6 0 8 8-8 8-6 0 8-8z" fill="#7FB1FF78"></path>
            </svg>
            <svg
              data-pencil-name="渐进箭头3"
              viewBox="0 0 14 16"
              preserveAspectRatio="none"
              xmlns="http://www.w3.org/2000/svg"
              style="box-sizing: border-box; height: 16px; left: 28px; overflow: visible; position: absolute; top: 33px; width: 14px; z-index: 2"
            >
              <path d="M0 0l6 0 8 8-8 8-6 0 8-8z" fill="#9FC5FF96"></path>
            </svg>
            <svg
              data-pencil-name="渐进箭头4"
              viewBox="0 0 14 16"
              preserveAspectRatio="none"
              xmlns="http://www.w3.org/2000/svg"
              style="box-sizing: border-box; height: 16px; left: 42px; overflow: visible; position: absolute; top: 33px; width: 14px; z-index: 3"
            >
              <path d="M0 0l6 0 8 8-8 8-6 0 8-8z" fill="#C8DEFFB8"></path>
            </svg>
            <svg
              data-pencil-name="终点箭头"
              viewBox="0 0 24 24"
              preserveAspectRatio="none"
              xmlns="http://www.w3.org/2000/svg"
              style="box-sizing: border-box; height: 24px; left: 60px; overflow: visible; position: absolute; top: 29px; width: 24px; z-index: 4"
            >
              <path d="M0 0l10 0 14 12-14 12-10 0 14-12z" fill="#EEF5FFD8"></path>
            </svg>
          </div>
          <div
            data-pencil-name="身份证验证步骤"
            style="align-items: center; box-sizing: border-box; display: flex; flex-direction: column; flex: 1 1 0; gap: 12px; height: 100%; justify-content: flex-start"
          >
            <div
              data-pencil-name="身份证验证圆点"
              style="align-items: center; background-color: #FFFFFF; border-radius: 41px; border: 2px solid #FFFFFF66; box-shadow: 0px 12px 24px 0px #0F2D7D45; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: 82px; justify-content: center; width: 82px"
            >
              <svg
                data-pencil-name="步骤图标"
                data-icon-name="id-card"
                data-icon-set="lucide"
                viewBox="0 0 13.99993896484375 14"
                preserveAspectRatio="xMidYMid meet"
                xmlns="http://www.w3.org/2000/svg"
                style="box-sizing: border-box; flex-shrink: 0; height: 38px; width: 38px"
              >
                <path
                  d="M2.15674 2.35156q-0.29395 0.02734-0.58789 0.16748-0.29395 0.14014-0.50586 0.3794-0.30762 0.32129-0.43408 0.79638l-0.04102 0.1709 0 6.29932 0.04102 0.16748q0.07178 0.25293 0.18115 0.44092 0.11279 0.18799 0.29394 0.37256 0.18457 0.18115 0.37256 0.29394 0.18799 0.10938 0.44092 0.18115l0.16748 0.04102 9.83008 0 0.16748-0.04102q0.25293-0.07178 0.44092-0.18115 0.18799-0.11279 0.36914-0.29394 0.18457-0.18457 0.29394-0.37256 0.11279-0.18799 0.18457-0.44092l0.04102-0.16748 0-6.33008-0.04102-0.16748q-0.12646-0.46143-0.43408-0.76904-0.44775-0.48877-1.13476-0.56055-0.16748-0.01367-4.81592-0.01367-4.64844 0-4.82959 0.02734z m9.74463 1.20313q0.19482 0.09912 0.29394 0.29394l0.04102 0.09912 0 6.1045-0.02735 0.08544q-0.12646 0.26318-0.37939 0.33497-0.08203 0.02734-4.82959 0.02734-4.74756 0-4.82959-0.02734-0.25293-0.07178-0.37939-0.33497l-0.02735-0.08544 0-6.1045 0.04102-0.09912q0.11279-0.24951 0.37939-0.32129 0.08545-0.02734 4.85694-0.02734l4.76123 0.01367 0.09912 0.04102z m-6.9043 1.13476q-0.51611 0.08545-0.90234 0.42725-0.38623 0.3418-0.52637 0.83398-0.13672 0.48877 0.01709 0.99463 0.06836 0.22217 0.2085 0.43408l0.05468 0.08204-0.12304 0.11279q-0.36572 0.30762-0.57422 0.7417-0.08545 0.16748-0.10596 0.25293-0.02051 0.08203-0.02051 0.19482 0 0.29395 0.24951 0.46143 0.25293 0.16748 0.53321 0.07177 0.23926-0.09912 0.35205-0.37939 0.15381-0.3623 0.46142-0.56055 0.15381-0.0957 0.30078-0.13672 0.14697-0.04443 0.32813-0.04443 0.18115 0 0.32812 0.04443 0.14697 0.04102 0.30079 0.13672 0.30762 0.19824 0.46142 0.56055 0.07178 0.19482 0.21875 0.30078 0.14697 0.10596 0.32813 0.10596 0.36572 0 0.5332-0.32129 0.04102-0.08545 0.04785-0.12647 0.00684-0.04102 0.00684-0.1333 0-0.09229-0.02051-0.17431-0.02051-0.08545-0.10596-0.25293-0.2085-0.43408-0.57422-0.7417l-0.12304-0.11279 0.05468-0.08204q0.25293-0.39307 0.28711-0.83398 0.03418-0.44092-0.14697-0.84766-0.14014-0.30762-0.40674-0.55029-0.2666-0.24609-0.57422-0.35889-0.14014-0.05811-0.25976-0.07861-0.11621-0.02051-0.30078-0.03418-0.24951 0-0.30762 0.01367z m4.20068 0.57422q-0.08545 0.02734-0.18457 0.09229-0.0957 0.06152-0.13672 0.1333-0.14014 0.16748-0.12646 0.38623 0.01367 0.21533 0.18115 0.36914 0.08545 0.0957 0.16748 0.12646 0.08545 0.02734 0.29395 0.04102 0.15381 0.01367 0.60498 0.01367l0.6289-0.01367 0.1128-0.04102q0.2085-0.11279 0.29052-0.32129 0.08545-0.21191 0.00684-0.42041-0.0752-0.21191-0.28369-0.3247l-0.09912-0.04102-0.70069-0.01367q-0.68359 0-0.75537 0.01367z m-3.7666 0.60156q0.11279 0.02734 0.21533 0.13331 0.10596 0.10596 0.15039 0.23242 0.02734 0.08203 0.02735 0.19482 0 0.11279-0.0376 0.20508-0.03418 0.08887-0.11963 0.18115-0.08203 0.08887-0.16406 0.1333-0.07178 0.02734-0.11279 0.03418-0.04102 0.00684-0.14014 0.00684-0.09912 0-0.14014-0.00684-0.04102-0.00684-0.11279-0.03418-0.0957-0.04443-0.17432-0.1333-0.0752-0.09229-0.11963-0.18799-0.04102-0.09912-0.03417-0.23242 0.00684-0.1333 0.04785-0.21875 0.09912-0.19482 0.28711-0.27685 0.19141-0.08545 0.42724-0.03077z m3.79395 1.73633q-0.18115 0.02734-0.32129 0.18115-0.14014 0.15381-0.15381 0.35206 0 0.14014 0.06152 0.28027 0.06494 0.14014 0.18116 0.22559 0.11963 0.08203 0.25293 0.0957 0.1333 0.01367 0.70751 0.01367l0.70069-0.01367 0.09912-0.04102q0.2666-0.12646 0.32129-0.42041 0.05469-0.29395-0.15381-0.50586-0.14014-0.14014-0.33496-0.16748-0.09912-0.02734-0.68018-0.02734-0.58105 0-0.68017 0.02734z"
                  fill="#2F6BFF"
                ></path>
              </svg>
            </div>
            <div
              data-pencil-name="身份证验证文案"
              style="box-sizing: border-box; color: #FFFFFF; font-family: Inter, system-ui, sans-serif; font-size: 23px; font-style: normal; font-weight: 900; letter-spacing: 0px; line-height: 26px; text-align: center; white-space: nowrap"
            >
              身份证验证
            </div>
          </div>
          <div
            data-pencil-name="当前步骤引导箭头"
            style="align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: 82px; justify-content: flex-start; position: relative; width: 92px"
          >
            <svg
              data-pencil-name="渐进箭头1"
              viewBox="0 0 14 16"
              preserveAspectRatio="none"
              xmlns="http://www.w3.org/2000/svg"
              style="box-sizing: border-box; height: 16px; left: 0px; overflow: visible; position: absolute; top: 33px; width: 14px; z-index: 0"
            >
              <path d="M0 0l6 0 8 8-8 8-6 0 8-8z" fill="#FFFFFF12"></path>
            </svg>
            <svg
              data-pencil-name="渐进箭头2"
              viewBox="0 0 14 16"
              preserveAspectRatio="none"
              xmlns="http://www.w3.org/2000/svg"
              style="box-sizing: border-box; height: 16px; left: 14px; overflow: visible; position: absolute; top: 33px; width: 14px; z-index: 1"
            >
              <path d="M0 0l6 0 8 8-8 8-6 0 8-8z" fill="#FFFFFF1A"></path>
            </svg>
            <svg
              data-pencil-name="渐进箭头3"
              viewBox="0 0 14 16"
              preserveAspectRatio="none"
              xmlns="http://www.w3.org/2000/svg"
              style="box-sizing: border-box; height: 16px; left: 28px; overflow: visible; position: absolute; top: 33px; width: 14px; z-index: 2"
            >
              <path d="M0 0l6 0 8 8-8 8-6 0 8-8z" fill="#FFFFFF24"></path>
            </svg>
            <svg
              data-pencil-name="渐进箭头4"
              viewBox="0 0 14 16"
              preserveAspectRatio="none"
              xmlns="http://www.w3.org/2000/svg"
              style="box-sizing: border-box; height: 16px; left: 42px; overflow: visible; position: absolute; top: 33px; width: 14px; z-index: 3"
            >
              <path d="M0 0l6 0 8 8-8 8-6 0 8-8z" fill="#FFFFFF30"></path>
            </svg>
            <svg
              data-pencil-name="终点箭头"
              viewBox="0 0 24 24"
              preserveAspectRatio="none"
              xmlns="http://www.w3.org/2000/svg"
              style="box-sizing: border-box; height: 24px; left: 60px; overflow: visible; position: absolute; top: 29px; width: 24px; z-index: 4"
            >
              <path d="M0 0l10 0 14 12-14 12-10 0 14-12z" fill="#FFFFFF78"></path>
            </svg>
          </div>
          <div
            data-pencil-name="人脸验证步骤"
            style="align-items: center; box-sizing: border-box; display: flex; flex-direction: column; flex: 1 1 0; gap: 12px; height: 100%; justify-content: flex-start"
          >
            <div
              data-pencil-name="人脸验证圆点"
              style="align-items: center; background-color: #FFFFFF12; border-radius: 41px; border: 1px solid #FFFFFF2E; box-shadow: 0px 8px 14px 0px #08205612; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: 82px; justify-content: center; width: 82px"
            >
              <svg
                data-pencil-name="步骤图标"
                data-icon-name="scan-face"
                data-icon-set="lucide"
                viewBox="0 0 13.99993896484375 14"
                preserveAspectRatio="xMidYMid meet"
                xmlns="http://www.w3.org/2000/svg"
                style="box-sizing: border-box; flex-shrink: 0; height: 38px; width: 38px"
              >
                <path
                  d="M2.60449 1.20313q-0.43408 0.07178-0.77929 0.35205-0.3418 0.28027-0.50928 0.66992l-0.01367 0.01367q-0.08545 0.21191-0.10596 0.35205-0.02051 0.14014-0.02051 0.75537l0 0.05469q0 0.57422 0 0.69385 0 0.11963 0.03418 0.21191 0.0376 0.08887 0.11963 0.17432 0.18115 0.18115 0.42041 0.18115 0.23926 0 0.40674-0.16748l0.01367-0.01367q0.08203-0.08545 0.10938-0.14014 0.03076-0.05811 0.03076-0.23926 0.01367-0.11279 0.01367-0.54687l0.01367-0.76905 0.04102-0.09912q0.09912-0.2085 0.30761-0.30761l0.09912-0.04102 0.76905-0.01367q0.43408 0 0.54687-0.01367 0.18115 0 0.23584-0.02735 0.05811-0.03076 0.14356-0.11279l0.01367-0.01367q0.16748-0.16748 0.16748-0.40674 0-0.23926-0.16748-0.40674-0.07178-0.06836-0.16748-0.12646l-0.08545-0.04102-0.75537 0q-0.76904 0-0.88184 0.02735z m7.12647-0.00001q-0.18457 0.05811-0.29053 0.21192-0.10254 0.15381-0.10254 0.33496 0 0.23926 0.16748 0.40674l0.01367 0.01367q0.08545 0.08203 0.14014 0.11279 0.05811 0.02734 0.23926 0.02735 0.11279 0.01367 0.54687 0.01367l0.76904 0.01367 0.09913 0.04102q0.2085 0.09912 0.30761 0.30761l0.04102 0.09912 0.01367 0.76905q0 0.43408 0.01367 0.54687 0 0.18115 0.02735 0.23926 0.03076 0.05469 0.11279 0.14014l0.01367 0.01367q0.12647 0.12646 0.30078 0.16064 0.17432 0.03418 0.34522-0.03418 0.0957-0.05811 0.17773-0.14013 0.08545-0.08545 0.11963-0.17432 0.0376-0.09229 0.0376-0.21191 0-0.11963 0-0.69385 0-0.57422-0.00684-0.7041-0.00684-0.1333-0.03418-0.21875-0.25293-0.81348-0.98095-1.14844-0.14014-0.06836-0.28028-0.11279-0.09912-0.02734-0.23242-0.03418-0.12988-0.00684-0.7041-0.00684-0.7998 0-0.85449 0.02734z m-4.63477 3.48633q-0.25293 0.08545-0.37939 0.30762-0.04102 0.08545-0.04102 0.23926 0 0.15381 0.03418 0.23926 0.0376 0.08203 0.1333 0.18115 0.15381 0.15381 0.3999 0.16748 0.24609 0.01367 0.42041-0.16065 0.17432-0.17432 0.17432-0.41357 0-0.23926-0.16748-0.3999-0.16748-0.16064-0.39307-0.17432-0.14014 0-0.18115 0.01367z m3.5 0q-0.25293 0.08545-0.37939 0.30762-0.04102 0.08545-0.04102 0.23926 0 0.15381 0.03418 0.23926 0.0376 0.08203 0.1333 0.18115 0.15381 0.15381 0.3999 0.16748 0.24609 0.01367 0.42041-0.16065 0.17432-0.17432 0.17432-0.41357 0-0.23926-0.16748-0.3999-0.16748-0.16064-0.39307-0.17432-0.14014 0-0.18115 0.01367z m-4.0332 2.91211q-0.14014 0.01367-0.2666 0.11963-0.12305 0.10596-0.18116 0.2461-0.02734 0.0957-0.02734 0.21533 0 0.11963 0.04102 0.21875 0.08545 0.18115 0.36572 0.44775 0.28027 0.26318 0.61523 0.4751 0.68701 0.46143 1.44922 0.56055 0.76221 0.0957 1.53125-0.15381 0.43408-0.14014 0.86133-0.43409 0.42725-0.29395 0.73486-0.64599 0.12646-0.14014 0.17432-0.24268 0.05127-0.10596 0.05127-0.23242 0-0.3623-0.33496-0.5332-0.11279-0.05469-0.23926-0.05469-0.15381 0-0.25977 0.05811-0.10254 0.05469-0.229 0.19482-0.22559 0.24951-0.52637 0.46143-0.30078 0.2085-0.60839 0.32129-0.19482 0.07178-0.3418 0.09228-0.14697 0.02051-0.37256 0.02051-0.22559 0-0.37256-0.02051-0.14697-0.02051-0.3418-0.09228-0.30762-0.11279-0.60839-0.32129-0.30078-0.21191-0.52637-0.46143-0.0957-0.11279-0.15381-0.15381-0.19482-0.12646-0.43408-0.08545z m-2.91211 1.75q-0.15381 0.01367-0.27344 0.11963-0.11621 0.10596-0.17432 0.23242-0.02734 0.08203-0.02734 0.20166 0 0.11963 0 0.69385 0 0.57422 0.00684 0.70752 0.00684 0.12988 0.03418 0.21533 0.29395 0.96729 1.26123 1.26123 0.08545 0.02734 0.21533 0.03418 0.1333 0.00684 0.70752 0.00684 0.57422 0 0.69385 0 0.11963 0 0.20849-0.03418 0.09229-0.0376 0.17432-0.11963 0.08545-0.08545 0.1333-0.18799 0.05127-0.10596 0.05127-0.23242 0-0.12646-0.04102-0.23926-0.09912-0.19482-0.29394-0.29394-0.05811-0.02734-0.16406-0.03418-0.10254-0.00684-0.66309-0.01367-0.56055-0.00684-0.68018-0.02051-0.11621-0.01367-0.21533-0.07178-0.14014-0.0957-0.22558-0.26318l-0.04102-0.09913-0.02734-1.34326q0-0.14014-0.02735-0.18457-0.08545-0.18115-0.25976-0.27685-0.17432-0.09912-0.37256-0.05811z m10.5 0q-0.18115 0.02734-0.32129 0.16748-0.08203 0.08545-0.11279 0.15039-0.02734 0.06152-0.02735 0.22901-0.01367 0.12646-0.01367 0.56054l-0.01367 0.75537-0.04102 0.09913q-0.08545 0.16748-0.22558 0.26318-0.09912 0.05811-0.21875 0.07178-0.11621 0.01367-0.67676 0.02051-0.56055 0.00684-0.6665 0.01367-0.10254 0.00684-0.16065 0.03418-0.22217 0.11279-0.30078 0.33838-0.0752 0.22217 0.00684 0.43408 0.05811 0.0957 0.14013 0.18115 0.08545 0.08203 0.17432 0.11963 0.09229 0.03418 0.21191 0.03418 0.11963 0 0.69385 0 0.57422 0 0.7041-0.00684 0.1333-0.00684 0.21875-0.03418 0.96729-0.29395 1.26123-1.26123 0.02734-0.08545 0.03418-0.21533 0.00684-0.1333 0.00684-0.69385l0-0.63232q0-0.19482-0.02051-0.26318-0.02051-0.07178-0.09228-0.15381-0.09912-0.12646-0.2461-0.18116-0.14697-0.05811-0.31445-0.03076z"
                  fill="#C7D7F6"
                ></path>
              </svg>
            </div>
            <div
              data-pencil-name="人脸验证文案"
              style="box-sizing: border-box; color: #E2EBFFA8; font-family: Inter, system-ui, sans-serif; font-size: 23px; font-style: normal; font-weight: 600; letter-spacing: 0px; line-height: 26px; text-align: center; white-space: nowrap"
            >
              人脸验证
            </div>
          </div>
          <div
            data-pencil-name="后续步骤引导箭头"
            style="align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: 82px; justify-content: flex-start; position: relative; width: 92px"
          >
            <svg
              data-pencil-name="渐进箭头1"
              viewBox="0 0 14 16"
              preserveAspectRatio="none"
              xmlns="http://www.w3.org/2000/svg"
              style="box-sizing: border-box; height: 16px; left: 0px; overflow: visible; position: absolute; top: 33px; width: 14px; z-index: 0"
            >
              <path d="M0 0l6 0 8 8-8 8-6 0 8-8z" fill="#FFFFFF12"></path>
            </svg>
            <svg
              data-pencil-name="渐进箭头2"
              viewBox="0 0 14 16"
              preserveAspectRatio="none"
              xmlns="http://www.w3.org/2000/svg"
              style="box-sizing: border-box; height: 16px; left: 14px; overflow: visible; position: absolute; top: 33px; width: 14px; z-index: 1"
            >
              <path d="M0 0l6 0 8 8-8 8-6 0 8-8z" fill="#FFFFFF1A"></path>
            </svg>
            <svg
              data-pencil-name="渐进箭头3"
              viewBox="0 0 14 16"
              preserveAspectRatio="none"
              xmlns="http://www.w3.org/2000/svg"
              style="box-sizing: border-box; height: 16px; left: 28px; overflow: visible; position: absolute; top: 33px; width: 14px; z-index: 2"
            >
              <path d="M0 0l6 0 8 8-8 8-6 0 8-8z" fill="#FFFFFF24"></path>
            </svg>
            <svg
              data-pencil-name="渐进箭头4"
              viewBox="0 0 14 16"
              preserveAspectRatio="none"
              xmlns="http://www.w3.org/2000/svg"
              style="box-sizing: border-box; height: 16px; left: 42px; overflow: visible; position: absolute; top: 33px; width: 14px; z-index: 3"
            >
              <path d="M0 0l6 0 8 8-8 8-6 0 8-8z" fill="#FFFFFF30"></path>
            </svg>
            <svg
              data-pencil-name="终点箭头"
              viewBox="0 0 24 24"
              preserveAspectRatio="none"
              xmlns="http://www.w3.org/2000/svg"
              style="box-sizing: border-box; height: 24px; left: 60px; overflow: visible; position: absolute; top: 29px; width: 24px; z-index: 4"
            >
              <path d="M0 0l10 0 14 12-14 12-10 0 14-12z" fill="#FFFFFF78"></path>
            </svg>
          </div>
          <div
            data-pencil-name="接待人验证步骤"
            style="align-items: center; box-sizing: border-box; display: flex; flex-direction: column; flex: 1 1 0; gap: 12px; height: 100%; justify-content: flex-start"
          >
            <div
              data-pencil-name="接待人验证圆点"
              style="align-items: center; background-color: #FFFFFF12; border-radius: 41px; border: 1px solid #FFFFFF2E; box-shadow: 0px 8px 14px 0px #08205612; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: 82px; justify-content: center; width: 82px"
            >
              <svg
                data-pencil-name="步骤图标"
                data-icon-name="user-check"
                data-icon-set="lucide"
                viewBox="0 0 13.99993896484375 14"
                preserveAspectRatio="xMidYMid meet"
                xmlns="http://www.w3.org/2000/svg"
                style="box-sizing: border-box; flex-shrink: 0; height: 38px; width: 38px"
              >
                <path
                  d="M4.84326 1.20313q-0.81006 0.11279-1.42871 0.61865-0.61523 0.50244-0.89551 1.24414-0.18115 0.48877-0.18115 1.02197 0 0.28027 0.04102 0.50586 0.04443 0.22217 0.14013 0.48877 0.15381 0.46143 0.46826 0.84766 0.31787 0.38281 0.7212 0.63574 0.36572 0.22559 0.73486 0.32471 0.37256 0.0957 0.80664 0.0957 0.22559 0 0.3623-0.01367 0.14014-0.01367 0.35206-0.05811 0.60156-0.15381 1.104-0.55713 0.50586-0.40674 0.7998-0.98096 0.19482-0.39307 0.26661-0.88183 0.02734-0.14014 0.02734-0.40674 0-0.2666-0.02734-0.40674-0.09912-0.65625-0.46485-1.20312-0.3623-0.54688-0.93652-0.89551-0.43408-0.2666-0.98096-0.36572-0.15381-0.02734-0.45459-0.03418-0.30078-0.00684-0.45459 0.02051z m0.60156 1.14843q0.40674 0.02734 0.78272 0.28711 0.37939 0.25977 0.58105 0.65967 0.20508 0.39648 0.18457 0.88184-0.02051 0.48193-0.28711 0.86132-0.15381 0.23584-0.37939 0.41358-0.22217 0.17432-0.46143 0.27002-0.19482 0.05811-0.2871 0.07861-0.08887 0.02051-0.32813 0.02051-0.23926 0-0.33154-0.02051-0.08887-0.02051-0.28369-0.07861-0.39307-0.14014-0.68018-0.46826-0.28711-0.32813-0.3999-0.73487-0.10938-0.46143 0.01367-0.90918 0.12646-0.44775 0.45459-0.76904 0.33154-0.32471 0.79297-0.45117 0.08545-0.02734 0.24609-0.04785 0.16064-0.02051 0.21533-0.00684l0.16748 0.01367z m7.16748 2.35156q-0.05469 0.02734-0.229 0.19825-0.17432 0.16748-0.875 0.85107l-1.0083 1.0083-0.42041-0.42041q-0.3623-0.34863-0.46826-0.42383-0.10596-0.07861-0.25977-0.07861-0.2085 0-0.34863 0.09912-0.19824 0.14014-0.23926 0.3794-0.04102 0.23584 0.08545 0.43066 0.05469 0.07178 0.68359 0.68701 0.39307 0.40674 0.51954 0.50244 0.15381 0.15381 0.229 0.19141 0.07861 0.03418 0.21875 0.03418l0.02734 0q0.12647 0 0.19825-0.04102 0.0957-0.05811 0.3623-0.30761 0.18115-0.1709 0.82715-0.81348l0.33496-0.33496q0.64258-0.646 0.81348-0.82715 0.24951-0.2666 0.30761-0.3623 0.04101-0.07178 0.04102-0.19825l0-0.02734q0-0.12646-0.04102-0.23926-0.09912-0.19482-0.29394-0.29394-0.08545-0.04102-0.22559-0.04102-0.14014 0-0.23926 0.02734z m-9.51904 3.5q-0.96387 0.14014-1.65088 0.82715-0.54687 0.54688-0.75537 1.31592-0.07178 0.23926-0.08545 0.44092-0.01367 0.20166-0.01367 0.82031l0 0.76904 0.04102 0.1128q0.05811 0.0957 0.14013 0.18115 0.21191 0.19482 0.50586 0.14697 0.29395-0.04785 0.42041-0.31445l0.04102-0.09912 0.01367-0.79639q0.01367-0.61865 0.02734-0.77246 0.01367-0.15381 0.07178-0.34863 0.14014-0.37939 0.46826-0.68018 0.32813-0.30078 0.73487-0.41357 0.15381-0.04102 0.53662-0.05469 0.38623-0.01367 1.66113-0.01367 1.2749 0 1.65771 0.01367 0.38623 0.01367 0.54004 0.05469 0.42041 0.11279 0.75537 0.43066 0.33838 0.31445 0.46143 0.71778 0.05811 0.16748 0.06494 0.3247 0.00684 0.15381 0.02051 0.7417l0.01367 0.79639 0.04102 0.09912q0.12646 0.2666 0.42041 0.31445 0.29395 0.04785 0.50586-0.14697 0.08203-0.08545 0.14013-0.18115l0.04102-0.1128 0-0.76904q0-0.61865-0.01367-0.82031-0.01367-0.20166-0.08545-0.44092-0.08203-0.32129-0.23584-0.61523-0.2666-0.51953-0.73828-0.90235-0.46826-0.38623-1.02539-0.54004l-0.04444-0.01367q-0.16748-0.05811-0.29394-0.07178-0.15381-0.01367-0.56055-0.01367l-1.60986-0.01367q-2.05762 0-2.21143 0.02734z"
                  fill="#C7D7F6"
                ></path>
              </svg>
            </div>
            <div
              data-pencil-name="接待人验证文案"
              style="box-sizing: border-box; color: #E2EBFFA8; font-family: Inter, system-ui, sans-serif; font-size: 23px; font-style: normal; font-weight: 600; letter-spacing: 0px; line-height: 26px; text-align: center; white-space: nowrap"
            >
              接待人验证
            </div>
          </div>
          <div
            data-pencil-name="后续步骤引导箭头"
            style="align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: 82px; justify-content: flex-start; position: relative; width: 92px"
          >
            <svg
              data-pencil-name="渐进箭头1"
              viewBox="0 0 14 16"
              preserveAspectRatio="none"
              xmlns="http://www.w3.org/2000/svg"
              style="box-sizing: border-box; height: 16px; left: 0px; overflow: visible; position: absolute; top: 33px; width: 14px; z-index: 0"
            >
              <path d="M0 0l6 0 8 8-8 8-6 0 8-8z" fill="#FFFFFF12"></path>
            </svg>
            <svg
              data-pencil-name="渐进箭头2"
              viewBox="0 0 14 16"
              preserveAspectRatio="none"
              xmlns="http://www.w3.org/2000/svg"
              style="box-sizing: border-box; height: 16px; left: 14px; overflow: visible; position: absolute; top: 33px; width: 14px; z-index: 1"
            >
              <path d="M0 0l6 0 8 8-8 8-6 0 8-8z" fill="#FFFFFF1A"></path>
            </svg>
            <svg
              data-pencil-name="渐进箭头3"
              viewBox="0 0 14 16"
              preserveAspectRatio="none"
              xmlns="http://www.w3.org/2000/svg"
              style="box-sizing: border-box; height: 16px; left: 28px; overflow: visible; position: absolute; top: 33px; width: 14px; z-index: 2"
            >
              <path d="M0 0l6 0 8 8-8 8-6 0 8-8z" fill="#FFFFFF24"></path>
            </svg>
            <svg
              data-pencil-name="渐进箭头4"
              viewBox="0 0 14 16"
              preserveAspectRatio="none"
              xmlns="http://www.w3.org/2000/svg"
              style="box-sizing: border-box; height: 16px; left: 42px; overflow: visible; position: absolute; top: 33px; width: 14px; z-index: 3"
            >
              <path d="M0 0l6 0 8 8-8 8-6 0 8-8z" fill="#FFFFFF30"></path>
            </svg>
            <svg
              data-pencil-name="终点箭头"
              viewBox="0 0 24 24"
              preserveAspectRatio="none"
              xmlns="http://www.w3.org/2000/svg"
              style="box-sizing: border-box; height: 24px; left: 60px; overflow: visible; position: absolute; top: 29px; width: 24px; z-index: 4"
            >
              <path d="M0 0l10 0 14 12-14 12-10 0 14-12z" fill="#FFFFFF78"></path>
            </svg>
          </div>
          <div
            data-pencil-name="打印凭条步骤"
            style="align-items: center; box-sizing: border-box; display: flex; flex-direction: column; flex: 1 1 0; gap: 12px; height: 100%; justify-content: flex-start"
          >
            <div
              data-pencil-name="打印凭条圆点"
              style="align-items: center; background-color: #FFFFFF12; border-radius: 41px; border: 1px solid #FFFFFF2E; box-shadow: 0px 8px 14px 0px #08205612; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: 82px; justify-content: center; width: 82px"
            >
              <svg
                data-pencil-name="步骤图标"
                data-icon-name="printer"
                data-icon-set="lucide"
                viewBox="0 0 13.99993896484375 14"
                preserveAspectRatio="xMidYMid meet"
                xmlns="http://www.w3.org/2000/svg"
                style="box-sizing: border-box; flex-shrink: 0; height: 38px; width: 38px"
              >
                <path
                  d="M3.94775 0.58789q-0.39307 0.04102-0.70068 0.34863-0.14014 0.15381-0.2085 0.28028l-0.01367 0.03076q-0.05811 0.12305-0.07178 0.20849-0.02734 0.12646-0.02734 0.44776l0 2.77197-0.39307 0q-0.38965 0-0.54345 0.02734-0.56055 0.11279-0.93994 0.53321-0.37598 0.42041-0.44776 0.99463-0.02734 0.15381-0.02734 1.64404 0 1.49023 0.02734 1.64404 0.02734 0.30762 0.16748 0.58789 0.15381 0.32471 0.44092 0.56397 0.28711 0.23584 0.65283 0.34863 0.11279 0.02734 0.20166 0.04102 0.09229 0.01367 0.41358 0.01367l0.44775 0 0 0.67334q0 0.46142 0.00684 0.58789 0.00684 0.12305 0.0205 0.22217 0.07178 0.28027 0.32129 0.51953 0.11279 0.10938 0.22559 0.18115 0.11279 0.06836 0.2666 0.11279l0.12647 0.04102 6.21386 0 0.12647-0.04102q0.16748-0.04443 0.27344-0.11279 0.10596-0.07178 0.23242-0.19482 0.15381-0.15381 0.22217-0.29395 0.08545-0.1709 0.09912-0.31787 0.01367-0.14697 0.01367-0.7041l0-0.67334 0.44775 0q0.32129 0 0.41016-0.01367 0.09229-0.01367 0.20508-0.04102 0.51953-0.15723 0.86132-0.55371 0.3418-0.3999 0.39991-0.94678 0.02734-0.15381 0.02734-1.64404 0-1.49023-0.02734-1.64404-0.07178-0.57422-0.45117-0.99463-0.37598-0.42041-0.93653-0.53321-0.15381-0.02734-0.54346-0.02734l-0.39306 0 0-2.77197q0-0.32129-0.02735-0.44776-0.01367-0.08545-0.07177-0.20849l-0.01367-0.03076q-0.06836-0.12646-0.22217-0.28028-0.15381-0.15381-0.29395-0.22216l-0.0581-0.02735q-0.0957-0.05811-0.2085-0.07178-0.16748-0.02734-0.67334-0.02734l-2.41992 0q-3.01123 0-3.1377 0z m5.97803 2.61816l0 1.46973-5.85156 0 0-2.92578 5.85156 0 0 1.45605z m1.83545 2.64551q0.30762 0.04102 0.43408 0.32129l0.04102 0.09912 0 3.20606-0.04102 0.09912q-0.04443 0.08203-0.11621 0.16064-0.06836 0.0752-0.13672 0.11963-0.14014 0.06836-0.57422 0.06836l-0.29394 0 0-0.67334q0-0.55713-0.01367-0.7041-0.01367-0.14697-0.09912-0.33154-0.06836-0.12646-0.22217-0.28028-0.15381-0.15381-0.29395-0.22216l-0.04443-0.02735q-0.10938-0.05811-0.23584-0.07178-0.16748-0.02734-0.70068-0.02734l-4.92872 0q-0.5332 0-0.70068 0.02734-0.12646 0.01367-0.23584 0.07178l-0.04443 0.02735q-0.12305 0.05469-0.28028 0.20166-0.15381 0.14697-0.22216 0.27343-0.08545 0.16748-0.10596 0.33155-0.02051 0.16064-0.02051 0.73144l0 0.67334-0.29394 0q-0.43408 0-0.57422-0.06836-0.06836-0.04443-0.14014-0.11963-0.06836-0.07861-0.11279-0.16064l-0.04102-0.09912 0-3.20606 0.04102-0.09912q0.05811-0.12646 0.16748-0.21533 0.11279-0.09229 0.23242-0.11279 0.11963-0.02051 4.78174-0.02051 4.66211 0 4.7749 0.02734z m-1.83545 4.64844l0 1.75-5.85156 0 0-3.5 5.85156 0 0 1.75z"
                  fill="#C7D7F6"
                ></path>
              </svg>
            </div>
            <div
              data-pencil-name="打印凭条文案"
              style="box-sizing: border-box; color: #E2EBFFA8; font-family: Inter, system-ui, sans-serif; font-size: 23px; font-style: normal; font-weight: 600; letter-spacing: 0px; line-height: 26px; text-align: center; white-space: nowrap"
            >
              打印凭条
            </div>
          </div>
        </div>
      </div>
      <div
        data-pencil-name="扫码主体区"
        style="align-items: center; background-image: linear-gradient(180deg, #FFFFFF 0%, #F7FAFF 100%); background-repeat: no-repeat; background-size: 100% 100%; border-radius: 34px; border: 1px solid #DEE9FF; box-shadow: 0px 18px 44px 0px #0D2E8638; box-sizing: border-box; display: flex; flex-direction: column; flex-shrink: 0; gap: 24px; height: 720px; justify-content: flex-start; padding: 38px 32px 28px 32px; position: relative; width: 1008px; z-index: 3"
      >
        <div
          data-pencil-name="主提示标题"
          style="box-sizing: border-box; color: #1F2A44; font-family: Inter, system-ui, sans-serif; font-size: 42px; font-style: normal; font-weight: 800; letter-spacing: 0px; line-height: 50px; text-align: center; white-space: nowrap"
        >
          手动录入身份证号
        </div>
        <div
          data-pencil-name="表单区"
          style="align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; flex-shrink: 0; gap: 32px; height: fit-content; justify-content: flex-start; width: 100%"
          data-pencil-name="手动录入区"
          style="align-items: center; box-sizing: border-box; display: flex; flex-direction: column; flex-shrink: 0; gap: 40px; height: 382px; justify-content: flex-start; width: 100%"
        >
          <div
            data-pencil-name="设备ID:行"
            style="align-items: center; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 16px; height: 64px; justify-content: flex-start; width: 100%"
            data-pencil-name="输入表单卡"
            style="align-items: flex-start; background-color: #F8FAFF; border-radius: 28px; border: 1px solid #D9E1F2; box-sizing: border-box; display: flex; flex-direction: column; flex-shrink: 0; gap: 18px; height: 230px; justify-content: flex-start; padding: 26px; width: 820px"
          >
            <div
              data-pencil-name="设备ID:标签"
              style="box-sizing: border-box; color: #222222; flex-shrink: 0; font-family: Inter, system-ui, sans-serif; font-size: 20px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 24px; text-align: left; width: 92px"
            >
              设备ID:
            </div>
            <div
              data-pencil-name="设备ID:输入框"
              style="align-items: center; background-color: #F1F1F1; border-radius: 12px; border: 1px solid #CFCFCF; box-sizing: border-box; display: flex; flex-direction: row; flex: 1 1 0; gap: 0px; height: 56px; justify-content: flex-start; padding: 0px 16px"
              data-pencil-name="输入框"
              style="align-items: center; background-color: #FFFFFF; border-radius: 22px; border: 1px solid #D9E1F2; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: 118px; justify-content: space-between; padding: 0px 28px; width: 100%"
            >
              <div
                data-pencil-name="设备ID:占位"
                style="box-sizing: border-box; color: #A3A3A3; font-family: Inter, system-ui, sans-serif; font-size: 18px; font-style: normal; font-weight: 600; letter-spacing: 0px; line-height: 22px; text-align: left; white-space: nowrap"
                data-pencil-name="输入框占位"
                style="box-sizing: border-box; color: #A0ACC4; font-family: Inter, system-ui, sans-serif; font-size: 24px; font-style: normal; font-weight: 500; letter-spacing: 0px; line-height: 29px; text-align: left; white-space: nowrap"
              >
                自动回填
                请输入您的身份证号码
              </div>
            </div>
            <div
              data-pencil-name="输入辅助行"
              style="align-items: center; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: 30px; justify-content: space-between; width: 100%"
            >
              <div
                data-pencil-name="输入提示文案"
                style="box-sizing: border-box; color: #7B88A8; font-family: Inter, system-ui, sans-serif; font-size: 17px; font-style: normal; font-weight: 500; letter-spacing: 0px; line-height: 20px; text-align: left; white-space: nowrap"
              >
                请输入 18 位身份证号码,X 需大写
              </div>
            </div>
          </div>
          <div
            data-pencil-name="IP地址:行"
            style="align-items: center; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 16px; height: 64px; justify-content: flex-start; width: 100%"
            data-pencil-name="表单动作行"
            style="align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 16px; height: 112px; justify-content: flex-start; width: 820px"
          >
            <div
              data-pencil-name="IP地址:标签"
              style="box-sizing: border-box; color: #222222; flex-shrink: 0; font-family: Inter, system-ui, sans-serif; font-size: 20px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 24px; text-align: left; width: 92px"
            >
              IP地址:
            </div>
            <div
              data-pencil-name="IP地址:输入框"
              style="align-items: center; background-color: #FFFFFF; border-radius: 12px; border: 1px solid #CFCFCF; box-sizing: border-box; display: flex; flex-direction: row; flex: 1 1 0; gap: 0px; height: 56px; justify-content: flex-start; padding: 0px 16px"
              data-pencil-name="清空按钮"
              style="align-items: center; background-color: #EEF4FF; border-radius: 24px; border: 1px solid #D6E3FF; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: 100%; justify-content: center; width: 232px"
            >
              <div
                data-pencil-name="IP地址:占位"
                style="box-sizing: border-box; color: #A3A3A3; font-family: Inter, system-ui, sans-serif; font-size: 18px; font-style: normal; font-weight: 600; letter-spacing: 0px; line-height: 22px; text-align: left; white-space: nowrap"
                data-pencil-name="清空按钮文字"
                style="box-sizing: border-box; color: #2F6BFF; font-family: Inter, system-ui, sans-serif; font-size: 24px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 29px; text-align: left; white-space: nowrap"
              >
                请输入
                清空
              </div>
            </div>
          </div>
          <div
            data-pencil-name="端口号:行"
            style="align-items: center; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 16px; height: 64px; justify-content: flex-start; width: 100%"
          >
            <div
              data-pencil-name="端口号:标签"
              style="box-sizing: border-box; color: #222222; flex-shrink: 0; font-family: Inter, system-ui, sans-serif; font-size: 20px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 24px; text-align: left; width: 92px"
            >
              端口号:
            </div>
            <div
              data-pencil-name="端口号:输入框"
              style="align-items: center; background-color: #FFFFFF; border-radius: 12px; border: 1px solid #CFCFCF; box-sizing: border-box; display: flex; flex-direction: row; flex: 1 1 0; gap: 0px; height: 56px; justify-content: flex-start; padding: 0px 16px"
              data-pencil-name="确认按钮"
              style="align-items: center; background-image: linear-gradient(180deg, #5A8FFF 0%, #2F6BFF 100%); background-repeat: no-repeat; background-size: 100% 100%; border-radius: 24px; border: 1px solid #FFFFFF55; box-shadow: 0px 10px 22px 0px #2F6BFF2E; box-sizing: border-box; display: flex; flex-direction: row; flex: 1 1 0; gap: 0px; height: 100%; justify-content: center"
            >
              <div
                data-pencil-name="端口号:占位"
                style="box-sizing: border-box; color: #A3A3A3; font-family: Inter, system-ui, sans-serif; font-size: 18px; font-style: normal; font-weight: 600; letter-spacing: 0px; line-height: 22px; text-align: left; white-space: nowrap"
                data-pencil-name="确认按钮文字"
                style="box-sizing: border-box; color: #FFFFFF; font-family: Inter, system-ui, sans-serif; font-size: 24px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 29px; text-align: left; white-space: nowrap"
              >
                请输入
                确认
              </div>
            </div>
          </div>
        </div>
        <div
          data-pencil-name="按钮区"
          style="align-items: center; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 28px; height: 64px; justify-content: center; width: 100%"
          data-pencil-name="表单动作行-未输入置灰态"
          style="align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 16px; height: 112px; justify-content: flex-start; width: 820px"
        >
          <div
            data-pencil-name="重置按钮外框"
            style="align-items: center; background-color: #F5F5F5; border-radius: 20px; border: 1px solid #F5F5F5; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: 56px; justify-content: center; width: 220px"
            data-pencil-name="清空按钮-置灰"
            style="align-items: center; background-color: #F3F6FB; border-radius: 24px; border: 1px solid #E1E7F0; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: 100%; justify-content: center; width: 232px"
          >
            <div
              data-pencil-name="重置按钮文字"
              style="box-sizing: border-box; color: #666666; font-family: Inter, system-ui, sans-serif; font-size: 20px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 24px; text-align: left; white-space: nowrap"
              data-pencil-name="清空按钮文字-置灰"
              style="box-sizing: border-box; color: #A8B3C4; font-family: Inter, system-ui, sans-serif; font-size: 24px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 29px; text-align: left; white-space: nowrap"
            >
              重置
              清空
            </div>
          </div>
          <div
            data-pencil-name="激活按钮"
            style="align-items: center; background-color: #2F6BFF; border-radius: 18px; box-sizing: border-box; display: flex; flex-direction: row; flex-shrink: 0; gap: 0px; height: 56px; justify-content: center; width: 220px"
            data-pencil-name="确认按钮-未输入置灰"
            style="align-items: center; background-color: #E5EAF2; border-radius: 24px; border: 1px solid #D8DEE8; box-sizing: border-box; display: flex; flex-direction: row; flex: 1 1 0; gap: 0px; height: 100%; justify-content: center"
          >
            <div
              data-pencil-name="激活按钮文字"
              style="box-sizing: border-box; color: #FFFFFF; font-family: Inter, system-ui, sans-serif; font-size: 20px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 24px; text-align: left; white-space: nowrap"
              data-pencil-name="确认按钮文字-未输入置灰"
              style="box-sizing: border-box; color: #9AA6B8; font-family: Inter, system-ui, sans-serif; font-size: 24px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 29px; text-align: left; white-space: nowrap"
            >
              激活
              确认
            </div>
          </div>
        </div>
      </div>
      <div
        data-pencil-name="数字键盘区"
        style="align-items: flex-start; background-color: #FFFFFF; border-radius: 30px; border: 1px solid #D9E6FF; box-shadow: 0px -8px 24px 0px #0D2E8616; box-sizing: border-box; display: flex; flex-direction: column; flex-shrink: 0; gap: 0px; height: 796px; justify-content: flex-start; padding: 22px 16px 24px 16px; position: relative; width: 1008px; z-index: 4"
      >
        <div
          data-pencil-name="键盘网格"
          style="align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: column; flex: 1 1 0; gap: 18px; justify-content: flex-start; width: 100%"
        >
          <div
            data-pencil-name="键盘第1行"
            style="align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: row; flex: 1 1 0; gap: 18px; justify-content: flex-start; width: 100%"
          >
            <div
              data-pencil-name="按键1"
              style="align-items: center; background-color: #FFFFFF; border-radius: 26px; border: 1px solid #D9E1F2; box-sizing: border-box; display: flex; flex-direction: row; flex: 1 1 0; gap: 0px; height: 100%; justify-content: center"
            >
              <div
                data-pencil-name="按键1文字"
                style="box-sizing: border-box; color: #1F2A44; font-family: Inter, system-ui, sans-serif; font-size: 38px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 46px; text-align: left; white-space: nowrap"
              >
                1
              </div>
            </div>
            <div
              data-pencil-name="按键2"
              style="align-items: center; background-color: #FFFFFF; border-radius: 26px; border: 1px solid #D9E1F2; box-sizing: border-box; display: flex; flex-direction: row; flex: 1 1 0; gap: 0px; height: 100%; justify-content: center"
            >
              <div
                data-pencil-name="按键2文字"
                style="box-sizing: border-box; color: #1F2A44; font-family: Inter, system-ui, sans-serif; font-size: 38px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 46px; text-align: left; white-space: nowrap"
              >
                2
              </div>
            </div>
            <div
              data-pencil-name="按键3"
              style="align-items: center; background-color: #FFFFFF; border-radius: 26px; border: 1px solid #D9E1F2; box-sizing: border-box; display: flex; flex-direction: row; flex: 1 1 0; gap: 0px; height: 100%; justify-content: center"
            >
              <div
                data-pencil-name="按键3文字"
                style="box-sizing: border-box; color: #1F2A44; font-family: Inter, system-ui, sans-serif; font-size: 38px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 46px; text-align: left; white-space: nowrap"
              >
                3
              </div>
            </div>
          </div>
          <div
            data-pencil-name="键盘第2行"
            style="align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: row; flex: 1 1 0; gap: 18px; justify-content: flex-start; width: 100%"
          >
            <div
              data-pencil-name="按键4"
              style="align-items: center; background-color: #FFFFFF; border-radius: 26px; border: 1px solid #D9E1F2; box-sizing: border-box; display: flex; flex-direction: row; flex: 1 1 0; gap: 0px; height: 100%; justify-content: center"
            >
              <div
                data-pencil-name="按键4文字"
                style="box-sizing: border-box; color: #1F2A44; font-family: Inter, system-ui, sans-serif; font-size: 38px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 46px; text-align: left; white-space: nowrap"
              >
                4
              </div>
            </div>
            <div
              data-pencil-name="按键5"
              style="align-items: center; background-color: #FFFFFF; border-radius: 26px; border: 1px solid #D9E1F2; box-sizing: border-box; display: flex; flex-direction: row; flex: 1 1 0; gap: 0px; height: 100%; justify-content: center"
            >
              <div
                data-pencil-name="按键5文字"
                style="box-sizing: border-box; color: #1F2A44; font-family: Inter, system-ui, sans-serif; font-size: 38px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 46px; text-align: left; white-space: nowrap"
              >
                5
              </div>
            </div>
            <div
              data-pencil-name="按键6"
              style="align-items: center; background-color: #FFFFFF; border-radius: 26px; border: 1px solid #D9E1F2; box-sizing: border-box; display: flex; flex-direction: row; flex: 1 1 0; gap: 0px; height: 100%; justify-content: center"
            >
              <div
                data-pencil-name="按键6文字"
                style="box-sizing: border-box; color: #1F2A44; font-family: Inter, system-ui, sans-serif; font-size: 38px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 46px; text-align: left; white-space: nowrap"
              >
                6
              </div>
            </div>
          </div>
          <div
            data-pencil-name="键盘第3行"
            style="align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: row; flex: 1 1 0; gap: 18px; justify-content: flex-start; width: 100%"
          >
            <div
              data-pencil-name="按键7"
              style="align-items: center; background-color: #FFFFFF; border-radius: 26px; border: 1px solid #D9E1F2; box-sizing: border-box; display: flex; flex-direction: row; flex: 1 1 0; gap: 0px; height: 100%; justify-content: center"
            >
              <div
                data-pencil-name="按键7文字"
                style="box-sizing: border-box; color: #1F2A44; font-family: Inter, system-ui, sans-serif; font-size: 38px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 46px; text-align: left; white-space: nowrap"
              >
                7
              </div>
            </div>
            <div
              data-pencil-name="按键8"
              style="align-items: center; background-color: #FFFFFF; border-radius: 26px; border: 1px solid #D9E1F2; box-sizing: border-box; display: flex; flex-direction: row; flex: 1 1 0; gap: 0px; height: 100%; justify-content: center"
            >
              <div
                data-pencil-name="按键8文字"
                style="box-sizing: border-box; color: #1F2A44; font-family: Inter, system-ui, sans-serif; font-size: 38px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 46px; text-align: left; white-space: nowrap"
              >
                8
              </div>
            </div>
            <div
              data-pencil-name="按键9"
              style="align-items: center; background-color: #FFFFFF; border-radius: 26px; border: 1px solid #D9E1F2; box-sizing: border-box; display: flex; flex-direction: row; flex: 1 1 0; gap: 0px; height: 100%; justify-content: center"
            >
              <div
                data-pencil-name="按键9文字"
                style="box-sizing: border-box; color: #1F2A44; font-family: Inter, system-ui, sans-serif; font-size: 38px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 46px; text-align: left; white-space: nowrap"
              >
                9
              </div>
            </div>
          </div>
          <div
            data-pencil-name="键盘第4行"
            style="align-items: flex-start; box-sizing: border-box; display: flex; flex-direction: row; flex: 1 1 0; gap: 18px; justify-content: flex-start; width: 100%"
          >
            <div
              data-pencil-name="按键X"
              style="align-items: center; background-color: #EEF4FF; border-radius: 26px; border: 1px solid #D6E3FF; box-sizing: border-box; display: flex; flex-direction: row; flex: 1 1 0; gap: 0px; height: 100%; justify-content: center"
            >
              <div
                data-pencil-name="按键X文字"
                style="box-sizing: border-box; color: #2F6BFF; font-family: Inter, system-ui, sans-serif; font-size: 38px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 46px; text-align: left; white-space: nowrap"
              >
                X
              </div>
            </div>
            <div
              data-pencil-name="按键0"
              style="align-items: center; background-color: #FFFFFF; border-radius: 26px; border: 1px solid #D9E1F2; box-sizing: border-box; display: flex; flex-direction: row; flex: 1 1 0; gap: 0px; height: 100%; justify-content: center"
            >
              <div
                data-pencil-name="按键0文字"
                style="box-sizing: border-box; color: #1F2A44; font-family: Inter, system-ui, sans-serif; font-size: 38px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 46px; text-align: left; white-space: nowrap"
              >
                0
              </div>
            </div>
            <div
              data-pencil-name="删除按键"
              style="align-items: center; background-color: #FFF5E4; border-radius: 26px; border: 1px solid #FFDDA8; box-sizing: border-box; display: flex; flex-direction: row; flex: 1 1 0; gap: 0px; height: 100%; justify-content: center"
            >
              <div
                data-pencil-name="删除按键文字"
                style="box-sizing: border-box; color: #C47A00; font-family: Inter, system-ui, sans-serif; font-size: 34px; font-style: normal; font-weight: 700; letter-spacing: 0px; line-height: 41px; text-align: left; white-space: nowrap"
              >
                删除
              </div>
            </div>
          </div>
        </div>
src/components/StepProgress.vue
New file
@@ -0,0 +1,218 @@
<template>
  <view class="steps-card">
    <view class="steps-row">
      <template v-for="(step, index) in stepsList" :key="index">
        <view class="step-item">
          <view class="step-circle" :class="getCircleClass(index + 1)">
            <!-- 渲染当前步骤对应的图标 -->
            <template v-if="step.icon === 'qr'">
              <svg width="38" height="38" viewBox="0 0 24 24" fill="none" :stroke="getIconStroke(index + 1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                <rect x="7" y="7" width="3" height="3"></rect>
                <rect x="14" y="7" width="3" height="3"></rect>
                <rect x="7" y="14" width="3" height="3"></rect>
                <rect x="14" y="14" width="3" height="3"></rect>
              </svg>
            </template>
            <template v-else-if="step.icon === 'idcard'">
              <svg width="38" height="38" viewBox="0 0 24 24" fill="none" :stroke="getIconStroke(index + 1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M16 10h2"></path>
                <path d="M16 14h2"></path>
                <path d="M6.17 15a3 3 0 0 1 5.66 0"></path>
                <circle cx="9" cy="11" r="2"></circle>
                <rect x="2" y="5" width="20" height="14" rx="2"></rect>
              </svg>
            </template>
            <template v-else-if="step.icon === 'face'">
              <svg width="38" height="38" viewBox="0 0 24 24" fill="none" :stroke="getIconStroke(index + 1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M3 7V5a2 2 0 0 1 2-2h2"></path>
                <path d="M17 3h2a2 2 0 0 1 2 2v2"></path>
                <path d="M21 17v2a2 2 0 0 1-2 2h-2"></path>
                <path d="M7 21H5a2 2 0 0 1-2-2v-2"></path>
                <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
                <path d="M9 9h.01"></path>
                <path d="M15 9h.01"></path>
              </svg>
            </template>
            <template v-else-if="step.icon === 'user'">
              <svg width="38" height="38" viewBox="0 0 24 24" fill="none" :stroke="getIconStroke(index + 1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                <circle cx="9" cy="7" r="4"></circle>
                <polyline points="16 11 18 13 22 9"></polyline>
              </svg>
            </template>
            <template v-else-if="step.icon === 'form'">
              <svg width="38" height="38" viewBox="0 0 24 24" fill="none" :stroke="getIconStroke(index + 1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                <polyline points="14 2 14 8 20 8"></polyline>
                <line x1="16" y1="13" x2="8" y2="13"></line>
                <line x1="16" y1="17" x2="8" y2="17"></line>
                <polyline points="10 9 9 9 8 9"></polyline>
              </svg>
            </template>
            <template v-else-if="step.icon === 'print'">
              <svg width="38" height="38" viewBox="0 0 24 24" fill="none" :stroke="getIconStroke(index + 1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="6 9 6 2 18 2 18 9"></polyline>
                <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
                <rect x="6" y="14" width="12" height="8"></rect>
              </svg>
            </template>
          </view>
          <text class="step-text" :class="getTextClass(index + 1)">{{ step.text }}</text>
        </view>
        <view class="step-line" v-if="index < stepsList.length - 1">
          <image :src="getArrowSrc(index + 1)" class="arrow-img" mode="aspectFit"></image>
        </view>
      </template>
    </view>
  </view>
</template>
<script setup>
import { computed } from 'vue';
const props = defineProps({
  currentStep: {
    type: Number,
    default: 1
  },
  mode: {
    type: String,
    default: 'appointment' // 'appointment' 或 'online'
  }
});
const stepsList = computed(() => {
  if (props.mode === 'online') {
    return [
      { text: '身份证验证', icon: 'idcard' },
      { text: '人脸验证', icon: 'face' },
      { text: '接待人验证', icon: 'user' },
      { text: '完善登记信息', icon: 'form' },
      { text: '打印凭条', icon: 'print' }
    ];
  }
  return [
    { text: '预约码验证', icon: 'qr' },
    { text: '身份证验证', icon: 'idcard' },
    { text: '人脸验证', icon: 'face' },
    { text: '接待人验证', icon: 'user' },
    { text: '打印凭条', icon: 'print' }
  ];
});
const getCircleClass = (stepNum) => {
  if (stepNum < props.currentStep) return 'completed-circle';
  if (stepNum === props.currentStep) return 'active-circle';
  return 'inactive-circle';
};
const getTextClass = (stepNum) => {
  if (stepNum < props.currentStep) return 'completed-text';
  if (stepNum === props.currentStep) return 'active-text';
  return 'inactive-text';
};
const getIconStroke = (stepNum) => {
  if (stepNum < props.currentStep) return '#FFFFFF';
  if (stepNum === props.currentStep) return '#2F6BFF';
  return '#C7D7F6';
};
const getArrowSrc = (stepNum) => {
  if (stepNum < props.currentStep) {
    return '../../static/step-arrow-active.png';
  }
  return '../../static/step-arrow-inactive.png';
};
</script>
<style scoped>
/* 步骤卡片 */
.steps-card {
  width: 1008px;
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
  z-index: 1;
}
.steps-row {
  width: 100%;
  height: 138px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 120px;
}
.step-circle {
  width: 82px;
  height: 82px;
  border-radius: 41px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.completed-circle {
  background: #78A8FF;
  border: 1px solid #DDE9FF;
  box-shadow: 0px 10px 18px rgba(14, 49, 138, 0.22);
}
.active-circle {
  background: #FFFFFF;
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0px 12px 24px rgba(15, 45, 125, 0.27);
}
.inactive-circle {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0px 8px 14px rgba(8, 32, 86, 0.07);
}
.step-text {
  font-family: Inter, sans-serif;
  font-size: 23px;
  text-align: center;
  white-space: nowrap;
}
.completed-text {
  font-weight: 800;
  color: rgba(255, 255, 255, 0.94);
}
.active-text {
  font-weight: 900;
  color: #FFFFFF;
}
.inactive-text {
  font-weight: 600;
  color: rgba(226, 235, 255, 0.66);
}
.step-line {
  flex: 1;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arrow-img {
  width: 92px;
  height: 82px;
}
</style>
src/pages.json
@@ -25,14 +25,6 @@
      }
    },
    {
      "path": "pages/online-id-scan/index",
      "style": {
        "navigationStyle": "custom",
        "disableScroll": true,
        "backgroundColor": "#2550D9"
      }
    },
    {
      "path": "pages/manual-id-input/index",
      "style": {
        "navigationStyle": "custom",
@@ -41,31 +33,7 @@
      }
    },
    {
      "path": "pages/online-face-verify/index",
      "style": {
        "navigationStyle": "custom",
        "disableScroll": true,
        "backgroundColor": "#2550D9"
      }
    },
    {
      "path": "pages/online-face-collect/index",
      "style": {
        "navigationStyle": "custom",
        "disableScroll": true,
        "backgroundColor": "#2550D9"
      }
    },
    {
      "path": "pages/online-host-verify/index",
      "style": {
        "navigationStyle": "custom",
        "disableScroll": true,
        "backgroundColor": "#2550D9"
      }
    },
    {
      "path": "pages/online-print-ticket/index",
      "style": {
        "navigationStyle": "custom",
        "disableScroll": true,
src/pages/appointment-scan/index.vue
@@ -11,161 +11,572 @@
            <polyline points="15 18 9 12 15 6"></polyline>
          </svg>
        </view>
        <text class="page-title">预约签到</text>
        <text class="page-title">{{ mode === 'online' ? '现场登记' : '预约登记' }}</text>
      </view>
    </view>
    <!-- 步骤卡片 -->
    <view class="steps-card">
      <view class="steps-row">
        <!-- 步骤1: 预约码验证 (Active) -->
        <view class="step-item">
          <view class="step-circle active-circle">
            <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#2F6BFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
              <rect x="7" y="7" width="3" height="3"></rect>
              <rect x="14" y="7" width="3" height="3"></rect>
              <rect x="7" y="14" width="3" height="3"></rect>
              <rect x="14" y="14" width="3" height="3"></rect>
            </svg>
          </view>
          <text class="step-text active-text">预约码验证</text>
        </view>
        <view class="step-line">
          <image src="../../static/step-arrow-active.png" class="arrow-img" mode="aspectFit"></image>
        </view>
        <!-- 步骤2: 身份证验证 -->
        <view class="step-item">
          <view class="step-circle inactive-circle">
            <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#C7D7F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M16 10h2"></path>
              <path d="M16 14h2"></path>
              <path d="M6.17 15a3 3 0 0 1 5.66 0"></path>
              <circle cx="9" cy="11" r="2"></circle>
              <rect x="2" y="5" width="20" height="14" rx="2"></rect>
            </svg>
          </view>
          <text class="step-text inactive-text">身份证验证</text>
        </view>
        <view class="step-line">
          <image src="../../static/step-arrow-inactive.png" class="arrow-img" mode="aspectFit"></image>
        </view>
        <!-- 步骤3: 人脸验证 -->
        <view class="step-item">
          <view class="step-circle inactive-circle">
            <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#C7D7F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M3 7V5a2 2 0 0 1 2-2h2"></path>
              <path d="M17 3h2a2 2 0 0 1 2 2v2"></path>
              <path d="M21 17v2a2 2 0 0 1-2 2h-2"></path>
              <path d="M7 21H5a2 2 0 0 1-2-2v-2"></path>
              <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
              <path d="M9 9h.01"></path>
              <path d="M15 9h.01"></path>
            </svg>
          </view>
          <text class="step-text inactive-text">人脸验证</text>
        </view>
        <view class="step-line">
          <image src="../../static/step-arrow-inactive.png" class="arrow-img" mode="aspectFit"></image>
        </view>
        <!-- 步骤4: 接待人验证 -->
        <view class="step-item">
          <view class="step-circle inactive-circle">
            <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#C7D7F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
              <circle cx="9" cy="7" r="4"></circle>
              <polyline points="16 11 18 13 22 9"></polyline>
            </svg>
          </view>
          <text class="step-text inactive-text">接待人验证</text>
        </view>
        <view class="step-line">
          <image src="../../static/step-arrow-inactive.png" class="arrow-img" mode="aspectFit"></image>
        </view>
        <!-- 步骤5: 打印凭条 -->
        <view class="step-item">
          <view class="step-circle inactive-circle">
            <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#C7D7F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="6 9 6 2 18 2 18 9"></polyline>
              <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
              <rect x="6" y="14" width="12" height="8"></rect>
            </svg>
          </view>
          <text class="step-text inactive-text">打印凭条</text>
        </view>
      </view>
    </view>
    <!-- 步骤卡片组件 -->
    <StepProgress :currentStep="currentStep" :mode="mode" />
    <!-- 扫码主体区 -->
    <view class="main-card">
      <text class="main-title">请将您的预约二维码放置到扫码位置</text>
      <text class="main-desc">保持二维码完整、清晰,距离扫码口约 10-20 厘米</text>
      <!-- 设备展示区 -->
      <view class="device-area">
        <image src="../../static/device-scan.png" class="device-img" mode="aspectFit"></image>
      </view>
      <text class="helper-text">若识别失败,请调整手机亮度、避免反光,或联系工作人员协助</text>
    </view>
    <!-- 扫码页底部 -->
    <view class="bottom-area">
      <!-- 帮助提示卡 -->
      <view class="help-card">
        <view class="highlight-bar"></view>
        <view class="card-title-row">
          <view class="icon-base">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="12" y1="16" x2="12" y2="12"></line>
              <line x1="12" y1="8" x2="12.01" y2="8"></line>
            </svg>
          </view>
          <text class="card-title">扫码小贴士</text>
    <!-- 步骤: 预约码验证 -->
    <template v-if="currentStepName === 'qr'">
      <view class="main-card">
        <text class="main-title">请将您的预约二维码放置到扫码位置</text>
        <text class="main-desc">保持二维码完整、清晰,距离扫码口约 10-20 厘米</text>
        <view class="device-area">
          <image src="../../static/device-scan.png" class="device-img" mode="aspectFit"></image>
        </view>
        <text class="help-content">请使用预约成功后收到的二维码,\n保持二维码完整显示后再靠近扫码区域</text>
        <text class="helper-text">若识别失败,请调整手机亮度、避免反光,或联系工作人员协助</text>
      </view>
      <!-- 操作提示卡 -->
      <view class="action-card">
        <view class="highlight-bar"></view>
        <view class="card-title-row">
          <view class="icon-base">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="19" y1="12" x2="5" y2="12"></line>
              <polyline points="12 19 5 12 12 5"></polyline>
            </svg>
      <view class="bottom-area">
        <view class="help-card">
          <view class="highlight-bar"></view>
          <view class="card-title-row">
            <view class="icon-base">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" y1="16" x2="12" y2="12"></line>
                <line x1="12" y1="8" x2="12.01" y2="8"></line>
              </svg>
            </view>
            <text class="card-title">扫码小贴士</text>
          </view>
          <text class="card-title">需要返回?</text>
          <text class="help-content">请使用预约成功后收到的二维码,\n保持二维码完整显示后再靠近扫码区域</text>
        </view>
        <view class="main-btn" @click="goBack">
          <text class="btn-text">返回上一步</text>
        <view class="action-card">
          <view class="highlight-bar"></view>
          <view class="card-title-row">
            <view class="icon-base">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="19" y1="12" x2="5" y2="12"></line>
                <polyline points="12 19 5 12 12 5"></polyline>
              </svg>
            </view>
            <text class="card-title">需要返回?</text>
          </view>
          <view class="main-btn" @click="goBack">
            <text class="btn-text">返回上一步</text>
          </view>
          <!-- 临时测试按钮 -->
          <view class="main-btn" @click="nextStep" style="margin-top: 10px;">
            <text class="btn-text">模拟扫码成功(下一步)</text>
          </view>
        </view>
      </view>
    </view>
    </template>
    <!-- 步骤: 身份证验证 -->
    <template v-else-if="currentStepName === 'idcard'">
      <template v-if="!isManualInput">
        <view class="main-card">
          <text class="main-title">请将您的身份证放置读卡器位置</text>
          <text class="main-desc">请将身份证贴近设备感应区,系统将自动读取身份信息</text>
          <view class="name-hint-row">
            <view class="name-icon-box">
              <text class="name-icon-text">人</text>
            </view>
            <text class="name-text">姓名:张琪琦</text>
          </view>
          <view class="device-area">
            <image src="../../static/device-id-scan.png" class="device-img" mode="aspectFit"></image>
          </view>
          <text class="helper-text">若识别失败,请联系工作人员协助</text>
        </view>
        <view class="bottom-area">
          <view class="help-card">
            <view class="highlight-bar"></view>
            <view class="card-title-row">
              <view class="icon-base">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="10"></circle>
                  <line x1="12" y1="16" x2="12" y2="12"></line>
                  <line x1="12" y1="8" x2="12.01" y2="8"></line>
                </svg>
              </view>
              <text class="card-title">读卡小贴士</text>
            </view>
            <text class="help-content">请使用二代身份证原件放至读卡区位置</text>
          </view>
          <view class="action-card">
            <view class="highlight-bar"></view>
            <view class="card-title-row">
              <view class="icon-base">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <rect x="2" y="4" width="20" height="16" rx="2" ry="2"></rect>
                  <line x1="6" y1="8" x2="6.01" y2="8"></line>
                  <line x1="10" y1="8" x2="10.01" y2="8"></line>
                  <line x1="14" y1="8" x2="14.01" y2="8"></line>
                  <line x1="18" y1="8" x2="18.01" y2="8"></line>
                  <line x1="6" y1="12" x2="6.01" y2="12"></line>
                  <line x1="10" y1="12" x2="10.01" y2="12"></line>
                  <line x1="14" y1="12" x2="14.01" y2="12"></line>
                  <line x1="18" y1="12" x2="18.01" y2="12"></line>
                  <line x1="8" y1="16" x2="16" y2="16"></line>
                </svg>
              </view>
              <text class="card-title">未携带身份证?</text>
            </view>
            <view class="main-btn" @click="isManualInput = true">
              <text class="btn-text">手动录入信息</text>
            </view>
            <!-- Mock 测试下一步 -->
          <view class="mock-next-btn" @click="mockNextStep">
            <text class="mock-next-text">跳过录入(测试下一步)</text>
          </view>
          </view>
        </view>
      </template>
      <!-- 手动录入信息 UI -->
      <template v-else>
        <view class="main-card manual-card">
          <text class="main-title">手动录入身份证号</text>
          <view class="input-form-card">
            <view class="input-box">
              <text class="input-text" :class="{'placeholder': !idNumber}">{{ idNumber || '请输入您的身份证号码' }}</text>
            </view>
            <view class="input-helper-row">
              <text class="input-helper-text">请输入 18 位身份证号码,X 需大写</text>
            </view>
          </view>
          <view class="form-action-row" v-if="idNumber.length > 0">
            <view class="clear-btn" @click="clearInput">
              <text class="clear-btn-text">清空</text>
            </view>
            <view class="confirm-btn" @click="confirmManualInput">
              <text class="confirm-btn-text">确认</text>
            </view>
          </view>
          <view class="form-action-row" v-else>
            <view class="clear-btn-disabled">
              <text class="clear-btn-text-disabled">清空</text>
            </view>
            <view class="confirm-btn-disabled">
              <text class="confirm-btn-text-disabled">确认</text>
            </view>
          </view>
        </view>
        <!-- 自定义键盘 -->
        <view class="custom-keyboard">
          <view class="keyboard-grid">
            <view class="keyboard-row">
              <view class="key-btn" @click="inputKey('1')"><text class="key-text">1</text></view>
              <view class="key-btn" @click="inputKey('2')"><text class="key-text">2</text></view>
              <view class="key-btn" @click="inputKey('3')"><text class="key-text">3</text></view>
            </view>
            <view class="keyboard-row">
              <view class="key-btn" @click="inputKey('4')"><text class="key-text">4</text></view>
              <view class="key-btn" @click="inputKey('5')"><text class="key-text">5</text></view>
              <view class="key-btn" @click="inputKey('6')"><text class="key-text">6</text></view>
            </view>
            <view class="keyboard-row">
              <view class="key-btn" @click="inputKey('7')"><text class="key-text">7</text></view>
              <view class="key-btn" @click="inputKey('8')"><text class="key-text">8</text></view>
              <view class="key-btn" @click="inputKey('9')"><text class="key-text">9</text></view>
            </view>
            <view class="keyboard-row">
              <view class="key-btn key-x" @click="inputKey('X')"><text class="key-text-x">X</text></view>
              <view class="key-btn" @click="inputKey('0')"><text class="key-text">0</text></view>
              <view class="key-btn key-delete" @click="deleteKey"><text class="key-text-delete">删除</text></view>
            </view>
          </view>
        </view>
      </template>
    </template>
    <!-- 步骤: 人脸验证 -->
    <template v-else-if="currentStepName === 'face'">
      <view class="main-card">
        <view class="title-group">
          <text class="main-title">请面向屏幕完成人脸验证</text>
          <text class="sub-title">请摘下口罩和帽子,保持面部位于取景框内并正视摄像头</text>
          <view class="name-pill">
            <view class="name-icon">
              <text class="name-icon-text">人</text>
            </view>
            <text class="name-text">姓名:张琪琪</text>
          </view>
        </view>
        <view class="face-capture-card">
          <view class="status-pill">
            <view class="status-dot"></view>
            <text class="status-text">人脸比对中...</text>
          </view>
          <view class="viewfinder-area">
            <view class="viewfinder-box">
              <view class="head-ellipse"></view>
              <view class="shoulder-ellipse"></view>
              <view class="scan-line"></view>
            </view>
            <text class="viewfinder-hint">请将脸部置于框内,保持静止</text>
          </view>
          <view class="hints-row">
            <view class="hint-item">
              <view class="hint-dot" style="background: #6EA2FF;"></view>
              <text class="hint-text">请正视屏幕</text>
            </view>
            <view class="hint-item">
              <view class="hint-dot" style="background: #86C7FF;"></view>
              <text class="hint-text">保持静止 2 秒</text>
            </view>
            <view class="hint-item">
              <view class="hint-dot" style="background: #FFC36B;"></view>
              <text class="hint-text">避免逆光遮挡</text>
            </view>
          </view>
        </view>
        <text class="bottom-subtext">系统将自动完成人脸采集与比对,请勿频繁移动或离开识别区域</text>
      </view>
      <view class="bottom-area">
        <view class="help-card">
          <view class="highlight-bar"></view>
          <view class="card-title-row">
            <view class="icon-base">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" y1="16" x2="12" y2="12"></line>
                <line x1="12" y1="8" x2="12.01" y2="8"></line>
              </svg>
            </view>
            <text class="card-title">识别提示</text>
          </view>
          <text class="help-content">请确保现场光线适中,面部无遮挡;\n识别成功后系统将自动进入下一步接待人验证</text>
        </view>
        <view class="action-card">
          <view class="highlight-bar"></view>
          <view class="card-title-row">
            <view class="icon-base">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                <line x1="12" y1="17" x2="12.01" y2="17"></line>
              </svg>
            </view>
            <text class="card-title">识别失败?</text>
          </view>
          <view class="main-btn" @click="nextStep">
            <text class="btn-text">重新采集人脸(测试下一步)</text>
          </view>
        </view>
      </view>
    </template>
    <!-- 步骤: 接待人验证 -->
    <template v-else-if="currentStepName === 'host'">
      <view class="main-card">
        <view class="title-group">
          <text class="main-title">请接待人面向屏幕</text>
          <text class="sub-title">请接待人站在设备前,正视屏幕完成身份确认</text>
          <view class="name-pill">
            <view class="name-icon">
              <text class="name-icon-text">人</text>
            </view>
            <text class="name-text">姓名:张琪琪</text>
          </view>
        </view>
        <view class="face-capture-card">
          <view class="status-pill">
            <view class="status-dot"></view>
            <text class="status-text">接待人核验中...</text>
          </view>
          <view class="viewfinder-area">
            <view class="viewfinder-box">
              <view class="head-ellipse"></view>
              <view class="shoulder-ellipse"></view>
              <view class="scan-line"></view>
            </view>
            <text class="viewfinder-hint">请将脸部置于框内,保持静止</text>
          </view>
          <view class="hints-row">
            <view class="hint-item">
              <view class="hint-dot" style="background: #6EA2FF;"></view>
              <text class="hint-text">请正视屏幕</text>
            </view>
            <view class="hint-item">
              <view class="hint-dot" style="background: #86C7FF;"></view>
              <text class="hint-text">保持静止 2 秒</text>
            </view>
            <view class="hint-item">
              <view class="hint-dot" style="background: #FFC36B;"></view>
              <text class="hint-text">避免逆光遮挡</text>
            </view>
          </view>
        </view>
        <text class="bottom-subtext">系统将自动完成人脸采集与比对,请勿频繁移动或离开识别区域</text>
      </view>
      <view class="bottom-area">
        <view class="help-card">
          <view class="highlight-bar"></view>
          <view class="card-title-row">
            <view class="icon-base">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" y1="16" x2="12" y2="12"></line>
                <line x1="12" y1="8" x2="12.01" y2="8"></line>
              </svg>
            </view>
            <text class="card-title">验证提示</text>
          </view>
          <text class="help-content">请由接待人本人操作;\n接待人可以直接使用门禁卡刷卡验证</text>
        </view>
        <view class="action-card">
          <view class="highlight-bar" style="background: #6EA2FF;"></view>
          <view class="card-title-row">
            <view class="icon-base">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                <line x1="12" y1="17" x2="12.01" y2="17"></line>
              </svg>
            </view>
            <text class="card-title">验证失败?</text>
          </view>
          <view class="main-btn" @click="nextStep">
            <text class="btn-text">重新验证接待人(测试下一步)</text>
          </view>
        </view>
      </view>
    </template>
    <!-- 步骤: 完善登记信息 (现场登记特有) -->
    <template v-else-if="currentStepName === 'form'">
      <view class="main-card form-card">
        <view class="title-group">
          <text class="main-title">请完善您的登记信息</text>
          <text class="sub-title">为确保您的来访顺利,请补充以下必要信息</text>
        </view>
        <view class="form-container">
          <!-- 姓名 -->
          <view class="form-item">
            <text class="form-label">姓名</text>
            <view class="form-input readonly">
              <input class="input-field" type="text" value="张琪琦" disabled />
            </view>
          </view>
          <!-- 手机号 -->
          <view class="form-item">
            <text class="form-label">手机号<text class="required">*</text></text>
            <view class="form-input">
              <input class="input-field" type="number" placeholder="请输入手机号码" placeholder-class="placeholder" />
            </view>
          </view>
          <!-- 来访事由 -->
          <view class="form-item">
            <text class="form-label">来访事由<text class="required">*</text></text>
            <view class="form-input">
              <input class="input-field" type="text" placeholder="请输入来访事由(如:商务洽谈、面试等)" placeholder-class="placeholder" />
            </view>
          </view>
          <!-- 车牌号 (选填) -->
          <view class="form-item">
            <text class="form-label">车牌号(选填)</text>
            <view class="form-input">
              <input class="input-field" type="text" placeholder="若有车辆请填写车牌号" placeholder-class="placeholder" />
            </view>
          </view>
        </view>
      </view>
      <view class="bottom-area">
        <view class="help-card">
          <view class="highlight-bar"></view>
          <view class="card-title-row">
            <view class="icon-base">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" y1="16" x2="12" y2="12"></line>
                <line x1="12" y1="8" x2="12.01" y2="8"></line>
              </svg>
            </view>
            <text class="card-title">填写提示</text>
          </view>
          <text class="help-content">请确保填写的信息真实有效;\n带星号的为必填项</text>
        </view>
        <view class="action-card">
          <view class="highlight-bar" style="background: #6EA2FF;"></view>
          <view class="card-title-row">
            <view class="icon-base">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="20 6 9 17 4 12"></polyline>
              </svg>
            </view>
            <text class="card-title">信息已确认?</text>
          </view>
          <view class="main-btn" @click="nextStep">
            <text class="btn-text">提交信息(下一步)</text>
          </view>
        </view>
      </view>
    </template>
    <!-- 步骤: 打印凭条 -->
    <template v-else-if="currentStepName === 'print'">
      <view class="main-card">
        <text class="main-title">请等待打印凭条</text>
        <view class="print-demo-card">
          <image src="../../static/print-ticket-demo.png" class="print-demo-img" mode="aspectFit"></image>
        </view>
      </view>
      <view class="bottom-area">
        <view class="help-card">
          <view class="highlight-bar"></view>
          <view class="card-title-row">
            <view class="icon-base">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" y1="16" x2="12" y2="12"></line>
                <line x1="12" y1="8" x2="12.01" y2="8"></line>
              </svg>
            </view>
            <text class="card-title">取条提示</text>
          </view>
          <text class="help-content">请在凭条完全打印后再取走;\n如长时间未出条,请联系现场工作人员协助</text>
        </view>
        <view class="action-card">
          <view class="highlight-bar" style="background: #6EA2FF;"></view>
          <view class="card-title-row">
            <view class="icon-base">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                <line x1="12" y1="17" x2="12.01" y2="17"></line>
              </svg>
            </view>
            <text class="card-title">未打印成功?</text>
          </view>
          <view class="main-btn" @click="goNext">
            <text class="btn-text">重新打印凭条(测试完成)</text>
          </view>
        </view>
      </view>
    </template>
  </view>
</template>
<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import StepProgress from '@/components/StepProgress.vue';
const currentStep = ref(1);
const mode = ref('appointment');
// 手动录入状态
const isManualInput = ref(false);
const idNumber = ref('');
const inputKey = (key) => {
  if (idNumber.value.length < 18) {
    idNumber.value += key;
  }
};
const deleteKey = () => {
  if (idNumber.value.length > 0) {
    idNumber.value = idNumber.value.slice(0, -1);
  }
};
const clearInput = () => {
  idNumber.value = '';
};
onLoad((options) => {
  if (options.step) {
    currentStep.value = parseInt(options.step, 10);
  }
  if (options.mode) {
    mode.value = options.mode;
  }
});
const currentStepName = computed(() => {
  if (mode.value === 'appointment') {
    return ['qr', 'idcard', 'face', 'host', 'print'][currentStep.value - 1];
  } else {
    return ['idcard', 'face', 'host', 'form', 'print'][currentStep.value - 1];
  }
});
const goBack = () => {
  uni.navigateBack({
    fail: () => {
      uni.redirectTo({
        url: '/pages/home/index'
      });
    }
  if (isManualInput.value) {
    isManualInput.value = false;
    return;
  }
  if (currentStep.value > 1) {
    currentStep.value--;
  } else {
    uni.navigateBack({
      fail: () => {
        uni.redirectTo({
          url: '/pages/home/index'
        });
      }
    });
  }
};
const nextStep = () => {
  if (currentStep.value < 5) {
    currentStep.value++;
  } else {
    goNext();
  }
};
const confirmManualInput = () => {
  if (idNumber.value.length > 0) {
    isManualInput.value = false;
    nextStep();
  }
};
const mockNextStep = () => {
  isManualInput.value = false;
  nextStep();
};
const goNext = () => {
  uni.navigateTo({
    url: '/pages/online-complete/index'
  });
};
</script>
<style scoped>
/* 使用 px 单位,严格对应 1080x1920 设计稿 */
.page-container {
  width: 100%;
  height: 100%;
@@ -190,9 +601,9 @@
  pointer-events: none;
}
/* 扫码页头部 */
/* 头部 */
.header-area {
  width: 1008px; /* 1080 - 36*2 */
  width: 1008px;
  height: 88px;
  display: flex;
  align-items: center;
@@ -229,90 +640,7 @@
  line-height: 1.2;
}
/* 步骤卡片 */
.steps-card {
  width: 1008px;
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
  z-index: 1;
}
.steps-row {
  width: 100%;
  height: 138px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 120px;
}
.step-circle {
  width: 82px;
  height: 82px;
  border-radius: 41px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.active-circle {
  background: #FFFFFF;
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0px 12px 24px rgba(15, 45, 125, 0.27);
}
.inactive-circle {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0px 8px 14px rgba(8, 32, 86, 0.07);
}
.step-num {
  font-size: 30px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}
.step-text {
  font-family: Inter, sans-serif;
  font-size: 23px;
  text-align: center;
  white-space: nowrap;
}
.active-text {
  font-weight: 900;
  color: #FFFFFF;
}
.inactive-text {
  font-weight: 600;
  color: rgba(226, 235, 255, 0.66);
}
.step-line {
  flex: 1;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arrow-img {
  width: 92px;
  height: 82px;
}
/* 扫码主体区 */
/* 主体区 */
.main-card {
  width: 1008px;
  height: 1200px;
@@ -348,6 +676,7 @@
  line-height: 1.3;
}
/* 设备展示区 */
.device-area {
  width: 100%;
  height: 820px;
@@ -369,7 +698,554 @@
  text-align: center;
}
/* 扫码页底部 */
/* 身份证信息特有样式 */
.name-hint-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 26px;
}
.name-icon-box {
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #F3F6FC;
  display: flex;
  align-items: center;
  justify-content: center;
}
.name-icon-text {
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #7B88A8;
  line-height: 1.2;
}
.name-text {
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #7B88A8;
  line-height: 1.2;
}
/* 手动录入信息特有样式 */
.manual-card {
  height: 720px;
  padding: 38px 32px 28px 32px;
  gap: 40px;
}
.input-form-card {
  width: 820px;
  height: 230px;
  border-radius: 28px;
  background: #F8FAFF;
  border: 1px solid #D9E1F2;
  padding: 26px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.input-box {
  width: 100%;
  height: 118px;
  border-radius: 22px;
  background: #FFFFFF;
  border: 1px solid #D9E1F2;
  padding: 0 28px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-text {
  font-family: Inter, sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: #1F2A44;
  letter-spacing: 2px;
}
.input-text.placeholder {
  font-size: 24px;
  font-weight: 500;
  color: #A0ACC4;
  letter-spacing: normal;
}
.input-helper-row {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-helper-text {
  font-family: Inter, sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #7B88A8;
  line-height: 1.2;
}
.form-action-row {
  width: 820px;
  height: 112px;
  display: flex;
  gap: 16px;
}
.clear-btn {
  width: 232px;
  height: 100%;
  border-radius: 24px;
  background: #EEF4FF;
  border: 1px solid #D6E3FF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clear-btn-text {
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #2F6BFF;
}
.confirm-btn {
  flex: 1;
  height: 100%;
  border-radius: 24px;
  background: linear-gradient(180deg, #5A8FFF 0%, #2F6BFF 100%);
  border: 1px solid rgba(255, 255, 255, 0.33);
  box-shadow: 0px 10px 22px rgba(47, 107, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm-btn-text {
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #FFFFFF;
}
.clear-btn-disabled {
  width: 232px;
  height: 100%;
  border-radius: 24px;
  background: #F3F6FB;
  border: 1px solid #E1E7F0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clear-btn-text-disabled {
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #A8B3C4;
}
.confirm-btn-disabled {
  flex: 1;
  height: 100%;
  border-radius: 24px;
  background: #E5EAF2;
  border: 1px solid #D8DEE8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm-btn-text-disabled {
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #9AA6B8;
}
.mock-next-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -10px;
  padding: 10px;
}
.mock-next-text {
  font-family: Inter, sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #A0ACC4;
  text-decoration: underline;
}
/* 自定义键盘 */
.custom-keyboard {
  width: 1008px;
  height: 796px;
  background: #FFFFFF;
  border-radius: 30px;
  border: 1px solid #D9E6FF;
  box-shadow: 0px -8px 24px 0px rgba(13, 46, 134, 0.08);
  padding: 22px 16px 24px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  z-index: 10;
}
.keyboard-grid {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 18px;
  width: 100%;
}
.keyboard-row {
  display: flex;
  flex-direction: row;
  flex: 1;
  gap: 18px;
  width: 100%;
}
.key-btn {
  flex: 1;
  background: #FFFFFF;
  border-radius: 26px;
  border: 1px solid #D9E1F2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.key-btn:active {
  background: #E5EAF2;
}
.key-text {
  font-family: Inter, sans-serif;
  font-size: 38px;
  font-weight: 700;
  color: #1F2A44;
}
.key-x {
  background: #EEF4FF;
  border: 1px solid #D6E3FF;
}
.key-text-x {
  font-family: Inter, sans-serif;
  font-size: 38px;
  font-weight: 700;
  color: #2F6BFF;
}
.key-delete {
  background: #FFF5E4;
  border: 1px solid #FFDDA8;
}
.key-text-delete {
  font-family: Inter, sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: #C47A00;
}
.keyboard-close {
  position: absolute;
  top: -60px;
  right: 20px;
  width: 80px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 10px rgba(0,0,0,0.05);
}
/* 人脸验证特有样式 */
.title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.sub-title {
  font-family: Inter, sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: #4A5672;
  line-height: 1.3;
  margin-top: 4px;
}
.name-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.name-icon {
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #F3F6FC;
  display: flex;
  align-items: center;
  justify-content: center;
}
.face-capture-card {
  width: 880px;
  height: 876px;
  border-radius: 36px;
  background: linear-gradient(180deg, #101C3D 0%, #0A132B 100%);
  border: 1px solid #243B72;
  box-shadow: 0px 14px 34px rgba(8, 17, 38, 0.23);
  padding: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.status-pill {
  width: 236px;
  height: 52px;
  border-radius: 26px;
  background: #132852;
  border: 1px solid #2D4F8D;
  box-shadow: 0px 6px 16px rgba(11, 23, 48, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #55D6FF;
  box-shadow: 0px 0px 10px rgba(85, 214, 255, 0.4);
}
.status-text {
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #F4F8FF;
}
.viewfinder-area {
  width: 760px;
  height: 652px;
  border-radius: 32px;
  background: linear-gradient(180deg, #07111F 0%, #050A15 100%);
  border: 1px solid #223B71;
  box-shadow: 0px 10px 24px rgba(5, 10, 21, 0.2);
  padding: 24px 24px 28px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.viewfinder-box {
  width: 536px;
  height: 528px;
  border-radius: 30px;
  background: #0A1427;
  border: 2px solid #3B66B8;
  box-shadow: 0px 10px 24px rgba(10, 20, 39, 0.27);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.head-ellipse {
  width: 128px;
  height: 150px;
  border-radius: 50%;
  background: #F7FAFF;
  position: absolute;
  top: 100px;
  opacity: 0.15;
}
.shoulder-ellipse {
  width: 300px;
  height: 176px;
  border-radius: 50%;
  background: #F7FAFF;
  position: absolute;
  bottom: 0px;
  opacity: 0.15;
}
.scan-line {
  width: 372px;
  height: 5px;
  border-radius: 3px;
  background: #55D6FF;
  box-shadow: 0px 0px 12px rgba(85, 214, 255, 0.33);
  position: absolute;
  top: 50px;
  animation: scan 2s infinite alternate ease-in-out;
}
@keyframes scan {
  0% { top: 50px; }
  100% { top: 450px; }
}
.viewfinder-hint {
  font-family: Inter, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #D8E7FF;
}
.hints-row {
  width: 100%;
  height: 34px;
  display: flex;
  justify-content: center;
  gap: 18px;
}
.hint-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.hint-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.hint-text {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #DCE6FF;
}
.bottom-subtext {
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #7B88A8;
  text-align: center;
  line-height: 1.3;
}
/* 完善信息特有样式 */
.form-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 20px;
  padding: 0 40px;
  box-sizing: border-box;
}
.form-item {
  display: flex;
  align-items: center;
  gap: 24px;
}
.form-label {
  width: 220px;
  font-family: Inter, sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #1F2A44;
  flex-shrink: 0;
  text-align: right;
}
.required {
  color: #FF4D4F;
  margin-left: 4px;
}
.form-input {
  flex: 1;
  height: 88px;
  border-radius: 16px;
  border: 2px solid #DDE9FF;
  background: #FFFFFF;
  padding: 0 24px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.form-input.readonly {
  background: #F3F6FC;
  border-color: #E2EBFF;
}
.input-field {
  width: 100%;
  height: 100%;
  font-size: 24px;
  color: #1F2A44;
}
.placeholder {
  color: #A0AFC0;
}
/* 打印凭条特有样式 */
.print-demo-card {
  width: 880px;
  height: 860px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.print-demo-img {
  width: 100%;
  height: 100%;
}
/* 底部区域 */
.bottom-area {
  width: 1008px;
  height: 176px;
@@ -410,6 +1286,9 @@
}
.highlight-bar {
  position: absolute;
  top: 0;
  left: 22px;
  width: 108px;
  height: 6px;
  border-radius: 2px;
src/pages/home/index.vue
@@ -1,14 +1,14 @@
<script setup>
const goAppointment = () => {
    uni.navigateTo({
        url: '/pages/appointment-scan/index',
    })
  uni.navigateTo({
    url: '/pages/appointment-scan/index?mode=appointment&step=1',
  })
}
const goOnline = () => {
    uni.navigateTo({
        url: '/pages/online-id-scan/index',
    })
  uni.navigateTo({
    url: '/pages/appointment-scan/index?mode=online&step=1',
  })
}
</script>