<template>
  <div :class="isMobile ? 'is-h5' : 'is-pc'">
    <div class="common-content-box">
      <card :title="$t('home.problem.title')">
        <template #header-aside
          ><nuxt-link to="/apply/problem">{{ $t('viewMore') }}</nuxt-link></template
        >
        <div class="content-mian">
          <app-link to="/apply/problem">
            <div class="list-box">
              <ul>
                <li v-for="(item, index) in problem.itemLeft" :key="index">
                  <div class="icon"></div>
                  <div class="text">{{ item }}</div>
                </li>
              </ul>
              <ul>
                <li v-for="(item, index) in problem.itemRight" :key="index">
                  <div class="icon"></div>
                  <div class="text">{{ item }}</div>
                </li>
              </ul>
            </div>
          </app-link>
          <!-- <div class="msg-box">
            <el-input type="textarea" placeholder="请输入内容" v-model="textarea"> </el-input>
            <div class="btn">在线留言</div>
          </div> -->
        </div>
      </card>
    </div>
  </div>
</template>

<script>
import Card from '@/components/Card'
import AppLink from '@/components/Link'
export default {
  name: 'commonProblem',
  components: {
    Card,
    AppLink
  },
  data() {
    return {
      problem: {
        itemLeft: [
          '本项目毕业生颁发的学位证书与在美国颁发的证书有何不同？',
          '本项目上课形式是怎么样？',
          '本项目学制多久？',
          '能否顺利毕业拿到证书呢？',
          '本项目是在职还是全职？'
        ],
        itemRight: [
          '如何申请紫荆-玛丽伍德工商管理硕士(MBA)学位项目？',
          '大概流程是什么？',
          '需要提交哪些材料？',
          '玛丽伍德工商管理硕士(MBA)学位项目的学费是多少？',
          '学费可以分期吗？'
        ]
      },
      textarea: ''
    }
  },
  computed: {
    isMobile() {
      return this.$store.state.isMobile
    }
  }
}
</script>

<style lang="scss" scoped>
.is-pc {
  .common-content-box {
    width: 1200px;
    margin: 0 auto;
    padding-top: 77px;
    .content-mian {
      padding-top: 50px;
      .msg-box {
        padding-top: 40px;
        box-sizing: border-box;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        ::v-deep {
          .el-textarea__inner {
            background: none;
            resize: none;
          }
        }
        .btn {
          width: 136px;
          height: 36px;
          background: #aa1941;
          opacity: 1;
          border-radius: 4px;
          font-size: 18px;
          line-height: 36px;
          text-align: center;
          color: #ffffff;
          margin-left: 57px;
          cursor: pointer;
        }
      }
      .list-box {
        display: flex;
        justify-content: space-between;
        ul {
          &:nth-child(2) {
            margin-left: 8px;
          }
          li {
            display: flex;
            align-items: center;
            width: 600px;
            height: 25px;
            margin-bottom: 10px;
            cursor: pointer;
            &:nth-child(even) {
              .text {
                background: none;
              }
            }
            .icon {
              width: 7px;
              height: 7px;
              background: #aa1941;
              border-radius: 50%;
            }
            .text {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 14px;
              line-height: 25px;
              color: #666666;
              padding-left: 4px;
              width: 570px;
              background: rgba(153, 153, 153, 0.2);
              margin-left: 15px;
            }
          }
        }
      }
    }
  }
}
.is-h5 {
  .common-content-box {
    .content-mian {
      .msg-box {
        padding-top: 0.2rem;
        box-sizing: border-box;
        ::v-deep {
          .el-textarea__inner {
            background: none;
            resize: none;
          }
        }
        input {
          height: 0.29rem;
          border: 0.01rem solid rgba(153, 153, 153, 0.2);
          margin-top: 0.05rem;
          outline: none;
          width: 100%;
          background: none;
          padding-left: 0.2rem;
          box-sizing: border-box;
          font-size: 0.1rem;
          color: #999999;
        }
        .btn {
          height: 0.24rem;
          background: #aa1941;
          font-size: 0.12rem;
          text-align: center;
          color: #ffffff;
          margin-top: 0.1rem;
          line-height: 0.24rem;
        }
      }
      .list-box {
        ul {
          li {
            display: flex;
            align-items: center;
            padding: 0.04rem 0 0.04rem 0;
            &:nth-child(even) {
              .text {
                background: none;
              }
            }
            .icon {
              width: 0.04rem;
              height: 0.04rem;
              background: #aa1941;
              border-radius: 50%;
            }
            .text {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 0.12rem;
              color: #666666;
              padding-left: 0.02rem;
              width: 100%;
              background: rgba(153, 153, 153, 0.2);
              margin-left: 0.07rem;
            }
          }
        }
      }
    }
  }
}
</style>