yuming
418 lines
6.6 KiB
Plaintext
418 lines
6.6 KiB
Plaintext
/* index.wxss
|
||
* 视觉方向：纸感编辑风（A 方案）
|
||
* - 浅米黄底（暖中性，反 SaaS 通用感）
|
||
* - 墨蓝主文字 + 暖灰副文字
|
||
* - 仅「今天/FAB」用墨红强调（Restrained，强调色占比 < 10%）
|
||
* - 删除原 #6366f1→#8b5cf6 紫渐变、glassmorphism、bounce 动画、border-left 大色条
|
||
*/
|
||
|
||
page {
|
||
background: #FAF6ED;
|
||
}
|
||
|
||
.page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
background: #FAF6ED;
|
||
}
|
||
|
||
/* ───── Header ───── */
|
||
.header {
|
||
padding: 56rpx 36rpx 24rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.header-title {
|
||
display: block;
|
||
font-size: 52rpx;
|
||
font-weight: 600;
|
||
color: #1F1D2B;
|
||
line-height: 1.15;
|
||
letter-spacing: -0.5rpx;
|
||
}
|
||
|
||
.header-date {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: #8A8278;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.header-rule {
|
||
height: 1rpx;
|
||
background: #E8E2D5;
|
||
margin-top: 28rpx;
|
||
}
|
||
|
||
.stats-row {
|
||
display: flex;
|
||
gap: 64rpx;
|
||
padding-top: 24rpx;
|
||
}
|
||
|
||
.stat-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4rpx;
|
||
}
|
||
|
||
.stat-num {
|
||
font-size: 44rpx;
|
||
font-weight: 600;
|
||
color: #1F1D2B;
|
||
line-height: 1;
|
||
letter-spacing: -1rpx;
|
||
}
|
||
|
||
.stat-num-urgent {
|
||
color: #C8412F;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 24rpx;
|
||
color: #8A8278;
|
||
}
|
||
|
||
.stat-sep {
|
||
display: none;
|
||
}
|
||
|
||
/* ───── Search ───── */
|
||
.search-wrap {
|
||
padding: 16rpx 24rpx 8rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.search-box {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #FFFFFF;
|
||
border: 1rpx solid #E8E2D5;
|
||
border-radius: 14rpx;
|
||
padding: 18rpx 24rpx;
|
||
}
|
||
|
||
.search-icon {
|
||
font-size: 30rpx;
|
||
margin-right: 14rpx;
|
||
opacity: 0.55;
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #1F1D2B;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.search-placeholder {
|
||
color: #A9A096;
|
||
}
|
||
|
||
/* ───── Filter ───── */
|
||
.filter-scroll {
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.filter-bar {
|
||
display: flex;
|
||
padding: 16rpx 24rpx 8rpx;
|
||
gap: 36rpx;
|
||
}
|
||
|
||
.filter-tab {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 10rpx 0;
|
||
font-size: 28rpx;
|
||
color: #8A8278;
|
||
background: transparent;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
border-bottom: 4rpx solid transparent;
|
||
transition: color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
|
||
}
|
||
|
||
.tab-active {
|
||
color: #1F1D2B;
|
||
font-weight: 600;
|
||
border-bottom-color: #1F1D2B;
|
||
}
|
||
|
||
/* ───── List ───── */
|
||
.list {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
padding: 16rpx 24rpx 0;
|
||
}
|
||
|
||
/* ───── Card ───── */
|
||
.card {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #FFFFFF;
|
||
border: 1rpx solid #E8E2D5;
|
||
border-radius: 14rpx;
|
||
padding: 24rpx 24rpx 24rpx 20rpx;
|
||
margin-bottom: 16rpx;
|
||
transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
|
||
}
|
||
|
||
.card:active {
|
||
transform: scale(0.985);
|
||
}
|
||
|
||
/* 强调用整卡背景 tint，不再用粗 border-left（绝对禁用项之一） */
|
||
.card-urgent {
|
||
background: #FFF8EE;
|
||
border-color: #EFD9B5;
|
||
}
|
||
|
||
.card-today {
|
||
background: #FFF1EA;
|
||
border-color: #E8BCA7;
|
||
}
|
||
|
||
/* ───── Avatar ───── */
|
||
.avatar-wrap {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
flex-shrink: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.avatar-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.avatar-placeholder {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
background: #EFE9DC;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.avatar-initial {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #5A5247;
|
||
}
|
||
|
||
/* ───── Card body ───── */
|
||
.card-body {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.card-row-top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.name-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
min-width: 0;
|
||
flex: 1;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.card-name {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #1F1D2B;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.card-nickname {
|
||
font-size: 22rpx;
|
||
color: #8A8278;
|
||
background: #F2EEE5;
|
||
padding: 3rpx 12rpx;
|
||
border-radius: 18rpx;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ───── Badge ───── */
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 20rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.badge-text {
|
||
font-size: 22rpx;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.badge-today {
|
||
background: #FFE3D7;
|
||
}
|
||
.badge-today .badge-text {
|
||
color: #C8412F;
|
||
}
|
||
|
||
.badge-hot {
|
||
background: #FFEFD9;
|
||
}
|
||
.badge-hot .badge-text {
|
||
color: #B36A1F;
|
||
}
|
||
|
||
.badge-soon {
|
||
background: #FAF1D9;
|
||
}
|
||
.badge-soon .badge-text {
|
||
color: #8C7322;
|
||
}
|
||
|
||
.badge-month {
|
||
background: #ECE6D7;
|
||
}
|
||
.badge-month .badge-text {
|
||
color: #6F664E;
|
||
}
|
||
|
||
.badge-normal {
|
||
background: #F2EEE5;
|
||
}
|
||
.badge-normal .badge-text {
|
||
color: #8A8278;
|
||
}
|
||
|
||
/* ───── Anniversary row ───── */
|
||
.card-row-ann {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.ann-icon {
|
||
font-size: 26rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.ann-info {
|
||
font-size: 26rpx;
|
||
color: #5A5247;
|
||
flex: 1;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.muted {
|
||
color: #A9A096;
|
||
}
|
||
|
||
.ann-more {
|
||
font-size: 22rpx;
|
||
color: #8A8278;
|
||
background: #F2EEE5;
|
||
padding: 3rpx 12rpx;
|
||
border-radius: 18rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ───── Empty state ───── */
|
||
.empty {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 160rpx 40rpx 80rpx;
|
||
}
|
||
|
||
.empty-icon {
|
||
font-size: 104rpx;
|
||
margin-bottom: 28rpx;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.empty-title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #5A5247;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.empty-hint {
|
||
font-size: 24rpx;
|
||
color: #A9A096;
|
||
}
|
||
|
||
/* ───── List bottom padding ───── */
|
||
.list-bottom {
|
||
height: 180rpx;
|
||
}
|
||
|
||
/* ───── FAB ───── */
|
||
.fab {
|
||
position: fixed;
|
||
bottom: 64rpx;
|
||
right: 36rpx;
|
||
width: 104rpx;
|
||
height: 104rpx;
|
||
border-radius: 50%;
|
||
background: #1F1D2B;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 10rpx 28rpx rgba(31, 29, 43, 0.32);
|
||
z-index: 100;
|
||
transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
|
||
}
|
||
|
||
.fab:active {
|
||
transform: scale(0.93);
|
||
}
|
||
|
||
.fab-icon {
|
||
font-size: 56rpx;
|
||
color: #FAF6ED;
|
||
font-weight: 300;
|
||
line-height: 1;
|
||
margin-top: -4rpx;
|
||
}
|
||
|
||
/* 额度风险提示卡片：仅在有提醒可能发不出去时出现 */
|
||
.quota-warn {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 0 32rpx 24rpx;
|
||
padding: 24rpx 28rpx;
|
||
background: #FBF3E4;
|
||
border: 2rpx solid #E0C89A;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.quota-warn-icon {
|
||
flex-shrink: 0;
|
||
margin-right: 16rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.quota-warn-text {
|
||
flex: 1;
|
||
font-size: 26rpx;
|
||
line-height: 1.5;
|
||
color: #8A5A1F;
|
||
}
|