From ee213bf458d3961a0560ce3b68a3ad38322ece97 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期一, 25 八月 2025 01:15:06 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/xiehe_website
---
src/views/bookStore/detail.vue | 1107 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 1,107 insertions(+), 0 deletions(-)
diff --git a/src/views/bookStore/detail.vue b/src/views/bookStore/detail.vue
new file mode 100644
index 0000000..aed3219
--- /dev/null
+++ b/src/views/bookStore/detail.vue
@@ -0,0 +1,1107 @@
+<template>
+ <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" v-loading="loading">
+ <div class="bookImg">
+ <img class="autoImg" :src="bookInfo.icon ? bookInfo.icon : defaultImg" 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">
+ <div class="collectText" @click="collectBook" v-if="bookInfo.isFavourite">
+ 宸叉敹钘�
+ </div>
+ <img
+ @click="collectBook"
+ v-if="bookInfo.isFavourite"
+ class="buyIcon"
+ src="@/assets/images/xiehe/detail/Collection_fill.png"
+ style="margin-right: 10px"
+ />
+ <span v-else class="iconfont icon-shoucang" style="margin-right: 10px"> </span>
+
+ <div class="collectText" @click="collectBook" v-else>
+ 鏀惰棌
+
+ <img
+ class="buyIcon"
+ src="@/assets/images/xiehe/detail/Collection.png"
+ style="margin-right: 10px"
+ />
+ </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 class="valueBox">
+ <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
+ size="large"
+ type="primary"
+ @click="useCode"
+ v-if="!bookInfo.alreadyBuy && currentBook?.state !== 'Normal'"
+ >浣跨敤璐功鐮�</el-button
+ >
+ <el-button
+ style="background-color: #144941; color: #fff"
+ @click="applyTextBook"
+ size="large"
+ type="primary"
+ v-if="!bookInfo.alreadyBuy && currentBook?.state !== 'Normal'"
+ >鐢宠璇曠敤</el-button
+ >
+
+ <el-button
+ plain
+ size="large"
+ @click="read"
+ v-if="bookInfo.alreadyBuy || currentBook?.state == 'Normal'"
+ >寮�濮嬮槄璇�</el-button
+ >
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <el-dialog v-model="buyBookCodeDialog" title="璐功" width="30%">
+ <div class="buyBookCode">
+ <div style="line-height: 30px">璐功鐮� 锛�</div>
+ <el-input style="width: 70%" v-model="activateCode" clearable />
+ </div>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button @click="buyBookCodeDialog = false">鍙栨秷</el-button>
+ <el-button type="primary" @click="userActiveCodeGet"> 婵�娲� </el-button>
+ </span>
+ </template>
+ </el-dialog>
+ <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">
+ <div v-if="bookInfo.catalogue" v-html="bookInfo.catalogue" class="catalogueContent"></div>
+ <el-empty description="鏆傛棤鏁版嵁" v-else />
+ </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="titleBorderBox">璧勬簮鍒嗗竷</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 v-else class="catalogue"><el-empty description="鏆傛棤鏁版嵁" /></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>
+ <teacherCertification :isShow="teacherDialog" @dialog-Change="dialogChange" />
+ </div>
+</template>
+
+<script setup>
+import moment from 'moment'
+import axios from 'axios'
+import * as echarts from 'echarts'
+import defaultImg from '@/assets/images/book-cover.png'
+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 teacherCertification from '@/views/personalCenter/teacherCertification.vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { ref, onBeforeMount, inject, reactive, onMounted, watchEffect } from 'vue'
+const MG = inject('MG')
+const config = inject('config')
+const logIn = inject('logIn')
+import { useUserStore } from '@/store'
+const userStore = useUserStore()
+let teacherDialog = ref(false)
+
+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 activateCode = ref('')
+let resourceHave = ref(true)
+let currentBook = ref(null)
+let loading = ref(false)
+let buyBookCodeDialog = ref(false)
+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',
+ },
+])
+
+onMounted(() => {
+ digitalTextId.value = route.query.bookId
+ getBookDetail(digitalTextId.value)
+ getRecommendBookList()
+ getTextBookList()
+})
+
+watchEffect(() => {
+ if (editableTabsValue.value == '6') {
+ getBookResource()
+ }
+})
+
+const getTextBookList = async () => {
+ const data = {
+ start: 0,
+ size: 9999,
+ topicIdOrRefCode: 'applyDigitalBook',
+ appRefCode: config.appRefCode,
+ sort: {
+ type: 'Desc',
+ field: 'CreateDate',
+ },
+ }
+ const res = await MG.ugc.getTopicMessageList(data)
+ if (res.datas && res.datas.length > 0) {
+ for (let i = 0; i < res.datas.length; i++) {
+ const item = res.datas[i]
+ item.content = JSON.parse(item.content)[0]
+ item.productId = item.content.id
+ }
+ currentBook.value = res.datas.find((item) => item.productId == digitalTextId.value)
+ }
+}
+
+const read = () => {
+ let token = localStorage.getItem(config.tokenKey)
+ const url = config.textBookResourceUrl + '?bookId=' + bookInfo.value.refCode + '&token=' + token
+ window.open(url)
+}
+
+const userActiveCodeGet = () => {
+ let lock = true
+ console.log(activateCode.value, 'activateCode.value')
+
+ if (activateCode.value == '') {
+ ElMessage({
+ type: 'error',
+ message: '璇疯緭鍏ユ縺娲荤爜锛�',
+ })
+ } else {
+ if (lock) {
+ lock = false
+
+ MG.store
+ .getActiveCode({
+ code: activateCode.value,
+ })
+ .then((res) => {
+ console.log(res, 'res')
+ const cfg = JSON.parse(res.config)
+ console.log(cfg, 'cfg')
+ if (cfg && cfg.length > 0) {
+ const isActive = cfg.findIndex((item) => item.id == digitalTextId.value)
+
+ if (isActive > -1) {
+ MG.store
+ .userActiveCode({
+ code: activateCode.value,
+ })
+ .then((res) => {
+ ElMessage({
+ type: res == '婵�娲绘垚鍔�' ? 'success' : 'error',
+ message: res,
+ })
+ activateCode.value = ''
+ buyBookCodeDialog.value = false
+ getBookDetail(digitalTextId.value)
+ lock = true
+ })
+ } else {
+ ElMessage({
+ type: 'error',
+ message: '鎮ㄨ緭鍏ョ殑璐功鐮佹湁璇�',
+ })
+ }
+ } else {
+ ElMessage({
+ type: 'error',
+ message: '鎮ㄨ緭鍏ョ殑璐功鐮佹湁璇�',
+ })
+ }
+ })
+ }
+ }
+}
+
+const useCode = () => {
+ if (localStorage.getItem(config.tokenKey)) {
+ buyBookCodeDialog.value = true
+ } else {
+ logIn()
+ }
+}
+
+const dialogChange = (val) => {
+ if (val == false) {
+ teacherDialog.value = false
+ } else {
+ teacherDialog.value = true
+ }
+}
+
+//鏀惰棌涔︾睄
+const collectBook = () => {
+ if (localStorage.getItem(config.tokenKey)) {
+ if (bookInfo.value.isFavourite) {
+ MG.store
+ .delProductLink({
+ productIds: [bookInfo.value.id],
+ linkType: 'FavoriteBookCity',
+ })
+ .then(() => {
+ bookInfo.value.isFavourite = false
+ })
+ } else {
+ let params = {
+ productIds: [bookInfo.value.id],
+ linkType: 'FavoriteBookCity',
+ }
+ MG.store.addProductLink(params).then((res) => {
+ bookInfo.value.isFavourite = true
+ })
+ }
+ } else {
+ logIn()
+ console.log(logIn)
+ }
+}
+
+//鐢宠璇曠敤
+const applyTextBook = async () => {
+ if (currentBook.value?.state == 'WaitAudit') {
+ ElMessageBox.confirm('鎮ㄥ凡鐢宠璇曠敤璇ヤ功锛屾槸鍚﹀墠寰�鏌ョ湅', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning',
+ }).then(() => {
+ router.push({
+ path: '/myApply',
+ })
+ })
+ } else {
+ toApply()
+ }
+}
+
+const toApply = () => {
+ if (localStorage.getItem(config.tokenKey)) {
+ if (userStore.userInfo && userStore.userInfo.role == 'Teacher') {
+ localStorage.setItem('applyBookInfo', JSON.stringify(bookInfo.value))
+ router.push({
+ path: '/textBookApply',
+ })
+ } else {
+ teacherDialog.value = true
+ }
+ } else {
+ logIn()
+ }
+}
+
+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 {
+ resourceHave.value = false
+ }
+ })
+ .catch((error) => {
+ console.log(error, 'error1')
+
+ 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,
+ },
+ 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) => {
+ loading.value = true
+ 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
+ loading.value = false
+ console.log(res.datas, 'res')
+ })
+}
+</script>
+
+<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: 18px;
+ line-height: 18px;
+ 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;
+ margin-top: 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;
+ }
+ }
+ }
+}
+.textbookContent,
+.authorInfo {
+ margin-top: 20px;
+ line-height: 28px;
+}
+.buyBookCode {
+ width: 100%;
+ display: flex;
+ padding: 40px 10px;
+ text-align: center;
+ align-items: center;
+}
+.tab-name {
+ width: 100px;
+ height: 40px;
+}
+</style>
--
Gitblit v1.9.1