From 5d3fe5712f60fec872870e0b1a3162c72466ab05 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期四, 15 十月 2020 19:07:20 +0800
Subject: [PATCH] 移除应用引入的common.scss文件
---
src/pages/settings/components/CloudNode.vue | 99 +++++++++++++++++++++++++++++--------------------
1 files changed, 58 insertions(+), 41 deletions(-)
diff --git a/src/pages/settings/components/CloudNode.vue b/src/pages/settings/components/CloudNode.vue
index c61c160..01e0532 100644
--- a/src/pages/settings/components/CloudNode.vue
+++ b/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>
@@ -22,14 +32,15 @@
</template>
<script>
export default {
- name:'cloudNode',
- props:{
+ name: 'cloudNode',
+ props: {
nodes: Array
},
- data(){
+ data () {
return {
- nodeIcons:[],
- mockData:[
+
+ nodeIcons: [],
+ mockData: [
{
cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2f46",
hardwareType: "01",
@@ -46,7 +57,7 @@
node_id: "DSVAD010120190623",
node_ip: "192.168.20.10:30190",
nodeName: "寮�鍙戞祴璇�20.10-1",
- role:'master'
+ role: 'master'
},
{
cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2g",
@@ -55,7 +66,7 @@
node_id: "DSVAD010120190624",
node_ip: "192.168.20.10:30190",
nodeName: "娴嬭瘯20.10-1",
- role:'pc'
+ role: 'pc'
},
{
cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2h",
@@ -64,52 +75,58 @@
node_id: "DSVAD010120190625",
node_ip: "192.168.20.10:30190",
nodeName: "娴嬭瘯20.101-1",
- role:'server'
+ role: 'server'
},
]
}
},
- computed:{
-
- insideNodes(){
- //return this.nodes.filter(item=>item.hardwareType=='01'||item.hardwareType=='02');
- return this.mockData.filter(item=>item.hardwareType=='01'||item.hardwareType=='02');
+ computed: {
+ cloudPic () {
+ return '/images/settings/cloud.png'
},
- outsideNodes(){
+ insideNodes () {
+ //return this.nodes.filter(item=>item.hardwareType=='01'||item.hardwareType=='02');
+ return this.mockData.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
+ },
+ outsideNodes () {
//return this.nodes.filter(item=>item.hardwareType=='03');
- return this.mockData.filter(item=>item.hardwareType=='03');
+ return this.mockData.filter(item => item.hardwareType == '03');
}
}
}
</script>
<style lang="scss">
- .cloud{
- width: 100%;
- height: 500px;
- display: flex;
- .inner{
-
- background: url('/images/settings/cloud.png') no-repeat;
- background-size: 100%;
- .rect{
- background:cornflowerblue;
- position: relative;
- .node{
- position: absolute;
- .node-icon{
- width:40px;
- height:40px;
- }
- .node-name{
- font-size:14px;
- color: #333;
- }
+.cloud {
+ width: 100%;
+ 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 {
+ position: absolute;
+ .node-icon {
+ width: 40px;
+ height: 40px;
+ }
+ .node-name {
+ font-size: 14px;
+ color: #333;
}
}
}
- .outer{
- width:50%;
- position: relative;
+ }
+ .outer {
+ width: 50%;
+ position: relative;
+ .node {
+ position: absolute;
}
}
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0