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