首页产品和服务改版3

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

@@ -109,19 +109,27 @@
         width: 25%;display: inline-block;padding:24px;border-right: 2px solid #FFF;box-sizing: border-box;transition: 0.3s;
         //左侧图片区域
         .link-left{
-          width: 60px;height: 60px;float: left;background-image: url("~static/images/client/index/index-linkLeft-bg.png");text-align:center;transition: 0.3s;
-          img{display: inline-block;margin-top: 18px;}
+          width: 60px;height: 60px;float: left;background-image: url("~static/images/client/index/index-linkLeft-bg.svg");text-align:center;transition: 0.3s;
+          i{width:24px;height:24px;display: inline-block;margin-top: 18px;}
         }
 
         h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 8px;margin-left: 74px;}
         p{@include setFontStyle(-6);height:48px;color: rgba(0,0,0,0.65);line-height: 22px;margin-left:74px;@include multi-line-ellipsis(2);}
       }
+      li:nth-child(1){.link-left i{background-image: url("~static/images/client/index/index-link-img1.svg");}}
+      li:nth-child(1):hover{.link-left i{background-image: url("~static/images/client/index/index-link-img1-a.svg");}}
+      li:nth-child(2){.link-left i{background-image: url("~static/images/client/index/index-link-img2.svg");}}
+      li:nth-child(2):hover{.link-left i{background-image: url("~static/images/client/index/index-link-img2-a.svg");}}
+      li:nth-child(3){.link-left i{background-image: url("~static/images/client/index/index-link-img3.svg");}}
+      li:nth-child(3):hover{.link-left i{background-image: url("~static/images/client/index/index-link-img3-a.svg");}}
+      li:nth-child(4){.link-left i{background-image: url("~static/images/client/index/index-link-img4.svg");}}
+      li:nth-child(4):hover{.link-left i{background-image: url("~static/images/client/index/index-link-img4-a.svg");}}
       li:last-child{border-right: 0;}
       li:hover{
-        background: #F3F3F3;
+        background: #F1F1F1;
         cursor: pointer;
         //左侧图片区域
-        .link-left{background-image: url("~static/images/client/index/index-linkLeft-bg-a.png");}
+        .link-left{background-image: url("~static/images/client/index/index-linkLeft-bg-a.svg");}
         h5{color: #2B5CFD}
       }
 
@@ -151,12 +159,12 @@
           }
           //内容区域
           .products-services-content{
-            padding: 66px 42px 32px;
+            padding: 66px 40px 32px;
             transition: .3s all linear;
-            margin: 0 29px;
+            margin: 0 24px;
             @include setFontStyle(-6);
             h5{@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}
+            p{line-height: 22px;color: rgba(0,0,0,0.65);margin-bottom: 70px;text-align: justify;@include multi-line-ellipsis(6);}
             a{width: 120px;height: 32px;line-height: 32px;opacity:0;margin: 0 auto;}
           }
         }

pages/index.vue

@@ -31,28 +31,22 @@
       <div class="client-container">
         <ul>
           <li>
-            <div class="link-left"><img :src="linkImg1" alt="认识我们" /></div>
+            <div class="link-left"><i></i></div>
             <h5>认识我们</h5>
             <p>数字化、信息化转型中一股逆流而上的清风</p>
           </li>
           <li>
-            <div class="link-left">
-              <img :src="linkImg2" alt="新版本上线" />
-            </div>
+            <div class="link-left"><i></i></div>
             <h5>新版本上线</h5>
             <p>麦塔3.9.1版本上线了，功能抢先看</p>
           </li>
           <li>
-            <div class="link-left">
-              <img :src="linkImg3" alt="政府行业解决方案" />
-            </div>
+            <div class="link-left"><i></i></div>
             <h5>政府行业解决方案</h5>
             <p>助力政府企业向信息化、数字化转变，节约行业成本、提高办事效率</p>
           </li>
           <li>
-            <div class="link-left">
-              <img :src="linkImg4" alt="行业新动态" />
-            </div>
+            <div class="link-left"><i></i></div>
             <h5>行业新动态</h5>
             <p>时代推动企业发展，在信息化、数字化的浪潮下，不进则退</p>
           </li>
