|
|
@@ -1,7 +1,14 @@
|
|
|
<template>
|
|
|
<div class="face-recognition">
|
|
|
<!-- 顶部导航 -->
|
|
|
- <van-nav-bar title="自然人开票" fixed placeholder safe-area-inset-top />
|
|
|
+ <van-nav-bar
|
|
|
+ title="自然人开票"
|
|
|
+ left-arrow
|
|
|
+ @click-left="onClickLeft"
|
|
|
+ fixed
|
|
|
+ placeholder
|
|
|
+ safe-area-inset-top
|
|
|
+ />
|
|
|
|
|
|
<!-- 步骤卡片 -->
|
|
|
<div class="card">
|
|
|
@@ -10,6 +17,7 @@
|
|
|
|
|
|
<!-- iframe 容器 -->
|
|
|
<div class="iframe-page">
|
|
|
+ <div class="iframe-mask"></div>
|
|
|
<iframe
|
|
|
:src="etsUrl"
|
|
|
frameborder="0"
|
|
|
@@ -46,6 +54,8 @@ const getConfirmInvoiceInfo = async () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+const onClickLeft = () => history.back()
|
|
|
+
|
|
|
onBeforeMount(() => {
|
|
|
getConfirmInvoiceInfo()
|
|
|
})
|
|
|
@@ -56,7 +66,7 @@ onBeforeMount(() => {
|
|
|
height: 100dvh;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- background: #f5f6f8;
|
|
|
+ background: #fff;
|
|
|
font-family:
|
|
|
-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei',
|
|
|
sans-serif;
|
|
|
@@ -66,6 +76,18 @@ onBeforeMount(() => {
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
+.van-nav-bar {
|
|
|
+ background-color: #fff;
|
|
|
+ border-bottom: 1px solid #f2f2f2;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+/* 修改左侧返回图标颜色与大小 */
|
|
|
+:deep(.van-icon-arrow-left) {
|
|
|
+ color: #ff8036;
|
|
|
+ font-size: 28px;
|
|
|
+}
|
|
|
+
|
|
|
/* 顶部步骤进度卡片 */
|
|
|
.card {
|
|
|
background: #fff;
|
|
|
@@ -91,6 +113,17 @@ onBeforeMount(() => {
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
+/* 遮罩层 */
|
|
|
+.iframe-mask {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 3vw; // 根据实际导航高度调整
|
|
|
+ background: #fff; // 或与你页面背景一致的颜色
|
|
|
+ z-index: 999;
|
|
|
+ pointer-events: none; // 保证不影响 iframe 内部点击
|
|
|
+}
|
|
|
/* iframe 内容 */
|
|
|
.iframe {
|
|
|
position: absolute;
|