Files
soul-yongping/miniprogram/pages/gift-pay/list.wxss

161 lines
2.3 KiB
Plaintext
Raw Normal View History

/* Soul创业派对 - 我的代付 */
.page {
min-height: 100vh;
background: #000;
}
.nav-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.9);
border-bottom: 1rpx solid rgba(255, 255, 255, 0.08);
}
.nav-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24rpx;
height: 88rpx;
}
.nav-back {
width: 72rpx;
height: 72rpx;
border-radius: 50%;
background: #1c1c1e;
display: flex;
align-items: center;
justify-content: center;
}
.back-arrow {
font-size: 36rpx;
color: rgba(255, 255, 255, 0.8);
}
.nav-title {
font-size: 32rpx;
font-weight: 600;
color: #fff;
}
.tabs {
display: flex;
padding: 24rpx 32rpx;
gap: 24rpx;
background: #000;
}
.tab {
flex: 1;
text-align: center;
padding: 20rpx;
font-size: 28rpx;
color: rgba(255, 255, 255, 0.5);
border-radius: 12rpx;
background: #1c1c1e;
}
.tab.active {
color: #00CED1;
background: rgba(0, 206, 209, 0.15);
}
.content {
padding: 0 32rpx 32rpx;
}
.loading-box {
display: flex;
flex-direction: column;
align-items: center;
padding: 80rpx 0;
}
.loading-spinner {
width: 48rpx;
height: 48rpx;
border: 4rpx solid rgba(0, 206, 209, 0.3);
border-top-color: #00CED1;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading-text {
margin-top: 24rpx;
font-size: 28rpx;
color: rgba(255, 255, 255, 0.5);
}
.empty {
text-align: center;
padding: 80rpx 0;
font-size: 28rpx;
color: rgba(255, 255, 255, 0.4);
}
.card {
background: #1c1c1e;
border-radius: 16rpx;
padding: 24rpx 32rpx;
margin-bottom: 24rpx;
}
.card-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12rpx;
}
.card-row:last-child {
margin-bottom: 0;
}
.desc {
font-size: 28rpx;
color: #fff;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.amount {
font-size: 32rpx;
font-weight: 600;
color: #00CED1;
margin-left: 16rpx;
}
.status {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.5);
}
.status.paid {
color: #00CED1;
}
.actions {
display: flex;
gap: 24rpx;
}
.action-text {
font-size: 26rpx;
color: #00CED1;
}
.action-text.cancel {
color: rgba(255, 255, 255, 0.5);
}