Skip to content

梁建民 / scm_app

Go to a project
Commit a3ec3504 by liangjianmin
Options

style(approve): 优化申请详情页面样式和结构 

- 更新背景样式为渐变
- 调整各个信息项的布局和样式
- 增加信息项的圆角和阴影效果
- 重新设计审批日志的显示方式
parent 76ccd267
Inline Side-by-side
Showing with 247 additions and 128 deletions
assets/css/approve/detail.scss
.approve-detail-page { .approve-detail-page {
min-height: 100vh; min-height: 100vh;
background: #f5f7fa; background: linear-gradient(180deg, #f2f6ff 0, #f7f9fc 220rpx, #f4f6fa 100%);
padding-bottom: 180rpx; padding: 16rpx 16rpx 168rpx;
box-sizing: border-box;
.section { .section {
background: #ffffff; margin-bottom: 12rpx;
margin-bottom: 20rpx; background: rgba(255, 255, 255, 0.98);
border-radius: 18rpx;
box-shadow: 0 8rpx 22rpx rgba(15, 23, 42, 0.035);
overflow: hidden;
}
.section-title { .section-title {
font-size: 32rpx;
font-weight: 700;
color: #1e293b;
padding: 32rpx 32rpx 24rpx;
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 20rpx 20rpx 6rpx;
font-size: 28rpx;
font-weight: 700;
color: #1e293b;
letter-spacing: 0.5rpx;
&::before { &::before {
content: ''; content: '';
width: 8rpx; width: 6rpx;
height: 32rpx; height: 24rpx;
background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%); margin-right: 14rpx;
border-radius: 4rpx; border-radius: 999rpx;
margin-right: 16rpx; background: linear-gradient(180deg, #5a7fff 0, #3467ff 100%);
}
}
.section-body {
padding: 8rpx 20rpx 20rpx;
}
.info-list {
display: flex;
flex-direction: column;
}
.info-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14rpx 16rpx;
border-radius: 12rpx;
background: #f7faff;
& + .info-item {
margin-top: 8rpx;
}
}
.info-item-order {
align-items: flex-start;
}
.info-label {
font-size: 24rpx;
color: #5f6f86;
line-height: 32rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.info-value {
font-size: 25rpx;
color: #0f172a;
line-height: 32rpx;
text-align: right;
word-break: break-all;
}
.align-right {
max-width: 68%;
}
.info-value-box {
display: flex;
flex-direction: column;
align-items: flex-end;
} }
.link-text { .link-text {
font-size: 26rpx; margin-top: 2rpx;
color: #3b82f6; font-size: 24rpx;
color: #316cff;
line-height: 30rpx;
}
.metric-list {
display: flex;
margin-top: 8rpx;
}
.metric-card {
flex: 1;
padding: 14rpx 16rpx;
border-radius: 12rpx;
background: #f7faff;
& + .metric-card {
margin-left: 8rpx;
}
}
.metric-label {
display: block;
font-size: 24rpx;
color: #5f6f86;
line-height: 30rpx;
} }
.metric-value {
display: block;
margin-top: 4rpx;
font-size: 26rpx;
font-weight: 600;
color: #18263c;
line-height: 32rpx;
} }
.highlight-section {
.detail-content { .detail-content {
padding: 0 32rpx 32rpx; padding: 8rpx 20rpx 20rpx;
} }
.amount-box { .amount-card {
padding: 24rpx 0;
margin-bottom: 32rpx;
border-bottom: 1rpx solid #e4e7ed;
display: flex; display: flex;
align-items: baseline; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 16rpx;
border-radius: 12rpx;
background: linear-gradient(135deg, #f7fbff 0, #edf3ff 100%);
}
.amount-label { .amount-label {
font-size: 28rpx; font-size: 24rpx;
color: #303133; color: #5f6f86;
flex-shrink: 0; line-height: 30rpx;
} }
.amount-value { .amount-value {
font-size: 40rpx; font-size: 36rpx;
font-weight: 600; font-weight: 600;
color: #3b82f6; color: #316cff;
line-height: 1.3; line-height: 1;
}
} }
.reason-box { .reason-box {
margin-top: 8rpx;
padding: 16rpx;
border-radius: 12rpx;
background: #f7faff;
}
.reason-label { .reason-label {
display: block; display: block;
font-size: 26rpx; font-size: 24rpx;
color: #909399; color: #5f6f86;
margin-bottom: 12rpx; line-height: 30rpx;
} }
.reason-text { .reason-text {
display: block; display: block;
font-size: 28rpx; margin-top: 6rpx;
color: #303133; font-size: 25rpx;
line-height: 1.6; color: #18263c;
} line-height: 34rpx;
} word-break: break-all;
} }
.timeline-wrap { .timeline-wrap {
padding: 0 32rpx 24rpx; padding: 8rpx 20rpx 20rpx;
}
.timeline-item { .timeline-item {
position: relative; position: relative;
padding-left: 40rpx; padding-left: 26rpx;
padding-bottom: 32rpx;
&:last-child {
padding-bottom: 0;
&::before { & + .timeline-item {
display: none; margin-top: 10rpx;
}
} }
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
left: 8rpx; left: 7rpx;
top: 32rpx; top: 18rpx;
bottom: 0; bottom: -14rpx;
width: 2rpx; width: 1rpx;
background: #e4e7ed; background: rgba(191, 219, 254, 0.9);
}
&:last-child::before {
display: none;
}
} }
.timeline-dot { .timeline-dot {
position: absolute; position: absolute;
left: 0; left: 0;
top: 8rpx; top: 10rpx;
width: 18rpx; width: 12rpx;
height: 18rpx; height: 12rpx;
border-radius: 50%; border-radius: 50%;
background: #3b82f6; background: #3d6dff;
border: 3rpx solid #ecf5ff;
} }
.timeline-content { .timeline-content {
background: #f5f7fa; padding: 14rpx 16rpx;
border-radius: 12rpx; border-radius: 12rpx;
padding: 20rpx; background: #f7faff;
}
.log-header { .log-header {
margin-bottom: 16rpx; display: flex;
align-items: center;
.log-time { justify-content: space-between;
font-size: 24rpx;
color: #909399;
} }
.log-time,
.log-user { .log-user {
font-size: 24rpx; font-size: 24rpx;
color: #606266; color: #5f6f86;
line-height: 32rpx;
} }
.log-user {
color: #475569;
} }
.log-body { .log-body {
margin-bottom: 12rpx; margin-top: 6rpx;
.log-label {
font-size: 26rpx;
color: #909399;
} }
.log-text { .log-footer {
font-size: 26rpx; display: flex;
color: #303133; align-items: center;
} margin-top: 6rpx;
} }
.log-footer {
.log-label { .log-label {
font-size: 26rpx; font-size: 24rpx;
color: #909399; color: #5f6f86;
line-height: 34rpx;
}
.log-text {
display: block;
margin-top: 4rpx;
font-size: 24rpx;
color: #18263c;
line-height: 36rpx;
} }
.log-status { .log-status {
font-size: 26rpx; margin-left: 12rpx;
font-weight: 500; font-size: 24rpx;
font-weight: 600;
line-height: 34rpx;
&.approved { &.approved {
color: #67c23a; color: #16a34a;
} }
&.rejected { &.rejected {
color: #f56c6c; color: #dc2626;
}
}
}
}
} }
} }
.bottom-actions { .bottom-actions {
position: fixed; position: fixed;
left: 16rpx;
right: 16rpx;
bottom: 0; bottom: 0;
left: 0;
right: 0;
padding: 20rpx 32rpx;
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
background: #ffffff;
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
display: flex; display: flex;
align-items: center; align-items: center;
padding: 16rpx;
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
background: rgba(255, 255, 255, 0.96);
border-radius: 18rpx 18rpx 0 0;
box-shadow: 0 -6rpx 20rpx rgba(15, 23, 42, 0.05);
z-index: 100; z-index: 100;
} }
.approve-modal { .approve-modal {
padding: 40rpx 32rpx; padding: 40rpx 32rpx;
padding-bottom: calc(40rpx + env(safe-area-inset-bottom)); padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
background: #ffffff;
}
.modal-title { .modal-title {
margin-bottom: 32rpx;
font-size: 34rpx; font-size: 34rpx;
font-weight: 700; font-weight: 700;
color: #1e293b; color: #1e293b;
text-align: center; text-align: center;
margin-bottom: 40rpx;
} }
.modal-body { .modal-body {
margin-bottom: 40rpx; margin-bottom: 40rpx;
padding: 24rpx;
border-radius: 18rpx;
background: #f8fafc;
}
.modal-textarea-wrap { .modal-textarea-wrap {
margin-top: 32rpx; margin-top: 28rpx;
}
} }
.modal-footer { .modal-footer {
display: flex; display: flex;
align-items: center; align-items: center;
} }
}
} }
pages/approve/detail.vue
...@@ -2,48 +2,65 @@ ...@@ -2,48 +2,65 @@
<view class="approve-detail-page"> <view class="approve-detail-page">
<view class="section"> <view class="section">
<view class="section-title">申请信息</view> <view class="section-title">申请信息</view>
<u-cell-group> <view class="section-body">
<u-cell title="申请类型" value="费用减免申请"></u-cell> <view class="info-list">
<u-cell title="客户名称" :value="detail.customer_name"></u-cell> <view class="info-item">
<u-cell title="减免明细" :value="detail.relief_detail"></u-cell> <text class="info-label">申请类型</text>
<u-cell title="申请时间" :value="detail.create_time"></u-cell> <text class="info-value">费用减免申请</text>
<u-cell title="订单号" :value="detail.order_sn" :value-style="{ flex: 1 }" :border="false"> </view>
<template #value> <view class="info-item">
<view class="row verCenter bothSide" style="flex: 1;"> <text class="info-label">客户名称</text>
<text>{{ detail.order_sn }}</text> <text class="info-value align-right">{{ detail.customer_name }}</text>
</view>
<view class="info-item">
<text class="info-label">减免明细</text>
<text class="info-value">{{ detail.relief_detail }}</text>
</view>
<view class="info-item">
<text class="info-label">申请时间</text>
<text class="info-value">{{ detail.create_time }}</text>
</view>
<view class="info-item info-item-order">
<text class="info-label">订单号</text>
<view class="info-value-box">
<text class="info-value">{{ detail.order_sn }}</text>
<text class="link-text">申请人：{{ detail.applicant_name }}</text> <text class="link-text">申请人：{{ detail.applicant_name }}</text>
</view> </view>
</template> </view>
</u-cell> </view>
</u-cell-group> </view>
</view> </view>
<view class="section"> <view class="section">
<view class="section-title">订单信息</view> <view class="section-title">订单信息</view>
<u-cell-group> <view class="section-body">
<u-cell title="订单金额(原币)" :value="orderInfo.order_price"></u-cell> <view class="info-list">
<u-cell title="订单币别" :value="orderInfo.currency_id_cn"></u-cell> <view class="info-item">
<u-cell :border="false"> <text class="info-label">订单金额(原币)</text>
<template #title> <text class="info-value">{{ orderInfo.order_price }}</text>
<view class="row verCenter bothSide" style="width: 100%;"> </view>
<view class="row verCenter"> <view class="info-item">
<text>代理费金额：</text> <text class="info-label">订单币别</text>
<text>{{ orderInfo.agent_price }}</text> <text class="info-value">{{ orderInfo.currency_id_cn }}</text>
</view>
</view>
<view class="metric-list">
<view class="metric-card">
<text class="metric-label">代理费金额</text>
<text class="metric-value">{{ orderInfo.agent_price }}</text>
</view>
<view class="metric-card">
<text class="metric-label">最低代理费</text>
<text class="metric-value">{{ orderInfo.agent_min_amount }}</text>
</view> </view>
<view class="row verCenter">
<text>最低代理费：</text>
<text>{{ orderInfo.agent_min_amount }}</text>
</view> </view>
</view> </view>
</template>
</u-cell>
</u-cell-group>
</view> </view>
<view class="section highlight-section"> <view class="section highlight-section">
<view class="section-title">明细</view> <view class="section-title">明细</view>
<view class="detail-content"> <view class="detail-content">
<view class="amount-box"> <view class="amount-card">
<text class="amount-label">申请免收金额(元)</text> <text class="amount-label">申请免收金额(元)</text>
<text class="amount-value">{{ detail.apply_fee_amount }}</text> <text class="amount-value">{{ detail.apply_fee_amount }}</text>
</view> </view>
...@@ -54,23 +71,22 @@ ...@@ -54,23 +71,22 @@
</view> </view>
</view> </view>
<!-- 审批日志 -->
<view class="section" v-if="detail.items && detail.items.length > 0"> <view class="section" v-if="detail.items && detail.items.length > 0">
<view class="section-title">审批日志</view> <view class="section-title">审批日志</view>
<view class="timeline-wrap"> <view class="timeline-wrap">
<view class="timeline-item" v-for="(log, index) in detail.items" :key="index"> <view class="timeline-item" v-for="(log, index) in detail.items" :key="index">
<view class="timeline-dot"></view> <view class="timeline-dot"></view>
<view class="timeline-content"> <view class="timeline-content">
<view class="log-header row verCenter bothSide"> <view class="log-header">
<text class="log-time">{{ log.audit_time }}</text> <text class="log-time">{{ log.audit_time }}</text>
<text class="log-user">审批人：{{ log.auditor_name }}</text> <text class="log-user">审批人：{{ log.auditor_name }}</text>
</view> </view>
<view class="log-body" v-if="log.remark"> <view class="log-body" v-if="log.remark">
<text class="log-label">审批意见：</text> <text class="log-label">审批意见</text>
<text class="log-text">{{ log.remark }}</text> <text class="log-text">{{ log.remark }}</text>
</view> </view>
<view class="log-footer"> <view class="log-footer">
<text class="log-label">审批结果：</text> <text class="log-label">审批结果</text>
<text :class="['log-status', log.approval_status === 1 ? 'approved' : 'rejected']">{{ log.approve_status_cn }}</text> <text :class="['log-status', log.approval_status === 1 ? 'approved' : 'rejected']">{{ log.approve_status_cn }}</text>
</view> </view>
</view> </view>
...@@ -83,7 +99,6 @@ ...@@ -83,7 +99,6 @@
<u-button text="审核" type="primary" shape="circle" :customStyle="{ flex: 1, background: '#2979ff' }" @click="openModal"></u-button> <u-button text="审核" type="primary" shape="circle" :customStyle="{ flex: 1, background: '#2979ff' }" @click="openModal"></u-button>
</view> </view>
<!-- 审批弹窗 - 底部弹出 -->
<u-popup :show="showModal" mode="bottom" round="24" @close="closeModal"> <u-popup :show="showModal" mode="bottom" round="24" @close="closeModal">
<view class="approve-modal"> <view class="approve-modal">
<view class="modal-title">审核销售订单</view> <view class="modal-title">审核销售订单</view>
......
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