学历提升

src/views/EducationPromote/EducationPromoteDetails/EducationPromoteDetailsIndex.vue

@@ -3,12 +3,12 @@
  * @Author: 空白格
  * @Date: 2022-08-26 16:40:31
  * @LastEditors: gcz
- * @LastEditTime: 2022-08-26 18:00:24
+ * @LastEditTime: 2022-08-29 09:53:35
  * @FilePath: \veterans_client_web\src\views\EducationPromote\EducationPromoteDetails\EducationPromoteDetailsIndex.vue
  * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
 -->
 <template>
-  <div class=''>
+  <div class='education-promote-details'>
     <section class="banner"></section>      
     <section class="wrap-r usefor">
       <div class="title">学历提升6大作用</div>
@@ -45,7 +45,32 @@
     </section>
     <section class="wrap-r way">
       <div class="title">学历提升的方式</div>
-      <div class="flow-con"></div>
+      <div class="way-con u-flex u-row-between">
+        <div class="way-con-item u-flex">
+          <img src="@/assets/images/usefor-way-1.png" alt="">       
+          <div class="text">
+            <div class="title">自学考试</div>
+            <div class="intro">1-1.5年毕业，时间短，上课时间自定义。</div>
+            <div class="icon-wrap"><i class="icon el-icon-arrow-right"></i></div>
+          </div>   
+        </div>
+        <div class="way-con-item u-flex">
+          <img src="@/assets/images/usefor-way-2.png" alt="">       
+          <div class="text">
+            <div class="title">函授电大</div>
+            <div class="intro">2.5年毕业，入学容易，上课时间自定义。</div>
+            <div class="icon-wrap"><i class="icon el-icon-arrow-right"></i></div>
+          </div>   
+        </div>
+        <div class="way-con-item u-flex">
+          <img src="@/assets/images/usefor-way-3.png" alt="">       
+          <div class="text">
+            <div class="title">自学考试</div>
+            <div class="intro">2.5年毕业，免试入学，远程学习。</div>
+            <div class="icon-wrap"><i class="icon el-icon-arrow-right"></i></div>
+          </div>   
+        </div>
+      </div>
     </section>
   </div>
 </template>
@@ -64,6 +89,9 @@
 </script>
 
 <style lang='scss' scoped>
+.education-promote-details{
+ overflow: hidden;
+}
 .banner{
   height: 447px;
   background: url(@/assets/images/education-banner.png) no-repeat;
@@ -121,5 +149,32 @@
 }
 .way{
   margin-top: 0;
+  padding-bottom: 40px;
+  &-con{
+    &-item{
+      width: 33%;
+      img{
+        height: 290px;
+      }
+      .text{
+        margin: 0 30px 0 20px;
+        .title{
+          font-size: 22px;
+          margin-bottom: 20px;
+        }
+        .intro{
+          font-size: 16px;
+          line-height: 24px;
+          color: #787878;
+          margin-bottom: 80px;
+        }
+        .icon{
+          font-size: 24px;
+          color: #979797;
+          margin-left: 30px;
+        }
+      }
+    }
+  }
 }
 </style>