为什么选择我们

src/assets/css/cus-website/cus-website-page.scss

@@ -229,6 +229,52 @@
       }
       a{width:238px;height:40px;line-height: 40px;margin: 0 auto;text-align: center;@include setFontStyle(-4);display:block;background: #2B5CFD;border-radius: 4px;color: rgba(255,255,255,0.85);}
     }
+
+    /* 为什么选择我们 */
+    .website-chose-box{
+      padding-bottom: 96px;
+      .chose-img-box{
+        li{
+          width: 25%;display: inline-block;
+          div{width: 205px;height: 205px;border-radius:50%;position:relative;margin: 56px auto 24px;transition: all 0.3s;}
+          i{width: 70px;height: 70px;position: absolute;top: 65px;left: 45px;}
+          h2{@include setFontStyle(4);text-align: center;color: rgba(0,0,0,0.85);}
+        }
+        li:nth-child(1){
+          div{background-image: url("~@/assets/images/website/index/" + "index-chose-service.png");}
+          i{background-image: url("~@/assets/images/website/index/" + "index-chose-service-icon.png");animation: 3s choseImgUpDown1 linear infinite;}
+        }
+        li:nth-child(2){
+          div{background-image: url("~@/assets/images/website/index/" + "index-chose-system.png");}
+          i{background-image: url("~@/assets/images/website/index/" + "index-chose-system-icon.png");top: 30px;left: 55px;animation: 3s choseImgUpDown2 linear infinite;}
+        }
+        li:nth-child(3){
+          div{background-image: url("~@/assets/images/website/index/" + "index-chose-tech.png");}
+          i{background-image: url("~@/assets/images/website/index/" + "index-chose-tech-icon.png");animation: 3s choseImgUpDown1 linear infinite;}
+        }
+        li:nth-child(4){
+          div{background-image: url("~@/assets/images/website/index/" + "index-chose-operate.png");}
+          i{background-image: url("~@/assets/images/website/index/" + "index-chose-operate-icon.png");top: 50px;animation: 3s choseImgUpDown3 linear infinite;}
+        }
+        li:hover{
+          div{box-shadow: 0 3px 9px rgba(43, 92, 253,0.25);transform: translateY(-10px);cursor: pointer;}
+          h2{color: #2B5CFD;}
+        }
+        //选择我们动画效果
+        @keyframes choseImgUpDown1 {
+          0%, to {top: 65px;}
+          50% {top: 55px;}
+        }
+        @keyframes choseImgUpDown2 {
+          0%, to {top: 30px;}
+          50% {top: 40px;}
+        }
+        @keyframes choseImgUpDown3 {
+          0%, to {top: 40px;}
+          50% {top: 50px;}
+        }
+      }
+    }
   }
 }
 

src/views/client/Index.vue

@@ -147,6 +147,19 @@
                 <a>了解更多</a>
             </div>
         </div>
+
+        <!-- 为什么选择我们 -->
+        <div class="website-chose-box">
+            <div class="website-container">
+                <h1 class="website-index-title">为什么选择我们</h1>
+                <ul class="chose-img-box">
+                    <li><div><i></i></div><h2>专业的顾问服务</h2></li>
+                    <li><div><i></i></div><h2>完善的培训体系</h2></li>
+                    <li><div><i></i></div><h2>可靠的开发技术</h2></li>
+                    <li><div><i></i></div><h2>成熟的运营能力</h2></li>
+                </ul>
+            </div>
+        </div>
         <!--<div class="mta-index">
             <div class="block">
                 <el-carousel :interval="200000" type="card" height="400px" :autoplay="false" arrow="always">