详情页共同样式抽出

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

@@ -55,6 +55,7 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
 .mt30 {margin-top: 30px;}
 .mt35 {margin-top: 35px;}
 .mt40 {margin-top: 40px;}
+.mt48 {margin-top: 48px;}
 
 /* 下外边距 */
 .mb5 {margin-bottom: 5px;}
@@ -426,9 +427,17 @@ h1,h2,h3,h4,h5,h6,p{font-weight:normal;margin: 0;}
   p{@include setFontStyle(-4);color: rgba(0,0,0,0.65);margin-top: 16px;line-height: 22px}
 }
 
-// 首页行业学习详情页-发展现状
+/* 首页行业学习详情页-通用部分 */
+// 发展现状
 .industrydetails-develop-box{
   .client-container{padding: 48px 0 80px;text-align: center;}
   p{width: 460px;display: inline-block;@include setFontStyle(-6);color: rgba(0,0,0,0.65);line-height: 22px;vertical-align: middle;margin-right: 96px;text-align: justify;}
   img{display: inline-block;vertical-align: middle;}
 }
+// 详情页内容
+.industrydetails-content{
+  li{margin-bottom: 16px;}
+  i{width: 14px;height: 14px;float:left;box-sizing: border-box;opacity: 0.8;display: block;border: 1px solid #13192D;transform: rotate(45deg);margin-right: 16px;margin-top: 4px;}
+  h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 24px;text-align: center;}
+  p{@include setFontStyle(-6);color: rgba(0,0,0,0.65);line-height: 22px;text-align: left;}
+}

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

