duxingchen/track
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 移动端流转树主轴连线与卡片排版优化

Browse Source 
- 中央垂直线首行从 50% 起、末行到 50% 止,不再冒出
- FlowCard 时间独占一行,操作日志独立一行靠右对齐
This commit is contained in:
duxingchen
2026-09-01 14:42:59 +08:00
parent 34618579c8
commit 84af09ea75
2 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
track-uniapp/src/pages/scan/components/FlowCard.vue
View File

@ -12,10 +12,10 @@
<text v-if="isWarehouseTask" class="fc-warehouse-in">📥 转入在库: {{ formatUserName(node.assignee_id) }}</text>
<text v-else class="fc-assignee">👤 {{ formatUserName(node.assignee_id) || '未分配' }}</text>
</view>
<view class="fc-bottom">
<text class="fc-time">⏰ {{ fmtDate(node.created_at) }}{{ node.completed_at ? '→' + fmtDate(node.completed_at) : '→至今' }}</text>
<text v-if="node.records && node.records.length" class="fc-records" @tap.stop="$emit('viewRecords', node)">📋{{ node.records.length }}条 ›</text>
</view>
<!-- 时间独占一行 -->
<text class="fc-time">⏰ {{ fmtDate(node.created_at) }}{{ node.completed_at ? '→' + fmtDate(node.completed_at) : '→至今' }}</text>
<!-- 操作日志：时间下方独立一行，靠右对齐 -->
<text v-if="node.records && node.records.length" class="fc-records" @tap.stop="$emit('viewRecords', node)">📋{{ node.records.length }}条 ›</text>
</view>
</template>
@ -106,7 +106,8 @@ export default {
.fc-meta { margin-top: 4px; font-size: 11px; }
.fc-assignee { color: #4b5563; }
.fc-warehouse-in { color: #059669; font-weight: 700; }
.fc-bottom { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 6px; }
.fc-time { font-size: 10px; color: #9ca3af; }
.fc-records { font-size: 10px; color: #2563eb; font-weight: 600; }
/* 时间独占一行 */
.fc-time { display: block; font-size: 10px; color: #9ca3af; margin-top: 6px; }
/* 操作日志：独立一行靠右对齐 */
.fc-records { display: block; text-align: right; margin-top: 4px; font-size: 11px; color: #2563eb; font-weight: 600; }
</style>

12
track-uniapp/src/pages/scan/components/TreeCanvas.vue
View File

@ -18,9 +18,15 @@
<scroll-view v-else scroll-x class="tree-scroll" :style="{ height: scrollHeight + 'px' }">
<view class="tree-canvas" :style="{ width: canvasWidth + 'px' }">
<!-- 每条主线一个 Row：[左翼] - [中央主线卡片] - [右翼] -->
<view v-for="mainTask in allMains" :key="mainTask.id" class="flow-row">
<!-- 中央主干道垂直线（绝对定位，穿透整行） -->
<view class="flow-vline" />
<view v-for="(mainTask, idx) in allMains" :key="mainTask.id" class="flow-row">
<!-- 中央主干道垂直线：首行从卡片中间起、末行到卡片中间止，避免冒出/多截 -->
<view
class="flow-vline"
:style="{
top: idx === 0 ? '50%' : '0',
bottom: idx === allMains.length - 1 ? '50%' : '0'
}"
/>
<!-- 左翼：奇数分支（向下/左展开） -->
<view class="flow-side flow-left">