<template>
  <div class="content-max-width">
    <breadcrumb class="content-max-width crumb" :data="crumbData"/>
    <div class="train-detail-box content-max-width">
      <div class="content-left">
        <div class="title">{{ data.title }}</div>
        <div class="item-box">
          <img :src="data.cover_pc_url" alt="">
          <div class="right-content">
            <!-- <div class="title">关于1+X金融数字化营销证书考核站点申报的通知</div> -->
            <div class="des-box" v-html="data.content">
              <p class="ind">作者：基础数据维护及档案管理</p>
              <p>出版时间：基础数据维护及档案管理</p>
              <p class="ind">ISBN：基础数据维护及档案管理</p>
              <p>书籍简介：基础数据维护及档案管理</p>
            </div>
            <router-link to="/train/form">
              <div class="detail-btn">在线报名</div>
            </router-link>
          </div>
        </div>
      </div>
      <div class="content-card" v-if="data.excerpt != null">
        <div class="tit">最新会议</div>
        <div class="text" v-html="data.excerpt">生实解着利土具度海张际取得时美议九报当社并因或争拉青再大精周不院指权展理会后市中议候只土写海院油称县白力反油子特军再六红省采大队清</div>
        <!-- <div class="btn-boxs">
          <div class="btns">确定</div>
        </div> -->
      </div>
    </div>
  </div>
</template>
<script>
import item from './components/item'
import action from '@action'
import breadcrumb from '@/components/breadcrumb'
export default {
  components: {
    item,
    breadcrumb
  },
  data() {
    return {
      crumbData: [
        {
          path: '/',
          name: '首页'
        },
        {
          name: '师资培训'
        }
      ],
      data: {}
    }    
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      action.articleAction.getArticleDetail(this.$route.query.id).then(res => {
        this.data = res.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content-max-width{
  width: 1112px;
  margin: 0 auto;
}
.train-detail-box{
  display: flex;
  padding-top: 12px;
  .title{
    width: 753px;
    line-height: 50px;
    border-bottom: 1px solid #eee;
    font-size: 18px;
    font-weight: bold;
    color: #C01540;
  }
}
.content-left{
  width: 753px;
}
.item-box{
  padding: 24px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  img{
    width: 200px;
    height: 100px;
    display: block;
  }
  .right-content{
    margin-left: 24px;
    .title{
      font-size: 18px;
      font-weight: bold;
      color: #C01540;
      line-height: 25px;
    }
    .des-box{
      // margin-top: 24px;
      p{
        font-size: 14px;
        color: #666666;
        line-height: 20px;
        margin-bottom: 8px;
        &.ind{
          text-indent: 2em;
        }
      }
    }
    .detail-btn{
      color: #fff;
      text-align: center;
      line-height: 36px;
      width: 96px;
      height: 36px;
      background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
      border-radius: 4px;
      margin-top: 70px;
    }
  }
}
.content-card{
  margin-top: 20px;
  margin-left: auto;
  width: 336px;
  background: #FFFFFF;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.06);
  height: auto;
  height: max-content;  
  .tit{
    height: 58px;
    line-height: 58px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #222222;
    line-height: 58pxpx;
    padding-left: 20px;
    box-sizing: border-box;
  }
  .text{
    padding: 10px 20px 20px;
    font-size: 16px;
    color: #C01540;
    line-height: 22px;
  }
  .btn-boxs{
    height: 56px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    .btns{
      line-height: 36px;
      text-align: center;
      width: 62px;
      height: 36px;
      background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
      border-radius: 4px;
      margin-left: auto;
      margin-right: 24px;
      color: #fff;
    }
  }
}
.crumb{
  padding-top: 24px;
}
</style>
