no message

src/components/home.vue

@@ -3,7 +3,8 @@
     <jz-header :currentPage="'home'"></jz-header>
     <div class="home-page">
       <div class="top-banner container">
-        <div class="video-block">
+        <img src="https://mall.zhaijieshi.cc/file/jz-gw/home/home-banner.png"/>
+        <!-- <div class="video-block">
           <div class="top-title">家政用鲸致·生活有品质</div>
           <div class="sub-title">互联网自营家政服务品牌</div>
           <img
@@ -11,8 +12,8 @@
             class="play-btn"
             @click="playVideo"
           />
-          <!-- <div class="jzsh">鲸致生活</div> -->
-        </div>
+
+        </div> -->
       </div>
       <!-- 专业家政 -->
       <div class="wrapper">
@@ -477,12 +478,64 @@
       </div>
     </el-dialog>
     <jz-footer></jz-footer>
+
+    <!-- 浮窗   v-draggable-->
+    <div class="float-block" 
+>
+      <img  src="https://mall.zhaijieshi.cc/file/jz-gw/float-qw.png" class="float-qw"/>
+     <div>关注公众号</div>
+     <div>了解更多</div>
+      <img  src="https://mall.zhaijieshi.cc/file/jz-gw/float-gzh.png" class="float-gzh"/>
+ <div>添加企业微信</div>
+     <div>咨询更多</div>
+    </div>
+
   </div>
 </template>
 <script>
 import jzHeader from "@/components/common/Header";
 import jzFooter from "@/components/common/Footer";
 export default {
+   directives: {
+    draggable: {
+      bind(el) {
+        let dragging = false;
+        let startX, startY, offsetX, offsetY, left, top;
+ 
+        el.onmousedown = (e) => {
+          dragging = true;
+          startX = e.clientX;
+          startY = e.clientY;
+          offsetX = el.offsetLeft;
+          offsetY = el.offsetTop;
+          console.log( startX ,offsetX )
+          console.log( startY  ,offsetY )
+ 
+          el.style.position = 'fixed';
+          el.setCapture && el.setCapture();
+          el.onmousemove = mouseMove;
+          el.onmouseup = mouseUp;
+        };
+ 
+        const mouseMove = (e) => {
+          if (dragging) {
+            left = e.clientX - startX + offsetX;
+            top = e.clientY - startY + offsetY;
+ 
+            el.style.left = left + 'px';
+            el.style.top = top + 'px';
+          }
+        };
+ 
+        const mouseUp = () => {
+          dragging = false;
+          el.onmousemove = null;
+          el.onmouseup = null;
+          el.releaseCapture && el.releaseCapture();
+        };
+      }
+    }
+  },
   data() {
     return {
       honerPer: 40,
@@ -526,7 +579,7 @@ export default {
           name: "极致日式服务",
           detail:
             "包含全屋收纳、衣柜收纳、橱柜收纳等，家越住越大，享受整齐有序的生活环境，为生活营造秩序之美。",
-          url: "https://mall.zhaijieshi.cc/file/jz-gw/category-04.png"
+          url: "https://mall.zhaijieshi.cc/file/jz-gw/catrgory-04-new.png"
         },
         {
           id: 5,
@@ -636,14 +689,49 @@ export default {
         "https://mall.zhaijieshi.cc/file/jz-gw/honor/11.png",
         "https://mall.zhaijieshi.cc/file/jz-gw/honor/12.png",
         "https://mall.zhaijieshi.cc/file/jz-gw/honor/13.png"
-      ]
+      ],
+        dragging: false,
+      offsetTop: 0,
+      offsetLeft: 0,
+      styleObject: {
+        position: 'absolute',
+        bottom: '30',
+        right: '20'
+      }
     };
   },
   components: {
     jzHeader,
     jzFooter
   },
+  mounted(){
+    document.addEventListener('dragover', this.moveElement);
+  },
+   beforeDestroy() {
+    document.removeEventListener('dragover', this.moveElement);
+  },
   methods: {
+      dragStart(event) {
+      this.dragging = true;
+      const style = window.getComputedStyle(event.target, null);
+      console.log(document.documentElement);
+      this.offsetTop =document.documentElement.clientHeight-(Number(style.getPropertyValue('bottom').replace('px', '')) || 0);
+      this.offsetLeft = document.documentElement.clientWidth-(Number(style.getPropertyValue('right').replace('px', '')) || 0);
+      event.dataTransfer.setData('text/plain', null); // 设置drag event的data type
+      console.log(this.offsetTop,this.offsetLeft);
+    },
+    dragEnd(event) {
+      this.dragging = false;
+    },
+    moveElement(event) {
+      if (this.dragging) {
+        console.log('开始移动');
+        console.log(event.clientY,this.offsetTop);
+        console.log(event.clientX,this.offsetTop);
+        this.styleObject.bottom = `${event.clientY - this.offsetTop}px`;
+        this.styleObject.right = `${event.clientX - this.offsetLeft}px`;
+      }
+    },
     categoryHover(item) {
       this.activeCategory = item.id;
     },
@@ -733,9 +821,13 @@ export default {
 .home-page {
 }
 .top-banner {
-  background: url("https://mall.zhaijieshi.cc/file/jz-gw/jz-office.png")
+  /* height: 550px;
+  background: url("https://mall.zhaijieshi.cc/file/jz-gw/home/home-banner.png")
     no-repeat center;
-  background-size: 100% 100%;
+  background-size: 100% 100%; */
+}
+.top-banner img{
+  width:980px;
 }
 .video-block {
   background: url("https://mall.zhaijieshi.cc/file/jz-gw/jb-full.png") no-repeat
@@ -893,6 +985,7 @@ export default {
   -webkit-line-clamp: 2;
   text-overflow: ellipsis;
   overflow: hidden;
+  min-height: 32px;
 }
 .category-item:hover {
   cursor: pointer;
@@ -1009,7 +1102,7 @@ export default {
   margin: 28px 0 14px;
 }
 .tool-item {
-  width: 268px;
+  width: 286px;
   font-size: 0;
 }
 .tool-item img {
@@ -1079,8 +1172,8 @@ export default {
   border-right: 1px solid #1ebdf5;
 }
 .guide-item:hover {
-  background: linear-gradient(90deg, #64d7ff 0%, #1ebdf5 100%);
-  color: #fff;
+  /* background: linear-gradient(90deg, #64d7ff 0%, #1ebdf5 100%);
+  color: #fff; */
 }
 .guide-item.active-guide {
   background: linear-gradient(90deg, #64d7ff 0%, #1ebdf5 100%);
@@ -1099,7 +1192,7 @@ export default {
   font-size: 0;
 }
 .staff-item:hover {
-  box-shadow: 0 0 12px 2px #bee3f0;
+  /* box-shadow: 0 0 12px 2px #bee3f0; */
 }
 .staff-item.active-staff {
   box-shadow: 0 0 12px 2px #bee3f0;
@@ -1261,4 +1354,39 @@ export default {
   width: 60px;
   margin: 40px auto 44px;
 }
+.float-block{
+  position:fixed;
+  right:20px;
+  bottom:40px;
+  width:127px;
+  height:289px;
+  background: url("https://mall.zhaijieshi.cc/file/jz-gw/float-bg.png") no-repeat
+    center;
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding:26px  0;
+  z-index:9999;
+   /* cursor: move; */
+  user-select: none;
+}
+.float-block img{
+  width:72px;
+  height:72px;
+
+}
+.float-block div{
+  font-size: 12px;
+  height:14px;
+  line-height: 14px;
+  color: #fff;
+}
+.float-qw{
+  margin:0 0 9px;
+}
+.float-gzh{
+  margin:15px 0 9px;
+}
 </style>

src/components/service.vue

@@ -65,7 +65,7 @@ export default {
             {
               name: "无家具粗开荒保洁",
               url:
-                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-02.png",
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-02-new.png",
               content:
                 "干净无损；<br/> 舒心入住；<br/>  把装修后的房子；<br/> 变成想象中的家；<br/> ",
               slogan: "让家舒适洁净，治愈疲惫生活。"
@@ -73,7 +73,7 @@ export default {
             {
               name: "全屋深度焕新大扫除",
               url:
-                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-03.png",
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-03-new.png",
               content:
                 "9项专业保洁；<br/>9大角落清洁；<br/> 每一次大扫除之后<br/>  都是崭新的生活；<br/> ",
               slogan: "让家舒适洁净，治愈疲惫生活。"
@@ -123,7 +123,7 @@ export default {
             {
               name: "浴室深度清洗",
               url:
-                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-08.png",
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-08-new.png",
               content:
                 "专业设备清洗；<br/> 无死角清洁；<br/> 除菌去垢；<br/> 早晚洗漱更健康；<br/> ",
               slogan: "让家舒适洁净，治愈疲惫生活。"
@@ -131,7 +131,7 @@ export default {
             {
               name: "厨房深度清洗",
               url:
-                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-09.png",
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-09-new.png",
               content:
                 "专业进口工具组；<br/> 专业设备消灭油垢细菌；<br/> 强效清除缝隙凹槽污垢；<br/> 还原厨房干净本色；<br/> ",
               slogan: "让家舒适洁净，治愈疲惫生活。"
@@ -147,7 +147,7 @@ export default {
             {
               name: "除尘除螨",
               url:
-                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-11.png",
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-11-new.png",
               content:
                 "专业除螨设备；<br/>深度除尘螨；<br/> 呵护家人健康；<br/>守护安心好睡眠；<br/> ",
               slogan: "让家舒适洁净，治愈疲惫生活。"
@@ -160,7 +160,7 @@ export default {
             {
               name: "日式搬家",
               url:
-                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-13.png",
+                "https://mall.zhaijieshi.cc/file/jz-gw/service/detail-13-new.png",
               content:
                 "提前上门规划；<br/> 打包搬运复位；<br/> 全程不动手；<br/>  让搬家成为美好回忆；<br/> ",
               slogan: "让家舒适洁净，治愈疲惫生活。"
@@ -273,7 +273,7 @@ export default {
       index = id;
       activeNav = id;
     }
-    this.activeNav = id;
+    this.activeNav = index;
     this.subList = this.list[index].children;
     this.activeSer = {
       title: this.list[index].title,
@@ -392,14 +392,14 @@ export default {
   opacity: 0.94;
 }
 .detail-btn {
-  background: url("https://mall.zhaijieshi.cc/file/jz-gw/service/detail-btn.png")
+  background: url("https://mall.zhaijieshi.cc/file/jz-gw/service/service-slogan.png")
     no-repeat center;
   background-size: 100%;
-  width: 82px;
-  height: 30px;
+  width: 178px;
+  height: 25px;
   position: absolute;
-  bottom: 38px;
-  right: 30px;
+  bottom: 40px;
+  right: 20px;
   cursor: pointer;
 }
 </style>