@@ -980,12 +980,10 @@
     .government-change-box{
       background: #F9FAFF;
       padding-bottom: 80px;
-      .change-content{
+      .industrydetails-content{
         width: 100%;height: 312px;margin-top: 48px;background-image: url("~static/images/client/industrydetails/government-change-bg.png");
-        h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 24px;text-align: center}
         li{
-          @include setFontStyle(-6);color: rgba(0,0,0,0.65);margin-bottom: 24px;line-height: 22px;
-          i{width: 14px;height: 14px;float:left;box-sizing: border-box;opacity: 0.8;display: block;border: 1px solid #13192D;transform: rotate(45deg);margin-right: 16px;margin-top: 3px;}
+          margin-bottom: 24px;
           p{margin-left: 30px}
         }
         img{display: inline-block;vertical-align: top;margin: 85px 42px;}
@@ -993,6 +991,7 @@
       .change-content-left{
         display: inline-block;padding: 32px 0 0 64px;vertical-align: top;
         h5,li,li i{color: #fff;border-color: #fff;}
+        p{color: rgba(255,255,255,0.65);}
       }
       .change-content-right{width: 500px;display: inline-block;padding-top: 64px;}
     }
@@ -1025,9 +1024,8 @@
         }
         ul{
           width:460px;min-height:328px;display: inline-block;border: 1px solid #2B67FD;border-radius: 4px;padding: 32px;box-sizing: border-box;vertical-align: middle;margin: 0 52px;
-          li{margin-bottom: 16px;}
-          i{width: 12px;height: 12px;float: left;background-image: linear-gradient(90deg, #2B5CFD 0%, #FFFFFF 100%);border-radius: 50%;margin-top: 4px;margin-right: 16px;}
-          p{@include setFontStyle(-6);color: rgba(0,0,0,0.65);line-height: 22px;margin-left: 30px;text-align: left;}
+          i{width: 12px;height: 12px;background-image: linear-gradient(90deg, #2B5CFD 0%, #FFFFFF 100%);border-radius: 50%;border:0;transform: rotate(0deg);opacity: 1;}
+          p{margin-left: 30px;}
         }
         .finance-question-right{
           border: 1px solid #FF6226;
@@ -1045,19 +1043,18 @@
     .information-change-box{
       background: #F9FAFF;
       padding-bottom: 80px;
-      .change-content{
+      .industrydetails-content{
         width: 100%;height: 300px;margin-top: 48px;background-image: url("~static/images/client/industrydetails/information-change-bg.png");
-        h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 24px;text-align: center}
         li{
-          @include setFontStyle(-6);color: rgba(0,0,0,0.65);margin-bottom: 24px;line-height: 22px;
-          i{width: 14px;height: 14px;float:left;box-sizing: border-box;opacity: 0.8;display: block;border: 1px solid #13192D;transform: rotate(45deg);margin-right: 16px;margin-top: 3px;}
-          p{margin-left: 30px}
+          margin-bottom: 24px;
+          p{margin-left: 30px;}
         }
         img{display: inline-block;vertical-align: top;margin: 120px 30px auto 70px;}
       }
       .change-content-left{
         display: inline-block;padding: 48px 0 0 64px;vertical-align: top;
         h5,li,li i{color: #fff;border-color: #fff;}
+        p{color: rgba(255,255,255,0.65);}
       }
       .change-content-right{width: 500px;display: inline-block;padding-top: 48px;}
     }
@@ -1074,20 +1071,21 @@
         padding-bottom: 80px;
 
         // 模块上半部分
-        .change-box-top{width: 1100px;height: 247px;padding: 32px 64px;box-sizing: border-box;background: #104644;border-radius: 8px;margin-left: 20px;margin-top: 48px;}
+        .change-box-top{
+          width: 1100px;height: 247px;padding: 32px 64px;box-sizing: border-box;background: #104644;border-radius: 8px;margin-left: 20px;margin-top: 48px;
+          i{border: 1px solid #fff;}
+        }
 
         // 模块下半部分
         .change-box-bottom{
           width: 1100px;height: 368px;padding: 24px;box-sizing: border-box;border-radius: 8px;background: #FE552C;margin-left: 100px;margin-top:-24px;position: relative;
           h5{margin-top: 70px;}
-          li{i{border: 1px solid #13192D;}}
           li:nth-of-type(odd){p{margin-right: 60px}}
         }
-        h5{@include setFontStyle(-2);color: rgba(255,255,255,0.85);margin-bottom: 24px;text-align: center}
+        h5{color: rgba(255,255,255,0.85);}
         li{
           width: 50%;display: inline-block;@include setFontStyle(-6);color: rgba(255,255,255,0.65);margin-bottom: 24px;line-height: 22px;vertical-align: top;
-          i{width: 14px;height: 14px;float:left;box-sizing: border-box;opacity: 0.8;display: block;border: 1px solid #fff;transform: rotate(45deg);margin-right: 16px;margin-top: 4px;}
-          p{margin-left: 30px}
+          p{margin-left: 30px;color: rgba(255,255,255,0.65);}
         }
         img{position: absolute;top: -55px;left: 50%;margin-left: -50px;}
     }
@@ -1104,11 +1102,9 @@
       padding-bottom: 80px;
         .change-content-left,.change-content-right{
           width: 462px;height: 359px;display:inline-block;background-repeat: no-repeat;vertical-align: top;margin-top: 48px;
-          h5{height: 58px;line-height: 58px;@include setFontStyle(-2);color: rgba(255,255,255,0.85);}
+          h5{height: 58px;line-height: 58px;color: rgba(255,255,255,0.85);}
           ul{margin-top: 80px;margin-left: 32px;}
-          li{margin-bottom: 16px;}
-          p{@include setFontStyle(-6);color: rgba(0,0,0,0.65);line-height: 22px;text-align: left;}
-          i{width:12px;height:12px;border-radius:50%;border: 1px solid #1276FF;float: left;margin-right: 16px;margin-top: 5px;box-sizing: border-box;}
+          i{width:12px;height:12px;border-radius:50%;border: 1px solid #1276FF;margin-top: 5px;}
         }
         .change-content-left{background-image: url("~static/images/client/industrydetails/traffic-left-bg.png");margin-right: 104px;}
         .change-content-right{background-image: url("~static/images/client/industrydetails/traffic-right-bg.png");}
@@ -1122,16 +1118,12 @@
 
     // 我们的系统为您改变了什么
     .education-change-box{
-      background: #F9FAFF;
-      padding-bottom: 80px;
-      li{margin-bottom: 16px;}
-      i{width: 14px;height: 14px;float:left;box-sizing: border-box;opacity: 0.8;display: block;border: 1px solid #13192D;transform: rotate(45deg);margin-right: 16px;margin-top: 4px;}
-      h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 24px;}
-      p{@include setFontStyle(-6);color: rgba(0,0,0,0.65);line-height: 22px;text-align: left;}
+      background: #F9FAFF;padding-bottom: 80px;
       img{position: absolute;top: 50%;margin-top: -78px;left:50%;margin-left: -54px;}
-      .change-content{margin-top: 48px;position: relative;}
-      .change-content-left{width: 637px;height: 338px;float:left;padding:32px 48px;background-image: url("~static/images/client/industrydetails/education-left-bg.png");box-sizing: border-box;}
-      .change-content-right{width: 610px;height: 338px;float:right;padding:32px 0 32px 100px;background-image: url("~static/images/client/industrydetails/education-right-bg.png");box-sizing: border-box;margin-left: -55px;}
+      .industrydetails-content{position: relative;}
+      .change-content-left,.change-content-right{height: 338px;box-sizing: border-box;}
+      .change-content-left{width: 637px;float:left;padding:32px 48px;background-image: url("~static/images/client/industrydetails/education-left-bg.png");}
+      .change-content-right{width: 610px;float:right;padding:32px 0 32px 100px;background-image: url("~static/images/client/industrydetails/education-right-bg.png");margin-left: -55px;}
     }
 
 

pages/Industrydetails/education.vue

@@ -18,7 +18,7 @@
     <div class="education-change-box">
       <h4 class="client-title">我们的系统为您改变了什么</h4>
       <div class="client-container">
-        <div class="change-content tc fn-clear">
+        <div class="industrydetails-content fn-clear mt48">
           <div class="change-content-left">
             <h5>传统方式出现的问题</h5>
             <ul>

pages/Industrydetails/energy.vue

@@ -17,7 +17,7 @@
     <!-- 我们的系统为您改变了什么 -->
     <div class="energy-change-box">
       <h4 class="client-title">我们的系统为您改变了什么</h4>
-      <div class="client-container">
+      <div class="client-container industrydetails-content">
         <div class="change-box-top">
           <h5>传统方式出现的问题</h5>
           <ul>

pages/Industrydetails/finance.vue

@@ -21,7 +21,7 @@
               <h5>传统培训手段的问题</h5>
               <h5>我们能解决的问题</h5>
             </div>
-          <div class="tc">
+          <div class="industrydetails-content tc">
             <ul>
               <li><i></i><p>产品更新换代快，培训资料更新不及时</p></li>
               <li><i></i><p>网点多，范围广，人数多，导致培训不同步，考核效果一般</p></li>

pages/Industrydetails/government.vue

@@ -17,7 +17,7 @@
     <div class="government-change-box">
       <h4 class="client-title">我们的系统为您改变了什么</h4>
       <div class="client-container">
-        <div class="change-content">
+        <div class="industrydetails-content">
           <div class="change-content-left">
             <h5>传统方式出现的问题</h5>
             <ul>

pages/Industrydetails/information.vue

@@ -18,7 +18,7 @@
     <div class="information-change-box">
       <h4 class="client-title">我们的系统为您改变了什么</h4>
       <div class="client-container">
-        <div class="change-content">
+        <div class="industrydetails-content">
           <div class="change-content-left">
             <h5>传统方式出现的问题</h5>
             <ul>

pages/Industrydetails/traffic.vue

@@ -18,7 +18,7 @@
     <div class="traffic-change-box">
       <h4 class="client-title">我们的系统为您改变了什么</h4>
       <div class="client-container">
-        <div class="change-content tc">
+        <div class="industrydetails-content tc">
           <div class="change-content-left">
             <h5>传统培训手段的问题</h5>
             <ul>