更改一览图背景

src/views/energyOperationSupport/components/securitys/pic1.vue

@@ -4,7 +4,7 @@
       <!-- <span class="logo">G6 入门教程 - 脑图</span> -->
       <i class="gb-toggle-btn" />
     </div>
-    <div class="crumb-nav"  v-if="activeMenu + 'TITLE'">
+    <div class="crumb-nav" v-if="activeMenu + 'TITLE'">
       <template v-for="(nav, index) in crumbNavs">
         {{ index > 0 ? '>' : '' }}
         <span :key="nav.id" class="nav-text" @click="changeNode(nav)">{{ nav.label }}</span>
@@ -287,8 +287,9 @@
               width: 100,
               height: 30,
               radius: 4,
-              fill: '#ffffff00',
-              stroke: '#999',
+              fill: '#ffffff40',
+              // stroke: '#999',
+              stroke: '#161616',
             },
             labelCfg: {
               style: {
@@ -384,7 +385,7 @@
               } //当前节点及其子节点的值
               this.preview(args);
             } else {
-              if(model.id.length === 1) {
+              if (model.id.length === 1) {
                 // this.chart.option.title.text = '安泰控股集团';
               } else {
                 // this.chart.option.title.text = model.label;
@@ -461,7 +462,7 @@
         }
       },
       changeNode(node) {
-        if(node.id.length === 1) {
+        if (node.id.length === 1) {
           // this.chart.option.title.text = '安泰控股集团';
         } else {
           // this.chart.option.title.text = node.label;
@@ -494,7 +495,7 @@
               };
               arr[0].id = '1';
               arr[0].collapsed = false,
-              that.chart.option.series[0].data = arr;
+                that.chart.option.series[0].data = arr;
               // that.setGraphical();
               that.createGraphic();
             } else {
@@ -729,7 +730,7 @@
 
 <style lang="scss">
   .root {
-    background: url(../../../../assets/img/img/filebg.png) center bottom no-repeat;
+    background: linear-gradient(rgba(0,0,0,0), rgba(173, 173, 173, 0.6)), url(../../../../assets/img/img/filebg7.png) center bottom no-repeat;
     background-size: 100% 100%;
   }
 
@@ -777,11 +778,13 @@
     padding-left: 6px;
     font-size: 14px;
   }
+
   .text-nav {
     position: absolute;
-    top: 20px;
-    left: 36%;
-    font-size: 40px;
+    top: 40px;
+    left: 28%;
+    font-size: 60px;
+    font-weight: 600;
     // background: #73bf8f;
     // border-radius: 4px;
     color: #000000;

src/views/energyOperationSupport/components/securitys/register-edge.js

@@ -25,7 +25,7 @@ export default G6 => {
       const shape = group.addShape('path', {
         attrs: {
           path,
-          stroke: '#666',
+          stroke: '#161616',
           ...cfg,
         },
         name: 'right-tree-edge',
@@ -39,7 +39,7 @@ export default G6 => {
             x:        QPoint.x + 6,
             y:        endPoint.y - 3,
             text:     note || '',
-            fill:     '#999',
+            fill:     '#161616',
             fontSize: 12,
           },
           name:   'right-tree-note',

src/views/energyOperationSupport/components/securitys/register-node.js

@@ -34,7 +34,7 @@ export default G6 => {
       const text = group.addShape('text', {
         attrs: {
           fontSize: fontSize,
-          fill: '#666',
+          fill: '#000000',
           textAlign: textAlign,
           textBaseline: 'middle',
           text: content,
@@ -56,16 +56,22 @@ export default G6 => {
         y: 0
       })
       if (hasChildren) {
+        let r = 6;
+        let line = 1;
+        if (cfg.id === '1'){
+          r = 8;
+          line = 2;
+        }
         const circleX = !isNodeStyle && style.width > size[0] ? (-style.width / 2 + size[0] + 22) : (attrs.width /
           2 + 11);
         group.addShape('marker', {
           attrs: {
             x: bbox.width / 2 + 12,
             y: 0,
-            r: 6,
+            r: r,
             symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
-            stroke: '#666',
-            lineWidth: 2,
+            stroke: '#181818',
+            lineWidth: line,
           },
           name: 'node-icon-text',
         });