hanbaoshan
2020-10-15 5d3fe5712f60fec872870e0b1a3162c72466ab05
src/pages/settings/components/CloudNode.vue
@@ -2,7 +2,12 @@
  <div class="cloud">
    <div class="inner">
      <div class="rect">
        <div class="node" v-for="(item,index) in insideNodes" :key="item.id" :style="{top:36*(index+1)+'px',left:60*(index+1)+'px'}">
        <div
          class="node"
          v-for="(item,index) in insideNodes"
          :key="item.id"
          :style="{top:36*(index+1)+'px',left:60*(index+1)+'px'}"
        >
          <span class="node-icon">
            <!-- <img :src="nodeIcons[item.workType]" alt=""> -->
          </span>
@@ -11,7 +16,12 @@
      </div>
    </div>
    <div class="outer">
      <div class="node" v-for="(item,index) in insideNodes" :key="item.id" :style="{top:36*(index+1)+'px',left:80*(index+1)+'px'}">
      <div
        class="node"
        v-for="(item,index) in insideNodes"
        :key="item.id"
        :style="{top:36*(index+1)+'px',left:80*(index+1)+'px'}"
      >
        <span class="node-icon">
          <!-- <img :src="nodeIcons[item.workType]" alt=""> -->
        </span>
@@ -28,6 +38,7 @@
  },
  data(){
    return {
      nodeIcons:[],
      mockData:[
        {
@@ -70,7 +81,9 @@
    }
  },
  computed:{
    cloudPic () {
      return '/images/settings/cloud.png'
    },
    insideNodes(){
      //return this.nodes.filter(item=>item.hardwareType=='01'||item.hardwareType=='02');
      return this.mockData.filter(item=>item.hardwareType=='01'||item.hardwareType=='02');
@@ -88,10 +101,11 @@
    height: 500px;
    display: flex;
    .inner{
      background: url('/images/settings/cloud.png') no-repeat;
      background-size: 100%;
    width: 50%;
      .rect{
      margin: 100px;
        background:cornflowerblue;
        position: relative;
        .node{
@@ -110,6 +124,9 @@
    .outer{
      width:50%;
      position: relative;
    .node {
      position: absolute;
    }
    }
  }
</style>