网站产品和服务部分

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

@@ -6,7 +6,7 @@
 ol,ul{list-style:none;margin: 0;padding: 0;}
 
 /* 让标题都自定义, 适应多个系统应用 */
-h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;margin: 0;}
+h1,h2,h3,h4,h5,h6,p{font-size:100%;font-weight:normal;margin: 0;}
 
 /* 外边距 */
 .m5{margin:5px;}

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

@@ -1,4 +1,5 @@
 @import "../base/utils";
+@import "cus-website-common";
 
 @mixin setWebsitePage() {
   /********  describe: 网站首页  author: TX  date:2020-07-30  ********/
@@ -129,7 +130,7 @@
 
     /* 产品和服务 */
     .products-services-box{
-      margin-top: 136px;
+      margin: 136px 0 30px;
         li{
           width: 33.33%;
           display: inline-block;
@@ -137,37 +138,71 @@
           position: relative;
           //头部图片
           .products-services-img{
-            width: 148px;
             height: 173px;
             position: absolute;
             top: -80px;
             left: 50%;
-            margin-left: -74px;
-            background-image: url("~@/assets/images/website/index/" + "index-products-kaoshi.png");
+            transition: .3s all linear;
+            i{
+              display: block;
+              position: absolute;
+            }
+          }
+          //内容区域
+          .products-services-content{
+            padding: 120px 32px 48px 32px;
+            transition: .3s all linear;
+            @include setFontStyle(-4);
+            h2{@include setFontStyle(4);color: rgba(0,0,0,0.85);text-align: center;margin-bottom: 24px;}
+            p{line-height: 24px;color: rgba(0,0,0,0.65);margin-bottom: 56px;text-align: justify;min-height: 144px;@include multi-line-ellipsis(6);}
+            a{background: #2B5CFD;border-radius: 4px;color: rgba(255, 255, 255, 0.85);cursor: pointer;width: 120px;height: 32px;line-height: 32px;display: block;text-align: center;margin: 0 auto;}
           }
         }
         li:nth-child(1){
-
+          .products-services-img{
+            width: 148px;
+            margin-left: -74px;
+            background-image: url("~@/assets/images/website/index/" + "index-products-kaoshi.png");
+            i{width:57px;height:41px;top: 28px;left: 50px;background-image: url("~@/assets/images/website/index/" + "index-products-kaoshi-icon.png");animation: 3s servicesImgUpDown linear infinite;}
+          }
         }
         li:nth-child(2){
-
+          .products-services-img{
+            width: 138px;
+            margin-left: -69px;
+            background-image: url("~@/assets/images/website/index/" + "index-products-peixun.png");
+            i{width:31px;height:45px;top: 28px;left: 60px;background-image: url("~@/assets/images/website/index/" + "index-products-peixun-icon.png");animation: 3s servicesImgUpDown linear infinite;}
+          }
         }
         li:nth-child(3){
-
-        }
-        //内容区域
-        .products-services-content{
-          padding: 120px 32px 48px 32px;
-          transition: .3s all linear;
-          h2{@include setFontStyle(4);color: rgba(0,0,0,0.85);text-align: center;}
-          a{@include setFontStyle(-4);background: #2B5CFD;border-radius: 4px;color: rgba(255, 255, 255, 0.85);cursor: pointer;width: 120px;height: 32px;line-height: 32px;display: block;text-align: center;margin: 0 auto;}
+          .products-services-img{
+            width: 155px;
+            margin-left: -77px;
+            background-image: url("~@/assets/images/website/index/" + "index-products-kejian.png");
+            i{width:48px;height:48px;top: 35px;left: 45px;background-image: url("~@/assets/images/website/index/" + "index-products-kejian-icon.png");transform:rotate(0);animation: 4s servicesImgRotate linear infinite;}
+          }
         }
-        .products-services-content:hover{
-          cursor: default;
-          box-shadow: 0 4px 8px 0 rgba(214,214,214,0.76);
-          border-radius: 8px;
+        //小图标动画效果
+      //饼图动画效果
+      @keyframes servicesImgUpDown {
+        0%, to {top: 28px}
+        50% {top: 40px;}
+      }
+      @keyframes servicesImgRotate{
+        from {transform:rotate(0);}
+        to {transform:rotate(360deg);}
+      }
+        // li-鼠标悬浮效果
+        li:hover{
+          //头部图片
+          .products-services-img{top: -100px;}
+          //内容区域
+          .products-services-content{
+            cursor: default;
+            box-shadow: 0 4px 8px 0 rgba(214,214,214,0.76);
+            border-radius: 8px;
+          }
         }
-
     }
   }
 }

src/views/client/Index.vue

@@ -55,7 +55,7 @@
                 <h1 class="website-index-title">产品和服务</h1>
                 <ul class="products-services-box">
                     <li>
-                        <div class="products-services-img"></div>
+                        <div class="products-services-img"><i></i></div>
                         <div class="products-services-content">
                             <h2>考试平台</h2>
                             <p>麦塔考试平台满足不同行业考试考核需求：教育机构出题判卷、课后练习布置；企事业单位企业文化、业务水平提升；政府机构党建知识考核、提高服务意识；电力金融医疗专业技能、安全生产通通交给我们！</p>
@@ -63,7 +63,7 @@
                         </div>
                     </li>
                     <li>
-                        <div class="products-services-img"></div>
+                        <div class="products-services-img"><i></i></div>
                         <div class="products-services-content">
                             <h2>培训平台</h2>
                             <p>麦塔培训平台满足企业全流程培训场景，支持移动web端、PC端、APP端答题和学习，多种学习模式保障学习效果，结果及时反馈，让知识转化为行动，提升培训成效，让学员充分获取学习乐趣与动力，满足您的个性化培训考试需求。</p>
@@ -71,7 +71,7 @@
                         </div>
                     </li>
                     <li>
-                        <div class="products-services-img"></div>
+                        <div class="products-services-img"><i></i></div>
                         <div class="products-services-content">
                             <h2>课件开发</h2>
                             <p>麦塔能够快速搭建企业单位、教育机构学习资源库，满足学习平台需求，针对目标对象的学习习惯和学习方式个性化开发课程核心内容，将零散、隐性的知识系统化、显性化，现已开发了管理类通用课程、医药类课程、银行业课程等数千门课程内容。</p>