<template>
|
<div class="SettingBox" :class="{ large: activeTab === 2 }">
|
<div class="title">GB28181配置</div>
|
<div class="close iconfont" @click="$emit('close')"></div>
|
<div class="content">
|
<div class="tabs">
|
<div
|
class="tab"
|
:class="{ active: activeTab === 0 }"
|
@click="activeTab = 0"
|
>
|
国标ID
|
</div>
|
<div
|
class="tab"
|
:class="{ active: activeTab === 1 }"
|
@click="activeTab = 1"
|
>
|
接入平台列表
|
</div>
|
<div
|
class="tab"
|
:class="{ active: activeTab === 2 }"
|
@click="activeTab = 2"
|
>
|
国标摄像机
|
</div>
|
</div>
|
|
<FormArea @close="$emit('close')" v-if="activeTab === 0"></FormArea>
|
<TableArea v-if="activeTab === 1"></TableArea>
|
<TreeArea @close="$emit('close')" v-if="activeTab === 2"></TreeArea>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import FormArea from "@/views/GB28181/components/FormArea";
|
import TableArea from "@/views/GB28181/components/TableArea";
|
import TreeArea from "@/views/GB28181/components/TreeArea";
|
|
export default {
|
components: {
|
FormArea,
|
TableArea,
|
TreeArea,
|
},
|
data() {
|
return {
|
activeTab: 0,
|
};
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.SettingBox {
|
position: fixed;
|
top: 50%;
|
left: 50%;
|
margin-top: -354px;
|
margin-left: -500px;
|
width: 1000px;
|
height: 708px;
|
background-color: #fff;
|
box-shadow: 0px 2px 16px 0px rgba(0, 43, 106, 0.25);
|
z-index: 2;
|
|
&.large {
|
margin-top: -477px;
|
margin-left: -719px;
|
width: 1438px;
|
height: 953px;
|
}
|
|
.title {
|
box-sizing: border-box;
|
padding: 20px;
|
height: 64px;
|
border-bottom: 1px solid #e9ebee;
|
font-size: 18px;
|
font-weight: 700;
|
}
|
|
.close {
|
position: absolute;
|
top: 20px;
|
right: 20px;
|
font-size: 12px;
|
color: #666;
|
cursor: pointer;
|
}
|
|
.content {
|
padding: 20px;
|
|
.tabs {
|
display: flex;
|
border-bottom: 1px solid #e9ebee;
|
|
.tab {
|
transform: translateY(1px);
|
padding: 16px 24px;
|
cursor: pointer;
|
border-bottom: 2px solid rgba(255, 255, 255, 0);
|
|
&.active {
|
border-color: #0065ff;
|
color: #0065ff;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
