首页响应式开发

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

@@ -128,6 +128,8 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
   font-family: "Helvetica Neue", Helvetica, Arial, "微软雅黑", sans-serif;
   color: #2C3E50;
   min-width: 1240px;
+  // head移动端响应式
+  @media (max-width: 768px){min-width: unset;}
 }
 
 /* 饿了么右侧生成的间距 */
@@ -136,7 +138,10 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 }
 
 /*  网站主体部分 */
-.client-container{width: 1200px;margin: 0 auto;}
+.client-container{
+  width: 1200px;margin: 0 auto;
+  @media (max-width: 768px){width: auto;padding: 0 15px;max-width: 100%;box-sizing: border-box;}
+}
 .client-container-middle{width: 960px;margin: 0 auto;}
 
 /* 网站头部导航栏 */
@@ -225,6 +230,38 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
       }
     }
   }
+
+  // head移动端响应式
+  @media (max-width: 768px){
+    // head
+    height: 60px;border-bottom: 1px solid #e7e7e7;
+
+      //头部左侧区域 logo
+    .head-left{
+        justify-content: space-between;height: 60px;align-items: center;padding:0;
+        >a{width: 92px;height: 46px;background-size: contain;margin:0;}
+    }
+      //头部导航
+    .el-menu{position: absolute;margin: 0;left: 0;right: 0;height: 100vh;transition: 0.5s;top: 61px;}
+    // 手机菜单关闭
+    .head-nav-up{height: 0;display:none;opacity: 0;}
+    // 手机菜单开启
+    .head-nav-down{height: 100vh;display:block;opacity: 1;}
+    // li
+    .el-menu--horizontal>.el-menu-item{float: none;height: 60px;line-height: 60px;border-bottom: 1px solid #e9e9e9;margin:0 18px;
+      border-bottom-color:#e9e9e9!important;font-weight: 700;font-size: 16px;color: rgb(16, 16, 16);}
+    .el-menu--horizontal>.el-menu-item a{width: 100%}
+    .el-menu--horizontal>.el-menu-item:last-child{border: 0;}
+    .el-menu--horizontal > .el-menu-item.is-active{border-bottom: 1px solid #e9e9e9;border-bottom-color: #e9e9e9 !important;}
+    // 咨询电话
+    .phone-tel-box{color: rgb(0, 84, 145);font-size: 14px;font-weight: bold;line-height: 60px;}
+
+    // 按钮
+    .phone-nav-btn{width:30px;height:30px;background-image: url("~static/images/client/component/head-btn-icon.svg");}
+
+    // 布局
+    .head-layout{display: block}
+  }
 }
 
 /* 网站头部导栏 - 面包屑 */
@@ -256,7 +293,11 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 }
 
 /* 网站标题 */
-.client-title{ @include setFontStyle(10);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;
+  // head移动端响应式
+  @media (max-width: 768px){@include setFontStyle(-2);padding-top: 20px;font-weight: 700;color: rgb(16, 16, 16);}
+}
 
 /* 网站副标题 */
 .client-subtitle-title{width: 650px;@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 30px;margin:0 auto;margin-top: 16px;text-align: center}
@@ -269,7 +310,11 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 .client-default-white-Btn{display: block;@include setFontStyle(-4);background: #fff;color: #2B5CFD;border-radius: 4px;transition: .3s all linear;text-align: center;}
 .client-default-white-Btn:hover{background: #fff;cursor: pointer;}
 // 免费试用按钮
-.free-trial-default-btn{width: 238px;height: 40px;line-height: 40px;margin: 40px auto 0;display: block;@include setFontStyle(-4);background: #3e7ee7;color: rgba(255, 255, 255, 0.85);border-radius: 4px;transition: .3s all linear;text-align: center;}
+.free-trial-default-btn{
+  width: 238px;height: 40px;line-height: 40px;margin: 40px auto 0;display: block;@include setFontStyle(-4);background: #3e7ee7;
+  color: rgba(255, 255, 255, 0.85);border-radius: 4px;transition: .3s all linear;text-align: center;
+  @media (max-width: 768px){width: 122px;height: 35px;line-height: 35px;margin: 16px auto 28px;}
+}
 .free-trial-default-btn:hover{cursor: pointer;}
 
   /* 网站底部footer */
@@ -325,6 +370,13 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
   }
   //底部版权
   h5{@include setFontStyle(-8);color: #B8B8B8;text-align: center;padding: 16px 0 24px;border-top: 1px solid  #333B4C;}
+  @media (max-width: 768px) {
+    .phone-footer-box {
+      text-align: center;padding: 20px 0;
+      a,p{@include setFontStyle(-10);color: #fff;padding: 6px 0}
+      a{display: block}
+    }
+  }
 }
 
 /* 网站分页 */
@@ -538,6 +590,21 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
       a,div.client-default-Btn{margin-right: 24px}
       span.client-default-Btn{background: #fff;color: #3e7ce7;margin-right: 0;}
     }
+  @media (max-width: 768px){
+    // 头部图片
+    img{width: 100%;height: auto;float: none;}
+    // 内容区域
+    .products-services-content{
+      width: 100%;float: none;padding: 0 10px;margin: 0;
+      @include setFontStyle(-6);
+      h5{@include setFontStyle(-6);font-weight: 700;color: rgba(0, 0, 0, 1);}
+      i{width:34px;height:3px;margin: 10px 0;}
+      p{margin-bottom: 30px;color: rgba(85, 85, 85, 1);}
+      .client-btn-box{text-align: center;margin-bottom: 40px;}
+      .client-default-Btn,.client-default-white-Btn{width: 120px;height: 35px;line-height: 35px;}
+      a,div.client-default-Btn{margin-right: 16px}
+    }
+  }
 }
 .products-contrary-box{
   // 头部图片
@@ -573,3 +640,15 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
     p{@include setFontStyle(-6);height: 66px;line-height: 22px;color: rgba(0, 0, 0, 0.65);@include multi-line-ellipsis(3);}
   }
 }
+
+
+// 麦塔栅格
+// 大于768的隐藏
+  @media screen and (min-width: 769px) {
+    .mta-hidden-sm{display: none!important;}
+  }
+
+// 小于769的隐藏
+  @media screen and (max-width: 769px) {
+    .mta-hidden-xs{display: none!important;}
+  }

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

@@ -22,7 +22,7 @@
         }
     }
 
-    /* 发展历程*/
+    /* 发展历程 - 移动端隐藏*/
     .client-company-history{
       background:#f8f8f8;
         li{
@@ -261,6 +261,136 @@
         }
       }
     }
+
+    // 移动端手机尺寸（0-768）
+    @media (max-width: 768px){
+      /* 网站banner */
+      .client-index-banner{height: 150px;}
+      /* banner-box */
+      .client-banner-box{
+        .el-carousel__container{height: 150px;}
+        .el-carousel__item .index-carousel-box{height: 150px;background-size: cover;}
+        // 左箭头
+        .el-carousel__arrow--left{display: none;}
+        // 右箭头
+        .el-carousel__arrow--right{display: none;}
+        // 分页
+        .el-carousel__button {width: 6px;height: 6px;border-radius: 3px;}
+      }
+
+      /* 产品和服务 */
+      .client-products-services{
+        .client-title{
+          margin-bottom: 0;
+        }
+      }
+
+      /* 行业学习需求 */
+      .client-demand-box{
+        padding: 30px 0 0;
+        min-height: 610px;
+        //tab
+        .demand-box-tab{
+          margin-top: 20px;
+          .el-tabs__item{width:100px;height: 30px;line-height: 30px;border-radius: 5px;margin: 0 8px 12px;}
+          .el-tabs__item.is-active:after{border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid #3e7ee7;bottom: -14px;}
+        }
+        //覆盖饿了么样式
+        .el-tabs__header{margin: 0 7px 15px;}
+
+        // 考试ul
+        .demand-tab-list{
+          margin: 0;
+          li{
+            width: 50%;margin-bottom: 12px;
+
+            // 内容区域
+            .demand-content-box{height: 125px;background-size: 25%;margin: 0 7px;}
+            //图片区域
+            .demand-img-box{
+              min-width: 70px;top: 30px;margin-left: -35px;
+              i{width: 40px;height: 40px;margin: 0 auto 15px;}
+              h4{@include setFontStyle(-6);color: rgb(16, 16, 16);}
+            }
+            // 蒙版
+            .demand-mask-box{display: none;}
+            // 点击按钮
+            .demand-onclick-btn{position: absolute;top: 0;left: 7px;right: 7px;bottom: 0;z-index: 99;}
+          }
+        }
+      }
+
+      /* 为什么选择我们  */
+      .client-chose-box{
+        padding: 0;
+        .chose-img-box{
+          margin: 20px 0 0;
+          li{
+            width: 50%;margin-bottom: 12px;
+            div{height: 125px;margin: 0 7px;}
+            span{height: 90px;}
+            img{width:60px;margin: 16px auto 0;}
+            h5{@include setFontStyle(-4);color: #101010;}
+          }
+        }
+        .client-default-Btn {
+          width: 238px;
+          height: 40px;
+          line-height: 40px;
+          margin: 40px auto 0;
+        }
+      }
+
+      /* 新闻资讯 */
+      .client-newsInfo-phone{
+        background-color: rgb(238, 238, 238);
+        // 轮播外层
+        .el-carousel{
+          padding: 20px 0 40px;
+          // card
+          .el-carousel__item{
+            width: 80%;left: -15%;color: rgb(16, 16, 16);background: #fff;box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px -1px;
+            img{width: 100%;height: 135px;}
+          }
+          // 文字区域
+          .newsInfo-card-content{
+            padding: 24px 20px;
+            h4{@include setFontStyle(-4);}
+            span{@include setFontStyle(-8);margin-top: 16px;display: block}
+            p{min-height: 48px;@include setFontStyle(-6);margin-top: 16px;@include multi-line-ellipsis(3);}
+          }
+        }
+
+      }
+
+      /* 超过10万家客户的信任之选 */
+      .client-customer-box{padding-top: 50px;
+        .customer-img-box{
+          padding-bottom: 50px;
+          li{width: 50%;text-align: center;}
+          img{max-width:90%;margin: 10px 0;}
+          li:hover{
+            img{transform: scale(1.1);box-shadow: 0 4px 8px 0 rgba(214, 214, 214, 0.76);border-radius: 6px}
+          }
+        }
+      }
+
+      /* 我们始终专注教育系统研发更懂用户需求 */
+      .client-cert-box{
+        padding: 0 7px 28px;
+        .cert-img-box{
+          margin: 20px 0 0;
+          span{height: 64px;padding: 2px 2px 0;}
+          span:nth-child(3){
+            height: 55px;
+            img{width: 80px;height:53px;}
+          }
+          img{width: 44px;height:62px;}
+          img:hover{transform: none;}
+        }
+        a{width:122px;height:35px;line-height: 35px;margin: 28px auto 0;}
+      }
+    }
   }
 
   /********  describe: 平台页面（考试平台、培训平台） author: TX  date:2020-08-12  ********/

components/footer.vue

@@ -1,6 +1,6 @@
 <template>
       <div class="client-footer">
-       <div class="client-container">
+       <div class="client-container mta-hidden-xs">
          <div class="contact-box">
            <div class="contact-left-box">
              <dl>
@@ -54,6 +54,11 @@
          </div>
          <h5>Copyright © 2019 llisoft.com All rights reserved 大连栋科软件工程有限公司 版权所有 <a style="color: #B8B8BB" href="https://beian.miit.gov.cn/#/Integrated/index">辽ICP备09022904号-18</a></h5>
        </div>
+        <div class="mta-hidden-sm phone-footer-box">
+          <p>Copyright © 2019 llisoft.com All rights reserved</p>
+          <p>大连栋科软件工程有限公司 版权所有</p>
+          <a href="https://beian.miit.gov.cn/#/Integrated/index">辽ICP备09022904号-18</a>
+        </div>
      </div>
 </template>
 

components/header.vue

@@ -5,7 +5,7 @@
         <a :href="`${baseUrl}`"></a>
         <el-menu
           :default-active="activeNav"
-          class="el-menu-demo"
+          :class="navClass"
           mode="horizontal"
           :router="false"
         >
@@ -24,9 +24,11 @@
             </el-menu-item>
           </template>
         </el-menu>
-
+        <span class="phone-tel-box mta-hidden-sm">咨询电话：400-052-2130</span>
+        <!-- 手机按钮 -->
+        <div class="phone-nav-btn mta-hidden-sm" @click="changeHeadNav"></div>
       </div>
-      <div class="head-right">
+      <div class="head-right mta-hidden-xs">
         <a class="right-tel-btn">免费注册</a>
         <div class="system-box">
           <div>
@@ -62,6 +64,7 @@
     },
     data() {
       return {
+        navClass:'head-nav-up',
         headerArr:   [
           {
             content: '首页',
@@ -111,5 +114,15 @@
         ],
       };
     },
+    methods:{
+      // 点击按钮菜单变化
+      changeHeadNav(){
+          if(this.navClass ==='head-nav-up' ){
+              this.navClass = 'head-nav-down'
+          }else{
+            this.navClass = 'head-nav-up'
+        }
+      },
+    },
   };
 </script>

layouts/templateA.vue

@@ -29,6 +29,11 @@
     },
   }
 </script>
-<style lang="scss" scoped>
-  .nuxt-box:not(.client-index-page){width: 100%;margin-top: 80px;}
+<style lang="scss">
+  .nuxt-box:not(.client-index-page){
+    width: 100%;margin-top: 80px;
+    // 移动端手机尺寸（0-768）
+    @media (max-width: 768px){margin-top: 61px;}
+  }
+
 </style>

nuxt.config.js

@@ -34,9 +34,9 @@ export default {
     title: process.env.npm_package_name || '',
     meta:  [
       { charset: 'utf-8' },
-      // { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
       // 移动端视口
-      { name: 'viewport', content: 'width=device-width, user-csalable=yes, initial-scale=0.25, minimum-scale=0.1, maximum-scale=0.25' },
+      // { name: 'viewport', content: 'width=device-width, user-csalable=yes, initial-scale=0.25, minimum-scale=0.1, maximum-scale=0.25' },
       {  name: 'nuxtConfigDescription', content: process.env.npm_package_description || '' },
       {name:'applicable-device',content:'pc'},
       { 'http-equiv':"Cache-Control",content:'no-transform' },

pages/index.vue

@@ -21,8 +21,8 @@
       </el-carousel>
     </div>
 
-    <!-- 发展历程 -->
-    <div class="client-company-history">
+    <!-- 发展历程-移动端隐藏-->
+    <div class="client-company-history mta-hidden-xs">
       <div class="client-container">
         <ul>
           <li><div><p>2008<span>年</span></p><h4>公司创立于2008年</h4></div></li>
@@ -43,7 +43,7 @@
               <h5>易用/稳定/高效的在线考试系统</h5>
               <i></i>
               <p>麦塔考试系统满足不同行业的考试考核需求；致力于提供行业领先，功能完善的在线考试解决方案；人员，题库，组卷，考试，成绩，监控，成绩，统计功能完整，多终端使用轻松应对各种类型考试需求；</p>
-              <div><a rel="nofollow" class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a><span  class="client-default-Btn" @click="goExamPage">了解详情</span></div>
+              <div class="client-btn-box"><a rel="nofollow" class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=1" target="_blank">免费试用</a><span  class="client-default-Btn" @click="goExamPage">了解详情</span></div>
           </div>
         </div>
         <div class="products-services-box products-contrary-box">
@@ -52,7 +52,7 @@
               <h5>一体化/全场景的在线培训系统</h5>
               <i></i>
               <p>麦塔在线培训系统助力企业构建学习型组织，帮助企业提升人才培养效率，增加线上培训路径，提升企业竞争力；</p>
-              <div><a rel="nofollow" class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">免费试用</a><span class="client-default-Btn" @click="goPeixunPage">了解详情</span></div>
+              <div class="client-btn-box"><a rel="nofollow" class="client-default-Btn" href="https://cdnks.mtavip.com/a/register?flug=2" target="_blank">免费试用</a><span class="client-default-Btn" @click="goPeixunPage">了解详情</span></div>
             </div>
         </div>
         <div class="products-services-box">
@@ -61,7 +61,7 @@
               <h5>数字课程开发服务</h5>
               <i></i>
               <p>栋科软件拥有经验丰富的课程开发团队，向客户提供最专业的课件定制开发服务，通过“课程内容专家+课程教学设计师+课件开发设计师“的专业化合作开发模式，针对学习对象的学习习惯和需求主题，开发课程核心内容，帮助客户解决线上学习者的学习效果和培训力的提升。</p>
-              <div><div class="client-default-Btn" @click="applyFun">申请方案</div><span class="client-default-Btn" @click="goKechengPage">了解详情</span></div>
+              <div class="client-btn-box"><div class="client-default-Btn" @click="applyFun">申请方案</div><span class="client-default-Btn" @click="goKechengPage">了解详情</span></div>
             </div>
         </div>
       </div>
@@ -76,6 +76,7 @@
             <ul class="demand-tab-list demand-kaoshi-list">
               <li v-for="item in kaoshiLiArray">
                 <div class="demand-content-box">{{item.demandNumber}}</div>
+                <a class="demand-onclick-btn mta-hidden-sm" :href="`${baseUrl}/${item.demandHref}`"></a>
                 <div class="demand-img-box"><i></i><h4>{{item.demandTitle}}</h4></div>
                 <div class="demand-mask-box">
                   <h4>{{item.demandTitle}}<a :href="`${baseUrl}/${item.demandHref}`"><span>了解详情</span><i></i></a></h4>
@@ -92,6 +93,7 @@
             <ul class="demand-tab-list demand-peixun-list">
               <li v-for="item in peixunLiArray">
                 <div class="demand-content-box">{{item.demandNumber}}</div>
+                <a class="demand-onclick-btn mta-hidden-sm" :href="`${baseUrl}/${item.demandHref}`"></a>
                 <div class="demand-img-box"><i></i><h4>{{item.demandTitle}}</h4></div>
                 <div class="demand-mask-box">
                   <h4>{{item.demandTitle}}<a :href="`${baseUrl}/${item.demandHref}`"><span>了解详情</span><i></i></a></h4>
@@ -127,7 +129,7 @@
           </li>
           <li>
             <div>
-              <span><img :src="choseImg3" alt="可靠的开发技术" style="margin-top: 65px;"/></span>
+              <span><img :src="choseImg3" alt="可靠的开发技术"/></span>
               <h5>可靠的开发技术</h5>
             </div>
           </li>
@@ -142,8 +144,8 @@
       </div>
     </div>
 
-    <!-- 新闻资讯 -->
-    <div class="client-news-information">
+    <!-- 新闻资讯 PC-->
+    <div class="client-news-information mta-hidden-xs">
       <h4 class="client-title">新闻资讯</h4>
       <div class="client-container">
           <div class="industry-information-box">
@@ -168,6 +170,23 @@
 
     </div>
 
+    <!-- 新闻资讯 手机-->
+    <div class="client-newsInfo-phone mta-hidden-sm">
+      <h4 class="client-title">新闻资讯</h4>
+      <el-carousel :interval="40000000" type="card" height="300px" indicator-position="none" arrow="never">
+        <el-carousel-item v-for="(item,index) in topCarousels" :key="index" class="el-row">
+          <img :src="item.pic" alt="新闻资讯"  @click="checkInfo(item)"/>
+          <div class="newsInfo-card-content"  @click="checkInfo(item)">
+            <h4>{{ item.title }}<i></i></h4>
+            <span>{{ item.yyyy }}{{ item.mmdd }}</span>
+            <p>{{ item.intro }}</p>
+          </div>
+
+        </el-carousel-item>
+      </el-carousel>
+
+    </div>
+
     <!-- 超过10万家客户的信任之选 -->
     <div class="client-customer-box">
       <div class="client-container">

static/images/client/component/head-btn-icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="svg-icon" style="fill: rgb(0, 102, 204);" viewBox="0 0 24 24" width="30"
+     height="30">
+  <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
+</svg>