fix: 优化页面UI及修复安全区域占位符问题
- 将“进展状态”文案统一改为“活动进展”以提升一致性 - 在商品详情页添加安全区域占位符,防止底部内容被遮挡 - 优化用户功德组件样式,调整日期显示格式和布局 - 更新构建产物引用路径
This commit is contained in:
@@ -5,14 +5,13 @@
|
|||||||
<div>
|
<div>
|
||||||
<div class="name">
|
<div class="name">
|
||||||
<span>{{ data.merit_name || data.nickname || data.user_info.nickname }}</span>
|
<span>{{ data.merit_name || data.nickname || data.user_info.nickname }}</span>
|
||||||
<!-- <span>{{data.user_info.region}}</span>-->
|
|
||||||
</div>
|
</div>
|
||||||
<p class="goods_name">{{ data.goods_name }}</p>
|
<p class="goods_name">{{ data.goods_name }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="result">
|
<div class="result">
|
||||||
<p class="money">已参与</p>
|
<p class="money">已参与</p>
|
||||||
<span class="date">{{ data.paid_at }}</span>
|
<span class="date">{{ format(data.paid_at) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -26,6 +25,11 @@ export default {
|
|||||||
avatar: "/touxiang.png",
|
avatar: "/touxiang.png",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
format(time) {
|
||||||
|
return time ? time.slice(0, 10) : "";
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -45,27 +49,16 @@ export default {
|
|||||||
.name {
|
.name {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
margin-bottom: 0.27rem;
|
margin-bottom: 0.2rem;
|
||||||
span:first-child {
|
font-size: 0.4rem;
|
||||||
font-size: 0.4rem;
|
|
||||||
color: #222;
|
|
||||||
vertical-align: top;
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 0.4rem;
|
|
||||||
line-height: 1.3;
|
|
||||||
}
|
|
||||||
span:last-child {
|
|
||||||
font-size: 0.32rem;
|
|
||||||
color: #666;
|
|
||||||
vertical-align: text-bottom;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
p.goods_name {
|
p.goods_name {
|
||||||
font-size: 0.32rem;
|
font-size: 0.34rem;
|
||||||
max-width: 4rem;
|
max-width: 8rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
overflow-x: hidden;
|
||||||
|
color: #666;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -82,7 +75,7 @@ export default {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.date {
|
.date {
|
||||||
font-size: 0.3rem;
|
font-size: 0.34rem;
|
||||||
color: #888;
|
color: #888;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -41,6 +41,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="safe-inset-placeholder"></div>
|
||||||
|
|
||||||
<fixed-bottom ref="fixedBottom">
|
<fixed-bottom ref="fixedBottom">
|
||||||
<div class="customer-absolute">
|
<div class="customer-absolute">
|
||||||
@@ -151,6 +152,9 @@ export default {
|
|||||||
}
|
}
|
||||||
return (parseInt(this.priceUnit * 100, 10) * this.quantity) / 100;
|
return (parseInt(this.priceUnit * 100, 10) * this.quantity) / 100;
|
||||||
},
|
},
|
||||||
|
safeInsetBottomHeight() {
|
||||||
|
return this.$store.state.safeInsetBottomHeight;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getGoodsDetail("common");
|
this.getGoodsDetail("common");
|
||||||
@@ -159,6 +163,15 @@ export default {
|
|||||||
this.observer.disconnect();
|
this.observer.disconnect();
|
||||||
},
|
},
|
||||||
methods: {
|
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() {
|
initObserver() {
|
||||||
this.observer = new ObserverInteraction();
|
this.observer = new ObserverInteraction();
|
||||||
|
|
||||||
@@ -242,6 +255,7 @@ export default {
|
|||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50;
|
this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50;
|
||||||
this.initObserver();
|
this.initObserver();
|
||||||
|
this.checkPlaceholderHeight();
|
||||||
});
|
});
|
||||||
this.wechatReady({
|
this.wechatReady({
|
||||||
...this.data.shareConfig,
|
...this.data.shareConfig,
|
||||||
@@ -272,6 +286,10 @@ export default {
|
|||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
$lightWidth: 1.3rem;
|
$lightWidth: 1.3rem;
|
||||||
.goods-detail {
|
.goods-detail {
|
||||||
|
.safe-inset-placeholder {
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
padding-bottom: constant(safe-area-inset-bottom);
|
||||||
|
}
|
||||||
.goods-content {
|
.goods-content {
|
||||||
padding-left: 0.3rem;
|
padding-left: 0.3rem;
|
||||||
padding-right: 0.3rem;
|
padding-right: 0.3rem;
|
||||||
|
|||||||
@@ -69,13 +69,13 @@
|
|||||||
<div class="divider"></div>
|
<div class="divider"></div>
|
||||||
<div class="panel temple-home-activity">
|
<div class="panel temple-home-activity">
|
||||||
<div class="panel-head">
|
<div class="panel-head">
|
||||||
<span class="title">进展状态</span>
|
<span class="title">活动进展</span>
|
||||||
<arrow-more @click="onMoreProcess"></arrow-more>
|
<arrow-more @click="onMoreProcess"></arrow-more>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body goods-panel-body">
|
<div class="panel-body goods-panel-body">
|
||||||
<buddha-process v-for="process in data.dynamic_data" :key="process.id" :data="process"></buddha-process>
|
<buddha-process v-for="process in data.dynamic_data" :key="process.id" :data="process"></buddha-process>
|
||||||
<div class="process-more" @click="onMoreProcess">
|
<div class="process-more" @click="onMoreProcess">
|
||||||
<span>查看更多进展状态</span>
|
<span>查看更多活动进展</span>
|
||||||
<i class="iconfont icon-arrow-right"></i>
|
<i class="iconfont icon-arrow-right"></i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+1
-1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user