产品和服务样式第二版

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

@@ -181,7 +181,7 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 }
 
 /* 网站标题 */
-.client-title{ @include setFontStyle(14);color: rgba(0,0,0,0.85);letter-spacing: 0;padding-top: 80px;text-align: center;}
+.client-title{ @include setFontStyle(10);color: rgba(0,0,0,0.85);letter-spacing: 0;padding-top: 80px;text-align: center;}
 
 /* 网站底部footer */
 .client-footer{

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

@@ -102,9 +102,30 @@
       }
     }
 
+    /* 认识我们*/
+    .client-link-box{
+      background: #F7F9FB;
+      li{
+        width: 25%;display: inline-block;padding:24px;border-right: 2px solid #FFF;box-sizing: border-box;transition: 0.3s;
+        //左侧图片区域
+        .link-left{width: 48px;height: 48px;float: left;background: #4d90fe;}
+
+        h1{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 8px;margin-left: 64px;}
+        p{@include setFontStyle(-6);color: rgba(0,0,0,0.65);line-height: 24px;margin:0 0 16px 64px;}
+      }
+      li:last-child{border-right: 0;}
+      li:hover{
+        background: #F3F3F3;
+        cursor: pointer;
+        h1{color: #2B5CFD}
+      }
+
+    }
+
     /* 产品和服务 */
     .products-services-box{
-      padding: 116px 0 30px;
+      padding: 136px 0 32px;
+      margin: 0 -29px;
         li{
           width: 33.33%;
           display: inline-block;
@@ -112,10 +133,12 @@
           position: relative;
           //头部图片
           .products-services-img{
-            height: 173px;
+            width: 96px;
+            height: 120px;
             position: absolute;
             top: -80px;
             left: 50%;
+            margin-left: -48px;
             transition: .3s all linear;
             i{
               display: block;
@@ -124,44 +147,45 @@
           }
           //内容区域
           .products-services-content{
-            padding: 110px 32px 48px 32px;
+            padding: 66px 42px 32px;
             transition: .3s all linear;
+            margin: 0 29px;
             @include setFontStyle(-6);
-            h2{@include setFontStyle(2);color: rgba(0,0,0,0.85);text-align: center;margin-bottom: 16px;}
+            h2{@include setFontStyle(-2);color: rgba(0,0,0,0.85);text-align: center;margin-bottom: 16px;}
             p{line-height: 22px;color: rgba(0,0,0,0.65);margin-bottom: 32px;text-align: justify;min-height: 136px;@include multi-line-ellipsis(6);max-height: 136px}
-            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;}
+            a{display: block;background: #2B5CFD;opacity:0;border-radius: 4px;color: rgba(255, 255, 255, 0.85);cursor: pointer;width: 120px;height: 32px;line-height: 32px;text-align: center;margin: 0 auto;transition: .3s all linear;}
           }
         }
         li:nth-child(1){
           .products-services-img{
-            width: 148px;
-            margin-left: -74px;
             background-image: url("~@/assets/images/client/index/" + "index-products-kaoshi.png");
-            i{width:57px;height:41px;top: 28px;left: 50px;background-image: url("~@/assets/images/client/index/" + "index-products-kaoshi-icon.png");animation: 3s servicesImgUpDown linear infinite;}
+            i{width:38px;height:28px;top: 28px;left: 35px;background-image: url("~@/assets/images/client/index/" + "index-products-kaoshi-icon.svg");animation: 3s servicesImgUpDown linear infinite;}
           }
         }
         li:nth-child(2){
           .products-services-img{
-            width: 138px;
-            margin-left: -69px;
             background-image: url("~@/assets/images/client/index/" + "index-products-peixun.png");
-            i{width:31px;height:45px;top: 28px;left: 60px;background-image: url("~@/assets/images/client/index/" + "index-products-peixun-icon.png");animation: 3s servicesImgUpDown linear infinite;}
+            i{width:21px;height:32px;top: 18px;left: 43px;background-image: url("~@/assets/images/client/index/" + "index-products-peixun-icon.svg");animation: 3s servicesImgUpDown2 linear infinite;}
           }
         }
         li:nth-child(3){
           .products-services-img{
-            width: 155px;
-            margin-left: -77px;
             background-image: url("~@/assets/images/client/index/" + "index-products-kejian.png");
-            i{width:48px;height:48px;top: 35px;left: 45px;background-image: url("~@/assets/images/client/index/" + "index-products-kejian-icon.png");transform:rotate(0);animation: 4s servicesImgRotate linear infinite;}
+            i{width:34px;height:33px;top: 25px;left: 25px;background-image: url("~@/assets/images/client/index/" + "index-products-kejian-icon.svg");transform:rotate(0);animation: 4s servicesImgRotate linear infinite;}
           }
         }
         //小图标动画效果
       //饼图动画效果
       @keyframes servicesImgUpDown {
         0%, to {top: 28px}
-        50% {top: 40px;}
+        50% {top: 38px;}
+      }
+
+      @keyframes servicesImgUpDown2 {
+        0%, to {top: 18px}
+        50% {top: 28px;}
       }
+
       @keyframes servicesImgRotate{
         from {transform:rotate(0);}
         to {transform:rotate(360deg);}
@@ -169,12 +193,13 @@
         // li-鼠标悬浮效果
         li:hover{
           //头部图片
-          .products-services-img{top: -100px;}
+          .products-services-img{top: -90px;}
           //内容区域
           .products-services-content{
             cursor: default;
             box-shadow: 0 4px 8px 0 rgba(214,214,214,0.76);
             border-radius: 8px;
+            a{opacity: 1;}
           }
         }
     }

src/assets/images/client/index/index-products-kaoshi-icon.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="38" height="28" viewBox="0 0 38 28">
+  <defs>
+    <path id="铅笔-a" d="M17.1891892,-5.7509354 L19.7837838,-5.7509354 C21.2167388,-5.7509354 22.3783784,-4.58929583 22.3783784,-3.1563408 L22.3783784,26.0328484 L22.3783784,26.0328484 L19.3606078,31.2295453 C19.1807085,31.5393376 18.7837351,31.6446366 18.4739428,31.4647374 C18.3925716,31.4174843 18.3224553,31.3530932 18.2684587,31.2760316 L14.5945946,26.0328484 L14.5945946,26.0328484 L14.5945946,-3.1563408 C14.5945946,-4.58929583 15.7562342,-5.7509354 17.1891892,-5.7509354 Z"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd" transform="translate(.784 .54)">
+    <mask id="铅笔-b" fill="#fff">
+      <use xlink:href="#铅笔-a"/>
+    </mask>
+    <use fill="#FEBF11" transform="rotate(60 18.486 13.178)" xlink:href="#铅笔-a"/>
+    <rect width="9.73" height="1" x="25.297" y="5.838" fill="#FFF" mask="url(#铅笔-b)" transform="rotate(60 30.162 6.162)"/>
+    <rect width="9.73" height="1" x="14.27" y="12.324" fill="#FFF" mask="url(#铅笔-b)" rx=".324" transform="rotate(-29 19.135 12.649)"/>
+    <rect width="9.73" height="1" x="3.279" y="19.681" fill="#FFF" mask="url(#铅笔-b)" transform="rotate(60 8.144 20.005)"/>
+  </g>
+</svg>

src/assets/images/client/index/index-products-peixun-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="32" viewBox="0 0 21 32">
+  <path fill="#FEBF11" fill-rule="evenodd" d="M53.9723464,24.3901373 L67.84245,42.421272 C68.3109494,43.0303212 68.1970113,43.903847 67.5879621,44.3723464 C67.3447501,44.5594326 67.0465129,44.6608696 66.7396688,44.6608696 L38.9994616,44.6608696 C38.2310654,44.6608696 37.6081573,44.0379614 37.6081573,43.2695652 C37.6081573,42.9627211 37.7095943,42.664484 37.8966804,42.421272 L51.766784,24.3901373 C52.2352834,23.7810881 53.1088092,23.6671499 53.7178584,24.1356493 C53.813348,24.2091029 53.8988929,24.2946477 53.9723464,24.3901373 Z" transform="rotate(90 40.87 3.809)"/>
+</svg>

src/components/client/common/Cframe.vue

@@ -42,6 +42,6 @@
 </script>
 <style lang="scss" scoped>
 .mta-home-box-c{
-    >div{width: 100%;margin-top: 80px;}
+    >div:not(.client-index-page){width: 100%;margin-top: 80px;}
 }
 </style>

src/views/client/Index.vue

@@ -25,6 +25,18 @@
             </div>
         </div>
 
+        <!-- 认识我们 -->
+        <div class="client-link-box">
+            <div class="client-container">
+                <ul>
+                    <li><div class="link-left"></div><h1>认识我们</h1><p>麦塔考试平台满足不同行业考试考核需求</p></li>
+                    <li><div class="link-left"></div><h1>培训平台</h1><p>麦塔考试平台满足不同行业考试考核需求</p></li>
+                    <li><div class="link-left"></div><h1>培训平台</h1><p>麦塔考试平台满足不同行业考试考核需求</p></li>
+                    <li><div class="link-left"></div><h1>培训平台</h1><p>麦塔考试平台满足不同行业考试考核需求</p></li>
+                </ul>
+            </div>
+        </div>
+
         <!-- 产品和服务 -->
         <div class="client-products-services">
             <div class="client-container">