update1

components/sidebar.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="client-sidebar mta-hidden-xs">
     <ul>
-<!--      <li><a class="sidebar-default-box" :href="linkForKefu" target="_blank"><i></i>-->
-<!--        <p>在线资讯</p></a></li>-->
+      <!--      <li><a class="sidebar-default-box" :href="linkForKefu" target="_blank"><i></i>-->
+      <!--        <p>在线资讯</p></a></li>-->
       <li>
         <div class="sidebar-default-box"><i></i>
           <p>电话资讯</p></div>
@@ -17,8 +17,12 @@
           <img :src="img1">
         </div>
       </li>
-      <li v-if="btnFlag"><i @click="backTop"></i>
-        <p>置顶</p></li>
+      <li v-if="btnFlag">
+        <div class="sidebar-default-box">
+          <i @click="backTop"></i>
+          <p>置顶</p></div>
+      </li>
+
     </ul>
   </div>
 </template>
@@ -76,27 +80,29 @@ export default {
   //display: none;
   position: fixed;
   z-index: 100;
-  top: 80px;
-  right: 0;
+  top: 100px;
+  right: 20px;
 
   li {
-    width: 94px;
-    height: 102px;
+    width: 84px;
+    height: 68px;
     position: relative;
     cursor: pointer;
+    margin-bottom: 14px;
+
 
     i {
-      width: 45px;
-      height: 40px;
+      width: 30px;
+      height: 30px;
       display: block;
-      margin: 16px auto;
+      margin: 4px auto;
       background-position: center;
       background-size: contain;
       background-repeat: no-repeat
     }
 
     p {
-      font-size: 18px;
+      font-size: 14px;
       color: #00b96b;
       text-align: center;
     }
@@ -108,6 +114,7 @@ export default {
       z-index: 2;
       background: #fff;
       position: absolute;
+      border-radius: 8px;
       top: 0;
       left: 0;
       right: 0;
@@ -122,7 +129,7 @@ export default {
       border: 1px solid #eee;
       transition: all 0.5s;
       position: absolute;
-      right: -150px;
+      right: -240px;
       background: #fff;
       top: 0;
       box-sizing: border-box;
@@ -164,11 +171,30 @@ export default {
   li:nth-child(1) i {
     background-image: url("~static/gangweiIcon/z143.png");
   }
+  li:nth-child(1) {
+    .sidebar-hover-box {
+      width: 180px;
+    }
+  }
+
 
   li:nth-child(2) i {
     background-image: url("~static/gangweiIcon/z145.png");
   }
 
+  li:nth-child(2) {
+    .sidebar-hover-box {
+      width: 220px;
+      height: 220px;
+
+
+      img {
+        height: 170px;
+        height: 170px;
+      }
+    }
+  }
+
   li:nth-child(3) i {
     background-image: url("~static/gangweiIcon/z144.png");
   }