Skip to content

梁建民 / scm_app

Go to a project
Commit a3ec3504 by liangjianmin
Options

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

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