@@ -69,9 +63,7 @@
             <div class="products-services-img"><i></i></div>
             <div class="products-services-content">
               <h5>考试系统</h5>
-              <p>
-                麦塔在线考试系统满足不同行业考试考核需求：教育机构出题判卷、课后练习布置；企事业单位企业文化、业务水平提升；政府机构党建知识考核、提高服务意识；电力金融医疗专业技能、安全生产通通交给我们！
-              </p>
+              <p>麦塔考试平台满足不同行业考试考核需求：教育机构出题判卷、课后练习布置；企事业单位企业文化、业务水平提升</p>
               <a class="client-default-Btn">了解详情</a>
             </div>
           </li>
@@ -79,9 +71,7 @@
             <div class="products-services-img"><i></i></div>
             <div class="products-services-content">
               <h5>培训系统</h5>
-              <p>
-                麦塔在线培训系统满足企业全流程培训场景，支持移动web端、PC端、APP端答题和学习，多种学习模式保障学习效果，结果及时反馈，让知识转化为行动，提升培训成效，让学员充分获取学习乐趣与动力，满足您的个性化培训考试需求。
-              </p>
+              <p>麦塔培训平台满足企业全流程培训场景，支持移动web端、PC端、APP端答题和学习，多种学习模式保障学习效果，结果及时反馈</p>
               <a class="client-default-Btn">了解详情</a>
             </div>
           </li>
@@ -89,9 +79,7 @@
             <div class="products-services-img"><i></i></div>
             <div class="products-services-content">
               <h5>课件制作</h5>
-              <p>
-                麦塔能够快速搭建企业单位、教育机构学习资源库，满足学习平台需求，针对目标对象的学习习惯和学习方式个性化开发课程核心内容，将零散、隐性的知识系统化、显性化，现已开发了管理类通用课程、医药类课程、银行业课程等数千门课程内容。
-              </p>
+              <p>麦塔能够快速搭建企业单位、教育机构学习资源库，满足学习平台需求，针对目标对象的学习习惯和学习方式个性化开发课程</p>
               <a class="client-default-Btn">了解详情</a>
             </div>
           </li>
@@ -338,10 +326,6 @@
         topCarousels2: [],
         // 需求img
         bannerTelImg: require(`~/static/images/client/index/index-banner-screen.png`),
-        linkImg1: require(`~/static/images/client/index/index-link-img1.svg`),
-        linkImg2: require(`~/static/images/client/index/index-link-img2.svg`),
-        linkImg3: require(`~/static/images/client/index/index-link-img3.svg`),
-        linkImg4: require(`~/static/images/client/index/index-link-img4.svg`),
         demandImg1: require(`~/static/images/client/index/index-demand-img1.png`),
         demandImg2: require(`~/static/images/client/index/index-demand-img2.png`),
         demandImg3: require(`~/static/images/client/index/index-demand-img3.png`),

