基础设施
This commit is contained in:
851673013@qq.com
parent
a357f1a1b0
commit
e309dbbb90
|
|
@ -8,7 +8,7 @@
|
|||
<span
|
||||
v-for="itemContent in item.content"
|
||||
:key="itemContent"
|
||||
@click="tabClick(index, itemContent)"
|
||||
@click="tabClick(index, itemContent, itemContent)"
|
||||
:class="
|
||||
clickList[index].content.indexOf(itemContent) != -1 ? 'down' : ''
|
||||
"
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
class="ant-table-striped"
|
||||
:dataSource="dataSource"
|
||||
:columns="columns"
|
||||
:scroll="{ y: 600 }"
|
||||
:scroll="{ y: tableHeight }"
|
||||
:rowClassName="
|
||||
(record, index) => (index % 2 === 1 ? 'table-striped' : null)
|
||||
"
|
||||
|
|
@ -79,7 +79,12 @@
|
|||
selectedRowKeys: selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
/>
|
||||
>
|
||||
<template slot="status" slot-scope="text, record, index">
|
||||
<span>正常</span>
|
||||
<span>失效</span>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -115,20 +120,41 @@
|
|||
}
|
||||
let clickList = ref([]) //存储点击的tab
|
||||
init()
|
||||
//表格的高度
|
||||
let tableHeight = ref('600')
|
||||
//tab切换点击事件
|
||||
const tabClick = (indexFather, name) => {
|
||||
const tabClick = (indexFather, name, fatherName) => {
|
||||
if (clickList.value[indexFather].content.indexOf(name) != -1) {
|
||||
// debugger
|
||||
debugger
|
||||
if (fatherName == '视频资源') {
|
||||
debugger
|
||||
tableHeight.value = 330
|
||||
} else if (fatherName == '云资源') {
|
||||
debugger
|
||||
tableHeight.value = 600
|
||||
} else if (fatherName == '感知资源') {
|
||||
debugger
|
||||
tableHeight.value = 330
|
||||
}
|
||||
clickList.value[indexFather].content.splice(
|
||||
clickList.value[indexFather].content.indexOf(name),
|
||||
1
|
||||
)
|
||||
} else {
|
||||
// debugger
|
||||
debugger
|
||||
if (fatherName == '视频资源') {
|
||||
debugger
|
||||
tableHeight.value = 330
|
||||
} else if (fatherName == '云资源') {
|
||||
debugger
|
||||
tableHeight.value = 600
|
||||
} else if (fatherName == '感知资源') {
|
||||
debugger
|
||||
tableHeight.value = 330
|
||||
}
|
||||
clickList.value[indexFather].content[0] = name
|
||||
}
|
||||
console.log('clickList.value', clickList.value)
|
||||
// debugger
|
||||
}
|
||||
const name = ref('')
|
||||
// 搜索框
|
||||
|
|
@ -294,129 +320,131 @@
|
|||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.infrastructrueBox {
|
||||
width: 10.87rem;
|
||||
padding: 0.2rem;
|
||||
background: #f3f5f9;
|
||||
.infrastructrue-tab {
|
||||
background: #ffffff;
|
||||
.infrastructrueBox {
|
||||
width: 10.87rem;
|
||||
padding: 0.2rem;
|
||||
border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
|
||||
span {
|
||||
display: inline-block;
|
||||
height: 0.24rem;
|
||||
line-height: 0.24rem;
|
||||
border: 0.01rem solid #cccccc;
|
||||
border-radius: 0.12rem;
|
||||
margin-left: 0.1rem;
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
padding: 0 0.08rem;
|
||||
}
|
||||
.leftType {
|
||||
margin: 0.1rem 0;
|
||||
}
|
||||
.down {
|
||||
border: 0.01rem solid #0087ff;
|
||||
color: #0087ff;
|
||||
}
|
||||
.tabBox {
|
||||
margin-bottom: 0.16rem;
|
||||
}
|
||||
.tabBox:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.infrastructrue-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.14rem 0.2rem 0.1rem;
|
||||
background: #ffffff;
|
||||
.contentNum {
|
||||
position: relative;
|
||||
display: flex;
|
||||
p {
|
||||
background: #f3f5f9;
|
||||
.infrastructrue-tab {
|
||||
background: #ffffff;
|
||||
padding: 0.2rem;
|
||||
border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
|
||||
span {
|
||||
display: inline-block;
|
||||
height: 0.24rem;
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.24rem;
|
||||
border: 0;
|
||||
border-radius: 0.12rem;
|
||||
margin-left: 0.1rem;
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
span {
|
||||
color: #0087ff;
|
||||
font-size: 0.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
cursor: pointer;
|
||||
padding: 0 0.08rem;
|
||||
}
|
||||
p:first-of-type {
|
||||
padding-right: 0.16rem;
|
||||
margin-right: 0.16rem;
|
||||
.leftType {
|
||||
margin: 0.1rem 0;
|
||||
}
|
||||
.boundary {
|
||||
position: absolute;
|
||||
left: 0.9rem;
|
||||
top: 0.07rem;
|
||||
display: block;
|
||||
width: 0.02rem;
|
||||
border-radius: 0.01rem;
|
||||
height: 0.2rem;
|
||||
background: rgba(150, 144, 144, 0.3);
|
||||
.down {
|
||||
background: #0087ff;
|
||||
color: #ffffff;
|
||||
}
|
||||
.tabBox {
|
||||
height: 0.3rem;
|
||||
margin-bottom: 0.16rem;
|
||||
}
|
||||
.tabBox:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.contentRight {
|
||||
position: relative;
|
||||
.infrastructrue-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.boundary {
|
||||
position: absolute;
|
||||
left: 3.74rem;
|
||||
top: 0.07rem;
|
||||
display: block;
|
||||
width: 0.02rem;
|
||||
border-radius: 0.01rem;
|
||||
height: 0.2rem;
|
||||
background: rgba(150, 144, 144, 0.3);
|
||||
}
|
||||
.searchInput {
|
||||
padding: 0.14rem 0.2rem 0.1rem;
|
||||
background: #ffffff;
|
||||
.contentNum {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-right: 0.2rem;
|
||||
.ant-input-search {
|
||||
max-width: 4rem;
|
||||
}
|
||||
:deep(.ant-input) {
|
||||
width: 2rem;
|
||||
height: 0.36rem;
|
||||
font-size: 0.14rem;
|
||||
color: #b2b2b2;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
:deep(.ant-input-group-addon) {
|
||||
display: inline-block;
|
||||
margin-left: 0.1rem;
|
||||
.ant-input-search-button {
|
||||
width: 0.8rem;
|
||||
height: 0.36rem;
|
||||
background: #0558e1;
|
||||
border-radius: 0.04rem;
|
||||
font-size: 0.14rem;
|
||||
p {
|
||||
color: #666666;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
span {
|
||||
color: #0087ff;
|
||||
font-size: 0.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
:deep(.ant-btn) {
|
||||
background: #0558e1;
|
||||
border-radius: 0.04rem;
|
||||
p:first-of-type {
|
||||
padding-right: 0.16rem;
|
||||
margin-right: 0.16rem;
|
||||
}
|
||||
.boundary {
|
||||
position: absolute;
|
||||
left: 0.9rem;
|
||||
top: 0.07rem;
|
||||
display: block;
|
||||
width: 0.02rem;
|
||||
border-radius: 0.01rem;
|
||||
height: 0.2rem;
|
||||
background: rgba(150, 144, 144, 0.3);
|
||||
}
|
||||
}
|
||||
.buttonAdd {
|
||||
background: #0558e1;
|
||||
border-radius: 0.04rem;
|
||||
height: 0.36rem;
|
||||
border-color: #0558e1;
|
||||
margin-left: 0.1rem;
|
||||
.contentRight {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.boundary {
|
||||
position: absolute;
|
||||
left: 3.74rem;
|
||||
top: 0.07rem;
|
||||
display: block;
|
||||
width: 0.02rem;
|
||||
border-radius: 0.01rem;
|
||||
height: 0.2rem;
|
||||
background: rgba(150, 144, 144, 0.3);
|
||||
}
|
||||
.searchInput {
|
||||
display: flex;
|
||||
margin-right: 0.2rem;
|
||||
.ant-input-search {
|
||||
max-width: 4rem;
|
||||
}
|
||||
:deep(.ant-input) {
|
||||
width: 2rem;
|
||||
height: 0.36rem;
|
||||
font-size: 0.14rem;
|
||||
color: #b2b2b2;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
:deep(.ant-input-group-addon) {
|
||||
display: inline-block;
|
||||
margin-left: 0.1rem;
|
||||
.ant-input-search-button {
|
||||
width: 0.8rem;
|
||||
height: 0.36rem;
|
||||
background: #0558e1;
|
||||
border-radius: 0.04rem;
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
}
|
||||
:deep(.ant-btn) {
|
||||
background: #0558e1;
|
||||
border-radius: 0.04rem;
|
||||
}
|
||||
}
|
||||
.buttonAdd {
|
||||
background: #0558e1;
|
||||
border-radius: 0.04rem;
|
||||
height: 0.36rem;
|
||||
border-color: #0558e1;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.infrastructrue-table {
|
||||
.ant-table-striped :deep(.table-striped) td {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
}
|
||||
}
|
||||
.infrastructrue-table {
|
||||
.ant-table-striped :deep(.table-striped) td {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue