From ef37c59e055a990ce247b265b27d3fcef430a243 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期五, 15 八月 2025 10:19:18 +0800
Subject: [PATCH] first submit
---
src/components/detail/detailInfo.vue | 960 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 960 insertions(+), 0 deletions(-)
diff --git a/src/components/detail/detailInfo.vue b/src/components/detail/detailInfo.vue
new file mode 100644
index 0000000..4209567
--- /dev/null
+++ b/src/components/detail/detailInfo.vue
@@ -0,0 +1,960 @@
+<template>
+ <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.caupress_projectTitle">
+ <el-tooltip
+ class="item"
+ effect="dark"
+ :content="bookInfo.caupress_projectTitle"
+ placement="top-start"
+ >
+ <div class="tagText">
+ {{ bookInfo.caupress_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.caupress_seriesName">
+ {{ bookInfo.caupress_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.caupress_author ? bookInfo.caupress_author : "-" }}
+ </div>
+ <div>
+ {{
+ bookInfo.caupress_publicationDate
+ ? moment(bookInfo.caupress_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.caupress_ISBN ? bookInfo.caupress_ISBN : "-" }}
+ </div>
+ <div>
+ {{
+ bookInfo.caupress_pubNumber
+ ? bookInfo.caupress_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>{{ this.tool.toDecimal2(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.caupress_paperBookDD) ||
+ bookInfo.caupress_paperBookJD ||
+ bookInfo.caupress_paperBookTmall
+ "
+ >
+ 绾歌川涔﹀叾浠栬喘涔版笭閬擄細
+ <span @click="toJDLink" v-if="bookInfo.caupress_paperBookJD">
+ <img
+ class="buyIcon"
+ src="@/assets/images/bookStore/浜笢icon-01.svg"
+ />浜笢</span
+ >
+ <span @click="toDDLink" v-if="bookInfo.caupress_paperBookDD"
+ ><img
+ class="buyIcon"
+ src="@/assets/images/bookStore/褰撳綋缃�.svg"
+ />褰撳綋</span
+ >
+ <span @click="toTmLink" v-if="bookInfo.caupress_paperBookTmall"
+ ><img
+ class="buyIcon"
+ src="@/assets/images/bookStore/tianmaologo2.svg"
+ />澶╃尗</span
+ >
+ </div>
+ </div>
+ <div class="btnBox">
+ <el-button
+ v-if="
+ currentRoute !== 'teachingServices' &&
+ !this.bookInfo.alreadyBuy &&
+ this.bookInfo.caupress_isSell &&
+ this.bookInfo.caupress_isSell == '1'
+ "
+ type="primary"
+ :disabled="this.bookInfo.alreadyBuy"
+ @click="gotoOrder"
+ >鐢靛瓙涔﹁喘涔�</el-button
+ >
+ <el-button
+ v-if="bookInfo.caupress_pdfFreeFile && !this.bookInfo.alreadyBuy"
+ type="primary"
+ plain
+ style="min-width: 98px"
+ @click="previewBook"
+ >璇曡</el-button
+ >
+ <el-button
+ v-else-if="bookInfo.caupress_pdfFile && this.bookInfo.alreadyBuy"
+ type="primary"
+ plain
+ style="min-width: 98px"
+ @click="previewBook"
+ >绔嬪嵆闃呰</el-button
+ >
+ <el-button
+ v-if="
+ currentRoute == 'teachingServices' && !this.bookInfo.alreadyBuy
+ "
+ plain
+ @click="addEbook"
+ >鐢靛瓙鏍蜂功</el-button
+ >
+ <el-button
+ v-if="currentRoute == 'teachingServices'"
+ plain
+ @click="addPaperBook"
+ >绾歌川鏍蜂功</el-button
+ >
+ </div>
+ </div>
+ </div>
+ <el-dialog
+ title="鑱旂郴缂栬緫"
+ :visible.sync="contactVisible"
+ width="30%"
+ :lock-scroll="false"
+ >
+ <div class="contactBox" v-if="this.bookInfo.caupress_editor">
+ <div class="contacItem">
+ <i class="iconfont icon-renwu-ren contacIcon"></i>
+ {{ this.bookInfo.caupress_editor.name }}
+ </div>
+ <div class="contacItem">
+ <i class="iconfont icon-QQ contacIcon"></i>
+ {{ this.bookInfo.caupress_editor.qq }}
+ </div>
+ <div class="contacItem">
+ <i class="iconfont icon-tongxunlu contacIcon"></i>
+ {{ this.bookInfo.caupress_editor.phone }}
+ </div>
+ <div class="contacItem">
+ <i class="iconfont icon-dianhua contacIcon"></i>
+ {{ this.bookInfo.caupress_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>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+ data() {
+ return {
+ tagText: "鏅�氶珮绛夋暀鑲插崄涓�浜旇鍒掓暀鏉愶紝鍏ㄥ浗楂樼瓑鏁欒偛鏃呮父瑙勫垝鏁欐潗",
+ price: 29,
+ dialogVisible: false,
+ contactVisible: false,
+ textarea: "",
+ // bookInfo: {},
+ currentRoute: this.$route,
+ discussAreaId: "", //璇勮ID
+
+ commentList: [],
+ editor: {
+ qq: "",
+ telephone: "",
+ mobilePhone: "",
+ name: "",
+ },
+ paginationData: {
+ page: 1,
+ limit: 10,
+ totalCount: 0,
+ totalPage: 0,
+ },
+ commentText: "",
+ requestedEBookList: [], // 宸茬敵璇风殑鐢靛瓙涔�
+ requestedPBookList: [], // 宸茬敵璇风殑绾歌川涔�
+ ebookTotalCount: 0,
+ pbookTotalCount: 0,
+ };
+ },
+ props: {
+ bookInfo: {
+ type: Object,
+ default: () => {},
+ },
+ },
+ created() {
+ console.log(this.userInfo, "userInfo");
+ this.currentRoute = this.currentRoute.fullPath.split("/")[1];
+ this.getCommentTopic();
+ this.getRequestedEBookList();
+ this.getRequestedPBookList();
+ let roleId = this.userInfo ? this.userInfo.roleId : null;
+ if (roleId) {
+ this.getEbookTicketRes();
+ this.getPbookTicketRes();
+ }
+ },
+ computed: {
+ ...mapState(["userInfo"]),
+ },
+ mounted() {},
+ methods: {
+ //鑾峰彇鐢靛瓙涔﹀墿浣欑敵璇锋鏁�
+ getEbookTicketRes() {
+ this.MG.app
+ .getTicketResult({
+ ticketRefCodeOrGuid: "electronicSampleBookapplyNum",
+ roleId: this.userInfo.roleId,
+ })
+ .then((res) => {
+ this.ebookTotalCount = res.totalCount - res.usedCount;
+ });
+ },
+ //鑾峰彇绾歌川鍓╀綑鐢宠娆℃暟
+ getPbookTicketRes() {
+ this.MG.app
+ .getTicketResult({
+ ticketRefCodeOrGuid: "paperSampleBookapplyNum",
+ roleId: this.userInfo.roleId,
+ })
+ .then((res) => {
+ this.pbookTotalCount = res.totalCount - res.usedCount;
+ });
+ },
+ //璺宠浆鑷充含涓滈摼鎺�
+ toJDLink() {
+ window.open(this.bookInfo.caupress_paperBookJD);
+ },
+
+ //璺宠浆鑷冲綋褰撻摼鎺�
+ toDDLink() {
+ window.open(this.bookInfo.caupress_paperBookDD);
+ },
+ toTmLink() {
+ window.open(this.bookInfo.caupress_paperBookTmall);
+ },
+ //鑾峰彇璇勮ID
+ getCommentTopic() {
+ this.MG.ugc
+ .getProductCommentTopic({
+ productId: this.$route.query.id,
+ appRefCode: this.config.appRefCode,
+ })
+ .then((res) => {
+ this.discussAreaId = res.id;
+ this.sysType = res.sysType;
+ this.getCommentList();
+ });
+ },
+
+ //鑾峰彇璇勮鍒楄〃
+ getCommentList() {
+ this.MG.ugc
+ .getTopicMessageList({
+ sort: {
+ type: "Desc",
+ field: "CreateDate",
+ },
+ size: this.paginationData.limit,
+ start: (this.paginationData.page - 1) * this.paginationData.limit,
+ appRefCode: this.config.appRefCode,
+ topicIdOrRefCode: JSON.stringify(this.discussAreaId),
+ })
+ .then((res) => {
+ this.commentList = res.datas;
+ this.commentList.forEach((item) => {
+ if (item.content) {
+ item.content = JSON.parse(item.content);
+ }
+ });
+ console.log(this.commentList, "this.commentList");
+ });
+ },
+
+ //鍙戣〃璇勮
+ sendDiscuss() {
+ if (this.textarea == "") {
+ this.$message({
+ showClose: true,
+ message: "璇勮涓嶈兘涓虹┖",
+ type: "error",
+ });
+ } else {
+ let content = {
+ content: this.textarea,
+ name: this.userInfo.name,
+ };
+ const data = {
+ topicIdOrRefCode: JSON.stringify(this.discussAreaId),
+ name: this.bookInfo.name,
+ icon: this.userInfo.icon,
+ content: JSON.stringify(content),
+ type: "ProductComment",
+ cmsTypeRefCode: "",
+ newDataListRequest: [],
+ };
+ this.MG.ugc.newTopicMessage(data).then((res) => {
+ this.$message({
+ showClose: true,
+ message: "璇勮鎴愬姛",
+ type: "success",
+ });
+ this.textarea = "";
+ this.getCommentList();
+ });
+ }
+ },
+ relation() {
+ this.contactVisible = true;
+ },
+ setInfo() {
+ if (this.userInfo == null) {
+ this.$router.push({
+ path: "/login",
+ query: {
+ redirectPath: this.$route.fullPath,
+ },
+ });
+ return;
+ }
+ this.dialogVisible = true;
+ },
+ //鍔犲叆绾歌川鏍蜂功
+ addPaperBook() {
+ if (!this.$store.state.token) {
+ this.$router.push({
+ path: "/login",
+ query: {
+ redirectPath: this.$route.fullPath,
+ },
+ });
+ } else {
+ if (this.$store.state.userInfo.role !== "Teacher") {
+ this.$message({
+ showClose: true,
+ message: "璇峰厛杩涜鏁欏笀璁よ瘉",
+ type: "warning",
+ });
+ return;
+ } else {
+ if (this.pbookTotalCount == 0) {
+ this.$message({
+ showClose: true,
+ message: "绾歌川涔︾敵璇锋鏁颁笉瓒筹紒",
+ type: "warning",
+ });
+ return;
+ }
+ let isHave = this.requestedPBookList.find(
+ (e) => e.state == "WaitAudit" && e.id == this.bookInfo.id
+ );
+ if (isHave) {
+ this.$message.warning("鎮ㄥ凡鐢宠璇ユ牱涔︼紝绛夊緟瀹℃牳涓�!");
+ return false;
+ }
+ if (this.$store.state.paperCopiesList.length >= 3) {
+ this.$message.warning("娣诲姞涔︾睄涓嶈兘瓒呰繃涓夋湰");
+ return;
+ }
+ if (this.$store.state.paperCopiesList.length > 0) {
+ let currentBook = this.$store.state.paperCopiesList.filter(
+ (item) => item.id == this.bookInfo.id
+ );
+ if (currentBook.length > 0) {
+ this.$message.warning("璇峰嬁閲嶅娣诲姞涔︾睄");
+ return;
+ } else {
+ this.$store.commit("addPbookList", this.bookInfo);
+ this.$message.success("娣诲姞鎴愬姛锛�");
+ }
+ } else {
+ this.$store.commit("addPbookList", this.bookInfo);
+ this.$message.success("娣诲姞鎴愬姛锛�");
+ }
+ }
+ }
+ },
+ // 鑾峰彇宸茬敵璇风殑鐢靛瓙涔�
+ getRequestedEBookList() {
+ const data = {
+ start: 0,
+ size: 99999999,
+ appRefCode: this.config.appRefCode,
+ topicIdOrRefCode: this.config.refCodes.applyBook,
+ };
+ this.MG.ugc.getTopicMessageList(data).then((res) => {
+ try {
+ if (res && res.datas.length > 0) {
+ let list = [];
+ for (let i = 0; i < res.datas.length; i++) {
+ const ele = res.datas[i];
+ if (ele.content) {
+ ele.content = JSON.parse(ele.content);
+ ele.content.map((item) => (item.state = ele.state));
+ }
+ if (ele.feedBack) {
+ ele.isRead = false;
+ ele.feedBack = JSON.parse(ele.feedBack);
+ const readDate = new Date(
+ ele.feedBack.endDate + " 23:59:59"
+ ).getTime();
+ const currentDate = Number(sessionStorage.currentDate);
+ if (readDate > currentDate) {
+ ele.isRead = true;
+ }
+ }
+ list.push(...ele.content);
+ }
+ this.requestedEBookList = list;
+ }
+ } catch (error) {
+ this.requestedEBookList = [];
+ }
+ });
+ },
+ // 鑾峰彇宸茬敵璇风殑绾歌川涔�
+ getRequestedPBookList() {
+ const data = {
+ start: 0,
+ size: 99999999,
+ appRefCode: this.config.appRefCode,
+ topicIdOrRefCode: this.config.refCodes.applyEntityBook,
+ };
+ this.MG.ugc.getTopicMessageList(data).then((res) => {
+ try {
+ if (res && res.datas.length > 0) {
+ let list = [];
+ for (let i = 0; i < res.datas.length; i++) {
+ const ele = res.datas[i];
+ if (ele.content) {
+ ele.content = JSON.parse(ele.content);
+ ele.content.map((item) => (item.state = ele.state));
+ }
+ list.push(...ele.content);
+ }
+ this.requestedPBookList = list;
+ }
+ } catch (error) {
+ this.requestedPBookList = [];
+ }
+ });
+ },
+ //鍔犲叆鐢靛瓙鏍蜂功
+ addEbook() {
+ if (!this.$store.state.token) {
+ this.$router.push({
+ path: "/login",
+ query: {
+ redirectPath: this.$route.fullPath,
+ },
+ });
+ } else {
+ console.log(this.ebookTotalCount, "this.ebookTotalCount");
+ console.log(this.pbookTotalCount, "this.pookTotalCount");
+ if (this.$store.state.userInfo.role !== "Teacher") {
+ this.$message({
+ showClose: true,
+ message: "璇峰厛杩涜鏁欏笀璁よ瘉",
+ type: "warning",
+ });
+
+ return;
+ }
+ if (this.ebookTotalCount == 0) {
+ this.$message({
+ showClose: true,
+ message: "鐢靛瓙涔︾敵璇锋鏁颁笉瓒筹紒",
+ type: "warning",
+ });
+ return;
+ } else {
+ if (this.bookInfo.alreadyBuy) {
+ this.$message.warning("鏈功宸插湪鏈夋晥鏈熷唴锛岃鍕块噸澶嶇敵璇�");
+ return;
+ }
+ let isHave = this.requestedEBookList.find(
+ (e) => e.state == "WaitAudit" && e.id == this.bookInfo.id
+ );
+ if (isHave) {
+ this.$message.warning("鎮ㄥ凡鐢宠璇ユ牱涔︼紝绛夊緟瀹℃牳涓�!");
+ return false;
+ }
+ if (this.$store.state.electronicBookList.length >= 3) {
+ this.$message.warning("娣诲姞涔︾睄涓嶈兘瓒呰繃涓夋湰");
+ return;
+ }
+ if (this.$store.state.electronicBookList.length > 0) {
+ let currentBook = this.$store.state.electronicBookList.filter(
+ (item) => item.id == this.bookInfo.id
+ );
+ if (currentBook.length > 0) {
+ this.$message.warning("璇峰嬁閲嶅娣诲姞涔︾睄");
+ return;
+ } else {
+ this.$store.commit("addEbookList", this.bookInfo);
+ this.$message.success("娣诲姞鎴愬姛锛�");
+ }
+ } else {
+ this.$store.commit("addEbookList", this.bookInfo);
+ this.$message.success("娣诲姞鎴愬姛锛�");
+ }
+ }
+ }
+ },
+ gotoOrder() {
+ if (this.$store.state.token) {
+ let saleMethod = this.bookInfo.saleMethod.find(
+ (item) => item.Type == "defaultSaleMethod"
+ );
+ if (saleMethod) {
+ console.log(saleMethod, "saleMethod");
+ this.MG.store
+ .initOrder({
+ requests: [
+ {
+ saleMethodId: saleMethod.Id,
+ count: 1,
+ },
+ ],
+ })
+ .then((res) => {
+ console.log(res, "res");
+ if (res.orderNumber) {
+ this.$router.push({
+ name: "bookStore-order",
+ query: {
+ orderNum: res.orderNumber,
+ },
+ });
+ } else {
+ this.$message.warning("褰撳墠涔︾睄閿�鍞柟寮忚繃鏈燂紝璇疯仈绯荤鐞嗗憳锛�");
+ }
+ });
+ } else {
+ this.$message({
+ message: "鏈幏鍙栧埌鍙敭鍗栫殑瑙勬牸锛岃鑱旂郴绠＄悊鍛橈紒",
+ type: "error",
+ });
+ }
+ } else {
+ this.$router.push({
+ path: "/login",
+ query: {
+ redirectPath: this.$route.fullPath,
+ },
+ });
+ }
+ },
+ collectBook() {
+ if (this.tool.getCookie(this.config.tokenKey)) {
+ if (this.bookInfo.isFavourite) {
+ this.MG.store
+ .delProductLink({
+ productIds: [this.$route.query.id],
+ linkType: "Favorite",
+ })
+ .then((res) => {
+ this.$parent.getData();
+ });
+ } else {
+ let params = {
+ productIds: [this.$route.query.id],
+ linkType: "Favorite",
+ };
+ if (this.$route.path == "/bookStore/detail") {
+ params.LinkTag = "bookStore";
+ } else {
+ params.LinkTag = "teachingServices";
+ }
+ this.MG.store.productLink(params).then((res) => {
+ this.$parent.getData();
+ });
+ }
+ } else {
+ this.$router.push({
+ path: "/login",
+ query: {
+ redirectPath: this.$route.fullPath,
+ },
+ });
+ }
+ },
+ previewBook() {
+ let routeUrl = this.$router.resolve({
+ name: "preview-pdf",
+ query: {
+ md5: this.bookInfo.alreadyBuy
+ ? this.bookInfo.caupress_pdfFile
+ : this.bookInfo.caupress_pdfFreeFile,
+ titleName: this.bookInfo.name,
+ productLinkPath: this.bookInfo.productLinkPath,
+ },
+ });
+ window.open(routeUrl.href, "_blank");
+ },
+ },
+};
+</script>
+
+<style scoped>
+.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;
+}
+</style>
--
Gitblit v1.9.1