static/images/client/index/index-link-img1-a.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="25" viewBox="0 0 24 25">
+  <defs>
+    <rect id="认识我们-黄-a" width="24" height="24" rx="4"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <mask id="认识我们-黄-b" fill="#fff">
+      <use xlink:href="#认识我们-黄-a"/>
+    </mask>
+    <use fill="#E8ECFF" xlink:href="#认识我们-黄-a"/>
+    <path fill="#FEBF11" d="M.353553391 5.19729436L5.30330086-.24715008C5.48082096-.442412226 5.78302068-.456794998 5.97828282-.2792749 5.98949439-.269082041 6.00021478-.258361653 6.01040764-.24715008 6.21087803-.0266438998 6.21087803.310121517 6.01040764.530627697L1.06066017 5.97507214C.883140074 6.17033429.580940356 6.18471706.38567821 6.00719696.374466637 5.9970041.36374625 5.98628371.353553391 5.97507214.153082999 5.75456596.153082999 5.41780054.353553391 5.19729436zM5.71751442 5.19729436L10.6672619-.24715008C10.844782-.442412226 11.1469817-.456794998 11.3422439-.2792749 11.3534554-.269082041 11.3641758-.258361653 11.3743687-.24715008 11.5748391-.0266438998 11.5748391.310121517 11.3743687.530627697L6.4246212 5.97507214C6.2471011 6.17033429 5.94490139 6.18471706 5.74963924 6.00719696 5.73842767 5.9970041 5.72770728 5.98628371 5.71751442 5.97507214 5.51704403 5.75456596 5.51704403 5.41780054 5.71751442 5.19729436zM11.0814755 5.19729436L16.0312229-.24715008C16.208743-.442412226 16.5109427-.456794998 16.7062049-.2792749 16.7174165-.269082041 16.7281368-.258361653 16.7383297-.24715008 16.9388001-.0266438998 16.9388001.310121517 16.7383297.530627697L11.7885822 5.97507214C11.6110621 6.17033429 11.3088624 6.18471706 11.1136003 6.00719696 11.1023887 5.9970041 11.0916683 5.98628371 11.0814755 5.97507214 10.8810051 5.75456596 10.8810051 5.41780054 11.0814755 5.19729436zM16.4454365 5.19729436L21.395184-.24715008C21.572704-.442412226 21.8749038-.456794998 22.0701659-.2792749 22.0813775-.269082041 22.0920979-.258361653 22.1022907-.24715008 22.3027611-.0266438998 22.3027611.310121517 22.1022907.530627697L17.1525433 5.97507214C16.9750232 6.17033429 16.6728234 6.18471706 16.4775613 6.00719696 16.4663497 5.9970041 16.4556293 5.98628371 16.4454365 5.97507214 16.2449661 5.75456596 16.2449661 5.41780054 16.4454365 5.19729436z" mask="url(#认识我们-黄-b)"/>
+    <rect width="24" height="2" y="5" fill="#FEBF11" mask="url(#认识我们-黄-b)"/>
+    <path fill="#FEBF11" d="M13.4160251,12.6240377 L16.4817666,17.2226499 C16.6349428,17.4524142 16.5728559,17.7628489 16.3430916,17.9160251 C16.2609578,17.970781 16.1644539,18 16.0657415,18 L9.93425855,18 C9.65811617,18 9.43425855,17.7761424 9.43425855,17.5 C9.43425855,17.4012875 9.46347756,17.3047837 9.5182334,17.2226499 L12.5839749,12.6240377 C12.7371511,12.3942734 13.0475858,12.3321864 13.2773501,12.4853627 C13.3322762,12.5219801 13.3794077,12.5691116 13.4160251,12.6240377 Z" mask="url(#认识我们-黄-b)" transform="rotate(90 13 15)"/>
+  </g>
+</svg>

static/images/client/index/index-link-img3-a.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#E8ECFF" d="M9,0 C10.6568542,-3.04359188e-16 12,1.34314575 12,3 L16,3 C18.209139,3 20,4.790861 20,7 L20,10 L20,10 C21.6568542,10 23,11.3431458 23,13 C23,14.6568542 21.6568542,16 20,16 L20,20 C20,22.209139 18.209139,24 16,24 L4,24 C1.790861,24 2.705415e-16,22.209139 0,20 L0,16 C1.65685425,16 3,14.6568542 3,13 C3,11.4023191 1.75108004,10.0963391 0.176272788,10.0050927 L0,10 L0,7 C-2.705415e-16,4.790861 1.790861,3 4,3 L6,3 L6,3 C6,1.34314575 7.34314575,3.04359188e-16 9,0 Z"/>
+    <rect width="8" height="1" x="7" y="9" fill="#FEBF11" rx=".5"/>
+    <rect width="6" height="1" x="7" y="13" fill="#FEBF11" rx=".5"/>
+    <rect width="8" height="1" x="7" y="17" fill="#FEBF11" rx=".5"/>
+  </g>
+</svg>

