diff --git a/src/components/ArknItem.vue b/src/components/ArknItem.vue
index 040c74c2..ea344302 100644
--- a/src/components/ArknItem.vue
+++ b/src/components/ArknItem.vue
@@ -1,6 +1,6 @@
 <template>
   <DataImg
-    class="arkn-item mdui-m-r-1 no-sl no-pe"
+    class="arkn-item mdui-m-r-1"
     type="item"
     :name="name"
     :style="{ width: widthCss, height: widthCss }"
diff --git a/src/components/DataImg.vue b/src/components/DataImg.vue
index 2966d1b9..18a1f423 100644
--- a/src/components/DataImg.vue
+++ b/src/components/DataImg.vue
@@ -1,5 +1,6 @@
 <template>
   <img
+    class="no-sl no-pe"
     :src="imgSrc"
     :style="imgStyle"
     :loading="loading"
diff --git a/src/components/material/PresetSettingDialog.vue b/src/components/material/PresetSettingDialog.vue
index d5ff0a34..40d32c1b 100644
--- a/src/components/material/PresetSettingDialog.vue
+++ b/src/components/material/PresetSettingDialog.vue
@@ -9,10 +9,7 @@
   >
     <template v-if="sp">
       <div class="mdui-card-header mdui-p-b-0">
-        <avatar
-          class="mdui-card-header-avatar mdui-color-grey-400 no-pe"
-          :name="selectedPresetName"
-        />
+        <Avatar class="mdui-card-header-avatar mdui-color-grey-400" :name="selectedPresetName" />
         <div class="mdui-card-header-title">{{ $t(`character.${selectedPresetName}`) }}</div>
       </div>
       <div class="mdui-card-content preset-list mdui-p-x-3">
@@ -65,7 +62,7 @@
                 }}</div></mdui-checkbox
               >
               <DataImg
-                class="skill-icon no-pe mdui-shadow-4"
+                class="skill-icon mdui-shadow-4"
                 type="skill"
                 :name="skill.icon || skill.name"
               />
diff --git a/src/components/material/PresetTodoDialog.vue b/src/components/material/PresetTodoDialog.vue
index 20b0bfb9..7af3bf52 100644
--- a/src/components/material/PresetTodoDialog.vue
+++ b/src/components/material/PresetTodoDialog.vue
@@ -2,7 +2,7 @@
   <div id="preset-todo" class="mdui-dialog" ref="dialog">
     <template v-if="curPresetName">
       <div class="mdui-dialog-title">
-        <avatar class="mdui-card-header-avatar mdui-color-grey-400 no-pe" :name="curPresetName" />
+        <Avatar class="mdui-card-header-avatar mdui-color-grey-400" :name="curPresetName" />
         <div class="mdui-card-header-title">{{ $t(`character.${curPresetName}`) }}</div>
         <div class="mdui-text-color-theme-secondary mdui-m-t-1 no-sl"
           ><small>{{ $t(`cultivate.todos.tips`) }}</small></div
diff --git a/src/components/riic/SkillTr.vue b/src/components/riic/SkillTr.vue
index 9e437d2c..ddd64b99 100644
--- a/src/components/riic/SkillTr.vue
+++ b/src/components/riic/SkillTr.vue
@@ -25,7 +25,7 @@
     </td>
     <td class="mdui-p-y-0">
       <DataImg
-        class="building-skill-icon no-pe"
+        class="building-skill-icon"
         type="building_skill"
         :name="buildingBuff.data[skill.id].icon"
         :lazy="true"
diff --git a/src/views/Hr.vue b/src/views/Hr.vue
index 3570039c..78864159 100644
--- a/src/views/Hr.vue
+++ b/src/views/Hr.vue
@@ -210,7 +210,7 @@
                   >
                     <div v-if="!isPub(char)" class="tag-triangle right-top"></div>
                     <div v-if="isPubOnly(char)" class="tag-triangle right-bottom"></div>
-                    <avatar class="tag-avatar no-pe" v-if="setting.showAvatar" :name="char.name" />
+                    <Avatar class="tag-avatar" v-if="setting.showAvatar" :name="char.name" />
                     <span>{{ $t(`character.${char.name}`) }}</span>
                   </button>
                 </td>
@@ -259,11 +259,7 @@
                     >
                       <div v-if="!isPub(char)" class="tag-triangle right-top"></div>
                       <div v-if="isPubOnly(char)" class="tag-triangle right-bottom"></div>
-                      <avatar
-                        class="tag-avatar no-pe"
-                        v-if="setting.showAvatar"
-                        :name="char.name"
-                      />
+                      <Avatar class="tag-avatar" v-if="setting.showAvatar" :name="char.name" />
                       <span>{{ $t(`character.${char.name}`) }}</span>
                     </button>
                   </td>
@@ -280,11 +276,7 @@
     <!-- 详细信息 -->
     <mdui-dialog id="detail" class="mdui-card" ref="detailDialog">
       <div v-if="detail" class="mdui-card-header mdui-p-b-0">
-        <avatar
-          class="mdui-card-header-avatar no-pe"
-          :key="`di-${detail.name}`"
-          :name="detail.name"
-        />
+        <Avatar class="mdui-card-header-avatar" :key="`di-${detail.name}`" :name="detail.name" />
         <div class="mdui-card-header-title mdui-m-t-1">
           <span>{{ $t(`character.${detail.name}`) }}</span>
           <button
diff --git a/src/views/Material/index.vue b/src/views/Material/index.vue
index 83c3cefb..5c69ad77 100644
--- a/src/views/Material/index.vue
+++ b/src/views/Material/index.vue
@@ -94,9 +94,8 @@
                     class="mdui-list-item mdui-p-y-0 mdui-p-x-1"
                   >
                     <div class="mdui-list-item-avatar lh-0"
-                      ><avatar
+                      ><Avatar
                         v-if="preset"
-                        class="no-pe"
                         :key="`head-${props.item.text}`"
                         :name="props.item.name"
                     /></div>
@@ -144,7 +143,7 @@
                       :class="{ 'opacity-5': !$root.isReleasedChar(char.name) }"
                       @click="$refs.presetTodoDialog.open({ tag: char, index })"
                     >
-                      <avatar class="mdui-chip-icon no-pe" :name="char.name" />
+                      <Avatar class="mdui-chip-icon" :name="char.name" />
                       <span class="mdui-chip-title">{{ char.text }}</span>
                     </drag>
                   </template>
@@ -443,7 +442,7 @@
                   @click="showDropDetail(materialTable[materialName])"
                 >
                   <DataImg
-                    class="material-image no-pe"
+                    class="material-image"
                     type="item"
                     :name="materialTable[materialName].name"
                   />
@@ -597,7 +596,7 @@
                   class="mdui-card-header-avatar mdui-valign pointer no-sl"
                   @click="showDropDetail(materialTable[material.name])"
                 >
-                  <DataImg class="material-image no-pe" type="item" :name="material.name" />
+                  <DataImg class="material-image" type="item" :name="material.name" />
                 </div>
                 <!-- 材料名 -->
                 <div