<!--
 * @Description: 学历提升 => 详情
 * @Author: 空白格
 * @Date: 2022-08-26 16:40:31
 * @LastEditors: gcz
 * @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='education-promote-details'>
    <section class="banner"></section>      
    <section class="wrap-r usefor">
      <div class="title">学历提升6大作用</div>
      <div class="usefor-list u-flex u-flex-wrap u-row-between">
        <div class="usefor-list-item item-1">
          <div class="name">评职称证书</div>
          <div class="con">在评定高级职称时需要学历的辅助</div>        
        </div>
        <div class="usefor-list-item item-2">
          <div class="name">求职就业</div>
          <div class="con">学历越高，就业的可能性越大</div>        
        </div>
        <div class="usefor-list-item item-3">
          <div class="name">升职加薪</div>
          <div class="con">高学历是用人单位提拔人才的重要考核标准</div>        
        </div>
        <div class="usefor-list-item item-4">
          <div class="name">考资格证</div>
          <div class="con">许多国家职业资格证都需求学历专科以上</div>        
        </div>
        <div class="usefor-list-item item-5">
          <div class="name">外企求职</div>
          <div class="con">进外企工作，学历是一项重要的考核</div>        
        </div>
        <div class="usefor-list-item item-6">
          <div class="name">积分落户</div>
          <div class="con">落户某些城市，需要一定的学历积分</div>        
        </div>
      </div>
    </section>  
    <section class="wrap-r flow">
      <div class="title">学历提升的流程</div>
      <div class="flow-con"></div>
    </section>
    <section class="wrap-r way">
      <div class="title">学历提升的方式</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>

<script>
  export default {
    name: '',
    components: {},
    data () {
      return {
      };
    },
    created(){},
    methods: {},
  }
</script>

<style lang='scss' scoped>
.education-promote-details{
 overflow: hidden;
}
.banner{
  height: 447px;
  background: url(@/assets/images/education-banner.png) no-repeat;
  background-position: center center;
}
.title{
    font-size: 20px;
    color: #1A1A1A;
    font-weight: 600;
    margin-bottom: 24px;
  }
.wrap-r{
  box-sizing: border-box;
  background: #fff;
  padding: 20px;
  width:70%;
  margin: 23px auto;
}
.usefor{
   padding-bottom: 0;
  .usefor-list{
    &-item{
      box-sizing: border-box;
      width: 33%;
      margin-bottom: 24px;
      height: 130px;
      padding: 25px 0 0 30px;
      background-position: right bottom;
      background-repeat: no-repeat;
      background-size: 100%;
      .name{
        font-size: 20px;
        margin-bottom: 10px;
      }
      .con{
        width: 150px;
        font-size: 14px;
        color: #787878;
      }
    }
    @for $i from 1 through 6 {
        .item-#{$i} {
          background-image: url(@/assets/images/usefor-list-0#{$i}.png);
        }
      }
  }
}
.flow{
  margin-bottom: 0;
  .flow-con{
    height: 144px;
    background: url(@/assets/images/usefor-flow.png) no-repeat;
    background-size: 100%;
  }
}
.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>
