hcp_h5/src/views/success/loginSuccess.vue

<template>
  <div class="success-page">
    <van-nav-bar title="登录成功" fixed placeholder safe-area-inset-top />

    <main class="content">
      <section class="success-hero" aria-labelledby="success-title">
        <van-icon name="passed" class="success-icon" aria-hidden="true" />
        <h1 id="success-title" class="title">您已重新登录</h1>
        <p class="subtitle">系统将继续为您完成开票</p>
      </section>

      <section class="info-card" aria-label="后续处理说明">
        <p class="info-card__lead">您可以离开<span>当前页面</span>，无需一直等待。</p>
        <p class="info-card__text">
          开票完成后，系统会通过短信通知您；若您的登录状态失效，系统也会及时提醒您重新登录。
        </p>
      </section>

      <a class="contact-card" href="tel:400-639-1811" aria-label="拨打客服电话 400-639-1811">
        <van-icon name="phone-o" class="contact-card__icon" aria-hidden="true" />
        <span>如有疑问，请致电</span>
        <strong>400-639-1811</strong>
      </a>
    </main>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.success-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 55%);
  color: #222222;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei',
    sans-serif;

  :deep(.van-nav-bar) {
    background: linear-gradient(90deg, #1379ec 0%, #2998ef 100%);
    box-shadow: 0 3px 10px rgba(23, 121, 226, 0.14);
  }

  :deep(.van-nav-bar::after) {
    display: none;
  }

  :deep(.van-nav-bar__title) {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
  }
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  min-height: calc(100dvh - 46px - var(--safe-top));
  padding: 64px 16px calc(24px + env(safe-area-inset-bottom));
}

.success-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.success-icon {
  display: block;
  margin-bottom: 32px;
  color: #2088ed;
  font-size: 108px;
  line-height: 1;
  filter: drop-shadow(0 8px 12px rgba(32, 136, 237, 0.12));
}

.title {
  margin: 0;
  color: #202020;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1px;
}

.subtitle {
  margin: 10px 0 0;
  color: #666666;
  font-size: 16px;
  line-height: 1.6;
}

.info-card {
  box-sizing: border-box;
  width: 100%;
  margin-top: 44px;
  padding: 25px 22px;
  border: 1px solid rgba(32, 136, 237, 0.1);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(42, 82, 124, 0.11);
}

.info-card__lead {
  margin: 0;
  color: #222222;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.75;
}

.info-card__lead span {
  color: #136fd1;
  font-weight: 600;
}

.info-card__text {
  margin: 16px 0 0;
  color: #444444;
  font-size: 15px;
  line-height: 1.85;
}

.contact-card {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  margin-top: 20px;
  padding: 10px 0;
  color: #333333;
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
}

.contact-card__icon {
  margin-right: 7px;
  color: #2088ed;
  font-size: 18px;
}

.contact-card strong {
  margin-left: 6px;
  color: #1266bc;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

@media (max-height: 680px) {
  .content {
    padding-top: 38px;
  }

  .success-icon {
    margin-bottom: 22px;
    font-size: 88px;
  }

  .info-card {
    margin-top: 30px;
    padding-top: 21px;
    padding-bottom: 21px;
  }
}
</style>