.family-graph-wrapper { position: relative; width: 100%; min-height: 200px; height: auto; margin: 10rpx 0; background: $app-surface; border-radius: 24rpx; overflow: hidden; } .family-graph-canvas { position: absolute; top: 0; left: 0; z-index: 1; } /* 右上角小齿轮 */ .gear-icon { position: absolute; top: 12rpx; right: 12rpx; z-index: 10; width: 56rpx; height: 56rpx; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.9); border-radius: 50%; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); } .gear-text { font-size: 32rpx; color: $app-text-subtle; } /* ⚙ 维护页提示 */ .add-hint { position: absolute; z-index: 5; width: 40rpx; height: 40rpx; border-radius: 50%; background: $status-success; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.5); transition: opacity 0.15s, transform 0.15s; pointer-events: none; } .add-hint.add-hint-visible { opacity: 1; transform: scale(1); } .add-hint-text { font-size: 28rpx; color: $app-surface; font-weight: bold; line-height: 1; } .family-graph-empty { display: flex; align-items: center; justify-content: center; padding: 60rpx 0; background: $app-surface; border-radius: 24rpx; margin: 10rpx 0; } .empty-text { font-size: 28rpx; color: $app-text-subtle; }