From 758d8056dc3dbc6bf92c298aa3627e66b933b5a0 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期四, 22 五月 2025 13:25:21 +0800
Subject: [PATCH] feat: UI
---
apps/h5/src/components/PageFooter/PageFooter.vue | 147 ++++--------------------------------------------
1 files changed, 13 insertions(+), 134 deletions(-)
diff --git a/apps/h5/src/components/PageFooter/PageFooter.vue b/apps/h5/src/components/PageFooter/PageFooter.vue
index e10f059..7a3f326 100644
--- a/apps/h5/src/components/PageFooter/PageFooter.vue
+++ b/apps/h5/src/components/PageFooter/PageFooter.vue
@@ -20,158 +20,37 @@
});
</script>
-<style lang="scss">
-@import '@/styles/common.scss';
+<style lang="scss" scoped>
+@use '@/style/common.scss' as *;
.page-footer {
- /* height: 112px; */
- background-color: #fff;
- // position: fixed;
- // bottom: 0;
- width: 100%;
- display: flex;
- box-shadow: $base-footer-box-shadow;
position: relative;
z-index: 1;
-
- // padding-bottom: constant(safe-area-inset-bottom);
- // padding-bottom: env(safe-area-inset-bottom);
-
- // z-index: 10000;
+ display: flex;
+ width: 100%;
+ background-color: #ffffff;
+ box-shadow: 0px -5px 20px 0px rgba(0, 0, 0, 0.15);
&::after {
- content: '';
position: absolute;
- left: 0;
right: 0;
bottom: 0;
- transform: translateY(100%);
+ left: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
- background-color: #fff;
+ background-color: #ffffff;
+ content: '';
+ transform: translateY(100%);
}
.page-footer-inner {
- padding: 24px 0;
- width: 100%;
display: flex;
- box-sizing: border-box;
align-items: center;
- }
-
- &.isOnlyAction {
- .page-footer-inner {
- padding: 16px 0;
- align-items: flex-start;
- }
- }
-
- .is-button-footer {
- display: flex;
+ padding: 12px 0;
width: 100%;
- height: 100%;
- padding: 25px 30px;
box-sizing: border-box;
-
- .common-page-footer-btn-group {
- margin: 0 -12rpx;
- display: flex;
- width: calc(100% + 24rpx);
- }
-
- .nut-button {
- flex: 1;
- margin: 0 12rpx;
- height: 100%;
- font-size: 32rpx;
- border-radius: 10rpx;
- border: none;
- font-weight: 400;
-
- &.cancel-btn {
- color: boleGetCssVar('text-color', 'primary') !important;
- }
-
- &.confirm-btn {
- box-shadow: 0px 3px 7px 0px rgba(240, 67, 73, 0.35);
- }
- }
- }
-
- .common-page-footer {
- display: flex;
- width: 100%;
- height: 100%;
- align-items: center;
-
- .common-page-footer-actions {
- flex: 1;
- display: flex;
- justify-content: space-around;
- min-width: 0;
- padding-right: 20px;
-
- .common-page-footer-action {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-
- .common-page-footer-action-icon {
- width: 35px;
- height: 35px;
- margin-bottom: 14px;
- }
-
- .common-page-footer-action-text {
- line-height: 1;
- font-size: 22px;
- color: #1b232f;
- }
- }
- }
-
- .common-page-footer-btn-group {
- display: flex;
- margin: 0 -20rpx;
- width: auto;
-
- .nut-button {
- margin: 0 20rpx;
- }
-
- &.small {
- margin: 0 -12rpx;
-
- .nut-button {
- margin: 0 12rpx;
- }
- }
-
- .one-btn {
- width: 364px;
- font-size: 26px;
- border-radius: 36px;
- }
- }
-
- .common-page-footer-btn-badge {
- z-index: 10;
- }
-
- .common-page-footer-btn {
- width: 200px;
- height: 80px;
- border-radius: 10px;
- min-width: 0;
- font-size: 32px;
- flex: none;
- }
-
- .contact-btn {
- margin: 0;
- margin-left: 20px;
- }
}
}
</style>
+
+<style lang="scss"></style>
--
Gitblit v1.9.1