<template>
  <div class="book-detail-box content-max-width">
    <!-- <breadcrumb class="content-max-width crumb" :data="crumbData"/> -->
    <div class="bool-det-top">
      <div class="item-box">
        <img src="https://zws-imgs-pub.ezijing.com/static/public/7c63bd40600a040f867fe4db9014fb7c.png" alt="">
        <div class="right-content">
          <div class="title">《金融产品数字化营销职业技能等级认证教材》（初级）</div>
          <div class="des-box">
            <p><span>教材简介：</span><i>本系列教材紧跟金融各行业数字化转型和职业教育的人才培养发展的需求，随行业的数字化转型、数字化营销工具和专业升级等情况及时动态更新。教材设置了思维导图、学习目标、案例实践、问题思考等板块，以职业技能等级标准为依据，结合行业企业用人技能要求的紧迫程度，设计教材内容和框架体系。确定教材各案例实践涵盖的职业技能等级工作任务与就业面向相匹配，以真实案例实践为驱动，促进学生深刻掌握先进技术能力。</i></p>
            <p class="align-r"><span>定价：</span><i>¥39</i></p>
            <p class="align-r cen"><span>数量：</span><input type="text"></p>
            <div class="buy-btn">购买</div>
          </div>
        </div>
      </div>
      <div class="v-code-box" v-if="false">
        <div class="block"></div>
        <div class="text">手机扫码浏览</div>
      </div>
    </div>
    <div class="book-det-bottom">
      <div class="fix-left">
        <div class="material">
          <div class="title">教材介绍</div>
          <div class="content">
            本系列教材紧跟金融各行业数字化转型和职业教育的人才培养发展的需求，随行业的数字化转型、数字化营销工具和专业升级等情况及时动态更新。教材设置了思维导图、学习目标、案例实践、问题思考等板块，以职业技能等级标准为依据，结合行业企业用人技能要求的紧迫程度，设计教材内容和框架体系。确定教材各案例实践涵盖的职业技能等级工作任务与就业面向相匹配，以真实案例实践为驱动，促进学生深刻掌握先进技术能力。
          </div>
          <div class="info">
            <p><span>作者：</span>赵瑾龙</p>
            <p><span>出版时间：</span>2020.10.10</p>
            <p><span>ISBN：</span>2020.10.19—2020.11.20</p>
            <p><span>发行日期：</span>2020.20.20</p>
          </div>
        </div>
        <div class="catalog">
          <div class="title">目录</div>
          <ul>
            <li>
              <div class="chapter">第一章</div>
               <!-- @click="goChapter" -->
              <div class="node">第一节</div>
            </li>
            <li>
              <div class="chapter">第一章</div>
              <div class="node">第一节</div>
            </li>
            <li>
              <div class="chapter">第一章</div>
              <div class="node">第一节</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="author">
        <div class="title">作者</div>
        <div class="item">
          <div class="info-box">
            <img src="https://zws-imgs-pub.ezijing.com/static/public/f064b2cb83039e1d4754993167d73864.png" alt="">
            <div class="info">
              <div class="name">赵瑾龙</div>
              <div class="xx">研究院</div>
            </div>
          </div>
          <div class="intr">
            <div class="name">简介：</div>
            <div class="text">赵瑾龙先生是中国人民银行研究生部经济学博士，现任香港致富证券有限公司首席经济学家，兼任研究院院长、清华大学五道口金融学院硕士生导师、紫荆-印第安纳大学kelley商学院金融学硕士项目责任教授，他主要研究方向是宏观经济、货币政策和投资策略。</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import breadcrumb from '@/components/breadcrumb'
