首页间距文字调整

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

@@ -153,6 +153,7 @@ h1,h2,h3,h4,h5,h6,p{font-size:100%;font-weight:normal;margin: 0;}
       dl{display: inline-block;margin-right: 48px;margin-bottom: 40px;vertical-align: top;}
       dt{@include setFontStyle(-4);color: #FFFFFF;margin-bottom: 24px;}
       dd{@include setFontStyle(-6);color: rgba(255,255,255,0.64);margin-bottom: 8px;}
+      dd:hover{color: rgba(255,255,255,0.85);cursor: pointer}
     }
     .contact-right-box{
       width: 170px;
@@ -173,7 +174,8 @@ h1,h2,h3,h4,h5,h6,p{font-size:100%;font-weight:normal;margin: 0;}
     .link-a-box{
       margin-left: 114px;
       line-height: 22px;
-      a{@include setFontStyle(-6);color: rgba(255,255,255,0.54);margin-right: 32px;white-space: nowrap;}
+      a{@include setFontStyle(-6);color: rgba(255,255,255,0.54);display:inline-block;margin-right: 32px;white-space: nowrap;}
+      a:hover{color: rgba(255,255,255,0.85);cursor: pointer;}
     }
   }
   //底部版权

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

@@ -5,7 +5,7 @@
   /********  describe: 网站首页  author: TX  date:2020-07-30  ********/
   .website-index-page{
      width: 100%;
-
+     min-width: 1240px;
     /* 网站banner */
     .website-banner{
       width: 100%;
@@ -103,11 +103,11 @@
     }
 
     /* 网站标题 */
-    .website-index-title{ @include setFontStyle(14);color: rgba(0,0,0,0.85);letter-spacing: 0;padding-top: 96px;text-align: center;}
+    .website-index-title{ @include setFontStyle(14);color: rgba(0,0,0,0.85);letter-spacing: 0;padding-top: 80px;text-align: center;}
 
     /* 产品和服务 */
     .products-services-box{
-      padding: 136px 0 30px;
+      padding: 116px 0 30px;
         li{
           width: 33.33%;
           display: inline-block;
@@ -127,11 +127,11 @@
           }
           //内容区域
           .products-services-content{
-            padding: 120px 32px 48px 32px;
+            padding: 110px 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);}
+            @include setFontStyle(-6);
+            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);}
             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;}
           }
         }
@@ -185,21 +185,22 @@
     /* 行业学习需求 */
     .website-demand-box{
       background: #F9FAFF;
-      padding-bottom: 96px;
+      padding-bottom: 80px;
       // 行业ul
       .industry-box{
+        margin-top: 8px;
         li{
-          width: 25%;display: inline-block;padding-top: 56px;height: 147px;overflow: hidden;
+          width: 25%;display: inline-block;margin-top: 32px;height: 147px;overflow: hidden;
           img{margin: 0 auto;display: block;transition: all .2s linear;}
-          div{transition: all .25s linear;}
-          h2{@include setFontStyle(4);color: rgba(0,0,0,0.85);text-align: center;margin: 24px 0 16px;}
-          p{@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;margin: 0 8px 8px;min-height: 48px;text-align: center;@include multi-line-ellipsis(2);}
-          a{@include setFontStyle(-4);width: max-content;display: block;color: #2B5CFD;line-height: 24px;margin: 0 auto;}
+          div{transition: all .25s linear;text-align: center;}
+          h2{@include setFontStyle(2);color: rgba(0,0,0,0.85);text-align: center;margin: 24px 0 16px;}
+          p{@include setFontStyle(-6);color: rgba(0,0,0,0.65);line-height: 22px;margin: 0 8px 8px;min-height: 48px;@include multi-line-ellipsis(2);}
+          a{@include setFontStyle(-6);display: block;color: #2B5CFD;line-height: 24px;margin: 0 auto;}
         }
         li:hover{
           img{opacity: 0;transform: translateY(10px);}
           div{margin-top: -147px}
-          h2{@include setFontStyle(0);margin-top: 80px;}
+          h2{@include setFontStyle(-2);margin-top: 80px;}
           a{cursor: pointer;}
         }
       }
@@ -213,32 +214,39 @@
           width: 20%;
           display: inline-block;
         }
-        img{margin: 16px auto;}
+        img{margin: 16px auto;transition: all 0.5s;}
+        li:hover{
+          img{transform: scale(1.1);box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);border-radius: 8px}
+        }
       }
     }
 
     /* 我们始终专注教育系统研发更懂用户需求 */
     .website-cert-box{
       background: #F9FAFF;
-      padding-bottom: 96px;
+      padding-bottom: 80px;
+      .website-index-title{padding-bottom: 8px;}
       .cert-img-box{
         display: flex;
         justify-content: space-between;
-        margin: 56px 0;
-          img{width: 16%;border: 2px solid #2B5CFD;border-radius: 8px;}
+        margin: 32px 0;
+          span{display:block;border: 2px solid #2B5CFD;border-radius: 8px;padding:5px;overflow: hidden;}
+          img{width: 200px;height:280px;transition: all 0.5s;}
+          img:hover{transform: scale(1.1);}
       }
-      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);}
+      a{width:238px;height:40px;line-height: 40px;margin: 40px auto 0;text-align: center;@include setFontStyle(-4);display:block;background: #2B5CFD;border-radius: 4px;color: rgba(255,255,255,0.85);}
+      a:hover{cursor: pointer}
     }
 
     /* 为什么选择我们 */
     .website-chose-box{
-      padding-bottom: 96px;
+      padding-bottom: 80px;
       .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);}
