Bit_Wise_World/src/views/user/KycForm.vue

<template>
  <div class="kyc-page">
    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-left" @click="$router.back()">
        <van-icon size="20" name="arrow-left"></van-icon>      </div>
      <div class="nav-title">KYC认证</div>
      <div class="nav-right"></div>
    </div>

    <div class="form-content">
      <!-- 姓名行 (两列布局) -->
      <div class="form-row two-col">
        <div class="form-item">
          <label>法定名</label>
          <input type="text" placeholder="名" class="custom-input" />
        </div>
        <div class="form-item">
          <label>法定姓</label>
          <input type="text" placeholder="姓" class="custom-input" />
        </div>
      </div>

      <!-- 证件类型 -->
      <div class="form-row">
        <label>证件类型</label>
        <div class="custom-select">
          <span>身份证</span>
          <svg width="12" height="12" viewBox="0 0 24 24"><path d="M6 9L12 15L18 9" stroke="#666" stroke-width="2" fill="none"/></svg>
        </div>
      </div>

      <!-- 证件号码 -->
      <div class="form-row">
        <label>证件号码</label>
        <input type="text" placeholder="请输入证件号码" class="custom-input" />
      </div>

      <!-- 出生日期 -->
      <div class="form-row">
        <label>出生日期</label>
        <input type="text" placeholder="请输入" class="custom-input" />
      </div>

      <!-- 所在地区 -->
      <div class="form-row">
        <label>所在地区</label>
        <div class="custom-select">
          <span>请选择</span>
          <svg width="12" height="12" viewBox="0 0 24 24"><path d="M6 9L12 15L18 9" stroke="#666" stroke-width="2" fill="none"/></svg>
        </div>
      </div>

      <!-- 详细地址 -->
      <div class="form-row">
        <label>详细地址</label>
        <textarea placeholder="请输入" class="custom-textarea"></textarea>
      </div>

      <!-- 职业信息 -->
      <div class="form-row">
        <label>职业信息</label>
        <input type="text" placeholder="请输入" class="custom-input" />
      </div>

      <!-- 资金来源 -->
      <div class="form-row">
        <label>资金来源</label>
        <input type="text" placeholder="请输入" class="custom-input" />
      </div>

      <!-- SSN -->
      <div class="form-row">
        <label>社会安全号码(SSN)</label>
        <input type="text" placeholder="请输入" class="custom-input" />
      </div>

      <!-- 底部说明 -->
      <div class="footer-note">
        <h4>说明</h4>
        <p>收集信息为了遵守反洗钱(AML)和金融犯罪侦查网络(FinCEN)的监管要求</p>
      </div>

      <!-- 下一步按钮 -->
      <button class="submit-btn" @click="nextStep">下一步</button>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

const nextStep = () => {
  // 校验逻辑省略...
  router.push('/kyc/step2'); // 跳转到图2
};
</script>

<style scoped>
.kyc-page {
  min-height: 100vh;
  background: #fff;
  padding-bottom: 40px;
}
.nav-bar {
  display: flex; justify-content: space-between; align-items: center;
  height: 44px; padding: 0 16px; position: sticky; top: 0; background: #fff; z-index: 10;
}
.nav-title { font-size: 18px; font-weight: 600; color: #333; }
.nav-left, .nav-right { width: 40px; }

.form-content { padding: 10px 20px; }

.form-row { margin-bottom: 20px; }
.form-row label {
  display: block; font-size: 14px; color: #333; margin-bottom: 8px; font-weight: 500;
}

/* 两列布局 */
.two-col { display: flex; gap: 15px; }
.two-col .form-item { flex: 1; }
.two-col label { margin-bottom: 8px; display: block; font-size: 14px; }

/* 输入框通用样式 */
.custom-input, .custom-select, .custom-textarea {
  width: 100%;
  background: #F7F8FA; /* 浅灰背景 */
  border: none;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
  box-sizing: border-box; /* 关键：防止padding撑大宽度 */
}
.custom-input::placeholder, .custom-textarea::placeholder { color: #999; }

/* 模拟 Select */
.custom-select {
  display: flex; justify-content: space-between; align-items: center; color: #333;
}

.custom-textarea {
  height: 80px; resize: none; font-family: inherit;
}

/* 底部说明 */
.footer-note { margin-top: 30px; margin-bottom: 30px; }
.footer-note h4 { font-size: 14px; color: #333; margin-bottom: 8px; font-weight: 500; }
.footer-note p { font-size: 12px; color: #999; line-height: 1.5; }

/* 红色大按钮 */
.submit-btn {
  width: 100%; height: 50px;
  background: #E02F44; /* 图中红色 */
  color: #fff; font-size: 16px; font-weight: 500;
  border: none; border-radius: 25px;
  margin-bottom: 20px;
}
.submit-btn:active { opacity: 0.9; }
</style>