export default {
  components: {
    breadcrumb
  },
  data() {
    return {
      crumbData: [
        {
          path: '/',
          name: '首页'
        },
        {
          path: '/textBook',
          name: '教材中心'
        },
        {
          name: '金融数字化营销'
        }
      ]
    }
  },
  methods: {
    goChapter() {
      this.$router.push({
        path: '/textBook/chapter'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content-max-width{
  width: 1200px;
  margin: 0 auto;
}
.buy-btn{
  width: 150px;
  height: 36px;
  background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #C01540 100%);
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  color: #FFFFFF;
  line-height: 36px;
  margin-top: 16px;
  cursor: pointer;
}
.book-det-bottom{
  display: flex;
  .catalog{
    .title{
      font-size: 18px;
      font-weight: bold;
      color: #C80046;
      line-height: 25px;
      margin-bottom: 24px;
    }
    ul{
      li{
        width: 729px;
        padding: 16px 0;
        border-top: 1px solid #eee;
        .chapter{
          font-size: 18px;
          font-weight: bofld;
          color: #262626;
          line-height: 25px;
        }
        .node{
          font-size: 14px;
          color: #7D7D7D;
          line-height: 20px;
          margin-top: 12px;
          cursor: pointer;
        }
      }
    }
  }
  .author{
    margin-left: auto;
    .title{
      font-size: 18px;
      font-weight: bold;
      color: #C80046;
      line-height: 25px;
      margin-bottom: 24px;
    }
    .item{
      width: 280px;
      border-top: 1px solid #eee;
      margin-top: 24px;
      .info-box{
        padding-top: 16px;
        display: flex;
        align-items: center;
        img{
          width: 80px;
          height: 80px;
        }
        .info{
          margin-left: 16px;
          .name{
            font-size: 18px;
            font-weight: bold;
            color: #2B2B2B;
            line-height: 25px;
          }
          .xx{
            font-size: 14px;
            color: #888888;
            line-height: 20px;
            margin-top: 12px;
          }
        }
      }
      .intr{
        margin-top: 16px;
        display: flex;
        .name{
          font-size: 14px;
          font-weight: bold;
          color: #262626;
          line-height: 20px;
          white-space: nowrap;
        }
        .text{
          font-size: 14px;
          color: #7D7D7D;
          line-height: 20px;
        }
      }
    }
  }
}
.bool-det-top{
  display: flex;
  padding-top: 24px;
}
.book-detail-box{
  .v-code-box{
    width: 136px;
    margin-left: 24px;
    // margin-top: 24px;
    .block{
      width: 136px;
      height: 136px;
      background: #D8D8D8;
      border: 1px solid #979797;
    }
    .text{
      font-size: 14px;
      color: #222222;
      line-height: 20px;
      margin-top: 8px;
      text-align: center;
    }
  }
  .item-box{
    // padding: 24px 0;
    // border-bottom: 1px solid #eee;
    display: flex;
    img{
      width: 258px;
      height: 143px;
      display: block;
    }
    .right-content{
      margin-left: 24px;
      .title{
        font-size: 18px;
        font-weight: bold;
        color: #C01540;
        line-height: 25px;
      }
      .des-box{
        // width: 523px;
        margin-top: 24px;
        p{
          input{
            width: 70px;
            height: 40px;
            border: 1px solid #ccc;
            border-radius: 4px;
            outline: none;
            padding-left: 10px;
          }
          // text-align: right;
          font-size: 14px;
          color: #666666;
          line-height: 20px;
          margin-bottom: 8px;
          display: flex;
          &.cen{
            align-items: center;
          }
          &.align-r{
            text-align: right;
          }
          span{
            width: 70px;
            font-size: 14px;
            font-weight: bold;
            color: #222222;
            line-height: 20px;
            white-space: nowrap;
          }
          i{
            width: 523px;
            font-style: normal;
            font-size: 14px;
            color: #717171;
            line-height: 20px;
            text-align: left;
          }
        }
      }
      .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: 16px;
      }
    }
  }
}
.crumb{
  padding-top: 24px;
}
.material{
  width: 729px;
  margin: 56px 0 30px;
  .title{
    line-height: 57px;
    border-bottom: 1px solid #ddd;
    font-size: 18px;
    font-weight: bold;
    color: #C80046;
  }
  .content{
    font-size: 14px;
    color: #717171;
    line-height: 20px;
    margin-top: 16px;
  }
  .info{
    margin-top: 16px;
    font-size: 14px;
    color: #262626;
    line-height: 20px;
    p{
      margin-bottom: 14px;
    }
    span{
      font-weight: bold;
    }
  }
}
</style>
