<template>
  <div class="chapter-box">
    <breadcrumb class="content-max-width crumb" :data="crumbData"/>
    <div class="intr">
      <div class="title">
        <div class="content-max-width">资源介绍</div>
      </div>
      <div class="content content-max-width">
        <div class="con-left">
          <div class="text-box">
            <div class="name">所属课程：</div>
            <div class="nr">金融数字化营销</div>
          </div>
          <div class="text-box">
            <div class="name">上传时间：</div>
            <div class="nr">2020/09/03</div>
          </div>
          <div class="text-box">
            <div class="name">浏览数：</div>
            <div class="nr">35</div>
          </div>
        </div>
        <div class="v-code-box">
          <div class="code"></div>
          <div class="text">手机扫码浏览</div>
        </div>
      </div>
    </div>
    <div class="screenshot">
      <div class="title">
        <div class="content-max-width">屏幕截图</div>
      </div>
      <div class="content-max-width">
        <div class="block"></div>
      </div>
    </div>
  </div>
</template>
<script>
import breadcrumb from '@/components/breadcrumb'
export default {
  components: {
    breadcrumb
  },
  data() {
    return {
      crumbData: [
        {
          path: '/',
          name: '首页'
        },
        {
          path: '/textBook',
          name: '教材中心'
        },
        {
          path: '/textBook/detail',
          name: '金融数字化营销'
        },
        {
          name: '目录'
        }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.crumb{
  padding-bottom: 24px;
}
.content-max-width{
  width: 1109px;
  margin: 0 auto;
}
.chapter-box{
  padding-top: 24px;
  .intr{
    .title{
      width: 100%;
      height: 40px;
      background: #f9f9f9;
      .content-max-width{
        line-height: 40px;
        font-size: 14px;
        font-weight: bold;
        color: #C0004F;
      }
    }
    .content{
      display: flex;
      .con-left{
        width: 427px;
        margin-left: 56px;
        .text-box{
          margin-top: 12px;
          display: flex;
          .name{
            font-size: 14px;
            font-weight: bold;
            color: #222222;
            line-height: 20px;
          }
          .nr{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #717171;
            line-height: 20px;
          }
        }
      }
      .v-code-box{
        width: 136px;
        margin-top: 12px;
        .code{
          width: 136px;
          height: 136px;
          background: #D8D8D8;
        }
        .text{
          font-size: 14px;
          color: #222222;
          line-height: 20px;
          text-align: center;
          margin-top: 8px;
        }
      }
    }
  }
  .screenshot{
    margin-top: 24px;
    .title{
      width: 100%;
      height: 40px;
      background: #f9f9f9;
      .content-max-width{
        line-height: 40px;
        font-size: 14px;
        font-weight: bold;
        color: #C0004F;
      }
    }
    .block{
      width: 444px;
      height: 250px;
      background: #D8D8D8;
      margin: 12px auto;
    }
  }
}
</style>
