更改

yifengdian-company-report/src/views/home.vue

@@ -1,4 +1,5 @@
 <template>
+
   <div class="home">
     <div class="header">
       <div class="tel_box flex flex-center2 flex-end">
@@ -23,8 +24,8 @@
           <section style="overflow: hidden;">
             <vue-seamless-scroll :class-option="optionHover" :data="vegetableList">
               <div class="scroll-content">
-                                <div class="flex flex-end item" v-for="(item, index) in vegetableList"
-                                    :key="'vegetable' + index" style="padding: 0 26px;">
+                <div class="flex flex-end item" v-for="(item, index) in vegetableList" :key="'vegetable' + index"
+                  style="padding: 0 26px;">
                   <!-- <img :src="item.imageList[0]" v-if="item.imageList.length >0"/>
                                 <img src="../../assets/images/dyfc.png" v-else alt=""> -->
                   <div class="flex1 van-ellipsis text-anign-left">{{ item.vegetableCategory }} </div>
@@ -53,15 +54,15 @@
           <section style="overflow: hidden;">
             <vue-seamless-scroll :class-option="optionHover" :data="priceList">
               <div class="scroll-content">
-                                <div class="flex flex-mean  item" v-for="(item, index) in priceList"
-                                    :key="'price' + index">
+                <div class="flex flex-mean  item" v-for="(item, index) in priceList" :key="'price' + index">
                   <div class="flex1 van-ellipsis">{{ item.Name }} </div>
                   <div class="flex1 van-ellipsis">{{ item.price }} </div>
                   <div class="vegetable-item-row2 flex1 van-ellipsis">{{ item.jzrPrice }}
-                                        <img    v-if="item.jzrPrice > 0 && item.jzrPrice != '暂无'"
-                                            src="@/assets/up.png" alt="" style="width: 11px;height: 15px;">
-                                         <img    v-if="item.jzrPrice < 0 && item.jzrPrice != '暂无'"
-                                            src="@/assets/down.png" alt="" style="width: 11px;height: 15px;"></div>
+                    <img v-if="item.jzrPrice > 0 && item.jzrPrice != '暂无'" src="@/assets/up.png" alt=""
+                      style="width: 11px;height: 15px;">
+                    <img v-if="item.jzrPrice < 0 && item.jzrPrice != '暂无'" src="@/assets/down.png" alt=""
+                      style="width: 11px;height: 15px;">
+                  </div>
 
                 </div>
               </div>
@@ -82,14 +83,20 @@
           </div>
           <div class="flex flex-end m-top12">
             <div class="flex font-size14 flex-center2">
-                            <img src="@/assets/images/home/unit.png" class="img-13" alt=""><span
-                                class="blue">青岛市人民政府</span>
+              <img src="@/assets/images/home/unit.png" class="img-13" alt=""><span class="blue">青岛市人民政府</span>
             </div>
             <span class="gray">2024-03-05</span>
           </div>
         </div>
       </div>
     </section>
+    <div class="container1">
+      <div class="movable-area" @touchstart="onMovableStart" @touchmove="onMovableMove" @touchend="onMovableEnd">
+        <div class="movable-view" :style="{ left: x + 'px', top: y + 'px' }">
+          <img src="@/assets/images/home/shangbao.gif" class="draggable" alt="draggable image">
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -132,13 +139,37 @@ export default {
 
       ],
       dayList: [],
-            tDayList: []
+      tDayList: [],
+      dragging: false,
+        startX: 0,
+        startY: 0,
+        x: 279,
+        y: 625
     };
   },
   created() {
     this.getDayScData()
   },
   methods: {
+    onMovableStart(event) {
+      console.log("123");
+      this.dragging = true;
+      this.startX = event.touches[0].clientX - this.x;
+      this.startY = event.touches[0].clientY - this.y;
+    },
+    onMovableMove(event) {
+      console.log("123");
+       event.preventDefault(); // 阻止默认滚动行为
+      if (this.dragging) {
+        this.x = event.touches[0].clientX - this.startX;
+        this.y = event.touches[0].clientY - this.startY;
+      }
+      console.log(this.x, this.y);
+    },
+    onMovableEnd() {
+      this.dragging = false;
+    },
+
     handelClickEmap() {
       this.$EventBus.$emit('switcMapType', 'Emap')
     },
@@ -332,4 +363,29 @@ export default {
     }
   }
 }
+.container1 {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.movable-area {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.movable-view {
+  width: 80px;
+  height: 80px;
+  position: absolute;
+  cursor: move;
+}
+
+.draggable {
+  width: 100%;
+  height: 100%;
+}
 </style>