优化快捷菜单组件---fix3

src/components/app-quick-menus/app-quick-menus.less

 .app-quick-menus{
   display: flex;
-  .menuIcon{
-    padding: 4px;
-    padding-bottom: 10px;
-    display: flex;
-    width: 140px;
-    height: 80px;
-    border: 1px #70C0F5 solid;
-    border-radius: 3px;
-    align-items: center;
-    margin: 0;
-    background-color: #C0E3FA;
-    justify-content: space-around;
-    flex-direction: column;
-    span{
-      font-size: 40px;
-    }
-    img{
-      width: 30px;
-      height: 30px;
-    }
-    h4{
-      font-weight: 500;
+  .el-card{
+    margin-left: 16px;
+    .el-card__body{
+      padding: 0;
+      width: 200px;
+      height: 122px;
+      border: 1px rgb(210,238,255) solid;
+      border-radius: 3px;
+      margin: 0;
+      background-color: rgb(240,249,255);
+      &:hover{
+        border-color: rgb(53,152,220) !important;
+      }
+      .menuIcon{
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+        span{
+          font-size: 40px;
+        }
+        img{
+          width: 46px;
+          height: 46px;
+          // margin-top: 12px;
+        }
+        h4{
+          font-weight: 500;
+          font-size: 16px;
+        }
+      }
+      
     }
   }
+    
+  
 }

src/components/app-quick-menus/app-quick-menus.vue

 <template>
   <div class="app-quick-menus">
     <template v-for="(item,index) in menus">
-      <card :bordered="false" v-if="item.items && Array.isArray(item.items)" :key="index">
-        <p slot="title" @click="$emit('menuClick',item.name, [item.name])">
-          <span style="margin-right:12px">
-            <img :src="item.icon" v-if="!Object.is(item.icon, '')" />
-            <img :src="item.iconcls" v-else-if="!Object.is(item.iconcls, '')" />
-            <i class="fa fa-cogs" v-else></i>
-          </span>
+      <div :bordered="false" v-if="item.items && Array.isArray(item.items)" :key="index">
+        <p @click="$emit('menuClick',item.name, [item.name])">
           <span>{{$t('app.menus.' + ctrlName + '.' + item.name)}}</span>
           <span class="line"></span>
         </p>
         <p style=" display: 'flex' ">
-          <app-quick-menus :menus="item.items" :ctrlName = "ctrlName"></app-quick-menus>
+          <app-quick-menus :menus="item.items" :ctrlName = "ctrlName" @menuClick="menuClick"></app-quick-menus>
         </p>
-      </card>
-      <card
+      </div>
+      <el-card
         :key="index"
-        :style=" {
-            width:'140px',
-            height: '80px',
-            wordBreak: 'break-all',
-            cursor: 'pointer',
-            marginLeft: '20px',
-            border:'0',
-            padding:'0',
-            display: 'flex',
-            alignItems: 'center'
-        }"
-        :padding="0"
+        shadow="never"
+        
         v-else
       >
-        <div @click="$emit('menuClick',item.name, [item.name])" class="menuIcon">
+        <div @click="menuClick(item.name,[item.name])" class="menuIcon">
           <span>
             <img :src="item.icon" v-if="!Object.is(item.icon, '')" />
             <img :src="item.iconcls" v-else-if="!Object.is(item.iconcls, '')" />
@@ -39,7 +24,7 @@
           </span>
           <h4>{{$t('app.menus.' + ctrlName + '.' + item.name)}}</h4>
         </div>
-      </card>
+      </el-card>
     </template>
   </div>
 </template>
@@ -49,6 +34,11 @@ import { Component, Vue, Prop, Model, Watch } from "vue-property-decorator";
 
 @Component({})
 export default class AppQuickMenus extends Vue {
+
+  public menuClick(index: any,indexs: any[]) {
+    this.$emit("menuClick",index,indexs);
+  }
+
   /**
    * 菜单数据
    *