|
|
@@ -129,23 +129,30 @@ onMounted(() => {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+/* ================= 页面根 ================= */
|
|
|
.tax-page {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- height: 100vh;
|
|
|
+
|
|
|
+ min-height: 100vh;
|
|
|
+ height: 100%;
|
|
|
background: #f6f7fb;
|
|
|
font-size: 3.6vw;
|
|
|
color: #333;
|
|
|
- overflow: hidden;
|
|
|
|
|
|
+ /* 给 fixed footer 预留空间 */
|
|
|
+ padding-bottom: calc(16vw + env(safe-area-inset-bottom));
|
|
|
+
|
|
|
+ /* 内容区 */
|
|
|
.page-content {
|
|
|
flex: 1;
|
|
|
overflow-y: auto;
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
padding: 4vw;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-/* 顶部 */
|
|
|
+/* ================= 顶部 ================= */
|
|
|
.van-nav-bar {
|
|
|
background: #fff;
|
|
|
border-bottom: 1px solid #f2f2f2;
|
|
|
@@ -157,7 +164,7 @@ onMounted(() => {
|
|
|
font-size: 28px;
|
|
|
}
|
|
|
|
|
|
-/* 卡片 */
|
|
|
+/* ================= 卡片 ================= */
|
|
|
.card {
|
|
|
background: #fff;
|
|
|
border-radius: 3vw;
|
|
|
@@ -224,7 +231,7 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-/* 展开动画 */
|
|
|
+/* ================= 展开动画 ================= */
|
|
|
.expand-enter-active,
|
|
|
.expand-leave-active {
|
|
|
transition:
|
|
|
@@ -244,19 +251,24 @@ onMounted(() => {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
|
|
|
-/* 底部 */
|
|
|
+/* ================= 底部汇总栏 ================= */
|
|
|
.footer {
|
|
|
- position: sticky;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
bottom: 0;
|
|
|
- z-index: 10;
|
|
|
+ z-index: 100;
|
|
|
+
|
|
|
background: #fff;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
+
|
|
|
padding: 3vw 5vw;
|
|
|
+ padding-bottom: calc(3vw + env(safe-area-inset-bottom));
|
|
|
+
|
|
|
font-size: 4vw;
|
|
|
border-top: 0.3vw solid #eee;
|
|
|
- padding-bottom: calc(3vw + env(safe-area-inset-bottom));
|
|
|
|
|
|
.amount {
|
|
|
color: #0072f8;
|
|
|
@@ -264,7 +276,7 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-/* 空态 */
|
|
|
+/* ================= 空态 ================= */
|
|
|
.empty {
|
|
|
text-align: center;
|
|
|
padding: 20vw 0;
|