<template>
  <app-frame :data="frameParams" :class="isMobile ? 'is-h5' : 'is-pc'">
    <div class="rele-content-box">
      <div class="content-box">
        <div class="text-content">
          <div class="title">项目费用</div>
          <div class="con-txt">
            ·有限服务/单体酒店总经理、副总经理
            <br />
            ·全服务酒店部门负责人及以上级别高管
            <br />
            ·投资人/业主代表等酒店投资方高管
          </div>
          <div class="title mar-t55">申请流程</div>
          <div class="apply">
            <div class="apply-line"></div>
            <div class="apply-item">
              <div class="apply-item-num">1</div>
              <div class="apply-item-hd">提交资料</div>
              <div class="apply-item-bd">
                <p>
                  提交简历、3封推荐信，缴纳600元申请费。
                </p>
              </div>
            </div>
            <div class="apply-item">
              <div class="apply-item-num">2</div>
              <div class="apply-item-hd">线上面试</div>
              <div class="apply-item-bd">
                <p>通过在线面试（面试委员会由万达酒店及度假村与瑞士酒店管理大学MBA案例中心组成）。</p>
              </div>
            </div>
            <div class="apply-item">
              <div class="apply-item-num">3</div>
              <div class="apply-item-hd">综合评定</div>
              <div class="apply-item-bd"></div>
            </div>
            <div class="apply-item">
              <div class="apply-item-num">4</div>
              <div class="apply-item-hd">录取通知</div>
              <div class="apply-item-bd">
                <p>通过面试人员，发送录取通知书。</p>
              </div>
            </div>
            <div class="apply-item">
              <div class="apply-item-num">5</div>
              <div class="apply-item-hd">缴纳学费</div>
              <div class="apply-item-bd">
                <p>学员缴纳学费，第二个月1日开始学习课程。</p>
              </div>
            </div>
            <div class="apply-item">
              <div class="apply-item-num">6</div>
              <div class="apply-item-hd">课程学习</div>
              <div class="apply-item-bd"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </app-frame>
</template>
<script>
import appFrame from '@/components/appFrame'
export default {
  layout: 'normal',
  components: { appFrame },
  data() {
    return {
      frameParams: {
        banner: '/images/apply_banner.png',
        slider: [
          {
            name: this.$t('menu.recruitChild.apply'),
            path: '/apply/relevant',
          },
          {
            name: this.$t('menu.recruitChild.cost'),
            path: '/apply/support',
          },
          // {
          //   name: this.$t('menu.recruitChild.problem'),
          //   path: '/apply/problem'
          // }
        ],
      },
    }
  },
  computed: {
    isMobile() {
      return this.$store.state.isMobile
    },
  },
}
</script>
<style lang="scss" scoped>
.is-pc {
  .rele-content-box {
    .content-box {
      padding-top: 46px;
      padding-bottom: 106px;
      .text-content {
        padding: 0 80px;
        .title {
          font-size: 22px;
          font-weight: bold;
          line-height: 100%;
          color: #333333;
          &.mar-t55 {
            margin-top: 55px;
          }
        }
        .con-txt {
          font-size: 16px;
          line-height: 34px;
          color: #424242;
          margin-top: 20px;
        }
      }
    }
  }
  .apply {
    position: relative;
    margin: 65px 0;
  }
  .apply-line {
    position: absolute;
    left: 23px;
    top: 0;
    bottom: 0;
    width: 1px;
    height: 95%;
    background-color: #aa1941;
  }
  .apply-item {
    position: relative;
    padding-left: 96px;
    margin-top: 40px;
  }
  .apply-item-hd {
    padding: 16px 0;
    font-size: 22px;
    font-weight: 500;
    color: #aa1941;
    border-bottom: 1px dashed #b9b9b9;
  }
  .apply-item-num {
    position: absolute;
    left: 0;
    width: 47px;
    height: 64px;
    background: url(https://webapp-pub.ezijing.com/project/marywood-plus/aplly_num_bg.png) no-repeat;
    background-size: contain;
    font-size: 30px;
    font-weight: 500;
    line-height: 50px;
    color: #ffffff;
    text-align: center;
  }
  .apply-item-bd {
    padding-top: 20px;
    font-size: 16px;
    color: #424242;
    line-height: 30px;
    a {
      color: #aa1941;
    }
    ul {
      margin-top: 10px;
    }
    li {
      color: #666666 !important;
      margin-top: 15px;
      line-height: 32px;
      font-weight: 300;
    }
    .tips {
      color: #666666;
      font-size: 14px;
      font-weight: 300;
    }
  }
}
.is-h5 {
  img {
    width: 100%;
    height: 100%;
  }
  .apply {
    position: relative;
    margin: 0.2rem 0.15rem 0.4rem;
  }
  .apply-line {
    position: absolute;
    left: 0.11rem;
    top: 0;
    bottom: 0;
    width: 0.01rem;
    height: 90%;
    background-color: #aa1941;
  }
  .apply-item {
    position: relative;
    padding-left: 0.48rem;
    margin-top: 0.3rem;
  }
  .apply-item-hd {
    padding: 0.04rem 0;
    font-size: 0.14rem;
    font-weight: 500;
    color: #aa1941;
    border-bottom: 1px dashed #b9b9b9;
  }
  .apply-item-num {
    position: absolute;
    left: 0;
    width: 0.23rem;
    height: 0.32rem;
    background: url(https://webapp-pub.ezijing.com/project/marywood-plus/aplly_num_bg.png) no-repeat;
    background-size: contain;
    font-size: 0.15rem;
    font-weight: 500;
    line-height: 0.25rem;
    color: #ffffff;
    text-align: center;
  }
  .apply-item-bd {
    padding-top: 10px;
    font-size: 0.12rem;
    color: #424242;
    line-height: 0.24rem;
    a {
      color: #aa1941;
    }
    ul {
      margin-top: 0.1rem;
    }
    li {
      color: #666666 !important;
      // margin-top: 0.15rem;
      // font-weight: 300;
    }
    .tips {
      color: #666666;
      font-size: 0.12rem;
      font-weight: 300;
    }
  }
  ::v-deep .main-content-html {
    overflow: hidden;
  }
}
</style>
