css

css/style.min.css

@@ -238,4 +238,11 @@ body { overflow-x: hidden; }
 .layui-carousel-ind ul li { width: 8px !important; height: 8px !important; }
 .layui-carousel-ind ul li.layui-this { width: 38px !important; height: 6px !important; border-radius: 15px !important; }
 
+.fixeds { position: fixed; bottom: 100px; right: 296px; z-index: 2; }
+.fixeds .qq { background-position: -15px -174px; width: 69px; height: 69px; display: block; margin-bottom: 17px; }
+.fixeds .tel { background-position: -15px -260px; width: 69px; height: 69px; display: block; }
+.fixeds .tel .uc { position: absolute; left: -159px; top: 58px; width: 159px; height: 61px; background: url("../images/sd.png") no-repeat center; display: none; }
+.fixeds .tel:hover { background-position: -106px -174px; }
+.fixeds .tel:hover .uc { display: block; }
+
 /*# sourceMappingURL=style.min.css.map */

css/style.scss

@@ -433,7 +433,7 @@
   background-color: #07275a;
   padding: 28px 0 45px 0;
   .page-width {
-    .layui-carousel{
+    .layui-carousel {
       background: #07275a !important;
       padding-top: 75px;
     }
@@ -464,18 +464,18 @@
         }
       }
     }
-    .slide-show{
+    .slide-show {
       white-space: nowrap;
       text-align: center;
-      li{
+      li {
         margin-right: 30px;
-        &:last-child{
+        &:last-child {
           margin-right: 0;
         }
-        i{
+        i {
           transition: all 0.4s ease;
         }
-        .ico-1{
+        .ico-1 {
           width: 88px;
           height: 88px;
           background: url("../images/a.png") no-repeat center;
@@ -483,7 +483,7 @@
           display: block;
           margin: 0 auto;
         }
-        .ico-11{
+        .ico-11 {
           width: 138px;
           height: 138px;
           background: url("../images/aa.png") no-repeat center;
@@ -491,7 +491,7 @@
           display: block;
           margin: 0 auto;
         }
-        .ico-2{
+        .ico-2 {
           width: 88px;
           height: 88px;
           background: url("../images/c.png") no-repeat center;
@@ -499,7 +499,7 @@
           display: block;
           margin: 0 auto;
         }
-        .ico-22{
+        .ico-22 {
           width: 138px;
           height: 138px;
           background: url("../images/cc.png") no-repeat center;
@@ -507,7 +507,7 @@
           display: block;
           margin: 0 auto;
         }
-        .ico-3{
+        .ico-3 {
           width: 88px;
           height: 88px;
           background: url("../images/b.png") no-repeat center;
@@ -515,7 +515,7 @@
           display: block;
           margin: 0 auto;
         }
-        .ico-33{
+        .ico-33 {
           width: 138px;
           height: 138px;
           background: url("../images/bb.png") no-repeat center;
@@ -648,21 +648,21 @@
               width: 440px;
               height: 276px;
             }
-            .pic{
+            .pic {
               position: absolute;
               bottom: 0;
               width: 350px;
               height: 53px;
               background: url("../images/01-1.png") no-repeat center;
               background-size: cover;
-              .t1{
+              .t1 {
                 font-size: 26px;
                 color: #ffffff;
                 position: absolute;
                 left: 21px;
                 top: 5px;
               }
-              .t2{
+              .t2 {
                 position: absolute;
                 right: 23px;
                 top: 10px;
@@ -670,7 +670,7 @@
                 color: #f1f0f0;
               }
             }
-            .pic1{
+            .pic1 {
               position: absolute;
               bottom: 0;
               left: -42px;
@@ -678,14 +678,14 @@
               height: 53px;
               background: url("../images/02-1.png") no-repeat center;
               background-size: cover;
-              .t1{
+              .t1 {
                 font-size: 26px;
                 color: #ffffff;
                 position: absolute;
                 left: 21px;
                 top: 5px;
               }
-              .t2{
+              .t2 {
                 position: absolute;
                 right: 23px;
                 top: 10px;
@@ -693,7 +693,7 @@
                 color: #f1f0f0;
               }
             }
-            .pic2{
+            .pic2 {
               position: absolute;
               bottom: 0;
               left: -83px;
@@ -701,14 +701,14 @@
               height: 53px;
               background: url("../images/03-1.png") no-repeat center;
               background-size: cover;
-              .t1{
+              .t1 {
                 font-size: 26px;
                 color: #ffffff;
                 position: absolute;
                 left: 21px;
                 top: 5px;
               }
-              .t2{
+              .t2 {
                 position: absolute;
                 right: 23px;
                 top: 10px;
@@ -981,16 +981,37 @@
   }
 }
 
-
-
-
-
-
-
-
-
-
-
-
-
-
+.fixeds {
+  position: fixed;
+  bottom: 100px;
+  right: 296px;
+  z-index: 2;
+  .qq {
+    background-position: -15px -174px;
+    width: 69px;
+    height: 69px;
+    display: block;
+    margin-bottom: 17px;
+  }
+  .tel {
+    background-position: -15px -260px;
+    width: 69px;
+    height: 69px;
+    display: block;
+    .uc{
+      position: absolute;
+      left: -159px; 
+      top: 58px;
+      width: 159px;
+      height: 61px;
+      background: url("../images/sd.png") no-repeat center;
+      display: none;
+    }
+    &:hover {
+      background-position: -106px -174px;
+      .uc{
+        display: block;
+      }
+    }
+  }
+}
\ No newline at end of file

index.html

@@ -115,6 +115,12 @@
         </div>
     </div>
 </div>
+<div class="fixeds">
+    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=734739138&site=qq&menu=yes" class="icn qq"></a>
+    <a href="" class="icn tel">
+        <i class="uc"></i>
+    </a>
+</div>
 <script type="text/javascript" src="./js/jquery.min.js"></script>
 <script type="text/javascript" src="./js/layui/layui.all.js"></script>
 <script type="text/javascript" src="./js/wow.min.js"></script>