|
|
@@ -56,7 +56,7 @@
|
|
|
<!-- 充值福利提示 -->
|
|
|
<view class="welfare-tip-container" v-if="hdInfo.balance >= 0 && (rechargeWeal == 1 || rechargeWeal == 2)">
|
|
|
<view class="welfare-tip-wrap" @click="showWelfareModal">
|
|
|
- <view class="tip-icon"></view>
|
|
|
+ <view class="tip-icon">🎁</view>
|
|
|
<view class="tip-text">充值福利</view>
|
|
|
<view class="tip-arrow"></view>
|
|
|
</view>
|
|
|
@@ -403,42 +403,8 @@ export default {
|
|
|
min-height: calc(100vh - 20upx);
|
|
|
padding-top: 20upx;
|
|
|
}
|
|
|
-.tabs-wrap {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 80upx;
|
|
|
- line-height: 80upx;
|
|
|
- text-align: center;
|
|
|
- background-color: #fff;
|
|
|
- font-size: 30upx;
|
|
|
- box-shadow: 4upx 4upx 10upx #eee;
|
|
|
-}
|
|
|
-.pay-wrap {
|
|
|
- .pay-input-wrap {
|
|
|
- background-color: #fff;
|
|
|
- border-top-left-radius: 20upx;
|
|
|
- border-top-right-radius: 20upx;
|
|
|
- padding: 50upx 80upx 28upx;
|
|
|
- margin-bottom: 0 !important;
|
|
|
- .balance {
|
|
|
- margin-top: 30upx;
|
|
|
- color: $fontColor2;
|
|
|
- }
|
|
|
- .btn-wrap {
|
|
|
- width: 100%;
|
|
|
- margin-top: 64upx;
|
|
|
- .button-com {
|
|
|
- display: block;
|
|
|
- margin-bottom: 20upx;
|
|
|
- padding-top: 40upx;
|
|
|
- padding-bottom: 40upx;
|
|
|
- font-size: 36upx;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+
|
|
|
+
|
|
|
|
|
|
// 我要配送
|
|
|
.delivery-wrap {
|
|
|
@@ -505,275 +471,154 @@ export default {
|
|
|
|
|
|
.balance-info {
|
|
|
.balance-item {
|
|
|
- &.positive {
|
|
|
- background: linear-gradient(135deg, #e8f5e8 0%, #f0f9f0 100%);
|
|
|
- border: 2upx solid #4CAF50;
|
|
|
- border-radius: 12upx;
|
|
|
- padding: 24upx;
|
|
|
+ border-radius: 12upx;
|
|
|
+ padding: 24upx;
|
|
|
+
|
|
|
+ &.positive {
|
|
|
+ background: linear-gradient(135deg, #e8f5e8 0%, #f0f9f0 100%);
|
|
|
+ border: 2upx solid #4CAF50;
|
|
|
+
|
|
|
+ .balance-label {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 8upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .balance-amount {
|
|
|
+ font-size: 52upx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #4CAF50;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.negative {
|
|
|
+ background: linear-gradient(135deg, #fef2f2 0%, #fef7f7 100%);
|
|
|
+ border: 2upx solid #f56565;
|
|
|
+
|
|
|
+ .debt-info {
|
|
|
+ margin-bottom: 20upx;
|
|
|
|
|
|
- .balance-label {
|
|
|
+ .debt-label {
|
|
|
font-size: 28upx;
|
|
|
color: #666;
|
|
|
margin-bottom: 8upx;
|
|
|
}
|
|
|
|
|
|
- .balance-amount {
|
|
|
+ .debt-amount {
|
|
|
font-size: 52upx;
|
|
|
font-weight: bold;
|
|
|
- color: #4CAF50;
|
|
|
- margin-bottom: 20upx;
|
|
|
+ color: #db5454;
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 公共的按钮样式
|
|
|
+ .action-buttons {
|
|
|
+ display: flex;
|
|
|
+ gap: 16upx;
|
|
|
+
|
|
|
+ .action-btn {
|
|
|
+ flex: 1;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8upx;
|
|
|
+ padding: 20upx 16upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.1);
|
|
|
+ transition: all 0.3s ease;
|
|
|
|
|
|
- .action-buttons {
|
|
|
- display: flex;
|
|
|
- gap: 16upx;
|
|
|
+ &:active {
|
|
|
+ transform: scale(0.95);
|
|
|
+ box-shadow: 0 1upx 4upx rgba(0, 0, 0, 0.15);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-icon {
|
|
|
+ width: 36upx;
|
|
|
+ height: 36upx;
|
|
|
+ margin-right: 10upx;
|
|
|
+ position: relative;
|
|
|
|
|
|
- .action-btn {
|
|
|
- flex: 1;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 8upx;
|
|
|
- padding: 20upx 16upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.1);
|
|
|
- transition: all 0.3s ease;
|
|
|
-
|
|
|
- &:active {
|
|
|
- transform: scale(0.95);
|
|
|
- box-shadow: 0 1upx 4upx rgba(0, 0, 0, 0.15);
|
|
|
- }
|
|
|
+ &.bill-icon {
|
|
|
+ background-color: #3b82f6;
|
|
|
+ border-radius: 5upx;
|
|
|
|
|
|
- .btn-icon {
|
|
|
- width: 36upx;
|
|
|
- height: 36upx;
|
|
|
- margin-right: 10upx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &.bill-icon {
|
|
|
- background-color: #3b82f6;
|
|
|
- border-radius: 5upx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 8upx;
|
|
|
- left: 5upx;
|
|
|
- right: 5upx;
|
|
|
- height: 3upx;
|
|
|
- background-color: white;
|
|
|
- border-radius: 1upx;
|
|
|
- }
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 16upx;
|
|
|
- left: 5upx;
|
|
|
- width: 16upx;
|
|
|
- height: 3upx;
|
|
|
- background-color: white;
|
|
|
- border-radius: 1upx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.chart-icon {
|
|
|
- border: 1upx solid #8b5cf6;
|
|
|
- border-radius: 4upx;
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- justify-content: center;
|
|
|
- padding: 3upx;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- width: 5upx;
|
|
|
- height: 12upx;
|
|
|
- background-color: #8b5cf6;
|
|
|
- margin-right: 3upx;
|
|
|
- }
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- width: 5upx;
|
|
|
- height: 20upx;
|
|
|
- background-color: #8b5cf6;
|
|
|
- }
|
|
|
- }
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 8upx;
|
|
|
+ left: 5upx;
|
|
|
+ right: 5upx;
|
|
|
+ height: 3upx;
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 1upx;
|
|
|
}
|
|
|
|
|
|
- .btn-text {
|
|
|
- font-size: 30upx;
|
|
|
- font-weight: 500;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 16upx;
|
|
|
+ left: 5upx;
|
|
|
+ width: 16upx;
|
|
|
+ height: 3upx;
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 1upx;
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ &.chart-icon {
|
|
|
+ border: 1upx solid #8b5cf6;
|
|
|
+ border-radius: 4upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 3upx;
|
|
|
|
|
|
- &.bill-btn {
|
|
|
- border: 2upx solid #3b82f6;
|
|
|
-
|
|
|
- .btn-text {
|
|
|
- color: #3b82f6;
|
|
|
- }
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ width: 5upx;
|
|
|
+ height: 12upx;
|
|
|
+ background-color: #8b5cf6;
|
|
|
+ margin-right: 3upx;
|
|
|
}
|
|
|
|
|
|
- &.detail-btn {
|
|
|
- border: 2upx solid #8b5cf6;
|
|
|
-
|
|
|
- .btn-text {
|
|
|
- color: #8b5cf6;
|
|
|
- }
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ width: 5upx;
|
|
|
+ height: 20upx;
|
|
|
+ background-color: #8b5cf6;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- &.negative {
|
|
|
- background: linear-gradient(135deg, #fef2f2 0%, #fef7f7 100%);
|
|
|
- border: 2upx solid #f56565;
|
|
|
- border-radius: 12upx;
|
|
|
- padding: 24upx;
|
|
|
|
|
|
- .debt-info {
|
|
|
- margin-bottom: 20upx;
|
|
|
-
|
|
|
- .debt-label {
|
|
|
- font-size: 28upx;
|
|
|
- color: #666;
|
|
|
- margin-bottom: 8upx;
|
|
|
- }
|
|
|
+ .btn-text {
|
|
|
+ font-size: 30upx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.bill-btn {
|
|
|
+ border: 2upx solid #3b82f6;
|
|
|
|
|
|
- .debt-amount {
|
|
|
- font-size: 52upx;
|
|
|
- font-weight: bold;
|
|
|
- color: #db5454;
|
|
|
+ .btn-text {
|
|
|
+ color: #3b82f6;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .action-buttons {
|
|
|
- display: flex;
|
|
|
- gap: 16upx;
|
|
|
+ &.detail-btn {
|
|
|
+ border: 2upx solid #8b5cf6;
|
|
|
|
|
|
- .action-btn {
|
|
|
- flex: 1;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 8upx;
|
|
|
- padding: 20upx 16upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.1);
|
|
|
- transition: all 0.3s ease;
|
|
|
-
|
|
|
- &:active {
|
|
|
- transform: scale(0.95);
|
|
|
- box-shadow: 0 1upx 4upx rgba(0, 0, 0, 0.15);
|
|
|
- }
|
|
|
-
|
|
|
- .btn-icon {
|
|
|
- width: 36upx;
|
|
|
- height: 36upx;
|
|
|
- margin-right: 10upx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &.bill-icon {
|
|
|
- background-color: #3b82f6;
|
|
|
- border-radius: 5upx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 8upx;
|
|
|
- left: 5upx;
|
|
|
- right: 5upx;
|
|
|
- height: 3upx;
|
|
|
- background-color: white;
|
|
|
- border-radius: 1upx;
|
|
|
- }
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 16upx;
|
|
|
- left: 5upx;
|
|
|
- width: 16upx;
|
|
|
- height: 3upx;
|
|
|
- background-color: white;
|
|
|
- border-radius: 1upx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.chart-icon {
|
|
|
- border: 1upx solid #8b5cf6;
|
|
|
- border-radius: 4upx;
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- justify-content: center;
|
|
|
- padding: 3upx;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- width: 5upx;
|
|
|
- height: 12upx;
|
|
|
- background-color: #8b5cf6;
|
|
|
- margin-right: 3upx;
|
|
|
- }
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- width: 5upx;
|
|
|
- height: 20upx;
|
|
|
- background-color: #8b5cf6;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .btn-text {
|
|
|
- font-size: 30upx;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
-
|
|
|
- &.bill-btn {
|
|
|
- border: 2upx solid #3b82f6;
|
|
|
-
|
|
|
- .btn-text {
|
|
|
- color: #3b82f6;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.detail-btn {
|
|
|
- border: 2upx solid #8b5cf6;
|
|
|
-
|
|
|
- .btn-text {
|
|
|
- color: #8b5cf6;
|
|
|
- }
|
|
|
- }
|
|
|
+ .btn-text {
|
|
|
+ color: #8b5cf6;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 可选优惠
|
|
|
- .discount-wrap {
|
|
|
- .module-det {
|
|
|
- padding-top: 20upx;
|
|
|
- padding-bottom: 20upx;
|
|
|
- }
|
|
|
- }
|
|
|
- // 匿名派送
|
|
|
- .none-name-delivery {
|
|
|
- // padding-left: 30upx;
|
|
|
- padding: 26upx 30upx;
|
|
|
- // margin-top: 40upx;
|
|
|
- margin-bottom: 20upx;
|
|
|
- background-color: #fff;
|
|
|
- .none-name-text {
|
|
|
- margin-left: 14upx;
|
|
|
- color: $fontColor2;
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
// 按钮
|
|
|
.btn-wrap {
|
|
|
width: calc(100% - 60upx);
|
|
|
@@ -792,43 +637,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 查看更多
|
|
|
- .view-more {
|
|
|
- width: auto;
|
|
|
- padding-bottom: 20upx;
|
|
|
- margin-bottom: 20upx;
|
|
|
- font-size: 28upx;
|
|
|
- @include disFlex(center, center);
|
|
|
- background-color: #fff;
|
|
|
- color: #666565;
|
|
|
- justify-content: flex-start;
|
|
|
- z-index:9999999;
|
|
|
- .view-more-text {
|
|
|
- margin-right: 14upx;
|
|
|
- }
|
|
|
- padding-left:40upx;
|
|
|
- i {
|
|
|
- font-size: 30upx;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- .fill-get-man{
|
|
|
- color:red;
|
|
|
- margin-left:10upx;
|
|
|
- font-weight:600;
|
|
|
- text-decoration:underline;
|
|
|
- }
|
|
|
- .pack-up{
|
|
|
- margin-left:20upx;
|
|
|
- font-weight:600;
|
|
|
- color:red;
|
|
|
- text-decoration:underline;
|
|
|
- }
|
|
|
- &.open {
|
|
|
- i {
|
|
|
- transform: rotate(180deg);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
|
|
|
// 支付确认弹框样式
|
|
|
@@ -964,33 +773,18 @@ export default {
|
|
|
}
|
|
|
|
|
|
.tip-icon {
|
|
|
- width: 28upx;
|
|
|
- height: 28upx;
|
|
|
+ font-size: 32upx;
|
|
|
margin-right: 12upx;
|
|
|
- position: relative;
|
|
|
- filter: drop-shadow(0 1upx 2upx rgba(0, 0, 0, 0.3));
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ filter: drop-shadow(0 1upx 2upx rgba(0, 0, 0, 0.1));
|
|
|
+ transition: all 0.3s ease;
|
|
|
|
|
|
- // CSS绘制礼品盒图标
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- width: 22upx;
|
|
|
- height: 16upx;
|
|
|
- background: #fff;
|
|
|
- border-radius: 2upx;
|
|
|
- top: 6upx;
|
|
|
- box-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.2);
|
|
|
- }
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- width: 3upx;
|
|
|
- height: 28upx;
|
|
|
- background: #fff;
|
|
|
- left: 12.5upx;
|
|
|
- top: 0;
|
|
|
- box-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.2);
|
|
|
+ // emoji悬停效果
|
|
|
+ &:hover {
|
|
|
+ transform: scale(1.1);
|
|
|
+ filter: drop-shadow(0 2upx 4upx rgba(0, 0, 0, 0.15));
|
|
|
}
|
|
|
}
|
|
|
|
