<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><span>定价：</span><i>199¥</i></p>
            <p><span>作者：</span><i>基础数据维护及档案管理</i></p>
            <p><span>出版时间：</span><i>基础数据维护及档案管理</i></p>
            <p><span>ISBN：</span><i>基础数据维护及档案管理</i></p>
          </div>
        </div>
      </div>
      <div class="v-code-box">
        <div class="block"></div>
        <div class="text">手机扫码浏览</div>
      </div>
    </div>
    <div class="book-det-bottom">
      <div class="catalog">
        <div class="title">目录</div>
        <ul>
          <li>
            <div class="chapter">第一章</div>
            <div class="node" @click="goChapter">第一节</div>
          </li>
          <li>
            <div class="chapter">第一章</div>
            <div class="node" @click="goChapter">第一节</div>
          </li>
          <li>
            <div class="chapter">第一章</div>
            <div class="node" @click="goChapter">第一节</div>
          </li>
        </ul>
      </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">往价计子断选社界他界四收半很导条回于问个地给资政色金美关做除当打目商马层消酸龙信样世手除制二美信很按划从专我。</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: 1109px;
  margin: 0 auto;
}
.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: auto;
    // 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{
        margin-top: 24px;
        p{
          font-size: 14px;
          color: #666666;
          line-height: 20px;
          margin-bottom: 8px;
          display: flex;
          span{
            width: 70px;
            font-size: 14px;
            font-weight: bold;
            color: #222222;
            line-height: 20px;
            white-space: nowrap;
          }
          i{
            max-width: 400px;
            font-style: normal;
            font-size: 14px;
            color: #717171;
            line-height: 20px;
          }
        }
      }
      .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;
}
</style>
