|
|
|
@ -1,29 +1,39 @@ |
|
|
|
<template> |
|
|
|
<div class='topolog'> |
|
|
|
<div class="topolog"> |
|
|
|
<div class="list"> |
|
|
|
<div v-for="(item, index) in list" @click="listClick(index)" |
|
|
|
:class="'listItem keep-ratio ' + (selIndex === index ? 'listItemAction' : '')"> |
|
|
|
<div |
|
|
|
v-for="(item, index) in list" |
|
|
|
@click="listClick(index)" |
|
|
|
:class=" |
|
|
|
'listItem keep-ratio ' + (selIndex === index ? 'listItemAction' : '') |
|
|
|
" |
|
|
|
> |
|
|
|
{{ item.name }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="card"> |
|
|
|
<div class="top "> |
|
|
|
<div class="top"> |
|
|
|
<div class="t-left">{{ name }}</div> |
|
|
|
<div style="display: flex;"> |
|
|
|
<div class="t-right" v-for="(item,index) in card"> |
|
|
|
交换机总数 <template v-if="card.length>1">({{ index+1 }})</template>：<span class="len">{{ item.total }}</span>个 |
|
|
|
<div style="display: flex"> |
|
|
|
<div class="t-right" v-for="(item, index) in card"> |
|
|
|
交换机总数 |
|
|
|
<template v-if="card.length > 1">({{ index + 1 }})</template>：<span |
|
|
|
class="len" |
|
|
|
>{{ item.total }}</span |
|
|
|
>个 |
|
|
|
<div class="space"></div> |
|
|
|
故障数：<span class="len err">{{ item.error }}</span>个 |
|
|
|
故障数：<span class="len err">{{ item.error }}</span |
|
|
|
>个 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="content" v-if="selIndex===0"> |
|
|
|
<div class="content" v-if="selIndex === 0"> |
|
|
|
<div class="c c-border"> |
|
|
|
<div class="arrow-panel-line"> |
|
|
|
<div class="arrowdow"></div> |
|
|
|
<div class="arrowdow"></div> |
|
|
|
</div> |
|
|
|
<div class="arrow-panel" style="margin-top: -5px;"> |
|
|
|
<div class="arrow-panel" style="margin-top: -5px"> |
|
|
|
<div class="arrow"></div> |
|
|
|
<div class="arrow"></div> |
|
|
|
<div class="arrow"></div> |
|
|
|
@ -31,41 +41,61 @@ |
|
|
|
</div> |
|
|
|
<div v-for="(item, index) in topo" v-if="index < 5" class="switch"> |
|
|
|
<div :class="'line ' + (item.netWorkStatus ? '' : 'liner')"></div> |
|
|
|
<div :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"></div> |
|
|
|
<div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')">{{ item.switchName }}</div> |
|
|
|
<div |
|
|
|
:class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')" |
|
|
|
></div> |
|
|
|
<div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')"> |
|
|
|
{{ item.switchName }} |
|
|
|
</div> |
|
|
|
<div :class="'line ' + (item.netWorkStatus ? '' : 'liner')"></div> |
|
|
|
<div :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')" style="margin-top:-35px;"></div> |
|
|
|
<img v-if="item.netWorkStatus" src="./switch1.png"> |
|
|
|
<img v-else src="./switch0.png"> |
|
|
|
<div :class="'c-name c-namesw ' + (item.netWorkStatus ? '' : 'c-namer')">sw</div> |
|
|
|
<div |
|
|
|
:class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')" |
|
|
|
style="margin-top: -35px" |
|
|
|
></div> |
|
|
|
<img v-if="item.netWorkStatus" src="./switch1.png" /> |
|
|
|
<img v-else src="./switch0.png" /> |
|
|
|
<div |
|
|
|
:class=" |
|
|
|
'c-name c-namesw ' + (item.netWorkStatus ? '' : 'c-namer') |
|
|
|
" |
|
|
|
></div> |
|
|
|
<div :class="'c-desc ' + (item.netWorkStatus ? '' : 'c-descr')"> |
|
|
|
<div>桩号：{{ item.stakeMark }}</div> |
|
|
|
<div>IP：{{ item.switchIp }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="arrow-panel" style="margin-top: 292px;"> |
|
|
|
<div class="arrow-panel" style="margin-top: 308px"> |
|
|
|
<div class="arrow arrowrig"></div> |
|
|
|
<div class="arrow arrowrig"></div> |
|
|
|
<div class="arrow arrowrig"></div> |
|
|
|
<div class="arrow arrowrig"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="arrow-panel-line" style="margin-left: 100.1%;"> |
|
|
|
<div class="arrow-panel-line" style="margin-left: 100.1%"> |
|
|
|
<div class="arrowdow arrowtop"></div> |
|
|
|
<div class="arrowdow arrowtop"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="c " style="margin-top: -5px;"> |
|
|
|
<div class="c" style="margin-top: -5px"> |
|
|
|
<div v-for="(item, index) in topo" v-if="index >= 5" class="switch"> |
|
|
|
<div :class="'line ' + (item.netWorkStatus ? '' : 'liner')"></div> |
|
|
|
<div :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"></div> |
|
|
|
<div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')">{{ item.switchName }}</div> |
|
|
|
<div |
|
|
|
:class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')" |
|
|
|
></div> |
|
|
|
<div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')"> |
|
|
|
{{ item.switchName }} |
|
|
|
</div> |
|
|
|
<div :class="'line ' + (item.netWorkStatus ? '' : 'liner')"></div> |
|
|
|
<div :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')" style="margin-top:-35px;"></div> |
|
|
|
<div |
|
|
|
:class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')" |
|
|
|
style="margin-top: -35px" |
|
|
|
></div> |
|
|
|
<img class="imgsw" v-if="item.netWorkStatus" src="./switch1.png" /> |
|
|
|
<img class="imgsw" v-else src="./switch0.png" /> |
|
|
|
<div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')" |
|
|
|
style="padding:0px 50px;margin-top: -5px;border:0px">sw</div> |
|
|
|
<img class="imgsw" v-else src="./switch0.png" /> |
|
|
|
<div |
|
|
|
:class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')" |
|
|
|
style="padding: 0px 50px; margin-top: -5px; border: 0px" |
|
|
|
></div> |
|
|
|
<div :class="'c-desc ' + (item.netWorkStatus ? '' : 'c-descr')"> |
|
|
|
<div>桩号：{{ item.stakeMark }}</div> |
|
|
|
<div>IP：{{ item.switchIp }}</div> |
|
|
|
@ -74,50 +104,80 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="content" v-else> |
|
|
|
<div class="c c-border" style="margin-bottom: 30px;" v-for="(item,index) of topo"> |
|
|
|
|
|
|
|
<div |
|
|
|
class="c c-border" |
|
|
|
style="margin-bottom: 30px" |
|
|
|
v-for="(item, index) of topo" |
|
|
|
> |
|
|
|
<div class="arrow-panel-line"> |
|
|
|
<div class="arrowdow"></div> |
|
|
|
<div class="arrowdow"></div> |
|
|
|
</div> |
|
|
|
<div class="arrow-panel" style="margin-top: -5px;"> |
|
|
|
<div class="arrow-panel" style="margin-top: -5px"> |
|
|
|
<div class="arrow"></div> |
|
|
|
<div class="arrow"></div> |
|
|
|
<div class="arrow"></div> |
|
|
|
<div class="arrow"></div> |
|
|
|
</div> |
|
|
|
<div class="cscorll"> |
|
|
|
<div :style="' height: 290px;width:'+item.length*200+'px;'"> |
|
|
|
<div v-for="(itm, idx) in item" class="switchScro"> |
|
|
|
<div class="switch"> |
|
|
|
<div :class="'line ' + (itm.netWorkStatus ? '' : 'liner')"></div> |
|
|
|
<div :class="'arrowdown ' + (itm.netWorkStatus ? '' : 'arrowr')" style="margin-top: -30px;"></div> |
|
|
|
<img class="imgsw" v-if="itm.netWorkStatus" src="./switch1.png" /> |
|
|
|
<img class="imgsw" v-else src="./switch0.png" /> |
|
|
|
<div :class="'c-name c-namesw ' + (itm.netWorkStatus ? '' : 'c-namer')">{{itm.switchName}}({{index+1}})</div> |
|
|
|
<div :class="'line ' + (itm.netWorkStatus ? '' : 'liner')" style="height: 40px"></div> |
|
|
|
<div :class="'arrowdown ' + (itm.netWorkStatus ? '' : 'arrowr')" style="margin-top: -30px;"></div> |
|
|
|
<div :class="'device-list ' + (itm.netWorkStatus ? '' : 'device-list-r')"> |
|
|
|
<div v-for="(idv,idvx) in itm.dcDeviceList"> |
|
|
|
<div class="device-item"> |
|
|
|
<img src="./t10.png" /> |
|
|
|
<div>{{ idv.deviceName }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- width:' + item.length * 200 + 'px;' --> |
|
|
|
<!-- <div style="height: 290px"> --> |
|
|
|
<div v-for="(itm, idx) in item" class="switchScro"> |
|
|
|
<div class="switch"> |
|
|
|
<div |
|
|
|
:class="'line ' + (itm.netWorkStatus ? '' : 'liner')" |
|
|
|
></div> |
|
|
|
<div |
|
|
|
:class="'arrowdown ' + (itm.netWorkStatus ? '' : 'arrowr')" |
|
|
|
style="margin-top: -30px" |
|
|
|
></div> |
|
|
|
<img |
|
|
|
class="imgsw" |
|
|
|
v-if="itm.netWorkStatus" |
|
|
|
src="./switch1.png" |
|
|
|
/> |
|
|
|
<img class="imgsw" v-else src="./switch0.png" /> |
|
|
|
<div |
|
|
|
:class=" |
|
|
|
'c-name c-namesw ' + (itm.netWorkStatus ? '' : 'c-namer') |
|
|
|
" |
|
|
|
> |
|
|
|
{{ itm.switchName }}({{ index + 1 }}) |
|
|
|
</div> |
|
|
|
<div |
|
|
|
:class="'line ' + (itm.netWorkStatus ? '' : 'liner')" |
|
|
|
style="height: 40px" |
|
|
|
></div> |
|
|
|
<div |
|
|
|
:class="'arrowdown ' + (itm.netWorkStatus ? '' : 'arrowr')" |
|
|
|
style="margin-top: -30px" |
|
|
|
></div> |
|
|
|
<div |
|
|
|
:class=" |
|
|
|
'device-list ' + (itm.netWorkStatus ? '' : 'device-list-r') |
|
|
|
" |
|
|
|
> |
|
|
|
<div |
|
|
|
v-for="(idv, idvx) in itm.dcDeviceList" |
|
|
|
class="device-item" |
|
|
|
> |
|
|
|
<img src="./t10.png" /> |
|
|
|
<div class="device-item-text">{{ idv.deviceName }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- </div> --> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="arrow-panel" style="margin-top: 292px;"> |
|
|
|
<div class="arrow-panel" style="margin-top: 308px"> |
|
|
|
<div class="arrow"></div> |
|
|
|
<div class="arrow"></div> |
|
|
|
<div class="arrow"></div> |
|
|
|
<div class="arrow"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="arrow-panel-line" style="margin-left: 100.1%;"> |
|
|
|
<div class="arrow-panel-line" style="margin-left: 100.1%"> |
|
|
|
<div class="arrowdow"></div> |
|
|
|
<div class="arrowdow"></div> |
|
|
|
</div> |
|
|
|
@ -128,90 +188,90 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import request from '@/utils/request' |
|
|
|
import request from "@/utils/request"; |
|
|
|
import { Message } from "element-ui"; |
|
|
|
const enum_device_type = [ |
|
|
|
{type: "1", label: "枪机",} |
|
|
|
] |
|
|
|
const enum_device_type = [{ type: "1", label: "枪机" }]; |
|
|
|
export default { |
|
|
|
name: 'InDevelopment', |
|
|
|
components: { |
|
|
|
}, |
|
|
|
name: "InDevelopment", |
|
|
|
components: {}, |
|
|
|
|
|
|
|
data() { |
|
|
|
return { |
|
|
|
list: [], |
|
|
|
selIndex: 0, |
|
|
|
name: '', |
|
|
|
card: [{total: 0, error: 0 }], |
|
|
|
topo: [] |
|
|
|
} |
|
|
|
name: "", |
|
|
|
card: [{ total: 0, error: 0 }], |
|
|
|
topo: [], |
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.bind() |
|
|
|
this.bind(); |
|
|
|
request({ |
|
|
|
url: "/type/list", |
|
|
|
method: "get", |
|
|
|
}).then(res=>{ |
|
|
|
console.log(res) |
|
|
|
}); |
|
|
|
url: "/type/list", |
|
|
|
method: "get", |
|
|
|
}).then((res) => { |
|
|
|
console.log(res); |
|
|
|
}); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
bind() { |
|
|
|
request({ |
|
|
|
url: '/business/switch/list', |
|
|
|
method: 'get' |
|
|
|
}).then(result => { |
|
|
|
url: "/business/switch/list", |
|
|
|
method: "get", |
|
|
|
}).then((result) => { |
|
|
|
if (result.code != 200) return Message.error(result?.msg); |
|
|
|
this.map = result.data[0]; |
|
|
|
let list = [{ name: this.map.switchName }] |
|
|
|
this.map.children.forEach(e => { |
|
|
|
list.push({ name: e.switchName }) |
|
|
|
}); |
|
|
|
let list = [{ name: this.map.switchName }]; |
|
|
|
this.map.children.forEach((e) => { |
|
|
|
list.push({ name: e.switchName }); |
|
|
|
}); |
|
|
|
this.list = list; |
|
|
|
this.listClick(); |
|
|
|
}) |
|
|
|
}); |
|
|
|
}, |
|
|
|
listClick(e = 0) { |
|
|
|
this.selIndex = e; |
|
|
|
if (e === 0) { |
|
|
|
this.name = this.map.switchName, |
|
|
|
this.card = [{ |
|
|
|
total: this.map.children.length, |
|
|
|
error: this.map.children.filter(x => x.netWorkStatus === 0).length |
|
|
|
}] |
|
|
|
this.topo = this.map.children |
|
|
|
(this.name = this.map.switchName), |
|
|
|
(this.card = [ |
|
|
|
{ |
|
|
|
total: this.map.children.length, |
|
|
|
error: this.map.children.filter((x) => x.netWorkStatus === 0) |
|
|
|
.length, |
|
|
|
}, |
|
|
|
]); |
|
|
|
this.topo = this.map.children; |
|
|
|
} else { |
|
|
|
this.name = this.map.children[e-1].switchName; |
|
|
|
this.name = this.map.children[e - 1].switchName; |
|
|
|
let cards = []; |
|
|
|
let topo = []; |
|
|
|
const list = this.map.children[e-1].children; |
|
|
|
|
|
|
|
const list1 = list.filter(x=>x.ringNetWork === 1) |
|
|
|
if(list1){ |
|
|
|
const list = this.map.children[e - 1].children; |
|
|
|
|
|
|
|
const list1 = list.filter((x) => x.ringNetWork === 1); |
|
|
|
if (list1) { |
|
|
|
cards.push({ |
|
|
|
total: list1.length, |
|
|
|
error: list1.filter(x => x.netWorkStatus === 0).length |
|
|
|
}) |
|
|
|
topo.push(list1) |
|
|
|
error: list1.filter((x) => x.netWorkStatus === 0).length, |
|
|
|
}); |
|
|
|
topo.push(list1); |
|
|
|
} |
|
|
|
const list2 = list.filter(x=>x.ringNetWork === 2) |
|
|
|
if(list2 && list2.length > 0){ |
|
|
|
const list2 = list.filter((x) => x.ringNetWork === 2); |
|
|
|
if (list2 && list2.length > 0) { |
|
|
|
cards.push({ |
|
|
|
total: list2.length, |
|
|
|
error: list2.filter(x => x.netWorkStatus === 0).length |
|
|
|
}) |
|
|
|
topo.push(list2) |
|
|
|
error: list2.filter((x) => x.netWorkStatus === 0).length, |
|
|
|
}); |
|
|
|
topo.push(list2); |
|
|
|
} |
|
|
|
this.topo = topo; |
|
|
|
this.card = cards; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.topolog { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
@ -278,14 +338,14 @@ export default { |
|
|
|
padding-bottom: 10px; |
|
|
|
margin-left: 20px; |
|
|
|
.len { |
|
|
|
color: #12F7B2; |
|
|
|
color: #12f7b2; |
|
|
|
font-size: 26px; |
|
|
|
font-weight: bold; |
|
|
|
margin: 0px 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.err { |
|
|
|
color: #FF5935; |
|
|
|
color: #ff5935; |
|
|
|
} |
|
|
|
|
|
|
|
.space { |
|
|
|
@ -304,12 +364,15 @@ export default { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: space-around; |
|
|
|
height: 300px; |
|
|
|
height: 315px; |
|
|
|
} |
|
|
|
|
|
|
|
.c-border { |
|
|
|
border: 2px solid #34d3eb; |
|
|
|
position: relative; |
|
|
|
// width: 98%; |
|
|
|
// margin: auto; |
|
|
|
// overflow: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.arrow-panel { |
|
|
|
@ -357,14 +420,19 @@ export default { |
|
|
|
background: linear-gradient(to bottom, #34d3eb, #ffffff00); |
|
|
|
} |
|
|
|
} |
|
|
|
.cscorll{ |
|
|
|
width: 80vw; |
|
|
|
height: 290px; |
|
|
|
overflow-x: auto; |
|
|
|
.cscorll { |
|
|
|
// width: 80vw; |
|
|
|
width: 100%; |
|
|
|
position: absolute; |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
height: 310px; |
|
|
|
padding: 0 20px; |
|
|
|
overflow-y: hidden; |
|
|
|
overflow-x: auto; |
|
|
|
z-index: 9999; |
|
|
|
} |
|
|
|
.switchScro{ |
|
|
|
.switchScro { |
|
|
|
height: 300px; |
|
|
|
width: 200px; |
|
|
|
margin-right: 20px; |
|
|
|
@ -383,7 +451,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.liner { |
|
|
|
background-color: #FF5935; |
|
|
|
background-color: #ff5935; |
|
|
|
} |
|
|
|
|
|
|
|
.arrowdown { |
|
|
|
@ -395,25 +463,38 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.arrowr { |
|
|
|
background: linear-gradient(to top, #FF5935, #ffffff00); |
|
|
|
background: linear-gradient(to top, #ff5935, #ffffff00); |
|
|
|
} |
|
|
|
|
|
|
|
.c-name { |
|
|
|
background: linear-gradient(270deg, rgba(61, 231, 253, 0) 0%, rgba(61, 231, 253, 0.7) 51%, rgba(61, 231, 253, 0) 100%); |
|
|
|
background: linear-gradient( |
|
|
|
270deg, |
|
|
|
rgba(61, 231, 253, 0) 0%, |
|
|
|
rgba(61, 231, 253, 0.7) 51%, |
|
|
|
rgba(61, 231, 253, 0) 100% |
|
|
|
); |
|
|
|
border-radius: 4px; |
|
|
|
padding: 10px 30px; |
|
|
|
margin-top: 5px; |
|
|
|
border: 1px solid #34d3eb; |
|
|
|
} |
|
|
|
.c-namesw{ |
|
|
|
padding:0px 50px; |
|
|
|
.c-namesw { |
|
|
|
padding: 0px 50px; |
|
|
|
margin-top: -5px; |
|
|
|
font-size: 14px; |
|
|
|
border:0px !important; |
|
|
|
border: 0px !important; |
|
|
|
} |
|
|
|
.c-namer { |
|
|
|
background: linear-gradient(270deg, rgba(255, 90, 54, 0) 0%, rgba(255, 90, 54, 0.8) 51%, rgba(255, 90, 54, 0) 100%); |
|
|
|
border: 1px solid #FF5935; |
|
|
|
background: linear-gradient( |
|
|
|
270deg, |
|
|
|
rgba(255, 90, 54, 0) 0%, |
|
|
|
rgba(255, 90, 54, 0.8) 51%, |
|
|
|
rgba(255, 90, 54, 0) 100% |
|
|
|
); |
|
|
|
border: 1px solid #ff5935; |
|
|
|
// white-space: nowrap; |
|
|
|
// overflow: hidden; |
|
|
|
// text-overflow: ellipsis; |
|
|
|
} |
|
|
|
|
|
|
|
.c-desc { |
|
|
|
@ -425,7 +506,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.c-descr { |
|
|
|
background: linear-gradient(to bottom, #102229 5%, #FF5935); |
|
|
|
background: linear-gradient(to bottom, #102229 5%, #ff5935); |
|
|
|
} |
|
|
|
|
|
|
|
img { |
|
|
|
@ -434,19 +515,39 @@ export default { |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
.device-list{ |
|
|
|
.device-list { |
|
|
|
border: 1px dashed #34d3eb; |
|
|
|
height: 90px; |
|
|
|
min-height: 110px; |
|
|
|
min-width: 160px; |
|
|
|
margin-top: 10px; |
|
|
|
overflow: auto; |
|
|
|
} |
|
|
|
.device-list-r{ |
|
|
|
border-color: #FF5935; |
|
|
|
.device-list-r { |
|
|
|
border-color: #ff5935; |
|
|
|
// display: flex; |
|
|
|
// flex-wrap: wrap; |
|
|
|
// justify-content: space-around; |
|
|
|
display: grid; |
|
|
|
grid-template-rows: repeat(2, minmax(30px, auto)); |
|
|
|
grid-auto-columns: 1fr; |
|
|
|
grid-gap: 0px; |
|
|
|
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); |
|
|
|
// overflow: hidden; |
|
|
|
padding: 10px; |
|
|
|
} |
|
|
|
.device-item{ |
|
|
|
image{ |
|
|
|
width: 30px; |
|
|
|
height: 30px; |
|
|
|
.device-item { |
|
|
|
overflow: hidden; |
|
|
|
img { |
|
|
|
margin: 0; |
|
|
|
width: 25px; |
|
|
|
height: 25px; |
|
|
|
} |
|
|
|
.device-item-text { |
|
|
|
width: 40px; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
