96 lines
1.7 KiB
SCSS
96 lines
1.7 KiB
SCSS
.credits-breakdown {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background: #ffffff;
|
|
border-radius: 32rpx;
|
|
padding: 48rpx 32rpx;
|
|
box-shadow: 0 8rpx 32rpx rgba(30, 109, 235, 0.04);
|
|
border: 1rpx solid rgba(30, 109, 235, 0.06);
|
|
|
|
.credits-column {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 48rpx;
|
|
}
|
|
|
|
.credits-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
width: 100%;
|
|
|
|
&.clickable:active {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.credits-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.credits-label {
|
|
font-size: 26rpx;
|
|
color: #8c96a0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.credits-btn {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4rpx 16rpx;
|
|
border-radius: 100rpx;
|
|
border: 1rpx solid transparent;
|
|
|
|
&.btn-blue {
|
|
background-color: rgba(30, 109, 235, 0.06);
|
|
border-color: rgba(30, 109, 235, 0.12);
|
|
}
|
|
|
|
&.btn-green {
|
|
background-color: rgba(0, 139, 112, 0.06);
|
|
border-color: rgba(0, 139, 112, 0.12);
|
|
}
|
|
|
|
.credits-btn-text {
|
|
font-size: 20rpx;
|
|
font-weight: 500;
|
|
|
|
&.text-blue {
|
|
color: #1e6deb;
|
|
}
|
|
|
|
&.text-green {
|
|
color: #008b70;
|
|
}
|
|
}
|
|
}
|
|
|
|
.credits-value {
|
|
font-size: 48rpx;
|
|
font-weight: 700;
|
|
color: #1d2129;
|
|
|
|
&.color-blue {
|
|
color: #1e6deb;
|
|
}
|
|
|
|
&.color-green {
|
|
color: #008b70;
|
|
}
|
|
|
|
&.color-orange {
|
|
color: #e28c00;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|