【sgTopo】强哥古法炮制、纯手工打造简单拓扑图、流程图、思维导图组件（完善中ing）（二）

<template>
  <div class="sg-body">
    <div style="padding: 30px; display: flex">
      <sg-topo :data="data1" style="margin-right: 25px" />
      <sg-topo :data="data2" style="margin-right: 25px" />
      <sg-topo :data="data3" style="margin-right: 25px" />
      <sg-topo :data="data4" style="margin-right: 25px" />
      <sg-topo :data="data5" style="margin-right: 25px" />
      <sg-topo :data="data6" style="margin-right: 25px" />
    </div>
  </div>
</template>
 
<script>
import sgTopo from "../components/sgTopo";
export default {
  components: {
    sgTopo,
  },
  data() {
    return {
      // 数据使用
      data1: {
        body: {
          arrowRight: true,
          title: {
            active: true, //交互开启
            text: "一级内容",
            style: {
              width: "150px",
              background: "#002766",
            },
          },
          style: {
            width: "300px",
          },
          data: [
            {
              type: 1,
              title: {
                active: true, //交互开启
                text: "二级内容",
              },
            },
            {
              type: 1,
              title: {
                text: "二级内容",
              },
            },
            {
              type: 1,
              title: {
                text: "二级内容",
              },
            },
            {
              type: 1,
              title: {
                text: "二级内容",
              },
              children: [
                {
                  title: {
                    text: "三级标题",
                  },
                  data: [
                    {
                      title: {
                        active: true, //交互开启
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                  ],
                },
                {
                  title: {
                    text: "三级标题",
                  },
                  data: [
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                  ],
                },
              ],
            },
          ],
        },
      },
 
      data2: {
        body: {
          arrowRight: true,
          title: {
            text: "一级内容",
            style: {
              width: "150px",
              background: "#002766",
            },
          },
          style: {
            width: "230px",
          },
          data: [
            {
              type: 1,
              title: {
                active: true, //交互开启
                text: "二级内容",
              },
            },
            {
              type: 1,
              title: {
                active: true, //交互开启
                text: "二级内容",
                style: {
                  background: "#0050B3",
                },
              },
            },
            {
              type: 1,
              title: {
                text: "二级内容",
              },
            },
            {
              type: 1,
              title: {
                text: "二级内容",
                style: {
                  background: "#0050B3",
                },
              },
            },
            {
              type: 1,
              title: {
                text: "二级内容",
              },
            },
 
            {
              type: 1,
              title: {
                text: "二级内容",
              },
            },
          ],
        },
      },
 
      data3: {
        body: {
          arrowRight: true,
          title: {
            text: "一级内容",
            style: {
              width: "150px",
              background: "#002766",
            },
          },
          style: {
            width: "230px",
          },
          data: [
            {
              type: 2,
              title: {
                text: "二级内容",
              },
              children: [
                {
                  title: {
                    text: "三级内容",
                  },
                  /*   children: [
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                  ], */
                },
                {
                  title: {
                    text: "三级内容",
                  },
                  data: [
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                  ],
                },
                {
                  title: {
                    text: "三级内容",
                  },
                },
              ],
            },
            {
              type: 2,
              title: {
                text: "二级内容",
              },
              children: [
                {
                  title: {
                    text: "三级内容",
                  },
                  /*   children: [
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                  ], */
                },
                {
                  title: {
                    text: "三级内容",
                  },
                  data: [
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                  ],
                },
                {
                  title: {
                    text: "三级内容",
                  },
                },
              ],
            },
          ],
        },
      },
 
      data4: {
        body: {
          arrowRight: true,
          title: {
            text: "一级内容",
            style: {
              width: "150px",
              background: "#002766",
            },
          },
          style: {
            width: "280px",
          },
          container: {
            style: {
              display: "flex",
              "flex-wrap": "wrap",
              "justify-content": "space-between",
            },
          },
          data: [
            {
              type: 2,
              title: {
                text: "二级内容",
              },
              children: [
                {
                  title: {
                    text: "三级内容",
                  },
                  children: [
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                  ],
                },
                {
                  title: {
                    text: "三级内容",
                  },
                  data: [
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                  ],
                },
                {
                  title: {
                    text: "三级内容",
                  },
                },
              ],
            },
            {
              type: 2,
              title: {
                text: "二级内容",
              },
              children: [
                {
                  title: {
                    text: "三级内容",
                  },
                  /*   children: [
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                  ], */
                },
                {
                  title: {
                    text: "三级内容",
                  },
                  data: [
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                  ],
                },
                {
                  title: {
                    text: "三级内容",
                  },
                },
              ],
            },
          ],
        },
      },
 
      data5: {
        body: {
          arrowRight: true,
          title: {
            text: "一级内容",
            style: {
              width: "150px",
              color: "#002766",
              background: "#f0f2f5",
            },
          },
          style: {
            width: "250px",
          },
          container: {
            style: {
              display: "flex",
              "flex-wrap": "wrap",
            },
          },
          data: [
            {
              type: 2,
              title: {
                text: "标签",
                style: {
                  "margin-right": "10px",
                },
              },
            },
            {
              type: 2,
              title: {
                text: "标签",
                style: {
                  "margin-right": "10px",
                  background: "#0050b3",
                },
              },
            },
            {
              type: 2,
              title: {
                text: "标签",
                style: {
                  "margin-right": "10px",
                  background: "#0050b3",
                },
              },
            },
            {
              type: 2,
              title: {
                text: "标签1234567",
                style: {
                  "margin-right": "10px",
                  background: "#0050b3",
                },
              },
            },
            {
              type: 2,
              title: {
                text: "标签1237",
                style: {
                  "margin-right": "10px",
                },
              },
            },
            {
              type: 2,
              title: {
                text: "标签127",
                style: {
                  "margin-right": "10px",
                },
              },
            },
            {
              type: 2,
              title: {
                text: "标签12347",
                style: {
                  "margin-right": "10px",
                },
              },
            },
            {
              type: 2,
              title: {
                text: "标签67",
                style: {
                  "margin-right": "10px",
                },
              },
            },
            {
              type: 2,
              title: {
                text: "标签1247",
                style: {
                  "margin-right": "10px",
                  background: "#0050b3",
                },
              },
            },
            {
              type: 2,
              title: {
                text: "标签1234567",
                style: {
                  "margin-right": "10px",
                },
              },
            },
            {
              type: 2,
              title: {
                text: "标签7",
                style: {
                  "margin-right": "10px",
                },
              },
            },
            {
              type: 2,
              title: {
                text: "标签147",
                style: {
                  "margin-right": "10px",
                },
              },
            },
            {
              type: 2,
              title: {
                text: "标签1567",
                style: {
                  "margin-right": "10px",
                  background: "#0050b3",
                },
              },
            },
          ],
        },
      },
 
      data6: {
        body: {
          // arrowRight: true,
          title: {
            text: "一级内容",
            style: {
              width: "190px",
              color: "#002766",
              background: "#f0f2f5",
            },
          },
          style: {
            width: "440px",
          },
          container: {
            style: {
              display: "flex",
              "flex-wrap": "wrap",
            },
          },
          data: [
            {
              type: 2,
              title: {
                text: "区块链硬件",
              },
              children: [
                {
                  title: {
                    text: "三级内容",
                    style: {
                      color: "#ffffff",
                      background: "#40a9ff",
                    },
                  },
                  children: [
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                      children: [
                        {
                          title: {
                            text: "四级内容",
                          },
                        },
                        {
                          title: {
                            text: "四级内容",
                          },
                        },
                        {
                          title: {
                            text: "四级内容",
                          },
                        },
                        {
                          title: {
                            text: "四级内容",
                          },
                        },
                      ],
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                  ],
                },
                {
                  title: {
                    text: "三级内容",
                    style: {
                      color: "#ffffff",
                      background: "#40a9ff",
                    },
                  },
                  children: [
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                  ],
                },
                {
                  title: {
                    text: "三级内容",
                    style: {
                      color: "#ffffff",
                      background: "#40a9ff",
                    },
                  },
                  children: [
                    {
                      title: {
                        text: "三级内容",
                      },
                    },
                  ],
                },
                {
                  title: {
                    text: "三级内容",
                    style: {
                      color: "#ffffff",
                      background: "#40a9ff",
                    },
                  },
                },
              ],
            },
          ],
        },
      },
    };
  },
};
</script>