feat 首页图标图片比例调整 增加关闭按钮

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

@@ -1,22 +1,17 @@
 <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')"
-      >
+    <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>
+        <span class="close" @click="() => { this.activeIcon = null; }">
+          <i class="el-icon-close" />
+        </span>
         <!-- <Form labelWidth="90px" column="1" class="form" ref="FormConfigRef" :formList="formList" /> -->
         <img class="image" src="@screen/images/home-Frame/logoMean.png" />
         <!-- <div class="footer">
@@ -67,23 +62,31 @@ div.el-popper.global-input-search-popover {
 
   .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%;
     }
+
+    .close {
+      padding: 3px 9px;
+      cursor: pointer;
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: fit-content;
+    }
+
   }
 }
 </style>
 <style lang="scss" scoped>
 .image {
-  width: 60vw;
+  width: 50vw;
   height: 65vh;
 }