<template>
  <div class="basic-container">
    <div class="basic-title">基本信息</div>
    <!-- <div v-if="projectNo" class="content">
      <span>项目编号</span>
      <span>{{projectNo}}</span>
    </div> -->
    <!-- <div class="pro-name">
      <span class="title">项目名称</span>
      <span class="name">{{projectName}}</span>
    </div>
    <div class="content">
      <span>学习范围</span>
      <span>{{scope}}</span>
    </div> -->
    <div class="content">
      <span>起止时间</span>
      <span>{{startDate | formatTime('{y}.{m}.{d}')}}至{{endDate | formatTime('{y}.{m}.{d}')}}</span>
    </div>
    <div class="content">
      <span>主办单位</span>
      <span>{{organName}}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    projectNo: {
      type: String,
      default: "GWKX-20180326-42843"
    },
    credit: {
      type: String,
      default: ""
    },
    level: {
      type: String,
      default: ""
    },
    scope: {
      type: String,
      default: ""
    },
    startDate: {
      type: Number,
      default: ""
    },
    endDate: {
      type: Number,
      default: ""
    },
    organName: {
      type: String,
      default: ""
    },
    remind: {
      type: String,
      default: ""
    },
    projectCredit: {
      type: String,
      default: ""
    },
    projectName: {
      type: String,
      default: ""
    }
  }
};
</script>
<style lang="less" scoped>
.basic-container {
  padding-bottom: 20px;
  margin: 30px 15px 0px;
  // border-bottom: 1px solid #e7e8e9;
  .basic-title {
    font-size: 18px;
    line-height: 18px;
    color: #373839;
    font-weight: 700;
  }
  .pro-name {
    display: flex;
    flex-direction: row;
    margin-top: 16px;
    font-size: 14px;
    span {
      display: flex;
      font-size: 14px;
      align-items: center;
      line-height: 22px;
      align-content: flex-start;
      text-align: justify;
      &.title {
        width: 84px;
        color: #979899;
      }
      &.name {
        flex: 1;
        color: #676869;
      }
    }
  }
  .content {
    margin-top: 16px;
    height: 16px;
    line-height: 0px;
    span {
      display: inline-block;
      font-size: 14px;
      .split {
        display: inline-block;
        position: relative;
        top: 2px;
        left: 0;
        width: 1px;
        height: 13px;
        margin: 0 2px;
        background: #676869;
      }
    }
    span:first-child {
      color: #979899;
    }
    span:last-child {
      margin-left: 15px;
      color: #676869;
    }


  }
  .remind {
    line-height: 14px;
    margin-top: 10px;
    span {
      position: relative;
      display: inline-block;
      padding: 5px 10px;
      margin-left: 78px;
      font-size: 14px;
      color: #fb5b52;
      background: #fceeed;
      border-radius: 4px;
    }
    span:after {
      content: "";
      position: absolute;
      left: 10px;
      bottom: 20px;
      width: 0;
      height: 0;
      border-width: 0 8px 8px;
      border-style: solid;
      border-color: transparent transparent #fceeed;
    }
  }
}
</style>