+          div{width: 190px;height: 190px;border-radius:50%;position:relative;margin: 40px auto 24px;transition: all 0.3s;background-size: cover}
+          i{width: 62px;height: 62px;position: absolute;top: 65px;left: 45px;background-size: cover;}
+          h2{@include setFontStyle(2);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");}
@@ -279,12 +287,12 @@
     /* 行业资讯 */
     .website-industry-information{
       background: #F9FAFF;
-      padding-bottom: 96px;
+      padding-bottom: 80px;
       // 轮播组件
       .el-carousel{
-        margin-top: 56px;
+        margin-top: 40px;
         .el-carousel__container{
-          height: 400px;
+          height: 360px;
         }
 
       }
@@ -293,7 +301,7 @@
         border-radius: 8px;
         .website-img-box{
           width: 200px;
-          height: 400px;
+          height: 360px;
           background-repeat: no-repeat;
           background-size: cover;
           background-position: center;
@@ -302,13 +310,14 @@
         }
         .website-content-box{
           margin-left: 200px;
-          padding: 40px 32px;
-          h1{@include setFontStyle(4);color: rgba(0,0,0,0.85);margin-bottom: 24px;}
-          p{@include setFontStyle(-4);color: rgba(0,0,0,0.64);line-height: 24px;@include multi-line-ellipsis(9);min-height: 216px;margin-bottom: 24px;}
+          padding:32px;
+          h1{@include setFontStyle(2);color: rgba(0,0,0,0.85);margin-bottom: 16px;}
+          p{@include setFontStyle(-4);color: rgba(0,0,0,0.64);line-height: 24px;@include multi-line-ellipsis(9);min-height: 200px;margin-bottom: 24px;}
           a{width: 132px;height: 32px;line-height:32px;display: inline-block;@include setFontStyle(-4);background: #2B5CFD;border-radius: 4px;color: rgba(255,255,255,0.85);text-align: center}
         }
       }
       .el-carousel__item.is-active{
+        height: 350px;
         box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);
         .website-img-box{width: 400px;}
         .website-content-box{
@@ -316,6 +325,8 @@
           p{@include multi-line-ellipsis(9);}
         }
       }
+      //指示器
+      .el-carousel__indicators{display: none}
     }
   }
 }

src/views/client/Index.vue

@@ -95,7 +95,7 @@
                     <li><img :src="demandImg9" alt="金融保险"><div><h2>金融保险</h2><p>针对员工岗位性质、能力素质和业务需求，精心设计考试内容，选备了相应的题库，分岗位进行集中测试。</p><a>了解更多</a></div></li>
                     <li><img :src="demandImg10" alt="汽车制造"><div><h2>汽车制造</h2><p>一线门店轻量化练习，边看边练，提高工作效率、增加企业利润</p><a>了解更多</a></div></li>
                     <li><img :src="demandImg11" alt="新闻出版"><div><h2>新闻出版</h2><p>推进编辑出版专业水平提高，出版专业技术人员职业资格考试等</p><a>了解更多</a></div></li>
-                    <li><img :src="demandImg12" alt="更多"><div><h2>更多</h2><p></p><a>了解更多</a></div></li>
+                    <li><img :src="demandImg12" alt="更多"><div><h2>更多</h2><p>更多行业学习需求</p><a>了解更多</a></div></li>
                 </ul>
             </div>
         </div>
@@ -134,16 +134,16 @@
             <div class="website-container">
                 <h1 class="website-index-title">我们始终专注教育系统研发更懂用户需求</h1>
                 <div class="cert-img-box">
-                    <img :src="certImg1" alt="栋科考试管理系统">
-                    <img :src="certImg2" alt="栋科精品课程管理系统">
-                    <img :src="certImg3" alt="栋科课程管理系统">
-                    <img :src="certImg4" alt="栋科用户管理系统">
+                    <span><img :src="certImg1" alt="栋科考试管理系统"></span>
+                    <span><img :src="certImg2" alt="栋科精品课程管理系统"></span>
+                    <span><img :src="certImg3" alt="栋科课程管理系统"></span>
+                    <span><img :src="certImg4" alt="栋科用户管理系统"></span>
                 </div>
                 <div class="cert-img-box">
-                    <img :src="certImg5" alt="栋科网校运营系统">
-                    <img :src="certImg6" alt="麦塔考试系统">
-                    <img :src="certImg7" alt="麦塔培训系统">
-                    <img :src="certImg8" alt="知识产权管理体系认证证书">
+                    <span><img :src="certImg5" alt="栋科网校运营系统"></span>
+                    <span><img :src="certImg6" alt="麦塔考试系统"></span>
+                    <span><img :src="certImg7" alt="麦塔培训系统"></span>
+                    <span><img :src="certImg8" alt="知识产权管理体系认证证书"></span>
                 </div>
                 <a>了解更多</a>
             </div>
@@ -299,8 +299,8 @@
 
         },
         mounted() {
-            for (let i = 0; i < 5; i++) {
-                this.topCarousels.push(require(`@/assets/images/client/carousels/${i + 1}.jpg`));
+            for (let i = 0; i < 4; i++) {
+                this.topCarousels.push(require(`@/assets/images/client/carousels/${i + 1}.png`));
             }
 
         },