首页AI图标拖拽

src/directive/dialog/drag.js

@@ -3,10 +3,14 @@
  * Copyright (c) 2019 ruoyi
  */
 
+// 当前设备
+const isDevice = localStorage.getItem('isDevice');
+
 export default {
   bind(el, binding, vnode, oldVnode) {
     const value = binding.value;
     if (value == false) return;
+    if (isDevice == 'PC') return;
     let initialTouchX = 0;
     let initialTouchY = 0;
     let initialLeft = 0;
@@ -49,6 +53,7 @@ export default {
         // 添加边界限制
         this.style.left = `${Math.max(0, Math.min(left, maxLeft))}px`;
         this.style.top = `${Math.max(0, Math.min(top, maxTop))}px`;
+        localStorage.setItem(this.className, JSON.stringify([this.style.left, this.style.top]));
       },
       false
     );

src/views/home/index.vue

@@ -26,7 +26,7 @@
         <bottomBtn :tabVal="tabVal" ref="bottomBtn"></bottomBtn>
       </div>
     </div>
-    <div class="floatingIcon" v-dialogDrag>
+    <div class="floatingIcon" :style="setSIcontyle" v-dialogDrag>
       <div class="AIIcon" @click="deepseek">
         <van-icon class="img" :name="require('@/assets/ai.png')" size="40" />
       </div>
@@ -62,6 +62,10 @@ export default {
       hintTabPageIndex: 0,
       isGZorJZ: null,
       isLoading: false,
+      setSIcontyle: {
+        bottom: '85px',
+        right: '14px',
+      },
     };
   },
   watch: {
@@ -88,6 +92,13 @@ export default {
   },
   created() {
     this.getDict();
+    let floatingIconStyle = JSON.parse(localStorage.getItem('floatingIcon'));
+    if (floatingIconStyle && floatingIconStyle.length) {
+      this.setSIcontyle = {
+        left: floatingIconStyle[0],
+        top: floatingIconStyle[1],
+      };
+    }
   },
   mounted() {},
   methods: {
@@ -230,8 +241,6 @@ export default {
   }
   .floatingIcon {
     position: absolute;
-    bottom: 85px;
-    right: 14px;
     width: 40px;
     z-index: 99999;
     height: min-content;