/* 商户端 H5 统一 UI */
|
|
$cu-primary: #2080f7;
|
$cu-primary-dark: #1659ac;
|
$cu-primary-light: #e8f2ff;
|
$cu-success: #19be6b;
|
$cu-warning: #ff9900;
|
$cu-danger: #fa3534;
|
$cu-text: #1a1a2e;
|
$cu-text-secondary: #5c6370;
|
$cu-text-muted: #9aa3b2;
|
$cu-bg: #f4f6fb;
|
$cu-card-bg: #ffffff;
|
$cu-radius: 24rpx;
|
$cu-radius-sm: 16rpx;
|
$cu-shadow: 0 8rpx 32rpx rgba(15, 35, 95, 0.06);
|
|
.cu-page {
|
min-height: 100vh;
|
background: $cu-bg;
|
box-sizing: border-box;
|
}
|
|
.cu-page--padded {
|
padding: 24rpx;
|
}
|
|
.cu-page--white {
|
background: #fff;
|
}
|
|
/* 首页顶部 */
|
.cu-hero {
|
padding: 32rpx 32rpx 48rpx;
|
background: linear-gradient(145deg, #2080f7 0%, #4a9bff 55%, #6eb3ff 100%);
|
border-radius: 0 0 40rpx 40rpx;
|
}
|
|
.cu-hero__greet {
|
display: flex;
|
align-items: center;
|
}
|
|
.cu-avatar {
|
width: 88rpx;
|
height: 88rpx;
|
margin-right: 24rpx;
|
border-radius: 50%;
|
background: rgba(255, 255, 255, 0.25);
|
border: 2rpx solid rgba(255, 255, 255, 0.5);
|
color: #fff;
|
font-size: 36rpx;
|
font-weight: 600;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-shrink: 0;
|
}
|
|
.cu-hero__hi {
|
font-size: 26rpx;
|
color: rgba(255, 255, 255, 0.85);
|
margin-bottom: 6rpx;
|
}
|
|
.cu-hero__name {
|
font-size: 36rpx;
|
font-weight: 600;
|
color: #fff;
|
}
|
|
.cu-home-body {
|
margin-top: -28rpx;
|
padding: 0 24rpx 48rpx;
|
}
|
|
.cu-banner-wrap {
|
margin-bottom: 28rpx;
|
border-radius: $cu-radius;
|
overflow: hidden;
|
box-shadow: $cu-shadow;
|
}
|
|
.cu-section-title {
|
font-size: 32rpx;
|
font-weight: 600;
|
color: $cu-text;
|
margin-bottom: 24rpx;
|
padding-left: 8rpx;
|
}
|
|
.cu-service-grid {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 20rpx;
|
}
|
|
.cu-service-item {
|
width: calc(50% - 10rpx);
|
background: $cu-card-bg;
|
border-radius: $cu-radius;
|
padding: 32rpx 24rpx;
|
box-shadow: $cu-shadow;
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
}
|
|
.cu-service-item__icon {
|
width: 72rpx;
|
height: 72rpx;
|
border-radius: 20rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 36rpx;
|
margin-bottom: 16rpx;
|
}
|
|
.cu-service-item__label {
|
font-size: 30rpx;
|
font-weight: 600;
|
color: $cu-text;
|
}
|
|
.cu-service-item__desc {
|
font-size: 22rpx;
|
color: $cu-text-muted;
|
margin-top: 6rpx;
|
}
|
|
.cu-service-item--electric .cu-service-item__icon { background: #fff7e6; }
|
.cu-service-item--contract .cu-service-item__icon {
|
background: linear-gradient(135deg, #e6f4ff 0%, #bae7ff 100%);
|
box-shadow: 0 6rpx 16rpx rgba(105, 192, 255, 0.28);
|
}
|
.cu-service-item--bill .cu-service-item__icon { background: #eef2ff; }
|
.cu-service-item--record .cu-service-item__icon { background: #fce8f3; }
|
|
.cu-footer-bar {
|
margin-top: 64rpx;
|
display: flex;
|
justify-content: center;
|
gap: 24rpx;
|
}
|
|
.cu-footer-btn {
|
font-size: 28rpx;
|
padding: 18rpx 48rpx;
|
border-radius: 999rpx;
|
background: #fff;
|
color: $cu-text-secondary;
|
box-shadow: $cu-shadow;
|
}
|
|
.cu-footer-btn--primary {
|
color: $cu-primary;
|
border: 1rpx solid rgba(32, 128, 247, 0.35);
|
}
|
|
/* 卡片 */
|
.cu-card {
|
background: $cu-card-bg;
|
border-radius: $cu-radius;
|
padding: 28rpx;
|
margin-bottom: 20rpx;
|
box-shadow: $cu-shadow;
|
}
|
|
.cu-card--clickable:active {
|
opacity: 0.92;
|
transform: scale(0.995);
|
}
|
|
.cu-card__title {
|
font-size: 30rpx;
|
font-weight: 600;
|
color: $cu-text;
|
margin-bottom: 20rpx;
|
padding-bottom: 16rpx;
|
border-bottom: 1rpx solid #f0f2f5;
|
}
|
|
.cu-row {
|
display: flex;
|
align-items: center;
|
}
|
|
.cu-row--between {
|
justify-content: space-between;
|
}
|
|
.cu-name {
|
font-size: 30rpx;
|
font-weight: 600;
|
color: $cu-text;
|
}
|
|
.cu-line {
|
font-size: 26rpx;
|
color: $cu-text-secondary;
|
margin-top: 12rpx;
|
line-height: 1.5;
|
}
|
|
.cu-line__label {
|
color: $cu-text-muted;
|
}
|
|
.cu-card__footer {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-top: 20rpx;
|
padding-top: 16rpx;
|
border-top: 1rpx solid #f5f6f8;
|
}
|
|
.cu-time {
|
font-size: 22rpx;
|
color: $cu-text-muted;
|
}
|
|
.cu-link {
|
font-size: 28rpx;
|
color: $cu-primary;
|
font-weight: 500;
|
}
|
|
/* 状态 */
|
.cu-status {
|
font-size: 24rpx;
|
padding: 4rpx 16rpx;
|
border-radius: 999rpx;
|
font-weight: 500;
|
}
|
|
.cu-status--ok {
|
color: $cu-success;
|
background: rgba(25, 190, 107, 0.12);
|
}
|
|
.cu-status--bad {
|
color: $cu-danger;
|
background: rgba(250, 53, 52, 0.1);
|
}
|
|
.cu-status--warn {
|
color: $cu-warning;
|
background: rgba(255, 153, 0, 0.12);
|
}
|
|
.cu-status--muted {
|
color: $cu-text-muted;
|
background: #f0f2f5;
|
}
|
|
.cu-text-danger {
|
color: $cu-danger !important;
|
font-weight: 600;
|
}
|
|
/* 标签 */
|
.cu-tag {
|
display: inline-block;
|
background: rgba(250, 53, 52, 0.08);
|
color: $cu-danger;
|
font-size: 22rpx;
|
padding: 6rpx 14rpx;
|
border-radius: 8rpx;
|
margin-right: 8rpx;
|
margin-bottom: 8rpx;
|
}
|
|
/* 筛选 */
|
.cu-filters {
|
display: flex;
|
gap: 16rpx;
|
margin-bottom: 20rpx;
|
padding: 0 24rpx;
|
padding-top: 24rpx;
|
}
|
|
.cu-filter {
|
background: #fff;
|
padding: 16rpx 28rpx;
|
border-radius: 999rpx;
|
font-size: 26rpx;
|
color: $cu-text-secondary;
|
box-shadow: $cu-shadow;
|
}
|
|
/* Tab */
|
.cu-tabs {
|
display: flex;
|
padding: 24rpx;
|
gap: 16rpx;
|
background: $cu-bg;
|
}
|
|
.cu-tabs--scroll {
|
white-space: nowrap;
|
flex-wrap: nowrap;
|
}
|
|
scroll-view.cu-tabs {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
scroll-view.cu-tabs .cu-tab {
|
display: inline-block;
|
vertical-align: middle;
|
margin-right: 16rpx;
|
}
|
|
scroll-view.cu-tabs .cu-tab:last-child {
|
margin-right: 24rpx;
|
}
|
|
.cu-tab {
|
flex-shrink: 0;
|
padding: 14rpx 28rpx;
|
font-size: 26rpx;
|
color: $cu-text-secondary;
|
background: #fff;
|
border-radius: 999rpx;
|
box-shadow: $cu-shadow;
|
}
|
|
.cu-tab--active {
|
color: #fff;
|
background: linear-gradient(135deg, $cu-primary, #4a9bff);
|
box-shadow: 0 6rpx 20rpx rgba(32, 128, 247, 0.28);
|
}
|
|
.cu-list-wrap {
|
padding: 0 24rpx 24rpx;
|
}
|
|
/* 表单 */
|
.cu-form-line {
|
display: flex;
|
align-items: center;
|
margin: 20rpx 0;
|
font-size: 28rpx;
|
color: $cu-text;
|
}
|
|
.cu-form-line__label {
|
width: 160rpx;
|
flex-shrink: 0;
|
color: $cu-text-secondary;
|
}
|
|
.cu-form-line input {
|
flex: 1;
|
height: 72rpx;
|
padding: 0 20rpx;
|
background: #f8fafc;
|
border-radius: 12rpx;
|
font-size: 28rpx;
|
}
|
|
.cu-form-suffix {
|
margin-left: 12rpx;
|
color: $cu-text-muted;
|
font-size: 26rpx;
|
}
|
|
/* 按钮 */
|
.cu-btn {
|
height: 96rpx;
|
line-height: 96rpx;
|
text-align: center;
|
border-radius: 999rpx;
|
font-size: 32rpx;
|
font-weight: 500;
|
margin-top: 40rpx;
|
background: #fff;
|
color: $cu-text-secondary;
|
border: 1rpx solid #e8ecf0;
|
}
|
|
.cu-btn--primary {
|
background: linear-gradient(135deg, $cu-primary 0%, #4a9bff 100%);
|
color: #fff;
|
border: none;
|
box-shadow: 0 12rpx 32rpx rgba(32, 128, 247, 0.35);
|
}
|
|
.cu-btn--block {
|
margin-left: 24rpx;
|
margin-right: 24rpx;
|
}
|
|
.cu-btn:active {
|
opacity: 0.9;
|
}
|
|
/* 登录页 */
|
.cu-login {
|
min-height: 100vh;
|
padding: 120rpx 48rpx 48rpx;
|
background: linear-gradient(180deg, #dce9ff 0%, #f4f6fb 45%, #fff 100%);
|
}
|
|
.cu-login__brand {
|
margin-bottom: 64rpx;
|
}
|
|
.cu-login__title {
|
font-size: 52rpx;
|
font-weight: 700;
|
color: $cu-text;
|
margin-bottom: 12rpx;
|
}
|
|
.cu-login__sub {
|
font-size: 28rpx;
|
color: $cu-text-muted;
|
}
|
|
.cu-login__tip {
|
font-size: 24rpx;
|
color: $cu-warning;
|
margin-bottom: 32rpx;
|
line-height: 1.5;
|
padding: 16rpx 20rpx;
|
background: rgba(255, 153, 0, 0.1);
|
border-radius: 12rpx;
|
}
|
|
.cu-input-wrap {
|
display: flex;
|
align-items: center;
|
background: #fff;
|
border-radius: 999rpx;
|
padding: 0 32rpx;
|
height: 100rpx;
|
margin-bottom: 24rpx;
|
box-shadow: $cu-shadow;
|
}
|
|
.cu-input-wrap input {
|
flex: 1;
|
font-size: 30rpx;
|
}
|
|
.cu-sms-btn {
|
color: $cu-primary;
|
font-size: 28rpx;
|
font-weight: 500;
|
flex-shrink: 0;
|
padding-left: 20rpx;
|
}
|
|
.cu-sms-btn--disabled {
|
color: $cu-text-muted;
|
}
|
|
/* 支付结果 */
|
.cu-result {
|
min-height: 100vh;
|
padding: 160rpx 48rpx;
|
text-align: center;
|
background: linear-gradient(180deg, #f4f6fb 0%, #fff 40%);
|
}
|
|
.cu-result__icon {
|
width: 140rpx;
|
height: 140rpx;
|
line-height: 140rpx;
|
border-radius: 50%;
|
margin: 0 auto 40rpx;
|
color: #fff;
|
font-size: 72rpx;
|
font-weight: 600;
|
}
|
|
.cu-result__icon--ok {
|
background: linear-gradient(145deg, #19be6b, #3dd68c);
|
box-shadow: 0 16rpx 40rpx rgba(25, 190, 107, 0.35);
|
}
|
|
.cu-result__icon--fail {
|
background: linear-gradient(145deg, #fa3534, #ff6b6b);
|
box-shadow: 0 16rpx 40rpx rgba(250, 53, 52, 0.3);
|
}
|
|
.cu-result__title {
|
font-size: 44rpx;
|
font-weight: 700;
|
color: $cu-text;
|
}
|
|
.cu-result__sub {
|
margin: 20rpx 0 80rpx;
|
color: $cu-text-muted;
|
font-size: 28rpx;
|
line-height: 1.6;
|
}
|
|
/* ========== 列表页增强 ========== */
|
.cu-list-header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 8rpx 24rpx 16rpx;
|
}
|
|
.cu-list-header__count {
|
font-size: 24rpx;
|
color: $cu-text-muted;
|
}
|
|
.cu-list-card {
|
background: $cu-card-bg;
|
border-radius: $cu-radius;
|
padding: 0;
|
margin-bottom: 20rpx;
|
box-shadow: $cu-shadow;
|
overflow: hidden;
|
}
|
|
.cu-list-card--clickable:active {
|
opacity: 0.95;
|
}
|
|
.cu-list-card--inset {
|
margin: 20rpx 24rpx 0;
|
}
|
|
|
.cu-list-card__head {
|
display: flex;
|
align-items: flex-start;
|
padding: 28rpx 28rpx 20rpx;
|
}
|
|
.cu-list-card__icon {
|
width: 80rpx;
|
height: 80rpx;
|
border-radius: 20rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 38rpx;
|
margin-right: 20rpx;
|
flex-shrink: 0;
|
}
|
|
.cu-list-card__icon--electric { background: linear-gradient(135deg, #fff7e6, #ffe8b3); }
|
.cu-list-card__icon--conditioner { background: linear-gradient(135deg, #e8f7ef, #c8f0dc); }
|
.cu-list-card__icon--contract {
|
background: linear-gradient(135deg, #e6f4ff 0%, #bae7ff 100%);
|
box-shadow: 0 6rpx 14rpx rgba(105, 192, 255, 0.28);
|
}
|
.cu-list-card__icon--bill { background: linear-gradient(135deg, #fce8f3, #f5d0e8); }
|
.cu-list-card__icon--record { background: linear-gradient(135deg, #e8f4ff, #cce5ff); }
|
|
.cu-list-card__main {
|
flex: 1;
|
min-width: 0;
|
}
|
|
.cu-list-card__title-row {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
gap: 12rpx;
|
margin-bottom: 8rpx;
|
}
|
|
.cu-list-card__title {
|
font-size: 30rpx;
|
font-weight: 600;
|
color: $cu-text;
|
flex: 1;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.cu-list-card__sub {
|
display: block;
|
font-size: 24rpx;
|
color: $cu-text-muted;
|
line-height: 1.4;
|
}
|
|
.cu-list-card__meta {
|
display: flex;
|
flex-direction: column;
|
gap: 8rpx;
|
margin-top: 8rpx;
|
}
|
|
.cu-list-card__tags {
|
padding: 0 28rpx 12rpx;
|
}
|
|
.cu-info-grid {
|
display: flex;
|
flex-wrap: wrap;
|
margin: 0 20rpx 20rpx;
|
background: #f8fafc;
|
border-radius: 16rpx;
|
overflow: hidden;
|
}
|
|
.cu-info-cell {
|
width: 50%;
|
padding: 20rpx 24rpx;
|
box-sizing: border-box;
|
border-bottom: 1rpx solid #f0f2f5;
|
}
|
|
.cu-info-cell:nth-child(odd) {
|
border-right: 1rpx solid #f0f2f5;
|
}
|
|
.cu-info-cell:nth-last-child(-n+2) {
|
border-bottom: none;
|
}
|
|
.cu-info-cell--full {
|
width: 100%;
|
border-right: none !important;
|
}
|
|
.cu-info-cell__label {
|
display: block;
|
font-size: 22rpx;
|
color: $cu-text-muted;
|
margin-bottom: 8rpx;
|
}
|
|
.cu-info-cell__value {
|
display: block;
|
font-size: 28rpx;
|
font-weight: 600;
|
color: $cu-text;
|
}
|
|
.cu-info-cell__value--danger {
|
color: $cu-danger;
|
}
|
|
.cu-info-cell__value--primary {
|
color: $cu-primary;
|
}
|
|
.cu-list-card__foot {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 16rpx 28rpx 24rpx;
|
border-top: 1rpx solid #f5f6f8;
|
}
|
|
.cu-list-card__arrow {
|
font-size: 26rpx;
|
color: $cu-primary;
|
font-weight: 500;
|
}
|
|
.cu-period-chip {
|
display: inline-flex;
|
align-items: center;
|
margin-top: 12rpx;
|
padding: 8rpx 16rpx;
|
background: $cu-primary-light;
|
border-radius: 8rpx;
|
font-size: 22rpx;
|
color: $cu-primary;
|
}
|
|
/* ========== 详情页增强 ========== */
|
.cu-page--with-footer {
|
padding-bottom: 160rpx;
|
}
|
|
.cu-detail-hero {
|
margin: 24rpx 24rpx 0;
|
padding: 36rpx 32rpx;
|
border-radius: $cu-radius;
|
background: linear-gradient(145deg, #2080f7 0%, #4a9bff 100%);
|
color: #fff;
|
box-shadow: 0 12rpx 40rpx rgba(32, 128, 247, 0.3);
|
}
|
|
.cu-detail-hero--warm {
|
background: linear-gradient(145deg, #ff8f3d 0%, #ffb347 100%);
|
box-shadow: 0 12rpx 40rpx rgba(255, 143, 61, 0.28);
|
}
|
|
.cu-detail-hero--green {
|
background: linear-gradient(145deg, #19be6b 0%, #3dd68c 100%);
|
box-shadow: 0 12rpx 40rpx rgba(25, 190, 107, 0.28);
|
}
|
|
.cu-detail-hero__top {
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
margin-bottom: 24rpx;
|
}
|
|
.cu-detail-hero__label {
|
font-size: 24rpx;
|
opacity: 0.85;
|
margin-bottom: 8rpx;
|
}
|
|
.cu-detail-hero__code {
|
font-size: 32rpx;
|
font-weight: 600;
|
letter-spacing: 0.5rpx;
|
}
|
|
.cu-detail-hero__amount {
|
margin-top: 8rpx;
|
}
|
|
.cu-detail-hero__amount-label {
|
display: block;
|
font-size: 24rpx;
|
opacity: 0.85;
|
margin-bottom: 8rpx;
|
}
|
|
.cu-detail-hero__amount-value {
|
font-size: 56rpx;
|
font-weight: 700;
|
line-height: 1.2;
|
}
|
|
.cu-detail-hero__amount-unit {
|
font-size: 28rpx;
|
font-weight: 500;
|
margin-left: 4rpx;
|
}
|
|
.cu-detail-hero .cu-status {
|
background: rgba(255, 255, 255, 0.22);
|
color: #fff;
|
flex-shrink: 0;
|
}
|
|
.cu-segment {
|
display: flex;
|
margin: 24rpx 24rpx 0;
|
padding: 6rpx;
|
background: #e8ecf2;
|
border-radius: 16rpx;
|
}
|
|
.cu-segment__item {
|
flex: 1;
|
text-align: center;
|
padding: 18rpx 0;
|
font-size: 28rpx;
|
color: $cu-text-secondary;
|
border-radius: 12rpx;
|
transition: all 0.2s;
|
}
|
|
.cu-segment__item--active {
|
background: #fff;
|
color: $cu-primary;
|
font-weight: 600;
|
box-shadow: 0 4rpx 12rpx rgba(15, 35, 95, 0.08);
|
}
|
|
.cu-panel {
|
margin: 20rpx 24rpx 0;
|
background: $cu-card-bg;
|
border-radius: $cu-radius;
|
box-shadow: $cu-shadow;
|
overflow: hidden;
|
}
|
|
.cu-panel__title {
|
padding: 24rpx 28rpx 16rpx;
|
font-size: 28rpx;
|
font-weight: 600;
|
color: $cu-text;
|
}
|
|
.cu-panel__head {
|
display: flex;
|
align-items: center;
|
gap: 16rpx;
|
padding: 24rpx 28rpx 16rpx;
|
}
|
|
.cu-panel__title-text {
|
font-size: 28rpx;
|
font-weight: 600;
|
color: $cu-text;
|
}
|
|
.cu-panel__icon {
|
width: 56rpx;
|
height: 56rpx;
|
border-radius: 16rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-shrink: 0;
|
}
|
|
.cu-panel__icon--room {
|
background: linear-gradient(135deg, #ff9c6e 0%, #ff4d4f 100%);
|
box-shadow: 0 8rpx 20rpx rgba(255, 77, 79, 0.38);
|
}
|
|
.cu-panel__icon--info {
|
background: linear-gradient(135deg, #69c0ff 0%, #2080f7 100%);
|
box-shadow: 0 8rpx 20rpx rgba(32, 128, 247, 0.38);
|
}
|
|
.cu-panel__icon--file {
|
background: linear-gradient(135deg, #b37feb 0%, #722ed1 100%);
|
box-shadow: 0 8rpx 20rpx rgba(114, 46, 209, 0.38);
|
}
|
|
.cu-kv__item {
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
padding: 22rpx 28rpx;
|
border-top: 1rpx solid #f5f6f8;
|
gap: 24rpx;
|
}
|
|
.cu-kv__label {
|
flex-shrink: 0;
|
font-size: 26rpx;
|
color: $cu-text-muted;
|
min-width: 160rpx;
|
}
|
|
.cu-kv__value {
|
flex: 1;
|
text-align: right;
|
font-size: 28rpx;
|
color: $cu-text;
|
font-weight: 500;
|
word-break: break-all;
|
}
|
|
.cu-kv__value--danger {
|
color: $cu-danger;
|
font-weight: 600;
|
}
|
|
.cu-kv__value--muted {
|
color: $cu-text-muted;
|
font-weight: 400;
|
text-align: left;
|
}
|
|
.cu-bill-tip {
|
display: flex;
|
align-items: flex-start;
|
gap: 12rpx;
|
margin: 0 28rpx 20rpx;
|
padding: 20rpx 24rpx;
|
border-radius: 12rpx;
|
font-size: 24rpx;
|
line-height: 1.5;
|
}
|
|
.cu-bill-tip--inset {
|
margin: 0 24rpx 20rpx;
|
}
|
|
.cu-list-card .cu-bill-tip {
|
margin: 0 28rpx 16rpx;
|
}
|
|
.cu-bill-tip--ok {
|
background: #edf9f0;
|
color: #2f9a4f;
|
}
|
|
.cu-bill-tip--warn {
|
background: #fff8e8;
|
color: #d48806;
|
}
|
|
.cu-bill-tip--danger {
|
background: #fff1f0;
|
color: #cf1322;
|
}
|
|
.cu-bill-tip__icon-box {
|
width: 44rpx;
|
height: 44rpx;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-shrink: 0;
|
}
|
|
.cu-bill-tip--ok .cu-bill-tip__icon-box {
|
background: linear-gradient(135deg, #95de64 0%, #52c41a 100%);
|
box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.35);
|
}
|
|
.cu-bill-tip--warn .cu-bill-tip__icon-box {
|
background: linear-gradient(135deg, #ffd666 0%, #fa8c16 100%);
|
box-shadow: 0 4rpx 12rpx rgba(250, 140, 16, 0.35);
|
}
|
|
.cu-bill-tip--danger .cu-bill-tip__icon-box {
|
background: linear-gradient(135deg, #ff7875 0%, #f5222d 100%);
|
box-shadow: 0 4rpx 12rpx rgba(245, 34, 45, 0.35);
|
}
|
|
.cu-bill-tip__icon {
|
flex-shrink: 0;
|
font-size: 28rpx;
|
line-height: 1.4;
|
}
|
|
.cu-bill-tip__text {
|
flex: 1;
|
}
|
|
.cu-room-list {
|
padding: 0 28rpx 20rpx;
|
}
|
|
.cu-room-item {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
gap: 20rpx;
|
padding: 18rpx 0;
|
border-top: 1rpx solid #f5f6f8;
|
}
|
|
.cu-room-item__name {
|
flex: 1;
|
font-size: 26rpx;
|
color: $cu-text;
|
word-break: break-all;
|
}
|
|
.cu-room-item__area {
|
flex-shrink: 0;
|
font-size: 26rpx;
|
color: $cu-primary;
|
font-weight: 500;
|
}
|
|
.cu-file-item {
|
display: flex;
|
align-items: center;
|
gap: 16rpx;
|
padding: 22rpx 28rpx;
|
border-top: 1rpx solid #f5f6f8;
|
cursor: pointer;
|
}
|
|
.cu-file-item__icon-box {
|
width: 64rpx;
|
height: 64rpx;
|
border-radius: 18rpx;
|
background: linear-gradient(135deg, #5cdbd3 0%, #13c2c2 100%);
|
box-shadow: 0 6rpx 16rpx rgba(19, 194, 194, 0.38);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-shrink: 0;
|
}
|
|
.cu-file-item__icon {
|
font-size: 32rpx;
|
}
|
|
.cu-file-item__main {
|
flex: 1;
|
min-width: 0;
|
}
|
|
.cu-file-item__name {
|
display: block;
|
font-size: 28rpx;
|
color: $cu-text;
|
word-break: break-all;
|
}
|
|
.cu-file-item__time {
|
display: block;
|
margin-top: 6rpx;
|
font-size: 22rpx;
|
color: $cu-text-muted;
|
}
|
|
.cu-file-item__action {
|
flex-shrink: 0;
|
font-size: 26rpx;
|
color: $cu-primary;
|
}
|
|
.cu-timeline {
|
padding: 8rpx 28rpx 20rpx;
|
}
|
|
.cu-timeline__item {
|
display: flex;
|
align-items: flex-start;
|
padding: 20rpx 0;
|
border-bottom: 1rpx solid #f5f6f8;
|
}
|
|
.cu-timeline__item:last-child {
|
border-bottom: none;
|
}
|
|
.cu-timeline__dot {
|
width: 16rpx;
|
height: 16rpx;
|
border-radius: 50%;
|
background: $cu-primary;
|
margin-top: 10rpx;
|
margin-right: 20rpx;
|
flex-shrink: 0;
|
box-shadow: 0 0 0 6rpx rgba(32, 128, 247, 0.15);
|
}
|
|
.cu-timeline__body {
|
flex: 1;
|
}
|
|
.cu-timeline__title {
|
font-size: 28rpx;
|
font-weight: 600;
|
color: $cu-text;
|
margin-bottom: 6rpx;
|
}
|
|
.cu-timeline__time {
|
font-size: 24rpx;
|
color: $cu-text-muted;
|
}
|
|
.cu-page-footer {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
padding: 20rpx 24rpx calc(20rpx + env(safe-area-inset-bottom));
|
background: rgba(255, 255, 255, 0.96);
|
backdrop-filter: blur(12px);
|
box-shadow: 0 -8rpx 32rpx rgba(15, 35, 95, 0.08);
|
z-index: 100;
|
}
|
|
.cu-page-footer .cu-btn {
|
margin-top: 0;
|
}
|
|
/* 充值/缴费页 */
|
.cu-device-summary {
|
margin: 24rpx 24rpx 0;
|
padding: 28rpx;
|
background: $cu-card-bg;
|
border-radius: $cu-radius;
|
box-shadow: $cu-shadow;
|
}
|
|
.cu-device-summary__balance {
|
margin-top: 20rpx;
|
padding: 24rpx;
|
background: linear-gradient(135deg, #fff5f5, #fff);
|
border-radius: 16rpx;
|
border: 1rpx solid rgba(250, 53, 52, 0.12);
|
text-align: center;
|
}
|
|
.cu-device-summary__balance-label {
|
font-size: 24rpx;
|
color: $cu-text-muted;
|
margin-bottom: 8rpx;
|
}
|
|
.cu-device-summary__balance-value {
|
font-size: 48rpx;
|
font-weight: 700;
|
color: $cu-danger;
|
}
|
|
.cu-pay-amount-box {
|
margin: 24rpx 24rpx 0;
|
padding: 40rpx 28rpx;
|
background: $cu-card-bg;
|
border-radius: $cu-radius;
|
box-shadow: $cu-shadow;
|
text-align: center;
|
}
|
|
.cu-pay-amount-box__label {
|
font-size: 26rpx;
|
color: $cu-text-muted;
|
margin-bottom: 16rpx;
|
}
|
|
.cu-pay-amount-box__input-wrap {
|
display: flex;
|
align-items: baseline;
|
justify-content: center;
|
margin-bottom: 24rpx;
|
}
|
|
.cu-pay-amount-box__symbol {
|
font-size: 40rpx;
|
font-weight: 600;
|
color: $cu-text;
|
margin-right: 8rpx;
|
}
|
|
.cu-pay-amount-box__input {
|
font-size: 72rpx;
|
font-weight: 700;
|
color: $cu-text;
|
text-align: center;
|
min-width: 200rpx;
|
height: 88rpx;
|
line-height: 88rpx;
|
}
|
|
.cu-pay-amount-box__remark {
|
display: flex;
|
align-items: center;
|
margin-top: 8rpx;
|
padding: 20rpx 24rpx;
|
background: #f8fafc;
|
border-radius: 12rpx;
|
font-size: 26rpx;
|
}
|
|
.cu-pay-amount-box__remark-label {
|
color: $cu-text-muted;
|
margin-right: 16rpx;
|
flex-shrink: 0;
|
}
|
|
.cu-pay-amount-box__remark input {
|
flex: 1;
|
font-size: 26rpx;
|
text-align: left;
|
}
|
|
.cu-quick-amounts {
|
display: flex;
|
gap: 16rpx;
|
margin-top: 20rpx;
|
margin-bottom: 32rpx;
|
flex-wrap: wrap;
|
justify-content: center;
|
}
|
|
.cu-quick-amount {
|
padding: 12rpx 28rpx;
|
background: #f0f4fa;
|
border-radius: 999rpx;
|
font-size: 26rpx;
|
color: $cu-text-secondary;
|
}
|
|
.cu-quick-amount--active {
|
background: $cu-primary-light;
|
color: $cu-primary;
|
font-weight: 600;
|
}
|
|
/* ========== 账单列表 / 详情 ========== */
|
.cu-bill-page__header {
|
padding: 16rpx 24rpx 8rpx;
|
}
|
|
.cu-bill-page__toolbar {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
gap: 16rpx;
|
margin-bottom: 16rpx;
|
}
|
|
.cu-bill-tabs--toolbar {
|
flex: 1;
|
min-width: 0;
|
padding: 0;
|
margin-bottom: 0;
|
gap: 12rpx;
|
background: transparent;
|
}
|
|
.cu-bill-tabs--toolbar .cu-tab {
|
padding: 12rpx 20rpx;
|
font-size: 24rpx;
|
}
|
|
.cu-bill-cost-picker {
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
gap: 6rpx;
|
padding: 12rpx 18rpx;
|
background: #fff;
|
border-radius: 999rpx;
|
box-shadow: $cu-shadow;
|
border: 2rpx solid transparent;
|
max-width: 220rpx;
|
}
|
|
.cu-bill-cost-picker--active {
|
border-color: $cu-primary;
|
background: linear-gradient(135deg, #e8f2ff 0%, #fff 100%);
|
}
|
|
.cu-bill-cost-picker--rent {
|
border-color: #40a9ff;
|
background: linear-gradient(135deg, #e6f4ff 0%, #fff 100%);
|
}
|
|
.cu-bill-cost-picker--property {
|
border-color: #52c41a;
|
background: linear-gradient(135deg, #f0faf4 0%, #fff 100%);
|
}
|
|
.cu-bill-cost-picker--deposit {
|
border-color: #fa8c16;
|
background: linear-gradient(135deg, #fff7e6 0%, #fff 100%);
|
}
|
|
.cu-bill-cost-picker--utility {
|
border-color: #13c2c2;
|
background: linear-gradient(135deg, #e6fffb 0%, #fff 100%);
|
}
|
|
.cu-bill-cost-picker--misc {
|
border-color: #9254de;
|
background: linear-gradient(135deg, #f9f0ff 0%, #fff 100%);
|
}
|
|
.cu-bill-cost-picker__label {
|
font-size: 24rpx;
|
color: $cu-text-secondary;
|
max-width: 150rpx;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
line-height: 1.2;
|
}
|
|
.cu-bill-cost-picker--active .cu-bill-cost-picker__label,
|
.cu-bill-cost-picker--rent .cu-bill-cost-picker__label,
|
.cu-bill-cost-picker--property .cu-bill-cost-picker__label,
|
.cu-bill-cost-picker--deposit .cu-bill-cost-picker__label,
|
.cu-bill-cost-picker--utility .cu-bill-cost-picker__label,
|
.cu-bill-cost-picker--misc .cu-bill-cost-picker__label {
|
color: $cu-text;
|
font-weight: 600;
|
}
|
|
.cu-bill-cost-picker__arrow {
|
font-size: 22rpx;
|
color: $cu-text-muted;
|
line-height: 1;
|
transform: translateY(2rpx);
|
}
|
|
.cu-bill-tabs {
|
margin-bottom: 16rpx;
|
}
|
|
.cu-bill-summary {
|
display: flex;
|
align-items: center;
|
gap: 12rpx;
|
padding: 0 8rpx 12rpx;
|
flex-wrap: wrap;
|
}
|
|
.cu-bill-summary__main {
|
display: flex;
|
align-items: baseline;
|
gap: 8rpx;
|
}
|
|
.cu-bill-summary__count {
|
font-size: 44rpx;
|
font-weight: 700;
|
color: $cu-text;
|
line-height: 1;
|
}
|
|
.cu-bill-summary__label {
|
font-size: 26rpx;
|
color: $cu-text-muted;
|
line-height: 1.2;
|
}
|
|
.cu-bill-summary__overdue-group {
|
display: flex;
|
align-items: center;
|
gap: 10rpx;
|
}
|
|
.cu-bill-summary__chip {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
gap: 8rpx;
|
height: 48rpx;
|
padding: 0 16rpx;
|
border-radius: 999rpx;
|
box-sizing: border-box;
|
font-size: 24rpx;
|
line-height: 1;
|
}
|
|
.cu-bill-summary__chip--stat {
|
color: $cu-danger;
|
font-weight: 600;
|
background: #fff1f0;
|
}
|
|
.cu-bill-summary__chip--filter {
|
background: transparent;
|
border: none;
|
color: $cu-danger;
|
font-weight: 500;
|
padding: 0 4rpx;
|
}
|
|
.cu-bill-summary__chip--filter-on {
|
font-weight: 600;
|
}
|
|
.cu-bill-summary__chip-text {
|
font-size: 24rpx;
|
line-height: 1;
|
color: inherit;
|
}
|
|
.cu-bill-summary__check {
|
width: 28rpx;
|
height: 28rpx;
|
border: 2rpx solid rgba(255, 77, 79, 0.45);
|
border-radius: 6rpx;
|
background: #fff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
box-sizing: border-box;
|
flex-shrink: 0;
|
transition: all 0.2s ease;
|
}
|
|
.cu-bill-summary__check--on {
|
border-color: $cu-danger;
|
background: $cu-danger;
|
}
|
|
.cu-bill-summary__check-icon {
|
font-size: 20rpx;
|
color: #fff;
|
line-height: 1;
|
font-weight: 700;
|
}
|
|
.cu-bill-card {
|
position: relative;
|
margin: 0 24rpx 20rpx;
|
background: $cu-card-bg;
|
border-radius: $cu-radius;
|
box-shadow: $cu-shadow;
|
overflow: hidden;
|
}
|
|
.cu-bill-card__accent {
|
position: absolute;
|
left: 0;
|
top: 0;
|
bottom: 0;
|
width: 8rpx;
|
background: $cu-primary;
|
}
|
|
.cu-bill-card__accent--ok {
|
background: $cu-success;
|
}
|
|
.cu-bill-card__accent--warn {
|
background: $cu-warning;
|
}
|
|
.cu-bill-card__accent--danger {
|
background: $cu-danger;
|
}
|
|
.cu-bill-card__body {
|
padding: 28rpx 28rpx 24rpx 32rpx;
|
}
|
|
.cu-bill-card__head {
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
gap: 16rpx;
|
margin-bottom: 24rpx;
|
}
|
|
.cu-bill-card__type-row {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
gap: 16rpx;
|
margin-bottom: 12rpx;
|
}
|
|
.cu-bill-type-tag {
|
padding: 10rpx 22rpx;
|
border-radius: 12rpx;
|
box-shadow: 0 4rpx 12rpx rgba(15, 35, 75, 0.08);
|
}
|
|
.cu-bill-type-tag__text {
|
font-size: 28rpx;
|
font-weight: 700;
|
line-height: 1.2;
|
}
|
|
.cu-bill-type-tag--rent {
|
background: linear-gradient(135deg, #69c0ff 0%, #40a9ff 100%);
|
}
|
|
.cu-bill-type-tag--rent .cu-bill-type-tag__text {
|
color: #fff;
|
}
|
|
.cu-bill-type-tag--property {
|
background: linear-gradient(135deg, #95de64 0%, #52c41a 100%);
|
}
|
|
.cu-bill-type-tag--property .cu-bill-type-tag__text {
|
color: #fff;
|
}
|
|
.cu-bill-type-tag--deposit {
|
background: linear-gradient(135deg, #ffc069 0%, #fa8c16 100%);
|
}
|
|
.cu-bill-type-tag--deposit .cu-bill-type-tag__text {
|
color: #fff;
|
}
|
|
.cu-bill-type-tag--utility {
|
background: linear-gradient(135deg, #5cdbd3 0%, #13c2c2 100%);
|
}
|
|
.cu-bill-type-tag--utility .cu-bill-type-tag__text {
|
color: #fff;
|
}
|
|
.cu-bill-type-tag--misc {
|
background: linear-gradient(135deg, #b37feb 0%, #9254de 100%);
|
}
|
|
.cu-bill-type-tag--misc .cu-bill-type-tag__text {
|
color: #fff;
|
}
|
|
.cu-bill-type-tag--default {
|
background: linear-gradient(135deg, #d9d9d9 0%, #8c8c8c 100%);
|
}
|
|
.cu-bill-type-tag--default .cu-bill-type-tag__text {
|
color: #fff;
|
}
|
|
.cu-bill-card__code {
|
display: block;
|
font-size: 26rpx;
|
font-weight: 500;
|
color: $cu-text-secondary;
|
margin-bottom: 20rpx;
|
word-break: break-all;
|
line-height: 1.4;
|
}
|
|
.cu-bill-card__amount-box {
|
display: flex;
|
align-items: flex-end;
|
justify-content: space-between;
|
gap: 20rpx;
|
padding: 24rpx;
|
background: linear-gradient(135deg, #f8fbff 0%, #f4f7fd 100%);
|
border-radius: 16rpx;
|
border: 1rpx solid rgba(32, 128, 247, 0.08);
|
margin-bottom: 20rpx;
|
}
|
|
.cu-bill-card__amount-label,
|
.cu-bill-card__amount-side-label {
|
display: block;
|
font-size: 22rpx;
|
color: $cu-text-muted;
|
margin-bottom: 8rpx;
|
}
|
|
.cu-bill-card__amount-value {
|
font-size: 40rpx;
|
font-weight: 700;
|
color: $cu-danger;
|
line-height: 1.1;
|
}
|
|
.cu-bill-card__amount-side {
|
text-align: right;
|
flex-shrink: 0;
|
}
|
|
.cu-bill-card__amount-side-value {
|
font-size: 28rpx;
|
font-weight: 600;
|
color: $cu-text-secondary;
|
}
|
|
.cu-bill-card__overdue {
|
margin: -8rpx 0 16rpx;
|
padding: 12rpx 16rpx;
|
background: #fff1f0;
|
border-radius: 10rpx;
|
font-size: 24rpx;
|
color: $cu-danger;
|
}
|
|
.cu-bill-card__contract {
|
padding: 20rpx;
|
background: #fafbfc;
|
border-radius: 14rpx;
|
margin-bottom: 16rpx;
|
}
|
|
.cu-bill-card__contract-row {
|
display: flex;
|
align-items: flex-start;
|
gap: 16rpx;
|
font-size: 24rpx;
|
line-height: 1.5;
|
}
|
|
.cu-bill-card__contract-row + .cu-bill-card__contract-row {
|
margin-top: 12rpx;
|
}
|
|
.cu-bill-card__contract-label {
|
flex-shrink: 0;
|
width: 140rpx;
|
color: $cu-text-muted;
|
}
|
|
.cu-bill-card__contract-value {
|
flex: 1;
|
color: $cu-text-secondary;
|
word-break: break-all;
|
}
|
|
.cu-bill-card__meta {
|
display: flex;
|
gap: 16rpx;
|
margin-bottom: 20rpx;
|
}
|
|
.cu-bill-card__meta-item {
|
flex: 1;
|
padding: 16rpx;
|
background: #fff;
|
border: 1rpx solid #eef1f6;
|
border-radius: 12rpx;
|
}
|
|
.cu-bill-card__meta-item--full {
|
flex: none;
|
width: 100%;
|
}
|
|
.cu-bill-card__meta-label {
|
display: block;
|
font-size: 22rpx;
|
color: $cu-text-muted;
|
margin-bottom: 8rpx;
|
}
|
|
.cu-bill-card__meta-value {
|
display: block;
|
font-size: 24rpx;
|
color: $cu-text;
|
line-height: 1.4;
|
word-break: break-all;
|
}
|
|
.cu-bill-card__foot {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding-top: 18rpx;
|
border-top: 1rpx solid #f0f2f6;
|
}
|
|
.cu-bill-card__foot-hint {
|
font-size: 24rpx;
|
color: $cu-text-muted;
|
}
|
|
.cu-bill-card__foot-link {
|
font-size: 26rpx;
|
color: $cu-primary;
|
font-weight: 500;
|
}
|
|
.cu-bill-card--inset {
|
margin: 0 24rpx 24rpx;
|
}
|
|
.cu-contract-bill-panel {
|
padding: 24rpx 24rpx 32rpx;
|
}
|
|
.cu-contract-bill-switch {
|
display: flex;
|
gap: 16rpx;
|
margin-bottom: 20rpx;
|
}
|
|
.cu-contract-bill-switch__item {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
gap: 16rpx;
|
padding: 24rpx 20rpx;
|
border-radius: 16rpx;
|
background: #f5f7fb;
|
border: 2rpx solid transparent;
|
transition: all 0.2s ease;
|
}
|
|
.cu-contract-bill-switch__item--pay.cu-contract-bill-switch__item--active {
|
background: linear-gradient(135deg, #fff7f0 0%, #ffe8d6 100%);
|
border-color: #ffb36b;
|
box-shadow: 0 8rpx 24rpx rgba(255, 143, 61, 0.15);
|
}
|
|
.cu-contract-bill-switch__item--in.cu-contract-bill-switch__item--active {
|
background: linear-gradient(135deg, #edf9f0 0%, #d8f3e0 100%);
|
border-color: #5ec98a;
|
box-shadow: 0 8rpx 24rpx rgba(47, 154, 79, 0.15);
|
}
|
|
.cu-contract-bill-switch__icon {
|
width: 56rpx;
|
height: 56rpx;
|
line-height: 56rpx;
|
text-align: center;
|
border-radius: 14rpx;
|
font-size: 28rpx;
|
font-weight: 700;
|
color: #fff;
|
flex-shrink: 0;
|
}
|
|
.cu-contract-bill-switch__item--pay .cu-contract-bill-switch__icon {
|
background: linear-gradient(135deg, #ff8f3d, #ffb347);
|
}
|
|
.cu-contract-bill-switch__item--in .cu-contract-bill-switch__icon {
|
background: linear-gradient(135deg, #2f9a4f, #5ec98a);
|
}
|
|
.cu-contract-bill-switch__text {
|
min-width: 0;
|
}
|
|
.cu-contract-bill-switch__title {
|
display: block;
|
font-size: 28rpx;
|
font-weight: 600;
|
color: $cu-text;
|
line-height: 1.3;
|
}
|
|
.cu-contract-bill-switch__desc {
|
display: block;
|
margin-top: 6rpx;
|
font-size: 22rpx;
|
color: $cu-text-muted;
|
line-height: 1.3;
|
}
|
|
.cu-contract-bill-summary {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 20rpx;
|
padding: 0 4rpx;
|
}
|
|
.cu-contract-bill-summary__label {
|
font-size: 28rpx;
|
font-weight: 600;
|
color: $cu-text;
|
}
|
|
.cu-contract-bill-summary__count {
|
font-size: 24rpx;
|
color: $cu-text-muted;
|
}
|
|
.cu-contract-bill-loading {
|
padding: 80rpx 0;
|
text-align: center;
|
font-size: 26rpx;
|
color: $cu-text-muted;
|
}
|
|
.cu-contract-bill-list {
|
display: flex;
|
flex-direction: column;
|
gap: 20rpx;
|
}
|
|
.cu-contract-bill-card {
|
background: #fff;
|
border-radius: 18rpx;
|
overflow: hidden;
|
box-shadow: 0 8rpx 28rpx rgba(15, 35, 75, 0.06);
|
border: 1rpx solid #eef1f6;
|
}
|
|
.cu-contract-bill-card--pay {
|
border-top: 6rpx solid #ff8f3d;
|
}
|
|
.cu-contract-bill-card--in {
|
border-top: 6rpx solid #2f9a4f;
|
}
|
|
.cu-contract-bill-card__top {
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
gap: 16rpx;
|
padding: 24rpx 24rpx 0;
|
}
|
|
.cu-contract-bill-card__title-wrap {
|
min-width: 0;
|
flex: 1;
|
}
|
|
.cu-contract-bill-card__type {
|
display: block;
|
font-size: 30rpx;
|
font-weight: 600;
|
color: $cu-text;
|
}
|
|
.cu-contract-bill-card__code {
|
display: block;
|
margin-top: 8rpx;
|
font-size: 24rpx;
|
color: $cu-text-muted;
|
word-break: break-all;
|
}
|
|
.cu-contract-bill-card__status {
|
flex-shrink: 0;
|
padding: 8rpx 16rpx;
|
border-radius: 999rpx;
|
font-size: 22rpx;
|
font-weight: 500;
|
background: #f0f2f6;
|
color: $cu-text-muted;
|
}
|
|
.cu-contract-bill-card__status--ok {
|
background: #edf9f0;
|
color: #2f9a4f;
|
}
|
|
.cu-contract-bill-card__status--warn {
|
background: #fff7e6;
|
color: #e68a00;
|
}
|
|
.cu-contract-bill-card__status--bad {
|
background: #fff1f0;
|
color: $cu-danger;
|
}
|
|
.cu-contract-bill-card__status--muted {
|
background: #f0f2f6;
|
color: $cu-text-muted;
|
}
|
|
.cu-contract-bill-card__amounts {
|
display: flex;
|
align-items: stretch;
|
margin: 20rpx 24rpx 0;
|
padding: 20rpx;
|
border-radius: 14rpx;
|
background: #f8fafc;
|
}
|
|
.cu-contract-bill-card__amount-item {
|
flex: 1;
|
min-width: 0;
|
}
|
|
.cu-contract-bill-card__amount-divider {
|
width: 1rpx;
|
margin: 0 20rpx;
|
background: #e3e8ef;
|
}
|
|
.cu-contract-bill-card__amount-label {
|
display: block;
|
font-size: 22rpx;
|
color: $cu-text-muted;
|
margin-bottom: 8rpx;
|
}
|
|
.cu-contract-bill-card__amount-value {
|
display: block;
|
font-size: 32rpx;
|
font-weight: 700;
|
color: $cu-text;
|
}
|
|
.cu-contract-bill-card__amount-value--muted {
|
font-size: 28rpx;
|
font-weight: 600;
|
color: #5c6b7f;
|
}
|
|
.cu-contract-bill-card--pay .cu-contract-bill-card__amount-value {
|
color: #e68a00;
|
}
|
|
.cu-contract-bill-card--in .cu-contract-bill-card__amount-value {
|
color: #2f9a4f;
|
}
|
|
.cu-contract-bill-card__overdue {
|
margin: 16rpx 24rpx 0;
|
padding: 10rpx 16rpx;
|
border-radius: 8rpx;
|
background: #fff1f0;
|
color: $cu-danger;
|
font-size: 22rpx;
|
font-weight: 500;
|
}
|
|
.cu-contract-bill-card__meta {
|
margin: 20rpx 24rpx 0;
|
padding-top: 20rpx;
|
border-top: 1rpx dashed #e8edf3;
|
}
|
|
.cu-contract-bill-card__meta-row {
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
gap: 24rpx;
|
margin-bottom: 14rpx;
|
}
|
|
.cu-contract-bill-card__meta-row:last-child {
|
margin-bottom: 0;
|
}
|
|
.cu-contract-bill-card__meta-label {
|
flex-shrink: 0;
|
font-size: 24rpx;
|
color: $cu-text-muted;
|
}
|
|
.cu-contract-bill-card__meta-value {
|
text-align: right;
|
font-size: 24rpx;
|
color: $cu-text;
|
line-height: 1.5;
|
word-break: break-all;
|
}
|
|
.cu-contract-bill-card__meta-value--danger {
|
color: $cu-danger;
|
font-weight: 600;
|
}
|
|
.cu-contract-bill-card__foot {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 20rpx;
|
padding: 18rpx 24rpx;
|
background: #fafbfd;
|
font-size: 24rpx;
|
color: $cu-primary;
|
}
|
|
.cu-contract-bill-card__arrow {
|
font-weight: 600;
|
}
|
|
.cu-contract-bill-toolbar {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 8rpx 24rpx 20rpx;
|
}
|
|
.cu-contract-bill-tabs {
|
display: flex;
|
background: #eef2f8;
|
border-radius: 12rpx;
|
padding: 6rpx;
|
}
|
|
.cu-contract-bill-tabs__item {
|
min-width: 148rpx;
|
padding: 14rpx 24rpx;
|
text-align: center;
|
font-size: 26rpx;
|
color: $cu-text-muted;
|
border-radius: 10rpx;
|
}
|
|
.cu-contract-bill-tabs__item--active {
|
background: #fff;
|
color: $cu-primary;
|
font-weight: 600;
|
box-shadow: 0 4rpx 12rpx rgba(32, 128, 247, 0.12);
|
}
|
|
.cu-contract-bill-toolbar__count {
|
font-size: 24rpx;
|
color: $cu-text-muted;
|
}
|
|
.cu-contract-bill-grid {
|
display: flex;
|
flex-wrap: wrap;
|
margin-top: 20rpx;
|
padding-top: 20rpx;
|
border-top: 1rpx solid #eef1f6;
|
}
|
|
.cu-contract-bill-grid__item {
|
width: 50%;
|
margin-bottom: 18rpx;
|
padding-right: 12rpx;
|
box-sizing: border-box;
|
}
|
|
.cu-contract-bill-grid__item--full {
|
width: 100%;
|
padding-right: 0;
|
}
|
|
.cu-contract-bill-grid__label {
|
display: block;
|
font-size: 22rpx;
|
color: $cu-text-muted;
|
margin-bottom: 8rpx;
|
}
|
|
.cu-contract-bill-grid__value {
|
display: block;
|
font-size: 26rpx;
|
color: $cu-text;
|
line-height: 1.4;
|
word-break: break-all;
|
}
|
|
.cu-contract-bill-grid__value--danger {
|
color: $cu-danger;
|
font-weight: 600;
|
}
|
|
.cu-clause-panel {
|
padding-bottom: 8rpx;
|
}
|
|
.cu-clause-panel__head {
|
display: flex;
|
align-items: center;
|
gap: 16rpx;
|
padding: 24rpx 28rpx 12rpx;
|
}
|
|
.cu-clause-panel__badge {
|
width: 56rpx;
|
height: 56rpx;
|
border-radius: 16rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-shrink: 0;
|
}
|
|
.cu-clause-panel--zl .cu-clause-panel__badge {
|
background: linear-gradient(135deg, #69c0ff 0%, #1890ff 100%);
|
box-shadow: 0 8rpx 22rpx rgba(24, 144, 255, 0.42);
|
}
|
|
.cu-clause-panel--wy .cu-clause-panel__badge {
|
background: linear-gradient(135deg, #95de64 0%, #389e0d 100%);
|
box-shadow: 0 8rpx 22rpx rgba(56, 158, 13, 0.42);
|
}
|
|
.cu-clause-panel__title {
|
font-size: 30rpx;
|
font-weight: 600;
|
color: $cu-text;
|
}
|
|
.cu-clause-summary {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 12rpx;
|
padding: 8rpx 24rpx 20rpx;
|
}
|
|
.cu-clause-chip {
|
flex: 1;
|
min-width: calc(50% - 6rpx);
|
padding: 18rpx 20rpx;
|
border-radius: 16rpx;
|
background: #f8fafc;
|
}
|
|
.cu-clause-panel--zl .cu-clause-chip {
|
background: linear-gradient(180deg, #f3f8ff 0%, #f8fafc 100%);
|
}
|
|
.cu-clause-panel--wy .cu-clause-chip {
|
background: linear-gradient(180deg, #f0faf4 0%, #f8fafc 100%);
|
}
|
|
.cu-clause-chip--wide {
|
flex: 1 1 100%;
|
min-width: 100%;
|
}
|
|
.cu-clause-chip__label {
|
display: block;
|
font-size: 22rpx;
|
color: $cu-text-muted;
|
margin-bottom: 8rpx;
|
}
|
|
.cu-clause-chip__value {
|
display: block;
|
font-size: 28rpx;
|
font-weight: 500;
|
color: $cu-text;
|
line-height: 1.4;
|
word-break: break-all;
|
}
|
|
.cu-clause-detail-list {
|
padding: 0 24rpx 16rpx;
|
display: flex;
|
flex-direction: column;
|
gap: 16rpx;
|
}
|
|
.cu-clause-detail-card {
|
padding: 4rpx;
|
border-radius: 18rpx;
|
background: linear-gradient(135deg, rgba(32, 128, 247, 0.12), rgba(32, 128, 247, 0.04));
|
}
|
|
.cu-clause-panel--wy .cu-clause-detail-card {
|
background: linear-gradient(135deg, rgba(47, 154, 79, 0.12), rgba(47, 154, 79, 0.04));
|
}
|
|
.cu-clause-detail-grid {
|
display: flex;
|
flex-wrap: wrap;
|
padding: 20rpx;
|
border-radius: 16rpx;
|
background: #fff;
|
gap: 16rpx 12rpx;
|
}
|
|
.cu-clause-detail-grid__item {
|
width: calc(50% - 6rpx);
|
padding: 16rpx 18rpx;
|
border-radius: 12rpx;
|
background: #f8fafc;
|
box-sizing: border-box;
|
}
|
|
.cu-clause-panel--zl .cu-clause-detail-grid__item--highlight {
|
background: linear-gradient(135deg, #eef5ff 0%, #f8fbff 100%);
|
}
|
|
.cu-clause-panel--wy .cu-clause-detail-grid__item--highlight {
|
background: linear-gradient(135deg, #edf9f0 0%, #f6fcf8 100%);
|
}
|
|
.cu-clause-detail-grid__label {
|
display: block;
|
font-size: 22rpx;
|
color: $cu-text-muted;
|
margin-bottom: 8rpx;
|
}
|
|
.cu-clause-detail-grid__value {
|
display: block;
|
font-size: 26rpx;
|
font-weight: 500;
|
color: $cu-text;
|
line-height: 1.45;
|
word-break: break-all;
|
}
|
|
.cu-clause-panel--zl .cu-clause-detail-grid__item--highlight .cu-clause-detail-grid__value {
|
color: $cu-primary;
|
font-weight: 600;
|
}
|
|
.cu-clause-panel--wy .cu-clause-detail-grid__item--highlight .cu-clause-detail-grid__value {
|
color: #2f9a4f;
|
font-weight: 600;
|
}
|
|
.cu-clause-empty {
|
padding: 32rpx 24rpx;
|
margin: 0 24rpx 8rpx;
|
text-align: center;
|
font-size: 24rpx;
|
color: $cu-text-muted;
|
background: #f8fafc;
|
border-radius: 16rpx;
|
}
|
|
.cu-bill-detail-hero {
|
position: relative;
|
margin: 24rpx 24rpx 0;
|
border-radius: $cu-radius;
|
overflow: hidden;
|
box-shadow: 0 16rpx 48rpx rgba(32, 128, 247, 0.22);
|
}
|
|
.cu-bill-detail-hero__bg {
|
position: absolute;
|
inset: 0;
|
background: linear-gradient(145deg, #2080f7 0%, #4a9bff 55%, #6eb3ff 100%);
|
}
|
|
.cu-bill-detail-hero--warn .cu-bill-detail-hero__bg {
|
background: linear-gradient(145deg, #ff8f3d 0%, #ffb347 100%);
|
box-shadow: 0 16rpx 48rpx rgba(255, 143, 61, 0.22);
|
}
|
|
.cu-bill-detail-hero--ok .cu-bill-detail-hero__bg {
|
background: linear-gradient(145deg, #19be6b 0%, #3dd68c 100%);
|
}
|
|
.cu-bill-detail-hero__content {
|
position: relative;
|
z-index: 1;
|
padding: 36rpx 32rpx;
|
color: #fff;
|
}
|
|
.cu-bill-detail-hero__top {
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
gap: 16rpx;
|
margin-bottom: 28rpx;
|
}
|
|
.cu-bill-detail-hero__type {
|
display: inline-flex;
|
padding: 6rpx 14rpx;
|
background: rgba(255, 255, 255, 0.18);
|
border-radius: 8rpx;
|
font-size: 22rpx;
|
margin-bottom: 12rpx;
|
}
|
|
.cu-bill-detail-hero__code {
|
font-size: 30rpx;
|
font-weight: 600;
|
line-height: 1.4;
|
word-break: break-all;
|
}
|
|
.cu-bill-detail-hero__status {
|
flex-shrink: 0;
|
padding: 8rpx 18rpx;
|
background: rgba(255, 255, 255, 0.22);
|
border-radius: 999rpx;
|
font-size: 24rpx;
|
}
|
|
.cu-bill-detail-hero__amount-label {
|
display: block;
|
font-size: 24rpx;
|
opacity: 0.88;
|
margin-bottom: 10rpx;
|
}
|
|
.cu-bill-detail-hero__amount {
|
display: block;
|
font-size: 60rpx;
|
font-weight: 700;
|
line-height: 1.1;
|
}
|
|
.cu-bill-detail-hero__due {
|
display: block;
|
margin-top: 14rpx;
|
font-size: 24rpx;
|
opacity: 0.9;
|
}
|
|
.cu-bill-stat-row {
|
display: flex;
|
gap: 16rpx;
|
margin: 20rpx 24rpx 0;
|
}
|
|
.cu-bill-stat {
|
flex: 1;
|
padding: 22rpx 16rpx;
|
background: $cu-card-bg;
|
border-radius: 16rpx;
|
box-shadow: $cu-shadow;
|
text-align: center;
|
}
|
|
.cu-bill-stat__label {
|
display: block;
|
font-size: 22rpx;
|
color: $cu-text-muted;
|
margin-bottom: 10rpx;
|
}
|
|
.cu-bill-stat__value {
|
display: block;
|
font-size: 28rpx;
|
font-weight: 700;
|
color: $cu-text;
|
}
|
|
.cu-bill-stat__value--danger {
|
color: $cu-danger;
|
}
|
|
.cu-bill-panel {
|
margin-top: 20rpx;
|
}
|
|
.cu-bill-info-grid {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 16rpx;
|
padding: 0 28rpx 24rpx;
|
}
|
|
.cu-bill-info-item {
|
width: calc(50% - 8rpx);
|
padding: 18rpx 20rpx;
|
background: #fafbfc;
|
border-radius: 14rpx;
|
}
|
|
.cu-bill-info-item--full {
|
width: 100%;
|
}
|
|
.cu-bill-info-item__label {
|
display: block;
|
font-size: 22rpx;
|
color: $cu-text-muted;
|
margin-bottom: 8rpx;
|
}
|
|
.cu-bill-info-item__value {
|
display: block;
|
font-size: 26rpx;
|
color: $cu-text;
|
font-weight: 500;
|
line-height: 1.4;
|
word-break: break-all;
|
}
|
|
.cu-bill-timeline {
|
padding: 0 28rpx 12rpx;
|
}
|
|
.cu-bill-timeline__item {
|
display: flex;
|
align-items: flex-start;
|
gap: 18rpx;
|
padding: 22rpx 0;
|
border-bottom: 1rpx solid #f0f2f6;
|
}
|
|
.cu-bill-timeline__item:last-child {
|
border-bottom: none;
|
}
|
|
.cu-bill-timeline__icon {
|
width: 64rpx;
|
height: 64rpx;
|
border-radius: 18rpx;
|
background: linear-gradient(135deg, #eef2ff, #d6e4ff);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 30rpx;
|
flex-shrink: 0;
|
}
|
|
.cu-bill-timeline__main {
|
flex: 1;
|
min-width: 0;
|
}
|
|
.cu-bill-timeline__title {
|
font-size: 28rpx;
|
font-weight: 600;
|
color: $cu-text;
|
margin-bottom: 6rpx;
|
}
|
|
.cu-bill-timeline__amount {
|
font-size: 32rpx;
|
font-weight: 700;
|
color: $cu-success;
|
margin-bottom: 6rpx;
|
}
|
|
.cu-bill-timeline__time {
|
font-size: 24rpx;
|
color: $cu-text-muted;
|
}
|
|
.cu-bill-empty-record {
|
margin: 20rpx 24rpx 0;
|
padding: 48rpx 24rpx;
|
background: $cu-card-bg;
|
border-radius: $cu-radius;
|
box-shadow: $cu-shadow;
|
text-align: center;
|
}
|
|
.cu-bill-empty-record__icon {
|
display: block;
|
font-size: 48rpx;
|
margin-bottom: 12rpx;
|
}
|
|
.cu-bill-empty-record__text {
|
font-size: 26rpx;
|
color: $cu-text-muted;
|
}
|
|
.cu-bill-empty-record--inset {
|
margin: 0;
|
box-shadow: none;
|
padding: 32rpx 24rpx 40rpx;
|
}
|
|
.cu-revenue-list {
|
padding: 0 28rpx 24rpx;
|
}
|
|
.cu-revenue-card {
|
padding: 24rpx;
|
background: #fafbfc;
|
border-radius: 16rpx;
|
border: 1rpx solid #eef1f6;
|
margin-bottom: 16rpx;
|
}
|
|
.cu-revenue-card:last-child {
|
margin-bottom: 0;
|
}
|
|
.cu-revenue-card__head {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
gap: 16rpx;
|
margin-bottom: 18rpx;
|
padding-bottom: 16rpx;
|
border-bottom: 1rpx solid #eef1f6;
|
}
|
|
.cu-revenue-card__type {
|
padding: 6rpx 14rpx;
|
background: #edf9f0;
|
color: #2f9a4f;
|
border-radius: 8rpx;
|
font-size: 22rpx;
|
font-weight: 500;
|
}
|
|
.cu-revenue-card__type--out {
|
background: #fff1f0;
|
color: $cu-danger;
|
}
|
|
.cu-revenue-card__amount {
|
font-size: 32rpx;
|
font-weight: 700;
|
color: $cu-text;
|
}
|
|
.cu-revenue-card__row {
|
display: flex;
|
align-items: flex-start;
|
gap: 16rpx;
|
padding: 10rpx 0;
|
font-size: 24rpx;
|
line-height: 1.5;
|
}
|
|
.cu-revenue-card__label {
|
flex-shrink: 0;
|
width: 140rpx;
|
color: $cu-text-muted;
|
}
|
|
.cu-revenue-card__value {
|
flex: 1;
|
color: $cu-text-secondary;
|
word-break: break-all;
|
}
|
|
.cu-bill-detail-footer {
|
display: flex;
|
align-items: center;
|
gap: 20rpx;
|
}
|
|
.cu-bill-detail-footer__info {
|
flex: 1;
|
min-width: 0;
|
}
|
|
.cu-bill-detail-footer__label {
|
display: block;
|
font-size: 22rpx;
|
color: $cu-text-muted;
|
margin-bottom: 4rpx;
|
}
|
|
.cu-bill-detail-footer__amount {
|
display: block;
|
font-size: 36rpx;
|
font-weight: 700;
|
color: $cu-danger;
|
}
|
|
.cu-bill-detail-footer__btn {
|
flex-shrink: 0;
|
min-width: 220rpx;
|
margin-top: 0 !important;
|
}
|
