Преглед на файлове

样式修改 添加覆盖

yuanmingze преди 3 месеца
родител
ревизия
d156e09521
променени са 2 файла, в които са добавени 55 реда и са изтрити 3 реда
  1. 35 2
      src/views/face-recognition/index.vue
  2. 20 1
      src/views/identity-upload/index.vue

+ 35 - 2
src/views/face-recognition/index.vue

@@ -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;

+ 20 - 1
src/views/identity-upload/index.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="identity-page">
-    <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="upload-section">
@@ -203,6 +210,7 @@ const handleNext = async () => {
 /** 防抖包装 */
 const handleNextDebounced = useDebounceFn(handleNext, 1000)
 
+const onClickLeft = () => history.back()
 /** 下一步按钮点击 */
 
 onMounted(async () => {
@@ -220,6 +228,17 @@ onMounted(async () => {
   color: #333;
 }
 
+.van-nav-bar {
+  background-color: #fff;
+  border-bottom: 1px solid #f2f2f2;
+  font-weight: 600;
+}
+
+/* 修改左侧返回图标颜色与大小 */
+:deep(.van-icon-arrow-left) {
+  color: #ff8036;
+  font-size: 28px;
+}
 /* 上传区域 */
 .upload-section {
   display: flex;