Ver código fonte

修改详情页面样式,获取验证码

yuanmingze 3 meses atrás
pai
commit
1cb310fe6f
2 arquivos alterados com 88 adições e 70 exclusões
  1. 86 70
      src/views/invoice-information/detail.vue
  2. 2 0
      src/views/login/index.vue

+ 86 - 70
src/views/invoice-information/detail.vue

@@ -124,14 +124,15 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .tax-page {
-  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  height: 100vh; // 避免内容撑高导致页面滚动
   background: #f6f7fb;
   font-size: 3.6vw;
   color: #333;
-  display: flex;
-  flex-direction: column;
+  overflow: hidden; // 去除外层滚动条
 }
 
 .van-nav-bar {
@@ -139,32 +140,36 @@ onMounted(() => {
   border-bottom: 1px solid #f2f2f2;
   font-weight: 600;
 }
-/* 修改左侧返回图标颜色 */
+
+// 修改左侧返回图标颜色
 ::v-deep(.van-icon-arrow-left) {
-  color: #ff8036; /* 自定义颜色 */
-  font-size: 20px; /* 调整图标大小 */
+  color: #ff8036;
+  font-size: 20px;
 }
 
+// 中间内容区域:允许内部滚动
 .page-content {
-  padding: 4vw;
   flex: 1;
+  overflow-y: auto;
+  padding: 4vw;
+  box-sizing: border-box;
 }
 
-/* 骨架屏 */
+// 骨架屏
 .skeleton {
   display: flex;
   flex-direction: column;
   gap: 3vw;
+
+  .skeleton-card {
+    height: 22vw;
+    background: linear-gradient(90deg, #eee 25%, #f8f8f8 50%, #eee 75%);
+    background-size: 200% 100%;
+    border-radius: 3vw;
+    animation: shimmer 1.5s infinite linear;
+  }
 }
-.skeleton-card {
-  height: 22vw;
-  background: linear-gradient(90deg, #eee 25%, #f8f8f8 50%, #eee 75%);
-  background-size: 200% 100%;
-  border-radius: 3vw;
-}
-.shimmer {
-  animation: shimmer 1.5s infinite linear;
-}
+
 @keyframes shimmer {
   0% {
     background-position: -200% 0;
@@ -174,60 +179,65 @@ onMounted(() => {
   }
 }
 
-/* 卡片 */
+// 卡片
 .card {
   background: #fff;
   border-radius: 3vw;
   padding: 4vw;
   box-shadow: 0 1vw 3vw rgba(0, 0, 0, 0.05);
-}
-.card-title {
-  font-weight: 600;
-  font-size: 4.2vw;
-  margin-bottom: 3vw;
-  border-left: 1vw solid #ff6f00;
-  padding-left: 2vw;
-}
 
-/* 税项 */
-.tax-item + .tax-item {
-  border-top: 0.3vw solid #f0f0f0;
-}
-.tax-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 3vw 0;
-  font-size: 4vw;
-  color: #222;
-  cursor: pointer;
-}
-.tax-amount {
-  display: flex;
-  align-items: center;
-  gap: 1vw;
-  font-weight: 600;
-}
-.arrow {
-  font-size: 3.2vw;
-  color: #999;
-  transition: transform 0.3s ease;
+  .card-title {
+    font-weight: 600;
+    font-size: 4.2vw;
+    margin-bottom: 3vw;
+    border-left: 1vw solid #ff6f00;
+    padding-left: 2vw;
+  }
 }
 
-/* 展开详情 */
-.tax-detail {
-  overflow: hidden;
-}
-.tax-row {
-  display: flex;
-  justify-content: space-between;
-  color: #999;
-  font-size: 3.4vw;
-  padding: 1.5vw 0;
-  padding-left: 2vw;
+// 税项
+.tax-item {
+  + .tax-item {
+    border-top: 0.3vw solid #f0f0f0;
+  }
+
+  .tax-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 3vw 0;
+    font-size: 4vw;
+    color: #222;
+    cursor: pointer;
+
+    .tax-amount {
+      display: flex;
+      align-items: center;
+      gap: 1vw;
+      font-weight: 600;
+
+      .arrow {
+        font-size: 3.2vw;
+        color: #999;
+        transition: transform 0.3s ease;
+      }
+    }
+  }
+
+  .tax-detail {
+    overflow: hidden;
+
+    .tax-row {
+      display: flex;
+      justify-content: space-between;
+      color: #999;
+      font-size: 3.4vw;
+      padding: 1.5vw 0 1.5vw 2vw;
+    }
+  }
 }
 
-/* 动画 */
+// 动画
 .expand-enter-active,
 .expand-leave-active {
   transition:
@@ -245,23 +255,29 @@ onMounted(() => {
   opacity: 1;
 }
 
-/* 底部栏 */
+// 底部栏
 .footer {
-  height: 14vw;
+  position: sticky; // 保持底部固定
+  bottom: 0;
+  z-index: 10;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 5vw;
+  padding: 3vw 5vw;
   font-size: 4vw;
   border-top: 0.3vw solid #eee;
-}
-.footer .amount {
-  color: #e94e1b;
-  font-weight: 600;
+  box-sizing: border-box;
+  // iPhone 底部安全区
+  padding-bottom: calc(3vw + env(safe-area-inset-bottom));
+
+  .amount {
+    color: #e94e1b;
+    font-weight: 600;
+  }
 }
 
-/* 空数据 */
+// 空数据
 .empty {
   text-align: center;
   color: #aaa;

+ 2 - 0
src/views/login/index.vue

@@ -163,6 +163,8 @@ const sendCode = async () => {
   } catch (err: any) {
     toast.close()
     showFailToast(err?.message || '获取验证码失败')
+  } finally {
+    sending.value = false
   }
 }