基本样式变更
This commit is contained in:
+41
-22
@@ -33,11 +33,15 @@
|
||||
</view>
|
||||
|
||||
<view v-if="logs.length" class="card block">
|
||||
<text class="h">流转轨迹</text>
|
||||
<text class="h">审批流程</text>
|
||||
<view v-for="(log, i) in logs" :key="i" class="log">
|
||||
<text class="who">{{ log.who || log.actor || log.userName }} · {{ log.action }}</text>
|
||||
<text v-if="log.comment" class="s">{{ log.comment }}</text>
|
||||
<text class="s">{{ log.label || log.time || log.at || '' }}</text>
|
||||
<view class="dot" :class="{ last: i === logs.length - 1 }" />
|
||||
<view class="logb">
|
||||
<text class="who">{{ log.who || log.actor || log.userName }}</text>
|
||||
<text class="act">{{ log.action }}</text>
|
||||
<text v-if="log.comment" class="s">{{ log.comment }}</text>
|
||||
<text class="s">{{ log.label || log.time || log.at || '' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -149,26 +153,41 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.body { padding: 24rpx; padding-bottom: 80rpx; }
|
||||
.body { padding: 24rpx 28rpx 200rpx; }
|
||||
.card { padding: 28rpx; margin-bottom: 16rpx; }
|
||||
.block { padding: 24rpx 28rpx; }
|
||||
.h { display: block; font-size: 26rpx; font-weight: 700; margin-bottom: 12rpx; }
|
||||
.t { display: block; font-size: 34rpx; font-weight: 700; }
|
||||
.s { display: block; font-size: 24rpx; color: #737686; margin-top: 8rpx; }
|
||||
.amt { display: block; margin-top: 12rpx; color: #004ac6; font-weight: 700; font-size: 32rpx; }
|
||||
.kv { display: flex; padding: 10rpx 0; border-bottom: 1rpx solid #eaedff; }
|
||||
.k { width: 180rpx; color: #737686; font-size: 24rpx; }
|
||||
.v { flex: 1; font-size: 26rpx; }
|
||||
.inv { padding: 12rpx 0; border-bottom: 1rpx solid #eaedff; }
|
||||
.h { display: block; font-size: 30rpx; font-weight: 650; margin-bottom: 16rpx; }
|
||||
.t { display: block; font-size: 34rpx; font-weight: 650; line-height: 1.4; }
|
||||
.s { display: block; font-size: 24rpx; color: #6B7280; margin-top: 8rpx; }
|
||||
.amt { display: block; margin-top: 16rpx; color: #1677FF; font-weight: 650; font-size: 36rpx; }
|
||||
.kv { display: flex; padding: 16rpx 0; }
|
||||
.kv + .kv { border-top: 1rpx solid #F0F2F5; }
|
||||
.k { width: 180rpx; color: #6B7280; font-size: 26rpx; }
|
||||
.v { flex: 1; font-size: 28rpx; text-align: right; }
|
||||
.inv { padding: 16rpx 0; border-bottom: 1rpx solid #F0F2F5; }
|
||||
.tn { display: block; font-weight: 600; font-size: 26rpx; }
|
||||
.log { padding: 12rpx 0; border-bottom: 1rpx solid #eaedff; }
|
||||
.who { display: block; font-size: 26rpx; font-weight: 600; }
|
||||
.field { margin: 24rpx 0; }
|
||||
.lab { font-size: 24rpx; color: #434655; }
|
||||
.box { background: #fff; border-radius: 16rpx; padding: 20rpx; min-height: 140rpx; }
|
||||
.log { display: flex; position: relative; padding: 0 0 28rpx 8rpx; }
|
||||
.dot {
|
||||
width: 16rpx; height: 16rpx; border-radius: 50%; background: #1677FF; margin-top: 10rpx; flex-shrink: 0;
|
||||
box-shadow: 0 0 0 6rpx #E8F1FF;
|
||||
}
|
||||
.dot::after {
|
||||
content: ''; position: absolute; left: 14rpx; top: 36rpx; bottom: 0; width: 2rpx; background: #E8ECF2;
|
||||
}
|
||||
.log:last-child .dot::after { display: none; }
|
||||
.logb { margin-left: 20rpx; flex: 1; }
|
||||
.who { display: block; font-size: 28rpx; font-weight: 600; }
|
||||
.act { display: block; font-size: 24rpx; color: #1677FF; margin-top: 4rpx; }
|
||||
.field { margin: 8rpx 0 20rpx; }
|
||||
.lab { font-size: 26rpx; color: #4B5563; }
|
||||
.box { background: #F5F7FA; border-radius: 16rpx; padding: 20rpx; min-height: 140rpx; margin-top: 10rpx; }
|
||||
.acts {
|
||||
position: fixed; left: 0; right: 0; bottom: 0; background: #fff;
|
||||
border-top: 1rpx solid #E8ECF2; padding: 16rpx 28rpx calc(16rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
.btns { display: flex; gap: 16rpx; }
|
||||
.btn { flex: 1; height: 88rpx; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; }
|
||||
.no { background: #ffdad6; color: #ba1a1a; }
|
||||
.yes { flex: 1; }
|
||||
.empty { padding: 80rpx; text-align: center; color: #737686; }
|
||||
.btn { flex: 1; height: 88rpx; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; font-size: 30rpx; font-weight: 600; }
|
||||
.no { background: #fff; color: #DC2626; border: 1rpx solid #FECACA; }
|
||||
.yes { flex: 1.4; }
|
||||
.empty { padding: 80rpx; text-align: center; color: #6B7280; }
|
||||
</style>
|
||||
|
||||
+26
-12
@@ -3,17 +3,24 @@
|
||||
<fy-header title="待办审批" back />
|
||||
<view v-if="!can" class="deny">当前账号没有审批或申请权限</view>
|
||||
<view v-else>
|
||||
<view class="tabs">
|
||||
<scroll-view scroll-x class="tabs" :show-scrollbar="false">
|
||||
<text v-for="t in tabs" :key="t.id" class="tab" :class="{ on: tab === t.id }" @click="switchTab(t.id)">{{ t.title }}</text>
|
||||
</scroll-view>
|
||||
<view v-if="loading" class="empty">
|
||||
<view class="sk" /><view class="sk short" />
|
||||
</view>
|
||||
<view v-else-if="!rows.length" class="empty">
|
||||
<text class="et">暂无事项</text>
|
||||
<text class="es">当前分类下没有需要处理的记录</text>
|
||||
</view>
|
||||
<view v-if="loading" class="empty">加载中…</view>
|
||||
<view v-else-if="!rows.length" class="empty">暂无记录</view>
|
||||
<view v-for="r in rows" :key="r.no || r.id" class="card item" @click="open(r)">
|
||||
<view>
|
||||
<view class="main">
|
||||
<text class="type">{{ r.typeLabel || r.type || '审批' }}</text>
|
||||
<text class="t">{{ r.title || r.no }}</text>
|
||||
<text class="s">{{ r.typeLabel || r.type }} · {{ r.submitter || r.assigneeName || '' }}</text>
|
||||
<text class="s">{{ r.submitter || r.assigneeName || '' }}</text>
|
||||
</view>
|
||||
<text class="chip">{{ r.status || '待处理' }}</text>
|
||||
<text class="arr">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -83,11 +90,18 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tabs { display: flex; padding: 16rpx 16rpx 0; }
|
||||
.tab { flex: 1; text-align: center; font-size: 24rpx; color: #737686; padding: 16rpx 0; }
|
||||
.tab.on { color: #2563eb; font-weight: 700; border-bottom: 4rpx solid #2563eb; }
|
||||
.item { margin: 16rpx 24rpx; padding: 24rpx; display: flex; justify-content: space-between; align-items: center; }
|
||||
.t { display: block; font-size: 28rpx; font-weight: 600; }
|
||||
.s { font-size: 22rpx; color: #737686; }
|
||||
.empty, .deny { padding: 80rpx; text-align: center; color: #737686; }
|
||||
.tabs { white-space: nowrap; padding: 8rpx 20rpx 0; }
|
||||
.tab { display: inline-block; font-size: 28rpx; color: #6B7280; padding: 18rpx 24rpx; }
|
||||
.tab.on { color: #1677FF; font-weight: 650; border-bottom: 4rpx solid #1677FF; }
|
||||
.item { margin: 16rpx 28rpx; padding: 24rpx; display: flex; align-items: center; }
|
||||
.main { flex: 1; min-width: 0; }
|
||||
.type { display: inline-block; font-size: 22rpx; color: #1677FF; background: #E8F1FF; border-radius: 8rpx; padding: 2rpx 10rpx; margin-bottom: 8rpx; }
|
||||
.t { display: block; font-size: 28rpx; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.s { display: block; font-size: 24rpx; color: #6B7280; margin-top: 6rpx; }
|
||||
.arr { color: #C4C9D4; font-size: 32rpx; margin-left: 8rpx; }
|
||||
.empty, .deny { padding: 80rpx 40rpx; text-align: center; color: #6B7280; }
|
||||
.et { display: block; font-size: 30rpx; font-weight: 600; color: #111827; }
|
||||
.es { display: block; font-size: 24rpx; margin-top: 8rpx; }
|
||||
.sk { height: 28rpx; background: #E8ECF2; border-radius: 8rpx; margin: 0 auto 16rpx; width: 60%; }
|
||||
.sk.short { width: 36%; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user