fix: 优化页面UI及修复安全区域占位符问题
- 将“进展状态”文案统一改为“活动进展”以提升一致性 - 在商品详情页添加安全区域占位符,防止底部内容被遮挡 - 优化用户功德组件样式,调整日期显示格式和布局 - 更新构建产物引用路径
This commit is contained in:
@@ -41,6 +41,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="safe-inset-placeholder"></div>
|
||||
|
||||
<fixed-bottom ref="fixedBottom">
|
||||
<div class="customer-absolute">
|
||||
@@ -151,6 +152,9 @@ export default {
|
||||
}
|
||||
return (parseInt(this.priceUnit * 100, 10) * this.quantity) / 100;
|
||||
},
|
||||
safeInsetBottomHeight() {
|
||||
return this.$store.state.safeInsetBottomHeight;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getGoodsDetail("common");
|
||||
@@ -159,6 +163,15 @@ export default {
|
||||
this.observer.disconnect();
|
||||
},
|
||||
methods: {
|
||||
checkPlaceholderHeight() {
|
||||
const el = document.querySelector(".safe-inset-placeholder");
|
||||
const rect = el.getBoundingClientRect();
|
||||
if (rect.height > 0) {
|
||||
el.parentNode.removeChild(el);
|
||||
} else {
|
||||
el.style.height = "1rem";
|
||||
}
|
||||
},
|
||||
initObserver() {
|
||||
this.observer = new ObserverInteraction();
|
||||
|
||||
@@ -242,6 +255,7 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50;
|
||||
this.initObserver();
|
||||
this.checkPlaceholderHeight();
|
||||
});
|
||||
this.wechatReady({
|
||||
...this.data.shareConfig,
|
||||
@@ -272,6 +286,10 @@ export default {
|
||||
<style lang="scss">
|
||||
$lightWidth: 1.3rem;
|
||||
.goods-detail {
|
||||
.safe-inset-placeholder {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
}
|
||||
.goods-content {
|
||||
padding-left: 0.3rem;
|
||||
padding-right: 0.3rem;
|
||||
|
||||
Reference in New Issue
Block a user