Browse Source

提交成功页面样式文案修改

yuanmingze 1 month ago
parent
commit
b7a61a70ed
1 changed files with 57 additions and 42 deletions
  1. 57 42
      src/views/success/index.vue

+ 57 - 42
src/views/success/index.vue

@@ -2,69 +2,84 @@
   <div class="success-page">
     <van-nav-bar title="自然人开票" fixed placeholder safe-area-inset-top />
 
-    <div class="content">
-      <!-- 成功图标 -->
+    <main class="content">
       <van-icon name="passed" class="success-icon" />
 
-      <!-- 标题 -->
       <div class="title">提交成功</div>
 
-      <!-- 描述文本 -->
-      <div class="desc">
-        您的开票信息已提交税务部门审核,审核通过后通知您缴纳税金,请关注缴税信息。
+      <div class="desc">开票申请已提交税局审核,后续将由平台操作。</div>
+
+      <div class="notice">
+        <div>期间请勿登录电子税务局,</div>
+        <div>待开票完成后我们会及时通知您,感谢配合!</div>
       </div>
-    </div>
+    </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;
+  background: #f7f8fa;
   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;
-  }
-
-  .success-icon {
-    font-size: 16vw;
-    color: #0072f8; /* 微信绿 */
-    margin-bottom: 6vw;
+  :deep(.van-nav-bar) {
+    background: #ffffff;
   }
 
-  .title {
-    font-size: 5vw;
+  :deep(.van-nav-bar__title) {
+    font-size: 4.2vw;
     font-weight: 600;
-    color: #333;
-    margin-bottom: 4vw;
+    color: #333333;
   }
+}
 
-  .desc {
-    font-size: 3.8vw;
-    color: #666;
-    line-height: 1.8;
-    text-align: center;
-    width: 80vw;
-  }
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 21vw 5.6vw 0;
+}
+
+.success-icon {
+  margin-bottom: 6.5vw;
+  font-size: 17vw;
+  color: #1976e8;
+}
+
+.title {
+  margin-bottom: 6vw;
+  font-size: 5vw;
+  font-weight: 600;
+  line-height: 1.4;
+  color: #333333;
+}
+
+.desc {
+  width: 88vw;
+  margin-bottom: 6.5vw;
+  font-size: 4vw;
+  font-weight: 400;
+  line-height: 1.75;
+  color: #666666;
+  text-align: center;
+}
+
+.notice {
+  width: 86vw;
+  box-sizing: border-box;
+  padding: 4vw 3vw;
+  border-radius: 1vw;
+  background: #fff1f2;
+  color: #d9252a;
+  font-size: 4vw;
+  font-weight: 600;
+  line-height: 1.9;
+  text-align: center;
 }
 </style>