update

components/common/layout/desComp/gangweiList.vue

@@ -7,14 +7,14 @@
         <template v-for="(des,ind) in rowList">
           <!--    站位div    -->
           <div v-if="des.type === 'empty'"></div>
-          <iconGangwei v-else  :key="ind" :des="des" :style="iconStylePc"></iconGangwei>
+          <iconGangwei v-else  :key="ind" :des="des" ></iconGangwei>
         </template>
       </div>
       <div class="gangwei-phone-row mta-hidden-sm" :class="rowClassH5"v-for="(rowList,index) in myListH5" :key="`h5${index}`">
         <template  v-for="(des,ind) in rowList">
           <!--    站位div    -->
           <div v-if="des.type === 'empty'"></div>
-          <iconGangwei v-else :key="ind" :des="des" :style="iconStyleH5"></iconGangwei>
+          <iconGangwei v-else :key="ind" :des="des" ></iconGangwei>
         </template>
       </div>
     </div>

nuxt.config.js

@@ -95,7 +95,9 @@ export default {
   build:        {
     transpile: [/^element-ui/],
     // 异步加载样式 默认false
-    extractCSS: true
+    extractCSS: {
+      ignoreOrder: true
+    }
   },
   axios:        {
     // node连接服务器地址（调用后台接口地址）

pages/product/caiWuGuanLi.vue

@@ -5,13 +5,10 @@
       <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>
-      <span>财务部</span>
     </div>
 
     <!--  文本框  -->
-    <div class="client-caiwu-text">
+    <div class="client-caiwu-text client-container">
       财务部主要负责企业的财务管理，主要只能是在本企业一定的整体目标下，
       关于资本的购置，资本的融通和经营中现金流量，以及利润分配的管理。
     </div>
@@ -23,7 +20,7 @@
       <h4>部分课程列表</h4>
       <mtaTable :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
       <div class="btn-groups">
-        <freeTrialBtn myType="kaoshi"/>
+        <freeTrialBtn class="btn-item" myType="kaoshi"/>
         <onlineInformationBtn />
       </div>
     </div>
@@ -158,6 +155,83 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.client-banner-box {
+  width: 100%;
+  height: 736px;
+  .client-platform-banner {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.client-caiwu-text {
+  width: 800px;
+  font-size: 24px;
+  font-weight: 800;
+  line-height: 48px;
+  color: #565656;
+  text-align: center;
+  margin-top: 150px;
+  border: 1px solid #00b96b;
+  padding: 100px;
+  border-radius: 10px;
+}
+
+.platform-course-list {
+
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 68px;
+  }
+
+}
+
+.btn-groups {
+  margin-top: 100px;
+  text-align: center;
+  margin-bottom: 210px;
+
+  .btn-item {
+    margin-right: 20px;
+  }
+}
+
+
+@media (max-width: 768px) {
+
+  .client-caiwu-text {
+    width: 80%;
+    font-size: 12px;
+    font-weight: 800;
+    line-height: 1.5;
+    color: #565656;
+    text-align: center;
+    margin-top: 5%;
+    margin-bottom: 15%;
+    border: none;
+    padding: 0;
+  }
+
+  .platform-course-list {
+    h4 {
+      font-size: 18px;
+      font-weight: 800;
+      color: #333;
+      text-align: center;
+      margin-bottom: 10%;
+      margin-top: 15%;
+    }
+  }
+
+
+  .btn-groups {
+    margin-top: 10%;
+    margin-bottom: 10%;
+  }
+}
 
 </style>

pages/product/chanPinYunYing.vue

@@ -5,28 +5,23 @@
       <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>
-      <span>产品部、运营部</span>
     </div>
     <!--  岗位职责  -->
     <gangwei-list label="岗位职责" :list="gangwei" :pc-num="3" :h5-num="2" :pc-margin="320" :h5-margin="0"></gangwei-list>
 
     <!--  能力提升  -->
-    <div class="client-nengli-box">
+    <div class="client-nengli-box client-container">
       <h4>能力提升</h4>
       <img src="#" alt="能力提升">
     </div>
 
     <!--  部分课程列表  -->
-    <div class="platform-course-list">
+    <div class="platform-course-list client-container">
       <h4>部分课程列表</h4>
       <mtaTable :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
-      <div class="btns-group">
-        <a class="client-default-Btn">
-          <freeTrialBtn myType="kaoshi"/>
-        </a>
-        <onlineInformationBtn class="client-default-Btn"/>
+      <div class="btn-groups">
+        <freeTrialBtn class="btn-item" myType="kaoshi"/>
+        <onlineInformationBtn />
       </div>
     </div>
 
@@ -135,6 +130,75 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.client-banner-box {
+  width: 100%;
+  height: 736px;
+  .client-platform-banner {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.client-nengli-box {
+  margin-bottom: 120px;
+
+  h4 {
+    font-size: 30px;
+    color: #333;
+    font-weight: 800;
+    text-align: center;
+    margin-bottom: 50px;
+  }
+
+  img {
+    height: 100%;
+    width: 330px;
+    text-align: center;
+    margin: 0 auto;
+    display: block;
+  }
+}
+
+.platform-course-list {
+
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 68px;
+  }
+}
+
+.btn-groups {
+  margin-top: 100px;
+  text-align: center;
+  margin-bottom: 210px;
+
+  .btn-item {
+    margin-right: 20px;
+  }
+}
+
+@media (max-width: 768px) {
 
+  .btn-groups {
+    margin-top: 10%;
+    margin-bottom: 10%;
+  }
+  .platform-course-list {
+    h4 {
+      font-size: 18px;
+      font-weight: 800;
+      color: #333;
+      text-align: center;
+      margin-bottom: 10%;
+      margin-top: 15%;
+    }
+  }
+  .client-nengli-box {
+    margin-bottom: 5%;
+  }
+}
 </style>

pages/product/keFuFuWu.vue

@@ -5,29 +5,24 @@
       <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>
-      <span>产品部、运营部</span>
     </div>
 
       <!--  岗位职责  -->
       <gangweiList label="岗位职责" :list="gangwei" :pc-num="3" :h5-num="2"></gangweiList>
 
     <!--  能力提升  -->
-    <div class="client-nengli-box">
+    <div class="client-nengli-box client-container">
       <h4>能力提升</h4>
       <img src="#" alt="能力提升">
     </div>
 
     <!--  部分课程列表  -->
-    <div class="platform-course-list">
+    <div class="platform-course-list client-container">
       <h4>部分课程列表</h4>
       <mtaTable :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
-      <div class="btns-group">
-        <a class="client-default-Btn">
-          <freeTrialBtn myType="kaoshi"/>
-        </a>
-        <onlineInformationBtn class="client-default-Btn"/>
+      <div class="btn-groups">
+        <freeTrialBtn class="btn-item" myType="kaoshi"/>
+        <onlineInformationBtn />
       </div>
     </div>
   </div>
@@ -147,6 +142,75 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.client-banner-box {
+  width: 100%;
+  height: 736px;
+  .client-platform-banner {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.client-nengli-box {
+  margin-bottom: 120px;
+
+  h4 {
+    font-size: 30px;
+    color: #333;
+    font-weight: 800;
+    text-align: center;
+    margin-bottom: 50px;
+  }
+
+  img {
+    height: 100%;
+    width: 330px;
+    text-align: center;
+    margin: 0 auto;
+    display: block;
+  }
+}
+
+.btn-groups {
+  margin-top: 100px;
+  text-align: center;
+  margin-bottom: 210px;
+
+  .btn-item {
+    margin-right: 20px;
+  }
+}
+
+.platform-course-list {
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 68px;
+  }
+
+}
+
+@media (max-width: 768px) {
 
+  .btn-groups {
+    margin-top: 10%;
+    margin-bottom: 10%;
+  }
+  .platform-course-list {
+    h4 {
+      font-size: 18px;
+      font-weight: 800;
+      color: #333;
+      text-align: center;
+      margin-bottom: 10%;
+      margin-top: 15%;
+    }
+  }
+  .client-nengli-box {
+    margin-bottom: 5%;
+  }
+}
 </style>

pages/product/shengChanCaiGou.vue

@@ -5,23 +5,18 @@
       <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>
-      <span><i></i> 生产部门、采购部门</span>
     </div>
 
-      <!--  岗位职责  -->
-      <gangweiList label="岗位职责" :list="gangwei" :pc-num="4" :h5-num="2"></gangweiList>
+    <!--  岗位职责  -->
+    <gangweiList label="岗位职责" :list="gangwei" :pc-num="4" :h5-num="2"></gangweiList>
 
     <!--  部分课程列表  -->
-    <div class="platform-course-list">
+    <div class="platform-course-list client-container">
       <h4>部分课程列表</h4>
       <mtaTable :data="tableData" :config="tableConfig" @shi-kan="shiKan"></mtaTable>
-      <div class="btns-group">
-        <a class="client-default-Btn">
-          <freeTrialBtn myType="kaoshi"/>
-        </a>
-        <onlineInformationBtn class="client-default-Btn"/>
+      <div class="btn-groups">
+        <freeTrialBtn class="btn-item" myType="kaoshi"/>
+        <onlineInformationBtn />
       </div>
     </div>
 
@@ -156,25 +151,53 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.client-exam-page {
-  margin-top: 70px;
-}
-
 .client-banner-box {
-  height: 200px;
-  background: green;
-  text-align: center;
-  color: #fff;
+  width: 100%;
+  height: 736px;
+  .client-platform-banner {
+    height: 100%;
+    width: 100%;
+  }
 }
 
-.btns-group {
-  display: flex;
+.btn-groups {
+  margin-top: 100px;
   text-align: center;
+  margin-bottom: 210px;
 
-  .client-default-Btn {
-    width: 120px;
+  .btn-item {
     margin-right: 20px;
   }
 }
 
+.platform-course-list {
+
+  h4 {
+    font-size: 30px;
+    font-weight: 800;
+    color: #333;
+    text-align: center;
+    margin-bottom: 68px;
+  }
+}
+@media (max-width: 768px) {
+
+  .btn-groups {
+    margin-top: 10%;
+    margin-bottom: 10%;
+  }
+  .platform-course-list {
+    h4 {
+      font-size: 18px;
+      font-weight: 800;
+      color: #333;
+      text-align: center;
+      margin-bottom: 10%;
+      margin-top: 15%;
+    }
+  }
+  .client-nengli-box {
+    margin-bottom: 5%;
+  }
+}
 </style>