对话课文头像大小调整

src/views/book/courseware/preview/components/dialogue_article/RoleChs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="curRole" class="role-rItem">
+  <div v-if="curRole" class="role-rItems">
     <img
       v-if="type === 'upload'"
       :src="curRole.img_list[0] && curRole.img_list[0].file_url"
@@ -10,9 +10,21 @@
       class="adult-book-input-roleImg"
       :src="require('@/assets/simple' + curRole.simpleHead + '.png')"
     />
-    <span v-else class="adult-book-input-roleText" :style="{ background: curRole.color }">{{
-      convertText(curRole.fullName || curRole.name)
-    }}</span>
+    <span
+      v-else
+      class="adult-book-input-roleTexts"
+      :class="[
+        curRole.fullName
+          ? curRole.fullName.length === 4
+            ? 'adult-book-input-roleTextPadding'
+            : curRole.name && curRole.name.length === 4
+              ? 'adult-book-input-roleTextPadding'
+              : ''
+          : '',
+      ]"
+      :style="{ background: curRole.color }"
+      >{{ convertText(curRole.fullName || curRole.name) }}</span
+    >
     <!-- <template>
       <span class="pinyin" :style="{ color: wordColor }">{{ curRole.fullName }}</span>
       <span class="chs" :style="{ color: wordColor }">{{ curRole.fullPinyin }}</span>
@@ -79,29 +91,34 @@ export default {
 </script>
 <style lang="scss" scoped>
 //@import url(); 引入公共css类
-.role-rItem {
+.role-rItems {
   display: flex;
   align-items: center;
   justify-content: flex-start;
 
   .adult-book-input {
-    &-roleText {
+    &-roleTexts {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 36px;
-      height: 36px;
+      width: 44px;
+      height: 44px;
+      padding: 1px;
       font-size: 12px;
-      line-height: 20px;
+      line-height: 15px;
       color: #fff;
       text-align: center;
       background: #a7a7a7;
       border-radius: 100%;
     }
 
+    &-roleTextPadding {
+      padding: 2px 5px;
+    }
+
     &-roleImg {
-      width: 36px;
-      height: 36px;
+      width: 44px;
+      height: 44px;
       overflow: hidden;
       border-radius: 50%;
     }