<template>
  <div :class="isMobile ? 'is-h5' : 'is-pc'">
    <app-frame :data="frameParams">
      <div class="project-intro-charac">
        <h1>项目特色</h1>
        <img src="/images/project_feature_top.png" alt="" />
        <div class="feature-box">
          <h3>双导师培养+岗位直通车</h3>
          <div class="feature-box-content">
            <dl>
              <dt><img src="/images/icon_1_1.png" /></dt>
              <dd>
                <strong>双导师培养：</strong
                >瑞士顶级教授与万达酒店高管联合授课，先进理论+万达酒店运营案例，打造国际化视野与本土化实战能力的优质人才。
              </dd>
            </dl>
            <dl>
              <dt><img src="/images/icon_2_1.png" /></dt>
              <dd>
                <strong>岗位直通车：</strong
                >万达酒店高管亲自带教，学员可深度参与酒店整体运营管理，全面提升薄弱项和简历含金量；考核优秀者免初试，获得直通万达酒店及度假村副总经理/总经理岗位面试机会。
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </app-frame>
  </div>
</template>
<script>
export default {
  layout: 'normal',
  data() {
    return {
      list: [
        {
          img: 'https://webapp-pub.ezijing.com/project/kelley/project-intro-charac-icon1.png',
          title: this.$t('feature.item1Tit'),
          texts: [this.$t('feature.item1Txt1'), this.$t('feature.item1Txt2'), this.$t('feature.item1Txt3')],
        },
        {
          img: 'https://webapp-pub.ezijing.com/project/kelley/project-intro-charac-icon2.png',
          title: this.$t('feature.item2Tit'),
          texts: [this.$t('feature.item2Txt1'), this.$t('feature.item2Txt2'), this.$t('feature.item2Txt3')],
        },
        {
          img: 'https://webapp-pub.ezijing.com/project/kelley/project-intro-charac-icon3.png',
          title: this.$t('feature.item3Tit'),
          texts: [this.$t('feature.item3Txt1'), this.$t('feature.item3Txt2'), this.$t('feature.item3Txt3')],
        },
      ],
      frameParams: {
        banner: '/images/feature_banner.png',
        slider: [
          {
            name: this.$t('menu.projectChild.bg'),
            path: '/project-intro/bg',
          },
          {
            name: this.$t('menu.projectChild.feature'),
            path: '/project-intro/charac',
          },
          {
            name: this.$t('menu.projectChild.cert'),
            path: '/project-intro/certificate',
          },
        ],
      },
    }
  },
  computed: {
    isMobile() {
      return this.$store.state.isMobile
    },
  },
}
</script>
<style lang="scss" scoped>
.is-pc {
  .project-intro-charac {
    padding: 60px;
    h1 {
      font-weight: bold;
      font-size: 26px;
      color: #333333;
      line-height: 40px;
      text-align: center;
      margin-bottom: 20px;
    }
    .feature-box {
      margin-top: 60px;
      background: #f6f2ee;
      padding: 50px;
      box-sizing: border-box;
      color: #333333;

      h3 {
        font-size: 24px;
        line-height: 36px;
        margin-bottom: 50px;
        text-align: center;
      }
      .feature-box-content {
        display: flex;
        flex-direction: column;
        gap: 60px;
      }
      dl {
        display: flex;
        align-items: flex-start;
        dt {
          width: 80px;
        }
        dd {
          font-size: 18px;
          line-height: 30px;
          margin-left: 20px;
          border-left: 1px solid #a5815b;
          padding-left: 20px;
        }
      }
    }
  }
}
.is-h5 {
  .card {
    background: #fff;
    // padding: .24rem .15rem .56rem;
    li {
      background: #f9f8f8;
      box-shadow: 0 0 0 rgb(0 0 0 / 9%);
      margin-bottom: 0.16rem;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0.16rem 0.14rem 0.1rem;
      .left {
        img {
          width: 0.72rem;
          height: 0.72rem;
          display: block;
        }
      }
      .right {
        margin-left: 0.23rem;
        h5 {
          font-size: 0.12rem;
          font-weight: 700;
          line-height: 100%;
          color: #333;
          margin-bottom: 0.16rem;
        }
        p {
          font-size: 0.1rem;
          font-family: Source Han Sans CN;
          line-height: 100%;
          color: #424242;
          margin-bottom: 0.1rem;
        }
      }
    }
  }
}
</style>
