数字教材相关

杨磊

1 天以前 cabc1ce19c57a7c7388502952eaaafd558363145

 src/views/bookStore/detail.vue

@@ -1,215 +1,938 @@
<template>
  <div style="background-color: #fff;" ref="contentData">
    <detailInfo :bookInfo="bookInfo" v-loading="loading"></detailInfo>
    <div class="contentBox" style="display: flex;">
      <div>
        <bookInfo :bookInfo="bookInfo" v-loading="loading" />
        <resource
          :bookInfo="bookInfo"
          :resourceSupportList="resourceSupportList"
          :allResource="allResource"
          v-loading="resourceLoading"
        />
  <div class="homePage">
    <div class="infoBox">
      <div class="contentBox">
        <div class="crumbs">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ name: 'bookStore' }">数字教材</el-breadcrumb-item>
            <el-breadcrumb-item>详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="infoTag" v-if="bookInfo.projectTitle">
          <el-tooltip
            class="item"
            effect="dark"
            :content="bookInfo.projectTitle"
            placement="top-start"
          >
            <div class="tagText">
              {{ bookInfo.projectTitle }}
            </div>
          </el-tooltip>
        </div>
        <div class="bookDetail">
          <div class="bookImg">
            <img class="autoImg" :src="bookInfo.icon" alt="" />
          </div>
          <span class="iconfont icon-tubiaozhizuo"></span>

          <div class="detailBox">
            <div class="bookTitle">
              <div class="bookName" :title="bookInfo.name">
                {{ bookInfo.name }}
              </div>
              <div class="bookTag" :title="bookInfo.seriesName">
                {{ bookInfo.seriesName }}
              </div>
              <div class="collectBox">
                <img
                  @click="collectBook"
                  v-if="bookInfo.isFavourite"
                  class="buyIcon"
                  src="@/assets/images/bookStore/shoucang.svg"
                  style="margin-right: 10px"
                />
                <span
                  @click="collectBook"
                  v-else
                  class="iconfont icon-shoucang"
                  style="margin-right: 10px"
                >
                </span>
                <div class="collectText" @click="collectBook" v-if="bookInfo.isFavourite">
                  已收藏
                </div>
                <div class="collectText" @click="collectBook" v-else>收藏</div>
              </div>
            </div>
            <div class="authorBox">
              <div class="titleBox1">
                <div>作者：</div>
                <div>出版时间：</div>
              </div>
              <div class="valueBox">
                <div>
                  {{ bookInfo.author ? bookInfo.author : '-' }}
                </div>
                <div>
                  {{
                    bookInfo.publicationDate
                      ? moment(bookInfo.publicationDate).format('YYYY-MM-DD')
                      : '-'
                  }}
                </div>
              </div>
              <div class="titleBox1" style="margin-left: 30px">
                <div>ISBN：</div>
                <div>版次：</div>
              </div>
              <div class="valueBox">
                <div>
                  {{ bookInfo.isbn ? bookInfo.isbn : '-' }}
                </div>
                <div>
                  {{ bookInfo.pubNumber ? bookInfo.pubNumber : '-' }}
                </div>
              </div>
            </div>
            <div class="authorBox" style="box-sizing: border-box">
              <div class="titleBox1">
                <div>一级分类：</div>
                <div>二级分类：</div>
              </div>
              <div class="valueBox">
                <div>全国高等职业教育预防医学专业规划教材</div>
                <div>高等职业教育</div>
              </div>
            </div>
            <div class="purchaseBox">
              <div class="priceBox">
                <span v-if="bookInfo.price && bookInfo.price > 0">
                  <span>定价：</span><span>￥</span> <span>{{ bookInfo.price || '-' }}</span
                  ><span v-if="bookInfo.VirtualPrice">原价：￥{{ bookInfo.VirtualPrice }}</span>
                </span>

                <span class="price" v-else>
                  <span class="freePrice">免费</span>
                </span>
              </div>
              <div
                class="buyInfo"
                v-if="
                  (currentRoute !== 'teachingServices' && bookInfo.paperBookDD) ||
                  bookInfo.paperBookJD ||
                  bookInfo.paperBookTmall
                "
              >
                纸质书其他购买渠道：
                <span @click="toJDLink" v-if="bookInfo.paperBookJD">
                  <img class="buyIcon" src="@/assets/images/bookStore/京东icon-01.svg" />京东</span
                >
                <span @click="toDDLink" v-if="bookInfo.paperBookDD"
                  ><img class="buyIcon" src="@/assets/images/bookStore/当当网.svg" />当当</span
                >
                <span @click="toTmLink" v-if="bookInfo.paperBookTmall"
                  ><img
                    class="buyIcon"
                    src="@/assets/images/bookStore/tianmaologo2.svg"
                  />天猫</span
                >
              </div>
            </div>
            <div class="btnBox">
              <el-button
                v-if="
                  currentRoute !== 'teachingServices' &&
                  !bookInfo.alreadyBuy &&
                  bookInfo.isSell &&
                  bookInfo.isSell == '1'
                "
                type="primary"
                :disabled="bookInfo.alreadyBuy"
                @click="gotoOrder"
                >电子书购买</el-button
              >
              <el-button
                v-if="bookInfo.pdfFreeFile && !bookInfo.alreadyBuy"
                type="primary"
                plain
                style="min-width: 98px"
                @click="previewBook"
                >试读</el-button
              >
              <el-button
                v-else-if="bookInfo.pdfFile && bookInfo.alreadyBuy"
                type="primary"
                plain
                style="min-width: 98px"
                @click="previewBook"
                >立即阅读</el-button
              >
              <el-button
                v-if="currentRoute == 'teachingServices' && !bookInfo.alreadyBuy"
                plain
                @click="addEbook"
                >电子样书</el-button
              >
              <el-button v-if="currentRoute == 'teachingServices'" plain @click="addPaperBook"
                >纸质样书</el-button
              >
              <el-button plain @click="applyTextBook">申请使用</el-button>
            </div>
          </div>
        </div>
        <el-dialog title="联系编辑" :visible.sync="contactVisible" width="30%" :lock-scroll="false">
          <div class="contactBox" v-if="bookInfo.editor">
            <div class="contacItem">
              <i class="iconfont icon-renwu-ren contacIcon"></i>
              {{ bookInfo.editor.name }}
            </div>
            <div class="contacItem">
              <i class="iconfont icon-QQ contacIcon"></i>
              {{ bookInfo.editor.qq }}
            </div>
            <div class="contacItem">
              <i class="iconfont icon-tongxunlu contacIcon"></i>
              {{ bookInfo.editor.phone }}
            </div>
            <div class="contacItem">
              <i class="iconfont icon-dianhua contacIcon"></i>
              {{ bookInfo.editor.telephone }}
            </div>
          </div>
          <el-empty v-else description="暂无数据" class="empty" :image-size="100"></el-empty>
        </el-dialog>
        <el-dialog title="信息反馈" :visible.sync="dialogVisible" width="50%" :lock-scroll="false">
          <div class="infoDialog">
            <el-input
              type="textarea"
              :rows="8"
              placeholder="详细描述您所遇到的问题，有助于快速给您反馈！"
              v-model="textarea"
            >
            </el-input>
            <div class="subBtn">
              <el-button type="primary" @click="sendDiscuss">提交</el-button>
            </div>
            <div class="infoList">
              <div class="infoItem" v-for="(item, index) in commentList" :key="index">
                <div class="infoImg">
                  <img v-if="item.icon" class="autoImg" :src="item.icon" alt="" />
                  <i v-else class="el-icon-user-solid"></i>
                </div>
                <div class="infoContent">
                  <div class="infoTitle">
                    <div class="userNameBox">{{ item.content.name }}</div>
                    <div class="userNameBox">
                      {{ moment(item.createDate).format('YYYY-MM-DD') }}
                    </div>
                  </div>
                  <div class="infoText">
                    {{ item.content.content }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
      <div>
        <relatedRecommendation
          :bookInfo="bookInfo"
          :recommendKey="recommendKey"
          @reloadPage="reloadPage"
          ref="rela"
        />
        <!-- <history @reloadPage="reloadPage" /> -->
    </div>

    <div class="detailContent contentBox">
      <div class="resourceBox">
        <div class="tabsBox">
          <el-tabs v-model="editableTabsValue" type="card" class="demo-tabs">
            <el-tab-pane
              v-for="item in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
            >
              {{ item.content }}
            </el-tab-pane>
          </el-tabs>
        </div>
        <div v-if="editableTabsValue == '1'" class="textbookInfo">
          <div class="textbookInfoItem">
            <div class="titleBorderBox">图书简介</div>
            <div class="textbookContent" v-if="bookInfo.content" v-html="bookInfo.content"></div>
            <div v-else>
              <el-empty description="暂无数据" />
            </div>
          </div>
          <div class="textbookInfoItem">
            <div class="titleBorderBox">作者简介</div>
            <div
              class="authorInfo"
              v-if="bookInfo.authorIntroduction"
              v-html="bookInfo.authorIntroduction"
            ></div>
            <div v-else>
              <el-empty description="暂无数据" />
            </div>
          </div>
        </div>
        <div v-else-if="editableTabsValue == '2'" class="catalogue">bbbb</div>
        <div v-else-if="editableTabsValue == '6'" class="supportingResources">
          <div class="resourcesBox">
            <el-empty v-if="!resourceHave" :image-size="150" description="暂无内容"></el-empty>
            <div class="distribution" v-if="resourceHave">
              <div class="title">资源分布</div>
              <div class="echartsBox">
                <div class="left">
                  <div id="chartsContent" style="width: 600px; height: 400px"></div>
                </div>
                <div class="right">
                  <div>
                    <p>资源种类</p>
                    <p>
                      <span class="num">{{ resourceData.length }}</span
                      >种
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="recommendBox">
        <div class="recommendTitle">推荐教材</div>
        <div class="newRecommendList">
          <div class="recommendItem" v-for="item in recommendBookListData" :key="item.id">
            <div class="recommendItemImg">
              <img class="autoImg" :src="item.icon" />
            </div>
            <div class="infoBox2">
              <div class="bookName2">{{ item.name }}</div>
              <div class="author2">
                作者：{{ item.authorcaupress_author ? item.caupress_author : '-' }}
              </div>
              <div class="priceBox2">
                <span class="oldPrice" v-if="item.oldPrice">原价：¥{{ item.oldPrice }}</span>
                <span class="price" v-if="item.price && item.price > 0">
                  定价：¥
                  <span>{{ item.price }}</span>
                </span>
                <span class="price" v-else> 定价：<span class="freePrice">免费</span> </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import config from "@/assets/js/config";
<script setup>
import moment from 'moment'
import axios from 'axios'
import * as echarts from 'echarts'
import imgIcon from '@/assets/images/digitalTextbooks/img.png'
import AudioIcon from '@/assets/images/digitalTextbooks/Audio.png'
import DIcon from '@/assets/images/digitalTextbooks/3D.png'
import PPTIcon from '@/assets/images/digitalTextbooks/PPT.png'
import shijuanIcon from '@/assets/images/digitalTextbooks/shijuan.png'
import shixunIcon from '@/assets/images/digitalTextbooks/shixun.png'
import tuozhanIcon from '@/assets/images/digitalTextbooks/tuozhan.png'
import videoIcon from '@/assets/images/digitalTextbooks/video.png'
import VRIcon from '@/assets/images/digitalTextbooks/VR.png'
import ziliaoIcon from '@/assets/images/digitalTextbooks/ziliao.png'
import { ref, onBeforeMount, inject, reactive, onMounted, watchEffect } from 'vue'
const MG = inject('MG')
const config = inject('config')
import { useRouter, useRoute } from 'vue-router'
import { applyBookStore } from '@/store'
const route = useRoute()
const router = useRouter()
let bookInfo = ref({})
let digitalTextId = ref('')
let resourceData = ref([])
let recommendBookListData = ref([])
let editableTabsValue = ref('1')
let resourceHave = ref(true)
var chartDom = null
var myChart = {}
var option = null
const editableTabs = reactive([
  {
    title: '教材信息',
    name: '1',
  },
  {
    title: '目录',
    name: '2',
  },
  {
    title: '配套资源',
    name: '3',
  },
  {
    title: '题库',
    name: '4',
  },
  {
    title: '教师资源',
    name: '5',
  },
  {
    title: '资源统计',
    name: '6',
  },
])

import detailInfo from "@/components/detail/detailInfo.vue";
import relatedRecommendation from "@/components/detail/relatedRecommendation.vue";
import bookInfo from "@/components/detail/bookInfo.vue";
import resource from "@/components/detail/resource.vue";
import history from "@/components/detail/history.vue";
export default {
  components: {
    detailInfo,
    relatedRecommendation,
    bookInfo,
    resource,
    // history,
  },
  created() {
    if (this.$route.query.id && this.$route.query.cmsPath) {
      this.currentId = this.$route.query.id;
      this.currentCmsId = this.$route.query.cmsPath;
      this.getData();
    }
    window.scrollTo(0, 0);
    this.getData();
  },
  data() {
    return {
      bookInfo: {},
      resourceSupportList: [],
      allResource: [],
      loading: true,
      resourceLoading: true,
      recommendKey: "",
    };
  },
  methods: {
    getData(data) {
      this.loading = true;
      let query = {
        path: "*",
        queryType: "*",
        productId: data ? data.id : this.$route.query.id,
        cmsPath: data ? data.rootCmsItemId : this.$route.query.cmsPath, //获取书籍文件夹
        fields: {
          caupress_author: [],
          caupress_content: [],
          caupress_seriesName: [],
          caupress_publicationDate: [],
          caupress_ISBN: [],
          caupress_pubNumber: [],
          caupress_authorAbout: [],
          caupress_recommendationReason: [],
          caupress_preface: [],
          caupress_catalog: [],
          caupress_pdfFreeFile: [],
          caupress_paperBookJD: [],
          caupress_paperBookDD: [],
          caupress_catalogue: [],
          caupress_projectTitle: [],
          caupress_pdfFile: [],
          caupress_contactEditor: [],
          caupress_paperBookTmall: [],
          caupress_isSell: [],
        },
        linkTypes: [
          // 获取关联的编辑信息
          {
            linkType: "caupress_editor",
            fields: {
              telephone: [],
              phone: [],
              qq: [],
            },
          },
        ],
      };
      // 获取书籍详情以及书籍资源文件夹
      this.MG.store.getProductDetail(query).then((res) => {
        console.log(res, "res");
        this.bookInfo = res.datas;
        if (this.bookInfo.caupress_catalogue) {
          this.bookInfo.caupress_catalogue = JSON.parse(
            this.bookInfo.caupress_catalogue
          );
          // 获取层次进行相关推荐
onMounted(() => {
  digitalTextId.value = route.query.bookId
  getBookDetail(digitalTextId.value)
  getRecommendBookList()
})

          this.recommendKey = this.bookInfo.caupress_catalogue[0];
          console.log(this.recommendKey, "this.recommendKey");
          if (this.recommendKey.length > 0) {
            this.catalogue = [];
            this.recommendKey.forEach((item, index) => {
              if (index == 0) {
                this.catalogue.push(item);
              } else {
                this.catalogue.push("&" + item);
              }
            });
          }
          this.$refs.rela.getData(this.catalogue);
watchEffect(() => {
  if (editableTabsValue.value == '6') {
    getBookResource()
  }
})

//申请试用
const applyTextBook = () => {
  localStorage.setItem('applyBookInfo', JSON.stringify(bookInfo.value))
  router.push({
    path: '/textBookApply',
  })
}

const getRecommendBookList = () => {
  MG.store
    .getProductList({
      path: 'recommendedTextbooks',
      paging: {
        start: 0,
        size: 5,
      },
      fields: {
        author: [],
      },
    })
    .then((res) => {
      console.log(res, '推荐教材')
      recommendBookListData.value = res.datas
    })
}

const getBookResource = () => {
  try {
    axios
      .get('https://yxjy.pumcp.com/books/resource/' + bookInfo.value.refCode + '/resource.json')
      .then(async (res) => {
        console.log(res, 'resource')
        if (res.data.length > 0) {
          res.data.forEach((item) => {
            if (item.resourceTypeShow == '图片') {
              item.icon = imgIcon
            } else if (item.resourceTypeShow == '视频') {
              item.icon = videoIcon
            } else if (item.resourceTypeShow == '音频') {
              item.icon = AudioIcon
            } else if (item.resourceTypeShow == 'PPT') {
              item.icon = PPTIcon
            } else if (item.resourceTypeShow == '拓展') {
              item.icon = tuozhanIcon
            } else if (item.resourceTypeShow == '资料') {
              item.icon = ziliaoIcon
            } else if (item.resourceTypeShow == '试卷') {
              item.icon = shijuanIcon
            } else if (item.resourceTypeShow == '3D') {
              item.icon = DIcon
            } else if (item.resourceTypeShow == '实训') {
              item.icon = shixunIcon
            } else if (item.resourceTypeShow == 'VR') {
              item.icon = VRIcon
            } else {
              item.icon = ziliaoIcon
            }
          })
          resourceData.value = await groupByResourceTypeShow(res.data)
          resourceHave.value = true
          console.log(resourceData.value, 'resourceData')
          initChart(resourceData.value)
        } else {
          this.recommendKey = "null";
          resourceHave.value = false
        }
        // 获取关联的编辑信息
        let query = this.bookInfo.cmsDatas.find(
          (item) => item.queryTag == "QueryLink_" + "caupress_editor"
        );
        if (query && query.datas.length) {
          this.bookInfo.caupress_editor = {
            name: query.datas[0].name,
            telephone: query.datas[0].telephone,
            phone: query.datas[0].phone,
            qq: query.datas[0].qq,
          };
        }
        if (this.bookInfo.caupress_projectTitle) {
          this.bookInfo.caupress_projectTitle = JSON.parse(
            this.bookInfo.caupress_projectTitle
          );
        }
        if (this.bookInfo.caupress_projectTitle instanceof Array) {
          if (this.bookInfo.caupress_projectTitle.length > 1) {
            this.bookInfo.caupress_projectTitle =
              this.bookInfo.caupress_projectTitle.join("、");
          } else {
            this.bookInfo.caupress_projectTitle =
              this.bookInfo.caupress_projectTitle[0];
          }
        }
        this.bookInfo.VirtualPrice = this.bookInfo.saleMethod[0]?.VirtualPrice;
        this.bookInfo.caupress_seriesName =
          config.seriesList[this.bookInfo.caupress_seriesName];
        if (this.bookInfo.caupress_pubNumber) {
          this.bookInfo.caupress_pubNumber =
            this.bookInfo.caupress_pubNumber.split("_")[1];
        }
        this.loading = false;
        this.$store.commit("setHistoryBook", this.bookInfo);
        let folderList = res.datas.cmsDatas[0].datas;
        folderList.forEach((item) => {
          if (item.name == "配套资源") {
            this.MG.store
              .getProductDetail({
                path: "*",
                cmsPath: res.datas.rootCmsItemId + "\\" + item.id, //书籍文件夹ID获取文件夹中资源
                productId: this.currentId,
                queryType: "*",
                itemFields: {
                  caupress_fileType: [],
                  caupress_file: [],
                  caupress_allowDownload: [],
                },
              })
              .then((dataRes) => {
                console.log(dataRes, "resourceSupportList");
                this.resourceSupportList = dataRes.datas.cmsDatas[0].datas;
              });
          } else {
            this.MG.store
              .getProductDetail({
                path: "*",
                cmsPath: res.datas.rootCmsItemId + "\\" + item.id, //书籍文件夹ID获取文件夹中资源
                productId: this.currentId,
                queryType: "*",
                itemFields: {
                  caupress_fileType: [],
                  caupress_file: [],
                  caupress_allowDownload: [],
                },
              })
              .then((dataRes) => {
                console.log(dataRes, "allResource");
                this.allResource = dataRes.datas.cmsDatas[0].datas;
              });
          }
        });
        // 获取联系编辑信息
      })
      .catch((error) => {
        console.log(error, 'error1')

        this.resourceLoading = false;
      });
        resourceData = []
        resourceHave = false
      })
  } catch (error) {
    console.log(error, 'error')
    resourceData = []
    resourceHave = false
  }
}

const groupByResourceTypeShow = (resources) => {
  const grouped = resources.reduce((acc, item) => {
    const key = item.resourceTypeShow
    if (!acc[key]) {
      acc[key] = {
        resourceTypeShow: key,
        list: [],
      }
    }
    acc[key].list.push(item)
    return acc
  }, {})
  return Object.values(grouped)
}

const initChart = (data) => {
  let dataList = []
  let num = []
  data.forEach((item) => {
    dataList.push(item.resourceTypeShow)
    num.push(item.list.length)
  })
  chartDom = document.getElementById('chartsContent')
  console.log(chartDom, 'chartDom')

  myChart = echarts.init(chartDom)
  myChart.setOption({
    tooltip: {},
    xAxis: {
      data: dataList,
    },
    reloadPage(data) {
      this.getData(data);
      window.scrollTo(0, 0);
    yAxis: {},
    series: [
      {
        name: '数量',
        type: 'bar',
        data: num,
        itemStyle: {
          color: function (params) {
            // params.dataIndex是数据项的索引，你可以根据这个索引来设置不同的颜色
            const colors = [
              '#5EA1FF',
              '#FF5A85',
              '#7E7AFF',
              '#3CB768',
              '#FF8F54',
              '#FF574B',
              '#3DB0BF',
              '#FBBB3B',
              '#3B5EFB',
              '#B1FB3B',
            ]
            return colors[params.dataIndex % colors.length]
          },
        },
      },
    ],
  })
}

const getBookDetail = (id) => {
  const query = {
    path: '*',
    queryType: '*',
    productId: id,
    storeInfo: 'defaultGoodsStore1',
    coverSize: {
      height: 300,
      width: 210,
    },
  },
};
    fields: {
      author: [],
      isbn: [],
      editionPrinting: [],
      publicationDate: [],
      content: [],
      authorIntroduction: [],
      catalogue: [],
      probationPage: [],
      teachingLevel: [],
      professionalCategory: [],
      executiveEditor: [],
    },
  }
  MG.store.getProductDetail(query).then((res) => {
    console.log(res, 'res')
    bookInfo.value = res.datas
    console.log(res.datas, 'res')
  })
}
</script>

<style></style>
<style lang="less" scoped>
.homePage {
  min-width: 1220px;
  min-height: calc(100vh - 61.8%);
  background-color: #fff;
  padding-bottom: 100px;
}

.infoBox {
  width: 100%;
  height: 530px;
  padding-top: 10px;
  background-color: #fff;
  background-image: url('@/assets/images/xiehe/detail/details_bg.png');
}
.infoTag {
  position: relative;
  width: 0px;
  height: 0px;
  border-right: 20px solid #fff;
  border-left: 503px solid #e50021;
  border-top: 19px solid #e50021;
  border-bottom: 19px solid #e50021;
}
.tagText {
  position: absolute;
  left: -480px;
  top: -9.5px;
  max-width: 480px;
  text-overflow: ellipsis;
  color: #fff;
  font-size: 18px;
  overflow: hidden;
  white-space: nowrap;
}
.bookDetail {
  display: flex;
  overflow: hidden;
  margin-top: 30px;
}
.bookImg {
  position: relative;
  width: 338px;
  height: 400px;
  box-shadow: 2px 2px 10px #f2f2f2;
}
.detailBox {
  flex: 1;
  height: 450px;
  position: relative;
  margin-top: 20px;
  overflow: hidden;
}
.collectBox {
  position: absolute;
  right: 80px;
  font-size: 14px;
  color: #999999;
  cursor: pointer;
}

.collectBox span:nth-child(1) {
  margin-right: 10px;
  font-size: 16px;
}
.collectBox span:nth-child(2) {
  margin-left: 10px;
  margin-right: 10px;

  font-size: 16px;
}
.iconfont {
  font-size: 25px !important;
  vertical-align: middle;
}
.bookTitle {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding-left: 100px;
  display: flex;
  padding-right: 240px;
  box-sizing: border-box;
}
.collectText {
  font-size: 16px;
  line-height: 25px;
  display: inline-block;
}
.bookName {
  flex: 1;
  font-size: 26px;
  color: #333;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.bookTag {
  max-width: 200px;
  font-size: 16px;
  color: #333;
  line-height: 36px;
  margin-left: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.authorBox {
  width: 80%;
  display: flex;
  padding: 20px;
  padding-left: 100px;
  position: relative;
}
.valueBox {
  margin-left: 20px;
}
.valueBox div {
  height: 30px;
}
.titleBox1 div {
  height: 30px;
}
.relationBox {
  position: absolute;
  right: 50px;
  color: #999;
  cursor: pointer;
  font-size: 14px;
}
.purchaseBox {
  margin-left: 100px;
  padding-top: 20px;
}
.priceBox {
  border-bottom: 1px dashed #ececec;
  background-color: #b2d9c8;
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
}
.priceBox span:nth-child(1) {
  color: #000;
  font-weight: 700;
  font-size: 16px;
  padding-right: 20px;
}
.priceBox span:nth-child(2) {
  color: #e50021;
  font-size: 16px;
}
.priceBox span:nth-child(3) {
  color: #e50021;
  font-size: 22px;
  font-weight: 700;
  padding-right: 20px;
}
.priceBox span:nth-child(4) {
  color: #333;
  font-size: 16px;
  padding-right: 20px;
  text-decoration: line-through;
}
.buyInfo {
  padding: 20px 0px;
  border-bottom: 1px dashed #ececec;
  cursor: pointer;
}
.buyInfo img {
  margin-left: 10px;
}
.btnBox {
  margin-left: 100px;
  margin-top: 30px;
}
.infoItem {
  display: flex;
  margin-top: 40px;
}
.infoImg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: #efefef;
  text-align: center;
  line-height: 60px;
  position: relative;
}
.infoImg i {
  font-size: 28px;
}
.infoList {
  margin-top: 20px;
  overflow: auto;
}
.infoContent {
  flex: 1;
  overflow: hidden;
  padding: 0 20px 0 10px;
}
.infoDialog {
  padding: 20px;
}
.infoTitle {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.infoText {
  margin-top: 24px;
  line-height: 20px;
}
.contactBox {
  padding: 0px 40px;
}
.contacItem {
  margin-top: 20px;
}
.contacIcon {
  padding-right: 20px;
}
.subBtn {
  margin-top: 20px;
  text-align: right;
}
.buyIcon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
.crumbs {
  margin-top: 10px;
  border-bottom: 1px solid rgba(20, 73, 65, 0.26);
  padding-bottom: 20px;
}

.detailContent {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  .resourceBox {
    width: 76%;
  }
  .textbookInfo {
    padding: 20px 0;
  }
}
.titleBorderBox {
  height: 30px;
  line-height: 30px;
  font-weight: 700;
  border-left: 6px solid #019e58;
  padding-left: 20px;
  font-size: 18px;
}
.textbookInfoItem {
  margin-top: 20px;
}

.distribution {
  .title {
    margin: 10px 0;
    font-weight: bold;
  }
  .echartsBox {
    height: 400px;
    border-radius: 7px 7px 7px 7px;
    border: 1px solid #e4e7ed;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .left {
  }
  .right {
    background: rgba(64, 158, 255, 0.09);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 200px;
    p {
      line-height: 30px;
    }
    .num {
      font-size: 18px;
      font-weight: bold;
    }
  }
  .list {
    display: flex;
    margin-bottom: 40px;
    .listItem {
      width: 100px;
      display: block;
      box-sizing: border-box;
      .imgBox {
        margin: 0 auto;
        position: relative;
        width: 80px;
        height: 80px;
      }
      .bookInfo {
        margin: 0;
        overflow: hidden;
        text-align: center;
        .title {
          color: #333;
          margin: 10px 0;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }
}

.recommendBox {
  width: 23%;
  border: 1px solid #e4e7ed;
  border-radius: 10px;
  .recommendTitle {
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    border-bottom: 1px solid #e4e7ed;
    color: #333333;
    font-weight: 700;
  }
}

.newRecommendList {
  padding-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .recommendItem {
    margin-right: 20px;
    height: 300px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    background-color: #fff;
    padding-top: 10px;
    margin-top: 10px;
    &:last-child {
      margin-right: 0;
    }
  }
  .recommendItemImg {
    width: 150px;
    height: 200px;
    position: relative;
    margin: 0 auto;
  }
  .infoBox2 {
    text-align: center;
    margin-top: 10px;
  }
  .author2 {
    margin-top: 10px;
  }
  .priceBox2 {
    margin-top: 10px;
    .oldPrice {
      font-size: 16px;
      color: #444444;
      text-decoration: line-through;
      margin-right: 20px;
    }
    .price {
      span {
        font-weight: bold;
        font-size: 14px;
      }
    }
  }
}
</style>