<template>
  <div :class="isMobile ? 'is-h5' : 'is-pc'">
    <app-frame :data="frameParams">
      <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/adva_banner.png" alt="" />
      <img
        style="padding-left:101px;padding-right:49px;margin-top:65px;padding-bottom:109px"
        src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/adva_1.png"
        alt=""
      />
    </app-frame>
  </div>
</template>
<script>
import appFrame from '@/components/appFrame'
export default {
  layout: 'normal',
  components: {
    appFrame
  },
  data() {
    return {
      courseData: [
        {
          title: '先修课程',
          item: [{ name: '金融市场学', score: 0 }]
        },
        {
          title: '必修课程',
          item: [
            { name: '设计思维与管理创新', score: 3 },
            { name: '管理沟通', score: 3 },
            { name: '营销管理与数字化营销', score: 3 },
            { name: '数字时代领导力', score: 3 },
            { name: '财务规划与管理', score: 3 },
            { name: '商法', score: 3 },
            { name: '正念领导力', score: 3 },
            { name: '数字化运营管理', score: 3 },
            { name: '商业研究方法', score: 3 },
            { name: '商业智能', score: 3 },
            { name: '战略管理', score: 3 },
            { name: '数字化管理信息系统', score: 3 }
          ]
        },
        {
          title: '毕业环节',
          item: [{ name: '毕业典礼&美国游学（可选）' }]
        }
      ],
      frameParams: {
        // banner: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/marywood/mary_banner_nx4.jpg',
        slider: [
          {
            name: this.$t('menu.courseChild.set'),
            path: '/about/course'
          },
          {
            name: this.$t('menu.courseChild.teachers'),
            path: '/about/teacher'
          }
        ]
      }
    }
  },
  mounted() {},
  computed: {
    isMobile() {
      return this.$store.state.isMobile
    }
  }
}
</script>
<style lang="scss" scoped>
.is-pc {
  .course-content-box {
    // width: 1200px;
    // margin: 0 auto;
    .content-mian {
      padding: 106px 141px 110px 96px;
      .border-box {
        padding: 35px 0 51px;
        border-top: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
        .item-box {
          display: flex;
          justify-content: space-between;
          margin-bottom: 40px;
          ul {
            padding-bottom: 37px;
            border-bottom: 1px solid #e6e6e6;
          }
          &:last-child {
            border-bottom: none;
            margin-bottom: 0;
            ul {
              padding-bottom: 37px;
              border-bottom: none;
            }
          }
          .title {
            font-size: 26px;
            font-weight: bold;
            line-height: 100%;
            color: #aa1941;
          }
          .right-content {
            width: 562px;
            li {
              height: 32px;
              background: #f7f7f7;
              display: flex;
              align-items: center;
              &:nth-child(even) {
                background: none;
              }
              .text {
                width: 397px;
                padding-left: 30px;
                font-size: 16px;
                color: #333333;
              }
              .score {
                font-size: 16px;
                color: #424242;
              }
            }
          }
        }
      }
    }
  }
}
.is-h5 {
  .course-content {
    background: #fff;
    padding: 0.38rem 0.28rem 0.2rem;
    .title {
      font-size: 0.14rem;
      font-weight: bold;
      line-height: 100%;
      color: #aa1941;
    }
    ul {
      border-top: 0.01rem solid #e6e6e6;
      padding-top: 0.1rem;
      margin-top: 0.19rem;
      margin-bottom: 0.24rem;
      li {
        height: 0.21rem;
        box-sizing: border-box;
        padding-left: 0.27rem;
        display: flex;
        align-items: center;
        &:nth-child(odd) {
          background: #f7f7f7;
        }
        .name {
          font-size: 0.1rem;
          color: #666666;
          width: 2.17rem;
          font-size: 0.1rem;
          color: #666666;
        }
        .score {
          font-size: 0.1rem;
          color: #666666;
        }
      }
    }
  }
}
</style>
