赵忠林
07f5c92f4b
- 添加编辑和新增收货地址页面，支持表单数据加载和提交 - 新增应用密钥凭证、新增应用操作动态、新增应用成员、新增应用版本页面配置 - 实现文章新增及编辑页面，包含图片上传及多种文章属性配置 - 增加注册会员页面，支持头像上传、手机号获取和邀请人关系处理 - 引入统一表单提交成功和失败处理，支持编辑模式数据回显 - 配置统一eslint和editorconfig规则，增强代码规范和编辑体验 - 新增.gitignore规则，屏蔽无关文件和目录，优化版本管理
161 lines
2.5 KiB
SCSS
161 lines
2.5 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 {
|
||
background: linear-gradient(135deg, #ff6b6b, #ee5a52);
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
/* 非常紧急状态（少于10分钟） */
|
||
&.critical {
|
||
background: linear-gradient(135deg, #ff4757, #c44569);
|
||
animation: flash 1s infinite;
|
||
}
|
||
|
||
/* 过期状态 */
|
||
&.expired {
|
||
background: linear-gradient(135deg, #95a5a6, #7f8c8d);
|
||
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-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 {
|
||
|
||
}
|
||
}
|