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

UI升级: Footer图标上文字下防截断 + TreeCanvas全屏翻页大卡片(320x460)

Browse Source
This commit is contained in:
duxingchen
2026-08-06 10:02:50 +08:00
parent e183ea5583
commit da8db95141
2 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,7 +13,7 @@
class="tree-movable-view"
direction="all"
:x="0" :y="0"
:scale="true" :scale-min="0.5" :scale-max="2"
:scale="true" :scale-min="0.3" :scale-max="2"
:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
>
<view class="canvas-inner">
@ -93,7 +93,7 @@ export default {
if (currentLevel.length > 0) levels.push(currentLevel);
// 4. 计算 X, Y 坐标
const CARD_W = 240, CARD_H = 140, GAP_X = 60, GAP_Y = 80;
const CARD_W = 320, CARD_H = 460, GAP_X = 80, GAP_Y = 120;
const nodes = [];
nodes._lines = [];
@ -167,24 +167,24 @@ export default {
.canvas-hint { font-size: 11px; color: #9ca3af; text-align: center; padding: 8px 0; background: #fff; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
.tree-movable-area { flex: 1; width: 100%; background-color: #f8fafc; background-image: linear-gradient(#e5e7eb 1px, transparent 1px), linear-gradient(90deg, #e5e7eb 1px, transparent 1px); background-size: 20px 20px; }
.canvas-inner { position: absolute; left: 0; top: 0; }
.canvas-node { position: absolute; width: 240px; min-height: 120px; background: #ffffff; border-radius: 14px; padding: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06); border-left: 8px solid #3b82f6; z-index: 10; display: flex; flex-direction: column; gap: 8px; }
.canvas-node { position: absolute; width: 320px; min-height: 460px; background: #ffffff; border-radius: 20px; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06); border-left: 12px solid #3b82f6; z-index: 10; display: flex; flex-direction: column; gap: 10px; }
.canvas-node.s-yellow { border-left-color: #f59e0b; }
.canvas-node.s-blue { border-left-color: #3b82f6; }
.canvas-node.s-green { border-left-color: #22c55e; }
.canvas-node.s-red { border-left-color: #ef4444; }
.cn-header { display: flex; align-items: center; justify-content: space-between; }
.cn-name { font-size: 16px; font-weight: 800; color: #1f2937; }
.cn-badge { font-size: 11px; padding: 2px 8px; border-radius: 8px; font-weight: 700; }
.cn-name { font-size: 24px; font-weight: 800; color: #1f2937; }
.cn-badge { font-size: 14px; padding: 4px 12px; border-radius: 8px; font-weight: 700; }
.cn-badge.s-yellow { background: #fef3c7; color: #b45309; }
.cn-badge.s-blue { background: #dbeafe; color: #1d4ed8; }
.cn-badge.s-green { background: #dcfce7; color: #15803d; }
.cn-badge.s-red { background: #fce4ec; color: #be123c; }
.cn-assignee { font-size: 13px; color: #6b7280; font-weight: 500; }
.tag-rework { font-size: 11px; color: #fff; background: #ef4444; padding: 2px 6px; border-radius: 6px; display: inline-block; width: max-content; }
.cn-remark { font-size: 12px; color: #a16207; background: #fefce8; padding: 6px 10px; border-radius: 6px; border: 1px solid #fef08a; line-height: 1.4; word-break: break-all; }
.cn-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; border-top: 1px dashed #e5e7eb; }
.cn-end { font-size: 11px; font-weight: 700; color: #16a34a; }
.cn-assignee { font-size: 16px; color: #6b7280; font-weight: 500; margin-top: 10px; }
.tag-rework { font-size: 13px; color: #fff; background: #ef4444; padding: 4px 10px; border-radius: 6px; display: inline-block; width: max-content; }
.cn-remark { font-size: 16px; color: #a16207; background: #fefce8; padding: 16px; border-radius: 8px; border: 1px solid #fef08a; line-height: 1.5; word-break: break-all; min-height: 100px; white-space: normal; margin-top: 16px; }
.cn-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px dashed #e5e7eb; }
.cn-end { font-size: 13px; font-weight: 700; color: #16a34a; }
.cn-end-wh { color: #7c3aed; }
.cn-records { font-size: 12px; color: #2563eb; font-weight: 700; background: #eff6ff; padding: 2px 8px; border-radius: 12px; }
.canvas-line { position: absolute; height: 3px; background: #cbd5e1; z-index: 1; transform-origin: 0 0; }
.cn-records { font-size: 14px; color: #2563eb; font-weight: 700; background: #eff6ff; padding: 4px 12px; border-radius: 12px; }
.canvas-line { position: absolute; height: 3px; background: #94a3b8; z-index: 1; transform-origin: 0 0; }
</style>