知识图谱适配
This commit is contained in:
@@ -1,5 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="knowledge-graph" ref="containerRef">
|
<div class="kg-wrapper">
|
||||||
|
<div
|
||||||
|
class="knowledge-graph"
|
||||||
|
ref="containerRef"
|
||||||
|
:style="{ width: svgWidth + 'px', height: svgHeight + 'px' }"
|
||||||
|
>
|
||||||
<svg class="graph-svg" :width="svgWidth" :height="svgHeight">
|
<svg class="graph-svg" :width="svgWidth" :height="svgHeight">
|
||||||
<!-- 连线 -->
|
<!-- 连线 -->
|
||||||
<path
|
<path
|
||||||
@@ -38,6 +43,7 @@
|
|||||||
<div class="node-desc">{{ node.desc }}</div>
|
<div class="node-desc">{{ node.desc }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@@ -177,16 +183,20 @@ const svgHeight = computed(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.kg-wrapper {
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: visible;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.knowledge-graph {
|
.knowledge-graph {
|
||||||
position: relative;
|
position: relative;
|
||||||
background:
|
background:
|
||||||
radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.03), transparent 60%),
|
radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.03), transparent 60%),
|
||||||
radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.03), transparent 60%);
|
radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.03), transparent 60%);
|
||||||
border: 1px solid var(--border-color);
|
overflow: visible;
|
||||||
border-radius: 16px;
|
|
||||||
overflow: hidden;
|
|
||||||
min-height: 300px;
|
|
||||||
padding: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.graph-svg {
|
.graph-svg {
|
||||||
|
|||||||
Reference in New Issue
Block a user