perf: 优化应用图标

This commit is contained in:
Pang 2023-12-24 11:25:44 +08:00
parent a4eb8317da
commit 9300e9fd9a
2 changed files with 81 additions and 11 deletions

View File

@ -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;

View File

@ -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;