<template>
  <div :class="isMobile ? 'is-h5' : 'is-pc'">
    <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/course-banner.png" style="width: 100%" />
    <div class="max-width-center">
      <card title="研究路径">
        <div class="path-flex">
          <div class="path-item">
            <div class="t">三年学制</div>
          </div>
          <div class="path-item">
            <div class="t">专业课程</div>
          </div>
          <div class="path-item">
            <div class="t">学术论坛</div>
          </div>
          <div class="path-item">
            <div class="t">全球视野</div>
          </div>
        </div>
      </card>
      <card title="国内专业研究课程" style="margin-top: 103px" class="card-h5-m">
        <div>
          <img
            class="chart"
            src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/course-img1-new.png"
            style="width: 100%"
          />
        </div>
      </card>
      <card title="海外国际商学院学习模块" style="margin-top: 103px" class="card-h5-m">
        <div style="background-color: #fff; padding-bottom: 32px" class="h5-ba">
          <img
            class="chart2"
            src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/course-img3-new.png"
            style="width: 100%"
          />
          <div class="t-g2">注：每学年校方会组织两次 以上活动，学生每年至少参加一次活动，即可获得学分</div>
        </div>
      </card>
      <card title="前沿创新论坛" style="margin-top: 103px; margin-bottom: 100px" class="card-h5-m">
        <div style="background-color: #fff; padding-bottom: 32px" class="h5-ba">
          <img
            class="chart2"
            src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/course-img2-new.png"
            style="width: 100%"
          />
          <div class="t-g2">注：每学年校方会组织四次 以上活动，学生每年至少参加二次活动，即可获得学分</div>
        </div>
      </card>
      <!-- <card title="中国经济新质生产力前沿创新学术论坛" style="margin-top: 103px">
        <div class="t-g">
          每年在清华定期举办《新质生产力与产业创新论坛》，邀请来自清华、中国科学院等研究机构数十位国内专家学者，分享来自各个领域科技创新成果和产业创新转型的实践经验。结合论坛，组织DBA博士生到清华系研究机构走访，探索科技成果转化的成功路径，到科技创新知名企业进行标杆学习。<br />
          ·商业分析和数字经济&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;·数字营销战略前沿课题&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;·人工智能与中国经济&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;·中国前沿金融管理问题&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;·新经济时代的财务报告<br />
          ·清华系研究机构参访&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;·知名企业标杆学习
        </div>
      </card>
      <card title="全球视野研究实践课程" style="margin: 103px 0">
        <div class="t-g">
          与全球创新面对面，全球访学能够让参与者接触不同国家和地区的商业实践和文化，更好地理解全球商业这种跨文化的经验，激发创新思维，培养国际化的视野。与来自不同国家和地区的企业家交流，分享经验和意见，促进合作和创新，为企业发展带来新的机遇和可能性。<br />
          ·美国-科技创新之旅&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;·日本-极致服务创新之旅&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;·东南亚-新兴市场洞察与产业创新之旅
        </div>
      </card> -->
    </div>
  </div>
</template>
<script>
import Card from '@/components/Card'
export default {
  layout: 'normal',
  components: { Card },
  computed: {
    isMobile() {
      return this.$store.state.isMobile
    }
  },
  data() {
    return {}
  }
}
</script>
<style lang="scss" scoped>
.is-pc {
  .max-width-center {
    width: 1200px;
    margin: 64px auto 0;
  }
  .path-flex {
    display: flex;
    justify-content: space-between;
    padding-top: 42px;
    .path-item {
      width: 292px;
      height: 345px;
      background-size: 100% 100%;
      &:nth-child(1) {
        background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/course-path1.png);
      }
      &:nth-child(2) {
        background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/course-path2.png);
      }
      &:nth-child(3) {
        background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/course-path3.png);
      }
      &:nth-child(4) {
        background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/course-path4.png);
      }
      .t {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.73);
        font-weight: bold;
        font-size: 24px;
        line-height: 345px;
        color: #ffffff;
        letter-spacing: 4px;
        text-align: center;
      }
    }
  }
  .chart {
    padding: 62px 49px;
    box-sizing: border-box;
    background-color: #fff;
    // margin-top: 36px;
  }
  .chart2 {
    padding: 62px 49px 0;
    box-sizing: border-box;
    background-color: #fff;
    // margin-top: 36px;
  }
  .t-g {
    font-weight: 400;
    font-size: 18px;
    color: #666666;
    line-height: 36px;
    text-align: left;
    margin-top: 52px;
  }
  .t-g2 {
    font-weight: 400;
    font-size: 18px;
    color: #666666;
    // line-height: 36px;
    text-align: left;
    margin-top: 10px;
    padding-left: 49px;
  }
}
.is-h5 {
  .path-flex {
    display: flex;
    // justify-content: space-between;
    // padding-top: 42px;
    overflow-x: scroll;
    .path-item {
      min-width: 1.46rem;
      min-height: 1.72rem;
      background-size: 100% 100%;
      margin-right: 0.05rem;
      &:nth-child(1) {
        background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/course-path1.png);
      }
      &:nth-child(2) {
        background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/course-path2.png);
      }
      &:nth-child(3) {
        background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/course-path3.png);
      }
      &:nth-child(4) {
        background-image: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/seg-ppa/course-path4.png);
      }
      .t {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.73);
        font-weight: bold;
        font-size: 0.12rem;
        line-height: 1.72rem;
        color: #ffffff;
        letter-spacing: 4px;
        text-align: center;
      }
    }
  }
  .card-h5-m {
    margin-top: 0.32rem !important;
  }
  .h5-ba {
    background: none !important;
    .t-g2 {
      font-size: 0.08rem;
      color: #262626;
      line-height: 0.1rem;
    }
  }
}
</style>
