修复ui样式

src/views/success/loginSuccess.vue

@@ -1,69 +1,172 @@
 <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 />
 
-    <div class="content">
-      <!-- 成功图标 -->
-      <van-icon name="passed" class="success-icon" />
+    <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="title">登录成功</div>
+      <section class="info-card" aria-label="后续处理说明">
+        <p class="info-card__lead">您可以离开<span>当前页面</span>，无需一直等待。</p>
+        <p class="info-card__text">
+          开票完成后，系统会通过短信通知您；若您的登录状态失效，系统也会及时提醒您重新登录。
+        </p>
+      </section>
 
-      <!-- 描述文本 -->
-      <div class="desc">系统已恢复处理，正在为您继续完成开票。请保持当前登录状态。</div>
-      <div class="desc">如有疑问，可致电 18813119496 咨询。</div>
-    </div>
+      <a class="contact-card" href="tel:18813119496" aria-label="拨打客服电话 18813119496">
+        <van-icon name="phone-o" class="contact-card__icon" aria-hidden="true" />
+        <span>如有疑问，请致电</span>
+        <strong>18813119496</strong>
+      </a>
+    </main>
   </div>
 </template>
 
-<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>
+<script setup lang="ts"></script>
 
 <style scoped lang="scss">
 .success-page {
   min-height: 100vh;
-  background: #f6f7f9;
+  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;
-  text-align: center;
 
-  .content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding-top: 20vw;
-    padding-left: 6vw;
-    padding-right: 6vw;
+  :deep(.van-nav-bar) {
+    background: linear-gradient(90deg, #1379ec 0%, #2998ef 100%);
+    box-shadow: 0 3px 10px rgba(23, 121, 226, 0.14);
   }
 
-  .success-icon {
-    font-size: 16vw;
-    color: #0072f8; /* 微信绿 */
-    margin-bottom: 6vw;
+  :deep(.van-nav-bar::after) {
+    display: none;
   }
 
-  .title {
-    font-size: 5vw;
+  :deep(.van-nav-bar__title) {
+    color: #ffffff;
+    font-size: 18px;
     font-weight: 600;
-    color: #333;
-    margin-bottom: 4vw;
+  }
+}
+
+.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;
   }
 
-  .desc {
-    font-size: 3.8vw;
-    color: #666;
-    line-height: 1.8;
-    text-align: center;
-    width: 80vw;
+  .info-card {
+    margin-top: 30px;
+    padding-top: 21px;
+    padding-bottom: 21px;
   }
 }
 </style>