162 lines
2.4 KiB
SCSS
162 lines
2.4 KiB
SCSS
/* 支付倒计时样式 */
|
||
|
||
/* 徽章模式样式 */
|
||
.payment-countdown-badge {
|
||
display: inline-block;
|
||
background: linear-gradient(135deg, #ff4757, #ff3838);
|
||
color: white;
|
||
padding: 4px 8px;
|
||
border-radius: 12px;
|
||
font-weight: 500;
|
||
box-shadow: 0 2px 4px rgba(255, 71, 87, 0.3);
|
||
margin-left: 8px;
|
||
|
||
.countdown-text {
|
||
color: white;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 紧急状态（少于1小时） */
|
||
&.urgent {
|
||
color: #ff6b6b;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
/* 非常紧急状态（少于10分钟） */
|
||
&.critical {
|
||
color: #c44569;
|
||
animation: flash 1s infinite;
|
||
}
|
||
|
||
/* 过期状态 */
|
||
&.expired {
|
||
color: #95a5a6;
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
/* 纯文本模式样式 */
|
||
.payment-countdown-text {
|
||
color: #ff4757;
|
||
font-weight: 500;
|
||
|
||
/* 紧急状态 */
|
||
&.urgent {
|
||
color: #ff6b6b;
|
||
animation: textPulse 2s infinite;
|
||
}
|
||
|
||
/* 非常紧急状态 */
|
||
&.critical {
|
||
color: #ff4757;
|
||
animation: textFlash 1s infinite;
|
||
}
|
||
|
||
/* 过期状态 */
|
||
&.expired {
|
||
color: #95a5a6;
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
/* 动画效果 */
|
||
@keyframes pulse {
|
||
0% {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
opacity: 0.8;
|
||
transform: scale(1.02);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
@keyframes flash {
|
||
0% {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
25% {
|
||
opacity: 0.7;
|
||
transform: scale(1.05);
|
||
}
|
||
50% {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
75% {
|
||
opacity: 0.7;
|
||
transform: scale(1.05);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
@keyframes textPulse {
|
||
0% { opacity: 1; }
|
||
50% { opacity: 0.7; }
|
||
100% { opacity: 1; }
|
||
}
|
||
|
||
@keyframes textFlash {
|
||
0% { opacity: 1; }
|
||
25% { opacity: 0.5; }
|
||
50% { opacity: 1; }
|
||
75% { opacity: 0.5; }
|
||
100% { opacity: 1; }
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 375px) {
|
||
.payment-countdown-badge {
|
||
padding: 3px 6px;
|
||
|
||
.countdown-text {
|
||
}
|
||
}
|
||
|
||
.payment-countdown-text {
|
||
}
|
||
}
|
||
|
||
/* 详情页专用样式 */
|
||
.order-detail-countdown {
|
||
.payment-countdown-badge {
|
||
padding: 6px 12px;
|
||
border-radius: 16px;
|
||
margin: 8px 0;
|
||
|
||
.countdown-text {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.payment-countdown-text {
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
/* 列表页专用样式 */
|
||
.order-list-countdown {
|
||
.payment-countdown-badge {
|
||
padding: 2px 6px;
|
||
border-radius: 10px;
|
||
margin-left: 6px;
|
||
|
||
.countdown-text {
|
||
|
||
}
|
||
}
|
||
|
||
.payment-countdown-text {
|
||
|
||
}
|
||
}
|