|
|
@ -1,22 +1,22 @@ |
|
|
|
<template> |
|
|
|
<div class='HomeFrame'> |
|
|
|
<ElPopover trigger="manual" :value="activeIcon === 'Frame'" :visibleArrow="false" placement="left" |
|
|
|
popper-class="global-input-search-popover"> |
|
|
|
<Button :class="['btn', { 'btn-active': activeIcon }]" slot="reference" @click.native="handleClick('Frame')"> |
|
|
|
<img src="@screen/images/home-Frame/Frame.svg"> |
|
|
|
</Button> |
|
|
|
<div class='HomeFrame'> |
|
|
|
<ElPopover trigger="manual" :value="activeIcon === 'Frame'" :visibleArrow="false" placement="left" |
|
|
|
popper-class="global-input-search-popover"> |
|
|
|
<Button :class="['btn', { 'btn-active': activeIcon }]" slot="reference" @click.native="handleClick('Frame')"> |
|
|
|
<img src="@screen/images/home-Frame/Frame.svg"> |
|
|
|
</Button> |
|
|
|
|
|
|
|
<div class="body"> |
|
|
|
<div class="title"> |
|
|
|
图标含义 |
|
|
|
</div> |
|
|
|
<!-- <Form labelWidth="90px" column="1" class="form" ref="FormConfigRef" :formList="formList" /> --> |
|
|
|
<img class="image" src="@screen/images/home-Frame/logoMean.jpg"> |
|
|
|
<div class="footer"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</ElPopover> |
|
|
|
</div> |
|
|
|
<div class="body"> |
|
|
|
<div class="title"> |
|
|
|
图标含义 |
|
|
|
</div> |
|
|
|
<!-- <Form labelWidth="90px" column="1" class="form" ref="FormConfigRef" :formList="formList" /> --> |
|
|
|
<img class="image" src="@screen/images/home-Frame/logoMean.jpg"> |
|
|
|
<!-- <div class="footer"> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
</ElPopover> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
@ -26,69 +26,70 @@ import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/Pr |
|
|
|
import { merge, cloneDeep } from "lodash" |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'HomeFrame', |
|
|
|
components: { |
|
|
|
Button, |
|
|
|
Form |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
activeIcon: null |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handleClick(type) { |
|
|
|
this.activeIcon = this.activeIcon === type ? null : type; |
|
|
|
}, |
|
|
|
filterEnd(data) { |
|
|
|
this.activeIcon = null; |
|
|
|
// this.filterData = data; |
|
|
|
this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data); |
|
|
|
}, |
|
|
|
} |
|
|
|
name: 'HomeFrame', |
|
|
|
components: { |
|
|
|
Button, |
|
|
|
Form |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
activeIcon: null |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handleClick(type) { |
|
|
|
this.activeIcon = this.activeIcon === type ? null : type; |
|
|
|
}, |
|
|
|
filterEnd(data) { |
|
|
|
this.activeIcon = null; |
|
|
|
// this.filterData = data; |
|
|
|
this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data); |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</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); |
|
|
|
background: rgba(6, 66, 88, 0.8); |
|
|
|
border: 1px solid rgba(42, 217, 253, 0.6); |
|
|
|
position: relative; |
|
|
|
padding-top: 36px; |
|
|
|
transform: translateY(24px); |
|
|
|
margin-top: 3vh; |
|
|
|
|
|
|
|
.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%; |
|
|
|
.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> |
|
|
|
.image { |
|
|
|
width: 1440px; |
|
|
|
height: 900px; |
|
|
|
width: 45vw; |
|
|
|
height: 65vh; |
|
|
|
} |
|
|
|
|
|
|
|
.HomeFrame { |
|
|
|
|
|
|
|
.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 { |
|
|
|
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%); |
|
|
|
} |
|
|
|
.btn-active { |
|
|
|
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|