|
@@ -451,8 +451,10 @@ export default {
|
|
|
.button-com {
|
|
.button-com {
|
|
|
display: block;
|
|
display: block;
|
|
|
margin-bottom: 20upx;
|
|
margin-bottom: 20upx;
|
|
|
- padding-top: 30upx;
|
|
|
|
|
- padding-bottom: 30upx;
|
|
|
|
|
|
|
+ padding-top: 40upx;
|
|
|
|
|
+ padding-bottom: 40upx;
|
|
|
|
|
+ font-size: 36upx;
|
|
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -523,252 +525,252 @@ export default {
|
|
|
|
|
|
|
|
.balance-info {
|
|
.balance-info {
|
|
|
.balance-item {
|
|
.balance-item {
|
|
|
- &.positive {
|
|
|
|
|
- background: linear-gradient(135deg, #e8f5e8 0%, #f0f9f0 100%);
|
|
|
|
|
- border: 2upx solid #4CAF50;
|
|
|
|
|
- border-radius: 12upx;
|
|
|
|
|
- padding: 24upx;
|
|
|
|
|
-
|
|
|
|
|
- .balance-label {
|
|
|
|
|
- font-size: 28upx;
|
|
|
|
|
- color: #666;
|
|
|
|
|
- margin-bottom: 8upx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .balance-amount {
|
|
|
|
|
- font-size: 52upx;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- color: #4CAF50;
|
|
|
|
|
- margin-bottom: 20upx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .action-buttons {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- gap: 16upx;
|
|
|
|
|
|
|
+ &.positive {
|
|
|
|
|
+ background: linear-gradient(135deg, #e8f5e8 0%, #f0f9f0 100%);
|
|
|
|
|
+ border: 2upx solid #4CAF50;
|
|
|
|
|
+ border-radius: 12upx;
|
|
|
|
|
+ padding: 24upx;
|
|
|
|
|
+
|
|
|
|
|
+ .balance-label {
|
|
|
|
|
+ font-size: 28upx;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ margin-bottom: 8upx;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- .action-btn {
|
|
|
|
|
- flex: 1;
|
|
|
|
|
- background-color: #fff;
|
|
|
|
|
- border-radius: 8upx;
|
|
|
|
|
- padding: 16upx 12upx;
|
|
|
|
|
|
|
+ .balance-amount {
|
|
|
|
|
+ font-size: 52upx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #4CAF50;
|
|
|
|
|
+ margin-bottom: 20upx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .action-buttons {
|
|
|
display: flex;
|
|
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);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ gap: 16upx;
|
|
|
|
|
|
|
|
- .btn-icon {
|
|
|
|
|
- width: 28upx;
|
|
|
|
|
- height: 28upx;
|
|
|
|
|
- margin-right: 8upx;
|
|
|
|
|
- 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;
|
|
|
|
|
|
|
|
- &.bill-icon {
|
|
|
|
|
- background-color: #3b82f6;
|
|
|
|
|
- border-radius: 4upx;
|
|
|
|
|
- position: relative;
|
|
|
|
|
-
|
|
|
|
|
- &::before {
|
|
|
|
|
- content: '';
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 6upx;
|
|
|
|
|
- left: 4upx;
|
|
|
|
|
- right: 4upx;
|
|
|
|
|
- height: 2upx;
|
|
|
|
|
- background-color: white;
|
|
|
|
|
- border-radius: 1upx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- &::after {
|
|
|
|
|
- content: '';
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 12upx;
|
|
|
|
|
- left: 4upx;
|
|
|
|
|
- width: 12upx;
|
|
|
|
|
- height: 2upx;
|
|
|
|
|
- background-color: white;
|
|
|
|
|
- border-radius: 1upx;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &:active {
|
|
|
|
|
+ transform: scale(0.95);
|
|
|
|
|
+ box-shadow: 0 1upx 4upx rgba(0, 0, 0, 0.15);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- &.chart-icon {
|
|
|
|
|
- border: 1upx solid #8b5cf6;
|
|
|
|
|
- border-radius: 3upx;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: flex-end;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- padding: 2upx;
|
|
|
|
|
|
|
+ .btn-icon {
|
|
|
|
|
+ width: 36upx;
|
|
|
|
|
+ height: 36upx;
|
|
|
|
|
+ margin-right: 10upx;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
|
|
|
- &::before {
|
|
|
|
|
- content: '';
|
|
|
|
|
- width: 4upx;
|
|
|
|
|
- height: 10upx;
|
|
|
|
|
- background-color: #8b5cf6;
|
|
|
|
|
- margin-right: 2upx;
|
|
|
|
|
|
|
+ &.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;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- &::after {
|
|
|
|
|
- content: '';
|
|
|
|
|
- width: 4upx;
|
|
|
|
|
- height: 16upx;
|
|
|
|
|
- background-color: #8b5cf6;
|
|
|
|
|
|
|
+ &.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: 26upx;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- &.bill-btn {
|
|
|
|
|
- border: 2upx solid #3b82f6;
|
|
|
|
|
|
|
|
|
|
.btn-text {
|
|
.btn-text {
|
|
|
- color: #3b82f6;
|
|
|
|
|
|
|
+ font-size: 30upx;
|
|
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- &.detail-btn {
|
|
|
|
|
- border: 2upx solid #8b5cf6;
|
|
|
|
|
|
|
|
|
|
- .btn-text {
|
|
|
|
|
- color: #8b5cf6;
|
|
|
|
|
|
|
+ &.bill-btn {
|
|
|
|
|
+ border: 2upx solid #3b82f6;
|
|
|
|
|
+
|
|
|
|
|
+ .btn-text {
|
|
|
|
|
+ color: #3b82f6;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.detail-btn {
|
|
|
|
|
+ border: 2upx solid #8b5cf6;
|
|
|
|
|
+
|
|
|
|
|
+ .btn-text {
|
|
|
|
|
+ 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;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &.negative {
|
|
|
|
|
+ background: linear-gradient(135deg, #fef2f2 0%, #fef7f7 100%);
|
|
|
|
|
+ border: 2upx solid #f56565;
|
|
|
|
|
+ border-radius: 12upx;
|
|
|
|
|
+ padding: 24upx;
|
|
|
|
|
|
|
|
- .debt-amount {
|
|
|
|
|
- font-size: 52upx;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- color: #db5454;
|
|
|
|
|
|
|
+ .debt-info {
|
|
|
|
|
+ margin-bottom: 20upx;
|
|
|
|
|
+
|
|
|
|
|
+ .debt-label {
|
|
|
|
|
+ font-size: 28upx;
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ margin-bottom: 8upx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .debt-amount {
|
|
|
|
|
+ font-size: 52upx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #db5454;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .action-buttons {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- gap: 16upx;
|
|
|
|
|
|
|
|
|
|
- .action-btn {
|
|
|
|
|
- flex: 1;
|
|
|
|
|
- background-color: #fff;
|
|
|
|
|
- border-radius: 8upx;
|
|
|
|
|
- padding: 16upx 12upx;
|
|
|
|
|
|
|
+ .action-buttons {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.1);
|
|
|
|
|
- transition: all 0.3s ease;
|
|
|
|
|
|
|
+ gap: 16upx;
|
|
|
|
|
|
|
|
- &:active {
|
|
|
|
|
- transform: scale(0.95);
|
|
|
|
|
- box-shadow: 0 1upx 4upx rgba(0, 0, 0, 0.15);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .btn-icon {
|
|
|
|
|
- width: 28upx;
|
|
|
|
|
- height: 28upx;
|
|
|
|
|
- margin-right: 8upx;
|
|
|
|
|
- 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;
|
|
|
|
|
|
|
|
- &.bill-icon {
|
|
|
|
|
- background-color: #3b82f6;
|
|
|
|
|
- border-radius: 4upx;
|
|
|
|
|
- position: relative;
|
|
|
|
|
-
|
|
|
|
|
- &::before {
|
|
|
|
|
- content: '';
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 6upx;
|
|
|
|
|
- left: 4upx;
|
|
|
|
|
- right: 4upx;
|
|
|
|
|
- height: 2upx;
|
|
|
|
|
- background-color: white;
|
|
|
|
|
- border-radius: 1upx;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- &::after {
|
|
|
|
|
- content: '';
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- top: 12upx;
|
|
|
|
|
- left: 4upx;
|
|
|
|
|
- width: 12upx;
|
|
|
|
|
- height: 2upx;
|
|
|
|
|
- background-color: white;
|
|
|
|
|
- border-radius: 1upx;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ &:active {
|
|
|
|
|
+ transform: scale(0.95);
|
|
|
|
|
+ box-shadow: 0 1upx 4upx rgba(0, 0, 0, 0.15);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- &.chart-icon {
|
|
|
|
|
- border: 1upx solid #8b5cf6;
|
|
|
|
|
- border-radius: 3upx;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: flex-end;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- padding: 2upx;
|
|
|
|
|
|
|
+ .btn-icon {
|
|
|
|
|
+ width: 36upx;
|
|
|
|
|
+ height: 36upx;
|
|
|
|
|
+ margin-right: 10upx;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
|
|
|
- &::before {
|
|
|
|
|
- content: '';
|
|
|
|
|
- width: 4upx;
|
|
|
|
|
- height: 10upx;
|
|
|
|
|
- background-color: #8b5cf6;
|
|
|
|
|
- margin-right: 2upx;
|
|
|
|
|
|
|
+ &.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;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- &::after {
|
|
|
|
|
- content: '';
|
|
|
|
|
- width: 4upx;
|
|
|
|
|
- height: 16upx;
|
|
|
|
|
- background-color: #8b5cf6;
|
|
|
|
|
|
|
+ &.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: 26upx;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- &.bill-btn {
|
|
|
|
|
- border: 2upx solid #3b82f6;
|
|
|
|
|
|
|
|
|
|
.btn-text {
|
|
.btn-text {
|
|
|
- color: #3b82f6;
|
|
|
|
|
|
|
+ font-size: 30upx;
|
|
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- &.detail-btn {
|
|
|
|
|
- border: 2upx solid #8b5cf6;
|
|
|
|
|
|
|
|
|
|
- .btn-text {
|
|
|
|
|
- color: #8b5cf6;
|
|
|
|
|
|
|
+ &.bill-btn {
|
|
|
|
|
+ border: 2upx solid #3b82f6;
|
|
|
|
|
+
|
|
|
|
|
+ .btn-text {
|
|
|
|
|
+ color: #3b82f6;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.detail-btn {
|
|
|
|
|
+ border: 2upx solid #8b5cf6;
|
|
|
|
|
+
|
|
|
|
|
+ .btn-text {
|
|
|
|
|
+ color: #8b5cf6;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -800,8 +802,10 @@ export default {
|
|
|
.button-com {
|
|
.button-com {
|
|
|
display: block;
|
|
display: block;
|
|
|
margin-bottom: 20upx;
|
|
margin-bottom: 20upx;
|
|
|
- padding-top: 30upx;
|
|
|
|
|
- padding-bottom: 30upx;
|
|
|
|
|
|
|
+ padding-top: 40upx;
|
|
|
|
|
+ padding-bottom: 40upx;
|
|
|
|
|
+ font-size: 36upx;
|
|
|
|
|
+ font-weight: 500;
|
|
|
&:last-child {
|
|
&:last-child {
|
|
|
margin-bottom: 0;
|
|
margin-bottom: 0;
|
|
|
}
|
|
}
|
|
@@ -941,114 +945,138 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-// 充值福利提示样式 - 居中小巧版
|
|
|
|
|
|
|
+// 充值福利提示样式 - 超亮眼版
|
|
|
.welfare-tip-container {
|
|
.welfare-tip-container {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
- margin: 15upx 20upx;
|
|
|
|
|
|
|
+ margin: 20upx 20upx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.welfare-tip-wrap {
|
|
.welfare-tip-wrap {
|
|
|
- background: linear-gradient(135deg, #ff4757 0%, #ff6b7a 100%);
|
|
|
|
|
- border-radius: 28upx;
|
|
|
|
|
- padding: 12upx 20upx;
|
|
|
|
|
|
|
+ background: linear-gradient(45deg, #ff1744, #ff6ec7);
|
|
|
|
|
+ border-radius: 35upx;
|
|
|
|
|
+ padding: 18upx 28upx;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- box-shadow: 0 2upx 8upx rgba(255, 71, 87, 0.4);
|
|
|
|
|
transition: all 0.3s ease;
|
|
transition: all 0.3s ease;
|
|
|
position: relative;
|
|
position: relative;
|
|
|
width: fit-content;
|
|
width: fit-content;
|
|
|
- max-width: 240upx;
|
|
|
|
|
|
|
+ max-width: 300upx;
|
|
|
|
|
+ border: 2upx solid rgba(255, 255, 255, 0.3);
|
|
|
|
|
|
|
|
&::before {
|
|
&::before {
|
|
|
content: '';
|
|
content: '';
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- top: -2upx;
|
|
|
|
|
- right: -2upx;
|
|
|
|
|
- width: 12upx;
|
|
|
|
|
- height: 12upx;
|
|
|
|
|
- background: #ffff00;
|
|
|
|
|
|
|
+ top: -3upx;
|
|
|
|
|
+ right: -3upx;
|
|
|
|
|
+ width: 16upx;
|
|
|
|
|
+ height: 16upx;
|
|
|
|
|
+ background: radial-gradient(circle, #ffff00 0%, #ff8c00 70%);
|
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
|
- border: 1upx solid #fff;
|
|
|
|
|
- animation: pulse 2s infinite;
|
|
|
|
|
|
|
+ border: 2upx solid #fff;
|
|
|
|
|
+ animation: bounce 1.5s infinite, sparkle 2s infinite;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
&:active {
|
|
&:active {
|
|
|
transform: scale(0.95);
|
|
transform: scale(0.95);
|
|
|
- box-shadow: 0 1upx 4upx rgba(255, 71, 87, 0.5);
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.tip-icon {
|
|
.tip-icon {
|
|
|
- width: 24upx;
|
|
|
|
|
- height: 24upx;
|
|
|
|
|
- margin-right: 10upx;
|
|
|
|
|
|
|
+ width: 28upx;
|
|
|
|
|
+ height: 28upx;
|
|
|
|
|
+ margin-right: 12upx;
|
|
|
position: relative;
|
|
position: relative;
|
|
|
|
|
+ filter: drop-shadow(0 1upx 2upx rgba(0, 0, 0, 0.3));
|
|
|
|
|
|
|
|
// CSS绘制礼品盒图标
|
|
// CSS绘制礼品盒图标
|
|
|
&::before {
|
|
&::before {
|
|
|
content: '';
|
|
content: '';
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- width: 18upx;
|
|
|
|
|
- height: 14upx;
|
|
|
|
|
|
|
+ width: 22upx;
|
|
|
|
|
+ height: 16upx;
|
|
|
background: #fff;
|
|
background: #fff;
|
|
|
border-radius: 2upx;
|
|
border-radius: 2upx;
|
|
|
- top: 5upx;
|
|
|
|
|
|
|
+ top: 6upx;
|
|
|
|
|
+ box-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&::after {
|
|
&::after {
|
|
|
content: '';
|
|
content: '';
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- width: 2upx;
|
|
|
|
|
- height: 24upx;
|
|
|
|
|
|
|
+ width: 3upx;
|
|
|
|
|
+ height: 28upx;
|
|
|
background: #fff;
|
|
background: #fff;
|
|
|
- left: 11upx;
|
|
|
|
|
|
|
+ left: 12.5upx;
|
|
|
top: 0;
|
|
top: 0;
|
|
|
|
|
+ box-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.tip-text {
|
|
.tip-text {
|
|
|
- font-size: 28upx;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
|
|
+ font-size: 34upx;
|
|
|
|
|
+ font-weight: 600;
|
|
|
color: #fff;
|
|
color: #fff;
|
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|
|
|
|
|
+ text-shadow: 0 1upx 3upx rgba(0, 0, 0, 0.3);
|
|
|
|
|
+ letter-spacing: 1upx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.tip-arrow {
|
|
.tip-arrow {
|
|
|
- width: 14upx;
|
|
|
|
|
- height: 14upx;
|
|
|
|
|
- margin-left: 8upx;
|
|
|
|
|
|
|
+ width: 16upx;
|
|
|
|
|
+ height: 16upx;
|
|
|
|
|
+ margin-left: 10upx;
|
|
|
position: relative;
|
|
position: relative;
|
|
|
|
|
+ filter: drop-shadow(0 1upx 2upx rgba(0, 0, 0, 0.3));
|
|
|
|
|
|
|
|
// CSS绘制箭头
|
|
// CSS绘制箭头
|
|
|
&::before {
|
|
&::before {
|
|
|
content: '';
|
|
content: '';
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- width: 7upx;
|
|
|
|
|
- height: 7upx;
|
|
|
|
|
- border-right: 2upx solid #fff;
|
|
|
|
|
- border-bottom: 2upx solid #fff;
|
|
|
|
|
|
|
+ width: 8upx;
|
|
|
|
|
+ height: 8upx;
|
|
|
|
|
+ border-right: 3upx solid #fff;
|
|
|
|
|
+ border-bottom: 3upx solid #fff;
|
|
|
transform: rotate(-45deg);
|
|
transform: rotate(-45deg);
|
|
|
- top: 3upx;
|
|
|
|
|
- left: 3upx;
|
|
|
|
|
|
|
+ top: 4upx;
|
|
|
|
|
+ left: 4upx;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-@keyframes pulse {
|
|
|
|
|
|
|
+// 动画效果集合
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+@keyframes bounce {
|
|
|
|
|
+ 0%, 20%, 50%, 80%, 100% {
|
|
|
|
|
+ transform: translateY(0) scale(1);
|
|
|
|
|
+ }
|
|
|
|
|
+ 40% {
|
|
|
|
|
+ transform: translateY(-4upx) scale(1.1);
|
|
|
|
|
+ }
|
|
|
|
|
+ 60% {
|
|
|
|
|
+ transform: translateY(-2upx) scale(1.05);
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+@keyframes sparkle {
|
|
|
0% {
|
|
0% {
|
|
|
- transform: scale(1);
|
|
|
|
|
opacity: 1;
|
|
opacity: 1;
|
|
|
|
|
+ transform: rotate(0deg);
|
|
|
}
|
|
}
|
|
|
50% {
|
|
50% {
|
|
|
- transform: scale(1.2);
|
|
|
|
|
opacity: 0.7;
|
|
opacity: 0.7;
|
|
|
|
|
+ transform: rotate(180deg);
|
|
|
}
|
|
}
|
|
|
100% {
|
|
100% {
|
|
|
- transform: scale(1);
|
|
|
|
|
opacity: 1;
|
|
opacity: 1;
|
|
|
|
|
+ transform: rotate(360deg);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
// 福利选择弹框样式
|
|
// 福利选择弹框样式
|
|
|
.welfare-modal-content {
|
|
.welfare-modal-content {
|
|
|
padding: 40upx;
|
|
padding: 40upx;
|
