perf: 优化应用图标

resources/assets/js/pages/manage/application.vue

@@ -26,7 +26,7 @@
                             <div class="apply-col">
                                 <div @click="applyClick(item)">
                                     <div class="logo">
-                                        <img :src="getLogoPath(item.value)" />
+                                        <div class="apply-icon no-dark-content" :class="getLogoClass(item.value)"></div>
                                         <div @click.stop="applyClick(item, 'badge')" class="apply-box-top-report">
                                             <Badge v-if="showBadge(item,'approve')" :overflow-count="999" :count="approveUnreadNumber" />
                                             <Badge v-if="showBadge(item,'report')" :overflow-count="999" :count="reportUnreadNumber" />
@@ -58,7 +58,7 @@
                 <div class="ivu-modal-wrap-apply-body">
                     <ul class="ivu-modal-wrap-ul" v-if="aibotType == 1">
                         <li v-for="(item, key) in aibotList"  :key="key">
-                            <img :src="item.src">
+                            <img class="apply-icon" :src="item.src">
                             <h4>{{ item.label }}</h4>
                             <p class="desc" @click="openDetail(item.desc)">{{ item.desc }}</p>
                             <p class="btn" @click="onGoToChat(item.value)">{{ $L('开始聊天') }}</p>
@@ -121,13 +121,13 @@
                 <div class="ivu-modal-wrap-apply-body">
                     <ul class="ivu-modal-wrap-ul" v-if="meetingType == 1">
                         <li>
-                            <img :src="getLogoPath('meeting')">
+                            <div class="apply-icon no-dark-content meeting"></div>
                             <h4>{{ $L('新会议') }}</h4>
                             <p class="desc" @click="openDetail(meetingDescs.add)"> {{ meetingDescs.add }} </p>
                             <p class="btn" @click="onMeeting('createMeeting')">{{ $L('新建会议') }}</p>
                         </li>
                         <li>
-                            <img :src="getLogoPath('meeting-join')">
+                            <div class="apply-icon no-dark-content meeting-join"></div>
                             <h4>{{ $L('加入会议') }}</h4>
                             <p class="desc" @click="openDetail(meetingDescs.join)">{{ meetingDescs.join }}</p>
                             <p class="btn" @click="onMeeting('joinMeeting')">{{ $L('加入会议') }}</p>
@@ -374,9 +374,9 @@ export default {
                 }
             });
         },
-        getLogoPath(name) {
+        getLogoClass(name) {
             name = name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-            return $A.apiUrl(`../images/application/${name}.svg`)
+            return name
         },
         showBadge(item,type) {
             let num = 0;

resources/assets/sass/pages/page-apply.scss

@@ -67,10 +67,6 @@
                         width: 40px;
                         height: 40px;
                         display: inline-block;
-                        >img{
-                            width: 100%;
-                            height: 100%;
-                        }
                     }
 
                     >p{
@@ -136,6 +132,80 @@
     }
 }
 
+.apply-icon {
+    width: 40px;
+    height: 40px;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center center;
+    &.approve {
+        background-image: url("../images/application/approve.svg");
+    }
+    &.add-project {
+        background-image: url("../images/application/add-project.svg");
+    }
+    &.add-task {
+        background-image: url("../images/application/add-task.svg");
+    }
+    &.all-user {
+        background-image: url("../images/application/all-user.svg");
+    }
+    &.app-push {
+        background-image: url("../images/application/app-push.svg");
+    }
+    &.approve {
+        background-image: url("../images/application/approve.svg");
+    }
+    &.calendar {
+        background-image: url("../images/application/calendar.svg");
+    }
+    &.file {
+        background-image: url("../images/application/file.svg");
+    }
+    &.ldap {
+        background-image: url("../images/application/ldap.svg");
+    }
+    &.mail {
+        background-image: url("../images/application/mail.svg");
+    }
+    &.meeting {
+        background-image: url("../images/application/meeting.svg");
+    }
+    &.meeting-create {
+        background-image: url("../images/application/meeting-create.svg");
+    }
+    &.meeting-join {
+        background-image: url("../images/application/meeting-join.svg");
+    }
+    &.okr {
+        background-image: url("../images/application/okr.svg");
+    }
+    &.okr-analyze {
+        background-image: url("../images/application/okr-analyze.svg");
+    }
+    &.report {
+        background-image: url("../images/application/report.svg");
+    }
+    &.robot {
+        background-image: url("../images/application/robot.svg");
+    }
+    &.scan {
+        background-image: url("../images/application/scan.svg");
+    }
+    &.setting {
+        background-image: url("../images/application/setting.svg");
+    }
+    &.signin {
+        background-image: url("../images/application/signin.svg");
+    }
+    &.vote {
+        background-image: url("../images/application/vote.svg");
+    }
+    &.word-chain {
+        background-image: url("../images/application/word-chain.svg");
+    }
+}
+
 .ivu-modal-wrap-apply {
     position: relative;
     overflow: auto;
@@ -316,7 +386,7 @@
                 margin-bottom: 10px;
                 border-radius: 5px;
 
-                img {
+                .apply-icon {
                     display: block;
                     width: 50px;
                     height: 50px;