<template>
  <div :class="isMobile ? 'is-h5' : 'is-pc'">
    <app-frame :data="frameParams">
      <div class="course-content-box" v-if="!isMobile">
        <div class="content-mian">
          <div class="border-box">
            <template v-for="(item, index) in courseData">
              <div class="item-box" :key="index">
                <div class="title">{{ item.title }}</div>
                <div class="right-content">
                  <ul>
                    <li v-for="(cItem, cIndex) in item.item" :key="cIndex + 'l'">
                      <div class="text">{{ cItem.name }}</div>
                      <div class="score" v-if="cItem.score">学分：{{ cItem.score }}</div>
                    </li>
                  </ul>
                </div>
              </div>
            </template>
          </div>
          <div class="tips">*{{ $t('setCourse.t19') }}</div>
        </div>
      </div>
      <div class="course-content" v-else>
        <div class="item-box" v-for="(item, index) in courseData" :key="index">
          <div class="title">{{ item.title }}</div>
          <ul>
            <li v-for="(cItem, cIndex) in item.item" :key="cIndex + 'c'">
              <div class="name">{{ cItem.name }}</div>
              <div class="score" v-if="cItem.score">学分：{{ cItem.score }}</div>
            </li>
          </ul>
        </div>
      </div>
    </app-frame>
  </div>
</template>
<script>
import appFrame from '@/components/appFrame'
export default {
  layout: 'normal',
  components: {
    appFrame,
  },
  data() {
    return {
      courseData: [
        {
          title: this.$t('setCourse.tit1'),
          item: [
            { name: this.$t('setCourse.t1'), score: 3 },
            { name: this.$t('setCourse.t2'), score: 3 },
            { name: this.$t('setCourse.t3'), score: 3 },
            { name: this.$t('setCourse.t4'), score: 3 },
            { name: this.$t('setCourse.t5'), score: 3 },
            { name: this.$t('setCourse.t6'), score: 3 },
            { name: this.$t('setCourse.t7'), score: 3 },
            { name: this.$t('setCourse.t8'), score: 3 },
            { name: this.$t('setCourse.t9'), score: 3 },
            { name: this.$t('setCourse.t10'), score: 3 },
          ],
        },
        {
          title: this.$t('setCourse.tit2'),
          item: [
            { name: this.$t('setCourse.t11') },
            { name: this.$t('setCourse.t12') },
            { name: this.$t('setCourse.t13') },
            { name: this.$t('setCourse.t14') },
            { name: this.$t('setCourse.t15') },
            // { name: this.$t('setCourse.t16') }
          ],
        },
        {
          title: this.$t('setCourse.tit3'),
          item: [{ name: this.$t('setCourse.t17') }, { name: this.$t('setCourse.t18') }],
        },
      ],
      frameParams: {
        banner: 'https://webapp-pub.ezijing.com/project/caas/about-course_banner.png',
        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 50px 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;
              }
            }
          }
        }
      }
      .tips {
        text-align: center;
        line-height: 60px;
        color: #aa1941;
      }
    }
  }
}
.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>
