Joe
1 year ago
16 changed files with 319 additions and 66 deletions
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
@ -0,0 +1,113 @@ |
|||
<template> |
|||
<div class='HomeFilter'> |
|||
<ElPopover trigger="click" :visibleArrow="false" placement="left" popper-class="global-input-search-popover"> |
|||
<Button :class="['btn', { 'btn-active': true }]" slot="reference"> |
|||
<img src="@screen/images/home-filter/filter.svg"> |
|||
</Button> |
|||
|
|||
|
|||
<div class="body"> |
|||
<div class="title"> |
|||
设备筛选 |
|||
</div> |
|||
<Form labelWidth="72px" column="1" class="form" ref="FormConfigRef" :formList="formList" /> |
|||
|
|||
<div class="footer">∏ |
|||
<Button style="background-color: rgba(0, 179, 204, .3);" @click.native="handleResetForm"> |
|||
重置 |
|||
</Button> |
|||
<Button @click.native="handleSearch"> |
|||
搜索 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</ElPopover> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Button from '@screen/components/Buttons/Button.vue'; |
|||
import Form from '@screen/components/FormConfig'; |
|||
import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js"; |
|||
|
|||
export default { |
|||
name: 'HomeFilter', |
|||
components: { |
|||
Button, |
|||
Form |
|||
}, |
|||
data() { |
|||
return { |
|||
formList: [ |
|||
{ |
|||
...PresetFormItems.station, |
|||
key: "23", |
|||
required: false, |
|||
label: "起始桩号" |
|||
}, |
|||
{ |
|||
...PresetFormItems.station, |
|||
key: "s", |
|||
required: false, |
|||
label: "结束桩号" |
|||
}, |
|||
{ |
|||
label: "车道占用:", |
|||
key: "key027", |
|||
type: "CheckboxGroup", |
|||
isAlone: true, |
|||
default: [], |
|||
options: { |
|||
options: [ |
|||
{ key: "weChat", label: "行1" }, |
|||
{ key: "message", label: "行2" }, |
|||
{ key: "website", label: "行3" }, |
|||
{ key: "weibo", label: "行4" }, |
|||
{ key: "weibo2", label: "应急车道" }, |
|||
], |
|||
}, |
|||
} |
|||
] |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
div.el-popper.global-input-search-popover { |
|||
background: rgba(6, 66, 88, 0.8); |
|||
border: 1px solid rgba(42, 217, 253, 0.6); |
|||
position: relative; |
|||
padding-top: 36px; |
|||
transform: translateY(24px); |
|||
|
|||
.body { |
|||
.title { |
|||
background: linear-gradient(90deg, #237E9B 0%, rgba(23, 145, 184, 0) 100%); |
|||
padding: 3px 9px; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
|
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<style lang='scss' scoped> |
|||
.HomeFilter { |
|||
|
|||
.btn { |
|||
padding: 9px; |
|||
background: linear-gradient(180deg, #152E3C 0%, #163A45 100%); |
|||
border-radius: 4px; |
|||
overflow: hidden; |
|||
height: unset; |
|||
border: 1px solid rgba(40, 144, 167, 1); |
|||
} |
|||
|
|||
.btn-active { |
|||
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue