feat: 更新 BubbleList 组件样式

Author: worryzyy

packages/element-x-ui/src/components/BubbleList/main.vue

@@ -62,9 +62,10 @@
             @click="scrollToBottom"
         >
             <slot name="backToBottom">
-                <i class="el-icon-edit el-x-bubble-list-back-to-bottom-icon">
-                    <loadingBg v-if="btnLoading" class="back-to-bottom-loading-svg-bg" />
+                <i class="el-icon-bottom el-x-bubble-list-back-to-bottom-icon">
                 </i>
+                <loadingBg v-if="btnLoading" class="back-to-bottom-loading-svg-bg" />
+
             </slot>
         </div>
     </div>

packages/element-x-ui/src/styles/BubbleList.scss

@@ -1,3 +1,5 @@
+@import '../theme/var.scss';
+
 .el-x-bubble-list {
   display: flex;
   flex-direction: column;
@@ -104,6 +106,24 @@
           }
       }
   }
+  .back-to-bottom-loading-svg-bg {
+    position: absolute;
+    font-size: calc(var(--el-x-bubble-list-btn-size) + 26px);
+    animation: is-loading 1s infinite linear;
+    width: 40px;
+    height: 40px;
+    color: $--el-x-color-primary;
+}
+
+@keyframes is-loading {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+  
 }
 
 .el-x-bubble-list-back-to-bottom-solt {

packages/element-x-ui/src/theme/var.scss

@@ -1,4 +1,6 @@
 @import "~element-ui/packages/theme-chalk/src/common/var";
+
+$--el-x-color-primary: $--color-primary ;
 // 字体大小
   $--el-x-font-size-base: $--font-size-base;