独树的风
10 months ago
parent
0c6c9b0c01
commit
1b2a8b4530
@ -0,0 +1,151 @@
|
||||
<!-- 感知设备搜索及复选图层 -->
|
||||
<template>
|
||||
<div class="search_check">
|
||||
<!-- 右侧区域搜索框 -->
|
||||
<div class="search">
|
||||
<input placeholder="请输入摄像头名称" class="search_input" />
|
||||
<button class="search_button">
|
||||
<i class="el-icon-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- 沿海视频切换框 -->
|
||||
<div class="check">
|
||||
<div class="check_coverage">
|
||||
<div class="check_title">图层</div>
|
||||
</div>
|
||||
<div class="check_coveragebottom">
|
||||
<el-checkbox class="checkbox" size="mini">全选</el-checkbox>
|
||||
<el-checkbox size="mini" class="checkbox">
|
||||
<div class="check_label">
|
||||
<div class="check_label_text">沿海视频</div>
|
||||
<div class="check_label_count">(446)</div>
|
||||
</div>
|
||||
</el-checkbox>
|
||||
<el-checkbox size="mini" class="checkbox">
|
||||
<div class="check_label">
|
||||
<div class="check_label_text">非沿海视频</div>
|
||||
<div class="check_label_count">(779)</div>
|
||||
</div>
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MapSearch',
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.search_check {
|
||||
width: 16vw;
|
||||
height: 27vh;
|
||||
// position: absolute;
|
||||
// right: 23vw;
|
||||
position: relative;
|
||||
// background: #02274e;
|
||||
z-index: 2;
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
|
||||
.search_input {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 14vw;
|
||||
border: 1px solid #00f5ff;
|
||||
background-color: #02274e;
|
||||
color: #ecf4f9;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search_input::placeholder {
|
||||
position: relative;
|
||||
left: 1vw;
|
||||
font-size: 0.8rem;
|
||||
font-family: '苹方-简';
|
||||
color: #ecf4f9;
|
||||
}
|
||||
|
||||
.search_button {
|
||||
width: 2.5vw;
|
||||
height: 4vh;
|
||||
border: 0;
|
||||
background-color: #03d6df;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #02c7ce;
|
||||
}
|
||||
|
||||
.el-icon-search {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.check {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
width: 13vw;
|
||||
height: 18vh;
|
||||
position: absolute;
|
||||
top: 7vh;
|
||||
right: 0;
|
||||
background-image: url('@/assets/picture/bg_info.png');
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.check_coverage {
|
||||
height: 3vh;
|
||||
}
|
||||
|
||||
.check_title {
|
||||
margin-left: 1vw;
|
||||
color: #ecf4f9;
|
||||
font-size: 0.8rem;
|
||||
line-height: 3vh;
|
||||
font-family: '苹方-简 中黑体';
|
||||
}
|
||||
|
||||
.check_coveragebottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
height: 15vh;
|
||||
|
||||
.el-checkbox {
|
||||
margin-left: 1vw;
|
||||
color: #ecf4f9;
|
||||
|
||||
.el-checkbox__label {
|
||||
font-size: 0.8rem;
|
||||
font-family: '苹方-简 中黑体';
|
||||
}
|
||||
|
||||
.check_label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 10vw;
|
||||
|
||||
.check_label_count {
|
||||
width: 3vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue