style: 移动端流转树视觉降噪与分支箭头方向修复
- 已完成卡片降透明度/浅灰底/深灰字;进行中卡片纯白+蓝色边框+外发光 - 分支箭头改为从主干道指向分支(左翼←右翼→),橙色虚线
This commit is contained in:
@ -20,8 +20,12 @@
|
|||||||
:node="node"
|
:node="node"
|
||||||
@view-records="$emit('viewRecords', $event)"
|
@view-records="$emit('viewRecords', $event)"
|
||||||
/>
|
/>
|
||||||
<!-- 横向连线箭头:左翼→指向中央,右翼←从中央伸出 -->
|
<!-- 横向连线箭头:从主干道指向分支(左翼←,右翼→),橙色虚线 -->
|
||||||
<view class="fb-arrow" :class="'arrow-' + side">{{ side === 'left' ? '→' : '←' }}</view>
|
<view class="fb-arrow" :class="'arrow-' + side">
|
||||||
|
<view v-if="side === 'left'" class="fb-hline" />
|
||||||
|
<text class="fb-arrow-text">{{ side === 'left' ? '←' : '→' }}</text>
|
||||||
|
<view v-if="side === 'right'" class="fb-hline" />
|
||||||
|
</view>
|
||||||
<!-- 右翼:卡片在左侧贴近主干道 -->
|
<!-- 右翼:卡片在左侧贴近主干道 -->
|
||||||
<FlowCard
|
<FlowCard
|
||||||
v-if="side === 'right'"
|
v-if="side === 'right'"
|
||||||
@ -84,9 +88,19 @@ export default {
|
|||||||
margin: 0 4px;
|
margin: 0 4px;
|
||||||
}
|
}
|
||||||
.fb-arrow {
|
.fb-arrow {
|
||||||
font-size: 14px;
|
display: flex;
|
||||||
font-weight: 700;
|
align-items: center;
|
||||||
color: #9ca3af;
|
gap: 2px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
/* 橙色虚线连接主干道与分支 */
|
||||||
|
.fb-hline {
|
||||||
|
width: 22px;
|
||||||
|
border-top: 2px dashed #fb923c;
|
||||||
|
}
|
||||||
|
.fb-arrow-text {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #fb923c;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="fc-card" :class="statusColorClass(node.status)">
|
<view class="fc-card" :class="[statusColorClass(node.status), { 'is-completed': isCompleted, 'is-active': isActive }]">
|
||||||
<view class="fc-head">
|
<view class="fc-head">
|
||||||
<!-- 主线/分支 标签(仅中央主线显示) -->
|
<!-- 主线/分支 标签(仅中央主线显示) -->
|
||||||
<text v-if="showBadge" class="fc-badge" :class="isMainNode ? 'fc-badge-main' : 'fc-badge-sub'">{{ isMainNode ? '主线' : '分支' }}</text>
|
<text v-if="showBadge" class="fc-badge" :class="isMainNode ? 'fc-badge-main' : 'fc-badge-sub'">{{ isMainNode ? '主线' : '分支' }}</text>
|
||||||
@ -41,6 +41,14 @@ export default {
|
|||||||
const name = String(this.node.task_name || "");
|
const name = String(this.node.task_name || "");
|
||||||
return (name.includes("在库") || name.includes("入库")) || this.node.assignee_id === "virtual_warehouse";
|
return (name.includes("在库") || name.includes("入库")) || this.node.assignee_id === "virtual_warehouse";
|
||||||
},
|
},
|
||||||
|
// 进行中/待接收:WIP / PENDING / IN_PROGRESS(待收货)
|
||||||
|
isActive() {
|
||||||
|
return ["WIP", "PENDING", "IN_PROGRESS"].includes(this.node.status);
|
||||||
|
},
|
||||||
|
// 已完成 / 历史状态:非进行中
|
||||||
|
isCompleted() {
|
||||||
|
return !this.isActive;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
formatUserName(userId) {
|
formatUserName(userId) {
|
||||||
@ -92,6 +100,23 @@ export default {
|
|||||||
.fc-card.s-orange { border-left-color: #f97316; }
|
.fc-card.s-orange { border-left-color: #f97316; }
|
||||||
.fc-card.s-gray { border-left-color: #9ca3af; }
|
.fc-card.s-gray { border-left-color: #9ca3af; }
|
||||||
|
|
||||||
|
/* 已完成/历史状态:降透明度 + 浅灰底 + 深灰文字(视觉降噪) */
|
||||||
|
.fc-card.is-completed {
|
||||||
|
opacity: 0.85;
|
||||||
|
background-color: #fafafa;
|
||||||
|
}
|
||||||
|
.fc-card.is-completed .fc-name,
|
||||||
|
.fc-card.is-completed .fc-assignee,
|
||||||
|
.fc-card.is-completed .fc-warehouse-in {
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
/* 进行中/待接收:纯白底 + 完整蓝色边框 + 外发光,浮起来 */
|
||||||
|
.fc-card.is-active {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: 1px solid #93c5fd;
|
||||||
|
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
.fc-head { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; flex-wrap: wrap; }
|
.fc-head { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; flex-wrap: wrap; }
|
||||||
.fc-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; color: #fff; }
|
.fc-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; color: #fff; }
|
||||||
.fc-badge-main { background: #2563eb; }
|
.fc-badge-main { background: #2563eb; }
|
||||||
|
|||||||
Reference in New Issue
Block a user