212 lines
4.0 KiB
SCSS
212 lines
4.0 KiB
SCSS
// OA 任务中心列表壳 + OaTaskCard（对齐 list.scss 卡片节奏与 start 页间距）
|
|
|
|
.oa-task-list {
|
|
padding: 24rpx 24rpx 0;
|
|
}
|
|
|
|
/* 空态虚线软卡：与列表卡同左右 gutter，避免贴边 */
|
|
.oa-empty-wrap {
|
|
padding: 40rpx 24rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.oa-task-list__empty,
|
|
.oa-task-list__end {
|
|
padding: 48rpx 16rpx 56rpx;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: var(--text-muted, #5f7a6d);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.oa-task-list__empty {
|
|
padding-top: 96rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.oa-task-card {
|
|
position: relative;
|
|
margin-bottom: 24rpx;
|
|
border-radius: var(--radius-card, 28rpx);
|
|
background: var(--surface, #fff);
|
|
border: 1rpx solid var(--border, #d8f3e5);
|
|
box-shadow: var(--shadow-soft, 0 8rpx 32rpx rgba(22, 163, 74, 0.07));
|
|
overflow: hidden;
|
|
}
|
|
|
|
.oa-task-card__body {
|
|
padding: 28rpx 28rpx 24rpx;
|
|
}
|
|
|
|
.oa-task-card__top {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.oa-task-card__title-row {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.oa-task-card__unread {
|
|
flex-shrink: 0;
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
margin-top: 12rpx;
|
|
border-radius: 50%;
|
|
background: var(--danger, #ef4444);
|
|
}
|
|
|
|
.oa-task-card__title {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
line-height: 1.4;
|
|
color: var(--text-primary, #0f291e);
|
|
word-break: break-word;
|
|
}
|
|
|
|
.oa-task-card__status {
|
|
flex-shrink: 0;
|
|
max-width: 40%;
|
|
font-size: 22rpx;
|
|
font-weight: 650;
|
|
line-height: 1.2;
|
|
padding: 8rpx 18rpx;
|
|
border-radius: 999rpx;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.oa-task-card__status.is-warn {
|
|
background: rgba(217, 119, 6, 0.12);
|
|
color: var(--warning, #d97706);
|
|
}
|
|
|
|
.oa-task-card__status.is-success {
|
|
background: rgba(16, 185, 129, 0.12);
|
|
color: var(--success, #10b981);
|
|
}
|
|
|
|
.oa-task-card__status.is-danger {
|
|
background: rgba(239, 68, 68, 0.12);
|
|
color: var(--danger, #ef4444);
|
|
}
|
|
|
|
.oa-task-card__status.is-info {
|
|
background: rgba(95, 122, 109, 0.12);
|
|
color: var(--text-muted, #5f7a6d);
|
|
}
|
|
|
|
.oa-task-card__meta {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.oa-task-card__meta-line {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 16rpx;
|
|
font-size: 24rpx;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.oa-task-card__meta-label {
|
|
flex-shrink: 0;
|
|
min-width: 120rpx;
|
|
color: var(--text-muted, #5f7a6d);
|
|
}
|
|
|
|
.oa-task-card__meta-value {
|
|
flex: 1;
|
|
min-width: 0;
|
|
color: var(--text-primary, #0f291e);
|
|
word-break: break-word;
|
|
}
|
|
|
|
.oa-task-card__footer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 16rpx;
|
|
padding: 16rpx 24rpx 24rpx;
|
|
border-top: 1rpx dashed rgba(140, 170, 155, 0.28);
|
|
}
|
|
|
|
.oa-task-card__btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 72rpx;
|
|
min-width: 128rpx;
|
|
padding: 0 28rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 16rpx;
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
color: var(--text-primary, #0f291e);
|
|
background: #fff;
|
|
border: 1rpx solid var(--border, #d8f3e5);
|
|
}
|
|
|
|
.oa-task-card__btn:active {
|
|
opacity: 0.78;
|
|
}
|
|
|
|
.oa-task-card__btn.is-primary {
|
|
color: #fff;
|
|
background: var(--brand-green, #22c55e);
|
|
border-color: var(--brand-green, #22c55e);
|
|
}
|
|
|
|
.oa-task-card__btn.is-danger {
|
|
color: var(--danger, #ef4444);
|
|
background: rgba(239, 68, 68, 0.06);
|
|
border-color: rgba(239, 68, 68, 0.35);
|
|
}
|
|
|
|
.oa-task-card__btn.is-disabled {
|
|
opacity: 0.45;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 钉钉风列表卡 · 左上圆圈序号（五中心共用 · 方案 A） */
|
|
.dd-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding-left: 84rpx;
|
|
}
|
|
|
|
.dd-card__corner {
|
|
position: absolute;
|
|
top: 20rpx;
|
|
left: 20rpx;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #0a9f6d;
|
|
box-shadow: 0 4rpx 12rpx rgba(10, 159, 109, 0.28);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.dd-card__corner-num {
|
|
position: static;
|
|
font-size: 20rpx;
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
color: #fff;
|
|
letter-spacing: -0.02em;
|
|
}
|