src/views/success/loginSuccess.vue

@@ -1,172 +1,70 @@
 <template>
   <div class="success-page">
-    <van-nav-bar title="登录成功" fixed placeholder safe-area-inset-top />
+    <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>
+    <div class="content">
+      <!-- 成功图标 -->
+      <van-icon name="passed" class="success-icon" />
 
-      <section class="info-card" aria-label="后续处理说明">
-        <p class="info-card__lead">您可以离开<span>当前页面</span>，无需一直等待。</p>
-        <p class="info-card__text">
-          开票完成后，系统会通过短信通知您；若您的登录状态失效，系统也会及时提醒您重新登录。
-        </p>
-      </section>
+      <!-- 标题 -->
+      <div class="title">开票申请已提交</div>
 
-      <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 class="desc">您无需进行其他操作，可放心关闭此页面。感谢支持!</div>
+      <div class="desc">如有疑问，可致电 400-639-1811 咨询。</div>
+      <div class="desc">接通后请按 1（开票业务）。</div>
+    </div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted } from 'vue'
+// import { useRouter } from 'vue-router'
+// const router = useRouter()
+
+onMounted(() => {
+  // 可选：例如 3 秒后自动跳转
+  // setTimeout(() => router.replace('/invoice-information'), 3000)
+})
+</script>
 
 <style scoped lang="scss">
 .success-page {
   min-height: 100vh;
-  min-height: 100dvh;
-  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 55%);
-  color: #222222;
+  background: #f6f7f9;
   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;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 20vw;
+    padding-left: 6vw;
+    padding-right: 6vw;
   }
 
   .success-icon {
-    margin-bottom: 22px;
-    font-size: 88px;
+    font-size: 16vw;
+    color: #0072f8; /* 微信绿 */
+    margin-bottom: 6vw;
+  }
+
+  .title {
+    font-size: 5vw;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 4vw;
   }
 
-  .info-card {
-    margin-top: 30px;
-    padding-top: 21px;
-    padding-bottom: 21px;
+  .desc {
+    font-size: 3.8vw;
+    color: #666;
+    line-height: 1.8;
+    text-align: center;
+    width: 80vw;
   }
 }
 </style>