workspace/code/base-project/base-app/test3.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初次登录引导页</title>
  <style>
    /* 重置样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: #f7f7f7;
    }

    .onboarding-container {
      width: 90%;
      max-width: 400px;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      text-align: center;
      padding: 24px;
      animation: fadeIn 0.5s ease-in-out;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .onboarding-step {
      display: none;
      flex-direction: column;
      align-items: center;
    }

    .onboarding-step.active {
      display: flex;
    }

    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: #ccc;
      margin-bottom: 16px;
      overflow: hidden;
    }

    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .username {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .info-text {
      font-size: 14px;
      color: #666;
      margin-bottom: 24px;
    }

    .buttons {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }

    .btn {
      padding: 10px 20px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      font-size: 16px;
      flex: 1;
      margin: 0 4px;
    }

    .btn-primary {
      background: #4CAF50;
      color: #fff;
    }

    .btn-secondary {
      background: #e0e0e0;
      color: #333;
    }

    .progress {
      display: flex;
      justify-content: center;
      margin-top: 16px;
    }

    .dot {
      width: 10px;
      height: 10px;
      background: #ddd;
      border-radius: 50%;
      margin: 0 4px;
      transition: background 0.3s;
    }

    .dot.active {
      background: #4CAF50;
    }
  </style>
</head>

<body>

  <div class="onboarding-container">
    <!-- 步骤 1 -->
    <div class="onboarding-step active" id="step-1">
      <div class="avatar">
        <img src="https://placekitten.com/200/200" alt="头像">
      </div>
      <div class="username">张三</div>
      <div class="info-text">欢迎加入我们的平台！让我们来完成一些设置吧。</div>
      <div class="buttons">
        <button class="btn btn-secondary" disabled>上一步</button>
        <button class="btn btn-primary" onclick="nextStep()">下一步</button>
      </div>
    </div>

    <!-- 步骤 2 -->
    <div class="onboarding-step" id="step-2">
      <div class="username">选择你的兴趣</div>
      <div class="info-text">帮助我们推荐更适合你的内容</div>
      <div class="buttons">
        <button class="btn btn-secondary" onclick="prevStep()">上一步</button>
        <button class="btn btn-primary" onclick="nextStep()">下一步</button>
      </div>
    </div>

    <!-- 步骤 3 -->
    <div class="onboarding-step" id="step-3">
      <div class="username">完成！</div>
      <div class="info-text">你已经准备好开始使用了</div>
      <div class="buttons">
        <button class="btn btn-secondary" onclick="prevStep()">上一步</button>
        <button class="btn btn-primary" onclick="finishOnboarding()">开始使用</button>
      </div>
    </div>

    <!-- 进度指示器 -->
    <div class="progress">
      <div class="dot active" id="dot-1"></div>
      <div class="dot" id="dot-2"></div>
      <div class="dot" id="dot-3"></div>
    </div>
  </div>

  <script>
    let currentStep = 1;
    const totalSteps = 3;

    function showStep(step) {
      for (let i = 1; i <= totalSteps; i++) {
        const s = document.getElementById(`step-${i}`);
        const d = document.getElementById(`dot-${i}`);
        if (i === step) {
          s.classList.add('active');
          d.classList.add('active');
        } else {
          s.classList.remove('active');
          d.classList.remove('active');
        }
      }
    }

    function nextStep() {
      if (currentStep < totalSteps) {
        currentStep++;
        showStep(currentStep);
      }
    }

    function prevStep() {
      if (currentStep > 1) {
        currentStep--;
        showStep(currentStep);
      }
    }

    function finishOnboarding() {
      alert('初始化完成，进入应用！');
      // 这里可以跳转到首页或关闭引导页
    }
  </script>

</body>

</html>