| | |
| | | } |
| | | |
| | | .preview-toolbar-row-secondary { |
| | | grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); |
| | | grid-template-columns: 1fr; |
| | | } |
| | | |
| | | .preview-toolbar-actions { |
| | |
| | | justify-content: flex-end; |
| | | align-items: center; |
| | | flex-wrap: wrap; |
| | | } |
| | | |
| | | .preview-zoom-card { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 14px; |
| | | padding: 10px 14px; |
| | | border-radius: 18px; |
| | | background: linear-gradient(180deg, rgba(247, 250, 255, 0.96) 0%, rgba(243, 248, 254, 0.96) 100%); |
| | | border: 1px solid rgba(217, 227, 236, 0.96); |
| | | } |
| | | |
| | | .preview-zoom-meta { |
| | | min-width: 74px; |
| | | } |
| | | |
| | | .preview-zoom-meta strong { |
| | | display: block; |
| | | font-size: 12px; |
| | | margin-bottom: 2px; |
| | | } |
| | | |
| | | .preview-zoom-meta span { |
| | | font-size: 12px; |
| | | color: var(--text-sub); |
| | | } |
| | | |
| | | .preview-panel-body { |
| | |
| | | </el-select> |
| | | </div> |
| | | <div class="preview-toolbar-row preview-toolbar-row-secondary"> |
| | | <div class="preview-zoom-card"> |
| | | <div class="preview-zoom-meta"> |
| | | <strong>地图缩放</strong> |
| | | <span>{{ mapZoomPercent }}%</span> |
| | | </div> |
| | | <el-slider :value="mapZoomPercent" @input="updateMapZoom" :min="60" :max="220" :step="10" :show-tooltip="false" style="flex: 1;"></el-slider> |
| | | </div> |
| | | <div class="preview-toolbar-actions"> |
| | | <el-button @click="fitMap" :disabled="!mapContext.nodes.length">适配地图</el-button> |
| | | <el-button @click="resetPreview">清空</el-button> |