jihe-hs/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeFrame/index.vue

<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="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>
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";
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);
    },
  }
}
</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);
  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%;

    }
  }
}
</style>
<style lang='scss' scoped>
.image {
  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-active {
    background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
  }
}
</style>