Skip to content

梁建民 / scm_app

Go to a project
Commit 332ff3dd by liangjianmin
Options

feat(approve): 添加我发起审批功能并优化界面样式 

- 新增“我发起”标签页，支持查看我发起的审批
- 优化搜索框和标签样式，提升用户体验
- 重构数据获取和分页逻辑，支持多标签页数据管理
parent a224d3e1
Expand all
Inline Side-by-side
Showing with 105 additions and 89 deletions
assets/css/approve/index.scss
.approve-page { .approve-page {
min-height: 100vh; height: 100vh;
background: #f5f7fa; background: #f3f6fb;
padding-bottom: 158rpx; display: flex;
flex-direction: column;
overflow: hidden;
.search-bar { .approve-fixed {
padding: 20rpx 28rpx 0 28rpx; flex-shrink: 0;
background: #ffffff; background: #ffffff;
border-bottom: 1rpx solid #e9eef6;
position: relative;
z-index: 2;
}
.search-bar {
padding: 18rpx 28rpx 10rpx;
} }
.tabs-wrap { .tabs-wrap {
background: #ffffff; padding: 0 28rpx;
margin-bottom: 20rpx;
position: relative;
.custom-tabs { .custom-tabs {
display: flex; display: flex;
width: 100%; width: 100%;
background: #f5f7fa;
border-radius: 12rpx;
padding: 4rpx;
box-sizing: border-box;
} }
.tab-item { .tab-item {
flex: 1; flex: 1;
padding: 24rpx 20rpx; min-width: 0;
min-height: 56rpx;
padding: 0 10rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
cursor: pointer; border: 1rpx solid transparent;
transition: all 0.25s ease; border-radius: 10rpx;
min-height: 80rpx; transition: background 0.2s ease, color 0.2s ease;
.tab-text { .tab-text {
font-size: 28rpx; font-size: 26rpx;
font-weight: 400; font-weight: 500;
color: #909399; color: #59697c;
transition: all 0.25s ease;
line-height: 1.2; line-height: 1.2;
transition: all 0.2s ease;
} }
.count-badge { .count-badge {
position: relative; margin-left: 8rpx;
margin-left: 10rpx; min-width: 26rpx;
min-width: 32rpx; height: 26rpx;
height: 32rpx; padding: 0 7rpx;
padding: 0 8rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%); background: #ff5470;
border-radius: 16rpx; border-radius: 999rpx;
box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.25); box-sizing: border-box;
transition: all 0.3s ease;
.count-text { .count-text {
font-size: 20rpx; font-size: 19rpx;
font-weight: 600; font-weight: 600;
color: #ffffff; color: #ffffff;
line-height: 1; line-height: 1;
transform: scale(0.95);
}
.badge-pulse {
display: none;
} }
} }
&.active { &.active {
background: #ffffff;
border-color: #e3e8ef;
.tab-text { .tab-text {
color: #3b82f6; color: #1f2d3d;
font-weight: 600; font-weight: 700;
font-size: 32rpx;
} }
} }
} }
.tab-line {
position: absolute;
bottom: 0;
left: 25%;
width: 20%;
height: 4rpx;
background: #3b82f6;
border-radius: 2rpx;
transition: all 0.3s ease;
transform-origin: center;
}
} }
.filter-bar { .type-tabs-wrap {
padding: 20rpx 28rpx; display: flex;
background: #ffffff; gap: 12rpx;
margin-bottom: 20rpx; padding: 16rpx 28rpx 18rpx;
overflow-x: auto;
white-space: nowrap;
.filter-btn { .type-tab {
padding: 12rpx 24rpx; flex-shrink: 0;
background: #f5f7fa; min-height: 46rpx;
border-radius: 32rpx; padding: 0 20rpx;
display: flex;
align-items: center;
justify-content: center;
border: 1rpx solid #d7e2ef;
border-radius: 999rpx;
background: #ffffff;
color: #59697c;
font-size: 24rpx;
font-weight: 500;
box-sizing: border-box;
transition: all 0.2s ease;
.filter-text { &.active {
font-size: 26rpx; border-color: #2f73ff;
color: #606266; background: #2f73ff;
margin-right: 8rpx; color: #ffffff;
font-weight: 600;
} }
} }
} }
.list-scroll {
flex: 1;
height: 0;
}
.list-wrap { .list-wrap {
padding: 0 28rpx; padding: 22rpx 28rpx 158rpx;
box-sizing: border-box;
.skeleton-card { .skeleton-card {
background: #ffffff; background: #ffffff;
border-radius: 16rpx; border-radius: 14rpx;
margin-bottom: 24rpx; margin-bottom: 22rpx;
padding: 28rpx; padding: 28rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05); box-shadow: 0 8rpx 22rpx rgba(30, 41, 59, 0.06);
} }
} }
.approve-card { .approve-card {
background: #ffffff; background: #ffffff;
border-radius: 16rpx; border-radius: 14rpx;
margin-bottom: 24rpx; margin-bottom: 22rpx;
overflow: hidden; overflow: hidden;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05); box-shadow: 0 8rpx 24rpx rgba(30, 41, 59, 0.07);
.card-header { .card-header {
padding: 24rpx 28rpx 12rpx; padding: 26rpx 28rpx 12rpx;
} }
.card-title { .card-title {
font-size: 30rpx; font-size: 30rpx;
font-weight: 600; font-weight: 700;
color: #1e293b; color: #172033;
} }
.status-badge { .status-badge {
font-size: 22rpx; font-size: 22rpx;
font-weight: 500; font-weight: 600;
padding: 8rpx 16rpx; padding: 8rpx 16rpx;
border-radius: 20rpx; border-radius: 999rpx;
&.approved { &.approved {
color: #10b981; color: #0f9f6e;
background: rgba(16, 185, 129, 0.1); background: rgba(15, 159, 110, 0.1);
} }
&.rejected { &.rejected {
color: #f56c6c; color: #e5484d;
background: rgba(245, 108, 108, 0.1); background: rgba(229, 72, 77, 0.1);
} }
} }
.card-body { .card-body {
padding: 0 28rpx 20rpx; padding: 0 28rpx 22rpx;
.card-row { .card-row {
margin-bottom: 10rpx; margin-bottom: 10rpx;
.card-label { .card-label {
font-size: 26rpx; font-size: 26rpx;
color: #909399; color: #8a97a8;
width: 160rpx; width: 160rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.card-value { .card-value {
font-size: 26rpx; font-size: 26rpx;
color: #303133; color: #263447;
flex: 1; flex: 1;
word-break: break-all; word-break: break-all;
} }
.card-time { .card-time {
font-size: 24rpx; font-size: 24rpx;
color: #909399; color: #98a4b3;
margin-left: 8rpx; margin-left: 8rpx;
} }
.card-tag { .card-tag {
font-size: 24rpx; font-size: 24rpx;
color: #e6a23c; color: #d8891d;
font-weight: 500; font-weight: 600;
} }
} }
} }
.card-footer { .card-footer {
border-top: 1rpx solid #f0f1f5; border-top: 1rpx solid #edf1f6;
padding: 20rpx 28rpx; padding: 20rpx 28rpx;
.action-btn { .action-btn {
flex: 1; flex: 1;
text-align: center; text-align: center;
font-size: 28rpx; font-size: 28rpx;
font-weight: 500; font-weight: 600;
padding: 16rpx 0; padding: 16rpx 0;
border-radius: 8rpx; border-radius: 10rpx;
transition: all 0.2s ease; transition: all 0.2s ease;
&.approve { &.approve {
color: #ffffff; color: #ffffff;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); background: #2f73ff;
&:active { &:active {
opacity: 0.8; opacity: 0.82;
} }
} }
&.detail { &.detail {
color: #3b82f6; color: #2563eb;
background: rgba(59, 130, 246, 0.1); background: #edf4ff;
border: 1rpx solid rgba(59, 130, 246, 0.2); border: 1rpx solid #cfe0ff;
&:active { &:active {
background: rgba(59, 130, 246, 0.15); background: #e2edff;
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment