首页产品和服务模块开发

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

@@ -246,7 +246,7 @@ 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;
+  @include setFontStyle(16);color: rgba(0,0,0,0.85);letter-spacing: 0;padding-top: 80px;text-align: center;font-weight: bold;
   // head移动端响应式
   @media (max-width: 768px){@include setFontStyle(-4);padding-top: 20px;font-weight: 700;color: rgb(16, 16, 16);}
 }
@@ -262,14 +262,14 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 }
 
 /* 网站通用按钮 */
-.client-default-Btn{display: block;@include setFontStyle(-4);background: #2B5CFD;color: rgba(255, 255, 255, 0.85);border-radius: 4px;transition: .3s all linear;text-align: center;}
-.client-default-Btn:hover{background: #2249C9;cursor: pointer;}
+.client-default-Btn{display: block;@include setFontStyle(-4);background: rgb(0, 174, 186);color: rgba(255, 255, 255, 0.85);border-radius: 4px;transition: .3s all linear;text-align: center;}
+.client-default-Btn:hover{background: #02AABA;cursor: pointer;}
 // 白色
-.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{display: block;@include setFontStyle(-4);background: #fff;color: rgb(0, 174, 186);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;
+  width: 238px;height: 40px;line-height: 40px;margin: 40px auto 0;display: block;@include setFontStyle(-4);background: rgb(0, 174, 186);
   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;}
 }
@@ -571,41 +571,42 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 }
 // 产品和服务
 .products-services-box{
-    width: 100%;display: inline-block;
+    width: 100%;display: flex;justify-content: space-between;align-items: center;margin-bottom: 100px;
     // 头部图片
-    img{width: 640px;height: 485px;float: right;}
+    .el-carousel{width: 560px;height: 379px;flex-shrink: 0;}
+    .el-carousel__container{height: 379px;}
+    .cpfw-img-box{width: 100%;height: 379px;display: block;background-position: center;background-repeat: no-repeat;background-size: cover;}
 
     // 内容区域
     .products-services-content{
       width: 500px;
-      float: right;
-      padding: 110px 12px 0;
+      padding: 0 12px;
       box-sizing: border-box;
       margin: 0 20px;
       @include setFontStyle(-6);
-      h5{@include setFontStyle(4);color: rgba(0,0,0,0.85);}
+      h5{@include setFontStyle(4);color: rgba(0,0,0,0.85);margin-bottom: 32px;font-weight: bold;}
       i{width:50px;height:5px;display: block;background: #3e7ce7;margin: 24px 0;}
-      p{line-height: 24px;color: rgba(0,0,0,0.65);margin-bottom: 56px;text-align: justify;}
+      p{line-height: 24px;color:rgb(16, 16, 16);margin-bottom: 56px;text-align: justify;font-weight: bold;}
       .p-before-circle{margin-bottom: 6px;}
       .p-before-circle:before{
         content: '';
-        width: 6px;
-        height: 6px;
+        width: 8px;
+        height: 8px;
         display: inline-block;
-        border-radius: 3px;
+        border-radius: 4px;
         margin-right: 8px;
-        background: #3e7ce7;
+        background: rgb(0, 174, 186);
         vertical-align: middle;
       }
-      .client-btn-box{margin: 40px 0}
-      .client-default-Btn,.client-default-white-Btn{width: 150px;height: 40px;line-height: 40px;display:inline-block;background: #3e7ce7;border: 1px solid #3e7ce7;box-sizing: border-box;}
-      .client-default-white-Btn{background: #fff;color: #3e7ce7;}
+      .client-btn-box{margin-top: 40px;}
+      .client-default-Btn,.client-default-white-Btn{width: 150px;height: 40px;line-height: 40px;display:inline-block;background: rgb(0, 174, 186);border: 1px solid rgb(0, 174, 186);box-sizing: border-box;}
+      .client-default-white-Btn{background: #fff;color: rgb(0, 174, 186);}
       a,div.client-default-Btn{margin-right: 24px}
-      span.client-default-Btn{background: #fff;color: #3e7ce7;margin-right: 0;}
+      span.client-default-Btn{background: #fff;color: rgb(0, 174, 186);margin-right: 0;}
     }
   @media (max-width: 768px){
     // 头部图片
-    img{width: 100%;height: auto;float: none;}
+    .el-carousel{width: 100%;height: auto;float: none;}
     // 内容区域
     .products-services-content{
       width: 100%;float: none;padding: 0 10px;margin: 0;
@@ -619,12 +620,7 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
     }
   }
 }
-.products-contrary-box{
-  // 头部图片
-  img{float: left;}
-  // 内容区域
-  .products-services-content{float: right;}
-}
+.products-contrary-box{flex-direction: row-reverse;}
 // 考试平台和培训平台样式--多下边线
 .platform-products-services{
   li:not(:last-child){border-bottom:1px solid #eee; }

pages/index.vue

@@ -33,46 +33,6 @@
       </div>
     </div>
 
-    <!-- 产品和服务 -->
-    <div class="client-products-services">
-      <div class="client-container">
-        <h4 class="client-title">产品和服务</h4>
-        <div class="products-services-box">
-          <img :src="productsImg1" alt="易用/稳定/高效的在线考试系统" />
-          <div class="products-services-content">
-              <h5>易用/稳定/高效的在线考试系统</h5>
-              <i></i>
-              <p class="p-before-circle">支持多端口多平台在线考试，与钉钉、微信、飞书等平台无缝对接</p>
-              <p class="p-before-circle">支持答题前人脸身份核验、禁止切屏等智能防作弊技术保障每场考试的公平</p>
-              <p class="p-before-circle">拥有丰富细致的考试管理功能，让企业轻松应对各种类型考试需求</p>
-              <p class="p-before-circle">系统性能稳定，高并发，支持万人同时在线进行考试</p>
-              <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial(1)">免费试用</div><span  class="client-default-Btn" @click="goExamPage">了解详情</span></div>
-          </div>
-        </div>
-        <div class="products-services-box products-contrary-box">
-            <img :src="productsImg2" alt="一体化/全场景的在线培训学习系统" />
-            <div class="products-services-content">
-              <h5>一体化/全场景的在线培训学习系统</h5>
-              <i></i>
-              <p class="p-before-circle">支持电脑端、移动端随时随地在线培训学习、考试，从而不再受时间地点的约束</p>
-              <p class="p-before-circle">支持在线课程、直播教学、评论点赞、互动答题等强大的培训功能</p>
-              <p class="p-before-circle">标准化学习，支持课程、学时、学分、考试、练习、证书等标准化统一</p>
-              <p class="p-before-circle">多维度数据统计，深层分析学情，帮助企业实现人才发掘、测评、培养、考核、任用一体化</p>
-              <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial(2)">免费试用</div><span class="client-default-Btn" @click="goPeixunPage">了解详情</span></div>
-            </div>
-        </div>
-        <div class="products-services-box">
-            <img :src="productsImg3" alt="数字课程开发服务" />
-            <div class="products-services-content">
-              <h5>数字课程开发服务</h5>
-              <i></i>
-              <p>在线学习的成功与否，很大程度上取决于课程内容的质量，也就是常说的“内容为王”。栋科软件凭借优秀的课程开发团队为企业事业单位、院校教育、医疗、金融、零售连锁行业、汽车行业、餐饮等12大行业定制开发了上万门数字课程。</p>
-              <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>
-    </div>
-
     <!-- 行业学习需求 -->
     <div class="client-demand-box">
       <div class="client-container">
@@ -116,6 +76,65 @@
       </div>
     </div>
 
+    <!-- 产品和服务 -->
+    <div class="client-products-services">
+      <div class="client-container">
+        <h4 class="client-title">产品和服务</h4>
+        <div class="products-services-box products-contrary-box">
+          <el-carousel arrow="never" indicator-position="none">
+            <el-carousel-item v-for="(item,index) in cpfwKaoshiList" :key="index">
+              <div :style="{backgroundImage: 'url(' + item.imgUrl + ')'}" class="cpfw-img-box"></div>
+            </el-carousel-item>
+          </el-carousel>
+          <div class="products-services-content">
+              <h5>智能稳定的在线考试系统</h5>
+              <p class="p-before-circle">人员管理：支持手动、批量导入人员及部门多层级管理功能，解决企业人员多且分散的问题</p>
+              <p class="p-before-circle">智能组卷：六大常用题型，批量导入；固定组卷，随机组卷，固定+随机综合组卷，涵盖错题，按难易程度抽题</p>
+              <p class="p-before-circle">节约成本：支持客观题自动判分，主观题后台人工阅卷。有效减少人力成本，提升时间效率，降低费用成本</p>
+              <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial(1)">免费试用</div><span  class="client-default-Btn" @click="goExamPage">了解详情</span></div>
+          </div>
+        </div>
+        <div class="products-services-box">
+          <el-carousel arrow="never" indicator-position="none">
+            <el-carousel-item v-for="(item,index) in cpfwPeixunList" :key="index">
+              <div :style="{backgroundImage: 'url(' + item.imgUrl + ')'}" class="cpfw-img-box"></div>
+            </el-carousel-item>
+          </el-carousel>
+            <div class="products-services-content">
+              <h5>一站式高效的在线培训系统</h5>
+              <p class="p-before-circle">多平台学习：支持电脑端、移动端随时随地在线培训学习、考试，从而不再受时间地点的约束</p>
+              <p class="p-before-circle">标准化学习：支持课程、学时、学分、考试、练习、证书等，让企业培训标准化统一</p>
+              <p class="p-before-circle">大数据分析：深层分析学情，帮助企业实现人才发掘、测评、培养、考核、任用一体化</p>
+              <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial(2)">免费试用</div><span class="client-default-Btn" @click="goPeixunPage">了解详情</span></div>
+            </div>
+        </div>
+        <div class="products-services-box products-contrary-box">
+          <el-carousel arrow="never" indicator-position="none">
+            <el-carousel-item v-for="(item,index) in cpfwSzkfList" :key="index">
+              <div :style="{backgroundImage: 'url(' + item.imgUrl + ')'}" class="cpfw-img-box"></div>
+            </el-carousel-item>
+          </el-carousel>
+            <div class="products-services-content">
+              <h5>数字内容定制开发服务</h5>
+              <p>企业需要定制适合自己的个性化课程，将隐性、零散的企业知识显性化和系统化，使企业多年积累的经验得以有效沉淀和传承。久创锐康，凭借创新的技术、高效的服务响应和强大的战略执行，为客户打造专业优质的课程定制服务</p>
+              <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 class="products-services-box">
+          <el-carousel arrow="never" indicator-position="none">
+            <el-carousel-item v-for="(item,index) in cpfwKczyList" :key="index">
+              <div :style="{backgroundImage: 'url(' + item.imgUrl + ')'}" class="cpfw-img-box"></div>
+            </el-carousel-item>
+          </el-carousel>
+          <div class="products-services-content">
+            <h5>企业通用课程资源方案</h5>
+            <p>基于岗位胜任力模型，久创锐康提供职业素养、领导能力、人力资源、市场营销、行政管理、财务管理、客服服务、产品运营、生产采购，9大模块通用岗位培训方案，满足企业对培训课程资源的应用需求</p>
+            <div class="client-btn-box"><div rel="nofollow" class="client-default-Btn" @click="FreeTrial(2)">免费试用</div><span class="client-default-Btn" @click="goPeixunPage">了解详情</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- 为什么选择我们 -->
     <div class="client-chose-box">
       <div class="client-container">
@@ -303,9 +322,26 @@
         SystemWidthFlag:false,// 判断是否是手机端，默认为false，默认为PC端
         topCarousels2:  [],
         // 产品和服务
-        productsImg1:   require(`~/static/images/client/index/index-products-kaoshi.png`),
-        productsImg2:   require(`~/static/images/client/index/index-products-peixun.png`),
-        productsImg3:   require(`~/static/images/client/index/index-products-kejian.png`),
+        cpfwKaoshiList: [
+        { imgUrl: require(`~/static/images/client/index/kpfw-ks-img1.png`)},
+        { imgUrl: require(`~/static/images/client/index/kpfw-ks-img2.png`) },
+        { imgUrl: require(`~/static/images/client/index/kpfw-ks-img3.png`) },
+      ],
+        cpfwPeixunList: [
+          { imgUrl: require(`~/static/images/client/index/kpfw-px-img1.png`)},
+          { imgUrl: require(`~/static/images/client/index/kpfw-px-img2.png`) },
+          { imgUrl: require(`~/static/images/client/index/kpfw-px-img3.png`) },
+        ],
+        cpfwSzkfList: [
+          { imgUrl: require(`~/static/images/client/index/kpfw-szkf-img1.png`)},
+          { imgUrl: require(`~/static/images/client/index/kpfw-szkf-img2.png`) },
+          { imgUrl: require(`~/static/images/client/index/kpfw-szkf-img3.png`) },
+        ],
+        cpfwKczyList: [
+          { imgUrl: require(`~/static/images/client/index/kpfw-ks-img1.png`)},
+          { imgUrl: require(`~/static/images/client/index/kpfw-ks-img2.png`) },
+          { imgUrl: require(`~/static/images/client/index/kpfw-ks-img3.png`) },
+        ],
         // 为什么选择我们
         choseImg1:   require(`~/static/images/client/index/index-chose-service-icon.png`),
         choseImg2:   require(`~/static/images/client/index/index-chose-system-icon.png`),