static/images/client/index/index-link-img4-a.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+  <defs>
+    <rect id="行业新动态-黄-a" width="24" height="24"/>
+    <path id="行业新动态-黄-c" d="M1,6 L19.7574644,1.31063391 C20.2932593,1.17668518 20.8361938,1.50244587 20.9701425,2.03824078 C20.9899727,2.11756139 21,2.1990146 21,2.28077641 L21,14.7801961 C21,15.3324808 20.5522847,15.7801961 20,15.7801961 C19.934148,15.7801961 19.868457,15.7736914 19.8038839,15.7607768 L1,12 L1,12 L1,6 Z"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <mask id="行业新动态-黄-b" fill="#fff">
+      <use xlink:href="#行业新动态-黄-a"/>
+    </mask>
+    <g mask="url(#行业新动态-黄-b)">
+      <g transform="translate(1.998 -.07)">
+        <mask id="行业新动态-黄-d" fill="#fff">
+          <use xlink:href="#行业新动态-黄-c"/>
+        </mask>
+        <use fill="#E8ECFF" transform="rotate(-4 11 8.5)" xlink:href="#行业新动态-黄-c"/>
+        <rect width="1" height="14" x="17.002" y="1.07" fill="#FEBF11" mask="url(#行业新动态-黄-d)" transform="rotate(-5 17.502 8.07)"/>
+      </g>
+    </g>
+    <path fill="#F5A623" d="M5,13 L11,13 L10.1358036,22.5061602 C10.0588906,23.3522031 9.34953173,24 8.5,24 C7.63138059,24 6.88705521,23.3788036 6.73167184,22.5241951 L5,13 L5,13 Z" mask="url(#行业新动态-黄-b)" transform="rotate(-9 8 18.5)"/>
+    <rect width="11" height="8" x=".051" y="5.452" fill="#E8ECFF" mask="url(#行业新动态-黄-b)" rx="4" transform="rotate(-4 5.55 9.452)"/>
+    <rect width="8" height="12" x="3.047" y="3.348" fill="#FEBF11" mask="url(#行业新动态-黄-b)" rx="2" transform="rotate(-4 7.047 9.348)"/>
+  </g>
+</svg>

static/images/client/index/index-linkLeft-bg-a.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="61" viewBox="0 0 60 61">
+  <defs>
+    <rect id="椭圆形-蓝-a" width="60" height="60"/>
+    <circle id="椭圆形-蓝-d" cx="30" cy="30" r="24"/>
+    <filter id="椭圆形-蓝-c" width="129.2%" height="129.2%" x="-14.6%" y="-10.4%" filterUnits="objectBoundingBox">
+      <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0.168627451   0 0 0 0 0.360784314   0 0 0 0 0.992156863  0 0 0 0.320913462 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <mask id="椭圆形-蓝-b" fill="#fff">
+      <use xlink:href="#椭圆形-蓝-a"/>
+    </mask>
+    <g mask="url(#椭圆形-蓝-b)">
+      <use fill="#000" filter="url(#椭圆形-蓝-c)" xlink:href="#椭圆形-蓝-d"/>
+      <use fill="#7998FF" xlink:href="#椭圆形-蓝-d"/>
+    </g>
+  </g>
+</svg>

static/images/client/index/index-linkLeft-bg.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="61" viewBox="0 0 60 61">
+  <defs>
+    <rect id="白色椭圆-a" width="60" height="60"/>
+    <circle id="白色椭圆-d" cx="30" cy="30" r="24"/>
+    <filter id="白色椭圆-c" width="129.2%" height="129.2%" x="-14.6%" y="-10.4%" filterUnits="objectBoundingBox">
+      <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2"/>
+      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0.168627451   0 0 0 0 0.360784314   0 0 0 0 0.992156863  0 0 0 0.320913462 0"/>
+    </filter>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <mask id="白色椭圆-b" fill="#fff">
+      <use xlink:href="#白色椭圆-a"/>
+    </mask>
+    <g mask="url(#白色椭圆-b)">
+      <use fill="#000" filter="url(#白色椭圆-c)" xlink:href="#白色椭圆-d"/>
+      <use fill="#FFF" xlink:href="#白色椭圆-d"/>
+    </g>
+  </g>
+</svg>