更改

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

@@ -1,17 +1,24 @@
 <template>
-  <div class='HomeFrame'>
+  <div class="HomeFrame">
-    <ElPopover trigger="manual" :value="activeIcon === 'Frame'" :visibleArrow="false" placement="left"
+    <ElPopover
-      popper-class="global-input-search-popover">
+      trigger="manual"
-      <Button :class="['btn', { 'btn-active': activeIcon }]" slot="reference" @click.native="handleClick('Frame')">
+      :value="activeIcon === 'Frame'"
-        <img src="@screen/images/home-Frame/Frame.svg">
+      :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 class="title">图标含义</div>
-          图标含义
-        </div>
         <!-- <Form labelWidth="90px" column="1" class="form" ref="FormConfigRef" :formList="formList" /> -->
-        <img class="image" src="@screen/images/home-Frame/logoMean.jpg">
+        <img class="image" src="@screen/images/home-Frame/logoMean.png" />
         <!-- <div class="footer">
         </div> -->
       </div>
@@ -20,21 +27,21 @@
 </template>
 
 <script>
-import Button from '@screen/components/Buttons/Button.vue';
+import Button from "@screen/components/Buttons/Button.vue";
-import Form from '@screen/components/FormConfig';
+import Form from "@screen/components/FormConfig";
 import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
-import { merge, cloneDeep } from "lodash"
+import { merge, cloneDeep } from "lodash";
 
 export default {
-  name: 'HomeFrame',
+  name: "HomeFrame",
   components: {
     Button,
-    Form
+    Form,
   },
   data() {
     return {
-      activeIcon: null
+      activeIcon: null,
-    }
+    };
   },
   methods: {
     handleClick(type) {
@@ -45,43 +52,45 @@ export default {
       // this.filterData = data;
       this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data);
     },
-  }
+  },
-}
+};
 </script>
 
-<style lang='scss'>
+<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;
+  margin-top: 6vh;
 
   .body {
     .title {
-      background: linear-gradient(90deg, #237E9B 0%, rgba(23, 145, 184, 0) 100%);
+      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>
+<style lang="scss" scoped>
 .image {
-  width: 45vw;
+  width: 60vw;
   height: 65vh;
 }
 
 .HomeFrame {
-
   .btn {
     padding: 9px;
-    background: linear-gradient(180deg, #152E3C 0%, #163A45 100%);
+    background: linear-gradient(180deg, #152e3c 0%, #163a45 100%);
     border-radius: 4px;
     overflow: hidden;
     height: unset;
@@ -89,7 +98,7 @@ div.el-popper.global-input-search-popover {
   }
 
   .btn-active {
-    background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+    background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
   }
 }
 </style>