瀏覽代碼

refactor(appeal.vue): 简化消息容器的样式结构

重构了消息容器的样式结构,移除了冗余的嵌套 div 元素,使代码更简洁易读。主要调整了消息内容和警告信息的布局,确保功能保持不变。
闪电 8 月之前
父節點
當前提交
a56021660b
共有 1 個文件被更改,包括 15 次插入19 次删除
  1. 15 19
      src/views/quality/appeal.vue

+ 15 - 19
src/views/quality/appeal.vue

26
                                         </el-icon>
26
                                         </el-icon>
27
                                     </div>
27
                                     </div>
28
                                     <div
28
                                     <div
29
-                                        :class="['p-3 rounded-lg relative group', msg.type === 'agent' ? 'bg-blue-500 text-white' : 'bg-gray-100']">
29
+                                        :class="['rounded-lg relative group']">
30
                                         <div :class="['text-sm mb-1', msg.type === 'agent' ? 'text-right' : '']">
30
                                         <div :class="['text-sm mb-1', msg.type === 'agent' ? 'text-right' : '']">
31
                                             {{ msg.type === 'agent' ? '坐席' : '客户' }} ({{ msg.time
31
                                             {{ msg.type === 'agent' ? '坐席' : '客户' }} ({{ msg.time
32
                                             }})
32
                                             }})
33
                                         </div>
33
                                         </div>
34
-                                        <div>{{ msg.content }}</div>
35
-                                        <div v-if="msg.warning" class="mt-2 text-xs text-red-500">{{ msg.warning }}
36
-                                        </div>
37
-                                        <el-button v-show="false"
38
-                                            class="group-hover:block absolute -top-3 -right-3 !p-1 !rounded-full bg-red-500 text-white shadow-md"
39
-                                            @click.stop="handleAppeal">
40
-                                            <el-icon class="text-xs">
41
-                                                <Close />
42
-                                            </el-icon>
43
-                                        </el-button>
44
-                                        <div v-if="msg.type === 'agent'"
45
-                                            class="hidden group-hover:flex items-center justify-center absolute top-0 -left-[55px] -translate-x-1/2 !p-1 ">
46
-                                            <el-button @click.stop="handleAppeal">
47
-                                                <el-icon>
48
-                                                    <CirclePlus />
49
-                                                </el-icon>
50
-                                                加入申诉
51
-                                            </el-button>
34
+                                        <div :class="['p-3 rounded-lg relative group', msg.type === 'agent' ? 'bg-blue-500 text-white' : 'bg-gray-100']">
35
+                                            <div>{{ msg.content }}</div>
36
+                                           
37
+                                            </div>
38
+                                            <div v-if="msg.warning" class="mt-2 text-xs text-red-500">{{ msg.warning }}
39
+                                            <div v-if="msg.type === 'agent' && msg.warning"
40
+                                                class="hidden group-hover:flex items-center justify-center absolute top-0 -left-[55px] -translate-x-1/2 !p-1 ">
41
+                                                <el-button @click.stop="handleAppeal">
42
+                                                    <el-icon>
43
+                                                        <CirclePlus />
44
+                                                    </el-icon>
45
+                                                    加入申诉
46
+                                                </el-button>
47
+                                            </div>
52
                                         </div>
48
                                         </div>
53
                                     </div>
49
                                     </div>
54
                                 </div>
50
                                 </div>