右侧边栏按钮组件

components/sidebar.vue

@@ -1,8 +1,15 @@
 <template>
   <div class="client-sidebar">
       <ul>
-          <li><a><i></i></a></li>
-          <li><i @click="backTop"></i></li>
+          <li><a class="sidebar-default-box"><i></i><p>咨询</p></a></li>
+          <li>
+            <div class="sidebar-default-box"><i @click="backTop"></i><p>客服</p></div>
+            <div class="sidebar-hover-box">
+              <span>服务热线</span><h4>4000522130</h4>
+            </div>
+          </li>
+          <li><a class="sidebar-default-box"><i></i><p>体验</p></a></li>
+          <li style="display: none"><i @click="backTop"></i><p>置顶</p></li>
       </ul>
   </div>
 </template>
@@ -53,10 +60,27 @@
   display: none;
     position: fixed;
     z-index: 100;
-    top: 220px;
+    top: 300px;
     right: 0;
-    i{width: 50px;height: 50px;display: block;}
-    li:nth-child(1) i{background: pink;}
-    li:nth-child(2) i{background: green;}
+    li{
+      width: 94px;height: 102px;position: relative;
+      i{width: 45px;height: 40px;display: block;background: #8be0ad;margin: 16px auto;}
+      p{font-size:18px;color: #4c4c4c;text-align: center;}
+      .sidebar-default-box{border: 1px solid #eee;box-sizing: border-box;background: #fff;z-index: 2;background: #fff;position: absolute;top:0;left: 0;right: 0;bottom: 0;}
+      .sidebar-hover-box{
+        width: 220px;height: 102px;display: block;padding: 24px;border: 1px solid #eee;transition: all 0.5s;
+        position: absolute;right: -150px;background: #fff;top: 0;box-sizing: border-box;z-index: 1;
+        span{font-size:16px;display: block;color: #1f1f1f;margin-bottom: 10px}
+        h4{font-size:30px;color: #3e7ee7;font-weight: bold;}
+      }
+    }
+    li:hover{
+      .sidebar-default-box{background: #5da8f7;}
+      .sidebar-hover-box{
+        right: 92px;
+      }
+    }
+    li:nth-child(1) i{-background: pink;}
+    li:nth-child(2) i{-background: green;}
 }
 </style>