修改bug

assets/css/public/kefu.less

@@ -1,161 +1,193 @@
 //添加在线客服
 .kefu {
-  bottom: 100px;
-  height: 430px;
-  position: fixed;
-  right: 10px;
-  width: 100px;
-  .kefu_itemKf {
-      background-color: #fff;
-      border-radius: 10px;
-      box-shadow: 0 4px 16px #0000001a;
-      height: 100px;
-      margin-bottom: 15px;
-      text-align: center;
-      width: 100px;
-      box-sizing: border-box;
-      position: relative;
-      cursor: pointer;
-      margin-bottom: 100px;
-      a {
-          >p {
-              color: #666;
-              font-size: 14px;
-              font-weight: 500;
-              line-height: 16px;
-          }
-          >img {
-              margin-top: 15px;
-              width: 50px;
-              height:50px;
-              margin-bottom: 5px;
-          }
-      }
-  }
-  .kefu_itemQQ {
-      background-color: #fff;
-      border-radius: 10px;
-      box-shadow: 0 4px 16px #0000001a;
-      height: 100px;
-      margin-bottom: 15px;
-      text-align: center;
-      width: 100px;
-      box-sizing: border-box;
-      position: relative;
-      cursor: pointer;
-      >p {
-          color: #666;
-          font-size: 14px;
-          font-weight: 500;
-          line-height: 16px;
-      }
-      >img {
-          margin-top: 10px;
-          width: 60px;
-          height: 60px;
-      }
-      &:hover {
-          .kefu_item_content_QQ {
-              display: block;
-          }
-      }
-  }
-  .kefu_itemPhone {
-      background-color: #fff;
-      border-radius: 10px;
-      box-shadow: 0 4px 16px #0000001a;
-      height: 100px;
-      margin-bottom: 15px;
-      text-align: center;
-      width: 100px;
-      box-sizing: border-box;
-      position: relative;
-      cursor: pointer;
-      >p {
-          color: #666;
-          font-size: 14px;
-          font-weight: 500;
-          line-height: 16px;
-      }
-      >img {
-          margin-top: 10px;
-          width: 60px;
-          height: 60px;
-      }
-      &:hover {
-          .kefu_item_content_phone {
-              display: block;
-          }
-      }
-  }
-  .kefu_item_content_QQ {
-      position: absolute;
-      top: -100px;
-      right: 100px;
-      background: #fff;
-      border-radius: 10px;
-      display: none;
-      width: 190px;
-      height: 330px;
-      background: #fff;
-      box-shadow: 0 4px 16px #0000001a;
-      z-index: 99;
-      box-sizing: border-box;
-      padding: 20px;
-      img {
-          margin-bottom: 10px;
-      }
-      .qqfs {
-          margin-bottom: 20px;
-          font-size: 14px;
-          color: #333;
-      }
-      .arrow {
-          width: 0;
-          height: 0;
-          width: 0;
-          border-top: 20px solid transparent;
-          border-bottom: 20px solid transparent; 
-          border-left: 20px solid #fff; 
-          position: absolute;
-          top: 120px;
-          right: -20px;
-          transform: translateX(-50%);
-          z-index: 100;
-      }
-  }
-  .kefu_item_content_phone {
-      position: absolute;
-      top: 0;
-      right: 100px;
-      background: #fff;
-      border-radius: 10px;
-      display: none;
-      width: 190px;
-      height: 80px;
-      background: #fff;
-      box-shadow: 0 4px 16px #0000001a;
-      z-index: 99;
-      box-sizing: border-box;
-      padding: 20px;
-      text-align: left;
-      color: #333;
-      .kefu_item_content_phone_title {
-          margin-bottom: 5px;
-          font-weight: bold;
-      }
-      .arrow {
-          width: 0;
-          height: 0;
-          width: 0;
-          border-top: 20px solid transparent;
-          border-bottom: 20px solid transparent; 
-          border-left: 20px solid #fff; 
-          position: absolute;
-          top: 20px;
-          right: -20px;
-          transform: translateX(-50%);
-          z-index: 100;
-      }
-  }
+    bottom: 100px;
+    height: 430px;
+    position: fixed;
+    right: 10px;
+    width: 100px;
+
+    .kefu_itemKf {
+        background-color: #fff;
+        border-radius: 10px;
+        box-shadow: 0 4px 16px #0000001a;
+        height: 100px;
+        margin-bottom: 15px;
+        text-align: center;
+        width: 100px;
+        box-sizing: border-box;
+        position: relative;
+        cursor: pointer;
+        margin-bottom: 100px;
+
+        a {
+            >p {
+                color: #666;
+                font-size: 14px;
+                font-weight: 500;
+                line-height: 16px;
+            }
+
+            >img {
+                margin-top: 15px;
+                width: 50px;
+                height: 50px;
+                margin-bottom: 5px;
+            }
+        }
+    }
+
+    .kefu_itemQQ {
+        background-color: #fff;
+        border-radius: 10px;
+        box-shadow: 0 4px 16px #0000001a;
+        height: 100px;
+        margin-bottom: 15px;
+        text-align: center;
+        width: 100px;
+        box-sizing: border-box;
+        position: relative;
+        cursor: pointer;
+
+        >p {
+            color: #666;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 16px;
+        }
+
+        >img {
+            margin-top: 10px;
+            width: 60px;
+            height: 60px;
+        }
+
+        &:hover {
+            .kefu_item_content_QQ {
+                display: block;
+            }
+        }
+    }
+
+    .kefu_itemPhone {
+        background-color: #fff;
+        border-radius: 10px;
+        box-shadow: 0 4px 16px #0000001a;
+        height: 100px;
+        margin-bottom: 15px;
+        text-align: center;
+        width: 100px;
+        box-sizing: border-box;
+        position: relative;
+        cursor: pointer;
+
+        >p {
+            color: #666;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 16px;
+        }
+
+        >img {
+            margin-top: 10px;
+            width: 60px;
+            height: 60px;
+        }
+
+        &:hover {
+            .kefu_item_content_phone {
+                display: block;
+
+
+            }
+        }
+    }
+
+    .kefu_item_content_QQ {
+        position: absolute;
+        top: -100px;
+        right: 100px;
+        background: #fff;
+        border-radius: 10px;
+        display: none;
+        width: 190px;
+        height: 330px;
+        background: #fff;
+        box-shadow: 0 4px 16px #0000001a;
+        z-index: 99;
+        box-sizing: border-box;
+        padding: 20px;
+
+        img {
+            margin-bottom: 10px;
+        }
+
+
+
+        .arrow {
+            width: 0;
+            height: 0;
+            width: 0;
+            border-top: 20px solid transparent;
+            border-bottom: 20px solid transparent;
+            border-left: 20px solid #fff;
+            position: absolute;
+            top: 120px;
+            right: -20px;
+            transform: translateX(-50%);
+            z-index: 100;
+        }
+
+        .qqadd {
+            height: 150px;
+            position: relative;
+
+            img {
+                width: 100px;
+                height: 100px;
+            }
+
+            .qqfs {
+                margin-bottom: 20px;
+                font-size: 14px;
+                color: #333;
+            }
+        }
+    }
+
+    .kefu_item_content_phone {
+        position: absolute;
+        top: 0;
+        right: 100px;
+        background: #fff;
+        border-radius: 10px;
+        display: none;
+        width: 190px;
+        height: 80px;
+        background: #fff;
+        box-shadow: 0 4px 16px #0000001a;
+        z-index: 99;
+        box-sizing: border-box;
+        padding: 20px;
+        text-align: left;
+        color: #333;
+
+        .kefu_item_content_phone_title {
+            margin-bottom: 5px;
+            font-weight: bold;
+        }
+
+        .arrow {
+            width: 0;
+            height: 0;
+            width: 0;
+            border-top: 20px solid transparent;
+            border-bottom: 20px solid transparent;
+            border-left: 20px solid #fff;
+            position: absolute;
+            top: 20px;
+            right: -20px;
+            transform: translateX(-50%);
+            z-index: 100;
+        }
+    }
 }