提交测试版

src/pages/merit-box/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="merit-box" >
+	<div class="merit-box" :style="{height: screenHeight - root.tabHeight + 'px'}">
 		<van-nav-bar
 			left-arrow
 			v-if="$route.meta.showNavBar"
@@ -35,7 +35,7 @@
 					</swiper>
 				</div>
 			</div>
-			<div class="merit-button-group">
+			<div class="merit-button-group" :style="{bottom: tabHeight + 'px'}">
 				<button class="merit-button" @click="randVisible = true">随喜功德</button>
 			</div>
 		</div>
@@ -53,6 +53,7 @@ export default {
         swiper,
         swiperSlide
     },
+    inject: ['screenHeight', 'root'],
 	data(){
 		return {
 			query: this.$route.query,
@@ -66,6 +67,7 @@ export default {
 				{ id: 3, title: '总榜', page: 1, size: 10, list: [], },
 			],
 			containerHeight: 0,
+            tabHeight: 0,
 			info: {},
 			list: [],
 			total: 0,
@@ -91,8 +93,6 @@ export default {
 		this.width = window.innerWidth;
 		this.containerHeight = this.$refs.swiper.$el.offsetHeight;
 		this.getMeritBox();
-		this.$nextTick(() => {
-		})
 	},
 	methods: {
         onSwiper(swiper){
@@ -151,15 +151,27 @@ export default {
 
 <style lang="scss">
 .merit-box{
+    position: relative;
+    height: 100%;
 	.goods-picture{
 		vertical-align: top;
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
 	}
+    .merit-container{
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+    }
 	.merit-rank-container{
 		background: white;
 		position: relative;
-		margin-top: -.4rem;
 		border-top-left-radius: 10px;
 		border-top-right-radius: 10px;
+        margin-top: 5rem;
+        height: 65vh;
 		.head{
 			padding: .53rem .4rem;
 			padding-bottom: .13rem;
@@ -192,30 +204,30 @@ export default {
 			}
 		}
 		.body{
-			height: 80vh;
+            height: 10rem;
 			.swiper-container{
-				height: 100%;;
+				height: 100%;
 			}
 		}
 	}
 	.merit-button-group{
 		text-align: center;
-		position: fixed;
-		bottom: 0;
-		z-index: 10;
+		position: absolute;
+		z-index: 1;
 		left: 0;
 		right: 0;
 		background: white;
-		padding: .4rem 0;
+		padding-top: .2rem;
+		padding-bottom: .2rem;
 		border-top: .01rem solid #ddd;
-        padding-bottom: calc(env(safe-area-inset-bottom) + 0rem);
 		.merit-button{
 			display: inline-block;
+            vertical-align: top;
 			background: $primary-color;
 			color: white;
 			height: .93rem;
 			font-size: .37rem;
-			padding: 0 .53rem;
+			padding: 0 2rem;
 			border: .01rem solid $primary-color;
 			border-radius: $btn-border-radius;