客服

src/App.vue

@@ -27,10 +27,16 @@
                     <div class="close" @click="showCustmer = false">
                         <img src="@/assets/icon_close.png" alt="" />
                     </div>
-                    <div class="item" v-for="(item, i) in customers" :key="i">
-                        <img class="bg" src="@/assets/bg_customer.png" />
+                    <div class="item" :class="{ broker: item.broker }" v-for="(item, i) in customers" :key="i">
+                        <img class="bg" v-if="item.broker" src="@/assets/bg_customer2.png" />
+                        <img class="bg" v-else src="@/assets/bg_customer.png" />
                         <div class="item-content">
-                            <img src="@/assets/icon_customer_wa.png" class="icon" v-if="item.type === 'WhatsApp'" />
+                            <img src="@/assets/icon_customer_broker.png" class="icon" v-if="item.broker" alt="" />
+                            <img
+                                src="@/assets/icon_customer_wa.png"
+                                class="icon"
+                                v-else-if="item.type === 'WhatsApp'"
+                            />
                             <img
                                 src="@/assets/icon_customer_tg.png"
                                 class="icon"
@@ -46,7 +52,13 @@
                                 <div class="name" v-else>{{ $t('common.official') }}</div>
                                 <div class="num">{{ item.type }}: {{ item.account }}</div>
                             </div>
-                            <div class="btn-open" @click="open(item)">OPEN</div>
+                            <div
+                                class="btn-open"
+                                :class="{ 'animate__animated animate__heartBeat animate__infinite': item.broker }"
+                                @click="open(item)"
+                            >
+                                {{ item.broker ? $t('balance.symbol') + '20' : 'OPEN' }}
+                            </div>
                         </div>
                     </div>
                     <div class="tips">{{ $t('common.serviceTime') }}</div>
@@ -345,6 +357,12 @@ provide('showCS', () => {
                 .f();
                 justify-content: center;
             }
+
+            &.broker {
+                .btn-open {
+                    background: #e908ff;
+                }
+            }
         }
 
         .tips {