历史回溯

 <template>
-  <div class="">历史回溯
-    <div id="mountNode"></div>
+  <div class="lshs-content">
+      <div class="slot">
+          <div><span class="tip-title">范围属性变更：</span></div>
+          <div><span class="tip-title">宗地分割：</span></div>
+          <div><span class="tip-title">宗地合并：</span></div>
+      </div>
+    <div id="mountNode" ref="containerWidth"></div>
   </div>
 </template>
 
@@ -38,6 +43,8 @@ export default {
   methods: {
     initG6() {
       const data = this.data;
+        const eWidth = this.$refs.containerWidth.clientWidth
+        console.log(eWidth+":width")
       G6.registerNode(
         'sql',
         {
@@ -131,11 +138,11 @@ export default {
       });
 
       const container = document.getElementById('mountNode');
-
+      console.log(container)
       const graph = new G6.Graph({
         container: 'mountNode',
         width:1000,
-        height:800,
+        height:1000,
         layout: {
           type: 'dagre',
           nodesepFunc: (d) => {
@@ -244,4 +251,21 @@ export default {
 </script>
 <style scoped  lang="less">
 
+    .lshs-content{
+        width: 100%;
+    }
+
+    #mountNode{
+       width: 100%;
+    }
+
+    .slot{
+        margin-left: 50px;
+        margin-top: 20px;
+        width: 300px;
+    }
+
+    .tip-title{
+        font-weight: 700;
+    }
 </style>
\ No newline at end of file