From b916fb416c25a7e11c25fb62bc83f2f3434778d0 Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期五, 07 三月 2025 15:31:15 +0800
Subject: [PATCH] fix: 对接
---
packages/components/package.json | 2
apps/taro/src/components/Layout/PageLayout.vue | 2
packages/components/src/styles/nut.scss | 2
packages/components/src/styles/orderCard.scss | 1
packages/components/src/views/Order/components/ElectricOrder.vue | 5 +
packages/components/src/components/InfiniteLoading/InfiniteLoading.vue | 1
packages/components/src/styles/components.scss | 78 +++++++++----------
packages/components/src/styles/layout.scss | 15 +--
packages/components/src/styles/loading.scss | 10 +-
packages/components/src/views/Order/components/PhoneOrder.vue | 5 +
packages/components/src/styles/index.scss | 25 ++++++
packages/components/src/styles/rechargeGrid.scss | 53 ++++++------
12 files changed, 114 insertions(+), 85 deletions(-)
diff --git a/apps/taro/src/components/Layout/PageLayout.vue b/apps/taro/src/components/Layout/PageLayout.vue
index 1b283f0..4396c42 100644
--- a/apps/taro/src/components/Layout/PageLayout.vue
+++ b/apps/taro/src/components/Layout/PageLayout.vue
@@ -119,7 +119,7 @@
@import '@/styles/common.scss';
.page-layout-wrapper {
- // background-color: $body-background-color;
+ /* background-color: $body-background-color; */
.page-layout-scroll-view-wrapper {
display: flex;
diff --git a/packages/components/package.json b/packages/components/package.json
index 17902f5..5fc367e 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -43,6 +43,7 @@
"@life-payment/core-vue": "workspace:^",
"@nutui/icons-vue-taro": "0.0.9",
"@nutui/nutui-taro": "4.3.13",
+ "@tarojs/components": "3.6.20",
"@tarojs/taro": "3.6.20",
"@vitejs/plugin-vue": "^5.1.4",
"@vitejs/plugin-vue-jsx": "^4.0.1",
@@ -54,6 +55,7 @@
"peerDependencies": {
"@life-payment/core-vue": "*",
"@nutui/nutui-taro": "*",
+ "@tarojs/components": "*",
"@tarojs/taro": "*",
"vue": "*"
}
diff --git a/packages/components/src/components/InfiniteLoading/InfiniteLoading.vue b/packages/components/src/components/InfiniteLoading/InfiniteLoading.vue
index 0d387e7..a02c2e4 100644
--- a/packages/components/src/components/InfiniteLoading/InfiniteLoading.vue
+++ b/packages/components/src/components/InfiniteLoading/InfiniteLoading.vue
@@ -65,6 +65,7 @@
import { Loading } from '@nutui/icons-vue-taro';
import { useScrollDistance } from 'senin-mini/hooks';
import IconBackTop from '../../assets/icon-back-top.png';
+import { ScrollView } from '@tarojs/components';
defineOptions({
name: 'InfiniteLoading',
diff --git a/packages/components/src/styles/components.scss b/packages/components/src/styles/components.scss
index 14cffc3..4a4951f 100644
--- a/packages/components/src/styles/components.scss
+++ b/packages/components/src/styles/components.scss
@@ -1,48 +1,47 @@
-/*postcss-pxtransform disable*/
@use './common.scss' as *;
.recharge-tips-view {
- padding: 16px;
- border-radius: 12px;
+ padding: 32px;
+ border-radius: 24px;
background: linear-gradient(0deg, rgba(10, 90, 255, 0.04), rgba(10, 90, 255, 0.04)), #fff;
.recharge-tips-title {
color: #1f2229;
- font-size: 14px;
+ font-size: 24px;
font-weight: 700;
- line-height: 18px;
- padding: 4px 0 12px 0;
+ line-height: 36px;
+ padding: 8px 0 24px 0;
border-bottom: 1px solid boleGetCssVar('color', 'primary');
}
.recharge-tips-content {
color: boleGetCssVar('text-color', 'regular');
- font-size: 13px;
+ font-size: 26px;
font-weight: 400;
- line-height: 21px;
- padding-top: 16px;
+ line-height: 42px;
+ padding-top: 32px;
.recharge-tips-top {
color: #e03e2d;
- font-size: 18px;
+ font-size: 36px;
}
}
}
.confirm-dialog-content {
.confirm-dialog-content-tips {
- margin-bottom: 16px;
+ margin-bottom: 32px;
}
.confirm-dialog-content-info {
- padding: 12px;
- border-radius: 8px;
+ padding: 24px;
+ border-radius: 16px;
background: #f0f3fa;
- margin-bottom: 8px;
+ margin-bottom: 16px;
.confirm-dialog-content-info-item {
display: flex;
- margin-bottom: 10px;
+ margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
@@ -50,7 +49,7 @@
.confirm-dialog-content-info-item-label {
color: boleGetCssVar('text-color', 'regular');
- margin-right: 6px;
+ margin-right: 12px;
}
.confirm-dialog-content-info-item-content {
@@ -72,29 +71,29 @@
.confirm-dialog-content-warning {
color: boleGetCssVar('color', 'danger');
text-align: left;
- font-size: 16px;
- line-height: 20px;
+ font-size: 32px;
+ line-height: 40px;
}
}
.select-pay-type-view {
.select-pay-type-view-item-icon {
- width: 32px;
- height: 32px;
- margin-right: 12px;
+ width: 64px;
+ height: 64px;
+ margin-right: 24px;
}
.select-pay-type-view-item {
- padding-left: 20px;
+ padding-left: 40px;
display: flex;
align-items: center;
- height: 80px;
+ height: 160px;
border: 1px solid #e2e5eb;
- border-radius: 8px;
+ border-radius: 16px;
background-color: #fff;
- margin-bottom: 16px;
+ margin-bottom: 32px;
cursor: pointer;
- font-size: 16px;
+ font-size: 32px;
color: boleGetCssVar('text-color', 'primary');
}
}
@@ -103,26 +102,26 @@
// padding:;
.recharge-result-view-title {
- font-size: 18px;
+ font-size: 36px;
color: boleGetCssVar('text-color', 'primary');
font-weight: 600;
- margin-bottom: 12px;
+ margin-bottom: 24px;
text-align: center;
- line-height: 24px;
+ line-height: 48px;
}
.recharge-result-view-tips {
- margin-bottom: 12px;
- font-size: 16px;
+ margin-bottom: 24px;
+ font-size: 32px;
color: boleGetCssVar('color', 'danger');
- line-height: 20px;
+ line-height: 40px;
}
.recharge-result-view-warning {
- margin-bottom: 20px;
- font-size: 12px;
+ margin-bottom: 40px;
+ font-size: 24px;
color: boleGetCssVar('color', 'warning');
- line-height: 16px;
+ line-height: 32px;
}
.recharge-result-view-btn-wrapper {
@@ -130,14 +129,13 @@
justify-content: center;
.recharge-result-view-btn {
- padding: 0 20px;
- font-size: 16px;
+ padding: 0 40px;
+ font-size: 32px;
color: boleGetCssVar('color', 'primary');
- line-height: 16px;
+ line-height: 32px;
}
}
}
-
.loading-more-tips {
color: boleGetCssVar('text-color', 'primary');
@@ -203,4 +201,4 @@
// height: 23px;
margin-left: 18px;
color: boleGetCssVar('text-color', 'primary');
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/styles/index.scss b/packages/components/src/styles/index.scss
index 47b0734..8ba9564 100644
--- a/packages/components/src/styles/index.scss
+++ b/packages/components/src/styles/index.scss
@@ -26,3 +26,28 @@
--nut-badge-background-color: #{map.get($bole-colors, 'danger')};
}
+
+@mixin lifeListScrollViewWithNoPadding {
+ flex: 1;
+ min-height: 0;
+ box-sizing: border-box;
+ background-color: map-get($bole-colors, 'body-background-color');
+}
+
+@mixin lifeListScrollView {
+ padding: 0 map-get($bole-size, 'body-padding-h');
+ @include lifeListScrollViewWithNoPadding;
+}
+
+.life-infinite-scroll-list-no-padding {
+ @include lifeListScrollViewWithNoPadding;
+}
+
+.life-infinite-scroll-list {
+ @include lifeListScrollView;
+}
+
+.life-page-infinite-scroll-list {
+ @include lifeListScrollView;
+ padding-top: 16px;
+}
diff --git a/packages/components/src/styles/layout.scss b/packages/components/src/styles/layout.scss
index 04cd800..a547f29 100644
--- a/packages/components/src/styles/layout.scss
+++ b/packages/components/src/styles/layout.scss
@@ -1,27 +1,26 @@
-/*postcss-pxtransform disable*/
@use './common.scss' as *;
.main-cell-container {
- padding-top: 92px;
+ padding-top: 184px;
.main-cell-wrapper {
padding: boleGetCssVar('size', 'body-padding-h');
- padding-top: 24px;
- border-radius: 15px;
+ padding-top: 48px;
+ border-radius: 30px;
background: #ffffff;
- box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
+ box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.05);
.main-cell-title {
- font-size: 20px;
+ font-size: 40px;
font-weight: 600;
text-align: center;
color: #000000;
- line-height: 28px;
+ line-height: 56px;
}
.main-cell-icon {
display: flex;
justify-content: center;
- margin-top: 20px;
+ margin-top: 40px;
}
}
}
diff --git a/packages/components/src/styles/loading.scss b/packages/components/src/styles/loading.scss
index b5dacbe..6fb4dfe 100644
--- a/packages/components/src/styles/loading.scss
+++ b/packages/components/src/styles/loading.scss
@@ -9,26 +9,26 @@
flex-direction: column;
.no-data-img {
- width: 284px;
- height: 202px;
+ width: 568px;
+ height: 404px;
}
.no-data-text {
- font-size: 20px;
+ font-size: 40px;
color: #333333;
line-height: 2.4;
}
}
.loading-layout-loading-content-wrapper {
- padding: 40px;
+ padding: 80px;
display: flex;
justify-content: center;
align-items: center;
.nut-icon {
color: boleGetCssVar('text-color', 'primary');
- margin-right: 8px;
+ margin-right: 16rpx;
}
.list-empty-hint-text {
diff --git a/packages/components/src/styles/nut.scss b/packages/components/src/styles/nut.scss
index f3da60f..4839c5a 100644
--- a/packages/components/src/styles/nut.scss
+++ b/packages/components/src/styles/nut.scss
@@ -1,5 +1,3 @@
-/*postcss-pxtransform disable*/
-
@use './function.scss' as *;
@use './hairline.scss' as *;
diff --git a/packages/components/src/styles/orderCard.scss b/packages/components/src/styles/orderCard.scss
index fa5da9f..904e0e5 100644
--- a/packages/components/src/styles/orderCard.scss
+++ b/packages/components/src/styles/orderCard.scss
@@ -5,6 +5,7 @@
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
+ background-color: #fff;
&:last-child {
margin-bottom: 0;
diff --git a/packages/components/src/styles/rechargeGrid.scss b/packages/components/src/styles/rechargeGrid.scss
index b23d556..aa9ae8e 100644
--- a/packages/components/src/styles/rechargeGrid.scss
+++ b/packages/components/src/styles/rechargeGrid.scss
@@ -1,19 +1,18 @@
-/*postcss-pxtransform disable*/
@use './common.scss' as *;
.recharge-grid-wrapper {
padding-left: 0 !important;
- margin-top: 20px;
+ margin-top: 40px;
.recharge-grid-item {
.nut-grid-item__text {
- font-size: 18px;
+ font-size: 36rpx;
color: boleGetCssVar('text-color', 'primary');
}
.recharge-grid-item-icon {
- width: 32px;
- height: 32px;
+ width: 64px;
+ height: 64px;
}
}
}
@@ -26,16 +25,16 @@
width: 100%;
display: grid !important;
grid-template-columns: repeat(3, 1fr);
- grid-gap: 10px;
+ grid-gap: 20px;
.parValue-item {
margin-right: 0;
.nut-radio__button {
width: 100%;
- padding: 8px 0;
+ padding: 16rpx 0;
background-color: transparent;
- border: 0.5px solid #e2e5eb;
+ border: 1rpx solid #e2e5eb;
text-align: center;
border-radius: 4px;
position: relative;
@@ -47,7 +46,7 @@
overflow: hidden;
&::after {
- border-radius: 4px;
+ border-radius: 8rpx;
background-color: rgba(251, 81, 0, 0.08);
opacity: 1;
}
@@ -68,51 +67,51 @@
.amount-wrapper {
display: flex;
align-items: flex-end;
- margin-bottom: 2px;
+ margin-bottom: 4px;
.amount {
- font-size: 20px;
+ font-size: 40px;
font-weight: 400;
- line-height: 22px;
+ line-height: 44px;
}
.unit {
- font-size: 12px;
+ font-size: 24px;
font-weight: 400;
- line-height: 16px;
+ line-height: 32px;
}
}
.price-wrapper {
display: flex;
color: #858d98;
- font-size: 12px;
+ font-size: 24px;
font-weight: 400;
- line-height: 16px;
+ line-height: 32px;
.price {
color: #fb5100;
- margin-left: 3px;
+ margin-left: 6px;
}
}
.discountTag {
display: none;
position: absolute;
- padding: 1px 4px;
- border-radius: 0px 0 10px 0;
- border: 0.5px solid #fb5100;
+ padding: 2px 8px;
+ border-radius: 0px 0 20px 0;
+ border: 1px solid #fb5100;
background: linear-gradient(
186deg,
rgba(255, 129, 45, 0.08) 14.82%,
rgba(238, 67, 67, 0.08) 91.5%
);
color: #fb5100;
- font-size: 11px;
+ font-size: 22px;
font-weight: 700;
- line-height: 14px;
+ line-height: 28px;
position: absolute;
- top: -1px;
- left: -1px;
+ top: -2px;
+ left: -2px;
}
}
}
@@ -121,12 +120,12 @@
.order-bill-recharge {
.recharge-button {
width: 100%;
- margin: 20px 0;
+ margin: 40px 0;
.recharge-button-inner {
display: flex;
.recharge-button-text {
- margin-left: 10px;
+ margin-left: 20px;
}
}
}
@@ -134,7 +133,7 @@
&.electric {
.nut-dialog {
.nut-dialog__content {
- max-height: 700px;
+ max-height: 1400rpx;
}
}
}
diff --git a/packages/components/src/views/Order/components/ElectricOrder.vue b/packages/components/src/views/Order/components/ElectricOrder.vue
index 6e02b51..3d1347b 100644
--- a/packages/components/src/views/Order/components/ElectricOrder.vue
+++ b/packages/components/src/views/Order/components/ElectricOrder.vue
@@ -1,5 +1,8 @@
<template>
- <InfiniteLoading scrollViewClassName="common-infinite-scroll-list" v-bind="infiniteLoadingProps">
+ <InfiniteLoading
+ scrollViewClassName="life-page-infinite-scroll-list"
+ v-bind="infiniteLoadingProps"
+ >
<template #renderItem="{ item }">
<OrderCard
title="鐢佃垂鍏呭��"
diff --git a/packages/components/src/views/Order/components/PhoneOrder.vue b/packages/components/src/views/Order/components/PhoneOrder.vue
index 1dadc9a..db8ebc4 100644
--- a/packages/components/src/views/Order/components/PhoneOrder.vue
+++ b/packages/components/src/views/Order/components/PhoneOrder.vue
@@ -1,5 +1,8 @@
<template>
- <InfiniteLoading scrollViewClassName="common-infinite-scroll-list" v-bind="infiniteLoadingProps">
+ <InfiniteLoading
+ scrollViewClassName="life-page-infinite-scroll-list"
+ v-bind="infiniteLoadingProps"
+ >
<template #renderItem="{ item }">
<OrderCard
title="璇濊垂鍏呭��"
--
Gitblit v1.9.1