修改商品详情按钮距离底部距离

3 years ago · e6b8ba64be
parent df8bf7fcec
commit e6b8ba64be
2 changed files with 15 additions and 7 deletions
--- a/index.html
+++ b/index.html
@ -1,3 +1,10 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-05 10:57:05
+ * @LastEditors: ch
+ * @LastEditTime: 2022-05-05 16:53:23
+ * @Description: file content
+-->
 <!DOCTYPE html>
 <html lang="en">
  <head>
@ -14,7 +21,6 @@
    <!--app-context-->
  </head>
  <body>
-	  <div>sdfadsfasd</div>
    <div id="app"><!--app-html--></div>
    <script type="module" src="/main.js"></script>
  </body>
--- a/pages/goods/detail/index.vue
+++ b/pages/goods/detail/index.vue
@ -2,7 +2,7 @@
 * @Author: ch
 * @Date: 2022-03-23 17:27:21
 * @LastEditors: ch
- * @LastEditTime: 2022-05-05 16:14:29
+ * @LastEditTime: 2022-05-05 17:19:09
 * @Description: file content
 -->
 <template>
@ -205,8 +205,10 @@ page {
 	padding: 20rpx;
 }
 .footer{
-	height: 206rpx;
-	padding: 0 30rpx 68rpx 30rpx;
+	padding: 30rpx;
+	padding-bottom: calc(constant(safe-area-inset-bottom) + 50rpx) ;
+	padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
+	// box-sizing: border-box;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@ -214,8 +216,6 @@ page {
 	bottom: 0;
 	left: 0;
 	right: 0;
-	padding-bottom: constant(safe-area-inset-bottom);
-	padding-bottom: env(safe-area-inset-bottom);
 	border-top-left-radius: 24rpx;
 	border-top-right-radius: 24rpx;
 	background: $color-grey0;
@ -228,7 +228,9 @@ page {
 		color: $color-grey0;
 		text-align: center;
 		position: fixed;
-		bottom: 206rpx;
+		z-index: 9;
+		bottom: calc(180rpx + constant(safe-area-inset-bottom)) ;
+		bottom: calc(180rpx + env(safe-area-inset-bottom));
 	}
 	&--left{
 		display: flex;