金融保险详情页响应式开发

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

@@ -1098,6 +1098,23 @@
           i{background-image: linear-gradient(90deg, #FF6226 0%, #FFFFFF 100%);}
         }
     }
+    @media (max-width: 768px) {
+      .finance-question-box{background-color: rgb(238, 238, 238);padding: 20px 15px 30px;}
+      .phone-class-box{
+        ul{
+          border: 0;width: 100%;margin: 0;padding: 20px 0 0;min-height: unset;
+          li{margin-bottom: 16px;}
+          i{width: 10px;height: 10px;margin-right: 8px;margin-top: 8px;border: 1px solid #fff;opacity: 1;border-radius:0;
+            float: left;box-sizing: border-box;display: block;transform: rotate(45deg);background-image: unset;}
+          p{font-size: 14px;color: white;line-height: 24px;margin-left: 20px;text-align: justify;}
+        }
+        h4{color: #fff;}
+        img {width: 130px;display: block;margin: -45px auto;position: absolute;left: 50%;margin-left: -65px;}
+        .financial-tradition-phone{background-color: rgb(0, 102, 204);margin: 0 0 20px;padding: 0 16px 20px;}
+        .financial-solve-phone{background-color: rgb(247, 109, 0);padding: 40px 16px 36px;}
+      }
+
+    }
   }
 
   /********  describe: 信息产业-详情页  author: TX  date:2020-09-02  ********/

pages/financial.vue

@@ -21,7 +21,7 @@
 
     <!-- 金融行业的问题 -->
     <div class="finance-question-box">
-      <div class="client-container">
+      <div class="client-container mta-hidden-xs">
         <div class="finance-question-top">
           <h5>传统培训手段的问题</h5>
           <h5>我们能解决的问题</h5>
@@ -51,6 +51,37 @@
           </ul>
         </div>
       </div>
+      <div class="client-container mta-hidden-sm phone-class-box">
+        <div class="financial-tradition-phone">
+          <h4 class="client-title">传统培训手段的问题</h4>
+          <ul>
+            <li><i></i>
+              <p>产品更新换代快，培训资料更新不及时</p></li>
+            <li><i></i>
+              <p>网点多，范围广，人数多，导致培训不同步，考核效果一般</p></li>
+            <li><i></i>
+              <p>金融业是以客户为中心的，专业技能素养和综合文化素质极为重要，培训不到位，服务满意度往往达不到要求</p></li>
+            <li><i></i>
+              <p>随着互联网时代发展，人工智能程度越来越高，高新技术的统一操作标准无法下发至每个人，更无法逐一考核</p></li>
+            <li><i></i>
+              <p>专业度高，需要分岗位进行培训，但设计一门专业课程需要很大的精力，传统培训不能满足需求</p></li>
+          </ul>
+        </div>
+        <img :src="changeImg" alt="我们的系统为您改变了什么"/>
+        <div class="financial-solve-phone">
+          <h4 class="client-title">我们能解决的问题</h4>
+          <ul>
+            <li><i></i>
+              <p>内容设计：解决了学习资料不足、学习内容空泛、知识要点把握不准等问题</p></li>
+            <li><i></i>
+              <p>提高执行：提升了全员合规知识水平和内控执行能力</p></li>
+            <li><i></i>
+              <p>实际工作：在考题设计上，将各项法律法规、内控制度、操作流程和应知应会内容紧密结合客户营销、合规管理和风险防控实际，提升全员的分析问题能力</p></li>
+            <li><i></i>
+              <p>专岗专培：针对员工岗位性质、能力素质和业务需求，精心设计考试内容，开展多次考试活动，选备相应的题库，分岗位进行集中测试</p></li>
+          </ul>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -63,6 +94,7 @@
       return {
         // 发展现状img
         financeDevelopImg: require(`~/static/images/client/industrydetails/finance-develop-img.png`),
+        changeImg:   require(`~/static/images/client/industrydetails/information-change-img.png`),
       };
     },
     head() {