一行中内容逆向显示组件抽取

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

@@ -809,6 +809,65 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 
 }
 
+/*  一行中内容逆向显示 */
+.website-row-reverse{flex-direction: row-reverse;}
+
+// 课程开发图片展示行
+.website-course-services{
+  li{margin-bottom: 36px;}
+}
+.course-services-box{
+  width: 100%;display: flex;align-items: center;
+  // 头部图片
+  img{ width: 721px;height: 508px;float: right;}
+
+  // 内容区域
+  .course-services-content{
+    width: 479px;
+    float: right;
+    box-sizing: border-box;
+    margin: 0 20px;
+    display: block;
+    @include setFontStyle(-6);
+    h4{@include setFontStyle(28);color: #4069e7;margin-bottom: 24px;}
+    h5{@include setFontStyle(10);color: #333;margin-bottom: 36px;}
+    i{width:50px;height:5px;display: block;background: #3e7ce7;margin: 24px 0;}
+    p{@include setFontStyle(-4);line-height: 32px;color: rgba(0,0,0,0.65);margin-bottom: 56px;text-align: justify;}
+    .p-before-circle{margin-bottom: 6px!important;}
+    .p-before-circle:before{
+      content: '';
+      width: 20px;
+      height: 20px;
+      display: inline-block;
+      margin-right: 8px;
+      background-image: url("~static/images/client/index/index-icon.png");
+      vertical-align: middle;
+      background-repeat: no-repeat;background-size: cover;
+    }
+    .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;}
+    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;}
+    // 内容区域
+    .course-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);}
+      .p-before-circle:before{width: 16px;height: 16px;margin-right: 6px;}
+      .client-btn-box{text-align: center;margin:40px 0;}
+      .client-default-Btn,.client-default-white-Btn{width: 120px;height: 35px;line-height: 35px;}
+      a,div.client-default-Btn{margin-right: 16px}
+    }
+  }
+}
+
 /********************************* 麦塔栅格**********************************/
 /*
 栅格说明：

pages/examsystem/index.vue

@@ -77,7 +77,7 @@
         <ul>
           <li>
             <div class="client-container">
-              <div class="products-services-box products-new-contrary-box">
+              <div class="products-services-box website-row-reverse">
               <img :src="advantagesImg1" alt="万人并发运行顺畅" />
               <div class="products-services-content">
                 <h5>良好高并发性和访问安全性</h5>
@@ -101,7 +101,7 @@
           </li>
           <li>
             <div class="client-container">
-              <div class="products-services-box products-new-contrary-box">
+              <div class="products-services-box website-row-reverse">
               <img :src="advantagesImg3" alt="微信答题一扫就考" />
               <div class="products-services-content">
                 <h5>PC移动支持多终端，随时随地考试</h5>

pages/trainsystem/index.vue

@@ -74,7 +74,7 @@
       <ul>
         <li>
           <div class="client-container">
-            <div class="products-services-box products-new-contrary-box">
+            <div class="products-services-box website-row-reverse">
               <img :src="trainAdvantagesImg1" alt="完善的课程学习体系" />
               <div class="products-services-content">
                 <h5>完善的课程学习体系</h5>
@@ -98,7 +98,7 @@
         </li>
         <li>
           <div class="client-container">
-            <div class="products-services-box products-new-contrary-box">
+            <div class="products-services-box website-row-reverse">
               <img :src="trainAdvantagesImg3" alt="线上线下全面融合；学习地图展示员工学习路径" />
               <div class="products-services-content">
                 <h5>线上线下全面融合；<br>学习地图展示员工学习路径</h5>