| | |
| | | <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> |
| | |
| | | </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> |
| | |
| | | }, |
| | | data(){ |
| | | return { |
| | | |
| | | nodeIcons:[], |
| | | mockData:[ |
| | | { |
| | |
| | | } |
| | | }, |
| | | 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'); |
| | |
| | | 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{ |
| | |
| | | .outer{ |
| | | width:50%; |
| | | position: relative; |
| | | .node { |
| | | position: absolute; |
| | | } |
| | | } |
| | | } |
| | | </style> |