切换分支发布测试

components/FloatingButton/FloatingButton.vue

+<template>
+  <!-- 悬浮按钮 -->
+  <view
+    class="floating-button"
+    :style="{ left: buttonLeft + 'px', top: buttonTop + 'px' }"
+    @touchstart="handleTouchStart"
+    @touchmove="handleTouchMove"
+    @touchend="handleTouchEnd"
+    @click="handleClick"
+  >
+    <!-- 默认内容 -->
+    <slot>
+     <view class="consultBtn">
+     	<text class="iconfont icon-kefu"></text>
+		<text>咨询客服</text>
+     </view>
+    </slot>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'FloatingButton',
+  data() {
+    return {
+      buttonLeft: 310, // 初始位置
+      buttonTop: 200, // 初始位置
+      startX: 0,
+      startY: 0,
+      isDragging: false
+    }
+  },
+  methods: {
+    // 触摸开始事件
+    handleTouchStart(event) {
+      const touch = event.touches[0];
+      this.startX = touch.clientX - this.buttonLeft;
+      this.startY = touch.clientY - this.buttonTop;
+      this.isDragging = false;
+    },
+    // 触摸移动事件
+    handleTouchMove(event) {
+      event.preventDefault(); // 阻止默认滚动行为
+      const touch = event.touches[0];
+      this.buttonLeft = touch.clientX - this.startX;
+      this.buttonTop = touch.clientY - this.startY;
+      this.isDragging = true;
+
+      // 限制按钮不超出屏幕
+      const windowWidth = uni.getSystemInfoSync().windowWidth;
+      const windowHeight = uni.getSystemInfoSync().windowHeight;
+      const buttonSize = 80; // 按钮大小
+
+      if (this.buttonLeft < 0) this.buttonLeft = 0;
+      if (this.buttonLeft > windowWidth - buttonSize) this.buttonLeft = windowWidth - buttonSize;
+      if (this.buttonTop < 0) this.buttonTop = 0;
+      if (this.buttonTop > windowHeight - buttonSize) this.buttonTop = windowHeight - buttonSize;
+    },
+    // 触摸结束事件
+    handleTouchEnd() {
+      if (!this.isDragging) {
+        this.handleClick();
+      }
+    },
+    // 点击事件
+    handleClick() {
+      this.$emit('floatingButton');
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.floating-button {
+  position: fixed;
+  width: 140rpx;
+  height: 140rpx;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  cursor: pointer;
+  user-select: none;
+  z-index: 9999;
+  background-color: #007AFF; /* 默认背景色 */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
+  .consultBtn{
+	   color: #20279B;
+	   font-size: 28rpx;
+	  // .icon-kefu{
+	  // 	  width: 60rpx;
+	  // 	  height: 60rpx;
+	  // 	  color: #20279B;
+	  // }
+	  
+  }
+  
+  
+}
+
+</style>
\ No newline at end of file

main.js

+// import App from './App';
+
+// // #ifndef VUE3
+// import Vue from 'vue'
+// App.mpType = 'app'
+// const app = new Vue({
+//     ...App
+// })
+// app.$mount()
+// // #endif
+
+// // #ifdef VUE3
+// import { createSSRApp } from 'vue'
+// export function createApp() {
+//   const app = createSSRApp(App)
+//   return {
+//     app
+//   }
+// }
+// // #endif
+
+// //#ifdef H5
+// window.sessionStorage.setItem('firstEntryUrl',window.location.href.split('#')[0])
+// // #endif
+
+
 import App from './App';
 import App from './App';
+import FloatingButton from '@/components/FloatingButton/FloatingButton.vue';
 
 
 // #ifndef VUE3
 // #ifndef VUE3
 import Vue from 'vue'
 import Vue from 'vue'
 App.mpType = 'app'
 App.mpType = 'app'
+
+// 全局注册悬浮按钮组件
+Vue.component('FloatingButton', FloatingButton);
+
 const app = new Vue({
 const app = new Vue({
     ...App
     ...App
 })
 })

pages/index/index.vue

 <template>
 <template>
 	<view class="container">
 	<view class="container">
+		<!-- 使用默认图标的悬浮按钮 -->
+		    <FloatingButton ></FloatingButton>
 		<view class="homeHeader">
 		<view class="homeHeader">
 			<view class="top">
 			<view class="top">
 				<view class="one">
 				<view class="one">

static/font1/demo_index.html

@@ -55,6 +55,12 @@
           <ul class="icon_lists dib-box">
           <ul class="icon_lists dib-box">
           
           
             <li class="dib">
             <li class="dib">
+              <span class="icon iconfont">&#xe604;</span>
+                <div class="name">客服</div>
+                <div class="code-name">&amp;#xe604;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xecc0;</span>
               <span class="icon iconfont">&#xecc0;</span>
                 <div class="name">双右箭头</div>
                 <div class="name">双右箭头</div>
                 <div class="code-name">&amp;#xecc0;</div>
                 <div class="code-name">&amp;#xecc0;</div>
@@ -264,9 +270,9 @@
 <pre><code class="language-css"
 <pre><code class="language-css"
 >@font-face {
 >@font-face {
   font-family: 'iconfont';
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1750144165277') format('woff2'),
-       url('iconfont.woff?t=1750144165277') format('woff'),
-       url('iconfont.ttf?t=1750144165277') format('truetype');
+  src: url('iconfont.woff2?t=1750644432497') format('woff2'),
+       url('iconfont.woff?t=1750644432497') format('woff'),
+       url('iconfont.ttf?t=1750644432497') format('truetype');
 }
 }
 </code></pre>
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -293,6 +299,15 @@
         <ul class="icon_lists dib-box">
         <ul class="icon_lists dib-box">
           
           
           <li class="dib">
           <li class="dib">
+            <span class="icon iconfont icon-kefu"></span>
+            <div class="name">
+              客服
+            </div>
+            <div class="code-name">.icon-kefu
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-shuangyoujiantou"></span>
             <span class="icon iconfont icon-shuangyoujiantou"></span>
             <div class="name">
             <div class="name">
               双右箭头
               双右箭头
@@ -609,6 +624,14 @@
           
           
             <li class="dib">
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-kefu"></use>
+                </svg>
+                <div class="name">客服</div>
+                <div class="code-name">#icon-kefu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-shuangyoujiantou"></use>
                   <use xlink:href="#icon-shuangyoujiantou"></use>
                 </svg>
                 </svg>
                 <div class="name">双右箭头</div>
                 <div class="name">双右箭头</div>

static/font1/iconfont.css

 @font-face {
 @font-face {
   font-family: "iconfont"; /* Project id 4933433 */
   font-family: "iconfont"; /* Project id 4933433 */
-  src: url('iconfont.woff2?t=1750144165277') format('woff2'),
-       url('iconfont.woff?t=1750144165277') format('woff'),
-       url('iconfont.ttf?t=1750144165277') format('truetype');
+  src: url('iconfont.woff2?t=1750644432497') format('woff2'),
+       url('iconfont.woff?t=1750644432497') format('woff'),
+       url('iconfont.ttf?t=1750644432497') format('truetype');
 }
 }
 
 
 .iconfont {
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
   -moz-osx-font-smoothing: grayscale;
 }
 }
 
 
+.icon-kefu:before {
+  content: "\e604";
+}
+
 .icon-shuangyoujiantou:before {
 .icon-shuangyoujiantou:before {
   content: "\ecc0";
   content: "\ecc0";
 }
 }

static/font1/iconfont.json

@@ -6,6 +6,13 @@
   "description": "",
   "description": "",
   "glyphs": [
   "glyphs": [
     {
     {
+      "icon_id": "518189",
+      "name": "客服",
+      "font_class": "kefu",
+      "unicode": "e604",
+      "unicode_decimal": 58884
+    },
+    {
       "icon_id": "6999657",
       "icon_id": "6999657",
       "name": "双右箭头",
       "name": "双右箭头",
       "font_class": "shuangyoujiantou",
       "font_class": "shuangyoujiantou",