From b5c08c1f70e7ae8f074834159b6729914618e2e4 Mon Sep 17 00:00:00 2001
From: sws <1141121512@qq.com>
Date: Fri, 3 Nov 2023 17:58:52 +0800
Subject: [PATCH] =?UTF-8?q?1.=E6=B5=8B=E8=AF=95=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/online-service/online-service.vue | 55 +++++++++++---------
 components/quick-nav/quick-nav.vue           | 38 ++------------
 2 files changed, 34 insertions(+), 59 deletions(-)

diff --git a/components/online-service/online-service.vue b/components/online-service/online-service.vue
index 3a5a9396..06755d9f 100644
--- a/components/online-service/online-service.vue
+++ b/components/online-service/online-service.vue
@@ -29,26 +29,28 @@
         <view v-else>
             <block v-if="is_online_service_fixed == 1">
                 <movable-area class="online-service-movable-container" :style="'height: calc(100% - '+height_dec+'rpx);top:'+top+'rpx;'">
-                    <movable-view direction="all" :x="x" :y="y" :animation="false" class="online-service-event-submit breathe">
+                    <movable-view direction="all" :x="x" :y="y" :animation="false" class="online-service-event-submit spread">
+                        <view class="ring"></view>
+	                    <view class="ring"></view>
                         <block v-if="is_chat == 1">
                             <button type="default" :class="common_ent" @tap="chat_event">
-                                <image class="icon dis-block" :src="common_static_url+'online-service-icon.png'"></image>
+                                <image class="icon dis-block" :src="common_static_url+'online-service-icons.png'"></image>
                             </button>
                         </block>
                         <block v-else>
                             <!-- #ifdef MP-WEIXIN || MP-TOUTIAO || MP-BAIDU -->
                             <button open-type="contact" :class="common_ent" :show-message-card="propCard" :send-message-title="propTitle" :send-message-path="propPath" :send-message-img="propImg">
-                                <image class="icon dis-block" :src="common_static_url+'online-service-icon.png'"></image>
+                                <image class="icon dis-block" :src="common_static_url+'online-service-icons.png'"></image>
                             </button>
                             <!-- #endif -->
                             <!-- #ifdef MP-ALIPAY -->
                             <button open-type="contact" :class="'alipay-contact '+common_ent">
-                                <contact-button :tnt-inst-id="mini_alipay_tnt_inst_id" :scene="mini_alipay_scene" :alipay-card-no="mini_alipay_openid || ''" :icon="common_static_url+'online-service-icon.png'" size="40rpx*40rpx" />
+                                <contact-button :tnt-inst-id="mini_alipay_tnt_inst_id" :scene="mini_alipay_scene" :alipay-card-no="mini_alipay_openid || ''" :icon="common_static_url+'online-service-icons.png'" size="40rpx*40rpx" />
                             </button>
                             <!-- #endif -->
                             <!-- #ifdef H5 || APP -->
                             <button type="default" :class="common_ent" @tap="call_event">
-                                <image class="icon dis-block" :src="common_static_url+'online-service-icon.png'"></image>
+                                <image class="icon dis-block" :src="common_static_url+'online-service-icons.png'"></image>
                             </button>
                             <!-- #endif -->
                         </block>
@@ -153,12 +155,12 @@
                 system: system,
                 // 位置坐标
                 x: width - 43,
-                y: height - 240,
+                y: height - 380,
                 // 展示位置处理
                 top: top_h,
                 height_dec: top_h,
                 // #ifdef H5 || APP
-                top: 10,
+                top: 250,
                 height_dec: this.propIsBar ? 190 : 90,
                 // #endif
                 // 是否使用客服系统
@@ -293,30 +295,33 @@
     /**
      * 呼吸灯
      */
-     .breathe {
-        background-color: rgb(238 73 70);
+     .spread {
+        background-color: rgba(238, 73, 70,0.4);
         border-radius: 100%;
         width: 50px;
         height: 50px;
         position: relative;
+        z-index: 1;
+    }
+    .spread .ring {
+        /* 速度为1.5 * 层数 = 实际运行速度，速度修改则 animation-delay 属性也修改相同速度 */
+        animation: pulsing 1.5s ease-out infinite;
+    }
+    /* 速度为1*层数 */
+    .spread .ring:nth-of-type(1) {
+        -webkit-animation-delay: -1.5s;
+        animation-delay: -1.5s;
     }
 
-    .breathe::before,
-    .breathe::after {
-        background-color: rgba(238, 73, 70, 0.3);
+    /* 速度为1*层数 */
+    .spread .ring:nth-of-type(2) {
+        -webkit-animation-delay: -2s;
+        animation-delay: -2s;
     }
-
-    .breathe::before {
-        width: 50px;
-        height: 50px;
-        top: 0;
-        left: 0;
-    }
-
-    .breathe::after {
-        width: 55px;
-        height: 55px;
-        top: -2.5px;
-        left: -2.5px;
+    @keyframes pulsing {
+        100% {
+            transform: scale(1.35);
+            opacity: 0
+        }
     }
 </style>
\ No newline at end of file
diff --git a/components/quick-nav/quick-nav.vue b/components/quick-nav/quick-nav.vue
index 4e8e2c01..4cd1987b 100644
--- a/components/quick-nav/quick-nav.vue
+++ b/components/quick-nav/quick-nav.vue
@@ -2,8 +2,8 @@
     <view>
         <!-- 开启事件 -->
         <movable-area v-if="quick_status == 1" :class="'quick-movable-container ' + common_ent" :style="'height: calc(100% - ' + height_dec + 'rpx);top:' + top + 'rpx;'">
-            <movable-view direction="all" :x="x" :y="y" :animation="false" class="quick-event-submit breathe" @tap="quick_open_event">
-                <image :src="common_static_url + 'quick-icon.png'" mode="widthFix"></image>
+            <movable-view direction="all" :x="x" :y="y" :animation="false" class="quick-event-submit" @tap="quick_open_event">
+                <image :src="common_static_url + 'quick-icons.png'" mode="widthFix"></image>
             </movable-view>
         </movable-area>
 
@@ -88,7 +88,7 @@
             this.top = value;
             this.height_dec = value;
             // #ifdef H5 || APP
-            this.top = 20;
+			this.top = 250;
             this.height_dec = this.propIsBar ? 190 : 90;
             // #endif
 
@@ -105,7 +105,7 @@
                 is_first: 0,
                 system: system,
                 x: width - 43,
-                y: height - 120,
+				y: height - 280,
                 // 是否灰度
                 common_ent: this.propIsGrayscale ? 'grayscale' : '',
             });
@@ -252,34 +252,4 @@
         white-space: nowrap;
         max-width: 100%;
     }
-
-    /**
-     * 呼吸灯
-     */
-    .breathe {
-        background-color: rgb(89 181 255);
-        border-radius: 100%;
-        width: 50px;
-        height: 50px;
-        position: relative;
-    }
-
-    .breathe::before,
-    .breathe::after {
-        background-color: rgba(89, 181, 255, 0.3);
-    }
-
-    .breathe::before {
-        width: 50px;
-        height: 50px;
-        top: 0;
-        left: 0;
-    }
-
-    .breathe::after {
-        width: 55px;
-        height: 55px;
-        top: -2.5px;
-        left: -2.5px;
-    }
 </style>