update

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

@@ -882,3 +882,249 @@ client-banner-box.client-banner-index {
     }
   }
 }
+
+/***************************** 解决方案 子页面 三个 video *************/
+.client-anli-box {
+  height: 600px;
+
+
+  h4 {
+    font-size: 30px;
+    color: #333;
+    margin-top: 80px;
+    margin-bottom: 40px;
+    font-weight: 800;
+    text-align: center;
+  }
+
+  p {
+    font-size: 18px;
+    font-weight: 500;
+    text-align: center;
+    line-height: 36px;
+    width: 1000px;
+    margin: 0 auto 78px;
+  }
+
+  ul {
+    display: flex;
+
+    li {
+      width: 33%;
+
+      >div {
+        margin-right: 80px;
+      }
+
+      &:last-child {
+        >div {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+
+}
+@media (max-width: 768px) {
+  .client-anli-box {
+    height: 50%;
+    margin-bottom: 10%;
+    h4 {
+      font-size: 18px;
+      color: #333;
+      margin-top: 8%;
+      margin-bottom: 4%;
+      font-weight: 800;
+      text-align: center;
+    }
+
+    p {
+      font-size: 18px;
+      font-weight: 500;
+      text-align: center;
+      line-height: 1.5;
+      width: 100%;
+      margin: 0 auto 5%;
+    }
+
+    ul {
+      display: flex;
+      flex-direction: column;
+
+      li {
+        width: 100%;
+
+        >div {
+          margin-right: 0;
+          margin-bottom: 5%;
+        }
+
+        &:last-child {
+          >div {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+
+  }
+}
+
+/**************************** 解决方案 现状 *************************/
+.client-xianzhuang-box {
+  background-image: url("~static/gangweiIcon/z90.png");
+  width: 100%;
+  height: 560px;
+  margin-top: 150px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+
+  h4 {
+    font-size: 30px;
+    color: #333;
+    margin-top: 120px;
+    margin-bottom: 40px;
+    font-weight: 800;
+    text-align: center;
+  }
+
+  p {
+    font-size: 18px;
+    font-weight: 500;
+    text-align: center;
+    line-height: 36px;
+    width: 1000px;
+    margin: 0 auto;
+  }
+}
+@media (max-width: 768px) {
+  .client-xianzhuang-box {
+    background-image: none;
+    width: 100%;
+    height: 30%;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+
+    h4 {
+      font-size: 18px;
+      color: #333;
+      margin-top: 10%;
+      margin-bottom: 40px;
+      font-weight: 800;
+      text-align: center;
+    }
+
+    p {
+      font-size: 14px;
+      font-weight: 500;
+      text-align: center;
+      line-height: 1.5;
+      width: 100%;
+      margin: 0 auto;
+    }
+  }
+}
+
+/**************************** 解决方案 痛点 ************************/
+.client-tongdian-box {
+  h4 {
+    font-size: 30px;
+    color: #333;
+    margin-top: 120px;
+    margin-bottom: 40px;
+    font-weight: 800;
+    text-align: center;
+  }
+
+  ul {
+    display: flex;
+    justify-content: center;
+
+    li {
+      div {
+        margin: 0 51px 0 0;
+        width: 380px;
+        height: 280px;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        text-align: center;
+
+        i {
+          width: 110px;
+          height: 88px;
+          margin-top: 50px;
+          display: inline-block;
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+        }
+
+        p {
+          text-align: center;
+          color: #fffefe;
+          font-size: 18px;
+          font-weight: 800;
+          line-height: 30px;
+          width: 220px;
+          margin: 20px auto 0;
+        }
+      }
+    }
+  }
+}
+@media (max-width: 768px) {
+  .client-tongdian-box {
+    h4 {
+      font-size: 18px;
+      color: #333;
+      margin-top: 10%;
+      margin-bottom: 3%;
+      font-weight: 800;
+      text-align: center;
+    }
+
+    ul {
+      display: flex;
+      flex-direction: column;
+
+      li {
+        div {
+          margin: 0 20px 0 0;
+          width: 100%;
+          height: auto;
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+          text-align: center;
+          display: flex;
+          justify-content: flex-start;
+
+          i {
+            width: 90px;
+            height: 90px;
+            margin-top: 3%;
+            background-color: #ccc;
+            display: inline-block;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+          }
+
+          p {
+            text-align: left;
+            color: #333;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 1.5;
+            width: 80%;
+            margin: 20px 0 0 20px;
+          }
+        }
+      }
+    }
+  }
+
+}

components/common/layout/desComp/desWithCode.vue

@@ -44,7 +44,7 @@ export default {
           break;
         case 'education':
           // 解决方案 -> 教育机构
-        case 'bitAnsSup':
+        case 'biteAndSup':
           // 解决方案 -> 食品餐饮
         case 'erupt':
           // 解决方案 -> 万人高并发

pages/solution/biteAndSup.vue

@@ -4,10 +4,13 @@
     <div class="client-banner-box">
       <div
         :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
-        class="client-platform-banner"></div>
-      <h3>食品餐饮</h3>
-      <p>青谷行业解决方案</p>
-      <onlineInformationBtn />
+        class="client-platform-banner">
+        <div class="client-container">
+          <div class="banner-btn-groups">
+            <onlineInformationBtn class="online-information-btn btn-item" />
+          </div>
+        </div>
+      </div>
     </div>
 
     <!--  视频餐饮培训现状  -->
@@ -19,20 +22,26 @@
     </div>
 
     <!--  视频餐饮培训的痛点  -->
-    <div class="client-tongdian-box">
+    <div class="client-tongdian-box client-container">
       <h4>食品餐饮培训的痛点</h4>
       <ul>
         <li>
-          <i></i>
-          <span>人力成本过大，员工素质普遍较低</span>
+          <div>
+            <i></i>
+            <p>人力成本过大，员工素质普遍较低</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <span>连锁餐饮企业学习资源共享困难，造成浪费</span>
+          <div>
+            <i></i>
+            <p>连锁餐饮企业学习资源共享困难，造成浪费</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <span>餐饮卫生安全隐患问题严重，员工意识不强</span>
+          <div>
+            <i></i>
+            <p>餐饮卫生安全隐患问题严重，员工意识不强</p>
+          </div>
         </li>
       </ul>
     </div>
@@ -48,7 +57,7 @@
     </div>
 
     <!--  金融保险类课程案例  -->
-    <div class="client-anli-box">
+    <div class="client-anli-box client-container">
       <h4>金融保险类课程案例</h4>
       <p>青谷软件可为金融保险行业定制电子化课程</p>
       <ul>
@@ -226,6 +235,108 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+.client-xianzhuang-box {
+  background-image: url("~static/gangweiIcon/z90.png");
+  width: 100%;
+  height: 560px;
+  margin-top: 150px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+
+  h4 {
+    font-size: 30px;
+    color: #333;
+    margin-top: 120px;
+    margin-bottom: 40px;
+    font-weight: 800;
+    text-align: center;
+  }
+
+  p {
+    font-size: 18px;
+    font-weight: 500;
+    text-align: center;
+    line-height: 36px;
+    width: 1000px;
+    margin: 0 auto;
+  }
+}
+
+.client-tongdian-box {
+  h4 {
+    font-size: 30px;
+    color: #333;
+    margin-top: 120px;
+    margin-bottom: 40px;
+    font-weight: 800;
+    text-align: center;
+  }
+
+  ul {
+    display: flex;
+    justify-content: center;
+
+    li {
+      div {
+        margin: 0 51px 0 0;
+        width: 380px;
+        height: 280px;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        text-align: center;
+
+        i {
+          width: 110px;
+          height: 88px;
+          margin-top: 50px;
+          display: inline-block;
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+        }
+
+        p {
+          text-align: center;
+          color: #fffefe;
+          font-size: 18px;
+          font-weight: 800;
+          line-height: 30px;
+          width: 220px;
+          margin: 20px auto 0;
+        }
+      }
+      &:nth-child(1) {
+        div {
+          background-image: url("~static/gangweiIcon/z91.png");
+
+          i {
+            background-image: url('~static/gangweiIcon/z97.png');
+          }
+        }
+      }
+      &:nth-child(2) {
+        div {
+          background-image: url("~static/gangweiIcon/z92.png");
+          i {
+            background-image: url('~static/gangweiIcon/z102.png');
+          }
+        }
+      }
+      &:nth-child(3) {
+        div {
+          background-image: url("~static/gangweiIcon/z93.png");
+          i {
+            background-image: url('~static/gangweiIcon/z101.png');
+          }
+        }
+      }
+    }
+  }
+}
+
 .platform-products-services {
   h4 {
     font-size: 30px;
@@ -238,4 +349,113 @@ export default {
     margin-top: 50px;
   }
 }
+
+
+@media (max-width: 768px) {
+
+  .client-xianzhuang-box {
+    background-image: none;
+    width: 100%;
+    height: 30%;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+
+    h4 {
+      font-size: 18px;
+      color: #333;
+      margin-top: 10%;
+      margin-bottom: 40px;
+      font-weight: 800;
+      text-align: center;
+    }
+
+    p {
+      font-size: 14px;
+      font-weight: 500;
+      text-align: center;
+      line-height: 1.5;
+      width: 100%;
+      margin: 0 auto;
+    }
+  }
+
+  .client-tongdian-box {
+    h4 {
+      font-size: 18px;
+      color: #333;
+      margin-top: 10%;
+      margin-bottom: 3%;
+      font-weight: 800;
+      text-align: center;
+    }
+
+    ul {
+      display: flex;
+      flex-direction: column;
+
+      li {
+        div {
+          margin: 0 20px 0 0;
+          width: 100%;
+          height: auto;
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+          text-align: center;
+          display: flex;
+          justify-content: flex-start;
+
+          i {
+            width: 90px;
+            height: 90px;
+            margin-top: 3%;
+            background-color: #ccc;
+            display: inline-block;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+          }
+
+          p {
+            text-align: left;
+            color: #333;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 1.5;
+            width: 80%;
+            margin: 20px 0 0 20px;
+          }
+        }
+        &:nth-child(1) {
+          div {
+            background-image: none;
+
+            i {
+              background-image: url('~static/gangweiIcon/z97.png');
+            }
+          }
+        }
+        &:nth-child(2) {
+          div {
+            background-image: none;
+            i {
+              background-image: url('~static/gangweiIcon/z102.png');
+            }
+          }
+        }
+        &:nth-child(3) {
+          div {
+            background-image: none;
+            i {
+              background-image: url('~static/gangweiIcon/z101.png');
+            }
+          }
+        }
+      }
+    }
+  }
+
+
+}
 </style>

pages/solution/education.vue

@@ -4,10 +4,13 @@
     <div class="client-banner-box">
       <div
         :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
-        class="client-platform-banner"></div>
-      <h3>教育机构</h3>
-      <p>青谷行业解决方案</p>
-      <onlineInformationBtn />
+        class="client-platform-banner">
+        <div class="client-container">
+          <div class="banner-btn-groups">
+            <onlineInformationBtn class="online-information-btn btn-item" />
+          </div>
+        </div>
+      </div>
     </div>
 
     <!--  教育机构培训现状  -->
@@ -20,19 +23,27 @@
     </div>
 
     <!--  教育机构培训痛点  -->
-    <div class="client-tongdian-box">
+    <div class="client-tongdian-box client-container">
       <ul>
         <li>
-          <i></i>
-          <p>学员分散，来源各异，组织通过的学习与考试非常困哪</p>
+          <div>
+            <i></i>
+            <p>学员分散，来源各异，组织通过的学习与考试非常困哪</p>
+          </div>
+
         </li>
         <li>
-          <i></i>
-          <p>学员学历层次不同，不能按照常规的年纪、班级等方式划分</p>
+          <div>
+            <i></i>
+            <p>学员学历层次不同，不能按照常规的年纪、班级等方式划分</p>
+          </div>
+
         </li>
         <li>
-          <i></i>
-          <p>老师与学员之间缺乏有效的沟通，教学成果较难把控</p>
+          <div>
+            <i></i>
+            <p>老师与学员之间缺乏有效的沟通，教学成果较难把控</p>
+          </div>
         </li>
       </ul>
     </div>
@@ -49,7 +60,7 @@
 
 
     <!--  教育培训类型课程案例  -->
-    <div class="client-anli-box">
+    <div class="client-anli-box client-container">
       <h4>教育培训类课程案例</h4>
       <p>青谷软件可为教育培训行业定制电子化课程</p>
       <ul>
@@ -219,6 +230,108 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+  .client-xianzhuang-box {
+  background-image: url("~static/gangweiIcon/z90.png");
+  width: 100%;
+  height: 560px;
+  margin-top: 150px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+
+  h4 {
+    font-size: 30px;
+    color: #333;
+    margin-top: 120px;
+    margin-bottom: 40px;
+    font-weight: 800;
+    text-align: center;
+  }
+
+  p {
+    font-size: 18px;
+    font-weight: 500;
+    text-align: center;
+    line-height: 36px;
+    width: 1000px;
+    margin: 0 auto;
+  }
+}
+
+  .client-tongdian-box {
+    h4 {
+      font-size: 30px;
+      color: #333;
+      margin-top: 120px;
+      margin-bottom: 40px;
+      font-weight: 800;
+      text-align: center;
+    }
+
+    ul {
+      display: flex;
+      justify-content: center;
+
+      li {
+        div {
+          margin: 0 51px 0 0;
+          width: 380px;
+          height: 280px;
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+          text-align: center;
+
+          i {
+            width: 110px;
+            height: 88px;
+            margin-top: 50px;
+            display: inline-block;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+          }
+
+          p {
+            text-align: center;
+            color: #fffefe;
+            font-size: 18px;
+            font-weight: 800;
+            line-height: 30px;
+            width: 220px;
+            margin: 20px auto 0;
+          }
+        }
+        &:nth-child(1) {
+          div {
+            background-image: url("~static/gangweiIcon/z91.png");
+
+            i {
+              background-image: url('~static/gangweiIcon/z97.png');
+            }
+          }
+        }
+        &:nth-child(2) {
+          div {
+            background-image: url("~static/gangweiIcon/z92.png");
+            i {
+              background-image: url('~static/gangweiIcon/z103.png');
+            }
+          }
+        }
+        &:nth-child(3) {
+          div {
+            background-image: url("~static/gangweiIcon/z93.png");
+            i {
+              background-image: url('~static/gangweiIcon/z104.png');
+            }
+          }
+        }
+      }
+    }
+  }
+
   .platform-products-services {
       h4 {
         font-size: 30px;
@@ -231,4 +344,111 @@ export default {
       margin-top: 50px;
     }
   }
+
+  @media (max-width: 768px) {
+
+    .client-xianzhuang-box {
+      background-image: none;
+      width: 100%;
+      height: 30%;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+
+      h4 {
+        font-size: 18px;
+        color: #333;
+        margin-top: 10%;
+        margin-bottom: 40px;
+        font-weight: 800;
+        text-align: center;
+      }
+
+      p {
+        font-size: 14px;
+        font-weight: 500;
+        text-align: center;
+        line-height: 1.5;
+        width: 100%;
+        margin: 0 auto;
+      }
+    }
+
+    .client-tongdian-box {
+      h4 {
+        font-size: 18px;
+        color: #333;
+        margin-top: 10%;
+        margin-bottom: 3%;
+        font-weight: 800;
+        text-align: center;
+      }
+
+      ul {
+        display: flex;
+        flex-direction: column;
+
+        li {
+          div {
+            margin: 0 20px 0 0;
+            width: 100%;
+            height: auto;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+            text-align: center;
+            display: flex;
+            justify-content: flex-start;
+
+            i {
+              width: 90px;
+              height: 90px;
+              margin-top: 3%;
+              background-color: #ccc;
+              display: inline-block;
+              background-size: contain;
+              background-repeat: no-repeat;
+              background-position: center;
+            }
+
+            p {
+              text-align: left;
+              color: #333;
+              font-size: 14px;
+              font-weight: 500;
+              line-height: 1.5;
+              width: 80%;
+              margin: 20px 0 0 20px;
+            }
+          }
+          &:nth-child(1) {
+            div {
+              background-image: none;
+
+              i {
+                background-image: url('~static/gangweiIcon/z97.png');
+              }
+            }
+          }
+          &:nth-child(2) {
+            div {
+              background-image: none;
+              i {
+                background-image: url('~static/gangweiIcon/z103.png');
+              }
+            }
+          }
+          &:nth-child(3) {
+            div {
+              background-image: none;
+              i {
+                background-image: url('~static/gangweiIcon/z104.png');
+              }
+            }
+          }
+        }
+      }
+    }
+
+  }
 </style>

pages/solution/energy.vue

@@ -4,10 +4,13 @@
     <div class="client-banner-box">
       <div
         :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
-        class="client-platform-banner"></div>
-      <h3>能源化工</h3>
-      <p>青谷行业解决方案</p>
-      <onlineInformationBtn />
+        class="client-platform-banner">
+        <div class="client-container">
+          <div class="banner-btn-groups">
+            <onlineInformationBtn class="online-information-btn btn-item" />
+          </div>
+        </div>
+      </div>
     </div>
 
     <!--  能源化工培训现状  -->
@@ -19,19 +22,28 @@
     </div>
 
     <!--  能源化工培训痛点  -->
-    <div class="client-tongdian-box">
+    <div class="client-tongdian-box client-container">
+      <h4>能源化工培训痛点</h4>
       <ul>
         <li>
-          <i></i>
-          <p>老员工离职，带走工作经验，新人重新摸索经验</p>
+          <div>
+            <i></i>
+            <p>老员工离职，带走工作经验，新人重新摸索经验</p>
+          </div>
+
         </li>
         <li>
-          <i></i>
-          <p>员工数量庞大，组织培训考核的成本高昂</p>
+          <div>
+            <i></i>
+            <p>员工数量庞大，组织培训考核的成本高昂</p>
+          </div>
+
         </li>
         <li>
-          <i></i>
-          <p>培训体系不健全，没有形成培养学习者的长效机制</p>
+          <div>
+            <i></i>
+            <p>培训体系不健全，没有形成培养学习者的长效机制</p>
+          </div>
         </li>
       </ul>
     </div>
@@ -47,7 +59,7 @@
     </div>
 
     <!--  能源化工类课程案例  -->
-    <div class="client-anli-box">
+    <div class="client-anli-box client-container">
       <h4>能源化工类课程案例</h4>
       <p>青谷软件可为能源化工行业定制电子化课程</p>
       <ul>
@@ -217,6 +229,39 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+.client-tongdian-box {
+  ul {
+    li {
+      &:nth-child(1) {
+        div {
+          background-image: url("~static/gangweiIcon/z91.png");
+
+          i {
+            background-image: url('~static/gangweiIcon/z97.png');
+          }
+        }
+      }
+      &:nth-child(2) {
+        div {
+          background-image: url("~static/gangweiIcon/z92.png");
+          i {
+            background-image: url('~static/gangweiIcon/z98.png');
+          }
+        }
+      }
+      &:nth-child(3) {
+        div {
+          background-image: url("~static/gangweiIcon/z93.png");
+          i {
+            background-image: url('~static/gangweiIcon/z99.png');
+          }
+        }
+      }
+    }
+  }
+}
+
 .platform-products-services {
   h4 {
     font-size: 30px;
@@ -229,4 +274,40 @@ export default {
     margin-top: 50px;
   }
 }
+
+@media (max-width: 768px) {
+
+  .client-tongdian-box {
+    ul {
+
+      li {
+        &:nth-child(1) {
+          div {
+            background-image: none;
+
+            i {
+              background-image: url('~static/gangweiIcon/z97.png');
+            }
+          }
+        }
+        &:nth-child(2) {
+          div {
+            background-image: none;
+            i {
+              background-image: url('~static/gangweiIcon/z98.png');
+            }
+          }
+        }
+        &:nth-child(3) {
+          div {
+            background-image: none;
+            i {
+              background-image: url('~static/gangweiIcon/z99.png');
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

pages/solution/erupt.vue

@@ -4,10 +4,13 @@
     <div class="client-banner-box">
       <div
         :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
-        class="client-platform-banner"></div>
-      <h3>万人在线，超高并发</h3>
-      <p>青谷为你提供大规模培训、考试优质解决方案</p>
-      <onlineInformationBtn myType="2" />
+        class="client-platform-banner">
+        <div class="client-container">
+          <div class="banner-btn-groups left">
+            <onlineInformationBtn class="online-information-btn btn-item" />
+          </div>
+        </div>
+      </div>
     </div>
 
 
@@ -201,6 +204,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.client-banner-box div.client-platform-banner {
+  .banner-btn-groups.left {
+    left: 255px;
+    top: 500px;
+  }
+}
+
 .client-suijizujuan-box {
   h4 {
     font-size: 30px;
@@ -211,4 +221,27 @@ export default {
     text-align: center;
   }
 }
+
+.client-description-box {
+  width: 100%;
+  height: 360px;
+  background-image: url("~static/codeImage/code-bj01.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  padding: 80px 0 0 0;
+  margin: 0 auto;
+  text-align: center;
+
+  p {
+    color: #fff;
+    font-size: 26px;
+    font-weight: 800;
+    text-align: center;
+    width: 1000px;
+    line-height: 1.5;
+    text-align: center;
+    margin: 0 auto 30px;
+  }
+}
+
 </style>

pages/solution/exam.vue

@@ -276,4 +276,23 @@ export default {
   }
 }
 
+.client-xuanchuan-box {
+  width: 100%;
+  height: 360px;
+  background-image: url("~static/codeImage/code-bj01.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  padding: 110px 0 0 0;
+  margin: 0 auto;
+  text-align: center;
+
+  h4 {
+    color: #fff;
+    font-size: 40px;
+    font-weight: 800;
+    text-align: center;
+    margin-bottom: 30px;
+  }
+}
+
 </style>

pages/solution/financial.vue

@@ -4,10 +4,13 @@
     <div class="client-banner-box">
       <div
         :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
-        class="client-platform-banner"></div>
-      <h3>金融保险</h3>
-      <p>青谷行业解决方案</p>
-      <onlineInformationBtn />
+        class="client-platform-banner">
+        <div class="client-container">
+          <div class="banner-btn-groups">
+            <onlineInformationBtn class="online-information-btn btn-item" />
+          </div>
+        </div>
+      </div>
     </div>
 
     <!--  金融保险培训现状  -->
@@ -19,20 +22,26 @@
     </div>
 
     <!--  金融保险培训痛点  -->
-    <div class="client-tongdian-box">
+    <div class="client-tongdian-box client-container">
       <h4>金融保险培训痛点</h4>
       <ul>
         <li>
-          <i></i>
-          <p>产品随政策变动、更新频率高，要求员工掌握最新工作政策</p>
+          <div>
+            <i></i>
+            <p>产品随政策变动、更新频率高，要求员工掌握最新工作政策</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <p>一线员工数量庞大，组织培训考核极难并且成本高昂</p>
+          <div>
+            <i></i>
+            <p>一线员工数量庞大，组织培训考核极难并且成本高昂</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <p>人数太多，及时勉强组织培训考核，也很难管控</p>
+          <div>
+            <i></i>
+            <p>人数太多，及时勉强组织培训考核，也很难管控</p>
+          </div>
         </li>
       </ul>
     </div>
@@ -48,7 +57,7 @@
     </div>
 
     <!--  金融保险类课程案例  -->
-    <div class="client-anli-box">
+    <div class="client-anli-box client-container">
       <h4>金融保险类课程案例</h4>
       <p>青谷软件可为金融保险行业定制电子化课程</p>
       <ul>
@@ -220,6 +229,39 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+.client-tongdian-box {
+  ul {
+    li {
+      &:nth-child(1) {
+        div {
+          background-image: url("~static/gangweiIcon/z91.png");
+
+          i {
+            background-image: url('~static/gangweiIcon/z100.png');
+          }
+        }
+      }
+      &:nth-child(2) {
+        div {
+          background-image: url("~static/gangweiIcon/z92.png");
+          i {
+            background-image: url('~static/gangweiIcon/z98.png');
+          }
+        }
+      }
+      &:nth-child(3) {
+        div {
+          background-image: url("~static/gangweiIcon/z93.png");
+          i {
+            background-image: url('~static/gangweiIcon/z99.png');
+          }
+        }
+      }
+    }
+  }
+}
+
 .platform-products-services {
   h4 {
     font-size: 30px;
@@ -232,4 +274,41 @@ export default {
     margin-top: 50px;
   }
 }
+
+
+@media (max-width: 768px) {
+
+
+  .client-tongdian-box {
+    ul {
+      li {
+        &:nth-child(1) {
+          div {
+            background-image: none;
+
+            i {
+              background-image: url('~static/gangweiIcon/z100.png');
+            }
+          }
+        }
+        &:nth-child(2) {
+          div {
+            background-image: none;
+            i {
+              background-image: url('~static/gangweiIcon/z98.png');
+            }
+          }
+        }
+        &:nth-child(3) {
+          div {
+            background-image: none;
+            i {
+              background-image: url('~static/gangweiIcon/z99.png');
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

pages/solution/government.vue

@@ -4,38 +4,49 @@
     <div class="client-banner-box">
       <div
         :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
-        class="client-platform-banner"></div>
-      <h3>政府机构</h3>
-      <p>青谷行业解决方案</p>
-      <onlineInformationBtn />
+        class="client-platform-banner">
+        <div class="client-container">
+          <div class="banner-btn-groups">
+            <onlineInformationBtn class="online-information-btn btn-item" />
+          </div>
+        </div>
+      </div>
     </div>
 
     <!--  政府机构培训现状  -->
     <div class="client-xianzhuang-box">
-      <h4>政府机构培训现状</h4>
-      <p>在政府机构中比较常见的培训项目通常就是党建方向 的内容，学习党史党务，会议精神、法律法规等是每一个中共党员的基本修养。政府机构的成员大多都是中共党员，势必要以身作则。
-      作为国家和人民的领导者，政府机构的党员们需要专注于习近平新时代中国特色社会主义的思想党建，做到和人民心心相印，才能更好地为人民服务。
-      </p>
+      <div class="client-container">
+        <h4>政府机构培训现状</h4>
+        <p>在政府机构中比较常见的培训项目通常就是党建方向 的内容，学习党史党务，会议精神、法律法规等是每一个中共党员的基本修养。政府机构的成员大多都是中共党员，势必要以身作则。
+          作为国家和人民的领导者，政府机构的党员们需要专注于习近平新时代中国特色社会主义的思想党建，做到和人民心心相印，才能更好地为人民服务。
+        </p>
+      </div>
     </div>
 
     <!--  政府机构培训痛点  -->
-    <div class="client-tongdian-box">
+    <div class="client-tongdian-box client-container">
       <h4>政府机构培训痛点</h4>
       <ul>
         <li>
-          <i></i>
-          <p>需要学习的文件材料较多，
-          不易把握学习要点</p>
+          <div>
+            <i></i>
+            <p>需要学习的文件材料较多，
+              不易把握学习要点</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <p>从即从公务员到各级干部，政府部门成员大多数勤于政务，
-            没有稳定的学习时间</p>
+          <div>
+            <i></i>
+            <p>从即从公务员到各级干部，政府部门成员大多数勤于政务，
+              没有稳定的学习时间</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <p>各级政府的所在地各不相同，
-            很难统一组织学习党建材料</p>
+          <div>
+            <i></i>
+            <p>各级政府的所在地各不相同，
+              很难统一组织学习党建材料</p>
+          </div>
         </li>
       </ul>
     </div>
@@ -52,18 +63,24 @@
 
 
     <!--  党建类课程案例  -->
-    <div class="client-anli-box">
+    <div class="client-anli-box client-container">
       <h4>党建类课程案例</h4>
       <p>青谷软件可为政府机构定制电子化课程</p>
       <ul>
         <li>
-          <video-card :card-data="{title: 'FLASH动画课程', url: ''}" @card-click="showVideo"></video-card>
+          <div>
+            <video-card :card-data="{title: 'FLASH动画课程', url: ''}" @card-click="showVideo"></video-card>
+          </div>
         </li>
         <li>
-          <video-card :card-data="{title: '视频课程', url: ''}" @card-click="showVideo"></video-card>
+          <div>
+            <video-card :card-data="{title: '视频课程', url: ''}" @card-click="showVideo"></video-card>
+          </div>
         </li>
         <li>
-          <video-card :card-data="{title: '名师讲堂', url: ''}" @card-click="showVideo"></video-card>
+          <div>
+            <video-card :card-data="{title: '名师讲堂', url: ''}" @card-click="showVideo"></video-card>
+          </div>
         </li>
       </ul>
     </div>
@@ -220,14 +237,88 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+
+.client-tongdian-box {
+  ul {
+    li {
+      &:nth-child(1) {
+        div {
+          background-image: url("~static/gangweiIcon/z91.png");
+
+          i {
+            background-image: url('~static/gangweiIcon/z94.png');
+          }
+        }
+      }
+      &:nth-child(2) {
+        div {
+          background-image: url("~static/gangweiIcon/z92.png");
+          i {
+            background-image: url('~static/gangweiIcon/z95.png');
+          }
+        }
+      }
+      &:nth-child(3) {
+        div {
+          background-image: url("~static/gangweiIcon/z93.png");
+          i {
+            background-image: url('~static/gangweiIcon/z96.png');
+          }
+        }
+      }
+    }
+  }
+}
+
 .client-fangan-box {
   h4 {
     font-size: 30px;
-    font-weight: 800;
     color: #333;
-    margin-top: 140px;
-    margin-bottom: 120px;
+    margin-top: 120px;
+    margin-bottom: 40px;
+    font-weight: 800;
     text-align: center;
   }
 }
+
+
+
+@media (max-width: 768px) {
+
+
+  .client-tongdian-box {
+
+    ul {
+      li {
+        &:nth-child(1) {
+          div {
+            background-image: none;
+
+            i {
+              background-image: url('~static/gangweiIcon/z94.png');
+            }
+          }
+        }
+        &:nth-child(2) {
+          div {
+            background-image: none;
+            i {
+              background-image: url('~static/gangweiIcon/z95.png');
+            }
+          }
+        }
+        &:nth-child(3) {
+          div {
+            background-image: none;
+            i {
+              background-image: url('~static/gangweiIcon/z96.png');
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 </style>

pages/solution/medical.vue

@@ -4,10 +4,13 @@
     <div class="client-banner-box">
       <div
         :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
-        class="client-platform-banner"></div>
-      <h3>交通运输</h3>
-      <p>青谷行业解决方案</p>
-      <onlineInformationBtn />
+        class="client-platform-banner">
+        <div class="client-container">
+          <div class="banner-btn-groups">
+            <onlineInformationBtn class="online-information-btn btn-item" />
+          </div>
+        </div>
+      </div>
     </div>
 
     <!--  医疗行业培训现状  -->
@@ -20,25 +23,30 @@
     </div>
 
     <!--  交通运输培训痛点  -->
-    <div class="client-tongdian-box">
+    <div class="client-tongdian-box client-container">
       <h4>医疗行业培训痛点</h4>
       <ul>
         <li>
-          <i></i>
-          <p>需要学习的文件材料较多，不易把握学习要点</p>
+          <div>
+            <i></i>
+            <p>需要学习的文件材料较多，不易把握学习要点</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <p>无法把有价值的提问保存下来，给未来其他用户提供参考</p>
+          <div>
+            <i></i>
+            <p>无法把有价值的提问保存下来，给未来其他用户提供参考</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <p>还在使用传统面授培训，无法组织更多的人一起听课，传播面太小</p>
+          <div>
+            <i></i>
+            <p>还在使用传统面授培训，无法组织更多的人一起听课，传播面太小</p>
+          </div>
         </li>
       </ul>
     </div>
 
-
     <!--  青谷解决方案  -->
     <div class="platform-products-services client-container">
       <h4 class="client-title">青谷解决方案</h4>
@@ -50,7 +58,7 @@
     </div>
 
     <!--  医疗行业类课程案例  -->
-    <div class="client-anli-box">
+    <div class="client-anli-box client-container">
       <h4>医疗行业类课程案例</h4>
       <p>青谷软件可为医疗行业定制电子化课程</p>
       <ul>
@@ -220,6 +228,38 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.client-tongdian-box {
+  ul {
+    li {
+      &:nth-child(1) {
+        div {
+          background-image: url("~static/gangweiIcon/z91.png");
+
+          i {
+            background-image: url('~static/gangweiIcon/z106.png');
+          }
+        }
+      }
+      &:nth-child(2) {
+        div {
+          background-image: url("~static/gangweiIcon/z92.png");
+          i {
+            background-image: url('~static/gangweiIcon/z107.png');
+          }
+        }
+      }
+      &:nth-child(3) {
+        div {
+          background-image: url("~static/gangweiIcon/z93.png");
+          i {
+            background-image: url('~static/gangweiIcon/z104.png');
+          }
+        }
+      }
+    }
+  }
+}
+
 .platform-products-services {
   h4 {
     font-size: 30px;
@@ -232,4 +272,39 @@ export default {
     margin-top: 50px;
   }
 }
+
+@media (max-width: 768px) {
+    .client-tongdian-box {
+      ul {
+
+        li {
+          &:nth-child(1) {
+            div {
+              background-image: none;
+
+              i {
+                background-image: url('~static/gangweiIcon/z97.png');
+              }
+            }
+          }
+          &:nth-child(2) {
+            div {
+              background-image: none;
+              i {
+                background-image: url('~static/gangweiIcon/z98.png');
+              }
+            }
+          }
+          &:nth-child(3) {
+            div {
+              background-image: none;
+              i {
+                background-image: url('~static/gangweiIcon/z99.png');
+              }
+            }
+          }
+        }
+      }
+    }
+}
 </style>

pages/solution/privatization.vue

@@ -4,73 +4,92 @@
     <div class="client-banner-box">
       <div
         :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
-        class="client-platform-banner"></div>
-      <h4>青谷企业私有化部署</h4>
-      <p>专属服务器、数据加密，更安全稳定；独享云服务，速度更快</p>
-      <onlineInformationBtn />
+        class="client-platform-banner">
+        <div class="client-container">
+          <div class="banner-btn-groups left">
+            <onlineInformationBtn class="online-information-btn btn-item" />
+          </div>
+        </div>
+      </div>
     </div>
 
     <!--  私有化部署优势  -->
-    <div class="client-private-youshi">
+    <div class="client-private-youshi client-container">
+
+      <h4>私有化部署优势</h4>
+
       <ul>
         <li>
-          <i></i>
           <div>
-            <h4>数据私密安全</h4>
-            <p>企业级技术框架；数据私有化隔离；数据存储备份机制；算法、秘钥双重保险，数据安全可靠；独享云服务，速度更快，性能更优。</p>
+            <i></i>
+            <div>
+              <h4>数据私密安全</h4>
+              <p>企业级技术框架；数据私有化隔离；数据存储备份机制；算法、秘钥双重保险，数据安全可靠；独享云服务，速度更快，性能更优。</p>
+            </div>
           </div>
         </li>
         <li>
-          <i></i>
           <div>
-            <h4>企业自主掌握</h4>
-            <p>企业可完全自主掌握，轻松实现人员管理、权限管理；账号与席位轻松绑定，入职迅速，离职安全，避免认为数据事故。</p>
+            <i></i>
+            <div>
+              <h4>企业自主掌握</h4>
+              <p>企业可完全自主掌握，轻松实现人员管理、权限管理；账号与席位轻松绑定，入职迅速，离职安全，避免认为数据事故。</p>
+            </div>
           </div>
         </li>
         <li>
-          <i></i>
           <div>
-            <h4>第三方接口对接</h4>
-            <p>支持和第三方OA、HR、ERP、教务系统、微信、钉钉等对接。</p>
+            <i></i>
+            <div>
+              <h4>第三方接口对接</h4>
+              <p>支持和第三方OA、HR、ERP、教务系统、微信、钉钉等对接。</p>
+            </div>
           </div>
         </li>
         <li>
-          <i></i>
           <div>
-            <h4>可定制开发</h4>
-            <p>系统拥有极其强大的扩展技术。在这套扩展技术体系中，企业可以在此基础上定制任意功能，扩充目前的功能架构，满足企业自身发展的需求。</p>
+            <i></i>
+            <div>
+              <h4>可定制开发</h4>
+              <p>系统拥有极其强大的扩展技术。在这套扩展技术体系中，企业可以在此基础上定制任意功能，扩充目前的功能架构，满足企业自身发展的需求。</p>
+            </div>
           </div>
         </li>
       </ul>
     </div>
 
     <!--  私有化部署方案  -->
-    <div class="client-private-fangan">
+    <div class="client-private-fangan client-container">
       <h4>私有化部署解决方案</h4>
-      <div>
-        <span :class="{active: curActive === 1}" @click="curActive === 1">专属服务器部署</span>
-        <span :class="{active: curActive === 2}" @click="curActive === 2">私有服务器部署</span>
+      <div class="private-fangan-nav">
+        <span :class="{active: curActive === 1}" @click="curActive = 1">专属服务器部署</span>
+        <span :class="{active: curActive === 2}" @click="curActive = 2">私有服务器部署</span>
       </div>
 
-      <div v-if="curActive === 1">
-        <img src="#">
+      <div class="private-fangan-content" v-if="curActive === 1">
         <div>
-          <p>将青谷考培系统部署版独立部署到企业专属阿里云/腾讯云服务器中，享受公有云功能与服务的同时，又具备数据隔离的优势，适用于大多数中小型企业。</p>
-          <ul>
-            <li>更易于拓展</li>
-            <li>数据安全可靠</li>
-            <li>降低人工成本，无需运维</li>
-          </ul>
+          <img :src="img1">
+          <div class="left">
+            <p>将青谷考培系统部署版独立部署到企业专属阿里云/腾讯云服务器中，享受公有云功能与服务的同时，又具备数据隔离的优势，适用于大多数中小型企业。</p>
+            <ul>
+              <li>更易于拓展</li>
+              <li>数据安全可靠</li>
+              <li>降低人工成本，无需运维</li>
+            </ul>
+          </div>
         </div>
+
       </div>
-      <div v-if="curActive === 2">
-        <img src="#">
+      <div class="private-fangan-content" v-if="curActive === 2">
         <div>
-          <p>将青谷考陪系统部署版部署到企业内部私有云服务器中，企业完全自主掌握，适用于通信，金融等对数据安全性要求更高的企业。</p>
-          <ul>
-            <li>公司内部局域网加速，编辑访问更丝滑</li>
-            <li>私有服务器企业自主管理，数据物理安全和防泄密风险进一步增强</li>
-          </ul>
+          <img :src="img2">
+          <div class="left">
+            <p>将青谷考陪系统部署版部署到企业内部私有云服务器中，企业完全自主掌握，适用于通信，金融等对数据安全性要求更高的企业。</p>
+            <ul>
+              <li><i></i>公司内部局域网加速，编辑访问更丝滑</li>
+              <li><i></i>私有服务器企业自主管理，数据物理安全和防泄密风险进一步增强</li>
+            </ul>
+          </div>
         </div>
       </div>
 
@@ -134,12 +153,318 @@ export default {
   },
   data() {
     return {
-      curActive: 1
+      curActive: 1,
+      img1: require('~/static/gangweiIcon/z88.png'),
+      img2: require('~/static/gangweiIcon/z89.png'),
     }
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.client-banner-box div.client-platform-banner {
+  .banner-btn-groups.left {
+    left: 255px;
+    top: 500px;
+  }
+}
+
+// 私有化部署优势
+.client-private-youshi {
+  >h4 {
+    font-size: 30px;
+    color: #333;
+    text-align: center;
+    font-weight: 800;
+    margin-top: 110px;
+  }
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 100px;
+
+
+    li {
+      width: 50%;
+
+      >div {
+        box-sizing: border-box;
+        padding: 32px 54px;
+        border: 1px solid #00b96b;
+        border-radius: 10px;
+        margin: 0 47px  38px 0;
+        display: flex;
+        justify-content: flex-start;
+
+        i {
+          width: 92px;
+          height: 92px;
+          display: inline-block;
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+        }
+
+        div {
+          margin-left: 48px;
+          width: 600px;
+          height: 120px;
+
+          h4 {
+            font-size: 24px;
+            font-weight: 800;
+            color: #333;
+            text-align: left;
+          }
+
+          p {
+            font-size: 14px;
+            color: #333;
+            font-weight: 500;
+            line-height: 24px;
+            margin-top: 21px;
+          }
+        }
+      }
+
+      &:nth-child(1) {
+        >div> i {
+          background-image: url("~static/gangweiIcon/z84.png");
+        }
+      }
+      &:nth-child(2) {
+        >div> i {
+          background-image: url("~static/gangweiIcon/z85.png");
+        }
+      }
+      &:nth-child(3) {
+        >div> i {
+          background-image: url("~static/gangweiIcon/z86.png");
+        }
+      }
+      &:nth-child(4) {
+        >div> i {
+          background-image: url("~static/gangweiIcon/z87.png");
+        }
+      }
+    }
+  }
+}
+
+// 私有化部署方案
+.client-private-fangan {
+  margin-top: 180px;
+
+
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 78px;
+  }
+
+  .private-fangan-nav {
+    border-bottom: 1px solid #7cc659;
+    margin: 0 auto;
+    text-align: center;
+
+    span {
+      cursor: pointer;
+      margin-right: 130px;
+      color: #9c9c9c;
+      font-size: 24px;
+      font-weight: 800;
+      opacity: 0.9;
+      margin-bottom: 18px;
+      display: inline-block;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      &.active {
+        color: #333;
+        opacity: 1;
+      }
+    }
+  }
+
+  .private-fangan-content {
+
+    >div {
+      transition: all .5s ease;
+      margin-bottom: 160px;
+      margin-top:  100px;
+      display: flex;
+      img {
+        width: 400px;
+        height: 240px;
+      }
+
+      .left {
+        margin-left: 50px;
+
+        p {
+          font-size: 18px;
+          line-height: 30px;
+          font-weight: 500;
+          color: #333;
+        }
+
+        ul {
+          margin-top: 40px;
+          li {
+            font-size: 18px;
+            font-weight: 500;
+            color: #333;
+            line-height: 30px;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+
+@media (max-width: 768px) {
+
+  .client-private-youshi {
+    >h4 {
+      font-size: 18px;
+      color: #333;
+      text-align: center;
+      font-weight: 800;
+      margin-top: 10%;
+    }
+
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 10%;
+
+
+      li {
+        width: 100%;
+
+        >div {
+          box-sizing: border-box;
+          padding: 8px 14px;
+          border: 1px solid #00b96b;
+          border-radius: 10px;
+          margin: 0 10px 10px 0;
+          display: flex;
+          justify-content: flex-start;
+
+          i {
+            width: 90px;
+            height: 90px;
+            display: inline-block;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+          }
+
+          div {
+            margin-left: 3%;
+            width: 600px;
+            height: 120px;
 
+            h4 {
+              font-size: 18px;
+              font-weight: 800;
+              color: #333;
+              text-align: left;
+            }
+
+            p {
+              font-size: 14px;
+              color: #333;
+              font-weight: 500;
+              line-height: 1.5;
+              margin-top: 5%;
+            }
+          }
+        }
+      }
+    }
+  }
+  .client-private-fangan {
+    margin-top: 10%;
+
+    h4 {
+      font-size: 18px;
+      font-weight: 800;
+      color: #333;
+      text-align: center;
+      margin-bottom: 5%;
+    }
+
+    .private-fangan-nav {
+      border-bottom: 1px solid #7cc659;
+      margin: 0 auto;
+      text-align: center;
+
+      span {
+        cursor: pointer;
+        margin-right: 10%;
+        color: #9c9c9c;
+        font-size: 14px;
+        font-weight: 800;
+        opacity: 0.9;
+        margin-bottom: 18px;
+        display: inline-block;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        &.active {
+          color: #333;
+          opacity: 1;
+        }
+      }
+    }
+
+    .private-fangan-content {
+
+      >div {
+        transition: all .5s ease;
+        margin-bottom: 3%;
+        margin-top:  3%;
+        display: flex;
+        flex-direction: column;
+
+        img {
+          width: 100%;
+          height: 20%;
+          margin-bottom: 10px;
+        }
+
+        .left {
+          margin-left: 3%;
+
+          p {
+            font-size: 14px;
+            line-height: 1.5;
+            font-weight: 500;
+            color: #333;
+          }
+
+          ul {
+            margin-top: 1%;
+            li {
+              font-size: 14px;
+              font-weight: 500;
+              color: #333;
+              line-height: 1.5;
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

pages/solution/transportation.vue

@@ -4,10 +4,13 @@
     <div class="client-banner-box">
       <div
         :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
-        class="client-platform-banner"></div>
-      <h3>交通运输</h3>
-      <p>青谷行业解决方案</p>
-      <onlineInformationBtn />
+        class="client-platform-banner">
+        <div class="client-container">
+          <div class="banner-btn-groups">
+            <onlineInformationBtn class="online-information-btn btn-item" />
+          </div>
+        </div>
+      </div>
     </div>
 
     <!--  交通运输培训现状  -->
@@ -19,20 +22,26 @@
     </div>
 
     <!--  交通运输培训痛点  -->
-    <div class="client-tongdian-box">
+    <div class="client-tongdian-box client-container">
       <h4>交通运输培训痛点</h4>
       <ul>
         <li>
-          <i></i>
-          <p>员工分布各地，常年都在船上车上，集中培训考核非常困哪</p>
+          <div>
+            <i></i>
+            <p>员工分布各地，常年都在船上车上，集中培训考核非常困哪</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <p>老员工离职，带走工作经验，新人重新摸索经验</p>
+          <div>
+            <i></i>
+            <p>老员工离职，带走工作经验，新人重新摸索经验</p>
+          </div>
         </li>
         <li>
-          <i></i>
-          <p>学员学历层次不同，不能按照常规的年纪、班级等方式划分</p>
+          <div>
+            <i></i>
+            <p>学员学历层次不同，不能按照常规的年纪、班级等方式划分</p>
+          </div>
         </li>
       </ul>
     </div>
@@ -56,7 +65,7 @@
     </div>
 
     <!--  交通运输类课程案例  -->
-    <div class="client-anli-box">
+    <div class="client-anli-box client-container">
       <h4>交通运输类课程案例</h4>
       <p>青谷软件可为交通运输行业行业定制电子化课程</p>
       <ul>
@@ -253,6 +262,41 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
+.client-tongdian-box {
+
+  ul {
+
+    li {
+      &:nth-child(1) {
+        div {
+          background-image: url("~static/gangweiIcon/z91.png");
+
+          i {
+            background-image: url('~static/gangweiIcon/z105.png');
+          }
+        }
+      }
+      &:nth-child(2) {
+        div {
+          background-image: url("~static/gangweiIcon/z92.png");
+          i {
+            background-image: url('~static/gangweiIcon/z97.png');
+          }
+        }
+      }
+      &:nth-child(3) {
+        div {
+          background-image: url("~static/gangweiIcon/z93.png");
+          i {
+            background-image: url('~static/gangweiIcon/z103.png');
+          }
+        }
+      }
+    }
+  }
+}
+
 .platform-products-services {
   h4 {
     font-size: 30px;
@@ -265,4 +309,43 @@ export default {
     margin-top: 50px;
   }
 }
+
+
+@media (max-width: 768px) {
+
+
+  .client-tongdian-box {
+    ul {
+      li {
+        &:nth-child(1) {
+          div {
+            background-image: none;
+
+            i {
+              background-image: url('~static/gangweiIcon/z105.png');
+            }
+          }
+        }
+        &:nth-child(2) {
+          div {
+            background-image: none;
+            i {
+              background-image: url('~static/gangweiIcon/z97.png');
+            }
+          }
+        }
+        &:nth-child(3) {
+          div {
+            background-image: none;
+            i {
+              background-image: url('~static/gangweiIcon/z103.png');
+            }
+          }
+        }
+      }
+    }
+  }
+
+
+}
 </style>